war/WEB-INF/classes/jp/sourceforge/manganetwork/page/javascripts/spinelz/toolbar.js

   1 // Copyright (c) 2006 spinelz.org (http://script.spinelz.org/)\r
   2 // \r
   3 // Permission is hereby granted, free of charge, to any person obtaining\r
   4 // a copy of this software and associated documentation files (the\r
   5 // "Software"), to deal in the Software without restriction, including\r
   6 // without limitation the rights to use, copy, modify, merge, publish,\r
   7 // distribute, sublicense, and/or sell copies of the Software, and to\r
   8 // permit persons to whom the Software is furnished to do so, subject to\r
   9 // the following conditions:\r
  10 // \r
  11 // The above copyright notice and this permission notice shall be\r
  12 // included in all copies or substantial portions of the Software.\r
  13 //\r
  14 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,\r
  15 // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\r
  16 // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\r
  17 // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\r
  18 // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\r
  19 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\r
  20 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\r
  21 \r
  22 var ToolBar = Class.create();\r
  23 ToolBar.className = {\r
  24   container : 'toolbar_container',\r
  25   containerLeft : 'toolbar_containerLeft',\r
  26   containerMiddle : 'toolbar_containerMiddle',\r
  27   containerRight : 'toolbar_containerRight', \r
  28   toolbarItem : 'toolbar_item',\r
  29   toolbarItemHover : 'toolbar_itemHov',\r
  30   toolbarItemPres : 'toolbar_itemPres',\r
  31   toolbarContent : 'toolbar_content',\r
  32   toolbarContentPres: 'toolbar_contentPres'\r
  33 }\r
  34 \r
  35 ToolBar.prototype = {\r
  36 \r
  37   initialize: function(element) {\r
  38     var options = Object.extend({\r
  39       cssPrefix : 'custom_'\r
  40     }, arguments[1] || {});\r
  41     \r
  42     this.element = $(element);\r
  43     Element.setStyle(this.element, {visibility: 'hidden'});\r
  44     Element.hide(this.element);\r
  45     this.options = options;\r
  46     \r
  47     var customCss = CssUtil.appendPrefix(this.options.cssPrefix, ToolBar.className);\r
  48     this.classNames = new CssUtil([ToolBar.className, customCss]);\r
  49     \r
  50     this.build();\r
  51     Element.setStyle(this.element, {visibility: 'visible'});\r
  52     Element.show(this.element);\r
  53   },\r
  54   \r
  55   build: function() {\r
  56 //    Element.cleanWhitespace(this.element);\r
  57     this.classNames.addClassNames(this.element, 'container');\r
  58     var iconList = this.element.childNodes;    \r
  59     \r
  60     var containerLeft = Builder.node('div');\r
  61     this.classNames.addClassNames(containerLeft, 'containerLeft');\r
  62     \r
  63     this.containerMiddle = Builder.node('div');\r
  64     this.classNames.addClassNames(this.containerMiddle, 'containerMiddle');\r
  65     \r
  66     var containerRight = Builder.node('div');\r
  67     this.classNames.addClassNames(containerRight, 'containerRight');\r
  68     \r
  69     var removeList = [];\r
  70     var toolbar = this; \r
  71     $A(iconList).each(function(i) {\r
  72       if (i.nodeType != 1) {\r
  73         throw $continue;\r
  74       }\r
  75       toolbar.buildIcon(i);\r
  76     });\r
  77     \r
  78     this.element.appendChild(containerLeft);\r
  79     this.element.appendChild(this.containerMiddle);\r
  80     this.element.appendChild(containerRight);\r
  81   },\r
  82   \r
  83   buildIcon: function(icon) {\r
  84     var toolbarItem = Builder.node('div');\r
  85     this.classNames.addClassNames(toolbarItem, 'toolbarItem');\r
  86     \r
  87     var toolbarContent = Builder.node('div');\r
  88     this.classNames.addClassNames(toolbarContent, 'toolbarContent');\r
  89     \r
  90     toolbarContent.appendChild(icon);\r
  91     toolbarItem.appendChild(toolbarContent);\r
  92     this.containerMiddle.appendChild(toolbarItem);\r
  93     this.setHovEvent(toolbarItem);\r
  94     this.setPresEvent(toolbarItem);\r
  95   },\r
  96   \r
  97   addIcon: function(options) {\r
  98     var iconOptions = Object.extend({\r
  99       id : 'newIcon',\r
 100       src : 'url',\r
 101       alt : 'icon',\r
 102       width: 15,\r
 103       height: 15\r
 104     }, arguments[0] || {});\r
 105     if (!$(iconOptions.id)) {\r
 106       var icon = Builder.node('img', {id: iconOptions.id, src: iconOptions.src, alt: iconOptions.alt, style: 'width: ' + iconOptions.width + 'px; height: ' + iconOptions.height + 'px;'});\r
 107       this.buildIcon(icon);\r
 108     }\r
 109   },\r
 110   \r
 111   removeIcon: function(icon) {\r
 112     var target = $(icon);\r
 113     if (target) {\r
 114       var itemNode = target.parentNode.parentNode;\r
 115       Element.remove(itemNode);\r
 116     } \r
 117   },    \r
 118 \r
 119   addEvent: function(icon, eventName, func) {\r
 120     var target = $(icon);\r
 121     if (target) {\r
 122       var itemNode = target.parentNode.parentNode;\r
 123       Event.observe(itemNode, eventName, func);\r
 124     }\r
 125   },\r
 126   \r
 127   removeEvent: function(icon, eventName, func) {\r
 128     var target = $(icon);\r
 129     if (target) {\r
 130       var itemNode = target.parentNode.parentNode;\r
 131       Event.stopObserving(itemNode, eventName, func);\r
 132     }\r
 133   },\r
 134   setHovEvent: function(element) {\r
 135     Event.observe(element, "mouseout", this.toggleItemClass(element, 'toolbarItem').bindAsEventListener(this));\r
 136     Event.observe(element, "mouseover", this.toggleItemClass(element, 'toolbarItemHover').bindAsEventListener(this));\r
 137     Event.observe(element, "mouseout", this.toggleItemClass(element.childNodes[0], 'toolbarContent').bindAsEventListener(this));\r
 138   },\r
 139   \r
 140   setPresEvent: function(element) {\r
 141     Event.observe(element, "mousedown", this.toggleItemClass(element, 'toolbarItemPres').bindAsEventListener(this));\r
 142     Event.observe(element, "mouseup", this.toggleItemClass(element, 'toolbarItem').bindAsEventListener(this));\r
 143     Event.observe(element, "mousedown", this.toggleItemClass(element.childNodes[0], 'toolbarContentPres').bindAsEventListener(this));\r
 144     Event.observe(element, "mouseup", this.toggleItemClass(element.childNodes[0], 'toolbarContent').bindAsEventListener(this));\r
 145   },\r
 146   \r
 147   toggleItemClass: function(target, className) {\r
 148     return function() {\r
 149       this.classNames.refreshClassNames(target, className);\r
 150     }\r
 151   }\r
 152 }\r