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