0
|
1 |
/** |
|
2 |
* mctabs.js |
|
3 |
* |
5
|
4 |
* Copyright, Moxiecode Systems AB |
0
|
5 |
* Released under LGPL License. |
|
6 |
* |
5
|
7 |
* License: http://www.tinymce.com/license |
|
8 |
* Contributing: http://www.tinymce.com/contributing |
0
|
9 |
*/ |
|
10 |
|
5
|
11 |
/*jshint globals: tinyMCEPopup */ |
|
12 |
|
0
|
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) { |
5
|
127 |
//var keyNav; |
0
|
128 |
|
5
|
129 |
dom.setAttrib(tabContainerElm, "role", "tablist"); |
0
|
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 |
5
|
146 |
//keyNav.moveFocus(evt.shiftKey ? -1 : 1); |
0
|
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 |
|
5
|
155 |
/*keyNav = tinyMCEPopup.editor.windowManager.createInstance('tinymce.ui.KeyboardNavigation', { |
0
|
156 |
root: tabContainerElm, |
|
157 |
items: items, |
|
158 |
onAction: action, |
|
159 |
actOnFocus: true, |
|
160 |
enableLeftRight: true, |
|
161 |
enableUpDown: true |
5
|
162 |
}, tinyMCEPopup.dom);*/ |
0
|
163 |
}); |
|
164 |
}); |