25 return (value == "true"); |
27 return (value == "true"); |
26 |
28 |
27 return value; |
29 return value; |
28 }; |
30 }; |
29 |
31 |
30 MCTabs.prototype.displayTab = function(tab_id, panel_id) { |
32 MCTabs.prototype.showTab =function(tab){ |
31 var panelElm, panelContainerElm, tabElm, tabContainerElm, selectionClass, nodes, i; |
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 } |
32 |
70 |
33 panelElm= document.getElementById(panel_id); |
71 panelElm= document.getElementById(panel_id); |
34 panelContainerElm = panelElm ? panelElm.parentNode : null; |
72 panelContainerElm = panelElm ? panelElm.parentNode : null; |
35 tabElm = document.getElementById(tab_id); |
|
36 tabContainerElm = tabElm ? tabElm.parentNode : null; |
73 tabContainerElm = tabElm ? tabElm.parentNode : null; |
37 selectionClass = this.getParam('selection_class', 'current'); |
74 selectionClass = t.getParam('selection_class', 'current'); |
38 |
75 |
39 if (tabElm && tabContainerElm) { |
76 if (tabElm && tabContainerElm) { |
40 nodes = tabContainerElm.childNodes; |
77 nodes = tabContainerElm.childNodes; |
41 |
78 |
42 // Hide all other tabs |
79 // Hide all other tabs |
43 for (i = 0; i < nodes.length; i++) { |
80 for (i = 0; i < nodes.length; i++) { |
44 if (nodes[i].nodeName == "LI") |
81 if (nodes[i].nodeName == "LI") { |
45 nodes[i].className = ''; |
82 t.hideTab(nodes[i]); |
|
83 } |
46 } |
84 } |
47 |
85 |
48 // Show selected tab |
86 // Show selected tab |
49 tabElm.className = 'current'; |
87 t.showTab(tabElm); |
50 } |
88 } |
51 |
89 |
52 if (panelElm && panelContainerElm) { |
90 if (panelElm && panelContainerElm) { |
53 nodes = panelContainerElm.childNodes; |
91 nodes = panelContainerElm.childNodes; |
54 |
92 |
55 // Hide all other panels |
93 // Hide all other panels |
56 for (i = 0; i < nodes.length; i++) { |
94 for (i = 0; i < nodes.length; i++) { |
57 if (nodes[i].nodeName == "DIV") |
95 if (nodes[i].nodeName == "DIV") |
58 nodes[i].className = 'panel'; |
96 t.hidePanel(nodes[i]); |
|
97 } |
|
98 |
|
99 if (!avoid_focus) { |
|
100 tabElm.focus(); |
59 } |
101 } |
60 |
102 |
61 // Show selected panel |
103 // Show selected panel |
62 panelElm.className = 'current'; |
104 t.showPanel(panelElm); |
63 } |
105 } |
64 }; |
106 }; |
65 |
107 |
66 MCTabs.prototype.getAnchor = function() { |
108 MCTabs.prototype.getAnchor = function() { |
67 var pos, url = document.location.href; |
109 var pos, url = document.location.href; |
70 return url.substring(pos + 1); |
112 return url.substring(pos + 1); |
71 |
113 |
72 return ""; |
114 return ""; |
73 }; |
115 }; |
74 |
116 |
75 // Global instance |
117 |
|
118 //Global instance |
76 var mcTabs = new MCTabs(); |
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 }); |