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

   1 // Copyright (c) 2005 spinelz.org (http://script.spinelz.org/)
   2 //
   3 // Permission is hereby granted, free of charge, to any person obtaining
   4 // a copy of this software and associated documentation files (the
   5 // "Software"), to deal in the Software without restriction, including
   6 // without limitation the rights to use, copy, modify, merge, publish,
   7 // distribute, sublicense, and/or sell copies of the Software, and to
   8 // permit persons to whom the Software is furnished to do so, subject to
   9 // the following conditions:
  10 //
  11 // The above copyright notice and this permission notice shall be
  12 // included in all copies or substantial portions of the Software.
  13 //
  14 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  15 // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  16 // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  17 // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  18 // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  19 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  20 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  21
  22 NavPanel = Class.create();
  23 NavPanel.className = {
  24   navPanel : 'navPanel',
  25   panel: 'navPanel_panel',
  26   tab : 'navPanel_tab',
  27   tabLeftInactive : 'navPanel_tabLeftInactive',
  28   tabLeftActive: 'navPanel_tabLeftActive',
  29   tabMiddleInactive : 'navPanel_tabMiddleInactive',
  30   tabMiddleActive : 'navPanel_tabMiddleActive',
  31   tabRightInactive : 'navPanel_tabRightInactive',
  32   tabRightActive : 'navPanel_tabRightActive'
  33 }
  34 NavPanel.prototype = {
  35
  36   initialize: function(element) {
  37     var options = Object.extend({
  38       selected: 1,
  39       cssPrefix: 'custom_'
  40     }, arguments[1] || {});
  41
  42     this.options = options;
  43     this.element = $(element);
  44     Element.setStyle(this.element, {visibility: 'hidden'});
  45     Element.hide(this.element);
  46
  47     var customCss = CssUtil.appendPrefix(this.options.cssPrefix, NavPanel.className);
  48     this.classNames = new CssUtil([NavPanel.className, customCss]);
  49
  50     this.classNames.addClassNames(this.element, 'navPanel');
  51
  52     this.selected = (this.options.selected > 0) ? this.options.selected - 1 :  0 ;
  53     this.start();
  54
  55     Element.setStyle(this.element, {visibility: 'visible'});
  56     Element.show(this.element);
  57   },
  58
  59   start: function() {
  60     this.tabs = [];
  61     this.panels = [];
  62     this.panelList = [];
  63
  64     this.tabId = this.element.id + '_tab';
  65     this.tabLeftId = this.tabId + '_left';
  66     this.tabMiddleId = this.tabId + '_middle';
  67     this.tabRightId = this.tabId + '_right';
  68     this.panelId = this.element.id + '_panel';
  69
  70     this.build();
  71   },
  72
  73   build: function() {
  74     Element.cleanWhitespace(this.element);
  75     this.panelList = this.element.childNodes;
  76
  77     for (var i = 0; i < this.panelList.length; i++) {
  78       if (this.panelList[i].nodeType != 1) {
  79         Element.remove(this.panelList[i]);
  80         i--;
  81         continue;
  82       }
  83       Element.cleanWhitespace(this.panelList[i]);
  84       var navSet = this.panelList[i].childNodes;
  85       this.buildTab(navSet[0], i);
  86       this.buildPanel(navSet[0], i);
  87     }
  88     this.selectTab();
  89   },
  90
  91
  92   buildTab: function(tabTitle, i) {
  93     var tab = Builder.node('div', {id:this.tabId + i});
  94     this.classNames.addClassNames(tab, 'tab');
  95     var tabLeft = Builder.node('div', {id:this.tabLeftId + i});
  96     var tabMiddle = Builder.node('div', {id:this.tabMiddleId + i});
  97     tabMiddle.appendChild(tabTitle);
  98     var tabRight = Builder.node('div',{id:this.tabRightId + i});
  99
 100     tab.appendChild(tabLeft);
 101     tab.appendChild(tabMiddle);
 102     tab.appendChild(tabRight);
 103     Event.observe(tab, 'click', this.selectTab.bindAsEventListener(this));
 104
 105     this.tabs[i] = tab;
 106     this.setTabInactive(tab);
 107     this.panelList[i].appendChild(tab);
 108   },
 109
 110   buildPanel: function(panelContent, i) {
 111     var panel = Builder.node('div', {id:this.panelId + i});
 112     this.classNames.addClassNames(panel, 'panel');
 113     panel.appendChild(panelContent);
 114     Element.hide(panel);
 115     this.panels[i] = panel;
 116     this.panelList[i].appendChild(panel);
 117   },
 118
 119   selectTab: function(e) {
 120     if (!e) {
 121       if (!this.panels[this.selected]) this.selected = 0;
 122       Element.show(this.panels[this.selected]);
 123       this.setTabActive(this.tabs[this.selected]);
 124       return;
 125     }
 126
 127     var targetElement = Event.element(e);
 128     var targetIndex = this.getTargetIndex(targetElement);
 129     if (targetIndex == this.selected) {
 130       return;
 131     }
 132
 133     var currentPanel = this.panels[this.selected];
 134     var targetPanel = this.panels[targetIndex];
 135     this.setTabInactive(this.tabs[this.selected]);
 136     this.setTabActive(this.tabs[targetIndex]);
 137     Element.show(targetPanel);
 138     Element.hide(currentPanel);
 139     this.selected = targetIndex;
 140   },
 141
 142   setTabActive: function(tab) {
 143     var tabChildren = tab.childNodes;
 144
 145     this.classNames.refreshClassNames(tabChildren[0], 'tabLeftActive');
 146     this.classNames.refreshClassNames(tabChildren[1], 'tabMiddleActive');
 147     this.classNames.refreshClassNames(tabChildren[2], 'tabRightActive');
 148   },
 149
 150   setTabInactive: function(tab) {
 151     var tabChildren = tab.childNodes;
 152
 153     this.classNames.refreshClassNames(tabChildren[0], 'tabLeftInactive');
 154     this.classNames.refreshClassNames(tabChildren[1], 'tabMiddleInactive');
 155     this.classNames.refreshClassNames(tabChildren[2], 'tabRightInactive');
 156   },
 157
 158   getTargetIndex: function(element) {
 159
 160     while(element) {
 161       if (element.id && element.id.indexOf(this.tabId, 0) >= 0) {
 162         var index = element.id.substring(this.tabId.length);
 163         if (!isNaN(index)) {
 164           return index;
 165         }
 166       }
 167       element = element.parentNode;
 168     }
 169   }
 170 }