1 /** |
1 /** |
2 * mctabs.js |
2 * mctabs.js |
3 * |
3 * |
4 * Copyright, Moxiecode Systems AB |
|
5 * Released under LGPL License. |
4 * Released under LGPL License. |
|
5 * Copyright (c) 1999-2017 Ephox Corp. All rights reserved |
6 * |
6 * |
7 * License: http://www.tinymce.com/license |
7 * License: http://www.tinymce.com/license |
8 * Contributing: http://www.tinymce.com/contributing |
8 * Contributing: http://www.tinymce.com/contributing |
9 */ |
9 */ |
10 |
10 |
11 /*jshint globals: tinyMCEPopup */ |
11 /*jshint globals: tinyMCEPopup */ |
12 |
12 |
13 function MCTabs() { |
13 function MCTabs() { |
14 this.settings = []; |
14 this.settings = []; |
15 this.onChange = tinyMCEPopup.editor.windowManager.createInstance('tinymce.util.Dispatcher'); |
15 this.onChange = tinyMCEPopup.editor.windowManager.createInstance('tinymce.util.Dispatcher'); |
|
16 } |
|
17 |
|
18 MCTabs.prototype.init = function (settings) { |
|
19 this.settings = settings; |
16 }; |
20 }; |
17 |
21 |
18 MCTabs.prototype.init = function(settings) { |
22 MCTabs.prototype.getParam = function (name, default_value) { |
19 this.settings = settings; |
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 |
|
32 return value; |
20 }; |
33 }; |
21 |
34 |
22 MCTabs.prototype.getParam = function(name, default_value) { |
35 MCTabs.prototype.showTab = function (tab) { |
23 var value = null; |
36 tab.className = 'current'; |
24 |
37 tab.setAttribute("aria-selected", true); |
25 value = (typeof(this.settings[name]) == "undefined") ? default_value : this.settings[name]; |
38 tab.setAttribute("aria-expanded", true); |
26 |
39 tab.tabIndex = 0; |
27 // Fix bool values |
|
28 if (value == "true" || value == "false") |
|
29 return (value == "true"); |
|
30 |
|
31 return value; |
|
32 }; |
40 }; |
33 |
41 |
34 MCTabs.prototype.showTab =function(tab){ |
42 MCTabs.prototype.hideTab = function (tab) { |
35 tab.className = 'current'; |
43 var t = this; |
36 tab.setAttribute("aria-selected", true); |
44 |
37 tab.setAttribute("aria-expanded", true); |
45 tab.className = ''; |
38 tab.tabIndex = 0; |
46 tab.setAttribute("aria-selected", false); |
|
47 tab.setAttribute("aria-expanded", false); |
|
48 tab.tabIndex = -1; |
39 }; |
49 }; |
40 |
50 |
41 MCTabs.prototype.hideTab =function(tab){ |
51 MCTabs.prototype.showPanel = function (panel) { |
42 var t=this; |
52 panel.className = 'current'; |
43 |
53 panel.setAttribute("aria-hidden", false); |
44 tab.className = ''; |
|
45 tab.setAttribute("aria-selected", false); |
|
46 tab.setAttribute("aria-expanded", false); |
|
47 tab.tabIndex = -1; |
|
48 }; |
54 }; |
49 |
55 |
50 MCTabs.prototype.showPanel = function(panel) { |
56 MCTabs.prototype.hidePanel = function (panel) { |
51 panel.className = 'current'; |
57 panel.className = 'panel'; |
52 panel.setAttribute("aria-hidden", false); |
58 panel.setAttribute("aria-hidden", true); |
53 }; |
59 }; |
54 |
60 |
55 MCTabs.prototype.hidePanel = function(panel) { |
61 MCTabs.prototype.getPanelForTab = function (tabElm) { |
56 panel.className = 'panel'; |
62 return tinyMCEPopup.dom.getAttrib(tabElm, "aria-controls"); |
57 panel.setAttribute("aria-hidden", true); |
|
58 }; |
|
59 |
|
60 MCTabs.prototype.getPanelForTab = function(tabElm) { |
|
61 return tinyMCEPopup.dom.getAttrib(tabElm, "aria-controls"); |
|
62 }; |
63 }; |
63 |
64 |
64 MCTabs.prototype.displayTab = function(tab_id, panel_id, avoid_focus) { |
65 MCTabs.prototype.displayTab = function (tab_id, panel_id, avoid_focus) { |
65 var panelElm, panelContainerElm, tabElm, tabContainerElm, selectionClass, nodes, i, t = this; |
66 var panelElm, panelContainerElm, tabElm, tabContainerElm, selectionClass, nodes, i, t = this; |
66 |
67 |
67 tabElm = document.getElementById(tab_id); |
68 tabElm = document.getElementById(tab_id); |
68 |
69 |
69 if (panel_id === undefined) { |
70 if (panel_id === undefined) { |
70 panel_id = t.getPanelForTab(tabElm); |
71 panel_id = t.getPanelForTab(tabElm); |
71 } |
72 } |
72 |
73 |
73 panelElm= document.getElementById(panel_id); |
74 panelElm = document.getElementById(panel_id); |
74 panelContainerElm = panelElm ? panelElm.parentNode : null; |
75 panelContainerElm = panelElm ? panelElm.parentNode : null; |
75 tabContainerElm = tabElm ? tabElm.parentNode : null; |
76 tabContainerElm = tabElm ? tabElm.parentNode : null; |
76 selectionClass = t.getParam('selection_class', 'current'); |
77 selectionClass = t.getParam('selection_class', 'current'); |
77 |
78 |
78 if (tabElm && tabContainerElm) { |
79 if (tabElm && tabContainerElm) { |
79 nodes = tabContainerElm.childNodes; |
80 nodes = tabContainerElm.childNodes; |
80 |
81 |
81 // Hide all other tabs |
82 // Hide all other tabs |
82 for (i = 0; i < nodes.length; i++) { |
83 for (i = 0; i < nodes.length; i++) { |
83 if (nodes[i].nodeName == "LI") { |
84 if (nodes[i].nodeName == "LI") { |
84 t.hideTab(nodes[i]); |
85 t.hideTab(nodes[i]); |
85 } |
86 } |
86 } |
87 } |
87 |
88 |
88 // Show selected tab |
89 // Show selected tab |
89 t.showTab(tabElm); |
90 t.showTab(tabElm); |
90 } |
91 } |
91 |
92 |
92 if (panelElm && panelContainerElm) { |
93 if (panelElm && panelContainerElm) { |
93 nodes = panelContainerElm.childNodes; |
94 nodes = panelContainerElm.childNodes; |
94 |
95 |
95 // Hide all other panels |
96 // Hide all other panels |
96 for (i = 0; i < nodes.length; i++) { |
97 for (i = 0; i < nodes.length; i++) { |
97 if (nodes[i].nodeName == "DIV") |
98 if (nodes[i].nodeName == "DIV") { |
98 t.hidePanel(nodes[i]); |
99 t.hidePanel(nodes[i]); |
99 } |
100 } |
|
101 } |
100 |
102 |
101 if (!avoid_focus) { |
103 if (!avoid_focus) { |
102 tabElm.focus(); |
104 tabElm.focus(); |
103 } |
105 } |
104 |
106 |
105 // Show selected panel |
107 // Show selected panel |
106 t.showPanel(panelElm); |
108 t.showPanel(panelElm); |
107 } |
109 } |
108 }; |
110 }; |
109 |
111 |
110 MCTabs.prototype.getAnchor = function() { |
112 MCTabs.prototype.getAnchor = function () { |
111 var pos, url = document.location.href; |
113 var pos, url = document.location.href; |
112 |
114 |
113 if ((pos = url.lastIndexOf('#')) != -1) |
115 if ((pos = url.lastIndexOf('#')) != -1) { |
114 return url.substring(pos + 1); |
116 return url.substring(pos + 1); |
|
117 } |
115 |
118 |
116 return ""; |
119 return ""; |
117 }; |
120 }; |
118 |
121 |
119 |
122 |
120 //Global instance |
123 //Global instance |
121 var mcTabs = new MCTabs(); |
124 var mcTabs = new MCTabs(); |
122 |
125 |
123 tinyMCEPopup.onInit.add(function() { |
126 tinyMCEPopup.onInit.add(function () { |
124 var tinymce = tinyMCEPopup.getWin().tinymce, dom = tinyMCEPopup.dom, each = tinymce.each; |
127 var tinymce = tinyMCEPopup.getWin().tinymce, dom = tinyMCEPopup.dom, each = tinymce.each; |
125 |
128 |
126 each(dom.select('div.tabs'), function(tabContainerElm) { |
129 each(dom.select('div.tabs'), function (tabContainerElm) { |
127 //var keyNav; |
130 //var keyNav; |
128 |
131 |
129 dom.setAttrib(tabContainerElm, "role", "tablist"); |
132 dom.setAttrib(tabContainerElm, "role", "tablist"); |
130 |
133 |
131 var items = tinyMCEPopup.dom.select('li', tabContainerElm); |
134 var items = tinyMCEPopup.dom.select('li', tabContainerElm); |
132 var action = function(id) { |
135 var action = function (id) { |
133 mcTabs.displayTab(id, mcTabs.getPanelForTab(id)); |
136 mcTabs.displayTab(id, mcTabs.getPanelForTab(id)); |
134 mcTabs.onChange.dispatch(id); |
137 mcTabs.onChange.dispatch(id); |
135 }; |
138 }; |
136 |
139 |
137 each(items, function(item) { |
140 each(items, function (item) { |
138 dom.setAttrib(item, 'role', 'tab'); |
141 dom.setAttrib(item, 'role', 'tab'); |
139 dom.bind(item, 'click', function(evt) { |
142 dom.bind(item, 'click', function (evt) { |
140 action(item.id); |
143 action(item.id); |
141 }); |
144 }); |
142 }); |
145 }); |
143 |
146 |
144 dom.bind(dom.getRoot(), 'keydown', function(evt) { |
147 dom.bind(dom.getRoot(), 'keydown', function (evt) { |
145 if (evt.keyCode === 9 && evt.ctrlKey && !evt.altKey) { // Tab |
148 if (evt.keyCode === 9 && evt.ctrlKey && !evt.altKey) { // Tab |
146 //keyNav.moveFocus(evt.shiftKey ? -1 : 1); |
149 //keyNav.moveFocus(evt.shiftKey ? -1 : 1); |
147 tinymce.dom.Event.cancel(evt); |
150 tinymce.dom.Event.cancel(evt); |
148 } |
151 } |
149 }); |
152 }); |
150 |
153 |
151 each(dom.select('a', tabContainerElm), function(a) { |
154 each(dom.select('a', tabContainerElm), function (a) { |
152 dom.setAttrib(a, 'tabindex', '-1'); |
155 dom.setAttrib(a, 'tabindex', '-1'); |
153 }); |
156 }); |
154 |
157 |
155 /*keyNav = tinyMCEPopup.editor.windowManager.createInstance('tinymce.ui.KeyboardNavigation', { |
158 /*keyNav = tinyMCEPopup.editor.windowManager.createInstance('tinymce.ui.KeyboardNavigation', { |
156 root: tabContainerElm, |
159 root: tabContainerElm, |
157 items: items, |
160 items: items, |
158 onAction: action, |
161 onAction: action, |
159 actOnFocus: true, |
162 actOnFocus: true, |
160 enableLeftRight: true, |
163 enableLeftRight: true, |
161 enableUpDown: true |
164 enableUpDown: true |
162 }, tinyMCEPopup.dom);*/ |
165 }, tinyMCEPopup.dom);*/ |
163 }); |
166 } |
|
167 ); |
164 }); |
168 }); |