Actionbar.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "Module.$Element", null, false);
  3. MWF.require("MWF.widget.Toolbar", null, false);
  4. MWF.xApplication.process.FormDesigner.Module.Actionbar = MWF.FCActionbar = new Class({
  5. Extends: MWF.FC$Element,
  6. Implements: [Options, Events],
  7. options: {
  8. "style": "default",
  9. "propertyPath": "../x_component_process_FormDesigner/Module/Actionbar/actionbar.html"
  10. },
  11. addAction: function(){
  12. },
  13. initialize: function(form, options){
  14. this.setOptions(options);
  15. this.path = "../x_component_process_FormDesigner/Module/Actionbar/";
  16. this.cssPath = "../x_component_process_FormDesigner/Module/Actionbar/"+this.options.style+"/css.wcss";
  17. this._loadCss();
  18. this.moduleType = "component";
  19. this.moduleName = "actionbar";
  20. this.Node = null;
  21. this.form = form;
  22. this.container = null;
  23. this.containerNode = null;
  24. this.systemTools = [];
  25. this.customTools = [];
  26. this.multiTools = [];
  27. //this.containers = [];
  28. //this.elements = [];
  29. },
  30. setTemplateStyles: function(styles){
  31. this.json.style = styles.style;
  32. this.json.iconOverStyle = styles.iconOverStyle || "";
  33. this.json.customIconStyle = styles.customIconStyle;
  34. this.json.customIconOverStyle = styles.customIconOverStyle || "";
  35. },
  36. clearTemplateStyles: function(styles){
  37. this.json.style = "form";
  38. this.json.iconOverStyle = "";
  39. this.json.customIconStyle = "";
  40. this.json.customIconOverStyle = "";
  41. },
  42. setAllStyles: function(){
  43. this._resetActionbar();
  44. },
  45. _createMoveNode: function(){
  46. this.moveNode = new Element("div", {
  47. "MWFType": "actionbar",
  48. "id": this.json.id,
  49. "styles": this.css.moduleNodeMove,
  50. "events": {
  51. "selectstart": function(e){
  52. e.preventDefault();
  53. }
  54. }
  55. }).inject(this.form.container);
  56. },
  57. _createNode: function(callback){
  58. this.node = new Element("div", {
  59. "id": this.json.id,
  60. "MWFType": "actionbar",
  61. "styles": this.css.moduleNode,
  62. "events": {
  63. "selectstart": function(e){
  64. e.preventDefault();
  65. }
  66. }
  67. }).inject(this.form.node);
  68. if (this.form.options.mode == "Mobile"){
  69. this.node.set("text", MWF.APPFD.LP.notice.notUseModuleInMobile+"("+this.moduleName+")");
  70. this.node.setStyles({"height": "24px", "line-height": "24px", "background-color": "#999"});
  71. }else{
  72. this.toolbarNode = new Element("div").inject(this.node);
  73. this.toolbarWidget = new MWF.widget.Toolbar(this.toolbarNode, {"style": this.json.style}, this);
  74. MWF.getJSON(this.path+"toolbars.json", function(json){
  75. // this.json.defaultTools = json;
  76. this.json.multiTools = json.map( function (d) { d.system = true; return d; });
  77. this.setToolbars(json, this.toolbarNode);
  78. this.toolbarWidget.load();
  79. }.bind(this), false);
  80. // if (this.json.sysTools.editTools){
  81. // this.setToolbars(this.json.sysTools.editTools, this.toolbarNode);
  82. //// this.setToolbars(this.json.tools.editTools, this.toolbarNode);
  83. // }else{
  84. // this.setToolbars(this.json.sysTools, this.toolbarNode);
  85. //// this.setToolbars(this.json.tools, this.toolbarNode);
  86. // }
  87. // this.resetIcons();
  88. }
  89. },
  90. _initModule: function(){
  91. this.setStyleTemplate();
  92. this._setNodeProperty();
  93. if (!this.form.isSubform) this._createIconAction();
  94. this._setNodeEvent();
  95. this._refreshActionbar();
  96. if( !this.json.events ){
  97. MWF.getJSON(this.path+"template.json", function(json){
  98. this.json.events = json.events;
  99. }.bind(this), false);
  100. }
  101. },
  102. _refreshActionbar: function(){
  103. if (this.form.options.mode == "Mobile"){
  104. this.node.set("text", MWF.APPFD.LP.notice.notUseModuleInMobile+"("+this.moduleName+")");
  105. this.node.setStyles({"height": "24px", "line-height": "24px", "background-color": "#999"});
  106. }else{
  107. this.toolbarNode = this.node.getFirst("div");
  108. this.toolbarNode.empty();
  109. this.toolbarWidget = new MWF.widget.Toolbar(this.toolbarNode, {"style": this.json.style}, this);
  110. if (!this.json.actionStyles) this.json.actionStyles = Object.clone(this.toolbarWidget.css);
  111. this.toolbarWidget.css = this.json.actionStyles;
  112. this.loadMultiToolbar();
  113. // if (this.json.defaultTools){
  114. // var json = Array.clone(this.json.defaultTools);
  115. // this.setToolbars(json, this.toolbarNode);
  116. // if (this.json.tools){
  117. // this.setCustomToolbars(Array.clone(this.json.tools), this.toolbarNode);
  118. // }
  119. // this.toolbarWidget.load();
  120. // }else{
  121. // MWF.getJSON(this.path+"toolbars.json", function(json){
  122. // this.json.defaultTools = json;
  123. // var json = Array.clone(this.json.defaultTools);
  124. // this.setToolbars(json, this.toolbarNode);
  125. // if (this.json.tools){
  126. // this.setCustomToolbars(Array.clone(this.json.tools), this.toolbarNode);
  127. // }
  128. // this.toolbarWidget.load();
  129. // }.bind(this), false);
  130. // }
  131. }
  132. },
  133. _resetActionbar: function(){
  134. if (this.form.options.mode == "Mobile"){
  135. this.node.set("text", MWF.APPFD.LP.notice.notUseModuleInMobile+"("+this.moduleName+")");
  136. this.node.setStyles({"height": "24px", "line-height": "24px", "background-color": "#999"});
  137. }else{
  138. this.toolbarNode = this.node.getFirst("div");
  139. this.toolbarNode.empty();
  140. this.toolbarWidget = new MWF.widget.Toolbar(this.toolbarNode, {"style": this.json.style}, this);
  141. if (!this.json.actionStyles){
  142. this.json.actionStyles = Object.clone(this.toolbarWidget.css);
  143. }else{
  144. this.toolbarWidget.css = Object.merge( Object.clone(this.json.actionStyles), this.toolbarWidget.css );
  145. this.json.actionStyles = Object.clone(this.toolbarWidget.css);
  146. }
  147. this.loadMultiToolbar();
  148. // if (this.json.defaultTools){
  149. // var json = Array.clone(this.json.defaultTools);
  150. // this.setToolbars(json, this.toolbarNode);
  151. // if (this.json.tools){
  152. // this.setCustomToolbars(Array.clone(this.json.tools), this.toolbarNode);
  153. // }
  154. // this.toolbarWidget.load();
  155. // }else{
  156. // MWF.getJSON(this.path+"toolbars.json", function(json){
  157. // this.json.defaultTools = json;
  158. // var json = Array.clone(this.json.defaultTools);
  159. // this.setToolbars(json, this.toolbarNode);
  160. // if (this.json.tools){
  161. // this.setCustomToolbars(Array.clone(this.json.tools), this.toolbarNode);
  162. // }
  163. // this.toolbarWidget.load();
  164. // //json = null;
  165. // }.bind(this), false);
  166. // }
  167. }
  168. },
  169. loadMultiToolbar : function(){
  170. if( this.json.multiTools ){
  171. var json = Array.clone(this.json.multiTools);
  172. this.setMultiToolbars(json, this.toolbarNode);
  173. this.toolbarWidget.load();
  174. }else if( this.json.defaultTools ){
  175. this.json.multiTools = this.json.defaultTools.map( function (d) { d.system = true; return d; });
  176. if (this.json.tools){
  177. this.json.multiTools = this.json.multiTools.concat( this.json.tools )
  178. }
  179. this.setMultiToolbars( Array.clone(this.json.multiTools), this.toolbarNode);
  180. this.toolbarWidget.load();
  181. }else{
  182. MWF.getJSON(this.path+"toolbars.json", function(json){
  183. this.json.multiTools = json.map( function (d) { d.system = true; return d; });
  184. if (this.json.tools){
  185. this.json.multiTools = this.json.multiTools.concat( this.json.tools )
  186. }
  187. this.setMultiToolbars(Array.clone(this.json.multiTools), this.toolbarNode);
  188. this.toolbarWidget.load();
  189. }.bind(this), false);
  190. }
  191. },
  192. setMultiToolbars: function(tools, node){
  193. tools.each(function(tool){
  194. if( tool.system ){
  195. this.setToolbars( [tool], node );
  196. }else{
  197. this.setCustomToolbars( [tool], node );
  198. }
  199. }.bind(this));
  200. },
  201. setToolbars: function(tools, node){
  202. tools.each(function(tool){
  203. var actionNode = new Element("div", {
  204. "MWFnodetype": tool.type,
  205. "MWFButtonImage": this.path+""+this.options.style+"/tools/"+(this.json.style || "default")+"/"+tool.img,
  206. "title": tool.title,
  207. "MWFButtonAction": tool.action,
  208. "MWFButtonText": tool.text
  209. }).inject(node);
  210. if( this.json.iconOverStyle ){
  211. actionNode.set("MWFButtonImageOver" , this.path+""+this.options.style+"/tools/"+this.json.iconOverStyle+"/"+tool.img );
  212. }
  213. actionNode.isSystemTool = true;
  214. this.systemTools.push(actionNode);
  215. this.multiTools.push( actionNode );
  216. if (tool.sub){
  217. var subNode = node.getLast();
  218. this.setToolbars(tool.sub, subNode);
  219. }
  220. }.bind(this));
  221. },
  222. setCustomToolbars: function(tools, node){
  223. //var style = (this.json.style || "default").indexOf("red") > -1 ? "red" : "blue";
  224. var path = "";
  225. if( this.json.customIconStyle ){
  226. path = this.json.customIconStyle+ "/";
  227. }
  228. tools.each(function(tool){
  229. var actionNode = new Element("div", {
  230. "MWFnodetype": tool.type,
  231. "MWFButtonImage": this.path+""+this.options.style +"/custom/"+path+tool.img,
  232. "title": tool.title,
  233. "MWFButtonAction": tool.action,
  234. "MWFButtonText": tool.text
  235. }).inject(node);
  236. if( this.json.customIconOverStyle ){
  237. actionNode.set("MWFButtonImageOver" , this.path+""+this.options.style +"/custom/"+this.json.customIconOverStyle+ "/" +tool.img );
  238. }
  239. this.customTools.push(actionNode);
  240. this.multiTools.push( actionNode );
  241. if (tool.sub){
  242. var subNode = node.getLast();
  243. this.setToolbars(tool.sub, subNode);
  244. }
  245. }.bind(this));
  246. },
  247. _setEditStyle_custom: function(name){
  248. if (name=="hideSystemTools"){
  249. if (this.json.hideSystemTools){
  250. this.systemTools.each(function(tool){
  251. tool.setStyle("display", "none");
  252. });
  253. }else{
  254. this.systemTools.each(function(tool){
  255. tool.setStyle("display", "block");
  256. });
  257. }
  258. }
  259. if (name=="defaultTools" || name=="tools" || name=="multiTools" || name==="actionStyles"){
  260. this._refreshActionbar();
  261. }
  262. }
  263. });