123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- /**
- * mctabs.js
- *
- * Copyright 2009, Moxiecode Systems AB
- * Released under LGPL License.
- *
- * License: http://tinymce.moxiecode.com/license
- * Contributing: http://tinymce.moxiecode.com/contributing
- */
- function MCTabs() {
- this.settings = [];
- this.onChange = tinyMCEPopup.editor.windowManager.createInstance('tinymce.util.Dispatcher');
- };
- MCTabs.prototype.init = function(settings) {
- this.settings = settings;
- };
- MCTabs.prototype.getParam = function(name, default_value) {
- var value = null;
- value = (typeof(this.settings[name]) == "undefined") ? default_value : this.settings[name];
- // Fix bool values
- if (value == "true" || value == "false")
- return (value == "true");
- return value;
- };
- MCTabs.prototype.showTab =function(tab){
- tab.className = 'current';
- tab.setAttribute("aria-selected", true);
- tab.setAttribute("aria-expanded", true);
- tab.tabIndex = 0;
- };
- MCTabs.prototype.hideTab =function(tab){
- var t=this;
- tab.className = '';
- tab.setAttribute("aria-selected", false);
- tab.setAttribute("aria-expanded", false);
- tab.tabIndex = -1;
- };
- MCTabs.prototype.showPanel = function(panel) {
- panel.className = 'current';
- panel.setAttribute("aria-hidden", false);
- };
- MCTabs.prototype.hidePanel = function(panel) {
- panel.className = 'panel';
- panel.setAttribute("aria-hidden", true);
- };
- MCTabs.prototype.getPanelForTab = function(tabElm) {
- return tinyMCEPopup.dom.getAttrib(tabElm, "aria-controls");
- };
- MCTabs.prototype.displayTab = function(tab_id, panel_id, avoid_focus) {
- var panelElm, panelContainerElm, tabElm, tabContainerElm, selectionClass, nodes, i, t = this;
- tabElm = document.getElementById(tab_id);
- if (panel_id === undefined) {
- panel_id = t.getPanelForTab(tabElm);
- }
- panelElm= document.getElementById(panel_id);
- panelContainerElm = panelElm ? panelElm.parentNode : null;
- tabContainerElm = tabElm ? tabElm.parentNode : null;
- selectionClass = t.getParam('selection_class', 'current');
- if (tabElm && tabContainerElm) {
- nodes = tabContainerElm.childNodes;
- // Hide all other tabs
- for (i = 0; i < nodes.length; i++) {
- if (nodes[i].nodeName == "LI") {
- t.hideTab(nodes[i]);
- }
- }
- // Show selected tab
- t.showTab(tabElm);
- }
- if (panelElm && panelContainerElm) {
- nodes = panelContainerElm.childNodes;
- // Hide all other panels
- for (i = 0; i < nodes.length; i++) {
- if (nodes[i].nodeName == "DIV")
- t.hidePanel(nodes[i]);
- }
- if (!avoid_focus) {
- tabElm.focus();
- }
- // Show selected panel
- t.showPanel(panelElm);
- }
- };
- MCTabs.prototype.getAnchor = function() {
- var pos, url = document.location.href;
- if ((pos = url.lastIndexOf('#')) != -1)
- return url.substring(pos + 1);
- return "";
- };
- //Global instance
- var mcTabs = new MCTabs();
- tinyMCEPopup.onInit.add(function() {
- var tinymce = tinyMCEPopup.getWin().tinymce, dom = tinyMCEPopup.dom, each = tinymce.each;
- each(dom.select('div.tabs'), function(tabContainerElm) {
- var keyNav;
- dom.setAttrib(tabContainerElm, "role", "tablist");
- var items = tinyMCEPopup.dom.select('li', tabContainerElm);
- var action = function(id) {
- mcTabs.displayTab(id, mcTabs.getPanelForTab(id));
- mcTabs.onChange.dispatch(id);
- };
- each(items, function(item) {
- dom.setAttrib(item, 'role', 'tab');
- dom.bind(item, 'click', function(evt) {
- action(item.id);
- });
- });
- dom.bind(dom.getRoot(), 'keydown', function(evt) {
- if (evt.keyCode === 9 && evt.ctrlKey && !evt.altKey) { // Tab
- keyNav.moveFocus(evt.shiftKey ? -1 : 1);
- tinymce.dom.Event.cancel(evt);
- }
- });
- each(dom.select('a', tabContainerElm), function(a) {
- dom.setAttrib(a, 'tabindex', '-1');
- });
- keyNav = tinyMCEPopup.editor.windowManager.createInstance('tinymce.ui.KeyboardNavigation', {
- root: tabContainerElm,
- items: items,
- onAction: action,
- actOnFocus: true,
- enableLeftRight: true,
- enableUpDown: true
- }, tinyMCEPopup.dom);
- });
- });
|