SimpleToolbar.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. o2.widget.SimpleToolbar = new Class({
  2. Extends: o2.widget.Common,
  3. Implements: [Options, Events],
  4. options: {
  5. "style": "default"
  6. },
  7. initialize: function(container, options, bindObject){
  8. this.setOptions(options);
  9. this.bindObject = bindObject;
  10. this.items = [];
  11. this.children = [];
  12. this.childrenButton = [];
  13. this.childrenMenu = [];
  14. this.path = o2.session.path+"/widget/$SimpleToolbar/";
  15. this.cssPath = o2.session.path+"/widget/$SimpleToolbar/"+this.options.style+"/css.wcss";
  16. this._loadCss();
  17. this.node = $(container);
  18. this.node.onselectstart = function (){return false;};
  19. this.node.oncontextmenu = function (){return false;};
  20. },
  21. load: function(){
  22. if (this.fireEvent("queryLoad")){
  23. this.node.set("styles", this.css.container);
  24. this._loadToolbarItemNode();
  25. this._loadToolbarItems();
  26. this.fireEvent("postLoad");
  27. }
  28. },
  29. _loadToolbarItemNode: function(){
  30. var subNodes = this.node.getChildren();
  31. subNodes.each(function(node, idx){
  32. var type = node.get("MWFnodetype");
  33. if (type){
  34. if (typeOf(this[type])=="array"){
  35. this[type].push(node);
  36. }else{
  37. this[type] = [];
  38. this[type].push(node);
  39. }
  40. }
  41. }.bind(this));
  42. },
  43. _loadToolbarItems: function(){
  44. //this._loadToolBarSeparator(this.MWFToolBarSeparator);
  45. this._loadToolBarButton(this.MWFToolBarButton);
  46. //this._loadToolBarMenu(this.MWFToolBarMenu);
  47. },
  48. _loadToolBarButton: function(nodes){
  49. if (nodes) {
  50. nodes.each(function(node, idx){
  51. var btn = new o2.widget.SimpleToolbarButton(node, this, this.options);
  52. btn.load();
  53. this.fireEvent("buttonLoad", [btn]);
  54. if (btn.buttonID){
  55. this.items[btn.buttonID] = btn;
  56. }
  57. this.children.push(btn);
  58. this.childrenButton.push(btn);
  59. }.bind(this));
  60. }
  61. }
  62. });
  63. o2.widget.SimpleToolbarButton = new Class({
  64. Implements: [Options, Events],
  65. options: {
  66. "text": "",
  67. "title": "",
  68. "pic": "",
  69. "pic_over": "",
  70. "action": "",
  71. "actionScript": "",
  72. "disable": false
  73. },
  74. initialize: function(node, toolbar, options){
  75. this.setOptions(options);
  76. this.node = $(node);
  77. this.toolbar = toolbar;
  78. this.buttonID = this.node.MWFnodeid || this.node.id;
  79. if (!this.node){
  80. this.node = new Element("div").inject(this.toolbar.node);
  81. }else{
  82. var buttonText = this.node.get("MWFButtonText");
  83. if (buttonText) this.options.text = buttonText;
  84. var title = this.node.get("title");
  85. if (title) this.options.title = title;
  86. var buttonImage = this.node.get("MWFButtonImage");
  87. if (buttonImage) this.options.pic = buttonImage;
  88. var buttonImageOver = this.node.get("MWFButtonImageOver");
  89. if (buttonImageOver) this.options.pic_over = buttonImageOver;
  90. var buttonDisable = this.node.get("MWFButtonDisable");
  91. if (buttonDisable) this.options.disable = true;
  92. var buttonAction = this.node.get("MWFButtonAction");
  93. if (buttonAction) this.options.action = buttonAction;
  94. var buttonIcon = this.node.get("MWFButtonIcon");
  95. if (buttonIcon) this.options.icon = buttonIcon;
  96. //var buttonActionScript = this.node.get("MWFButtonActionScript");
  97. //if (buttonActionScript) this.options.actionScript = buttonActionScript;
  98. }
  99. this.modifiyStyle = true;
  100. },
  101. load: function(){
  102. this._addButtonEvent();
  103. this.node.title = this.options.title;
  104. this.node.set("styles", this.toolbar.css.button);
  105. if (this.options.pic || this.options.icon) this.picNode = this._createImageNode(this.options.pic);
  106. if (this.options.text) this.textNode = this._createTextNode(this.options.text);
  107. this.setDisable(this.options.disable);
  108. },
  109. enable: function(){
  110. if (this.options.disable){
  111. this.setDisable(false);
  112. this.options.disable = false;
  113. }
  114. },
  115. disable: function(){
  116. if (!this.options.disable){
  117. this.setDisable(true);
  118. this.options.disable = true;
  119. }
  120. },
  121. setDisable: function(flag){
  122. if (flag){
  123. this.node.set("styles", this.toolbar.css.buttonDisable);
  124. if (this.picNode){
  125. this.picNode.set("styles", this.toolbar.css.buttonImgDivDisable);
  126. var img = this.picNode.getElement("img");
  127. if (img) {
  128. var src = img.get("src");
  129. var ext = src.substr(src.lastIndexOf("."), src.length);
  130. src = src.substr(0, src.lastIndexOf("."));
  131. src = src + "_gray" + ext;
  132. this.src_gray = src;
  133. img.set("src", src);
  134. }
  135. }
  136. if (this.textNode) this.textNode.set("styles", this.toolbar.css.buttonTextDivDisable);
  137. }else{
  138. this.node.set("styles", this.toolbar.css.button);
  139. if (this.picNode){
  140. this.picNode.set("styles", this.toolbar.css.buttonImgDiv);
  141. var img = this.picNode.getElement("img");
  142. if (img) {
  143. var src = img.get("src");
  144. src = src.replace("_gray", "");
  145. this.src_gray = src;
  146. img.set("src", src);
  147. }
  148. }
  149. if (this.textNode) this.textNode.set("styles", this.toolbar.css.buttonTextDiv);
  150. }
  151. },
  152. _createImageNode: function(src){
  153. if (src || this.options.icon){
  154. var div = new Element("span", {"styles": this.toolbar.css.buttonImgDiv}).inject(this.node);
  155. this.iconNode = new Element("span."+"ooicon-"+this.options.icon, {
  156. "styles": {display: "none"}
  157. }).inject(div);
  158. if (this.toolbar.css.buttonIcon) this.iconNode.setStyles(this.toolbar.css.buttonIcon);
  159. if (src) this.img = new Element("img", {
  160. "styles": this.toolbar.css.buttonImg,
  161. "src": src
  162. }).inject(div);
  163. return div;
  164. }else{
  165. return null;
  166. }
  167. },
  168. _createTextNode: function(text){
  169. if (text){
  170. var div = new Element("span", {
  171. "styles": this.toolbar.css.buttonTextDiv,
  172. "text": text
  173. }).inject(this.node);
  174. return div;
  175. }else{
  176. return null;
  177. }
  178. },
  179. _addButtonEvent: function(){
  180. this.node.addEvent("mouseover", this._buttonMouseOver.bind(this));
  181. this.node.addEvent("mouseout", this._buttonMouseOut.bind(this));
  182. this.node.addEvent("mousedown", this._buttonMouseDown.bind(this));
  183. this.node.addEvent("mouseup", this._buttonMouseUp.bind(this));
  184. this.node.addEvent("click", this._buttonClick.bind(this));
  185. },
  186. _buttonMouseOver: function(){
  187. if (this.modifiyStyle) if (!this.options.disable){
  188. if(this.options.pic_over && this.img) this.img.set("src",this.options.pic_over)
  189. this.node.set("styles", this.toolbar.css.buttonOver);
  190. };
  191. },
  192. _buttonMouseOut: function(){
  193. if (this.modifiyStyle) if (!this.options.disable){
  194. if (this.img) this.img.set("src",this.options.pic)
  195. this.node.set("styles", this.toolbar.css.buttonOut);
  196. };
  197. },
  198. _buttonMouseDown: function(){
  199. if (this.modifiyStyle) if (!this.options.disable){this.node.set("styles", this.toolbar.css.buttonDown);};
  200. },
  201. _buttonMouseUp: function(){
  202. if (this.modifiyStyle) if (!this.options.disable){this.node.set("styles", this.toolbar.css.buttonUp);};
  203. },
  204. _buttonClick: function(e){
  205. if (!this.options.disable){
  206. if (this.options.action){
  207. var tmparr = this.options.action.split(":");
  208. var action = tmparr.shift();
  209. var bindObj = (this.toolbar.bindObject) ? this.toolbar.bindObject : window;
  210. if (bindObj[action]){
  211. tmparr.push(this);
  212. tmparr.push(e);
  213. bindObj[action].apply(bindObj,tmparr);
  214. }else{
  215. if (window[action]){
  216. window[action].apply(this,tmparr);
  217. }
  218. }
  219. }
  220. }
  221. }
  222. });