wp-includes/js/tinymce/utils/mctabs.js

   1 /**
   2  * mctabs.js
   3  *
   4  * Released under LGPL License.
   5  * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
   6  *
   7  * License: http://www.tinymce.com/license
   8  * Contributing: http://www.tinymce.com/contributing
   9  */
  10
  11 /*jshint globals: tinyMCEPopup */
  12
  13 function MCTabs() {
  14         this.settings = [];
  15         this.onChange = tinyMCEPopup.editor.windowManager.createInstance('tinymce.util.Dispatcher');
  16 };
  17
  18 MCTabs.prototype.init = function(settings) {
  19         this.settings = settings;
  20 };
  21
  22 MCTabs.prototype.getParam = function(name, default_value) {
  23         var value = null;
  24
  25         value = (typeof(this.settings[name]) == "undefined") ? default_value : this.settings[name];
  26
  27         // Fix bool values
  28         if (value == "true" || value == "false")
  29                 return (value == "true");
  30
  31         return value;
  32 };
  33
  34 MCTabs.prototype.showTab =function(tab){
  35         tab.className = 'current';
  36         tab.setAttribute("aria-selected", true);
  37         tab.setAttribute("aria-expanded", true);
  38         tab.tabIndex = 0;
  39 };
  40
  41 MCTabs.prototype.hideTab =function(tab){
  42         var t=this;
  43
  44         tab.className = '';
  45         tab.setAttribute("aria-selected", false);
  46         tab.setAttribute("aria-expanded", false);
  47         tab.tabIndex = -1;
  48 };
  49
  50 MCTabs.prototype.showPanel = function(panel) {
  51         panel.className = 'current';
  52         panel.setAttribute("aria-hidden", false);
  53 };
  54
  55 MCTabs.prototype.hidePanel = function(panel) {
  56         panel.className = 'panel';
  57         panel.setAttribute("aria-hidden", true);
  58 };
  59
  60 MCTabs.prototype.getPanelForTab = function(tabElm) {
  61         return tinyMCEPopup.dom.getAttrib(tabElm, "aria-controls");
  62 };
  63
  64 MCTabs.prototype.displayTab = function(tab_id, panel_id, avoid_focus) {
  65         var panelElm, panelContainerElm, tabElm, tabContainerElm, selectionClass, nodes, i, t = this;
  66
  67         tabElm = document.getElementById(tab_id);
  68
  69         if (panel_id === undefined) {
  70                 panel_id = t.getPanelForTab(tabElm);
  71         }
  72
  73         panelElm= document.getElementById(panel_id);
  74         panelContainerElm = panelElm ? panelElm.parentNode : null;
  75         tabContainerElm = tabElm ? tabElm.parentNode : null;
  76         selectionClass = t.getParam('selection_class', 'current');
  77
  78         if (tabElm && tabContainerElm) {
  79                 nodes = tabContainerElm.childNodes;
  80
  81                 // Hide all other tabs
  82                 for (i = 0; i < nodes.length; i++) {
  83                         if (nodes[i].nodeName == "LI") {
  84                                 t.hideTab(nodes[i]);
  85                         }
  86                 }
  87
  88                 // Show selected tab
  89                 t.showTab(tabElm);
  90         }
  91
  92         if (panelElm && panelContainerElm) {
  93                 nodes = panelContainerElm.childNodes;
  94
  95                 // Hide all other panels
  96                 for (i = 0; i < nodes.length; i++) {
  97                         if (nodes[i].nodeName == "DIV")
  98                                 t.hidePanel(nodes[i]);
  99                 }
 100
 101                 if (!avoid_focus) {
 102                         tabElm.focus();
 103                 }
 104
 105                 // Show selected panel
 106                 t.showPanel(panelElm);
 107         }
 108 };
 109
 110 MCTabs.prototype.getAnchor = function() {
 111         var pos, url = document.location.href;
 112
 113         if ((pos = url.lastIndexOf('#')) != -1)
 114                 return url.substring(pos + 1);
 115
 116         return "";
 117 };
 118
 119
 120 //Global instance
 121 var mcTabs = new MCTabs();
 122
 123 tinyMCEPopup.onInit.add(function() {
 124         var tinymce = tinyMCEPopup.getWin().tinymce, dom = tinyMCEPopup.dom, each = tinymce.each;
 125
 126         each(dom.select('div.tabs'), function(tabContainerElm) {
 127                 //var keyNav;
 128
 129                 dom.setAttrib(tabContainerElm, "role", "tablist");
 130
 131                 var items = tinyMCEPopup.dom.select('li', tabContainerElm);
 132                 var action = function(id) {
 133                         mcTabs.displayTab(id, mcTabs.getPanelForTab(id));
 134                         mcTabs.onChange.dispatch(id);
 135                 };
 136
 137                 each(items, function(item) {
 138                         dom.setAttrib(item, 'role', 'tab');
 139                         dom.bind(item, 'click', function(evt) {
 140                                 action(item.id);
 141                         });
 142                 });
 143
 144                 dom.bind(dom.getRoot(), 'keydown', function(evt) {
 145                         if (evt.keyCode === 9 && evt.ctrlKey && !evt.altKey) { // Tab
 146                                 //keyNav.moveFocus(evt.shiftKey ? -1 : 1);
 147                                 tinymce.dom.Event.cancel(evt);
 148                         }
 149                 });
 150
 151                 each(dom.select('a', tabContainerElm), function(a) {
 152                         dom.setAttrib(a, 'tabindex', '-1');
 153                 });
 154
 155                 /*keyNav = tinyMCEPopup.editor.windowManager.createInstance('tinymce.ui.KeyboardNavigation', {
 156                         root: tabContainerElm,
 157                         items: items,
 158                         onAction: action,
 159                         actOnFocus: true,
 160                         enableLeftRight: true,
 161                         enableUpDown: true
 162                 }, tinyMCEPopup.dom);*/
 163         });
 164 });