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