Widgetmodules.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. MWF.xApplication.portal.PageDesigner.Module.Widgetmodules = MWF.PCWidgetmodules = new Class({
  2. Extends: MWF.FC$Module,
  3. Implements: [Options, Events],
  4. options: {
  5. "style": "default"
  6. //"propertyPath": "../x_component_portal_PageDesigner/Module/Radio/radio.html"
  7. },
  8. initialize: function(form, options){
  9. this.setOptions(options);
  10. this.path = "../x_component_portal_PageDesigner/Module/Widgetmodules/";
  11. this.cssPath = "../x_component_portal_PageDesigner/Module/Widgetmodules/"+this.options.style+"/css.wcss";
  12. this._loadCss();
  13. //this.moduleType = "element";
  14. //this.moduleName = "radio";
  15. this.form = form;
  16. this.page = form;
  17. this.container = null;
  18. this.containerNode = null;
  19. },
  20. _createMoveNode: function(){
  21. this.moveNode = new Element("div", {
  22. "styles": this.css.moduleNodeMove,
  23. "events": {
  24. "selectstart": function(){
  25. return false;
  26. }
  27. }
  28. }).inject(this.form.container);
  29. },
  30. _createNode: function(relativeNode, position){
  31. var module = this;
  32. var url = this.path+"widgetSelect.html";
  33. MWF.require("MWF.widget.Dialog", function(){
  34. var size = $(document.body).getSize();
  35. var x = size.x/2-180;
  36. var y = size.y/2-100;
  37. var dlg = new MWF.DL({
  38. "title": "Insert",
  39. "style": "property",
  40. "top": y,
  41. "left": x-40,
  42. "fromTop":size.y/2-65,
  43. "fromLeft": size.x/2,
  44. "width": 360,
  45. "height": 200,
  46. "url": url,
  47. "lp": MWF.xApplication.process.FormDesigner.LP.propertyTemplate,
  48. "buttonList": [
  49. {
  50. "text": MWF.APPFD.LP.button.ok,
  51. "action": function(){
  52. var widgetid = module.widgetSelect.options[module.widgetSelect.selectedIndex].value;
  53. if( !widgetid || widgetid==="none" ){
  54. module.page.designer.notice(module.page.designer.lp.notice.selectWidget, "error");
  55. return;
  56. }
  57. var wrapDiv = "yes";
  58. dlg.node.getElements(".wrapDiv").each( function (el) {
  59. if( el.get("checked") )wrapDiv = el.get("value");
  60. });
  61. module.appendWidgetModules( widgetid, relativeNode, position, wrapDiv );
  62. this.close();
  63. }
  64. },
  65. {
  66. "text": MWF.APPFD.LP.button.cancel,
  67. "action": function(){
  68. module._clearDragComplete();
  69. this.close();
  70. }
  71. }
  72. ],
  73. "onPostShow": function(){
  74. o2.Actions.load("x_portal_assemble_designer").PortalAction.list(function (json) {
  75. var td = dlg.node.getElementById("MWFPortalSelectTd");
  76. var select = module.appSelect = new Element("select").inject(td);
  77. var option = new Element("option", {"text": ""}).inject(select);
  78. json.data.each(function(app){
  79. var option = new Element("option", {
  80. "text": app.name,
  81. "value": app.id
  82. }).inject(select);
  83. }.bind(this));
  84. select.addEvent("change", function(){
  85. var appid = module.appSelect.options[module.appSelect.selectedIndex].value;
  86. module.setWidgetSelectOptions( appid );
  87. })
  88. });
  89. var td = dlg.node.getElementById("MWFWidgetSelectTd");
  90. module.widgetSelect = new Element("select").inject(td);
  91. module.setWidgetSelectOptions();
  92. }.bind(this)
  93. });
  94. dlg.show();
  95. }.bind(this));
  96. },
  97. setWidgetSelectOptions: function( aplication ){
  98. var select = this.widgetSelect;
  99. select.empty();
  100. this.form.designer.actions.listWidget( aplication || this.form.designer.application.id, function(json){
  101. var option = new Element("option", {"text": "none"}).inject(select);
  102. json.data.each(function(widget){
  103. var option = new Element("option", {
  104. "text": widget.name,
  105. "value": widget.id
  106. }).inject(select);
  107. }.bind(this));
  108. }.bind(this));
  109. },
  110. _dragComplete: function(relativeNode, position){
  111. if (!this.node){
  112. this._createNode(relativeNode, position );
  113. }else{
  114. this._clearDragComplete();
  115. }
  116. },
  117. //_dragMoveComplete: function( relativeNode, position ){
  118. // //this.setStyleTemplate();
  119. //
  120. // if( this.injectNoticeNode )this.injectNoticeNode.destroy();
  121. // //var overflow = this.moveNode.retrieve("overflow");
  122. // //if( overflow ){
  123. // // this.moveNode.setStyle("overflow",overflow);
  124. // // this.moveNode.eliminate("overflow");
  125. // //}
  126. //
  127. // //if (!this.node){
  128. // // this._createNode();
  129. // //}
  130. // //this._resetTreeNode();
  131. //
  132. // //if( relativeNode && position ){
  133. // // this.node.inject( relativeNode, position );
  134. // //}else{
  135. // // this.node.inject(this.copyNode, "before");
  136. // //}
  137. //
  138. // //this._initModule();
  139. //
  140. // //var thisDisplay = this.node.retrieve("thisDisplay");
  141. // //if (thisDisplay){
  142. // // this.node.setStyle("display", thisDisplay);
  143. // //}
  144. //
  145. // this._clearDragComplete();
  146. //
  147. // //this.form.json.moduleList[this.json.id] = this.json;
  148. // //if (this.form.scriptDesigner) this.form.scriptDesigner.createModuleScript(this.json);
  149. //
  150. // //this.selected();
  151. //},
  152. _clearDragComplete : function(){
  153. if( this.injectNoticeNode )this.injectNoticeNode.destroy();
  154. if (this.copyNode) this.copyNode.destroy();
  155. if (this.moveNode) this.moveNode.destroy();
  156. this.moveNode = null;
  157. this.copyNode = null;
  158. this.nextModule = null;
  159. this.form.moveModule = null;
  160. delete this;
  161. },
  162. appendWidgetModules: function( widgetid, relativeNode, position, wrapDiv ){
  163. MWF.Actions.get("x_portal_assemble_designer").getWidget(widgetid, function(json){
  164. var parentModule = this.parentContainer || this.inContainer || this.onDragModule;
  165. this.containerModule = this.page.createModuleImmediately("Div", parentModule, relativeNode || this.copyNode, position || "before", false, false);
  166. this.node = this.containerModule.node;
  167. var data = this.getWidgetData( json.data );
  168. var moduleList = this.page.json.moduleList;
  169. var tmpNode = new Element("div").inject( this.page.container );
  170. tmpNode.set("html", data.html);
  171. var html = tmpNode.getFirst().get("html");
  172. tmpNode.destroy();
  173. this.node.set("html", html );
  174. Object.each(data.json.moduleList, function (moduleJson) {
  175. var oid = moduleJson.id;
  176. var id = moduleJson.id;
  177. var idx = 1;
  178. while (this.page.json.moduleList[id]) {
  179. id = oid + "_" + idx;
  180. idx++;
  181. }
  182. if (oid != id) {
  183. moduleJson.id = id;
  184. var moduleNode = this.node.getElementById(oid);
  185. if (moduleNode) moduleNode.set("id", id);
  186. }
  187. this.page.json.moduleList[moduleJson.id] = moduleJson;
  188. }.bind(this));
  189. if( wrapDiv === "no" ){
  190. this.node.getChildren().each( function (el) {
  191. if( el.get("MWFType") && el.get("id")){
  192. var id = el.get("id");
  193. el.inject( relativeNode || this.copyNode, position || "before" );
  194. }
  195. }.bind(this));
  196. this.page.parseModules( parentModule, parentModule.node);
  197. //this.containerModule.delete();
  198. this.page.selected();
  199. this.containerModule.destroy();
  200. }else{
  201. this.page.parseModules(this.containerModule, this.node);
  202. }
  203. //var copyModuleNode = this.node.getFirst();
  204. //while (copyModuleNode) {
  205. // //copyModuleNode.inject(injectNode, where);
  206. // var copyModuleJson = this.page.getDomjson(copyModuleNode);
  207. // var module = this.page.loadModule(copyModuleJson, copyModuleNode, this.containerModule);
  208. // module._setEditStyle_custom("id");
  209. // module.selected();
  210. // //loadModule: function(json, dom, parent)
  211. //
  212. // copyModuleNode = copyModuleNode.getNext();
  213. //}
  214. this._clearDragComplete();
  215. //this.setCustomStyles();
  216. //this.node.setProperties(this.json.properties);
  217. //this.setNodeEvents();
  218. //if (this.options.mode==="Mobile"){
  219. // if (oldStyleValue) this._setEditStyle("pageStyleType", null, oldStyleValue);
  220. //}
  221. }.bind(this), null, false);
  222. },
  223. getWidgetData: function(data){
  224. var widgetDataStr = null;
  225. if (this.page.options.mode !== "Mobile"){
  226. widgetDataStr = data.data;
  227. }else{
  228. widgetDataStr = data.mobileData;
  229. }
  230. var d = null;
  231. if (widgetDataStr){
  232. d = JSON.decode(MWF.decodeJsonString(widgetDataStr));
  233. d.updateTime = data.updateTime;
  234. }
  235. return d;
  236. }
  237. });