[Summary view] [Print] [Text view]

   1  /**

   2   * mctabs.js

   3   *

   4   * Copyright 2009, Moxiecode Systems AB

   5   * Released under LGPL License.

   6   *

   7   * License: http://tinymce.moxiecode.com/license

   8   * Contributing: http://tinymce.moxiecode.com/contributing

   9   */
  10  
  11  function MCTabs() {
  12      this.settings = [];
  13      this.onChange = tinyMCEPopup.editor.windowManager.createInstance('tinymce.util.Dispatcher');
  14  };
  15  
  16  MCTabs.prototype.init = function(settings) {
  17      this.settings = settings;
  18  };
  19  
  20  MCTabs.prototype.getParam = function(name, default_value) {
  21      var value = null;
  22  
  23      value = (typeof(this.settings[name]) == "undefined") ? default_value : this.settings[name];
  24  
  25      // Fix bool values

  26      if (value == "true" || value == "false")
  27          return (value == "true");
  28  
  29      return value;
  30  };
  31  
  32  MCTabs.prototype.showTab =function(tab){
  33      tab.className = 'current';
  34      tab.setAttribute("aria-selected", true);
  35      tab.setAttribute("aria-expanded", true);
  36      tab.tabIndex = 0;
  37  };
  38  
  39  MCTabs.prototype.hideTab =function(tab){
  40      var t=this;
  41  
  42      tab.className = '';
  43      tab.setAttribute("aria-selected", false);
  44      tab.setAttribute("aria-expanded", false);
  45      tab.tabIndex = -1;
  46  };
  47  
  48  MCTabs.prototype.showPanel = function(panel) {
  49      panel.className = 'current'; 
  50      panel.setAttribute("aria-hidden", false);
  51  };
  52  
  53  MCTabs.prototype.hidePanel = function(panel) {
  54      panel.className = 'panel';
  55      panel.setAttribute("aria-hidden", true);
  56  }; 
  57  
  58  MCTabs.prototype.getPanelForTab = function(tabElm) {
  59      return tinyMCEPopup.dom.getAttrib(tabElm, "aria-controls");
  60  };
  61  
  62  MCTabs.prototype.displayTab = function(tab_id, panel_id, avoid_focus) {
  63      var panelElm, panelContainerElm, tabElm, tabContainerElm, selectionClass, nodes, i, t = this;
  64  
  65      tabElm = document.getElementById(tab_id);
  66  
  67      if (panel_id === undefined) {
  68          panel_id = t.getPanelForTab(tabElm);
  69      }
  70  
  71      panelElm= document.getElementById(panel_id);
  72      panelContainerElm = panelElm ? panelElm.parentNode : null;
  73      tabContainerElm = tabElm ? tabElm.parentNode : null;
  74      selectionClass = t.getParam('selection_class', 'current');
  75  
  76      if (tabElm && tabContainerElm) {
  77          nodes = tabContainerElm.childNodes;
  78  
  79          // Hide all other tabs

  80          for (i = 0; i < nodes.length; i++) {
  81              if (nodes[i].nodeName == "LI") {
  82                  t.hideTab(nodes[i]);
  83              }
  84          }
  85  
  86          // Show selected tab

  87          t.showTab(tabElm);
  88      }
  89  
  90      if (panelElm && panelContainerElm) {
  91          nodes = panelContainerElm.childNodes;
  92  
  93          // Hide all other panels

  94          for (i = 0; i < nodes.length; i++) {
  95              if (nodes[i].nodeName == "DIV")
  96                  t.hidePanel(nodes[i]);
  97          }
  98  
  99          if (!avoid_focus) { 
 100              tabElm.focus();
 101          }
 102  
 103          // Show selected panel

 104          t.showPanel(panelElm);
 105      }
 106  };
 107  
 108  MCTabs.prototype.getAnchor = function() {
 109      var pos, url = document.location.href;
 110  
 111      if ((pos = url.lastIndexOf('#')) != -1)
 112          return url.substring(pos + 1);
 113  
 114      return "";
 115  };
 116  
 117  
 118  //Global instance

 119  var mcTabs = new MCTabs();
 120  
 121  tinyMCEPopup.onInit.add(function() {
 122      var tinymce = tinyMCEPopup.getWin().tinymce, dom = tinyMCEPopup.dom, each = tinymce.each;
 123  
 124      each(dom.select('div.tabs'), function(tabContainerElm) {
 125          var keyNav;
 126  
 127          dom.setAttrib(tabContainerElm, "role", "tablist"); 
 128  
 129          var items = tinyMCEPopup.dom.select('li', tabContainerElm);
 130          var action = function(id) {
 131              mcTabs.displayTab(id, mcTabs.getPanelForTab(id));
 132              mcTabs.onChange.dispatch(id);
 133          };
 134  
 135          each(items, function(item) {
 136              dom.setAttrib(item, 'role', 'tab');
 137              dom.bind(item, 'click', function(evt) {
 138                  action(item.id);
 139              });
 140          });
 141  
 142          dom.bind(dom.getRoot(), 'keydown', function(evt) {
 143              if (evt.keyCode === 9 && evt.ctrlKey && !evt.altKey) { // Tab
 144                  keyNav.moveFocus(evt.shiftKey ? -1 : 1);
 145                  tinymce.dom.Event.cancel(evt);
 146              }
 147          });
 148  
 149          each(dom.select('a', tabContainerElm), function(a) {
 150              dom.setAttrib(a, 'tabindex', '-1');
 151          });
 152  
 153          keyNav = tinyMCEPopup.editor.windowManager.createInstance('tinymce.ui.KeyboardNavigation', {
 154              root: tabContainerElm,
 155              items: items,
 156              onAction: action,
 157              actOnFocus: true,
 158              enableLeftRight: true,
 159              enableUpDown: true
 160          }, tinyMCEPopup.dom);
 161      });
 162  });