9a210f47701ee4a05c3849e704d6ddff362c5f14
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / htmlarea / plugins / BlockStyle / block-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 * This script is a modified version of a script published under the htmlArea License.
25 * A copy of the htmlArea License may be found in the textfile HTMLAREA_LICENSE.txt.
26 *
27 * This copyright notice MUST APPEAR in all copies of the script!
28 ***************************************************************/
29 /*
30 * Block Style Plugin for TYPO3 htmlArea RTE
31 */
32 HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
33 /*
34 * This function gets called by the class constructor
35 */
36 configurePlugin: function (editor) {
37 this.cssArray = {};
38 this.classesUrl = this.editorConfiguration.classesUrl;
39 this.pageTSconfiguration = this.editorConfiguration.buttons.blockstyle;
40 this.tags = (this.pageTSconfiguration && this.pageTSconfiguration.tags) ? this.pageTSconfiguration.tags : {};
41 if (typeof(this.editorConfiguration.classesTag) !== "undefined") {
42 if (this.editorConfiguration.classesTag.div) {
43 if (!this.tags.div) {
44 this.tags.div = new Object();
45 }
46 if (!this.tags.div.allowedClasses) {
47 this.tags.div.allowedClasses = this.editorConfiguration.classesTag.div;
48 }
49 }
50 if (this.editorConfiguration.classesTag.td) {
51 if (!this.tags.td) {
52 this.tags.td = new Object();
53 }
54 if (!this.tags.td.allowedClasses) {
55 this.tags.td.allowedClasses = this.editorConfiguration.classesTag.td;
56 }
57 }
58 if (this.editorConfiguration.classesTag.table) {
59 if (!this.tags.table) {
60 this.tags.table = new Object();
61 }
62 if (!this.tags.table.allowedClasses) {
63 this.tags.table.allowedClasses = this.editorConfiguration.classesTag.table;
64 }
65 }
66 }
67 var allowedClasses;
68 for (var tagName in this.tags) {
69 if (this.tags.hasOwnProperty(tagName)) {
70 if (this.tags[tagName].allowedClasses) {
71 allowedClasses = this.tags[tagName].allowedClasses.trim().split(",");
72 for (var cssClass in allowedClasses) {
73 if (allowedClasses.hasOwnProperty(cssClass)) {
74 allowedClasses[cssClass] = allowedClasses[cssClass].trim().replace(/\*/g, ".*");
75 }
76 }
77 this.tags[tagName].allowedClasses = new RegExp( "^(" + allowedClasses.join("|") + ")$", "i");
78 }
79 }
80 }
81 this.showTagFreeClasses = (this.pageTSconfiguration ? this.pageTSconfiguration.showTagFreeClasses : false) || this.editorConfiguration.showTagFreeClasses;
82 this.prefixLabelWithClassName = this.pageTSconfiguration ? this.pageTSconfiguration.prefixLabelWithClassName : false;
83 this.postfixLabelWithClassName = this.pageTSconfiguration ? this.pageTSconfiguration.postfixLabelWithClassName : false;
84 /*
85 * Registering plugin "About" information
86 */
87 var pluginInformation = {
88 version : '2.1',
89 developer : 'Stanislas Rolland',
90 developerUrl : 'http://www.sjbr.ca/',
91 copyrightOwner : 'Stanislas Rolland',
92 sponsor : this.localize('Technische Universitat Ilmenau'),
93 sponsorUrl : 'http://www.tu-ilmenau.de/',
94 license : 'GPL'
95 };
96 this.registerPluginInformation(pluginInformation);
97 /*
98 * Registering the drop-down list
99 */
100 var dropDownId = 'BlockStyle';
101 var fieldLabel = this.pageTSconfiguration ? this.pageTSconfiguration.fieldLabel : '';
102 if (Ext.isEmpty(fieldLabel) && this.isButtonInToolbar('I[Block style label]')) {
103 fieldLabel = this.localize('Block style label');
104 }
105 var dropDownConfiguration = {
106 id: dropDownId,
107 tooltip: this.localize(dropDownId + '-Tooltip'),
108 fieldLabel: fieldLabel,
109 options: [[this.localize('No style'), 'none']],
110 action: 'onChange',
111 storeFields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
112 tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
113 };
114 if (this.pageTSconfiguration) {
115 if (this.pageTSconfiguration.width) {
116 dropDownConfiguration.width = parseInt(this.pageTSconfiguration.width, 10);
117 }
118 if (this.pageTSconfiguration.listWidth) {
119 dropDownConfiguration.listWidth = parseInt(this.pageTSconfiguration.listWidth, 10);
120 }
121 if (this.pageTSconfiguration.maxHeight) {
122 dropDownConfiguration.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
123 }
124 }
125 this.registerDropDown(dropDownConfiguration);
126 return true;
127 },
128 /*
129 * This handler gets called when some block style was selected in the drop-down list
130 */
131 onChange: function (editor, combo, record, index) {
132 var className = combo.getValue();
133 this.editor.focus();
134 var blocks = this.getSelectedBlocks();
135 for (var k = 0; k < blocks.length; ++k) {
136 var parent = blocks[k];
137 while (parent && !HTMLArea.isBlockElement(parent) && parent.nodeName.toLowerCase() != "img") {
138 parent = parent.parentNode;
139 }
140 if (!k) {
141 var tagName = parent.tagName.toLowerCase();
142 }
143 if (parent.tagName.toLowerCase() == tagName) {
144 this.applyClassChange(parent, className);
145 }
146 }
147 },
148 /*
149 * This function applies the class change to the node
150 */
151 applyClassChange: function (node, className) {
152 if (className == "none") {
153 var classNames = node.className.trim().split(" ");
154 for (var i = classNames.length; --i >= 0;) {
155 if (!HTMLArea.reservedClassNames.test(classNames[i])) {
156 HTMLArea.DOM.removeClass(node, classNames[i]);
157 if (node.nodeName.toLowerCase() === "table" && this.getPluginInstance('TableOperations')) {
158 this.getPluginInstance('TableOperations').removeAlternatingClasses(node, classNames[i]);
159 this.getPluginInstance('TableOperations').removeCountingClasses(node, classNames[i]);
160 }
161 break;
162 }
163 }
164 } else {
165 var nodeName = node.nodeName.toLowerCase();
166 if (this.tags && this.tags[nodeName] && this.tags[nodeName].allowedClasses) {
167 if (this.tags[nodeName].allowedClasses.test(className)) {
168 HTMLArea.DOM.addClass(node, className);
169 }
170 } else if (this.tags && this.tags.all && this.tags.all.allowedClasses) {
171 if (this.tags.all.allowedClasses.test(className)) {
172 HTMLArea.DOM.addClass(node, className);
173 }
174 } else {
175 HTMLArea.DOM.addClass(node, className);
176 }
177 if (nodeName === "table" && this.getPluginInstance('TableOperations')) {
178 this.getPluginInstance('TableOperations').reStyleTable(node);
179 }
180 }
181 },
182 /*
183 * This function gets the list of selected blocks
184 */
185 getSelectedBlocks: function () {
186 var block, range, i = 0, blocks = [];
187 var statusBarSelection = this.editor.statusBar ? this.editor.statusBar.getSelection() : null;
188 if (Ext.isGecko) {
189 var selection = this.editor._getSelection();
190 try {
191 while ((range = selection.getRangeAt(i++))) {
192 block = this.editor.getParentElement(selection, range);
193 blocks.push(statusBarSelection ? statusBarSelection : block);
194 }
195 } catch(e) {
196 /* finished walking through selection */
197 }
198 } else {
199 blocks.push(statusBarSelection ? statusBarSelection : this.editor.getParentElement());
200 }
201 return blocks;
202 },
203 /*
204 * This handler gets called when the editor is generated
205 */
206 onGenerate: function () {
207 // Monitor editor changing mode
208 this.editor.iframe.mon(this.editor, 'HTMLAreaEventModeChange', this.onModeChange, this);
209 // Create CSS Parser object
210 this.blockStyles = new HTMLArea.CSS.Parser({
211 prefixLabelWithClassName: this.prefixLabelWithClassName,
212 postfixLabelWithClassName: this.postfixLabelWithClassName,
213 showTagFreeClasses: this.showTagFreeClasses,
214 tags: this.tags,
215 editor: this.editor
216 });
217 // Disable the combo while initialization completes
218 var dropDown = this.getButton('BlockStyle');
219 if (dropDown) {
220 dropDown.setDisabled(true);
221 }
222 // Monitor css parsing being completed
223 this.editor.iframe.mon(this.blockStyles, 'HTMLAreaEventCssParsingComplete', this.onCssParsingComplete, this);
224 this.blockStyles.initiateParsing();
225 },
226 /*
227 * This handler gets called when parsing of css classes is completed
228 */
229 onCssParsingComplete: function () {
230 if (this.blockStyles.isReady) {
231 this.cssArray = this.blockStyles.getClasses();
232 if (this.getEditorMode() === 'wysiwyg' && this.editor.isEditable()) {
233 this.updateValue('BlockStyle');
234 }
235 }
236 },
237 /*
238 * This handler gets called when the toolbar is being updated
239 */
240 onUpdateToolbar: function (button, mode, selectionEmpty, ancestors) {
241 if (mode === 'wysiwyg' && this.editor.isEditable() && this.blockStyles.isReady) {
242 this.updateValue(button.itemId);
243 }
244 },
245 /*
246 * This handler gets called when the editor has changed its mode to "wysiwyg"
247 */
248 onModeChange: function(mode) {
249 if (mode === 'wysiwyg' && this.editor.isEditable()) {
250 this.updateValue('BlockStyle');
251 }
252 },
253 /*
254 * This function updates the current value of the dropdown list
255 */
256 updateValue: function(dropDownId) {
257 var dropDown = this.getButton(dropDownId);
258 if (dropDown) {
259 var classNames = new Array();
260 var tagName = null;
261 var statusBarSelection = this.editor.statusBar ? this.editor.statusBar.getSelection() : null;
262 var parent = statusBarSelection ? statusBarSelection : this.editor.getParentElement();
263 while (parent && !HTMLArea.isBlockElement(parent) && parent.nodeName.toLowerCase() != "img") {
264 parent = parent.parentNode;
265 }
266 if (parent) {
267 tagName = parent.nodeName.toLowerCase();
268 classNames = HTMLArea.DOM.getClassNames(parent);
269 }
270 if (tagName && tagName !== "body"){
271 this.buildDropDownOptions(dropDown, tagName);
272 this.setSelectedOption(dropDown, classNames);
273 } else {
274 this.initializeDropDown(dropDown);
275 dropDown.setDisabled(true);
276 }
277 }
278 },
279 /*
280 * This function reinitializes the options of the dropdown
281 */
282 initializeDropDown: function (dropDown) {
283 var store = dropDown.getStore();
284 store.removeAll(false);
285 store.insert(0, new store.recordType({
286 text: this.localize('No style'),
287 value: 'none'
288 }));
289 dropDown.setValue('none');
290 },
291 /*
292 * This function builds the options to be displayed in the dropDown box
293 */
294 buildDropDownOptions: function (dropDown, nodeName) {
295 var store = dropDown.getStore();
296 this.initializeDropDown(dropDown);
297 if (this.blockStyles.isReady) {
298 var allowedClasses = {};
299 if (Ext.isDefined(this.cssArray[nodeName])) {
300 allowedClasses = this.cssArray[nodeName];
301 } else if (this.showTagFreeClasses && Ext.isDefined(this.cssArray['all'])) {
302 allowedClasses = this.cssArray['all'];
303 }
304 Ext.iterate(allowedClasses, function (cssClass, value) {
305 var style = null;
306 if (!this.editor.config.disablePCexamples) {
307 if (HTMLArea.classesValues[cssClass] && !HTMLArea.classesNoShow[cssClass]) {
308 style = HTMLArea.classesValues[cssClass];
309 } else if (/-[0-9]+$/.test(cssClass) && HTMLArea.classesValues[RegExp.leftContext + '-']) {
310 style = HTMLArea.classesValues[RegExp.leftContext + '-'];
311 }
312 }
313 store.add(new store.recordType({
314 text: value,
315 value: cssClass,
316 style: style
317 }));
318 }, this);
319 }
320 },
321 /*
322 * This function sets the selected option of the dropDown box
323 */
324 setSelectedOption: function (dropDown, classNames, noUnknown, defaultClass) {
325 var store = dropDown.getStore();
326 dropDown.setValue('none');
327 if (classNames.length) {
328 var index = store.findExact('value', classNames[classNames.length-1]);
329 if (index != -1) {
330 dropDown.setValue(classNames[classNames.length-1]);
331 if (!defaultClass) {
332 store.getAt(0).set('text', this.localize('Remove style'));
333 }
334 }
335 if (index == -1 && !noUnknown) {
336 store.add(new store.recordType({
337 text: this.localize('Unknown style'),
338 value: classNames[classNames.length-1]
339 }));
340 index = store.getCount()-1;
341 dropDown.setValue(classNames[classNames.length-1]);
342 if (!defaultClass) {
343 store.getAt(0).set('text', this.localize('Remove style'));
344 }
345 }
346 store.each(function (option) {
347 if (store.indexOf(option) != index && (',' + classNames.join(',') + ',').indexOf(',' + option.get('value') + ',') != -1) {
348 store.removeAt(store.indexOf(option));
349 }
350 return true;
351 });
352 }
353 dropDown.setDisabled(!(store.getCount()>1));
354 }
355 });