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