EventsEditor.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  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.xApplication.process.FormDesigner.widget.EventsEditor = new Class({
  6. Implements: [Options, Events],
  7. Extends: MWF.widget.Common,
  8. options: {
  9. "style": "default",
  10. "maxObj": document.body
  11. },
  12. initialize: function(node, designer, options){
  13. this.setOptions(options);
  14. this.node = $(node);
  15. this.app = designer;
  16. debugger;
  17. this.path = "../x_component_process_FormDesigner/widget/$EventsEditor/";
  18. this.cssPath = "../x_component_process_FormDesigner/widget/$EventsEditor/"+this.options.style+"/css.wcss";
  19. this._loadCss();
  20. this.items = [];
  21. this.currentEditItem = null;
  22. this.createEventsAreaNode();
  23. },
  24. createEventsAreaNode: function(){
  25. this.eventsContainer = new Element("div", {
  26. "styles": this.css.eventsContainer
  27. }).inject(this.node);
  28. var size = this.node.getUsefulSize();
  29. // this.eventsContainer.setStyle("height", size.y);
  30. },
  31. load: function(data, module, path){
  32. this.data = data;
  33. this.module = module;
  34. this.scriptPath = path;
  35. Object.each(data, function(obj, key){
  36. var item = new MWF.xApplication.process.FormDesigner.widget.EventsEditor.Item(this);
  37. item.load(key, obj);
  38. this.items.push(item);
  39. }.bind(this));
  40. },
  41. deleteItem: function(item){
  42. this.items.erase(item);
  43. var data;
  44. if (this.data[item.event]){
  45. data = Object.clone( this.data[item.event] );
  46. this.data[item.event].code = "";
  47. this.data[item.event].html = "";
  48. delete this.data[item.event];
  49. }
  50. item.deleteScriptDesignerItem();
  51. this.fireEvent("change", [item.event, null, data, item.event+" [delete]"]);
  52. if (item.container){
  53. item.container.destroy();
  54. }
  55. },
  56. addItem: function(item){
  57. this.data[item.event] = item.data;
  58. this.fireEvent("change", [item.event, Object.clone(item.data)]);
  59. this.items.push(item);
  60. },
  61. addEventItem: function(){
  62. var item = new MWF.xApplication.process.FormDesigner.widget.EventsEditor.Item(this);
  63. item.load("", "");
  64. }
  65. });
  66. MWF.xApplication.process.FormDesigner.widget.EventsEditor.Item = new Class({
  67. initialize: function(editor){
  68. this.editor = editor;
  69. },
  70. load: function(event, data){
  71. if (!event){
  72. this.create();
  73. }else{
  74. this.event = event;
  75. this.data = data;
  76. this.oldData = Object.clone(data);
  77. this.createContainer();
  78. this.createActions();
  79. }
  80. },
  81. create: function(){
  82. this.event = "";
  83. this.data = {"code": "", "html": ""};
  84. this.createContainerTitle();
  85. this.createInput = new Element("input", {
  86. "styles": this.editor.css.createInput
  87. }).inject(this.textNode);
  88. this.createInput.focus();
  89. this.createInput.addEvents({
  90. "keydown": function(e){
  91. if (e.code==13){
  92. this.checkCreate();
  93. }
  94. }.bind(this),
  95. "blur": function(){
  96. this.checkCreate();
  97. }.bind(this)
  98. });
  99. },
  100. checkCreate: function(){
  101. var event = this.createInput.get("value");
  102. if (!event){
  103. this.editor.deleteItem(this);
  104. return false;
  105. }
  106. if (this.editor.data[event]){
  107. this.iconNode.setStyle("background", "url("+this.editor.path+this.editor.options.style+"/icon/error.png) center center no-repeat");
  108. this.iconNode.title = MWF.LP.process.repetitionsEvent;
  109. this.createInput.focus();
  110. }else{
  111. this.event = event;
  112. this.container.destroy();
  113. this.load(this.event, this.data);
  114. this.editCode();
  115. this.editor.addItem(this);
  116. this.bindScriptDesigner();
  117. }
  118. },
  119. bindScriptDesigner: function(){
  120. var form = this.editor.app.form || this.editor.app.page;
  121. if (form.scriptDesigner) form.scriptDesigner.addScriptItem(this.data, "code", this.editor.module, this.editor.scriptPath+"."+this.event);
  122. },
  123. deleteScriptDesignerItem: function(){
  124. var form = this.editor.app.form || this.editor.app.page || this.editor.app.view;
  125. if (form.scriptDesigner){
  126. form.scriptDesigner.deleteScriptItem(this.editor.module, this.editor.scriptPath+"."+this.event);
  127. }
  128. },
  129. createContainerTitle: function(){
  130. this.container = new Element("div", {
  131. "styles": this.editor.css.itemContainer
  132. }).inject(this.editor.eventsContainer);
  133. this.titleContainer = new Element("div", {
  134. "styles": this.editor.css.itemTitleContainer
  135. }).inject(this.container);
  136. this.iconNode = new Element("div", {
  137. "styles": this.editor.css.iconNode
  138. }).inject(this.titleContainer);
  139. this.actionNode = new Element("div", {
  140. "styles": this.editor.css.actionNode
  141. }).inject(this.titleContainer);
  142. this.textNode = new Element("div", {
  143. "styles": this.editor.css.textNode,
  144. "text": this.event
  145. }).inject(this.titleContainer);
  146. },
  147. createContainer: function(){
  148. this.createContainerTitle();
  149. this.codeNode = new Element("div", {
  150. "styles": this.editor.css.codeNode
  151. }).inject(this.container);
  152. this.titleContainer.addEvents({
  153. "mouseover": function(){
  154. this.actionNode.fade("in");
  155. }.bind(this),
  156. "mouseout": function(){
  157. this.actionNode.fade("out");
  158. }.bind(this)
  159. });
  160. this.textNode.addEvent("click", function(){
  161. this.editCode();
  162. }.bind(this));
  163. this.checkIcon();
  164. },
  165. editCode: function(){
  166. if (this.editor.currentEditItem){
  167. if (this.editor.currentEditItem!=this) this.editor.currentEditItem.editCodeComplete();
  168. }
  169. if (this.editor.currentEditItem!=this){
  170. if (!this.codeEditor){
  171. var moduleType = this.editor.module.type;
  172. if( moduleType === "Datatable" ){
  173. if( this.editor.app && this.editor.app.currentDesignerMode ){
  174. moduleType = moduleType + this.editor.app.currentDesignerMode;
  175. }
  176. }
  177. this.codeEditor = new MWF.widget.ScriptArea(this.codeNode, {
  178. "style": "event",
  179. "isbind": false,
  180. "api": "../api/MWF.xApplication.process.Xform."+moduleType+".html#event:"+this.event,
  181. "title": "on"+this.event+" (S)",
  182. "maxObj": this.editor.options.maxObj,
  183. "onChange": function(){
  184. var json = this.codeEditor.toJson();
  185. this.data.code = json.code;
  186. this.data.html = json.html;
  187. this.editor.fireEvent("change", [this.event, Object.clone(this.data), this.oldData]);
  188. this.checkIcon();
  189. }.bind(this),
  190. "onSave": function(){
  191. var json = this.codeEditor.toJson();
  192. this.data.code = json.code;
  193. this.data.html = json.html;
  194. this.editor.fireEvent("change", [this.event, Object.clone(this.data), this.oldData]);
  195. this.editor.app.saveForm();
  196. }.bind(this)
  197. });
  198. this.codeEditor.load(this.data);
  199. }
  200. if (!this.morph){
  201. this.morph = new Fx.Morph(this.codeNode, {duration: 200});
  202. }
  203. this.codeNode.setStyle("display", "block");
  204. this.morph.start({"height": [0,300]}).chain(function(){
  205. this.codeEditor.resizeContentNodeSize();
  206. this.codeEditor.focus();
  207. // this.fireEvent("postShow");
  208. }.bind(this));
  209. this.editor.currentEditItem = this;
  210. }else{
  211. this.editCodeComplete();
  212. }
  213. },
  214. editCodeComplete: function(){
  215. if (this.codeEditor){
  216. var json = this.codeEditor.toJson();
  217. this.data.code = json.code;
  218. this.data.html = json.html;
  219. this.editor.fireEvent("change", [this.event, Object.clone(this.data), this.oldData]);
  220. this.checkIcon();
  221. }
  222. if (!this.morph){
  223. this.morph = new Fx.Morph(this.codeNode, {duration: 200});
  224. }
  225. this.morph.start({"height": [300,0]}).chain(function(){
  226. this.codeNode.setStyle("display", "none");
  227. // this.fireEvent("postHide");
  228. }.bind(this));
  229. this.editor.currentEditItem = null;
  230. },
  231. createActions: function(){
  232. var deleteAction = new Element("div", {
  233. "styles": this.editor.css.actionNodeDelete
  234. }).inject(this.actionNode);
  235. deleteAction.addEvent("click", function(e){
  236. var item = this;
  237. this.editor.app.confirm("warn", e, this.editor.app.lp.notice.deleteEventTitle, this.editor.app.lp.notice.deleteEvent, 300, 120, function(){
  238. item.editor.deleteItem(item);
  239. this.close();
  240. }, function(){
  241. this.close();
  242. }, null);
  243. }.bind(this));
  244. var addAction = new Element("div", {
  245. "styles": this.editor.css.actionNodeAdd
  246. }).inject(this.actionNode);
  247. addAction.addEvent("click", function(e){
  248. this.editor.addEventItem();
  249. }.bind(this));
  250. },
  251. checkIcon: function(){
  252. if (this.data.code){
  253. this.iconNode.setStyle("background", "url("+this.editor.path+this.editor.options.style+"/icon/code.png) center center no-repeat");
  254. }else{
  255. this.iconNode.setStyle("background", "url("+this.editor.path+this.editor.options.style+"/icon/code_empty.png) center center no-repeat");
  256. }
  257. }
  258. });