198de2d45cf7818a0f893f4d9de4fa0b7a81fbe2
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / Resources / Public / JavaScript / Plugins / TextStyle.js
1 /*
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /**
15 * Text Style Plugin for TYPO3 htmlArea RTE
16 */
17 define('TYPO3/CMS/Rtehtmlarea/Plugins/TextStyle',
18 ['TYPO3/CMS/Rtehtmlarea/HTMLArea/Plugin/Plugin',
19 'TYPO3/CMS/Rtehtmlarea/HTMLArea/UserAgent/UserAgent',
20 'TYPO3/CMS/Rtehtmlarea/HTMLArea/DOM/DOM',
21 'TYPO3/CMS/Rtehtmlarea/HTMLArea/Event/Event',
22 'TYPO3/CMS/Rtehtmlarea/HTMLArea/CSS/Parser',
23 'TYPO3/CMS/Rtehtmlarea/HTMLArea/Util/Util'],
24 function (Plugin, UserAgent, Dom, Event, Parser, Util) {
25
26 var TextStyle = function (editor, pluginName) {
27 this.constructor.super.call(this, editor, pluginName);
28 };
29 Util.inherit(TextStyle, Plugin);
30 Util.apply(TextStyle.prototype, {
31
32 /**
33 * This function gets called by the class constructor
34 */
35 configurePlugin: function (editor) {
36 this.cssArray = {};
37 this.classesUrl = this.editorConfiguration.classesUrl;
38 this.pageTSconfiguration = this.editorConfiguration.buttons.textstyle;
39 this.tags = (this.pageTSconfiguration && this.pageTSconfiguration.tags) ? this.pageTSconfiguration.tags : {};
40 var allowedClasses;
41 for (var tagName in this.tags) {
42 if (this.tags.hasOwnProperty(tagName)) {
43 if (this.tags[tagName].allowedClasses) {
44 allowedClasses = this.tags[tagName].allowedClasses.trim().split(",");
45 for (var cssClass in allowedClasses) {
46 if (allowedClasses.hasOwnProperty(cssClass)) {
47 allowedClasses[cssClass] = allowedClasses[cssClass].trim().replace(/\*/g, ".*");
48 }
49 }
50 this.tags[tagName].allowedClasses = new RegExp( "^(" + allowedClasses.join("|") + ")$", "i");
51 }
52 }
53 }
54 this.showTagFreeClasses = this.pageTSconfiguration ? this.pageTSconfiguration.showTagFreeClasses : false;
55 this.prefixLabelWithClassName = this.pageTSconfiguration ? this.pageTSconfiguration.prefixLabelWithClassName : false;
56 this.postfixLabelWithClassName = this.pageTSconfiguration ? this.pageTSconfiguration.postfixLabelWithClassName : false;
57
58 // Regular expression to check if an element is an inline element
59 this.REInlineTags = /^(a|abbr|acronym|b|bdo|big|cite|code|del|dfn|em|i|img|ins|kbd|q|samp|small|span|strike|strong|sub|sup|tt|u|var)$/;
60
61 // Allowed attributes on inline elements
62 this.allowedAttributes = new Array('id', 'title', 'lang', 'xml:lang', 'dir', 'class', 'itemscope', 'itemtype', 'itemprop');
63 if (UserAgent.isIEBeforeIE9) {
64 this.addAllowedAttribute('className');
65 }
66
67 /**
68 * Registering plugin "About" information
69 */
70 var pluginInformation = {
71 version : '2.3',
72 developer : 'Stanislas Rolland',
73 developerUrl : 'http://www.sjbr.ca/',
74 copyrightOwner : 'Stanislas Rolland',
75 sponsor : this.localize('Technische Universitat Ilmenau'),
76 sponsorUrl : 'http://www.tu-ilmenau.de/',
77 license : 'GPL'
78 };
79 this.registerPluginInformation(pluginInformation);
80 /*
81 * Registering the dropdown list
82 */
83 var buttonId = 'TextStyle';
84 var fieldLabel = this.pageTSconfiguration ? this.pageTSconfiguration.fieldLabel : '';
85 if ((typeof fieldLabel !== 'string' || !fieldLabel.length) && this.isButtonInToolbar('I[text_style]')) {
86 fieldLabel = this.localize('text_style');
87 }
88 var dropDownConfiguration = {
89 id: buttonId,
90 tooltip: this.localize(buttonId + '-Tooltip'),
91 fieldLabel: fieldLabel,
92 options: [[this.localize('No style'), 'none']],
93 action: 'onChange',
94 storeFields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
95 tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
96 };
97 if (this.pageTSconfiguration) {
98 if (this.pageTSconfiguration.width) {
99 dropDownConfiguration.width = parseInt(this.pageTSconfiguration.width, 10);
100 }
101 if (this.pageTSconfiguration.listWidth) {
102 dropDownConfiguration.listWidth = parseInt(this.pageTSconfiguration.listWidth, 10);
103 }
104 if (this.pageTSconfiguration.maxHeight) {
105 dropDownConfiguration.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
106 }
107 }
108 this.registerDropDown(dropDownConfiguration);
109 return true;
110 },
111 isInlineElement: function (el) {
112 return el && (el.nodeType === Dom.ELEMENT_NODE) && this.REInlineTags.test(el.nodeName.toLowerCase());
113 },
114 /*
115 * This function adds an attribute to the array of allowed attributes on inline elements
116 *
117 * @param string attribute: the name of the attribute to be added to the array
118 *
119 * @return void
120 */
121 addAllowedAttribute: function (attribute) {
122 this.allowedAttributes.push(attribute);
123 },
124 /*
125 * This function gets called when some style in the drop-down list applies it to the highlighted textt
126 */
127 onChange: function (editor, combo, record, index) {
128 var className = combo.getValue();
129 var classNames = null;
130 var fullNodeSelected = false;
131 var statusBarSelection = this.editor.statusBar ? this.editor.statusBar.getSelection() : null;
132 var range = this.editor.getSelection().createRange();
133 var parent = this.editor.getSelection().getParentElement();
134 var selectionEmpty = this.editor.getSelection().isEmpty();
135 var ancestors = this.editor.getSelection().getAllAncestors();
136
137 if (!selectionEmpty) {
138 // The selection is not empty
139 for (var i = 0; i < ancestors.length; ++i) {
140 fullNodeSelected = (UserAgent.isIEBeforeIE9 && ((statusBarSelection === ancestors[i] && ancestors[i].innerText === range.text) || (!statusBarSelection && ancestors[i].innerText === range.text)))
141 || (!UserAgent.isIEBeforeIE9 && ((statusBarSelection === ancestors[i] && ancestors[i].textContent === range.toString()) || (!statusBarSelection && ancestors[i].textContent === range.toString())));
142 if (fullNodeSelected) {
143 if (this.isInlineElement(ancestors[i])) {
144 parent = ancestors[i];
145 }
146 break;
147 }
148 }
149 // Working around bug in Safari selectNodeContents
150 if (!fullNodeSelected && UserAgent.isWebKit && statusBarSelection && this.isInlineElement(statusBarSelection) && statusBarSelection.textContent === range.toString()) {
151 fullNodeSelected = true;
152 parent = statusBarSelection;
153 }
154 }
155 if (!selectionEmpty && !fullNodeSelected || (!selectionEmpty && fullNodeSelected && parent && Dom.isBlockElement(parent))) {
156 // The selection is not empty, nor full element, or the selection is full block element
157 if (className !== "none") {
158 // Add span element with class attribute
159 var newElement = editor.document.createElement('span');
160 Dom.addClass(newElement, className);
161 editor.getDomNode().wrapWithInlineElement(newElement, range);
162 if (!UserAgent.isIEBeforeIE9) {
163 range.detach();
164 }
165 }
166 } else {
167 this.applyClassChange(parent, className);
168 }
169 },
170 /*
171 * This function applies the class change to the node
172 *
173 * @param object node: the node on which to apply the class change
174 * @param string className: the class to add, 'none' to remove the last class added to the class attribute
175 * @param boolean noRemove: true not to remove a span element with no more attribute
176 *
177 * @return void
178 */
179 applyClassChange: function (node, className, noRemove) {
180 // Add or remove class
181 if (node && !Dom.isBlockElement(node)) {
182 if (className === 'none' && node.className && /\S/.test(node.className)) {
183 classNames = node.className.trim().split(' ');
184 Dom.removeClass(node, classNames[classNames.length-1]);
185 }
186 if (className !== 'none') {
187 Dom.addClass(node, className);
188 }
189 // Remove the span tag if it has no more attribute
190 if (/^span$/i.test(node.nodeName) && !Dom.hasAllowedAttributes(node, this.allowedAttributes) && !noRemove) {
191 this.editor.getDomNode().removeMarkup(node);
192 }
193 }
194 },
195
196 /**
197 * This function gets called when the plugin is generated
198 * Get the classes configuration and initiate the parsing of the style sheets
199 */
200 onGenerate: function () {
201 var self = this;
202 // Monitor editor changing mode
203 Event.on(this.editor, 'HTMLAreaEventModeChange', function (event, mode) { Event.stopEvent(event); self.onModeChange(mode); return false; });
204 // Create CSS Parser object
205 this.textStyles = new Parser({
206 prefixLabelWithClassName: this.prefixLabelWithClassName,
207 postfixLabelWithClassName: this.postfixLabelWithClassName,
208 showTagFreeClasses: this.showTagFreeClasses,
209 tags: this.tags,
210 editor: this.editor
211 });
212 // Disable the combo while initialization completes
213 var dropDown = this.getButton('TextStyle');
214 if (dropDown) {
215 dropDown.setDisabled(true);
216 }
217 // Monitor css parsing being completed
218 Event.one(this.textStyles, 'HTMLAreaEventCssParsingComplete', function (event) { Event.stopEvent(event); self.onCssParsingComplete(); return false; });
219 this.textStyles.parse();
220 },
221
222 /**
223 * This handler gets called when parsing of css classes is completed
224 */
225 onCssParsingComplete: function () {
226 if (this.textStyles.isReady()) {
227 this.cssArray = this.textStyles.getClasses();
228 if (this.getEditorMode() === 'wysiwyg' && this.editor.isEditable()) {
229 this.updateToolbar('TextStyle');
230 }
231 }
232 },
233
234 /**
235 * This handler gets called when the toolbar is being updated
236 */
237 onUpdateToolbar: function (button, mode, selectionEmpty, ancestors) {
238 if (mode === 'wysiwyg' && this.editor.isEditable() && this.textStyles.isReady()) {
239 this.updateToolbar(button.itemId);
240 }
241 },
242
243 /**
244 * This handler gets called when the editor has changed its mode to "wysiwyg"
245 */
246 onModeChange: function (mode) {
247 if (mode === 'wysiwyg' && this.editor.isEditable()) {
248 this.updateToolbar('TextStyle');
249 }
250 },
251
252 /**
253 * This function gets called when the drop-down list needs to be refreshed
254 */
255 updateToolbar: function (dropDownId) {
256 var editor = this.editor;
257 if (this.getEditorMode() === "wysiwyg" && this.editor.isEditable()) {
258 var tagName = false, classNames = Array(), fullNodeSelected = false;
259 var statusBarSelection = editor.statusBar ? editor.statusBar.getSelection() : null;
260 var range = editor.getSelection().createRange();
261 var parent = editor.getSelection().getParentElement();
262 var ancestors = editor.getSelection().getAllAncestors();
263 if (parent && !Dom.isBlockElement(parent)) {
264 tagName = parent.nodeName.toLowerCase();
265 if (parent.className && /\S/.test(parent.className)) {
266 classNames = parent.className.trim().split(" ");
267 }
268 }
269 var selectionEmpty = editor.getSelection().isEmpty();
270 if (!selectionEmpty) {
271 for (var i = 0; i < ancestors.length; ++i) {
272 fullNodeSelected = (statusBarSelection === ancestors[i])
273 && ((!UserAgent.isIEBeforeIE9 && ancestors[i].textContent === range.toString()) || (UserAgent.isIEBeforeIE9 && ancestors[i].innerText === range.text));
274 if (fullNodeSelected) {
275 if (!Dom.isBlockElement(ancestors[i])) {
276 tagName = ancestors[i].nodeName.toLowerCase();
277 if (ancestors[i].className && /\S/.test(ancestors[i].className)) {
278 classNames = ancestors[i].className.trim().split(" ");
279 }
280 }
281 break;
282 }
283 }
284 // Working around bug in Safari selectNodeContents
285 if (!fullNodeSelected && UserAgent.isWebKit && statusBarSelection && this.isInlineElement(statusBarSelection) && statusBarSelection.textContent === range.toString()) {
286 fullNodeSelected = true;
287 tagName = statusBarSelection.nodeName.toLowerCase();
288 if (statusBarSelection.className && /\S/.test(statusBarSelection.className)) {
289 classNames = statusBarSelection.className.trim().split(" ");
290 }
291 }
292 }
293 var selectionInInlineElement = tagName && this.REInlineTags.test(tagName);
294 var disabled = !editor.getSelection().endPointsInSameBlock() || (fullNodeSelected && !tagName) || (selectionEmpty && !selectionInInlineElement);
295 if (!disabled && !tagName) {
296 tagName = "span";
297 }
298 this.updateValue(dropDownId, tagName, classNames, selectionEmpty, fullNodeSelected, disabled);
299 } else {
300 var dropDown = this.getButton(dropDownId);
301 if (dropDown) {
302 dropDown.setDisabled(!dropDown.textMode);
303 }
304 }
305 },
306 /*
307 * This function reinitializes the options of the dropdown
308 */
309 initializeDropDown: function (dropDown) {
310 var store = dropDown.getStore();
311 store.removeAll(false);
312 store.insert(0, new store.recordType({
313 text: this.localize('No style'),
314 value: 'none'
315 }));
316 dropDown.setValue('none');
317 },
318 /*
319 * This function builds the options to be displayed in the dropDown box
320 */
321 buildDropDownOptions: function (dropDown, nodeName) {
322 var store = dropDown.getStore();
323 this.initializeDropDown(dropDown);
324 if (this.textStyles.isReady()) {
325 var allowedClasses = {};
326 if (this.REInlineTags.test(nodeName)) {
327 if (typeof this.cssArray[nodeName] !== 'undefined') {
328 allowedClasses = this.cssArray[nodeName];
329 } else if (this.showTagFreeClasses && typeof this.cssArray['all'] !== 'undefined') {
330 allowedClasses = this.cssArray['all'];
331 }
332 }
333 for (var cssClass in allowedClasses) {
334 if (typeof HTMLArea.classesSelectable[cssClass] === 'undefined' || HTMLArea.classesSelectable[cssClass]) {
335 store.add(new store.recordType({
336 text: allowedClasses[cssClass],
337 value: cssClass,
338 style: (!(this.pageTSconfiguration && this.pageTSconfiguration.disableStyleOnOptionLabel) && HTMLArea.classesValues && HTMLArea.classesValues[cssClass] && !HTMLArea.classesNoShow[cssClass]) ? HTMLArea.classesValues[cssClass] : null
339 }));
340 }
341 }
342 }
343 },
344 /*
345 * This function sets the selected option of the dropDown box
346 */
347 setSelectedOption: function (dropDown, classNames, noUnknown, defaultClass) {
348 var store = dropDown.getStore();
349 dropDown.setValue('none');
350 if (classNames.length) {
351 var index = store.findExact('value', classNames[classNames.length-1]);
352 if (index !== -1) {
353 dropDown.setValue(classNames[classNames.length-1]);
354 if (!defaultClass) {
355 store.getAt(0).set('text', this.localize('Remove style'));
356 }
357 }
358 if (index === -1 && !noUnknown) {
359 var text = this.localize('Unknown style');
360 var value = classNames[classNames.length-1];
361 if (typeof HTMLArea.classesSelectable[value] !== 'undefined' && !HTMLArea.classesSelectable[value] && typeof HTMLArea.classesLabels[value] !== 'undefined') {
362 text = HTMLArea.classesLabels[value];
363 }
364 store.add(new store.recordType({
365 text: text,
366 value: value,
367 style: (!(this.pageTSconfiguration && this.pageTSconfiguration.disableStyleOnOptionLabel) && HTMLArea.classesValues && HTMLArea.classesValues[value] && !HTMLArea.classesNoShow[value]) ? HTMLArea.classesValues[value] : null
368 }));
369 dropDown.setValue(value);
370 if (!defaultClass) {
371 store.getAt(0).set('text', this.localize('Remove style'));
372 }
373 }
374 // Remove already assigned classes from the dropDown box
375 var classNamesString = ',' + classNames.join(',') + ',';
376 var selectedValue = dropDown.getValue(), optionValue;
377 store.each(function (option) {
378 optionValue = option.get('value');
379 if (classNamesString.indexOf(',' + optionValue + ',') !== -1 && optionValue !== selectedValue) {
380 store.removeAt(store.indexOf(option));
381 }
382 return true;
383 });
384 }
385 dropDown.setDisabled(!store.getCount() || (store.getCount() == 1 && dropDown.getValue() == 'none'));
386 },
387
388 /**
389 * This function updates the current value of the dropdown list
390 */
391 updateValue: function (dropDownId, nodeName, classNames, selectionEmpty, fullNodeSelected, disabled) {
392 var editor = this.editor;
393 var dropDown = this.getButton(dropDownId);
394 if (dropDown) {
395 this.buildDropDownOptions(dropDown, nodeName);
396 if (classNames.length && (selectionEmpty || fullNodeSelected)) {
397 this.setSelectedOption(dropDown, classNames);
398 }
399 var store = dropDown.getStore();
400 dropDown.setDisabled(!store.getCount() || (store.getCount() == 1 && dropDown.getValue() == 'none') || disabled);
401 }
402 }
403 });
404
405 return TextStyle;
406
407 });