|
1 /** |
|
2 * Path.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 new path control. |
|
13 * |
|
14 * @-x-less Path.less |
|
15 * @class tinymce.ui.Path |
|
16 * @extends tinymce.ui.Widget |
|
17 */ |
|
18 define("tinymce/ui/Path", [ |
|
19 "tinymce/ui/Widget" |
|
20 ], function(Widget) { |
|
21 "use strict"; |
|
22 |
|
23 return Widget.extend({ |
|
24 /** |
|
25 * Constructs a instance with the specified settings. |
|
26 * |
|
27 * @constructor |
|
28 * @param {Object} settings Name/value object with settings. |
|
29 * @setting {String} delimiter Delimiter to display between items in path. |
|
30 */ |
|
31 init: function(settings) { |
|
32 var self = this; |
|
33 |
|
34 if (!settings.delimiter) { |
|
35 settings.delimiter = '\u00BB'; |
|
36 } |
|
37 |
|
38 self._super(settings); |
|
39 self.addClass('path'); |
|
40 self.canFocus = true; |
|
41 |
|
42 self.on('click', function(e) { |
|
43 var index, target = e.target; |
|
44 |
|
45 if ((index = target.getAttribute('data-index'))) { |
|
46 self.fire('select', {value: self.data()[index], index: index}); |
|
47 } |
|
48 }); |
|
49 }, |
|
50 |
|
51 /** |
|
52 * Focuses the current control. |
|
53 * |
|
54 * @method focus |
|
55 * @return {tinymce.ui.Control} Current control instance. |
|
56 */ |
|
57 focus: function() { |
|
58 var self = this; |
|
59 |
|
60 self.getEl().firstChild.focus(); |
|
61 |
|
62 return self; |
|
63 }, |
|
64 |
|
65 /** |
|
66 * Sets/gets the data to be used for the path. |
|
67 * |
|
68 * @method data |
|
69 * @param {Array} data Array with items name is rendered to path. |
|
70 */ |
|
71 data: function(data) { |
|
72 var self = this; |
|
73 |
|
74 if (typeof data !== "undefined") { |
|
75 self._data = data; |
|
76 self.update(); |
|
77 |
|
78 return self; |
|
79 } |
|
80 |
|
81 return self._data; |
|
82 }, |
|
83 |
|
84 /** |
|
85 * Updated the path. |
|
86 * |
|
87 * @private |
|
88 */ |
|
89 update: function() { |
|
90 this.innerHtml(this._getPathHtml()); |
|
91 }, |
|
92 |
|
93 /** |
|
94 * Called after the control has been rendered. |
|
95 * |
|
96 * @method postRender |
|
97 */ |
|
98 postRender: function() { |
|
99 var self = this; |
|
100 |
|
101 self._super(); |
|
102 |
|
103 self.data(self.settings.data); |
|
104 }, |
|
105 |
|
106 /** |
|
107 * Renders the control as a HTML string. |
|
108 * |
|
109 * @method renderHtml |
|
110 * @return {String} HTML representing the control. |
|
111 */ |
|
112 renderHtml: function() { |
|
113 var self = this; |
|
114 |
|
115 return ( |
|
116 '<div id="' + self._id + '" class="' + self.classes() + '">' + |
|
117 self._getPathHtml() + |
|
118 '</div>' |
|
119 ); |
|
120 }, |
|
121 |
|
122 _getPathHtml: function() { |
|
123 var self = this, parts = self._data || [], i, l, html = '', prefix = self.classPrefix; |
|
124 |
|
125 for (i = 0, l = parts.length; i < l; i++) { |
|
126 html += ( |
|
127 (i > 0 ? '<div class="' + prefix + 'divider" aria-hidden="true"> ' + self.settings.delimiter + ' </div>' : '') + |
|
128 '<div role="button" class="' + prefix + 'path-item' + (i == l - 1 ? ' ' + prefix + 'last' : '') + '" data-index="' + |
|
129 i + '" tabindex="-1" id="' + self._id + '-' + i + '" aria-level="' + i + '">' + parts[i].name + '</div>' |
|
130 ); |
|
131 } |
|
132 |
|
133 if (!html) { |
|
134 html = '<div class="' + prefix + 'path-item">\u00a0</div>'; |
|
135 } |
|
136 |
|
137 return html; |
|
138 } |
|
139 }); |
|
140 }); |