Main.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845
  1. MWF.APPSD = MWF.xApplication.process.ScriptDesigner;
  2. MWF.APPSD.options = {
  3. "multitask": true,
  4. "executable": false
  5. };
  6. //MWF.xDesktop.requireApp("process.ProcessManager", "Actions.RestActions", null, false);
  7. MWF.xDesktop.requireApp("process.ScriptDesigner", "Script", null, false);
  8. MWF.require("MWF.xDesktop.UserData", null, false);
  9. MWF.xApplication.process.ScriptDesigner.Main = new Class({
  10. Extends: MWF.xApplication.Common.Main,
  11. Implements: [Options, Events],
  12. options: {
  13. "style": "default",
  14. "name": "process.ScriptDesigner",
  15. "icon": "icon.png",
  16. "title": MWF.APPSD.LP.title,
  17. "appTitle": MWF.APPSD.LP.title,
  18. "id": "",
  19. "actions": null,
  20. "category": null,
  21. "processData": null
  22. },
  23. onQueryLoad: function(){
  24. if (this.status){
  25. this.options.application = this.status.applicationId;
  26. this.application = this.status.application;
  27. this.options.id = this.status.id;
  28. }
  29. if (!this.options.id){
  30. this.options.desktopReload = false;
  31. this.options.title = this.options.title + "-"+MWF.APPSD.LP.newScript;
  32. }
  33. this.actions = MWF.Actions.get("x_processplatform_assemble_designer");
  34. //this.actions = new MWF.xApplication.process.ProcessManager.Actions.RestActions();
  35. this.lp = MWF.xApplication.process.ScriptDesigner.LP;
  36. this.addEvent("queryClose", function(e){
  37. if (this.explorer && this.explorer.app && this.explorer.app.window){
  38. this.explorer.reload();
  39. }
  40. }.bind(this));
  41. // this.processData = this.options.processData;
  42. },
  43. loadApplication: function(callback){
  44. this.createNode();
  45. if (!this.options.isRefresh){
  46. this.maxSize(function(){
  47. this.openScript();
  48. }.bind(this));
  49. }else{
  50. this.openScript();
  51. }
  52. if (callback) callback();
  53. },
  54. createNode: function(){
  55. this.content.setStyle("overflow", "hidden");
  56. this.node = new Element("div", {
  57. "styles": {"width": "100%", "height": "100%", "overflow": "hidden"}
  58. }).inject(this.content);
  59. },
  60. getApplication:function(callback){
  61. if (!this.application){
  62. this.actions.getApplication(this.options.application, function(json){
  63. this.application = {"name": json.data.name, "id": json.data.id};
  64. if (callback) callback();
  65. }.bind(this));
  66. }else{
  67. if (callback) callback();
  68. }
  69. },
  70. openScript: function(){
  71. this.getApplication(function(){
  72. this.loadNodes();
  73. this.loadScriptListNodes();
  74. this.loadContentNode(function(){
  75. this.loadProperty();
  76. // this.loadTools();
  77. this.resizeNode();
  78. this.addEvent("resize", this.resizeNode.bind(this));
  79. this.loadScript();
  80. if (this.toolbarContentNode){
  81. this.setScrollBar(this.toolbarContentNode, null, {
  82. "V": {"x": 0, "y": 0},
  83. "H": {"x": 0, "y": 0}
  84. });
  85. this.setScrollBar(this.propertyDomArea, null, {
  86. "V": {"x": 0, "y": 0},
  87. "H": {"x": 0, "y": 0}
  88. });
  89. }
  90. }.bind(this));
  91. }.bind(this));
  92. },
  93. loadNodes: function(){
  94. this.scriptListNode = new Element("div", {
  95. "styles": this.css.scriptListNode
  96. }).inject(this.node);
  97. this.propertyNode = new Element("div", {
  98. "styles": this.css.propertyNode
  99. }).inject(this.node);
  100. this.contentNode = new Element("div", {
  101. "styles": this.css.contentNode
  102. }).inject(this.node);
  103. },
  104. //loadScriptList-------------------------------
  105. loadScriptListNodes: function(){
  106. this.scriptListTitleNode = new Element("div", {
  107. "styles": this.css.scriptListTitleNode,
  108. "text": MWF.APPSD.LP.scriptLibrary
  109. }).inject(this.scriptListNode);
  110. this.scriptListResizeNode = new Element("div", {"styles": this.css.scriptListResizeNode}).inject(this.scriptListNode);
  111. this.scriptListAreaSccrollNode = new Element("div", {"styles": this.css.scriptListAreaSccrollNode}).inject(this.scriptListNode);
  112. this.scriptListAreaNode = new Element("div", {"styles": this.css.scriptListAreaNode}).inject(this.scriptListAreaSccrollNode);
  113. this.loadScriptListResize();
  114. this.loadScriptList();
  115. },
  116. loadScriptListResize: function(){
  117. // var size = this.propertyNode.getSize();
  118. // var position = this.propertyResizeBar.getPosition();
  119. this.scriptListResize = new Drag(this.scriptListResizeNode,{
  120. "snap": 1,
  121. "onStart": function(el, e){
  122. var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x;
  123. var y = (Browser.name=="firefox") ? e.event.clientY : e.event.y;
  124. el.store("position", {"x": x, "y": y});
  125. var size = this.scriptListAreaSccrollNode.getSize();
  126. el.store("initialWidth", size.x);
  127. }.bind(this),
  128. "onDrag": function(el, e){
  129. var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x;
  130. // var y = e.event.y;
  131. var bodySize = this.content.getSize();
  132. var position = el.retrieve("position");
  133. var initialWidth = el.retrieve("initialWidth").toFloat();
  134. var dx = x.toFloat() - position.x.toFloat();
  135. var width = initialWidth+dx;
  136. if (width> bodySize.x/2) width = bodySize.x/2;
  137. if (width<40) width = 40;
  138. this.contentNode.setStyle("margin-left", width+1);
  139. this.scriptListNode.setStyle("width", width);
  140. }.bind(this)
  141. });
  142. },
  143. loadScriptList: function() {
  144. this.actions.listScript(this.application.id, function (json) {
  145. json.data.each(function(script){
  146. this.createListScriptItem(script);
  147. }.bind(this));
  148. }.bind(this), null, false);
  149. },
  150. createListScriptItem: function(script, isNew){
  151. var _self = this;
  152. var listScriptItem = new Element("div", {"styles": this.css.listScriptItem}).inject(this.scriptListAreaNode, (isNew) ? "top": "bottom");
  153. var listScriptItemIcon = new Element("div", {"styles": this.css.listScriptItemIcon}).inject(listScriptItem);
  154. var listScriptItemText = new Element("div", {"styles": this.css.listScriptItemText, "text": (script.name) ? script.name+" ("+script.alias+")" : this.lp.newScript}).inject(listScriptItem);
  155. listScriptItem.store("script", script);
  156. listScriptItem.addEvents({
  157. "click": function(e){_self.loadScriptByData(this, e);},
  158. "mouseover": function(){if (_self.currentListScriptItem!=this) this.setStyles(_self.css.listScriptItem_over);},
  159. "mouseout": function(){if (_self.currentListScriptItem!=this) this.setStyles(_self.css.listScriptItem);}
  160. });
  161. this.listScriptItemMove(listScriptItem);
  162. },
  163. createScriptListCopy: function(node){
  164. var copyNode = node.clone().inject(this.node);
  165. copyNode.position({
  166. "relativeTo": node,
  167. "position": "upperLeft",
  168. "edge": "upperLeft"
  169. });
  170. var size = copyNode.getSize();
  171. copyNode.setStyles({
  172. "width": ""+size.x+"px",
  173. "height": ""+size.y+"px",
  174. "z-index": 50001
  175. });
  176. return copyNode;
  177. },
  178. listDragEnter: function(dragging, inObj){
  179. var markNode = inObj.retrieve("markNode");
  180. if (!markNode){
  181. var size = inObj.getSize();
  182. markNode = new Element("div", {"styles": this.css.dragListItemMark}).inject(this.node);
  183. markNode.setStyles({
  184. "width": ""+size.x+"px",
  185. "height": ""+size.y+"px",
  186. "position": "absolute",
  187. "background-color": "#666",
  188. "z-index": 50000,
  189. "opacity": 0.3
  190. // "border": "2px solid #ffba00"
  191. });
  192. markNode.position({
  193. "relativeTo": inObj,
  194. "position": "upperLeft",
  195. "edge": "upperLeft"
  196. });
  197. var y = markNode.getStyle("top").toFloat()-1;
  198. var x = markNode.getStyle("left").toFloat()-2;
  199. markNode.setStyles({
  200. "left": ""+x+"px",
  201. "top": ""+y+"px"
  202. });
  203. inObj.store("markNode", markNode);
  204. }
  205. },
  206. listDragLeave: function(dragging, inObj){
  207. var markNode = inObj.retrieve("markNode");
  208. if (markNode) markNode.destroy();
  209. inObj.eliminate("markNode");
  210. },
  211. listScriptItemMove: function(node){
  212. var iconNode = node.getFirst();
  213. iconNode.addEvent("mousedown", function(e){
  214. var script = node.retrieve("script");
  215. if (script.id!=this.scriptTab.showPage.script.data.id){
  216. var copyNode = this.createScriptListCopy(node);
  217. var droppables = [this.designNode, this.propertyDomArea];
  218. var listItemDrag = new Drag.Move(copyNode, {
  219. "droppables": droppables,
  220. "onEnter": function(dragging, inObj){
  221. this.listDragEnter(dragging, inObj);
  222. }.bind(this),
  223. "onLeave": function(dragging, inObj){
  224. this.listDragLeave(dragging, inObj);
  225. }.bind(this),
  226. "onDrag": function(e){
  227. //nothing
  228. }.bind(this),
  229. "onDrop": function(dragging, inObj){
  230. if (inObj){
  231. this.addIncludeScript(script);
  232. this.listDragLeave(dragging, inObj);
  233. copyNode.destroy();
  234. }else{
  235. copyNode.destroy();
  236. }
  237. }.bind(this),
  238. "onCancel": function(dragging){
  239. copyNode.destroy();
  240. }.bind(this)
  241. });
  242. listItemDrag.start(e);
  243. }
  244. }.bind(this));
  245. },
  246. addIncludeScript: function(script){
  247. var currentScript = this.scriptTab.showPage.script;
  248. if (currentScript.data.dependScriptList.indexOf(script.name)==-1){
  249. currentScript.data.dependScriptList.push(script.name);
  250. this.addIncludeToList(script.name);
  251. }
  252. },
  253. addIncludeToList: function(name){
  254. this.actions.getScriptByName(name, this.application.id, function(json){
  255. var script = json.data;
  256. var includeScriptItem = new Element("div", {"styles": this.css.includeScriptItem}).inject(this.propertyIncludeListArea);
  257. var includeScriptItemAction = new Element("div", {"styles": this.css.includeScriptItemAction}).inject(includeScriptItem);
  258. var includeScriptItemText = new Element("div", {"styles": this.css.includeScriptItemText}).inject(includeScriptItem);
  259. includeScriptItemText.set("text", script.name+" ("+script.alias+")");
  260. includeScriptItem.store("script", script);
  261. var _self = this;
  262. includeScriptItemAction.addEvent("click", function(){
  263. var node = this.getParent();
  264. var script = node.retrieve("script");
  265. if (script){
  266. _self.scriptTab.showPage.script.data.dependScriptList.erase(script.name);
  267. }
  268. node.destroy();
  269. });
  270. }.bind(this), function(){
  271. this.scriptTab.showPage.script.data.dependScriptList.erase(name);
  272. }.bind(this));
  273. },
  274. loadScriptByData: function(node, e){
  275. var script = node.retrieve("script");
  276. var openNew = true;
  277. for (var i = 0; i<this.scriptTab.pages.length; i++){
  278. if (script.id==this.scriptTab.pages[i].script.data.id){
  279. this.scriptTab.pages[i].showTabIm();
  280. openNew = false;
  281. break;
  282. }
  283. }
  284. if (openNew){
  285. this.loadScriptData(script.id, function(data){
  286. var script = new MWF.xApplication.process.ScriptDesigner.Script(this, data);
  287. script.load();
  288. }.bind(this), true);
  289. }
  290. //var _self = this;
  291. //var options = {
  292. // "onQueryLoad": function(){
  293. // this.actions = _self.actions;
  294. // this.options.id = script.id;
  295. // this.application = _self.application;
  296. // }
  297. //};
  298. //this.desktop.openApplication(e, "process.ScriptDesigner", options);
  299. },
  300. //loadContentNode------------------------------
  301. loadContentNode: function(toolbarCallback, contentCallback){
  302. this.contentToolbarNode = new Element("div#contentToolbarNode", {
  303. "styles": this.css.contentToolbarNode
  304. }).inject(this.contentNode);
  305. this.loadContentToolbar(toolbarCallback);
  306. this.editContentNode = new Element("div", {
  307. "styles": this.css.editContentNode
  308. }).inject(this.contentNode);
  309. this.loadEditContent(function(){
  310. // if (this.designDcoument) this.designDcoument.body.setStyles(this.css.designBody);
  311. if (this.designNode) this.designNode.setStyles(this.css.designNode);
  312. if (contentCallback) contentCallback();
  313. }.bind(this));
  314. },
  315. loadContentToolbar: function(callback){
  316. this.getFormToolbarHTML(function(toolbarNode){
  317. var spans = toolbarNode.getElements("span");
  318. spans.each(function(item, idx){
  319. var img = item.get("MWFButtonImage");
  320. if (img){
  321. item.set("MWFButtonImage", this.path+""+this.options.style+"/toolbar/"+img);
  322. }
  323. }.bind(this));
  324. $(toolbarNode).inject(this.contentToolbarNode);
  325. MWF.require("MWF.widget.Toolbar", function(){
  326. this.toolbar = new MWF.widget.Toolbar(toolbarNode, {"style": "ProcessCategory"}, this);
  327. this.toolbar.load();
  328. var _self = this;
  329. //this.styleSelectNode = toolbarNode.getElement("select");
  330. //this.styleSelectNode.addEvent("change", function(){
  331. // _self.changeEditorStyle(this);
  332. //});
  333. this.styleSelectNode = toolbarNode.getElement("select[MWFnodetype='theme']");
  334. this.styleSelectNode.addEvent("change", function(){
  335. _self.changeEditorStyle(this);
  336. });
  337. this.fontsizeSelectNode = toolbarNode.getElement("select[MWFnodetype='fontSize']");
  338. this.fontsizeSelectNode.addEvent("change", function(){
  339. _self.changeFontSize(this);
  340. });
  341. this.editorSelectNode = toolbarNode.getElement("select[MWFnodetype='editor']");
  342. this.editorSelectNode.addEvent("change", function(){
  343. _self.changeEditor(this);
  344. });
  345. this.monacoStyleSelectNode = toolbarNode.getElement("select[MWFnodetype='monaco-theme']");
  346. this.monacoStyleSelectNode.addEvent("change", function(){
  347. _self.changeEditorStyle(this);
  348. });
  349. if (callback) callback();
  350. }.bind(this));
  351. }.bind(this));
  352. },
  353. changeEditor: function(node){
  354. var idx = node.selectedIndex;
  355. var value = node.options[idx].value;
  356. if (!MWF.editorData){
  357. MWF.editorData = {
  358. "javascriptEditor": {
  359. "monaco_theme": "vs",
  360. "theme": "tomorrow",
  361. "fontSize" : "12px"
  362. }
  363. };
  364. }
  365. MWF.editorData.javascriptEditor["editor"] = value;
  366. MWF.UD.putData("editor", MWF.editorData);
  367. this.scriptTab.pages.each(function(page){
  368. var editor = page.script.editor;
  369. if (editor) editor.changeEditor(value);
  370. }.bind(this));
  371. if (value=="ace"){
  372. this.monacoStyleSelectNode.hide();
  373. this.styleSelectNode.show();
  374. }else{
  375. this.monacoStyleSelectNode.show();
  376. this.styleSelectNode.hide();
  377. }
  378. },
  379. changeFontSize: function(node){
  380. var idx = node.selectedIndex;
  381. var value = node.options[idx].value;
  382. //var editorData = null;
  383. this.scriptTab.pages.each(function(page){
  384. //if (!editorData) editorData = page.invoke.editor.editorData;
  385. var editor = page.script.editor;
  386. if (editor) editor.setFontSize(value);
  387. }.bind(this));
  388. //if (!editorData) editorData = MWF.editorData;
  389. //editorData.javainvokeEditor.theme = value;
  390. if (!MWF.editorData){
  391. MWF.editorData = {
  392. "javascriptEditor": {
  393. "monaco_theme": "vs",
  394. "theme": "tomorrow",
  395. "fontSize" : "12px"
  396. }
  397. };
  398. }
  399. MWF.editorData.javascriptEditor["fontSize"] = value;
  400. MWF.UD.putData("editor", MWF.editorData);
  401. },
  402. changeEditorStyle: function(node){
  403. var idx = node.selectedIndex;
  404. var value = node.options[idx].value;
  405. //var editorData = null;
  406. this.scriptTab.pages.each(function(page){
  407. //if (!editorData) editorData = page.script.editor.editorData;
  408. var editor = page.script.editor;
  409. if (editor) editor.setTheme(value);
  410. }.bind(this));
  411. //if (!editorData) editorData = MWF.editorData;
  412. //editorData.javascriptEditor.theme = value;
  413. if (!MWF.editorData){
  414. MWF.editorData = {
  415. "javascriptEditor": {
  416. "monaco_theme": "vs",
  417. "theme": "tomorrow",
  418. "fontSize" : "12px"
  419. }
  420. };
  421. }
  422. if (MWF.editorData.javascriptEditor.editor === "monaco"){
  423. MWF.editorData.javascriptEditor.monaco_theme = value;
  424. }else{
  425. MWF.editorData.javascriptEditor.theme = value;
  426. }
  427. MWF.UD.putData("editor", MWF.editorData);
  428. },
  429. getFormToolbarHTML: function(callback){
  430. var toolbarUrl = this.path+this.options.style+"/toolbars.html";
  431. var r = new Request.HTML({
  432. url: toolbarUrl,
  433. method: "get",
  434. onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
  435. var toolbarNode = responseTree[0];
  436. if (callback) callback(toolbarNode);
  437. }.bind(this),
  438. onFailure: function(xhr){
  439. this.notice("request processToolbars error: "+xhr.responseText, "error");
  440. }.bind(this)
  441. });
  442. r.send();
  443. },
  444. maxOrReturnEditor: function(){
  445. if (!this.isMax){
  446. this.designNode.inject(this.node);
  447. this.designNode.setStyles({
  448. "position": "absolute",
  449. "width": "100%",
  450. "height": "100%",
  451. "top": "0px",
  452. "margin": "0px",
  453. "left": "0px"
  454. });
  455. this.scriptTab.pages.each(function(page){
  456. page.script.setAreaNodeSize();
  457. });
  458. this.isMax = true;
  459. }else{
  460. this.isMax = false;
  461. this.designNode.inject(this.editContentNode);
  462. this.designNode.setStyles(this.css.designNode);
  463. this.designNode.setStyles({
  464. "position": "static"
  465. });
  466. this.resizeNode();
  467. this.scriptTab.pages.each(function(page){
  468. page.script.setAreaNodeSize();
  469. });
  470. }
  471. },
  472. loadEditContent: function(callback){
  473. this.designNode = new Element("div", {
  474. "styles": this.css.designNode
  475. }).inject(this.editContentNode);
  476. MWF.require("MWF.widget.Tab", function(){
  477. this.scriptTab = new MWF.widget.Tab(this.designNode, {"style": "script"});
  478. this.scriptTab.load();
  479. this.addEvent("queryClose", function(){
  480. debugger;
  481. while (this.scriptTab.pages.length){
  482. this.scriptTab.pages[0].closeTab();
  483. }
  484. }.bind(this));
  485. }.bind(this), false);
  486. //MWF.require("MWF.widget.ScrollBar", function(){
  487. // new MWF.widget.ScrollBar(this.designNode, {"distance": 100});
  488. //}.bind(this));
  489. },
  490. //loadProperty------------------------
  491. loadProperty: function(){
  492. this.propertyTitleNode = new Element("div", {
  493. "styles": this.css.propertyTitleNode,
  494. "text": MWF.APPSD.LP.property
  495. }).inject(this.propertyNode);
  496. this.propertyResizeBar = new Element("div", {
  497. "styles": this.css.propertyResizeBar
  498. }).inject(this.propertyNode);
  499. this.loadPropertyResize();
  500. this.propertyContentNode = new Element("div", {
  501. "styles": this.css.propertyContentNode
  502. }).inject(this.propertyNode);
  503. this.propertyDomArea = new Element("div", {
  504. "styles": this.css.propertyDomArea
  505. }).inject(this.propertyContentNode);
  506. this.propertyDomPercent = 0.3;
  507. this.propertyContentResizeNode = new Element("div", {
  508. "styles": this.css.propertyContentResizeNode
  509. }).inject(this.propertyContentNode);
  510. this.propertyContentArea = new Element("div", {
  511. "styles": this.css.propertyContentArea
  512. }).inject(this.propertyContentNode);
  513. this.loadPropertyContentResize();
  514. this.setPropertyContent();
  515. this.setIncludeNode();
  516. },
  517. setIncludeNode: function(){
  518. this.includeTitleNode = new Element("div", {"styles": this.css.includeTitleNode}).inject(this.propertyDomArea);
  519. this.includeTitleActionNode = new Element("div", {"styles": this.css.includeTitleActionNode}).inject(this.includeTitleNode);
  520. this.includeTitleTextNode = new Element("div", {"styles": this.css.includeTitleTextNode, "text": this.lp.include}).inject(this.includeTitleNode);
  521. this.includeTitleActionNode.addEvent("click", function(){
  522. this.addInclude();
  523. }.bind(this));
  524. this.propertyIncludeListArea = new Element("div", {
  525. "styles": {"overflow": "hidden"}
  526. }).inject(this.propertyDomArea);
  527. },
  528. addInclude: function(){
  529. },
  530. setPropertyContent: function(){
  531. var node = new Element("div", {"styles": this.css.propertyItemTitleNode, "text": this.lp.id+":"}).inject(this.propertyContentArea);
  532. this.propertyIdNode = new Element("div", {"styles": this.css.propertyTextNode, "text": ""}).inject(this.propertyContentArea);
  533. node = new Element("div", {"styles": this.css.propertyItemTitleNode, "text": this.lp.name+":"}).inject(this.propertyContentArea);
  534. this.propertyNameNode = new Element("input", {"styles": this.css.propertyInputNode, "value": ""}).inject(this.propertyContentArea);
  535. node = new Element("div", {"styles": this.css.propertyItemTitleNode, "text": this.lp.alias+":"}).inject(this.propertyContentArea);
  536. this.propertyAliasNode = new Element("input", {"styles": this.css.propertyInputNode, "value": ""}).inject(this.propertyContentArea);
  537. node = new Element("div", {"styles": this.css.propertyItemTitleNode, "text": this.lp.description+":"}).inject(this.propertyContentArea);
  538. this.propertyDescriptionNode = new Element("textarea", {"styles": this.css.propertyInputAreaNode, "value": ""}).inject(this.propertyContentArea);
  539. },
  540. loadPropertyResize: function(){
  541. // var size = this.propertyNode.getSize();
  542. // var position = this.propertyResizeBar.getPosition();
  543. this.propertyResize = new Drag(this.propertyResizeBar,{
  544. "snap": 1,
  545. "onStart": function(el, e){
  546. var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x;
  547. var y = (Browser.name=="firefox") ? e.event.clientY : e.event.y;
  548. el.store("position", {"x": x, "y": y});
  549. var size = this.propertyNode.getSize();
  550. el.store("initialWidth", size.x);
  551. }.bind(this),
  552. "onDrag": function(el, e){
  553. var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x;
  554. // var y = e.event.y;
  555. var bodySize = this.content.getSize();
  556. var position = el.retrieve("position");
  557. var initialWidth = el.retrieve("initialWidth").toFloat();
  558. var dx = position.x.toFloat()-x.toFloat();
  559. var width = initialWidth+dx;
  560. if (width> bodySize.x/2) width = bodySize.x/2;
  561. if (width<40) width = 40;
  562. this.contentNode.setStyle("margin-right", width+1);
  563. this.propertyNode.setStyle("width", width);
  564. }.bind(this)
  565. });
  566. },
  567. loadPropertyContentResize: function(){
  568. this.propertyContentResize = new Drag(this.propertyContentResizeNode, {
  569. "snap": 1,
  570. "onStart": function(el, e){
  571. var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x;
  572. var y = (Browser.name=="firefox") ? e.event.clientY : e.event.y;
  573. el.store("position", {"x": x, "y": y});
  574. var size = this.propertyDomArea.getSize();
  575. el.store("initialHeight", size.y);
  576. }.bind(this),
  577. "onDrag": function(el, e){
  578. var size = this.propertyContentNode.getSize();
  579. // var x = e.event.x;
  580. var y = (Browser.name=="firefox") ? e.event.clientY : e.event.y;
  581. var position = el.retrieve("position");
  582. var dy = y.toFloat()-position.y.toFloat();
  583. var initialHeight = el.retrieve("initialHeight").toFloat();
  584. var height = initialHeight+dy;
  585. if (height<40) height = 40;
  586. if (height> size.y-40) height = size.y-40;
  587. this.propertyDomPercent = height/size.y;
  588. this.setPropertyContentResize();
  589. }.bind(this)
  590. });
  591. },
  592. setPropertyContentResize: function(){
  593. var size = this.propertyContentNode.getSize();
  594. var resizeNodeSize = this.propertyContentResizeNode.getSize();
  595. var height = size.y-resizeNodeSize.y;
  596. var domHeight = this.propertyDomPercent*height;
  597. var contentHeight = height-domHeight;
  598. this.propertyDomArea.setStyle("height", ""+domHeight+"px");
  599. this.propertyContentArea.setStyle("height", ""+contentHeight+"px");
  600. },
  601. //resizeNode------------------------------------------------
  602. resizeNode: function(){
  603. if (!this.isMax){
  604. var nodeSize = this.node.getSize();
  605. this.contentNode.setStyle("height", ""+nodeSize.y+"px");
  606. this.propertyNode.setStyle("height", ""+nodeSize.y+"px");
  607. var contentToolbarMarginTop = this.contentToolbarNode.getStyle("margin-top").toFloat();
  608. var contentToolbarMarginBottom = this.contentToolbarNode.getStyle("margin-bottom").toFloat();
  609. var allContentToolberSize = this.contentToolbarNode.getComputedSize();
  610. var y = nodeSize.y - allContentToolberSize.totalHeight - contentToolbarMarginTop - contentToolbarMarginBottom;
  611. this.editContentNode.setStyle("height", ""+y+"px");
  612. if (this.designNode){
  613. var designMarginTop = this.designNode.getStyle("margin-top").toFloat();
  614. var designMarginBottom = this.designNode.getStyle("margin-bottom").toFloat();
  615. y = nodeSize.y - allContentToolberSize.totalHeight - contentToolbarMarginTop - contentToolbarMarginBottom - designMarginTop - designMarginBottom;
  616. this.designNode.setStyle("height", ""+y+"px");
  617. }
  618. titleSize = this.propertyTitleNode.getSize();
  619. titleMarginTop = this.propertyTitleNode.getStyle("margin-top").toFloat();
  620. titleMarginBottom = this.propertyTitleNode.getStyle("margin-bottom").toFloat();
  621. titlePaddingTop = this.propertyTitleNode.getStyle("padding-top").toFloat();
  622. titlePaddingBottom = this.propertyTitleNode.getStyle("padding-bottom").toFloat();
  623. y = titleSize.y+titleMarginTop+titleMarginBottom+titlePaddingTop+titlePaddingBottom;
  624. y = nodeSize.y-y;
  625. this.propertyContentNode.setStyle("height", ""+y+"px");
  626. this.propertyResizeBar.setStyle("height", ""+y+"px");
  627. this.setPropertyContentResize();
  628. titleSize = this.scriptListTitleNode.getSize();
  629. titleMarginTop = this.scriptListTitleNode.getStyle("margin-top").toFloat();
  630. titleMarginBottom = this.scriptListTitleNode.getStyle("margin-bottom").toFloat();
  631. titlePaddingTop = this.scriptListTitleNode.getStyle("padding-top").toFloat();
  632. titlePaddingBottom = this.scriptListTitleNode.getStyle("padding-bottom").toFloat();
  633. nodeMarginTop = this.scriptListAreaSccrollNode.getStyle("margin-top").toFloat();
  634. nodeMarginBottom = this.scriptListAreaSccrollNode.getStyle("margin-bottom").toFloat();
  635. y = titleSize.y+titleMarginTop+titleMarginBottom+titlePaddingTop+titlePaddingBottom+nodeMarginTop+nodeMarginBottom;
  636. y = nodeSize.y-y;
  637. this.scriptListAreaSccrollNode.setStyle("height", ""+y+"px");
  638. this.scriptListResizeNode.setStyle("height", ""+y+"px");
  639. }
  640. },
  641. //loadForm------------------------------------------
  642. loadScript: function(){
  643. //this.scriptTab.addTab(node, title);
  644. this.getScriptData(this.options.id, function(data){
  645. this.script = new MWF.xApplication.process.ScriptDesigner.Script(this, data);
  646. this.script.load();
  647. if (this.status){
  648. if (this.status.openScripts){
  649. this.status.openScripts.each(function(id){
  650. this.loadScriptData(id, function(data){
  651. var showTab = true;
  652. if (this.status.currentId){
  653. if (this.status.currentId!=data.id) showTab = false;
  654. }
  655. var script = new MWF.xApplication.process.ScriptDesigner.Script(this, data, {"showTab": showTab});
  656. script.load();
  657. }.bind(this), true);
  658. }.bind(this));
  659. }
  660. };
  661. // if (!this.scriptHelpMenu){
  662. // MWF.require("MWF.widget.ScriptHelp", function(){
  663. // this.scriptHelpMenu = new MWF.widget.ScriptHelp($("MWFScriptAutoCode"), this.script.editor);
  664. // this.scriptHelpMenu.getEditor = function(){
  665. // if (this.scriptTab.showPage) return this.scriptTab.showPage.script.editor.editor;
  666. // return null;
  667. // }.bind(this)
  668. // }.bind(this));
  669. // }
  670. }.bind(this));
  671. },
  672. getScriptData: function(id, callback){
  673. if (!id){
  674. this.loadNewScriptData(callback);
  675. }else{
  676. this.loadScriptData(id, callback);
  677. }
  678. },
  679. loadNewScriptData: function(callback){
  680. this.actions.getUUID(function(id){
  681. var data = {
  682. "name": "",
  683. "id": id,
  684. "application": this.application.id,
  685. "alias": "",
  686. "description": "",
  687. "language": "javascript",
  688. "dependScriptList": [],
  689. "isNewScript": true,
  690. "text": ""
  691. };
  692. this.createListScriptItem(data, true);
  693. if (callback) callback(data);
  694. }.bind(this))
  695. },
  696. loadScriptData: function(id, callback, notSetTile){
  697. this.actions.getScript(id, function(json){
  698. if (json){
  699. var data = json.data;
  700. if (!notSetTile){
  701. this.setTitle(this.options.appTitle + "-"+data.name);
  702. this.taskitem.setText(this.options.appTitle + "-"+data.name);
  703. this.options.appTitle = this.options.appTitle + "-"+data.name;
  704. }
  705. if (!this.application){
  706. this.actions.getApplication(this.data.application, function(json){
  707. this.application = {"name": json.data.name, "id": json.data.id};
  708. if (callback) callback(data);
  709. }.bind(this));
  710. }else{
  711. if (callback) callback(data);
  712. }
  713. }
  714. }.bind(this));
  715. },
  716. saveScript: function(){
  717. if (this.scriptTab.showPage){
  718. var script = this.scriptTab.showPage.script;
  719. script.save(function(){
  720. if (script==this.script){
  721. var name = script.data.name;
  722. this.setTitle(MWF.APPSD.LP.title + "-"+name);
  723. this.options.desktopReload = true;
  724. this.options.id = script.data.id;
  725. }
  726. }.bind(this));
  727. }
  728. },
  729. saveDictionaryAs: function(){
  730. this.dictionary.saveAs();
  731. },
  732. dictionaryExplode: function(){
  733. this.dictionary.explode();
  734. },
  735. dictionaryImplode: function(){
  736. this.dictionary.implode();
  737. },
  738. recordStatus: function(){
  739. if (this.scriptTab){
  740. var openScripts = [];
  741. this.scriptTab.pages.each(function(page){
  742. if (page.script.data.id!=this.options.id) openScripts.push(page.script.data.id);
  743. }.bind(this));
  744. var currentId = this.scriptTab.showPage.script.data.id;
  745. var status = {
  746. "id": this.options.id,
  747. "application": this.application,
  748. "openScripts": openScripts,
  749. "currentId": currentId
  750. };
  751. return status;
  752. }
  753. return {"id": this.options.id, "application": this.application};
  754. }
  755. });