Form.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. MWF.xApplication.cms.FormDesigner.Module = MWF.xApplication.cms.FormDesigner.Module || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "Module.Form", null, false);
  3. MWF.xDesktop.requireApp("cms.FormDesigner", "Property", null, false);
  4. MWF.xApplication.cms.FormDesigner.Module.Form = MWF.CMSFCForm = new Class({
  5. Extends: MWF.FCForm,
  6. options: {
  7. "style": "default",
  8. "propertyPath": "/x_component_cms_FormDesigner/Module/Form/form.html",
  9. "mode": "PC",
  10. "fields": ["Calendar", "Checkbox", "Datagrid", "Datagrid$Title", "Datagrid$Data", "Htmleditor", "Number", "Office", "Orgfield", "Personfield", "Readerfield", "Authorfield", "Radio", "Select", "Textarea", "Textfield"]
  11. },
  12. initialize: function(designer, container, options){
  13. this.setOptions(options);
  14. this.path = "/x_component_process_FormDesigner/Module/Form/";
  15. this.cssPath = "/x_component_process_FormDesigner/Module/Form/"+this.options.style+"/css.wcss";
  16. this._loadCss();
  17. this.container = null;
  18. this.form = this;
  19. this.moduleType = "form";
  20. this.moduleList = [];
  21. this.moduleNodeList = [];
  22. this.moduleContainerNodeList = [];
  23. this.moduleElementNodeList = [];
  24. this.moduleComponentNodeList = [];
  25. // this.moduleContainerList = [];
  26. this.dataTemplate = {};
  27. this.designer = designer;
  28. this.container = container;
  29. this.selectedModules = [];
  30. },
  31. loadStylesList: function(callback){
  32. var stylesUrl = "/x_component_cms_FormDesigner/Module/Form/template/"+((this.options.mode=="Mobile") ? "styles": "styles")+".json";
  33. MWF.getJSON(stylesUrl,{
  34. "onSuccess": function(responseJSON){
  35. this.stylesList= responseJSON;
  36. if (callback) callback(this.stylesList);
  37. }.bind(this),
  38. "onRequestFailure": function(){
  39. this.stylesList = {};
  40. if (callback) callback(this.stylesList);
  41. }.bind(this),
  42. "onError": function(){
  43. this.stylesList = {};
  44. if (callback) callback(this.stylesList);
  45. }.bind(this)
  46. }
  47. );
  48. },
  49. loadModule: function(json, dom, parent){
  50. //var classPre = "CMSFC";
  51. //var module = new MWF[classPre+json.type](this);
  52. //module.load(json, dom, parent);
  53. //return module;
  54. if( MWF["CMSFC"+json.type] ){
  55. var module = new MWF["CMSFC"+json.type](this);
  56. module.load(json, dom, parent);
  57. return module;
  58. }else{
  59. var module = new MWF["CMSFCDiv"](this);
  60. module.load(json, dom, parent);
  61. return module;
  62. }
  63. },
  64. createModule: function(className, e){
  65. //var classPre = MWF.CMSFD.RedesignModules.indexOf( className.toLowerCase() ) != -1 ? "CMSFC" : "FC";
  66. var classPre = "CMSFC";
  67. this.getTemplateData(className, function(data){
  68. var moduleData = Object.clone(data);
  69. var newTool = new MWF[classPre+className](this);
  70. newTool.create(moduleData, e);
  71. }.bind(this));
  72. },
  73. getTemplateData: function(className, callback, async){
  74. if (this.dataTemplate[className]){
  75. if (callback) callback(this.dataTemplate[className]);
  76. }else{
  77. var path = MWF.CMSFD.ResetTemplateModules.indexOf( className.toLowerCase() ) != -1 ? "x_component_cms_FormDesigner" : "x_component_process_FormDesigner";
  78. var templateUrl = "/"+path+"/Module/"+className+"/template.json";
  79. MWF.getJSON(templateUrl, function(responseJSON, responseText){
  80. this.dataTemplate[className] = responseJSON;
  81. if (callback) callback(responseJSON);
  82. }.bind(this), async);
  83. }
  84. },
  85. showProperty: function(){
  86. if (!this.property){
  87. this.property = new MWF.xApplication.cms.FormDesigner.Property(this, this.designer.propertyContentArea, this.designer, {
  88. "path": this.options.propertyPath,
  89. "onPostLoad": function(){
  90. this.property.show();
  91. }.bind(this)
  92. });
  93. this.property.load();
  94. }else{
  95. this.property.show();
  96. }
  97. },
  98. save: function(callback){
  99. this.designer.saveForm();
  100. //this._getFormData();
  101. //this.designer.actions.saveForm(this.data, function(responseJSON){
  102. // this.form.designer.notice(MWF.APPFD.LP.notice["save_success"], "ok", null, {x: "left", y:"bottom"});
  103. //
  104. // //this.json.id = responseJSON.data;
  105. // if (!this.json.name) this.treeNode.setText("<"+this.json.type+"> "+this.json.id);
  106. // this.treeNode.setTitle(this.json.id);
  107. // this.node.set("id", this.json.id);
  108. //
  109. // if (callback) callback();
  110. // //this.reload(responseJSON.data);
  111. //}.bind(this));
  112. },
  113. implode: function(){
  114. MWF.xDesktop.requireApp("cms.FormDesigner", "Import", function(){
  115. MWF.CMSFormImport.create("O2", this);
  116. }.bind(this));
  117. },
  118. implodeHTML: function(){
  119. MWF.xDesktop.requireApp("cms.FormDesigner", "Import", function(){
  120. MWF.CMSFormImport.create("html", this, {"type": "process"});
  121. }.bind(this));
  122. },
  123. implodeOffice: function(){
  124. MWF.xDesktop.requireApp("cms.FormDesigner", "Import", function(){
  125. MWF.CMSFormImport.create("office", this);
  126. }.bind(this));
  127. },
  128. setPropertiesOrStyles: function(name){
  129. if (name=="styles"){
  130. this.setCustomStyles();
  131. }
  132. if (name=="properties"){
  133. this.node.setProperties(this.json.properties);
  134. }
  135. },
  136. setCustomStyles: function(){
  137. var border = this.node.getStyle("border");
  138. this.node.clearStyles();
  139. this.node.setStyles((this.options.mode==="Mobile") ? this.css.formMobileNode : this.css.formNode);
  140. var y = this.container.getStyle("height");
  141. y = (y) ? y.toInt()-2 : this.container.getSize().y-2;
  142. this.node.setStyle("min-height", ""+y+"px");
  143. if (this.initialStyles) this.node.setStyles(this.initialStyles);
  144. this.node.setStyle("border", border);
  145. Object.each(this.json.styles, function(value, key){
  146. var reg = /^border\w*/ig;
  147. if (!key.test(reg)){
  148. this.node.setStyle(key, value);
  149. }
  150. }.bind(this));
  151. },
  152. _setEditStyle: function(name, obj, oldValue){
  153. if (name=="name"){
  154. var title = this.json.name || this.json.id;
  155. this.treeNode.setText("<"+this.json.type+"> "+title+" ["+this.options.mode+"] ");
  156. }
  157. if (name=="id"){
  158. if (!this.json.name) this.treeNode.setText("<"+this.json.type+"> "+this.json.id+" ["+this.options.mode+"] ");
  159. this.treeNode.setTitle(this.json.id);
  160. this.node.set("id", this.json.id);
  161. }
  162. if (name=="formStyleType"){
  163. this.templateStyles = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
  164. if (oldValue) {
  165. var oldTemplateStyles = this.stylesList[oldValue];
  166. if (oldTemplateStyles){
  167. if (oldTemplateStyles["form"]) this.clearTemplateStyles(oldTemplateStyles["form"]);
  168. }
  169. }
  170. if (this.templateStyles){
  171. if (this.templateStyles["form"]) this.setTemplateStyles(this.templateStyles["form"]);
  172. }
  173. this.setAllStyles();
  174. this.moduleList.each(function(module){
  175. if (oldTemplateStyles){
  176. module.clearTemplateStyles(oldTemplateStyles[module.moduleName]);
  177. }
  178. module.setStyleTemplate();
  179. module.setAllStyles();
  180. }.bind(this));
  181. }
  182. if (name==="css"){
  183. this.reloadCss();
  184. }
  185. this._setEditStyle_custom(name, obj, oldValue);
  186. },
  187. parseCSS: function(css){
  188. var rex = /(url\(.*\))/g;
  189. var match;
  190. while ((match = rex.exec(css)) !== null) {
  191. var pic = match[0];
  192. var len = pic.length;
  193. var s = pic.substring(pic.length-2, pic.length-1);
  194. var n0 = (s==="'" || s==="\"") ? 5 : 4;
  195. var n1 = (s==="'" || s==="\"") ? 2 : 1;
  196. pic = pic.substring(n0, pic.length-n1);
  197. if ((pic.indexOf("x_processplatform_assemble_surface")!=-1 || pic.indexOf("x_portal_assemble_surface")!=-1)){
  198. var host1 = MWF.Actions.getHost("x_processplatform_assemble_surface");
  199. var host2 = MWF.Actions.getHost("x_portal_assemble_surface");
  200. if (pic.indexOf("/x_processplatform_assemble_surface")!==-1){
  201. pic = pic.replace("/x_processplatform_assemble_surface", pic+"/x_processplatform_assemble_surface");
  202. }else if (pic.indexOf("x_processplatform_assemble_surface")!==-1){
  203. pic = pic.replace("x_processplatform_assemble_surface", pic+"/x_processplatform_assemble_surface");
  204. }
  205. if (pic.indexOf("/x_portal_assemble_surface")!==-1){
  206. pic = pic.replace("/x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
  207. }else if (pic.indexOf("x_portal_assemble_surface")!==-1){
  208. pic = pic.replace("x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
  209. }
  210. }
  211. pic = "url('"+pic+"')";
  212. var len2 = pic.length;
  213. css = css.substring(0, match.index) + pic + css.substring(rex.lastIndex, css.length);
  214. rex.lastIndex = rex.lastIndex + (len2-len);
  215. }
  216. return css;
  217. },
  218. preview: function(){
  219. MWF.xDesktop.requireApp("cms.FormDesigner", "Preview", function(){
  220. if (this.options.mode=="Mobile"){
  221. this.previewBox = new MWF.xApplication.cms.FormDesigner.Preview(this, {"size": {"x": "340", "y": 580}});
  222. }else{
  223. this.previewBox = new MWF.xApplication.cms.FormDesigner.Preview(this);
  224. }
  225. this.previewBox.load();
  226. }.bind(this));
  227. }
  228. });