o2.xApplication.ConfigDesigner.options = { "multitask": true, "executable": false }; o2.xDesktop.requireApp("ConfigDesigner", "Script", null, false); o2.require("o2.xDesktop.UserData", null, false); o2.xApplication.ConfigDesigner.Main = new Class({ Extends: o2.xApplication.Common.Main, Implements: [Options, Events], options: { "style": "default", "name": "ConfigDesigner", "icon": "icon.png", "title": o2.xApplication.ConfigDesigner.LP.title, "appTitle": o2.xApplication.ConfigDesigner.LP.title, "id": "node_127.0.0.1.json", "actions": null, "category": null, "portalData": null }, onQueryLoad: function(){ this.actions = o2.Actions.load("x_program_center"); this.lp = o2.xApplication.ConfigDesigner.LP; this.addEvent("queryClose", function(e){ if (this.explorer){ this.explorer.reload(); } }.bind(this)); }, loadApplication: function(callback){ this.createNode(); if (!this.options.isRefresh){ this.maxSize(function(){ this.openScript(); }.bind(this)); }else{ this.openScript(); } if (callback) callback(); }, createNode: function(){ this.content.setStyle("overflow", "hidden"); this.node = new Element("div", { "styles": {"width": "100%", "height": "100%", "overflow": "hidden"} }).inject(this.content); }, getApplication:function(callback){ if (callback) callback(); }, openScript: function(){ this.getApplication(function(){ this.loadNodes(); this.loadScriptListNodes(); this.loadContentNode(function(){ this.loadProperty(); // this.loadTools(); this.resizeNode(); this.addEvent("resize", this.resizeNode.bind(this)); this.loadScript(); if (this.toolbarContentNode){ this.setScrollBar(this.toolbarContentNode, null, { "V": {"x": 0, "y": 0}, "H": {"x": 0, "y": 0} }); this.setScrollBar(this.propertyDomArea, null, { "V": {"x": 0, "y": 0}, "H": {"x": 0, "y": 0} }); } }.bind(this)); }.bind(this)); }, loadNodes: function(){ this.scriptListNode = new Element("div", { "styles": this.css.scriptListNode }).inject(this.node); this.propertyNode = new Element("div", { "styles": this.css.propertyNode }).inject(this.node); this.contentNode = new Element("div", { "styles": this.css.contentNode }).inject(this.node); }, //loadScriptList------------------------------- loadScriptListNodes: function(){ this.scriptListTitleNode = new Element("div", { "styles": this.css.scriptListTitleNode, "text": o2.xApplication.ConfigDesigner.LP.scriptLibrary }).inject(this.scriptListNode); this.scriptListResizeNode = new Element("div", {"styles": this.css.scriptListResizeNode}).inject(this.scriptListNode); this.scriptListAreaSccrollNode = new Element("div", {"styles": this.css.scriptListAreaSccrollNode}).inject(this.scriptListNode); this.scriptListAreaNode = new Element("div", {"styles": this.css.scriptListAreaNode}).inject(this.scriptListAreaSccrollNode); this.loadScriptListResize(); this.loadScriptList(); }, setScroll: function(){ o2.require("o2.widget.ScrollBar", function(){ this.listScrollBar = new o2.widget.ScrollBar(this.scriptListAreaSccrollNode, { "style":"xDesktop_Message", "where": "before", "indent": false, "distance": 100, "friction": 6, "axis": {"x": false, "y": true} }); }.bind(this)); }, loadScriptListResize: function(){ // var size = this.propertyNode.getSize(); // var position = this.propertyResizeBar.getPosition(); this.scriptListResize = new Drag(this.scriptListResizeNode,{ "snap": 1, "onStart": function(el, e){ var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x; var y = (Browser.name=="firefox") ? e.event.clientY : e.event.y; el.store("position", {"x": x, "y": y}); var size = this.scriptListAreaSccrollNode.getSize(); el.store("initialWidth", size.x); }.bind(this), "onDrag": function(el, e){ var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x; // var y = e.event.y; var bodySize = this.content.getSize(); var position = el.retrieve("position"); var initialWidth = el.retrieve("initialWidth").toFloat(); var dx = x.toFloat() - position.x.toFloat(); var width = initialWidth+dx; if (width> bodySize.x/2) width = bodySize.x/2; if (width<40) width = 40; this.contentNode.setStyle("margin-left", width+1); this.scriptListNode.setStyle("width", width); }.bind(this) }); }, loadScriptList: function() { this.actions.ConfigAction.getList(function( json ){ data = json.data; var config = JSON.parse(data.config); this.config = config; for (var key in config) { if(key.indexOf("node_")>-1){ this.options.id = key; } this.createListScriptItem(key,config[key]); } this.setScroll(); }.bind(this), null, false); }, createListScriptItem: function(id, name){ var _self = this; var listScriptItem = new Element("div", {"styles": this.css.listScriptItem}).inject(this.scriptListAreaNode, "bottom"); var listScriptItemIcon = new Element("div", {"styles": this.css.listScriptItemIcon}).inject(listScriptItem); var listScriptItemText = new Element("div", {"styles": this.css.listScriptItemText, "text":id.replace(".json","")+" ("+name+")" }).inject(listScriptItem); listScriptItem.store("script", {id:id,name:name}); listScriptItem.addEvents({ "click": function(e){_self.loadScriptByData(this, e);}, "mouseover": function(){if (_self.currentListScriptItem!=this) this.setStyles(_self.css.listScriptItem_over);}, "mouseout": function(){if (_self.currentListScriptItem!=this) this.setStyles(_self.css.listScriptItem);} }); this.listScriptItemMove(listScriptItem); }, createScriptListCopy: function(node){ var copyNode = node.clone().inject(this.node); copyNode.position({ "relativeTo": node, "position": "upperLeft", "edge": "upperLeft" }); var size = copyNode.getSize(); copyNode.setStyles({ "width": ""+size.x+"px", "height": ""+size.y+"px", "z-index": 50001, }); return copyNode; }, listDragEnter: function(dragging, inObj){ var markNode = inObj.retrieve("markNode"); if (!markNode){ var size = inObj.getSize(); markNode = new Element("div", {"styles": this.css.dragListItemMark}).inject(this.node); markNode.setStyles({ "width": ""+size.x+"px", "height": ""+size.y+"px", "position": "absolute", "background-color": "#666", "z-index": 50000, "opacity": 0.3 // "border": "2px solid #ffba00" }); markNode.position({ "relativeTo": inObj, "position": "upperLeft", "edge": "upperLeft" }); var y = markNode.getStyle("top").toFloat()-1; var x = markNode.getStyle("left").toFloat()-2; markNode.setStyles({ "left": ""+x+"px", "top": ""+y+"px", }); inObj.store("markNode", markNode); } }, listDragLeave: function(dragging, inObj){ var markNode = inObj.retrieve("markNode"); if (markNode) markNode.destroy(); inObj.eliminate("markNode"); }, listScriptItemMove: function(node){ var iconNode = node.getFirst(); iconNode.addEvent("mousedown", function(e){ var script = node.retrieve("script"); if (script.id!=this.scriptTab.showPage.script.data.id){ var copyNode = this.createScriptListCopy(node); var droppables = [this.designNode, this.propertyDomArea]; var listItemDrag = new Drag.Move(copyNode, { "droppables": droppables, "onEnter": function(dragging, inObj){ this.listDragEnter(dragging, inObj); }.bind(this), "onLeave": function(dragging, inObj){ this.listDragLeave(dragging, inObj); }.bind(this), "onDrag": function(e){ //nothing }.bind(this), "onDrop": function(dragging, inObj){ if (inObj){ this.addIncludeScript(script); this.listDragLeave(dragging, inObj); copyNode.destroy(); }else{ copyNode.destroy(); } }.bind(this), "onCancel": function(dragging){ copyNode.destroy(); }.bind(this) }); listItemDrag.start(e); } }.bind(this)); }, addIncludeScript: function(script){ var currentScript = this.scriptTab.showPage.script; if (currentScript.data.dependScriptList.indexOf(script.name)==-1){ currentScript.data.dependScriptList.push(script.name); this.addIncludeToList(script.name); } }, addIncludeToList: function(name){ this.actions.getScriptByName(name, this.application.id, function(json){ var script = json.data; var includeScriptItem = new Element("div", {"styles": this.css.includeScriptItem}).inject(this.propertyIncludeListArea); var includeScriptItemAction = new Element("div", {"styles": this.css.includeScriptItemAction}).inject(includeScriptItem); var includeScriptItemText = new Element("div", {"styles": this.css.includeScriptItemText}).inject(includeScriptItem); includeScriptItemText.set("text", script.name+" ("+script.alias+")"); includeScriptItem.store("script", script); var _self = this; includeScriptItemAction.addEvent("click", function(){ var node = this.getParent(); var script = node.retrieve("script"); if (script){ _self.scriptTab.showPage.script.data.dependScriptList.erase(script.name); } node.destroy(); }); }.bind(this), function(){ this.scriptTab.showPage.script.data.dependScriptList.erase(name); }.bind(this)); }, loadScriptByData: function(node, e){ var script = node.retrieve("script"); var scriptName = script.name; var openNew = true; for (var i = 0; i1){ new Element("option", {"value": "*", "text": "*"}).inject(this.propertyServerNode); } nodeList.each(function (node) { new Element("option", { "value": node.node.nodeAgentPort, "text": node.nodeAddress }).inject(this.propertyServerNode); }.bind(this)); }.bind(this),null, false ); node = new Element("div", {"styles": this.css.propertyItemTitleNode, "text": this.lp.description+":"}).inject(this.propertyContentArea); this.propertyDescriptionNode = new Element("div", {"styles": this.css.propertyTextNode, "text": ""}).inject(this.propertyContentArea); }, loadPropertyResize: function(){ // var size = this.propertyNode.getSize(); // var position = this.propertyResizeBar.getPosition(); this.propertyResize = new Drag(this.propertyResizeBar,{ "snap": 1, "onStart": function(el, e){ var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x; var y = (Browser.name=="firefox") ? e.event.clientY : e.event.y; el.store("position", {"x": x, "y": y}); var size = this.propertyNode.getSize(); el.store("initialWidth", size.x); }.bind(this), "onDrag": function(el, e){ var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x; // var y = e.event.y; var bodySize = this.content.getSize(); var position = el.retrieve("position"); var initialWidth = el.retrieve("initialWidth").toFloat(); var dx = position.x.toFloat()-x.toFloat(); var width = initialWidth+dx; if (width> bodySize.x/2) width = bodySize.x/2; if (width<40) width = 40; this.contentNode.setStyle("margin-right", width+1); this.propertyNode.setStyle("width", width); }.bind(this) }); }, loadPropertyContentResize: function(){ this.propertyContentResize = new Drag(this.propertyContentResizeNode, { "snap": 1, "onStart": function(el, e){ var x = (Browser.name=="firefox") ? e.event.clientX : e.event.x; var y = (Browser.name=="firefox") ? e.event.clientY : e.event.y; el.store("position", {"x": x, "y": y}); var size = this.propertyDomArea.getSize(); el.store("initialHeight", size.y); }.bind(this), "onDrag": function(el, e){ var size = this.propertyContentNode.getSize(); // var x = e.event.x; var y = (Browser.name=="firefox") ? e.event.clientY : e.event.y; var position = el.retrieve("position"); var dy = y.toFloat()-position.y.toFloat(); var initialHeight = el.retrieve("initialHeight").toFloat(); var height = initialHeight+dy; if (height<40) height = 40; if (height> size.y-40) height = size.y-40; this.propertyDomPercent = height/size.y; this.setPropertyContentResize(); }.bind(this) }); }, setPropertyContentResize: function(){ var size = this.propertyContentNode.getSize(); var resizeNodeSize = this.propertyContentResizeNode.getSize(); var height = size.y-resizeNodeSize.y; var domHeight = this.propertyDomPercent*height; var contentHeight = height-domHeight; this.propertyDomArea.setStyle("height", ""+domHeight+"px"); this.propertyContentArea.setStyle("height", ""+contentHeight+"px"); }, //resizeNode------------------------------------------------ resizeNode: function(){ if (!this.isMax){ var nodeSize = this.node.getSize(); this.contentNode.setStyle("height", ""+nodeSize.y+"px"); this.propertyNode.setStyle("height", ""+nodeSize.y+"px"); var contentToolbarMarginTop = this.contentToolbarNode.getStyle("margin-top").toFloat(); var contentToolbarMarginBottom = this.contentToolbarNode.getStyle("margin-bottom").toFloat(); var allContentToolberSize = this.contentToolbarNode.getComputedSize(); var y = nodeSize.y - allContentToolberSize.totalHeight - contentToolbarMarginTop - contentToolbarMarginBottom; this.editContentNode.setStyle("height", ""+y+"px"); if (this.designNode){ var designMarginTop = this.designNode.getStyle("margin-top").toFloat(); var designMarginBottom = this.designNode.getStyle("margin-bottom").toFloat(); y = nodeSize.y - allContentToolberSize.totalHeight - contentToolbarMarginTop - contentToolbarMarginBottom - designMarginTop - designMarginBottom; this.designNode.setStyle("height", ""+y+"px"); } titleSize = this.propertyTitleNode.getSize(); titleMarginTop = this.propertyTitleNode.getStyle("margin-top").toFloat(); titleMarginBottom = this.propertyTitleNode.getStyle("margin-bottom").toFloat(); titlePaddingTop = this.propertyTitleNode.getStyle("padding-top").toFloat(); titlePaddingBottom = this.propertyTitleNode.getStyle("padding-bottom").toFloat(); y = titleSize.y+titleMarginTop+titleMarginBottom+titlePaddingTop+titlePaddingBottom; y = nodeSize.y-y; this.propertyContentNode.setStyle("height", ""+y+"px"); this.propertyResizeBar.setStyle("height", ""+y+"px"); this.setPropertyContentResize(); titleSize = this.scriptListTitleNode.getSize(); titleMarginTop = this.scriptListTitleNode.getStyle("margin-top").toFloat(); titleMarginBottom = this.scriptListTitleNode.getStyle("margin-bottom").toFloat(); titlePaddingTop = this.scriptListTitleNode.getStyle("padding-top").toFloat(); titlePaddingBottom = this.scriptListTitleNode.getStyle("padding-bottom").toFloat(); nodeMarginTop = this.scriptListAreaSccrollNode.getStyle("margin-top").toFloat(); nodeMarginBottom = this.scriptListAreaSccrollNode.getStyle("margin-bottom").toFloat(); y = titleSize.y+titleMarginTop+titleMarginBottom+titlePaddingTop+titlePaddingBottom+nodeMarginTop+nodeMarginBottom; y = nodeSize.y-y; this.scriptListAreaSccrollNode.setStyle("height", ""+y+"px"); this.scriptListResizeNode.setStyle("height", ""+y+"px"); } }, //loadForm------------------------------------------ loadScript: function(){ //this.scriptTab.addTab(node, title); this.getScriptData(this.options.id, function(data){ data.name = this.config[this.options.id]; this.script = new o2.xApplication.ConfigDesigner.Script(this, data); this.script.load(); }.bind(this)); }, getScriptData: function(id, callback){ this.loadScriptData(id, callback); }, loadScriptData: function(id, callback, notSetTile){ this.actions.ConfigAction.open({fileName:id}, function(json){ if (json){ var data = json.data; data.id = id; data.text = data.fileContent; if (callback) callback(data); } }.bind(this)); }, saveScript: function(){ if (this.scriptTab.showPage){ var script = this.scriptTab.showPage.script; script.save(function(){ if (script==this.script){ var name = script.data.name; this.setTitle(o2.xApplication.ConfigDesigner.LP.title + "-"+name); this.options.desktopReload = true; this.options.id = script.data.id; } }.bind(this)); } }, saveDictionaryAs: function(){ this.dictionary.saveAs(); }, dictionaryExplode: function(){ this.dictionary.explode(); }, dictionaryImplode: function(){ this.dictionary.implode(); } });