1 /**

     2  * SplitButton.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 split button.

    13  *

    14  * @-x-less SplitButton.less

    15  * @class tinymce.ui.SplitButton

    16  * @extends tinymce.ui.MenuButton

    17  */

    18 define("tinymce/ui/SplitButton", [

    19 	"tinymce/ui/MenuButton",

    20 	"tinymce/ui/DomUtils"

    21 ], function(MenuButton, DomUtils) {

    22 	return MenuButton.extend({

    23 		Defaults: {

    24 			classes: "widget btn splitbtn",

    25 			role: "button"

    26 		},

    27 

    28 		/**

    29 		 * Repaints the control after a layout operation.

    30 		 *

    31 		 * @method repaint

    32 		 */

    33 		repaint: function() {

    34 			var self = this, elm = self.getEl(), rect = self.layoutRect(), mainButtonElm, menuButtonElm;

    35 

    36 			self._super();

    37 

    38 			mainButtonElm = elm.firstChild;

    39 			menuButtonElm = elm.lastChild;

    40 

    41 			DomUtils.css(mainButtonElm, {

    42 				width: rect.w - DomUtils.getSize(menuButtonElm).width,

    43 				height: rect.h - 2

    44 			});

    45 

    46 			DomUtils.css(menuButtonElm, {

    47 				height: rect.h - 2

    48 			});

    49 

    50 			return self;

    51 		},

    52 

    53 		/**

    54 		 * Sets the active menu state.

    55 		 *

    56 		 * @private

    57 		 */

    58 		activeMenu: function(state) {

    59 			var self = this;

    60 

    61 			DomUtils.toggleClass(self.getEl().lastChild, self.classPrefix + 'active', state);

    62 		},

    63 

    64 		/**

    65 		 * Renders the control as a HTML string.

    66 		 *

    67 		 * @method renderHtml

    68 		 * @return {String} HTML representing the control.

    69 		 */

    70 		renderHtml: function() {

    71 			var self = this, id = self._id, prefix = self.classPrefix, image;

    72 			var icon = self.settings.icon;

    73 

    74 			image = self.settings.image;

    75 			if (image) {

    76 				icon = 'none';

    77 

    78 				// Support for [high dpi, low dpi] image sources

    79 				if (typeof image != "string") {

    80 					image = window.getSelection ? image[0] : image[1];

    81 				}

    82 

    83 				image = ' style="background-image: url(\'' + image + '\')"';

    84 			} else {

    85 				image = '';

    86 			}

    87 

    88 			icon = self.settings.icon ? prefix + 'ico ' + prefix + 'i-' + icon : '';

    89 

    90 			return (

    91 				'<div id="' + id + '" class="' + self.classes() + '" role="button" tabindex="-1">' +

    92 					'<button type="button" hidefocus="1" tabindex="-1">' +

    93 						(icon ? '<i class="' + icon + '"' + image + '></i>' : '') +

    94 						(self._text ? (icon ? ' ' : '') + self._text : '') +

    95 					'</button>' +

    96 					'<button type="button" class="' + prefix + 'open" hidefocus="1" tabindex="-1">' +

    97 						//(icon ? '<i class="' + icon + '"></i>' : '') +

    98 						(self._menuBtnText ? (icon ? '\u00a0' : '') + self._menuBtnText : '') +

    99 						' <i class="' + prefix + 'caret"></i>' +

   100 					'</button>' +

   101 				'</div>'

   102 			);

   103 		},

   104 

   105 		/**

   106 		 * Called after the control has been rendered.

   107 		 *

   108 		 * @method postRender

   109 		 */

   110 		postRender: function() {

   111 			var self = this, onClickHandler = self.settings.onclick;

   112 

   113 			self.on('click', function(e) {

   114 				var node = e.target;

   115 

   116 				if (e.control == this) {

   117 					// Find clicks that is on the main button

   118 					while (node) {

   119 						if ((e.aria && e.aria.key != 'down') || (node.nodeName == 'BUTTON' && node.className.indexOf('open') == -1)) {

   120 							e.stopImmediatePropagation();

   121 							onClickHandler.call(this, e);

   122 							return;

   123 						}

   124 

   125 						node = node.parentNode;

   126 					}

   127 				}

   128 			});

   129 

   130 			delete self.settings.onclick;

   131 

   132 			return self._super();

   133 		}

   134 	});

   135 });