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