ca649f747bd650d0763eb5e4210115fa5db4a198
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / htmlarea / plugins / TextStyle / text-style.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2007-2011 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 // classesTag is DEPRECATED as of TYPO3 4.6 and will be removed#in TYPO3 4.8
43 if (typeof(this.editorConfiguration.classesTag) !== "undefined") {
44 if (this.editorConfiguration.classesTag.span) {
45 if (!this.tags.span) {
46 this.tags.span = new Object();
47 }
48 if (!this.tags.span.allowedClasses) {
49 this.tags.span.allowedClasses = this.editorConfiguration.classesTag.span;
50 }
51 }
52 }
53 var allowedClasses;
54 for (var tagName in this.tags) {
55 if (this.tags.hasOwnProperty(tagName)) {
56 if (this.tags[tagName].allowedClasses) {
57 allowedClasses = this.tags[tagName].allowedClasses.trim().split(",");
58 for (var cssClass in allowedClasses) {
59 if (allowedClasses.hasOwnProperty(cssClass)) {
60 allowedClasses[cssClass] = allowedClasses[cssClass].trim().replace(/\*/g, ".*");
61 }
62 }
63 this.tags[tagName].allowedClasses = new RegExp( "^(" + allowedClasses.join("|") + ")$", "i");
64 }
65 }
66 }
67 // Property this.editorConfiguration.showTagFreeClasses is deprecated as of TYPO3 4.6 and will be removed in TYPO3 4.8
68 this.showTagFreeClasses = (this.pageTSconfiguration ? this.pageTSconfiguration.showTagFreeClasses : false) || this.editorConfiguration.showTagFreeClasses;
69 this.prefixLabelWithClassName = this.pageTSconfiguration ? this.pageTSconfiguration.prefixLabelWithClassName : false;
70 this.postfixLabelWithClassName = this.pageTSconfiguration ? this.pageTSconfiguration.postfixLabelWithClassName : false;
71 /*
72 * Regular expression to check if an element is an inline elment
73 */
74 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)$/;
75
76 // Allowed attributes on inline elements
77 this.allowedAttributes = new Array("id", "title", "lang", "xml:lang", "dir", "class");
78 if (Ext.isIE) {
79 this.addAllowedAttribute("className");
80 }
81 /*
82 * Registering plugin "About" information
83 */
84 var pluginInformation = {
85 version : '2.2',
86 developer : 'Stanislas Rolland',
87 developerUrl : 'http://www.sjbr.ca/',
88 copyrightOwner : 'Stanislas Rolland',
89 sponsor : this.localize('Technische Universitat Ilmenau'),
90 sponsorUrl : 'http://www.tu-ilmenau.de/',
91 license : 'GPL'
92 };
93 this.registerPluginInformation(pluginInformation);
94 /*
95 * Registering the dropdown list
96 */
97 var buttonId = 'TextStyle';
98 var fieldLabel = this.pageTSconfiguration ? this.pageTSconfiguration.fieldLabel : '';
99 if (Ext.isEmpty(fieldLabel) && this.isButtonInToolbar('I[text_style]')) {
100 fieldLabel = this.localize('text_style');
101 }
102 var dropDownConfiguration = {
103 id: buttonId,
104 tooltip: this.localize(buttonId + '-Tooltip'),
105 fieldLabel: fieldLabel,
106 options: [[this.localize('No style'), 'none']],
107 action: 'onChange',
108 storeFields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
109 tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
110 };
111 if (this.pageTSconfiguration) {
112 if (this.pageTSconfiguration.width) {
113 dropDownConfiguration.width = parseInt(this.pageTSconfiguration.width, 10);
114 }
115 if (this.pageTSconfiguration.listWidth) {
116 dropDownConfiguration.listWidth = parseInt(this.pageTSconfiguration.listWidth, 10);
117 }
118 if (this.pageTSconfiguration.maxHeight) {
119 dropDownConfiguration.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
120 }
121 }
122 this.registerDropDown(dropDownConfiguration);
123 return true;
124 },
125
126 isInlineElement: function (el) {
127 return el && (el.nodeType === 1) && this.REInlineTags.test(el.nodeName.toLowerCase());
128 },
129 /*
130 * This function adds an attribute to the array of allowed attributes on inline elements
131 *
132 * @param string attribute: the name of the attribute to be added to the array
133 *
134 * @return void
135 */
136 addAllowedAttribute: function (attribute) {
137 this.allowedAttributes.push(attribute);
138 },
139 /*
140 * This function gets called when some style in the drop-down list applies it to the highlighted textt
141 */
142 onChange: function (editor, combo, record, index) {
143 var className = combo.getValue();
144 var classNames = null;
145 var fullNodeSelected = false;
146
147 this.editor.focus();
148 var selection = this.editor._getSelection();
149 var statusBarSelection = this.editor.statusBar ? this.editor.statusBar.getSelection() : null;
150 var range = this.editor._createRange(selection);
151 var parent = this.editor.getParentElement();
152 var selectionEmpty = this.editor._selectionEmpty(selection);
153 var ancestors = this.editor.getAllAncestors();
154 if (Ext.isIE) {
155 var bookmark = range.getBookmark();
156 }
157
158 if (!selectionEmpty) {
159 // The selection is not empty
160 for (var i = 0; i < ancestors.length; ++i) {
161 fullNodeSelected = (Ext.isIE && ((statusBarSelection === ancestors[i] && ancestors[i].innerText === range.text) || (!statusBarSelection && ancestors[i].innerText === range.text)))
162 || (!Ext.isIE && ((statusBarSelection === ancestors[i] && ancestors[i].textContent === range.toString()) || (!statusBarSelection && ancestors[i].textContent === range.toString())));
163 if (fullNodeSelected) {
164 if (this.isInlineElement(ancestors[i])) {
165 parent = ancestors[i];
166 }
167 break;
168 }
169 }
170 // Working around bug in Safari selectNodeContents
171 if (!fullNodeSelected && Ext.isWebKit && statusBarSelection && this.isInlineElement(statusBarSelection) && statusBarSelection.textContent === range.toString()) {
172 fullNodeSelected = true;
173 parent = statusBarSelection;
174 }
175 }
176 if (!selectionEmpty && !fullNodeSelected || (!selectionEmpty && fullNodeSelected && parent && HTMLArea.isBlockElement(parent))) {
177 // The selection is not empty, nor full element, or the selection is full block element
178 if (className !== "none") {
179 // Add span element with class attribute
180 var newElement = editor._doc.createElement("span");
181 HTMLArea.DOM.addClass(newElement, className);
182 editor.wrapWithInlineElement(newElement, selection, range);
183 if (!Ext.isIE) {
184 range.detach();
185 }
186 }
187 } else {
188 this.applyClassChange(parent, className);
189 }
190 },
191 /*
192 * This function applies the class change to the node
193 */
194 applyClassChange: function (node, className) {
195 // Add or remove class
196 if (node && !HTMLArea.isBlockElement(node)) {
197 if (className === 'none' && node.className && /\S/.test(node.className)) {
198 classNames = node.className.trim().split(' ');
199 HTMLArea.DOM.removeClass(node, classNames[classNames.length-1]);
200 }
201 if (className !== 'none') {
202 HTMLArea.DOM.addClass(node, className);
203 }
204 // Remove the span tag if it has no more attribute
205 if (/^span$/i.test(node.nodeName) && !HTMLArea.hasAllowedAttributes(node, this.allowedAttributes)) {
206 this.editor.removeMarkup(node);
207 }
208 }
209 },
210 /*
211 * This function gets called when the plugin is generated
212 * Get the classes configuration and initiate the parsing of the style sheets
213 */
214 onGenerate: function () {
215 // Monitor editor changing mode
216 this.editor.iframe.mon(this.editor, 'HTMLAreaEventModeChange', this.onModeChange, this);
217 // Create CSS Parser object
218 this.textStyles = new HTMLArea.CSS.Parser({
219 prefixLabelWithClassName: this.prefixLabelWithClassName,
220 postfixLabelWithClassName: this.postfixLabelWithClassName,
221 showTagFreeClasses: this.showTagFreeClasses,
222 tags: this.tags,
223 editor: this.editor
224 });
225 // Disable the combo while initialization completes
226 var dropDown = this.getButton('TextStyle');
227 if (dropDown) {
228 dropDown.setDisabled(true);
229 }
230 // Monitor css parsing being completed
231 this.editor.iframe.mon(this.textStyles, 'HTMLAreaEventCssParsingComplete', this.onCssParsingComplete, this);
232 this.textStyles.initiateParsing();
233 },
234 /*
235 * This handler gets called when parsing of css classes is completed
236 */
237 onCssParsingComplete: function () {
238 if (this.textStyles.isReady) {
239 this.cssArray = this.textStyles.getClasses();
240 if (this.getEditorMode() === 'wysiwyg' && this.editor.isEditable()) {
241 this.updateToolbar('TextStyle');
242 }
243 }
244 },
245 /*
246 * This handler gets called when the toolbar is being updated
247 */
248 onUpdateToolbar: function (button, mode, selectionEmpty, ancestors) {
249 if (mode === 'wysiwyg' && this.editor.isEditable() && this.textStyles.isReady) {
250 this.updateToolbar(button.itemId);
251 }
252 },
253 /*
254 * This handler gets called when the editor has changed its mode to "wysiwyg"
255 */
256 onModeChange: function (mode) {
257 if (mode === 'wysiwyg' && this.editor.isEditable()) {
258 this.updateToolbar('TextStyle');
259 }
260 },
261 /*
262 * This function gets called when the drop-down list needs to be refreshed
263 */
264 updateToolbar: function(dropDownId) {
265 var editor = this.editor;
266 if (this.getEditorMode() === "wysiwyg" && this.editor.isEditable()) {
267 var tagName = false, classNames = Array(), fullNodeSelected = false;
268 var selection = editor._getSelection();
269 var statusBarSelection = editor.statusBar ? editor.statusBar.getSelection() : null;
270 var range = editor._createRange(selection);
271 var parent = editor.getParentElement(selection);
272 var ancestors = editor.getAllAncestors();
273 if (parent && !HTMLArea.isBlockElement(parent)) {
274 tagName = parent.nodeName.toLowerCase();
275 if (parent.className && /\S/.test(parent.className)) {
276 classNames = parent.className.trim().split(" ");
277 }
278 }
279 var selectionEmpty = editor._selectionEmpty(selection);
280 if (!selectionEmpty) {
281 for (var i = 0; i < ancestors.length; ++i) {
282 fullNodeSelected = (statusBarSelection === ancestors[i])
283 && ((!Ext.isIE && ancestors[i].textContent === range.toString()) || (Ext.isIE && ancestors[i].innerText === range.text));
284 if (fullNodeSelected) {
285 if (!HTMLArea.isBlockElement(ancestors[i])) {
286 tagName = ancestors[i].nodeName.toLowerCase();
287 if (ancestors[i].className && /\S/.test(ancestors[i].className)) {
288 classNames = ancestors[i].className.trim().split(" ");
289 }
290 }
291 break;
292 }
293 }
294 // Working around bug in Safari selectNodeContents
295 if (!fullNodeSelected && Ext.isWebKit && statusBarSelection && this.isInlineElement(statusBarSelection) && statusBarSelection.textContent === range.toString()) {
296 fullNodeSelected = true;
297 tagName = statusBarSelection.nodeName.toLowerCase();
298 if (statusBarSelection.className && /\S/.test(statusBarSelection.className)) {
299 classNames = statusBarSelection.className.trim().split(" ");
300 }
301 }
302 }
303 var selectionInInlineElement = tagName && this.REInlineTags.test(tagName);
304 var disabled = !editor.endPointsInSameBlock() || (fullNodeSelected && !tagName) || (selectionEmpty && !selectionInInlineElement);
305 if (!disabled && !tagName) {
306 tagName = "span";
307 }
308 this.updateValue(dropDownId, tagName, classNames, selectionEmpty, fullNodeSelected, disabled);
309 } else {
310 var dropDown = this.getButton(dropDownId);
311 if (dropDown) {
312 dropDown.setDisabled(!dropDown.textMode);
313 }
314 }
315 },
316 /*
317 * This function reinitializes the options of the dropdown
318 */
319 initializeDropDown: function (dropDown) {
320 var store = dropDown.getStore();
321 store.removeAll(false);
322 store.insert(0, new store.recordType({
323 text: this.localize('No style'),
324 value: 'none'
325 }));
326 dropDown.setValue('none');
327 },
328 /*
329 * This function builds the options to be displayed in the dropDown box
330 */
331 buildDropDownOptions: function (dropDown, nodeName) {
332 var store = dropDown.getStore();
333 this.initializeDropDown(dropDown);
334 if (this.textStyles.isReady) {
335 var allowedClasses = {};
336 if (this.REInlineTags.test(nodeName)) {
337 if (Ext.isDefined(this.cssArray[nodeName])) {
338 allowedClasses = this.cssArray[nodeName];
339 } else if (this.showTagFreeClasses && Ext.isDefined(this.cssArray['all'])) {
340 allowedClasses = this.cssArray['all'];
341 }
342 }
343 Ext.iterate(allowedClasses, function (cssClass, value) {
344 store.add(new store.recordType({
345 text: value,
346 value: cssClass,
347 // this.editor.config.disablePCexamples is deprecated as of TYPO3 4.6 and will be removed in TYPO 4.8
348 style: (!(this.pageTSconfiguration && this.pageTSconfiguration.disableStyleOnOptionLabel) && !this.editor.config.disablePCexamples && HTMLArea.classesValues && HTMLArea.classesValues[cssClass] && !HTMLArea.classesNoShow[cssClass]) ? HTMLArea.classesValues[cssClass] : null
349 }));
350 }, this);
351 }
352 },
353 /*
354 * This function sets the selected option of the dropDown box
355 */
356 setSelectedOption: function (dropDown, classNames, noUnknown, defaultClass) {
357 var store = dropDown.getStore();
358 dropDown.setValue('none');
359 if (classNames.length) {
360 var index = store.findExact('value', classNames[classNames.length-1]);
361 if (index != -1) {
362 dropDown.setValue(classNames[classNames.length-1]);
363 if (!defaultClass) {
364 store.getAt(0).set('text', this.localize('Remove style'));
365 }
366 }
367 if (index == -1 && !noUnknown) {
368 store.add(new store.recordType({
369 text: this.localize('Unknown style'),
370 value: classNames[classNames.length-1]
371 }));
372 index = store.getCount()-1;
373 dropDown.setValue(classNames[classNames.length-1]);
374 if (!defaultClass) {
375 store.getAt(0).set('text', this.localize('Remove style'));
376 }
377 }
378 // Remove already assigned classes from the dropDown box
379 var classNamesString = ',' + classNames.join(',') + ',';
380 store.each(function (option) {
381 if (classNamesString.indexOf("," + option.get('value') + ",") != -1) {
382 store.removeAt(store.indexOf(option));
383 }
384 return true;
385 });
386 }
387 dropDown.setDisabled(!store.getCount() || (store.getCount() == 1 && dropDown.getValue() == 'none'));
388 },
389 /*
390 * This function updates the current value of the dropdown list
391 */
392 updateValue: function (dropDownId, nodeName, classNames, selectionEmpty, fullNodeSelected, disabled) {
393 var editor = this.editor;
394 var dropDown = this.getButton(dropDownId);
395 if (dropDown) {
396 this.buildDropDownOptions(dropDown, nodeName);
397 if (classNames.length && (selectionEmpty || fullNodeSelected)) {
398 this.setSelectedOption(dropDown, classNames);
399 }
400 var store = dropDown.getStore();
401 dropDown.setDisabled(!store.getCount() || (store.getCount() == 1 && dropDown.getValue() == 'none') || disabled);
402 }
403 }
404 });