123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432 |
- // o2.widget = o2.widget || {};
- o2.require("o2.widget.Common", null, false);
- // o2.require("o2.widget.Tree", null, false);
- o2.requireApp("process.FormDesigner", "widget.ElTreeEditor", null, false);
- MWF.xApplication.process.FormDesigner.widget.ElCarouselContent = new Class({
- Extends: MWF.xApplication.process.FormDesigner.widget.ElTreeEditor,
- initialize: function(node, options){
- this.setOptions(options);
- this.node = $(node);
- this.path = "../x_component_process_FormDesigner/widget/$ElTreeEditor/";
- this.cssPath = this.path+this.options.style+"/css.wcss";
- this._loadCss();
- this.container = new Element("div");
- },
- createContent: function(content){
- this.contentNode = new Element("div", {
- "styles": this.css.contentNode
- }).inject(this.container);
-
- this.data = content;
-
- this.resizeContentNodeSize();
-
- this.tree = new MWF.xApplication.process.FormDesigner.widget.ElCarouselContent.Tree(this, this.contentNode, {"style": "editor"});
- this.tree.data = this.data;
- this.tree.load();
-
- },
- addTreeNode: function(){
- if (this.tree) {
- var obj = Object.clone(this.tree.nodejson);
- this.data.push(obj);
- var treeNode = this.tree.appendChild(obj);
- //if (!this.options.expand) this.tree.expandOrCollapseNode(this);
- treeNode.selectNode();
- treeNode.showItemAction();
- treeNode.editItemProperties();
- this.fireEvent("change", [{
- compareName: " [addSub]",
- force: true
- }]);
- }
- },
- });
- MWF.xApplication.process.FormDesigner.widget.ElCarouselContent.Tree = new Class({
- Extends: MWF.xApplication.process.FormDesigner.widget.ElTreeEditor.Tree,
- nodejson: {
- "type": "img",
- "dataPath": "",
- "styles": {},
- "srcScript": {
- "code": "",
- "html": ""
- },
- "textScript": {
- "code": "",
- "html": ""
- },
- "clickScript": {
- "code": "",
- "html": ""
- }
- },
- appendChild: function(obj){
- var treeNode = new MWF.xApplication.process.FormDesigner.widget.ElCarouselContent.Tree.Node(this, obj);
-
- if (this.children.length){
- treeNode.previousSibling = this.children[this.children.length-1];
- treeNode.previousSibling.nextSibling = treeNode;
- }else{
- this.firstChild = treeNode;
- }
- treeNode.level = 0;
-
- treeNode.load();
- treeNode.node.inject(this.node);
- this.children.push(treeNode);
- return treeNode;
- }
- });
- MWF.xApplication.process.FormDesigner.widget.ElCarouselContent.Tree.Node = new Class({
- Extends: MWF.xApplication.process.FormDesigner.widget.ElTreeEditor.Tree.Node,
- options: {
- "expand": true
- },
- getTitle: function(){
- if( this.data.type === "img" ){
- return "图片";
- }else if( this.data.type === "text" ){
- return "文本";
- }else{
- return "";
- }
- },
- setTitle : function(){
- this.textDivNode.set("text", this.getTitle());
- },
- createTextNode: function(){
- this.textNode = new Element("td",{
- "styles": this.tree.css.textNode
- }).inject(this.nodeArea);
- var textDivNode = this.textDivNode = new Element("div", {
- "styles": {"display": "inline-block"},
- "text": this.getTitle()
- });
- textDivNode.setStyles(this.tree.css.textDivNode);
- textDivNode.addEvent("click", function(e){
- this.clickNode(e);
- }.bind(this));
- textDivNode.inject(this.textNode);
- },
- selectNode: function(){
- this.tree.fireEvent("beforeSelect", [this]);
- if (this.tree.currentNode){
- this.tree.currentNode.fireEvent("unselect");
- var textDivNode = this.tree.currentNode.textNode.getElement("div");
- textDivNode.setStyles(this.tree.css.textDivNode);
- }
- var textDivNode = this.textNode.getElement("div");
- // textDivNode.setStyles(this.tree.css.textDivNodeSelected);
- this.tree.currentNode = this;
- this.tree.fireEvent("afterSelect", [this]);
- },
- clickNode: function(e){
- this.selectNode(e);
- },
- addChild: function(){
- debugger;
- var obj = Object.clone(this.tree.nodejson);
- if (!this.data.children) this.data.children = [];
- this.data.children.push(obj);
- var treeNode = this.appendChild(obj);
- if (!this.options.expand) this.tree.expandOrCollapseNode(this);
- treeNode.selectNode();
- treeNode.showItemAction();
- treeNode.editItemProperties();
- },
- createItemActionNode: function(){
- this.actionNode = new Element("div", {
- "styles": this.tree.css.itemActionNode
- }).inject(this.itemNode);
-
- var deleteAction = new Element("div", {
- "styles": this.tree.css.itemDeleteActionNode,
- "title": o2.LP.process.formAction["delete"],
- "events": {
- "click": function(e){
- this.deleteItem(e);
- e.stopPropagation();
- }.bind(this)
- }
- }).inject(this.actionNode);
- },
- copyStyles: function(from){
- var json = this.data.styles;
- Object.each(from, function(style, key){
- json[key] = style;
- }.bind(this));
- },
- removeStyles: function(from){
- var json = this.data.styles;
- Object.each(from, function(style, key){
- if (json[key] && json[key]==style){
- delete json[key];
- }
- }.bind(this));
- },
- getLevelName: function(){
- var parentTextList = [];
- var parent = this;
- while (parent){
- parentTextList.push( parent.data.type==="text" ? "文本" : "图片");
- parent = parent.parentNode;
- }
- return parentTextList.reverse().join(".");
- },
- editItemProperties: function(){
- var defaultStyles = {
- "img": {
- "height": "100%",
- "width":"100%"
- },
- "text": {
- "line-height":"30px",
- "height": "30px",
- "width": "100%",
- "text-align": "center",
- "position": "absolute",
- "bottom":"0px",
- "left":"0px",
- "color":"#fff",
- "background": "rgba(104, 104, 104, 0.5)"
- }
- };
- if (this.tree.currentEditNode!=this){
- if (this.tree.currentEditNode) this.tree.currentEditNode.completeItemProperties();
- this.itemNode.setStyle("background", "#DDD");
- if (!this.propertyArea){
- this.propertyArea = new Element("div", {
- style : "border-bottom:1px solid #666"
- }).inject(this.itemNode, "after");
- this.propertyTable = new Element("table", {
- "width": "100%",
- "border": "0",
- "cellpadding":"5",
- "cellspacing":"0",
- "class": "editTable"
- }).inject(this.propertyArea);
- tr = new Element("tr").inject(this.propertyTable);
- var td = new Element("td", { text: "类型" }).inject(tr);
- td = new Element("td").inject(tr);
- var div = new Element( "div").inject(td);
- var radio_type_1 = new Element( "input", {
- "type" : "radio",
- "checked" : this.data.type === "img",
- "events" : {
- "click": function () {
- this.data.type = "img";
- radio_type_2.checked = false;
- this.setTitle();
- this.srcScriptTr.setStyle("display", "");
- this.textScriptTr.setStyle("display", "none");
- this.removeStyles( defaultStyles.text );
- this.copyStyles( defaultStyles.img );
- this.maplist.reload(this.data.styles);
- this.tree.editor.fireEvent("change", [{
- compareName: "."+this.getLevelName() + ".type"
- }]);
- }.bind(this)
- }
- }).inject( div );
- new Element( "span", { "text" : "图片" }).inject(div);
- var radio_type_2 = new Element( "input", {
- "type" : "radio",
- "checked" : this.data.type === "text",
- "events" : {
- "click": function () {
- debugger;
- this.data.type = "text";
- radio_type_1.checked = false;
- this.setTitle();
- this.srcScriptTr.setStyle("display", "none");
- this.textScriptTr.setStyle("display", "");
- this.removeStyles( defaultStyles.img );
- this.copyStyles( defaultStyles.text );
- this.maplist.reload(this.data.styles);
- this.tree.editor.fireEvent("change", [{
- compareName: "."+this.getLevelName() + ".type"
- }]);
- }.bind(this)
- }
- }).inject( div );
- new Element( "span", { "text" : "文本" }).inject(div);
- // var tr = new Element("tr").inject(this.propertyTable);
- // var td = new Element("td", { text: "数据路径" }).inject(tr);
- // td = new Element("td").inject(tr);
- // this.pathInput = new Element("input", {
- // value: this.data.dataPath || "",
- // placeholder: "如: title",
- // events: {
- // blur: function () {
- // this.data.dataPath = this.pathInput.get("value");
- // // this.textNode.getElement("div").set("text", this.data.dataPath);
- // }.bind(this)
- // }
- // }).inject(td);
- //styles
- debugger;
- if( !Object.keys(this.data.styles).length ){
- this.data.styles = Object.clone( defaultStyles[ this.data.type ] );
- }
- var tr = new Element("tr").inject(this.propertyTable);
- td = new Element("td", { "colspan": "2" }).inject(tr);
- MWF.require("MWF.widget.Maplist", function() {
- var maplist = this.maplist = new MWF.widget.Maplist(td, {
- "title": "样式",
- "collapse": false,
- "onChange": function () {
- this.data.styles = maplist.toJson();
- this.tree.editor.fireEvent("change", [{
- compareName: "."+this.getLevelName() + ".styles"
- }]);
- }.bind(this),
- "onDelete": function (key) {
- if (this.data.styles && this.data.styles[key]) {
- delete this.data.styles[key];
- }
- this.tree.editor.fireEvent("change", [{
- compareName: "."+this.getLevelName() + ".styles"
- }]);
- }.bind(this),
- "isProperty": false
- });
- maplist.load(this.data.styles);
- }.bind(this));
- //srcScript
- var tr = new Element("div").inject(this.propertyArea);
- this.srcScriptTr = tr;
- new Element("div", {
- "text" : "通过this.event可以获得当前条目的数据,最终返回图片资源地址文本。" +
- "系统通用图片获取方法为o2.xDesktop.getImageSrc(imgId);该方法可用于图片编辑器、html编辑上传的图片;附件、资源文件不可以用本方法。"
- }).inject( tr );
- MWF.require("MWF.widget.ScriptArea", function(){
- this.srcScriptEditor = new MWF.widget.ScriptArea(tr, {
- "title": "图片资源(src)脚本",
- "isbind": false,
- "mode": "javascript",
- "maxObj": this.tree.editor.options.maxObj,
- "onChange": function(){
- var json = this.srcScriptEditor.toJson();
- this.data.srcScript.code = json.code;
- this.tree.editor.fireEvent("change", [{
- compareName: "."+this.getLevelName() + ".srcScript.code"
- }]);
- //this.data[name].html = json.html;
- }.bind(this),
- "onSave": function(){
- //this.designer.saveForm();
- }.bind(this),
- "style": "default",
- "runtime": "web"
- });
- this.srcScriptEditor.load(this.data.srcScript);
- }.bind(this));
- if( this.data.type !== "img"){
- this.srcScriptTr.hide();
- }
- //textScript
- if( !this.data.textScript )this.data.textScript = {
- "code": "",
- "html": ""
- };
- var tr = new Element("div").inject(this.propertyArea);
- this.textScriptTr = tr;
- new Element("div", {
- "text" : "通过this.event可以获得当前条目的数据,最终返回图片文本内容文本。"
- }).inject( tr );
- MWF.require("MWF.widget.ScriptArea", function(){
- this.textScriptEditor = new MWF.widget.ScriptArea(tr, {
- "title": "文本内容脚本",
- "isbind": false,
- "mode": "javascript",
- "maxObj": this.tree.editor.options.maxObj,
- "onChange": function(){
- var json = this.textScriptEditor.toJson();
- this.data.textScript.code = json.code;
- this.tree.editor.fireEvent("change", [{
- compareName: "."+this.getLevelName() + ".textScript.code"
- }]);
- //this.data[name].html = json.html;
- }.bind(this),
- "onSave": function(){
- //this.designer.saveForm();
- }.bind(this),
- "style": "default",
- "runtime": "web"
- });
- this.textScriptEditor.load(this.data.textScript);
- }.bind(this));
- if( this.data.type === "img"){
- this.textScriptTr.hide();
- }
- //clickScript
- var tr = new Element("div").inject(this.propertyArea);
- new Element("div", {
- "text" : "通过this.event[0]可以获得当前条目的数据,通过this.event[1]可获取Event对象。"
- }).inject( tr );
- MWF.require("MWF.widget.ScriptArea", function(){
- this.clickScriptEditor = new MWF.widget.ScriptArea(tr, {
- "title": "点击事件脚本",
- "isbind": false,
- "mode": "javascript",
- "maxObj": this.tree.editor.options.maxObj,
- "onChange": function(){
- var json = this.clickScriptEditor.toJson();
- this.data.clickScript.code = json.code;
- this.tree.editor.fireEvent("change", [{
- compareName: "."+this.getLevelName() + ".clickScript.code"
- }]);
- //this.data[name].html = json.html;
- }.bind(this),
- "onSave": function(){
- //this.designer.saveForm();
- }.bind(this),
- "style": "default",
- "runtime": "web"
- });
- this.clickScriptEditor.load(this.data.clickScript);
- }.bind(this));
- }
- this.propertyArea.setStyle("display", "block");
- this.propertyArea.scrollIntoView(false);
- this.setActionPosition();
- this.isEditProperty = true;
- this.tree.currentEditNode = this;
- }else{
- this.completeItemProperties();
- }
- }
- });
|