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