|
1 /** |
|
2 * TabPanel.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 /** |
|
12 * Creates a tab panel control. |
|
13 * |
|
14 * @-x-less TabPanel.less |
|
15 * @class tinymce.ui.TabPanel |
|
16 * @extends tinymce.ui.Panel |
|
17 * |
|
18 * @setting {Number} activeTab Active tab index. |
|
19 */ |
|
20 define("tinymce/ui/TabPanel", [ |
|
21 "tinymce/ui/Panel", |
|
22 "tinymce/ui/DomUtils" |
|
23 ], function(Panel, DomUtils) { |
|
24 "use strict"; |
|
25 |
|
26 return Panel.extend({ |
|
27 Defaults: { |
|
28 layout: 'absolute', |
|
29 defaults: { |
|
30 type: 'panel' |
|
31 } |
|
32 }, |
|
33 |
|
34 /** |
|
35 * Activates the specified tab by index. |
|
36 * |
|
37 * @method activateTab |
|
38 * @param {Number} idx Index of the tab to activate. |
|
39 */ |
|
40 activateTab: function(idx) { |
|
41 var activeTabElm; |
|
42 |
|
43 if (this.activeTabId) { |
|
44 activeTabElm = this.getEl(this.activeTabId); |
|
45 DomUtils.removeClass(activeTabElm, this.classPrefix + 'active'); |
|
46 activeTabElm.setAttribute('aria-selected', "false"); |
|
47 } |
|
48 |
|
49 this.activeTabId = 't' + idx; |
|
50 |
|
51 activeTabElm = this.getEl('t' + idx); |
|
52 activeTabElm.setAttribute('aria-selected', "true"); |
|
53 DomUtils.addClass(activeTabElm, this.classPrefix + 'active'); |
|
54 |
|
55 this.items()[idx].show().fire('showtab'); |
|
56 this.reflow(); |
|
57 |
|
58 this.items().each(function(item, i) { |
|
59 if (idx != i) { |
|
60 item.hide(); |
|
61 } |
|
62 }); |
|
63 }, |
|
64 |
|
65 /** |
|
66 * Renders the control as a HTML string. |
|
67 * |
|
68 * @method renderHtml |
|
69 * @return {String} HTML representing the control. |
|
70 */ |
|
71 renderHtml: function() { |
|
72 var self = this, layout = self._layout, tabsHtml = '', prefix = self.classPrefix; |
|
73 |
|
74 self.preRender(); |
|
75 layout.preRender(self); |
|
76 |
|
77 self.items().each(function(ctrl, i) { |
|
78 var id = self._id + '-t' + i; |
|
79 |
|
80 ctrl.aria('role', 'tabpanel'); |
|
81 ctrl.aria('labelledby', id); |
|
82 |
|
83 tabsHtml += ( |
|
84 '<div id="' + id + '" class="' + prefix + 'tab" ' + |
|
85 'unselectable="on" role="tab" aria-controls="' + ctrl._id + '" aria-selected="false" tabIndex="-1">' + |
|
86 self.encode(ctrl.settings.title) + |
|
87 '</div>' |
|
88 ); |
|
89 }); |
|
90 |
|
91 return ( |
|
92 '<div id="' + self._id + '" class="' + self.classes() + '" hidefocus="1" tabindex="-1">' + |
|
93 '<div id="' + self._id + '-head" class="' + prefix + 'tabs" role="tablist">' + |
|
94 tabsHtml + |
|
95 '</div>' + |
|
96 '<div id="' + self._id + '-body" class="' + self.classes('body') + '">' + |
|
97 layout.renderHtml(self) + |
|
98 '</div>' + |
|
99 '</div>' |
|
100 ); |
|
101 }, |
|
102 |
|
103 /** |
|
104 * Called after the control has been rendered. |
|
105 * |
|
106 * @method postRender |
|
107 */ |
|
108 postRender: function() { |
|
109 var self = this; |
|
110 |
|
111 self._super(); |
|
112 |
|
113 self.settings.activeTab = self.settings.activeTab || 0; |
|
114 self.activateTab(self.settings.activeTab); |
|
115 |
|
116 this.on('click', function(e) { |
|
117 var targetParent = e.target.parentNode; |
|
118 |
|
119 if (e.target.parentNode.id == self._id + '-head') { |
|
120 var i = targetParent.childNodes.length; |
|
121 |
|
122 while (i--) { |
|
123 if (targetParent.childNodes[i] == e.target) { |
|
124 self.activateTab(i); |
|
125 } |
|
126 } |
|
127 } |
|
128 }); |
|
129 }, |
|
130 |
|
131 /** |
|
132 * Initializes the current controls layout rect. |
|
133 * This will be executed by the layout managers to determine the |
|
134 * default minWidth/minHeight etc. |
|
135 * |
|
136 * @method initLayoutRect |
|
137 * @return {Object} Layout rect instance. |
|
138 */ |
|
139 initLayoutRect: function() { |
|
140 var self = this, rect, minW, minH; |
|
141 |
|
142 minW = DomUtils.getSize(self.getEl('head')).width; |
|
143 minW = minW < 0 ? 0 : minW; |
|
144 minH = 0; |
|
145 |
|
146 self.items().each(function(item) { |
|
147 minW = Math.max(minW, item.layoutRect().minW); |
|
148 minH = Math.max(minH, item.layoutRect().minH); |
|
149 }); |
|
150 |
|
151 self.items().each(function(ctrl) { |
|
152 ctrl.settings.x = 0; |
|
153 ctrl.settings.y = 0; |
|
154 ctrl.settings.w = minW; |
|
155 ctrl.settings.h = minH; |
|
156 |
|
157 ctrl.layoutRect({ |
|
158 x: 0, |
|
159 y: 0, |
|
160 w: minW, |
|
161 h: minH |
|
162 }); |
|
163 }); |
|
164 |
|
165 var headH = DomUtils.getSize(self.getEl('head')).height; |
|
166 |
|
167 self.settings.minWidth = minW; |
|
168 self.settings.minHeight = minH + headH; |
|
169 |
|
170 rect = self._super(); |
|
171 rect.deltaH += headH; |
|
172 rect.innerH = rect.h - rect.deltaH; |
|
173 |
|
174 return rect; |
|
175 } |
|
176 }); |
|
177 }); |