162 lines
		
	
	
		
			4.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			162 lines
		
	
	
		
			4.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| /**
 | |
|  * 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);
 | |
| 	});
 | |
| }); |