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