1 /**

     2  * mctabs.js

     3  *

     4  * Copyright, Moxiecode Systems AB

     5  * Released under LGPL License.

     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 });