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