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

   1 // Copyright (c) 2005 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 NavPanel = Class.create();\r
  23 NavPanel.className = {\r
  24   navPanel : 'navPanel',\r
  25   panel: 'navPanel_panel',\r
  26   tab : 'navPanel_tab',\r
  27   tabLeftInactive : 'navPanel_tabLeftInactive',\r
  28   tabLeftActive: 'navPanel_tabLeftActive',\r
  29   tabMiddleInactive : 'navPanel_tabMiddleInactive',\r
  30   tabMiddleActive : 'navPanel_tabMiddleActive',\r
  31   tabRightInactive : 'navPanel_tabRightInactive',\r
  32   tabRightActive : 'navPanel_tabRightActive'\r
  33 }\r
  34 NavPanel.prototype = {\r
  35   \r
  36   initialize: function(element) {\r
  37     var options = Object.extend({\r
  38       selected: 1,\r
  39       cssPrefix: 'custom_'\r
  40     }, arguments[1] || {});\r
  41     \r
  42     this.options = options;\r
  43     this.element = $(element);\r
  44     Element.setStyle(this.element, {visibility: 'hidden'});\r
  45     Element.hide(this.element);\r
  46     \r
  47     var customCss = CssUtil.appendPrefix(this.options.cssPrefix, NavPanel.className);\r
  48     this.classNames = new CssUtil([NavPanel.className, customCss]);\r
  49     \r
  50     this.classNames.addClassNames(this.element, 'navPanel');\r
  51     \r
  52     this.selected = (this.options.selected > 0) ? this.options.selected - 1 :  0 ;\r
  53     this.start();\r
  54     \r
  55     Element.setStyle(this.element, {visibility: 'visible'});\r
  56     Element.show(this.element);\r
  57   },\r
  58   \r
  59   start: function() {\r
  60     this.tabs = [];\r
  61     this.panels = [];\r
  62     this.panelList = [];\r
  63 \r
  64     this.tabId = this.element.id + '_tab';\r
  65     this.tabLeftId = this.tabId + '_left';\r
  66     this.tabMiddleId = this.tabId + '_middle';\r
  67     this.tabRightId = this.tabId + '_right';\r
  68     this.panelId = this.element.id + '_panel';\r
  69     \r
  70     this.build();  \r
  71   },  \r
  72   \r
  73   build: function() {\r
  74     Element.cleanWhitespace(this.element);\r
  75     this.panelList = this.element.childNodes;\r
  76     \r
  77     for (var i = 0; i < this.panelList.length; i++) {\r
  78       if (this.panelList[i].nodeType != 1) {\r
  79         Element.remove(this.panelList[i]);\r
  80         i--;\r
  81         continue;\r
  82       }\r
  83       Element.cleanWhitespace(this.panelList[i]);\r
  84       var navSet = this.panelList[i].childNodes;\r
  85       this.buildTab(navSet[0], i);\r
  86       this.buildPanel(navSet[0], i);\r
  87     }\r
  88     this.selectTab();\r
  89   },\r
  90   \r
  91   \r
  92   buildTab: function(tabTitle, i) {\r
  93     var tab = Builder.node('div', {id:this.tabId + i});\r
  94     this.classNames.addClassNames(tab, 'tab');\r
  95     var tabLeft = Builder.node('div', {id:this.tabLeftId + i});\r
  96     var tabMiddle = Builder.node('div', {id:this.tabMiddleId + i});\r
  97     tabMiddle.appendChild(tabTitle);\r
  98     var tabRight = Builder.node('div',{id:this.tabRightId + i});\r
  99     \r
 100     tab.appendChild(tabLeft);\r
 101     tab.appendChild(tabMiddle);\r
 102     tab.appendChild(tabRight);\r
 103     Event.observe(tab, 'click', this.selectTab.bindAsEventListener(this));\r
 104 \r
 105     this.tabs[i] = tab;\r
 106     this.setTabInactive(tab);\r
 107     this.panelList[i].appendChild(tab);\r
 108   },\r
 109   \r
 110   buildPanel: function(panelContent, i) {\r
 111     var panel = Builder.node('div', {id:this.panelId + i});\r
 112     this.classNames.addClassNames(panel, 'panel');\r
 113     panel.appendChild(panelContent);\r
 114     Element.hide(panel);\r
 115     this.panels[i] = panel;\r
 116     this.panelList[i].appendChild(panel);\r
 117   },\r
 118   \r
 119   selectTab: function(e) {\r
 120     if (!e) {\r
 121       if (!this.panels[this.selected]) this.selected = 0;\r
 122       Element.show(this.panels[this.selected]);\r
 123       this.setTabActive(this.tabs[this.selected]);\r
 124       return;\r
 125     }\r
 126   \r
 127     var targetElement = Event.element(e);\r
 128     var targetIndex = this.getTargetIndex(targetElement);\r
 129     if (targetIndex == this.selected) {\r
 130       return;\r
 131     }\r
 132           \r
 133     var currentPanel = this.panels[this.selected];\r
 134     var targetPanel = this.panels[targetIndex];\r
 135     this.setTabInactive(this.tabs[this.selected]);\r
 136     this.setTabActive(this.tabs[targetIndex]);\r
 137     Element.show(targetPanel);\r
 138     Element.hide(currentPanel);\r
 139     this.selected = targetIndex;  \r
 140   },\r
 141   \r
 142   setTabActive: function(tab) {\r
 143     var tabChildren = tab.childNodes;\r
 144 \r
 145     this.classNames.refreshClassNames(tabChildren[0], 'tabLeftActive');\r
 146     this.classNames.refreshClassNames(tabChildren[1], 'tabMiddleActive');\r
 147     this.classNames.refreshClassNames(tabChildren[2], 'tabRightActive');\r
 148   },\r
 149   \r
 150   setTabInactive: function(tab) {\r
 151     var tabChildren = tab.childNodes;\r
 152     \r
 153     this.classNames.refreshClassNames(tabChildren[0], 'tabLeftInactive');\r
 154     this.classNames.refreshClassNames(tabChildren[1], 'tabMiddleInactive');\r
 155     this.classNames.refreshClassNames(tabChildren[2], 'tabRightInactive');\r
 156   },\r
 157 \r
 158   getTargetIndex: function(element) {\r
 159 \r
 160     while(element) {\r
 161       if (element.id && element.id.indexOf(this.tabId, 0) >= 0) {\r
 162         var index = element.id.substring(this.tabId.length);\r
 163         if (!isNaN(index)) {\r
 164           return index;\r
 165         }\r
 166       }\r
 167       element = element.parentNode;\r
 168     }\r
 169   }\r
 170 }\r