Actionbar.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. MWF.xApplication.cms.FormDesigner.Module = MWF.xApplication.cms.FormDesigner.Module || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "Module.Actionbar", null, false);
  3. MWF.require("MWF.widget.SimpleToolbar", null, false);
  4. MWF.xApplication.cms.FormDesigner.Module.Actionbar = MWF.CMSFCActionbar = new Class({
  5. Extends: MWF.FCActionbar,
  6. options: {
  7. "style": "default",
  8. "propertyPath": "../x_component_cms_FormDesigner/Module/Actionbar/actionbar.html"
  9. },
  10. Implements : [MWF.CMSFCMI],
  11. initialize: function(form, options){
  12. this.setOptions(options);
  13. this.path = "../x_component_cms_FormDesigner/Module/Actionbar/";
  14. this.cssPath = "../x_component_cms_FormDesigner/Module/Actionbar/"+this.options.style+"/css.wcss";
  15. this._loadCss();
  16. this.moduleType = "component";
  17. this.moduleName = "actionbar";
  18. this.Node = null;
  19. this.form = form;
  20. this.container = null;
  21. this.containerNode = null;
  22. this.systemTools = [];
  23. this.customTools = [];
  24. this.multiTools = [];
  25. },
  26. _initModule: function(){
  27. this._checkProcessTool();
  28. this.setStyleTemplate();
  29. this._setNodeProperty();
  30. if (!this.form.isSubform) this._createIconAction();
  31. this._setNodeEvent();
  32. this._refreshActionbar();
  33. if( !this.json.events ){
  34. MWF.getJSON(this.path+"template.json", function(json){
  35. this.json.events = json.events;
  36. }.bind(this), false);
  37. }
  38. },
  39. _checkProcessTool: function(){
  40. //删除从流程拷贝过来的系统按钮
  41. var processTools = ( this.json.multiTools || [] ).filter( function (tool) {
  42. return ["closeWork","saveWork","processWork","rerouteWork","resetWork","addTask","addSplit","retractWork","rollback",
  43. "deleteWork","printWork","pressWork","pauseTask","resumeTask"].contains( tool.action )
  44. });
  45. processTools.each(function (tool) {
  46. var actionNode = this.node.getElement("[mwfbuttonaction='"+tool.action+"']");
  47. if(actionNode)actionNode.destroy();
  48. this.json.multiTools.erase(tool);
  49. }.bind(this));
  50. var toolList = this.json.multiTools;
  51. if( processTools.length > 0 && this.form.options.mode !== "Mobile"){
  52. this.json.style = this.form.json.formStyleType.contains("red") ? "xform_blue_simple" : "xform_red_simple";
  53. this.json.customIconStyle = this.form.json.formStyleType.contains("red") ? "red" : "blue";
  54. this.json.customIconOverStyle = "white";
  55. this.json.actionStyles = null;
  56. o2.xhr_get(this.path+"toolbars.json", function(xhr){
  57. var multiTools = JSON.parse(xhr.responseText).map( function (d) { d.system = true; return d; });
  58. this.json.multiTools = multiTools.concat( toolList );
  59. }.bind(this), null,null,true);
  60. }
  61. },
  62. setTemplateStyles: function(styles){
  63. this.json.style = styles.style;
  64. this.json.iconType = styles.iconType;
  65. this.json.iconOverStyle = styles.iconOverStyle || "";
  66. this.json.customIconStyle = styles.customIconStyle;
  67. this.json.customIconOverStyle = styles.customIconOverStyle;
  68. },
  69. clearTemplateStyles: function(styles){
  70. this.json.style = "form";
  71. this.json.iconType = "";
  72. this.json.iconOverStyle = "";
  73. this.json.customIconStyle = "blue";
  74. this.json.customIconOverStyle = "white";
  75. },
  76. setAllStyles: function(){
  77. //this._refreshActionbar();
  78. this._resetActionbar();
  79. },
  80. _createNode: function(callback){
  81. this.node = new Element("div.form-toolbar-area", {
  82. "id": this.json.id,
  83. "MWFType": "actionbar",
  84. "styles": this.css.moduleNode,
  85. "events": {
  86. "selectstart": function(e){
  87. e.preventDefault();
  88. }
  89. }
  90. }).inject(this.form.node);
  91. if (this.form.options.mode == "Mobile"){
  92. this.node.set("text", MWF.APPFD.LP.notice.notUseModuleInMobile+"("+this.moduleName+")");
  93. this.node.setStyles({"height": "24px", "line-height": "24px", "background-color": "#999"});
  94. }else{
  95. this.toolbarNode = new Element("div.form-toolbar").inject(this.node);
  96. this.toolbarWidget = new MWF.widget.SimpleToolbar(this.toolbarNode, {"style": this.json.style}, this);
  97. o2.xhr_get(this.path+"toolbars.json", function(xhr){
  98. var jsonStr = xhr.responseText;
  99. this.json.multiTools = JSON.parse(jsonStr).map( function (d) { d.system = true; return d; });
  100. jsonStr = o2.bindJson(jsonStr, {"lp": MWF.xApplication.cms.FormDesigner.LP.actionBar});
  101. this.multiToolsJson = JSON.parse(jsonStr).map( function (d) { d.system = true; return d; });
  102. this.setToolbars(this.multiToolsJson, this.toolbarNode);
  103. this.toolbarWidget.load();
  104. this._setEditStyle_custom( "hideSystemTools" );
  105. this._setEditStyle_custom( "hideSetPopularDocumentTool" );
  106. }.bind(this), null,null,true);
  107. //MWF.getJSON(this.path+"toolbars.json", function(json){
  108. //this.json.defaultTools = json;
  109. // this.json.multiTools = json.map( function (d) { d.system = true; return d; });
  110. // this.setToolbars(json, this.toolbarNode);
  111. // this.toolbarWidget.load();
  112. // this._setEditStyle_custom( "hideSystemTools" );
  113. // this._setEditStyle_custom( "hideSetPopularDocumentTool" );
  114. //}.bind(this), false);
  115. // if (this.json.sysTools.editTools){
  116. // this.setToolbars(this.json.sysTools.editTools, this.toolbarNode);
  117. //// this.setToolbars(this.json.tools.editTools, this.toolbarNode);
  118. // }else{
  119. // this.setToolbars(this.json.sysTools, this.toolbarNode);
  120. //// this.setToolbars(this.json.tools, this.toolbarNode);
  121. // }
  122. // this.resetIcons();
  123. }
  124. },
  125. _refreshActionbar: function(){
  126. if (this.form.options.mode == "Mobile"){
  127. this.node.set("text", MWF.APPFD.LP.notice.notUseModuleInMobile+"("+this.moduleName+")");
  128. this.node.setStyles({"height": "24px", "line-height": "24px", "background-color": "#999"});
  129. }else{
  130. this.toolbarNode = this.node.getFirst("div");
  131. this.toolbarNode.empty();
  132. this.toolbarWidget = new MWF.widget.SimpleToolbar(this.toolbarNode, {"style": this.json.style}, this);
  133. if (!this.json.actionStyles) this.json.actionStyles = Object.clone(this.toolbarWidget.css);
  134. this.toolbarWidget.css = this.json.actionStyles;
  135. this.loadMultiToolbar();
  136. // if (this.json.defaultTools){
  137. // var json = Array.clone(this.json.defaultTools);
  138. // this.setToolbars(json, this.toolbarNode);
  139. // if (this.json.tools){
  140. // this.setCustomToolbars(Array.clone(this.json.tools), this.toolbarNode);
  141. // }
  142. // this.toolbarWidget.load();
  143. // this._setEditStyle_custom( "hideSystemTools" );
  144. // this._setEditStyle_custom( "hideSetPopularDocumentTool" );
  145. // }else{
  146. // MWF.getJSON(this.path+"toolbars.json", function(json){
  147. // this.json.defaultTools = json;
  148. // var json = Array.clone(this.json.defaultTools);
  149. // this.setToolbars(json, this.toolbarNode);
  150. // if (this.json.tools){
  151. // this.setCustomToolbars(Array.clone(this.json.tools), this.toolbarNode);
  152. // }
  153. // this.toolbarWidget.load();
  154. // this._setEditStyle_custom( "hideSystemTools" );
  155. // this._setEditStyle_custom( "hideSetPopularDocumentTool" );
  156. // }.bind(this), false);
  157. // }
  158. }
  159. },
  160. _resetActionbar: function(){
  161. if (this.form.options.mode == "Mobile"){
  162. this.node.set("text", MWF.APPFD.LP.notice.notUseModuleInMobile+"("+this.moduleName+")");
  163. this.node.setStyles({"height": "24px", "line-height": "24px", "background-color": "#999"});
  164. }else{
  165. this.toolbarNode = this.node.getFirst("div");
  166. this.toolbarNode.empty();
  167. this.toolbarWidget = new MWF.widget.SimpleToolbar(this.toolbarNode, {"style": this.json.style}, this);
  168. // this.toolbarWidget = new MWF.widget.Toolbar(this.toolbarNode, {"style": this.json.style}, this);
  169. if (!this.json.actionStyles){
  170. this.json.actionStyles = Object.clone(this.toolbarWidget.css);
  171. }else{
  172. this.toolbarWidget.css = Object.merge( Object.clone(this.json.actionStyles), this.toolbarWidget.css );
  173. this.json.actionStyles = Object.clone(this.toolbarWidget.css);
  174. }
  175. this.loadMultiToolbar();
  176. // if (this.json.defaultTools){
  177. // var json = Array.clone(this.json.defaultTools);
  178. // this.setToolbars(json, this.toolbarNode);
  179. // if (this.json.tools){
  180. // this.setCustomToolbars(Array.clone(this.json.tools), this.toolbarNode);
  181. // }
  182. // this.toolbarWidget.load();
  183. // }else{
  184. // MWF.getJSON(this.path+"toolbars.json", function(json){
  185. // this.json.defaultTools = json;
  186. // var json = Array.clone(this.json.defaultTools);
  187. // this.setToolbars(json, this.toolbarNode);
  188. // if (this.json.tools){
  189. // this.setCustomToolbars(Array.clone(this.json.tools), this.toolbarNode);
  190. // }
  191. // this.toolbarWidget.load();
  192. // }.bind(this), false);
  193. // }
  194. }
  195. },
  196. loadMultiToolbar : function(){
  197. if( this.json.multiTools ){
  198. if (MWF.xApplication.cms.FormDesigner.LP.actionBar){
  199. var jsonStr = JSON.stringify(this.json.multiTools);
  200. jsonStr = o2.bindJson(jsonStr, {"lp": MWF.xApplication.cms.FormDesigner.LP.actionBar});
  201. this.multiToolsJson = JSON.parse(jsonStr); //.map( function (d) { return d; });
  202. }else{
  203. this.multiToolsJson = this.json.multiTools;
  204. }
  205. var json = Array.clone(this.multiToolsJson);
  206. //var json = Array.clone(this.json.multiTools);
  207. this.setMultiToolbars(json, this.toolbarNode);
  208. this.toolbarWidget.load();
  209. this._setEditStyle_custom( "hideSystemTools" );
  210. this._setEditStyle_custom( "hideSetPopularDocumentTool" );
  211. }else if( this.json.defaultTools ){
  212. this.json.multiTools = this.json.defaultTools.map( function (d) { d.system = true; return d; });
  213. if (this.json.tools){
  214. this.json.multiTools = this.json.multiTools.concat( this.json.tools )
  215. }
  216. this.setMultiToolbars( Array.clone(this.json.multiTools), this.toolbarNode);
  217. this.toolbarWidget.load();
  218. this._setEditStyle_custom( "hideSystemTools" );
  219. this._setEditStyle_custom( "hideSetPopularDocumentTool" );
  220. }else{
  221. o2.xhr_get(this.path+"toolbars.json", function(xhr){
  222. var jsonStr = xhr.responseText;
  223. this.json.multiTools = JSON.parse(jsonStr).map( function (d) { d.system = true; return d; });
  224. if (MWF.xApplication.cms.FormDesigner.LP.actionBar){
  225. jsonStr = o2.bindJson(jsonStr, {"lp": MWF.xApplication.cms.FormDesigner.LP.actionBar});
  226. this.multiToolsJson = JSON.parse(jsonStr).map( function (d) { d.system = true; return d; });
  227. }else{
  228. this.multiToolsJson = this.json.multiTools;
  229. }
  230. //this.json.multiTools = json.map( function (d) { d.system = true; return d; });
  231. if (this.json.tools){
  232. this.multiToolsJson = this.multiToolsJson.concat( this.json.tools )
  233. }
  234. this.setMultiToolbars(Array.clone(this.multiToolsJson), this.toolbarNode);
  235. this.toolbarWidget.load();
  236. this._setEditStyle_custom( "hideSystemTools" );
  237. this._setEditStyle_custom( "hideSetPopularDocumentTool" );
  238. }.bind(this), null,null,true);
  239. //MWF.getJSON(this.path+"toolbars.json", function(json){
  240. // this.json.multiTools = json.map( function (d) { d.system = true; return d; });
  241. // if (this.json.tools){
  242. // this.json.multiTools = this.json.multiTools.concat( this.json.tools )
  243. // }
  244. // this.setMultiToolbars(Array.clone(this.json.multiTools), this.toolbarNode);
  245. // this.toolbarWidget.load();
  246. // this._setEditStyle_custom( "hideSystemTools" );
  247. // this._setEditStyle_custom( "hideSetPopularDocumentTool" );
  248. //}.bind(this), false);
  249. }
  250. },
  251. setMultiToolbars: function(tools, node){
  252. tools.each(function(tool){
  253. if( tool.system ){
  254. this.setToolbars( [tool], node );
  255. }else{
  256. this.setCustomToolbars( [tool], node );
  257. }
  258. }.bind(this));
  259. },
  260. getImagePath: function(img, iscustom){
  261. if( iscustom ){
  262. var style;
  263. if( this.json.customIconStyle ){
  264. style = this.json.customIconStyle;
  265. }else{
  266. style = (this.json.style || "default").indexOf("red") > -1 ? "red" : "blue";
  267. }
  268. return this.path+""+this.options.style +"/custom/"+ style +"/"+ img;
  269. }else{
  270. return this.path+""+this.options.style +"/tools/"+ (this.json.style || "default") +"/"+img;
  271. }
  272. },
  273. getImageOverPath: function(img_over, img, iscustom){
  274. if( iscustom ){
  275. var style_over = this.json.customIconOverStyle || "white";
  276. return this.path+""+this.options.style+"/custom/"+ style_over +"/"+img;
  277. }else{
  278. return this.path+""+this.options.style+"/tools/"+ (this.json.style || "default") +"/"+ img_over;
  279. }
  280. },
  281. setToolbars: function(tools, node){
  282. tools.each(function(tool){
  283. var actionNode = new Element("div", {
  284. "MWFnodetype": tool.type,
  285. //"MWFButtonImage": this.path+""+this.options.style +"/tools/"+ (this.json.style || "default") +"/"+tool.img,
  286. //"MWFButtonImageOver": this.path+""+this.options.style+"/tools/"+ (this.json.style || "default") +"/"+tool.img_over,
  287. "MWFButtonImage": this.json.iconType==="font" ? "" : this.getImagePath(tool.img, tool.customImg),
  288. "MWFButtonIcon": tool.icon,
  289. "MWFButtonImageOver": this.getImageOverPath(tool.img_over, tool.img, tool.customImg),
  290. "title": tool.title,
  291. "MWFButtonAction": tool.action,
  292. "MWFButtonText": tool.text
  293. }).inject(node);
  294. this.systemTools.push(actionNode);
  295. this.multiTools.push( actionNode );
  296. if (tool.sub){
  297. var subNode = node.getLast();
  298. this.setToolbars(tool.sub, subNode);
  299. }
  300. }.bind(this));
  301. },
  302. setCustomToolbars: function(tools, node){
  303. //var style = (this.json.style || "default").indexOf("red") > -1 ? "red" : "blue";
  304. var style;
  305. if( this.json.customIconStyle ){
  306. style = this.json.customIconStyle;
  307. }else{
  308. style = (this.json.style || "default").indexOf("red") > -1 ? "red" : "blue";
  309. }
  310. var style_over = this.json.customIconOverStyle || "white";
  311. tools.each(function(tool){
  312. var actionNode = new Element("div", {
  313. "MWFnodetype": tool.type,
  314. "MWFButtonImage": this.json.iconType==="font" ? "" : this.path+""+this.options.style +"/custom/"+ style +"/"+tool.img,
  315. "MWFButtonIcon": tool.icon,
  316. "MWFButtonImageOver": this.path+""+this.options.style+"/custom/"+ style_over +"/"+tool.img,
  317. "title": tool.title,
  318. "MWFButtonAction": tool.action,
  319. "MWFButtonText": tool.text
  320. }).inject(node);
  321. this.customTools.push(actionNode);
  322. this.multiTools.push( actionNode );
  323. if (tool.sub){
  324. var subNode = node.getLast();
  325. this.setToolbars(tool.sub, subNode);
  326. }
  327. }.bind(this));
  328. },
  329. _setEditStyle_custom: function(name){
  330. if (name=="hideSystemTools"){
  331. if (this.json.hideSystemTools){
  332. this.systemTools.each(function(tool){
  333. // tool.setStyle("display", "none");
  334. tool.hide();
  335. });
  336. }else{
  337. this.systemTools.each(function(tool){
  338. // tool.setStyle("display", "block");
  339. tool.show()
  340. });
  341. }
  342. }
  343. if (name=="hideSetPopularDocumentTool"){
  344. if (this.json.hideSetPopularDocumentTool){
  345. this.systemTools.each(function(tool){
  346. if( tool.get("MWFButtonAction") == "setPopularDocument" ){
  347. // tool.setStyle("display", "none");
  348. tool.hide();
  349. }
  350. });
  351. }else{
  352. this.systemTools.each(function(tool){
  353. if( tool.get("MWFButtonAction") == "setPopularDocument" ){
  354. // tool.setStyle("display", "block");
  355. tool.show();
  356. }
  357. });
  358. }
  359. }
  360. if (name=="defaultTools" || name=="tools" || name=="multiTools" || name==="actionStyles"){
  361. this._refreshActionbar();
  362. }
  363. }
  364. });