ActionsEditor.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. MWF.xApplication.process = MWF.xApplication.process || {};
  2. MWF.xApplication.process.FormDesigner = MWF.xApplication.process.FormDesigner || {};
  3. MWF.xApplication.process.FormDesigner.widget = MWF.xApplication.process.FormDesigner.widget || {};
  4. MWF.require("MWF.widget.ScriptArea", null, false);
  5. MWF.require("MWF.widget.Maplist", null, false);
  6. MWF.xApplication.process.FormDesigner.widget.ActionsEditor = new Class({
  7. Implements: [Options, Events],
  8. Extends: MWF.widget.Common,
  9. options: {
  10. "style": "default",
  11. "maxObj": document.body,
  12. "isSystemTool" : false,
  13. "noCreate": false,
  14. "noDelete": false,
  15. "noCode": false,
  16. "noHide": false,
  17. "systemToolsAddress" : "../x_component_process_FormDesigner/Module/Actionbar/toolbars.json"
  18. },
  19. initialize: function(node, designer, module, options){
  20. this.setOptions(options);
  21. this.node = $(node);
  22. this.module = module;
  23. this.designer = designer;
  24. this.path = "../x_component_process_FormDesigner/widget/$ActionsEditor/";
  25. this.cssPath = "../x_component_process_FormDesigner/widget/$ActionsEditor/"+this.options.style+"/css.wcss";
  26. this._loadCss();
  27. this.actions = [];
  28. this.currentEditItem = null;
  29. this.createActionsAreaNode();
  30. },
  31. createActionsAreaNode: function(){
  32. this.actionsContainer = new Element("div", {
  33. "styles": this.css.actionsContainer
  34. }).inject(this.node);
  35. // var size = this.node.getUsefulSize();
  36. // this.eventsContainer.setStyle("height", size.y);
  37. },
  38. load: function(data){
  39. this.loadActionsArea();
  40. if (!this.options.noCreate) this.loadCreateActionButton();
  41. this.data = data;
  42. if ( !this.data || typeOf(this.data)!=="array") this.data = [];
  43. this.loadRestoreActionButton();
  44. this.data.each(function(actionData, idx){
  45. if (actionData.type!=="MWFToolBarSeparator"){
  46. var action = new MWF.xApplication.process.FormDesigner.widget.ActionsEditor.ButtonAction(this);
  47. action.load(actionData);
  48. this.actions.push(action);
  49. }
  50. }.bind(this));
  51. },
  52. loadActionsArea: function(){
  53. if (!this.options.noCreate){
  54. this.actionTitleArea = new Element("div", {
  55. "styles": this.css.actionTitleArea
  56. }).inject(this.actionsContainer);
  57. }
  58. this.actionArea = new Element("div", {
  59. "styles": this.css.actionArea
  60. }).inject(this.actionsContainer);
  61. },
  62. loadCreateActionButton: function(){
  63. this.createActionButtonButton = new Element("div", {
  64. "styles": this.css.createActionButton,
  65. "title" : this.designer.lp.actionbar.addCustomTool,
  66. "text": "+"
  67. }).inject(this.actionTitleArea);
  68. this.createActionButtonButton.addEvent("click", function(){
  69. this.addButtonAction();
  70. }.bind(this));
  71. },
  72. loadRestoreActionButton : function(){
  73. if( this.options.isSystemTool ){
  74. if( !this.actionTitleArea ){
  75. this.actionTitleArea = new Element("div", { "styles": this.css.actionTitleArea }).inject(this.actionArea,"before");
  76. }
  77. this.restoreActionButtonButton = new Element("div", {
  78. "styles": this.css.restoreActionButton,
  79. "title" : this.designer.lp.actionbar.restoreDefaultTool
  80. }).inject(this.actionTitleArea);
  81. this.restoreActionButtonButton.addEvent("click", function(){
  82. debugger;
  83. this.restoreButtonAction();
  84. }.bind(this));
  85. }
  86. },
  87. listRemovedSystemTool : function(){
  88. var list = [];
  89. if( !this.defaultTools ){
  90. MWF.getJSON( this.options.systemToolsAddress, function(tools){
  91. this.defaultTools = tools;
  92. if( this.options.target && this.options.target === "mobileForm" ){
  93. this.defaultTools.push({
  94. "type": "MWFToolBarButton",
  95. "img": "read.png",
  96. "title": this.designer.lp.actionbar.setReaded,
  97. "action": "readedWork",
  98. "text": this.designer.lp.actionbar.readed,
  99. "id": "action_readed",
  100. "control": "allowReadProcessing",
  101. "condition": "",
  102. "read": true
  103. });
  104. }
  105. }.bind(this), false);
  106. }
  107. this.defaultTools.each( function( tool ){
  108. var flag = true;
  109. for( var i=0; i<(this.data || []).length; i++ ){
  110. if( this.data[i].id === tool.id ){
  111. flag = false;
  112. break;
  113. }
  114. }
  115. if(flag)list.push(tool);
  116. }.bind(this));
  117. return list;
  118. },
  119. addButtonAction: function(){
  120. var o = {
  121. "type": "MWFToolBarButton",
  122. "img": "4.png",
  123. "title": "",
  124. "action": "",
  125. "text": "Unnamed",
  126. "actionScript" : "",
  127. "condition": "",
  128. "editShow": true,
  129. "readShow": true
  130. };
  131. var action = new MWF.xApplication.process.FormDesigner.widget.ActionsEditor.ButtonAction(this);
  132. action.load(o);
  133. this.data.push(o);
  134. this.actions.push(action);
  135. this.fireEvent("change", [{
  136. compareName: " [addAction]",
  137. force: true
  138. }]);
  139. },
  140. restoreButtonAction : function(){
  141. var list = this.listRemovedSystemTool();
  142. if( !list.length )return;
  143. var selectableItems = [];
  144. list.each( function(d){
  145. var title = "";
  146. if( d.text && this.designer.lp.actionBar ){
  147. title = this.designer.lp.actionBar[ d.text.split(".").getLast().replace("}}","") ] || "";
  148. title = title ? (" (" + title + ")") : "";
  149. }
  150. selectableItems.push( {
  151. name : d.text + title,
  152. id : d.id
  153. })
  154. }.bind(this));
  155. MWF.xDesktop.requireApp("Template", "Selector.Custom", null, false);
  156. var opt = {
  157. "count": 0,
  158. "title": this.designer.lp.actionbar.selectDefaultTool,
  159. "selectableItems" : selectableItems,
  160. "values": [],
  161. "onComplete": function( array ){
  162. if( !array || array.length === 0 )return;
  163. var actionNameList = [];
  164. array.each( function(tool){
  165. for( var i=0; i<list.length; i++ ){
  166. if( list[i].id === tool.data.id ){
  167. list[i].system = true;
  168. this.data.push( list[i] );
  169. actionNameList.push( list[i].action );
  170. var action = new MWF.xApplication.process.FormDesigner.widget.ActionsEditor.ButtonAction(this);
  171. action.load(list[i]);
  172. this.actions.push(action);
  173. break;
  174. }
  175. }
  176. }.bind(this));
  177. this.fireEvent("change", [{
  178. compareName: " [addSystemAction]:"+actionNameList,
  179. force: true
  180. }]);
  181. }.bind(this)
  182. };
  183. var selector = new MWF.xApplication.Template.Selector.Custom(this.options.maxObj, opt );
  184. selector.load();
  185. }
  186. });
  187. MWF.xApplication.process.FormDesigner.widget.ActionsEditor.ButtonAction = new Class({
  188. initialize: function (editor) {
  189. this.editor = editor;
  190. this.css = this.editor.css;
  191. this.container = this.editor.actionArea
  192. },
  193. load: function (data) {
  194. this.data = data;
  195. this.loadNode();
  196. var form = this.editor.designer.form || this.editor.designer.page || this.editor.designer.view;
  197. if (form && form.scriptDesigner){
  198. this.scriptItem = form.scriptDesigner.addScriptItem(this.data, "actionScript", this.editor.module, "action.tools", this.data.text);
  199. }
  200. var text = this.data.text;
  201. Object.defineProperty(this.data, "text", {
  202. configurable : true,
  203. enumerable : true,
  204. "get": function(){return text;},
  205. "set": function(v){
  206. if (this.scriptItem){
  207. this.scriptItem.par = v;
  208. this.scriptItem.resetText();
  209. }
  210. text = v;
  211. }.bind(this)
  212. });
  213. },
  214. loadNode: function () {
  215. this.node = new Element("div", {"styles": this.css.actionNode}).inject(this.container);
  216. this.titleNode = new Element("div", {"styles": this.css.actionTitleNode}).inject(this.node);
  217. this.iconNode = new Element("div", {"styles": this.css.actionIconNode}).inject(this.titleNode);
  218. this.textNode = new Element("div", {"styles": this.css.actionTextNode, "text": this.data.text}).inject(this.titleNode);
  219. if( this.data.text && this.editor.designer.lp.actionBar){
  220. var title = this.editor.designer.lp.actionBar[ this.data.text.split(".").getLast().replace("}}","") ] || "";
  221. this.textNode.set("title", title || "");
  222. }
  223. this.upButton = new Element("div", {"styles": this.css.actionUpButtonNode, "title": this.editor.designer.lp.actionbar.up}).inject(this.titleNode);
  224. this.propertiesButton = new Element("div", {"styles": this.css.actionPropertiesButtonNode, "title": this.editor.designer.lp.actionbar.property}).inject(this.titleNode);
  225. if (!this.data.properties || Object.keys(this.data.properties).length === 0 ){
  226. this.propertiesButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/property_empty.png)");
  227. }else{
  228. this.propertiesButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/property.png)");
  229. }
  230. this.propertiesNode = new Element("div", {"styles": this.css.actionScriptNode}).inject(this.node);
  231. this.propertiesArea = new MWF.widget.Maplist(this.propertiesNode, {
  232. "title": this.editor.designer.lp.actionbar.setProperties,
  233. "collapse": false,
  234. "onChange": function(){
  235. this.data.properties = this.propertiesArea.toJson();
  236. if (!this.data.properties || Object.keys(this.data.properties).length === 0 ){
  237. this.propertiesButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/property_empty.png)");
  238. }else{
  239. this.propertiesButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/property.png)");
  240. }
  241. this.editor.fireEvent("change", [{
  242. compareName: "."+this.getName() + ".property"
  243. }]);
  244. }.bind(this)
  245. });
  246. this.propertiesArea.load( this.data.properties || {});
  247. if (!this.editor.options.noDelete) this.delButton = new Element("div", {
  248. "styles": this.css.actionDelButtonNode,
  249. "text": "-",
  250. "title" : this.editor.designer.lp.actionbar.delete
  251. }).inject(this.titleNode);
  252. this.conditionButton = new Element("div", {"styles": this.css.actionConditionButtonNode, "title": this.editor.designer.lp.actionbar.hideCondition}).inject(this.titleNode);
  253. if (this.data.condition){
  254. this.conditionButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/code.png)");
  255. }else{
  256. this.conditionButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/code_empty.png)");
  257. }
  258. if (!this.editor.options.noEditShow && !this.data.system){
  259. this.editButton = new Element("div", {"styles": this.css.actionEditButtonNode, "title": this.editor.designer.lp.actionbar.edithide}).inject(this.titleNode);
  260. if (this.data.editShow){
  261. this.editButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/edit.png)");
  262. }else{
  263. this.editButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/edit_hide.png)");
  264. }
  265. }
  266. if (!this.editor.options.noReadShow && !this.data.system){
  267. this.readButton = new Element("div", {"styles": this.css.actionReadButtonNode, "title": this.editor.designer.lp.actionbar.readhide}).inject(this.titleNode);
  268. if (this.data.readShow){
  269. this.readButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/read.png)");
  270. }else{
  271. this.readButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/read_hide.png)");
  272. }
  273. }
  274. var icon = this.editor.path+this.editor.options.style+"/tools/"+this.data.img;
  275. this.iconNode.setStyle("background-image", "url("+icon+")");
  276. if (!this.editor.options.noCode && !this.data.system ){
  277. this.scriptNode = new Element("div", {"styles": this.css.actionScriptNode}).inject(this.node);
  278. this.scriptArea = new MWF.widget.ScriptArea(this.scriptNode, {
  279. "title": this.editor.designer.lp.actionbar.editScript,
  280. "isbind": false,
  281. "maxObj": this.editor.options.scriptMaxObj || this.editor.designer.formContentNode,
  282. "key": "actionScript",
  283. "onChange": function(){
  284. this.data.actionScript = this.scriptArea.editor.getValue();
  285. this.editor.fireEvent("change", [{
  286. compareName: "."+this.getName() + ".actionScript"
  287. }]);
  288. }.bind(this),
  289. "onSave": function(){
  290. this.data.actionScript = this.scriptArea.editor.getValue();
  291. this.editor.fireEvent("change", [{
  292. compareName: "."+this.getName() + ".actionScript"
  293. }]);
  294. this.editor.designer.saveForm();
  295. }.bind(this),
  296. "onPostLoad": function(){
  297. // this.scriptNode.setStyle("display", "none");
  298. }.bind(this)
  299. });
  300. this.scriptArea.load({"code": this.data.actionScript});
  301. }
  302. this.conditionNode = new Element("div", {"styles": this.css.actionScriptNode}).inject(this.node);
  303. this.conditionArea = new MWF.widget.ScriptArea(this.conditionNode, {
  304. "title": this.editor.designer.lp.actionbar.editCondition,
  305. "isbind": false,
  306. "maxObj": this.editor.options.scriptMaxObj || this.editor.designer.formContentNode,
  307. "onChange": function(){
  308. this.data.condition = this.conditionArea.editor.getValue();
  309. if (this.data.condition){
  310. this.conditionButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/code.png)");
  311. }else{
  312. this.conditionButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/code_empty.png)");
  313. }
  314. this.editor.fireEvent("change", [{
  315. compareName: "."+this.getName() + ".conditionScript"
  316. }]);
  317. }.bind(this),
  318. "onSave": function(){
  319. this.data.condition = this.conditionArea.editor.getValue();
  320. this.editor.fireEvent("change", [{
  321. compareName: "."+this.getName() + ".conditionScript"
  322. }]);
  323. this.editor.designer.saveForm();
  324. }.bind(this),
  325. "onPostLoad": function(){
  326. // this.conditionNode.setStyle("display", "none");
  327. }.bind(this)
  328. });
  329. this.conditionArea.load({"code": this.data.condition});
  330. this.setEvent();
  331. //this.loadEditNode();
  332. //this.loadChildNode();
  333. //this.setTitleNode();
  334. //this.setEditNode();
  335. },
  336. getName: function(){
  337. return this.data.action || this.data.text;
  338. },
  339. setEvent: function(){
  340. this.iconMenu = new MWF.widget.Menu(this.iconNode, {
  341. "event": "click",
  342. "style": "actionbarIcon",
  343. "onPostShow" : function (ev) {
  344. ev.stopPropagation();
  345. }
  346. });
  347. this.iconMenu.load();
  348. var _self = this;
  349. for (var i=1; i<=136; i++){
  350. var icon = this.editor.path+this.editor.options.style+"/tools/"+i+".png";
  351. var item = this.iconMenu.addMenuItem("", "click", function(ev){
  352. var src = this.item.getElement("img").get("src");
  353. _self.data.img = src.substr(src.lastIndexOf("/")+1, src.length);
  354. _self.data.customImg = true;
  355. _self.iconNode.setStyle("background-image", "url("+src+")");
  356. _self.editor.fireEvent("change", [{
  357. compareName: "."+_self.getName() + ".img"
  358. }]);
  359. ev.stopPropagation();
  360. }, icon);
  361. item.iconName = i+".png";
  362. }
  363. this.upButton.addEvent("click", function(e){
  364. var actions = this.editor.actions;
  365. var dataList = this.editor.data;
  366. var dataIndex = dataList.indexOf( this.data );
  367. var index = actions.indexOf( this );
  368. if( index === 0 || dataIndex === 0 ){
  369. e.stopPropagation();
  370. return;
  371. }
  372. var index_before = index-1;
  373. var action = actions[index_before];
  374. this.node.inject(action.node, "before");
  375. actions[index_before] = actions.splice(index, 1, actions[index_before])[0];
  376. this.editor.actions = actions;
  377. var dataIndex_before = dataIndex - 1;
  378. dataList[dataIndex_before] = dataList.splice(dataIndex, 1, dataList[dataIndex_before])[0];
  379. this.editor.data = dataList;
  380. this.editor.fireEvent("change", [{
  381. compareName: "."+this.getName() + " [up]"
  382. }]);
  383. e.stopPropagation();
  384. }.bind(this));
  385. this.propertiesButton.addEvent("click", function(e){
  386. var dis = this.propertiesNode.getStyle("display");
  387. if (dis=="none"){
  388. this.propertiesNode.setStyle("display", "block");
  389. }else{
  390. this.propertiesNode.setStyle("display", "none");
  391. }
  392. e.stopPropagation();
  393. }.bind(this));
  394. this.textNode.addEvent("click", function(e){
  395. this.textNode.empty();
  396. var editTitleNode = new Element("input", {"styles": this.css.actionEditTextNode, "type": "text", "value": this.data.text}).inject(this.textNode);
  397. editTitleNode.focus();
  398. editTitleNode.select();
  399. var _self = this;
  400. editTitleNode.addEvent("blur", function(){_self.editTitleComplete(this);});
  401. editTitleNode.addEvent("keydown:keys(enter)", function(){_self.editTitleComplete(this);});
  402. editTitleNode.addEvent("click", function(e){e.stopPropagation()});
  403. e.stopPropagation();
  404. }.bind(this));
  405. this.conditionButton.addEvent("click", function(e){
  406. e.stopPropagation();
  407. this.editCondition();
  408. }.bind(this));
  409. if (this.editButton) this.editButton.addEvent("click", function(e){
  410. if (this.data.editShow){
  411. this.editButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/edit_hide.png)");
  412. this.data.editShow = false;
  413. }else{
  414. this.editButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/edit.png)");
  415. this.data.editShow = true;
  416. }
  417. this.editor.fireEvent("change", [{
  418. compareName: "."+this.getName() + ".editShow"
  419. }]);
  420. e.stopPropagation();
  421. }.bind(this));
  422. if (this.readButton) this.readButton.addEvent("click", function(e){
  423. if (this.data.readShow){
  424. this.readButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/read_hide.png)");
  425. this.data.readShow = false;
  426. }else{
  427. this.readButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/read.png)");
  428. this.data.readShow = true;
  429. }
  430. this.editor.fireEvent("change", [{
  431. compareName: "."+this.getName() + ".readShow"
  432. }]);
  433. e.stopPropagation();
  434. }.bind(this));
  435. this.titleNode.addEvent("click", function(){
  436. if (this.scriptNode){
  437. var dis = this.scriptNode.getStyle("display");
  438. if (dis=="none"){
  439. this.scriptNode.setStyle("display", "block");
  440. if (this.scriptArea){
  441. this.scriptArea.resizeContentNodeSize();
  442. if (this.scriptArea.editor) this.scriptArea.editor.resize();
  443. if (!this.scriptArea.jsEditor){
  444. this.scriptArea.contentNode.empty();
  445. this.scriptArea.loadEditor({"code": this.data.actionScript});
  446. }
  447. }
  448. }else{
  449. this.scriptNode.setStyle("display", "none");
  450. }
  451. }
  452. }.bind(this));
  453. if (this.delButton) this.delButton.addEvent("click", function(e){
  454. var _self = this;
  455. this.editor.designer.confirm("warn", this.delButton, MWF.APPFD.LP.notice.deleteButtonTitle, MWF.APPFD.LP.notice.deleteButton, 300, 120, function(){
  456. _self.destroy();
  457. this.close();
  458. }, function(){
  459. this.close();
  460. }, null);
  461. e.stopPropagation();
  462. }.bind(this));
  463. },
  464. editCondition: function(){
  465. var dis = this.conditionNode.getStyle("display");
  466. if (dis=="none"){
  467. this.conditionNode.setStyle("display", "block");
  468. if (this.conditionArea){
  469. this.conditionArea.resizeContentNodeSize();
  470. if (this.conditionArea.editor) this.conditionArea.editor.resize();
  471. if (!this.conditionArea.jsEditor){
  472. this.conditionArea.contentNode.empty();
  473. this.conditionArea.loadEditor({"code": this.data.condition});
  474. }
  475. }
  476. }else{
  477. this.conditionNode.setStyle("display", "none");
  478. }
  479. },
  480. destroy: function(){
  481. var form = this.editor.designer.form || this.editor.designer.page || this.editor.designer.view;
  482. if ( form && form.scriptDesigner){
  483. form.scriptDesigner.deleteScriptItem(this.editor.module, "action.tools", this.data.text);
  484. }
  485. this.editor.data.erase(this.data);
  486. this.editor.actions.erase(this);
  487. this.editor.fireEvent("change", [{
  488. compareName: "."+this.getName() + " [delete]"
  489. }]);
  490. this.node.destroy();
  491. MWF.release(this.scriptArea);
  492. MWF.release(this);
  493. },
  494. editTitleComplete: function(el){
  495. this.data.text = el.get("value");
  496. this.data.title = el.get("value");
  497. el.destroy();
  498. this.textNode.empty();
  499. this.textNode.set("text", this.data.text);
  500. this.editor.fireEvent("change", [{
  501. compareName: "."+this.getName() + ".text"
  502. }]);
  503. }
  504. });