1 /** |
|
2 * Checkbox.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 control creates a custom checkbox. |
|
13 * |
|
14 * @example |
|
15 * // Create and render a checkbox to the body element |
|
16 * tinymce.ui.Factory.create({ |
|
17 * type: 'checkbox', |
|
18 * checked: true, |
|
19 * text: 'My checkbox' |
|
20 * }).renderTo(document.body); |
|
21 * |
|
22 * @-x-less Checkbox.less |
|
23 * @class tinymce.ui.Checkbox |
|
24 * @extends tinymce.ui.Widget |
|
25 */ |
|
26 define("tinymce/ui/Checkbox", [ |
|
27 "tinymce/ui/Widget" |
|
28 ], function(Widget) { |
|
29 "use strict"; |
|
30 |
|
31 return Widget.extend({ |
|
32 Defaults: { |
|
33 classes: "checkbox", |
|
34 role: "checkbox", |
|
35 checked: false |
|
36 }, |
|
37 |
|
38 /** |
|
39 * Constructs a new Checkbox instance with the specified settings. |
|
40 * |
|
41 * @constructor |
|
42 * @param {Object} settings Name/value object with settings. |
|
43 * @setting {Boolean} checked True if the checkbox should be checked by default. |
|
44 */ |
|
45 init: function(settings) { |
|
46 var self = this; |
|
47 |
|
48 self._super(settings); |
|
49 |
|
50 self.on('click mousedown', function(e) { |
|
51 e.preventDefault(); |
|
52 }); |
|
53 |
|
54 self.on('click', function(e) { |
|
55 e.preventDefault(); |
|
56 |
|
57 if (!self.disabled()) { |
|
58 self.checked(!self.checked()); |
|
59 } |
|
60 }); |
|
61 |
|
62 self.checked(self.settings.checked); |
|
63 }, |
|
64 |
|
65 /** |
|
66 * Getter/setter function for the checked state. |
|
67 * |
|
68 * @method checked |
|
69 * @param {Boolean} [state] State to be set. |
|
70 * @return {Boolean|tinymce.ui.Checkbox} True/false or checkbox if it's a set operation. |
|
71 */ |
|
72 checked: function(state) { |
|
73 var self = this; |
|
74 |
|
75 if (typeof state != "undefined") { |
|
76 if (state) { |
|
77 self.addClass('checked'); |
|
78 } else { |
|
79 self.removeClass('checked'); |
|
80 } |
|
81 |
|
82 self._checked = state; |
|
83 self.aria('checked', state); |
|
84 |
|
85 return self; |
|
86 } |
|
87 |
|
88 return self._checked; |
|
89 }, |
|
90 |
|
91 /** |
|
92 * Getter/setter function for the value state. |
|
93 * |
|
94 * @method value |
|
95 * @param {Boolean} [state] State to be set. |
|
96 * @return {Boolean|tinymce.ui.Checkbox} True/false or checkbox if it's a set operation. |
|
97 */ |
|
98 value: function(state) { |
|
99 return this.checked(state); |
|
100 }, |
|
101 |
|
102 /** |
|
103 * Renders the control as a HTML string. |
|
104 * |
|
105 * @method renderHtml |
|
106 * @return {String} HTML representing the control. |
|
107 */ |
|
108 renderHtml: function() { |
|
109 var self = this, id = self._id, prefix = self.classPrefix; |
|
110 |
|
111 return ( |
|
112 '<div id="' + id + '" class="' + self.classes() + '" unselectable="on" aria-labelledby="' + id + '-al" tabindex="-1">' + |
|
113 '<i class="' + prefix + 'ico ' + prefix + 'i-checkbox"></i>' + |
|
114 '<span id="' + id + '-al" class="' + prefix + 'label">' + self.encode(self._text) + '</span>' + |
|
115 '</div>' |
|
116 ); |
|
117 } |
|
118 }); |
|
119 }); |
|