ActionsEditor.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. MWF.xApplication.cms.FormDesigner.widget = MWF.xApplication.cms.FormDesigner.widget || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "widget.ActionsEditor", null, false);
  3. MWF.xApplication.cms.FormDesigner.widget.ActionsEditor = new Class({
  4. Extends: MWF.xApplication.process.FormDesigner.widget.ActionsEditor,
  5. load: function(data){
  6. this.loadActionsArea();
  7. if (!this.options.noCreate) this.loadCreateActionButton();
  8. this.data = data;
  9. if (this.data){
  10. if (typeOf(this.data)!="array") this.data = [];
  11. this.data.each(function(actionData, idx){
  12. var action = new MWF.xApplication.cms.FormDesigner.widget.ActionsEditor.ButtonAction(this);
  13. action.load(actionData);
  14. this.actions.push(action);
  15. }.bind(this));
  16. }
  17. },
  18. addButtonAction: function(){
  19. var o = {
  20. "type": "MWFToolBarButton",
  21. "img": "4.png",
  22. "title": "",
  23. "action": "",
  24. "text": "Unnamed",
  25. "actionScript" : "",
  26. "condition": "",
  27. "editShow": true,
  28. "readShow": true
  29. };
  30. var action = new MWF.xApplication.cms.FormDesigner.widget.ActionsEditor.ButtonAction(this);
  31. action.load(o);
  32. this.data.push(o);
  33. this.actions.push(action);
  34. this.fireEvent("change");
  35. }
  36. });
  37. MWF.xApplication.cms.FormDesigner.widget.ActionsEditor.ButtonAction = new Class({
  38. Extends: MWF.xApplication.process.FormDesigner.widget.ActionsEditor.ButtonAction,
  39. loadNode: function () {
  40. this.node = new Element("div", {"styles": this.css.actionNode}).inject(this.container);
  41. this.titleNode = new Element("div", {"styles": this.css.actionTitleNode}).inject(this.node);
  42. this.iconNode = new Element("div", {"styles": this.css.actionIconNode}).inject(this.titleNode);
  43. this.textNode = new Element("div", {"styles": this.css.actionTextNode, "text": this.data.text}).inject(this.titleNode);
  44. if (!this.editor.options.noDelete)this.delButton = new Element("div", {"styles": this.css.actionDelButtonNode, "text": "-"}).inject(this.titleNode);
  45. this.conditionButton = new Element("div", {"styles": this.css.actionConditionButtonNode, "title": this.editor.designer.lp.actionbar.hideCondition}).inject(this.titleNode);
  46. if (this.data.condition){
  47. this.conditionButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/code.png)");
  48. }else{
  49. this.conditionButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/code_empty.png)");
  50. }
  51. this.editButton = new Element("div", {"styles": this.css.actionEditButtonNode, "title": this.editor.designer.lp.actionbar.edithide}).inject(this.titleNode);
  52. if (this.data.editShow){
  53. this.editButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/edit.png)");
  54. }else{
  55. this.editButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/edit_hide.png)");
  56. }
  57. this.readButton = new Element("div", {"styles": this.css.actionReadButtonNode, "title": this.editor.designer.lp.actionbar.readhide}).inject(this.titleNode);
  58. if (this.data.readShow){
  59. this.readButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/read.png)");
  60. }else{
  61. this.readButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/read_hide.png)");
  62. }
  63. var icon = this.editor.path+this.editor.options.style+"/tools/"+this.data.img;
  64. this.iconNode.setStyle("background-image", "url("+icon+")");
  65. if (!this.editor.options.noCode) {
  66. this.scriptNode = new Element("div", {"styles": this.css.actionScriptNode}).inject(this.node);
  67. this.scriptArea = new MWF.widget.ScriptArea(this.scriptNode, {
  68. "title": this.editor.designer.lp.actionbar.editScript,
  69. "maxObj": this.editor.designer.formContentNode,
  70. "onChange": function () {
  71. this.data.actionScript = this.scriptArea.editor.getValue();
  72. this.editor.fireEvent("change");
  73. }.bind(this),
  74. "onSave": function () {
  75. this.data.actionScript = this.scriptArea.editor.getValue();
  76. this.editor.fireEvent("change");
  77. this.editor.designer.saveForm();
  78. }.bind(this),
  79. "onPostLoad": function () {
  80. // this.scriptNode.setStyle("display", "none");
  81. }.bind(this),
  82. "helpStyle": "cms"
  83. });
  84. this.scriptArea.load({"code": this.data.actionScript});
  85. }
  86. this.conditionNode = new Element("div", {"styles": this.css.actionScriptNode}).inject(this.node);
  87. this.conditionArea = new MWF.widget.ScriptArea(this.conditionNode, {
  88. "title": this.editor.designer.lp.actionbar.editCondition,
  89. "maxObj": this.editor.designer.formContentNode,
  90. "onChange": function(){
  91. this.data.condition = this.conditionArea.editor.getValue();
  92. if (this.data.condition){
  93. this.conditionButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/code.png)");
  94. }else{
  95. this.conditionButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/code_empty.png)");
  96. }
  97. this.editor.fireEvent("change");
  98. }.bind(this),
  99. "onSave": function(){
  100. this.data.condition = this.conditionArea.editor.getValue();
  101. this.editor.fireEvent("change");
  102. this.editor.designer.saveForm();
  103. }.bind(this),
  104. "onPostLoad": function(){
  105. // this.conditionNode.setStyle("display", "none");
  106. }.bind(this),
  107. "helpStyle" : "cms"
  108. });
  109. this.conditionArea.load({"code": this.data.condition});
  110. this.setEvent();
  111. //this.loadEditNode();
  112. //this.loadChildNode();
  113. //this.setTitleNode();
  114. //this.setEditNode();
  115. },
  116. setEvent: function(){
  117. this.iconMenu = new MWF.widget.Menu(this.iconNode, {"event": "click", "style": "actionbarIcon"});
  118. this.iconMenu.load();
  119. var _self = this;
  120. for (var i=-6; i<0; i++){
  121. //var icon = this.editor.path+this.editor.options.style+"/tools/"+i+".png";
  122. var icon = "/x_component_cms_FormDesigner/Module/Actionbar/"+this.editor.options.style+"/custom/"+i+".png";
  123. var item = this.iconMenu.addMenuItem("", "click", function(){
  124. var src = this.item.getElement("img").get("src");
  125. _self.data.img = src.substr(src.lastIndexOf("/")+1, src.length);
  126. _self.iconNode.setStyle("background-image", "url("+src+")");
  127. _self.editor.fireEvent("change");
  128. }, icon);
  129. item.iconName = i+".png";
  130. }
  131. for (var i=1; i<=121; i++){
  132. //var icon = this.editor.path+this.editor.options.style+"/tools/"+i+".png";
  133. var icon = "/x_component_cms_FormDesigner/Module/Actionbar/"+this.editor.options.style+"/custom/"+i+".png";
  134. var item = this.iconMenu.addMenuItem("", "click", function(){
  135. var src = this.item.getElement("img").get("src");
  136. _self.data.img = src.substr(src.lastIndexOf("/")+1, src.length);
  137. _self.iconNode.setStyle("background-image", "url("+src+")");
  138. _self.editor.fireEvent("change");
  139. }, icon);
  140. item.iconName = i+".png";
  141. }
  142. this.textNode.addEvent("click", function(e){
  143. this.textNode.empty();
  144. var editTitleNode = new Element("input", {"styles": this.css.actionEditTextNode, "type": "text", "value": this.data.text}).inject(this.textNode);
  145. editTitleNode.focus();
  146. editTitleNode.select();
  147. var _self = this;
  148. editTitleNode.addEvent("blur", function(){_self.editTitleComplete(this);});
  149. editTitleNode.addEvent("keydown:keys(enter)", function(){_self.editTitleComplete(this);});
  150. editTitleNode.addEvent("click", function(e){e.stopPropagation()});
  151. e.stopPropagation();
  152. }.bind(this));
  153. this.conditionButton.addEvent("click", function(e){
  154. e.stopPropagation();
  155. this.editCondition();
  156. }.bind(this));
  157. this.editButton.addEvent("click", function(e){
  158. if (this.data.editShow){
  159. this.editButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/edit_hide.png)");
  160. this.data.editShow = false;
  161. }else{
  162. this.editButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/edit.png)");
  163. this.data.editShow = true;
  164. }
  165. this.editor.fireEvent("change");
  166. e.stopPropagation();
  167. }.bind(this));
  168. this.readButton.addEvent("click", function(e){
  169. if (this.data.readShow){
  170. this.readButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/read_hide.png)");
  171. this.data.readShow = false;
  172. }else{
  173. this.readButton.setStyle("background-image", "url("+this.editor.path+this.editor.options.style+"/icon/read.png)");
  174. this.data.readShow = true;
  175. }
  176. this.editor.fireEvent("change");
  177. e.stopPropagation();
  178. }.bind(this));
  179. this.titleNode.addEvent("click", function(){
  180. if (this.scriptNode){
  181. var dis = this.scriptNode.getStyle("display");
  182. if (dis=="none"){
  183. this.scriptNode.setStyle("display", "block");
  184. if (this.scriptArea){
  185. this.scriptArea.resizeContentNodeSize();
  186. if (this.scriptArea.editor) this.scriptArea.editor.resize();
  187. if (!this.scriptArea.jsEditor){
  188. this.scriptArea.contentNode.empty();
  189. this.scriptArea.loadEditor({"code": this.data.actionScript});
  190. }
  191. }
  192. }else{
  193. this.scriptNode.setStyle("display", "none");
  194. }
  195. }
  196. }.bind(this));
  197. if (this.delButton) this.delButton.addEvent("click", function(e){
  198. var _self = this;
  199. this.editor.designer.confirm("warn", this.delButton, MWF.APPFD.LP.notice.deleteButtonTitle, MWF.APPFD.LP.notice.deleteButton, 300, 120, function(){
  200. _self.destroy();
  201. this.close();
  202. }, function(){
  203. this.close();
  204. }, null);
  205. e.stopPropagation();
  206. }.bind(this));
  207. }
  208. });