9ed4734e41e79587579c1459c9e05c279d855f54
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / Resources / Public / JavaScript / Plugins / block-style.js
1 /**
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13 /*
14 * Block Style Plugin for TYPO3 htmlArea RTE
15 */
16 HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
17 /*
18 * This function gets called by the class constructor
19 */
20 configurePlugin: function (editor) {
21 this.cssArray = {};
22 this.classesUrl = this.editorConfiguration.classesUrl;
23 this.pageTSconfiguration = this.editorConfiguration.buttons.blockstyle;
24 this.tags = (this.pageTSconfiguration && this.pageTSconfiguration.tags) ? this.pageTSconfiguration.tags : {};
25 var allowedClasses;
26 for (var tagName in this.tags) {
27 if (this.tags.hasOwnProperty(tagName)) {
28 if (this.tags[tagName].allowedClasses) {
29 allowedClasses = this.tags[tagName].allowedClasses.trim().split(",");
30 for (var cssClass in allowedClasses) {
31 if (allowedClasses.hasOwnProperty(cssClass)) {
32 allowedClasses[cssClass] = allowedClasses[cssClass].trim().replace(/\*/g, ".*");
33 }
34 }
35 this.tags[tagName].allowedClasses = new RegExp( "^(" + allowedClasses.join("|") + ")$", "i");
36 }
37 }
38 }
39 this.showTagFreeClasses = this.pageTSconfiguration ? this.pageTSconfiguration.showTagFreeClasses : false;
40 this.prefixLabelWithClassName = this.pageTSconfiguration ? this.pageTSconfiguration.prefixLabelWithClassName : false;
41 this.postfixLabelWithClassName = this.pageTSconfiguration ? this.pageTSconfiguration.postfixLabelWithClassName : false;
42 /*
43 * Registering plugin "About" information
44 */
45 var pluginInformation = {
46 version : '3.0',
47 developer : 'Stanislas Rolland',
48 developerUrl : 'http://www.sjbr.ca/',
49 copyrightOwner : 'Stanislas Rolland',
50 sponsor : this.localize('Technische Universitat Ilmenau'),
51 sponsorUrl : 'http://www.tu-ilmenau.de/',
52 license : 'GPL'
53 };
54 this.registerPluginInformation(pluginInformation);
55 /*
56 * Registering the drop-down list
57 */
58 var dropDownId = 'BlockStyle';
59 var fieldLabel = this.pageTSconfiguration ? this.pageTSconfiguration.fieldLabel : '';
60 if ((typeof fieldLabel !== 'string' || !fieldLabel.length) && this.isButtonInToolbar('I[Block style label]')) {
61 fieldLabel = this.localize('Block style label');
62 }
63 var dropDownConfiguration = {
64 id: dropDownId,
65 tooltip: this.localize(dropDownId + '-Tooltip'),
66 fieldLabel: fieldLabel,
67 options: [[this.localize('No style'), 'none']],
68 action: 'onChange',
69 storeFields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
70 tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
71 };
72 if (this.pageTSconfiguration) {
73 if (this.pageTSconfiguration.width) {
74 dropDownConfiguration.width = parseInt(this.pageTSconfiguration.width, 10);
75 }
76 if (this.pageTSconfiguration.listWidth) {
77 dropDownConfiguration.listWidth = parseInt(this.pageTSconfiguration.listWidth, 10);
78 }
79 if (this.pageTSconfiguration.maxHeight) {
80 dropDownConfiguration.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
81 }
82 }
83 this.registerDropDown(dropDownConfiguration);
84 return true;
85 },
86 /*
87 * This handler gets called when some block style was selected in the drop-down list
88 */
89 onChange: function (editor, combo, record, index) {
90 var className = combo.getValue();
91 this.editor.focus();
92 var blocks = this.editor.getSelection().getElements();
93 for (var k = 0; k < blocks.length; ++k) {
94 var parent = blocks[k];
95 while (parent && !HTMLArea.DOM.isBlockElement(parent) && !/^(img)$/i.test(parent.nodeName)) {
96 parent = parent.parentNode;
97 }
98 if (!k) {
99 var tagName = parent.tagName.toLowerCase();
100 }
101 if (parent.tagName.toLowerCase() == tagName) {
102 this.applyClassChange(parent, className);
103 }
104 }
105 },
106 /*
107 * This function applies the class change to the node
108 */
109 applyClassChange: function (node, className) {
110 if (className == "none") {
111 var classNames = node.className.trim().split(" ");
112 for (var i = classNames.length; --i >= 0;) {
113 if (!HTMLArea.reservedClassNames.test(classNames[i])) {
114 HTMLArea.DOM.removeClass(node, classNames[i]);
115 if (node.nodeName.toLowerCase() === "table" && this.getPluginInstance('TableOperations')) {
116 this.getPluginInstance('TableOperations').removeAlternatingClasses(node, classNames[i]);
117 this.getPluginInstance('TableOperations').removeCountingClasses(node, classNames[i]);
118 }
119 break;
120 }
121 }
122 } else {
123 var nodeName = node.nodeName.toLowerCase();
124 if (this.tags && this.tags[nodeName] && this.tags[nodeName].allowedClasses) {
125 if (this.tags[nodeName].allowedClasses.test(className)) {
126 HTMLArea.DOM.addClass(node, className);
127 }
128 } else if (this.tags && this.tags.all && this.tags.all.allowedClasses) {
129 if (this.tags.all.allowedClasses.test(className)) {
130 HTMLArea.DOM.addClass(node, className);
131 }
132 } else {
133 HTMLArea.DOM.addClass(node, className);
134 }
135 if (nodeName === "table" && this.getPluginInstance('TableOperations')) {
136 this.getPluginInstance('TableOperations').reStyleTable(node);
137 }
138 }
139 },
140 /**
141 * This handler gets called when the editor is generated
142 */
143 onGenerate: function () {
144 // Monitor editor changing mode
145 this.editor.iframe.mon(this.editor, 'HTMLAreaEventModeChange', this.onModeChange, this);
146 // Create CSS Parser object
147 this.blockStyles = new HTMLArea.CSS.Parser({
148 prefixLabelWithClassName: this.prefixLabelWithClassName,
149 postfixLabelWithClassName: this.postfixLabelWithClassName,
150 showTagFreeClasses: this.showTagFreeClasses,
151 tags: this.tags,
152 editor: this.editor
153 });
154 // Disable the combo while initialization completes
155 var dropDown = this.getButton('BlockStyle');
156 if (dropDown) {
157 dropDown.setDisabled(true);
158 }
159 // Monitor css parsing being completed
160 this.editor.iframe.mon(this.blockStyles, 'HTMLAreaEventCssParsingComplete', this.onCssParsingComplete, this);
161 this.blockStyles.parse();
162 },
163 /*
164 * This handler gets called when parsing of css classes is completed
165 */
166 onCssParsingComplete: function () {
167 if (this.blockStyles.isReady()) {
168 this.cssArray = this.blockStyles.getClasses();
169 if (this.getEditorMode() === 'wysiwyg' && this.editor.isEditable()) {
170 this.updateValue('BlockStyle');
171 }
172 }
173 },
174 /*
175 * This handler gets called when the toolbar is being updated
176 */
177 onUpdateToolbar: function (button, mode, selectionEmpty, ancestors) {
178 if (mode === 'wysiwyg' && this.editor.isEditable() && this.blockStyles.isReady()) {
179 this.updateValue(button.itemId);
180 }
181 },
182 /*
183 * This handler gets called when the editor has changed its mode to "wysiwyg"
184 */
185 onModeChange: function(mode) {
186 if (mode === 'wysiwyg' && this.editor.isEditable()) {
187 this.updateValue('BlockStyle');
188 }
189 },
190 /*
191 * This function updates the current value of the dropdown list
192 */
193 updateValue: function(dropDownId) {
194 var dropDown = this.getButton(dropDownId);
195 if (dropDown) {
196 var classNames = new Array();
197 var nodeName = '';
198 var statusBarSelection = this.editor.statusBar ? this.editor.statusBar.getSelection() : null;
199 var parent = statusBarSelection ? statusBarSelection : this.editor.getSelection().getParentElement();
200 while (parent && !HTMLArea.DOM.isBlockElement(parent) && !/^(img)$/i.test(parent.nodeName)) {
201 parent = parent.parentNode;
202 }
203 if (parent) {
204 nodeName = parent.nodeName.toLowerCase();
205 classNames = HTMLArea.DOM.getClassNames(parent);
206 }
207 if (nodeName && nodeName !== 'body'){
208 this.buildDropDownOptions(dropDown, nodeName);
209 this.setSelectedOption(dropDown, classNames);
210 } else {
211 this.initializeDropDown(dropDown);
212 dropDown.setDisabled(true);
213 }
214 }
215 },
216 /*
217 * This function reinitializes the options of the dropdown
218 */
219 initializeDropDown: function (dropDown) {
220 var store = dropDown.getStore();
221 store.removeAll(false);
222 store.insert(0, new store.recordType({
223 text: this.localize('No style'),
224 value: 'none'
225 }));
226 dropDown.setValue('none');
227 },
228 /*
229 * This function builds the options to be displayed in the dropDown box
230 */
231 buildDropDownOptions: function (dropDown, nodeName) {
232 var store = dropDown.getStore();
233 this.initializeDropDown(dropDown);
234 if (this.blockStyles.isReady()) {
235 var allowedClasses = {};
236 if (typeof this.cssArray[nodeName] !== 'undefined') {
237 allowedClasses = this.cssArray[nodeName];
238 } else if (this.showTagFreeClasses && typeof this.cssArray['all'] !== 'undefined') {
239 allowedClasses = this.cssArray['all'];
240 }
241 for (var cssClass in allowedClasses) {
242 if (typeof HTMLArea.classesSelectable[cssClass] === 'undefined' || HTMLArea.classesSelectable[cssClass]) {
243 var style = null;
244 if (!this.pageTSconfiguration.disableStyleOnOptionLabel) {
245 if (HTMLArea.classesValues[cssClass] && !HTMLArea.classesNoShow[cssClass]) {
246 style = HTMLArea.classesValues[cssClass];
247 } else if (/-[0-9]+$/.test(cssClass) && HTMLArea.classesValues[RegExp.leftContext + '-']) {
248 style = HTMLArea.classesValues[RegExp.leftContext + '-'];
249 }
250 }
251 store.add(new store.recordType({
252 text: allowedClasses[cssClass],
253 value: cssClass,
254 style: style
255 }));
256 }
257 }
258 }
259 },
260 /*
261 * This function sets the selected option of the dropDown box
262 */
263 setSelectedOption: function (dropDown, classNames, noUnknown, defaultClass) {
264 var store = dropDown.getStore();
265 dropDown.setValue('none');
266 if (classNames.length) {
267 var index = store.findExact('value', classNames[classNames.length-1]);
268 if (index !== -1) {
269 dropDown.setValue(classNames[classNames.length-1]);
270 if (!defaultClass) {
271 store.getAt(0).set('text', this.localize('Remove style'));
272 }
273 }
274 if (index === -1 && !noUnknown) {
275 var text = this.localize('Unknown style');
276 var value = classNames[classNames.length-1];
277 if (typeof HTMLArea.classesSelectable[value] !== 'undefined' && !HTMLArea.classesSelectable[value] && typeof HTMLArea.classesLabels[value] !== 'undefined') {
278 text = HTMLArea.classesLabels[value];
279 }
280 store.add(new store.recordType({
281 text: text,
282 value: value,
283 style: (!(this.pageTSconfiguration && this.pageTSconfiguration.disableStyleOnOptionLabel) && HTMLArea.classesValues && HTMLArea.classesValues[value] && !HTMLArea.classesNoShow[value]) ? HTMLArea.classesValues[value] : null
284 }));
285 dropDown.setValue(value);
286 if (!defaultClass) {
287 store.getAt(0).set('text', this.localize('Remove style'));
288 }
289 }
290 // Remove already assigned classes from the dropDown box
291 var classNamesString = ',' + classNames.join(',') + ',';
292 var selectedValue = dropDown.getValue(), optionValue;
293 store.each(function (option) {
294 optionValue = option.get('value');
295 if (classNamesString.indexOf(',' + optionValue + ',') !== -1 && optionValue !== selectedValue) {
296 store.removeAt(store.indexOf(option));
297 }
298 return true;
299 });
300 }
301 dropDown.setDisabled(!store.getCount() || (store.getCount() == 1 && dropDown.getValue() == 'none'));
302 }
303 });