1 /**

     2  * Button.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  * This class is used to create buttons. You can create them directly or through the Factory.

    13  *

    14  * @example

    15  * // Create and render a button to the body element

    16  * tinymce.ui.Factory.create({

    17  *     type: 'button',

    18  *     text: 'My button'

    19  * }).renderTo(document.body);

    20  *

    21  * @-x-less Button.less

    22  * @class tinymce.ui.Button

    23  * @extends tinymce.ui.Widget

    24  */

    25 define("tinymce/ui/Button", [

    26 	"tinymce/ui/Widget"

    27 ], function(Widget) {

    28 	"use strict";

    29 

    30 	return Widget.extend({

    31 		Defaults: {

    32 			classes: "widget btn",

    33 			role: "button"

    34 		},

    35 

    36 		/**

    37 		 * Constructs a new button instance with the specified settings.

    38 		 *

    39 		 * @constructor

    40 		 * @param {Object} settings Name/value object with settings.

    41 		 * @setting {String} size Size of the button small|medium|large.

    42 		 * @setting {String} image Image to use for icon.

    43 		 * @setting {String} icon Icon to use for button.

    44 		 */

    45 		init: function(settings) {

    46 			var self = this, size;

    47 

    48 			self.on('click mousedown', function(e) {

    49 				e.preventDefault();

    50 			});

    51 

    52 			self._super(settings);

    53 			size = settings.size;

    54 

    55 			if (settings.subtype) {

    56 				self.addClass(settings.subtype);

    57 			}

    58 

    59 			if (size) {

    60 				self.addClass('btn-' + size);

    61 			}

    62 		},

    63 

    64 		/**

    65 		 * Sets/gets the current button icon.

    66 		 *

    67 		 * @method icon

    68 		 * @param {String} [icon] New icon identifier.

    69 		 * @return {String|tinymce.ui.MenuButton} Current icon or current MenuButton instance.

    70 		 */

    71 		icon: function(icon) {

    72 			var self = this, prefix = self.classPrefix;

    73 

    74 			if (typeof icon == 'undefined') {

    75 				return self.settings.icon;

    76 			}

    77 

    78 			self.settings.icon = icon;

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

    80 

    81 			if (self._rendered) {

    82 				var btnElm = self.getEl().firstChild, iconElm = btnElm.getElementsByTagName('i')[0];

    83 

    84 				if (icon) {

    85 					if (!iconElm || iconElm != btnElm.firstChild) {

    86 						iconElm = document.createElement('i');

    87 						btnElm.insertBefore(iconElm, btnElm.firstChild);

    88 					}

    89 

    90 					iconElm.className = icon;

    91 				} else if (iconElm) {

    92 					btnElm.removeChild(iconElm);

    93 				}

    94 

    95 				self.text(self._text); // Set text again to fix whitespace between icon + text

    96 			}

    97 

    98 			return self;

    99 		},

   100 

   101 		/**

   102 		 * Repaints the button for example after it's been resizes by a layout engine.

   103 		 *

   104 		 * @method repaint

   105 		 */

   106 		repaint: function() {

   107 			var btnStyle = this.getEl().firstChild.style;

   108 

   109 			btnStyle.width = btnStyle.height = "100%";

   110 

   111 			this._super();

   112 		},

   113 

   114 		/**

   115 		 * Sets/gets the current button text.

   116 		 *

   117 		 * @method text

   118 		 * @param {String} [text] New button text.

   119 		 * @return {String|tinymce.ui.Button} Current text or current Button instance.

   120 		 */

   121 		text: function(text) {

   122 			var self = this;

   123 

   124 			if (self._rendered) {

   125 				var textNode = self.getEl().lastChild.lastChild;

   126 				if (textNode) {

   127 					textNode.data = self.translate(text);

   128 				}

   129 			}

   130 

   131 			return self._super(text);

   132 		},

   133 

   134 		/**

   135 		 * Renders the control as a HTML string.

   136 		 *

   137 		 * @method renderHtml

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

   139 		 */

   140 		renderHtml: function() {

   141 			var self = this, id = self._id, prefix = self.classPrefix;

   142 			var icon = self.settings.icon, image;

   143 

   144 			image = self.settings.image;

   145 			if (image) {

   146 				icon = 'none';

   147 

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

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

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

   151 				}

   152 

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

   154 			} else {

   155 				image = '';

   156 			}

   157 

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

   159 

   160 			return (

   161 				'<div id="' + id + '" class="' + self.classes() + '" tabindex="-1" aria-labelledby="' + id + '">' +

   162 					'<button role="presentation" type="button" tabindex="-1">' +

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

   164 						(self._text ? (icon ? '\u00a0' : '') + self.encode(self._text) : '') +

   165 					'</button>' +

   166 				'</div>'

   167 			);

   168 		}

   169 	});

   170 });