597de0656a1d6d7f6968c85a335a6aaaf3c7914a
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / Resources / Public / JavaScript / Plugins / DefinitionList.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 /**
15 * DefinitionList Plugin for TYPO3 htmlArea RTE
16 */
17 define(['TYPO3/CMS/Rtehtmlarea/HTMLArea/Plugin/Plugin',
18 'TYPO3/CMS/Rtehtmlarea/Plugins/BlockElements',
19 'TYPO3/CMS/Rtehtmlarea/HTMLArea/UserAgent/UserAgent',
20 'TYPO3/CMS/Rtehtmlarea/HTMLArea/Util/Util',
21 'TYPO3/CMS/Rtehtmlarea/HTMLArea/DOM/DOM'],
22 function (Plugin, BlockElements, UserAgent, Util, Dom) {
23
24 var DefinitionList = function (editor, pluginName) {
25 this.constructor.super.call(this, editor, pluginName);
26 };
27 Util.inherit(DefinitionList, Plugin);
28 Util.apply(DefinitionList.prototype, {
29
30 /**
31 * This function gets called by the class constructor
32 */
33 configurePlugin: function (editor) {
34
35 /**
36 * Setting up some properties from PageTSConfig
37 */
38 this.buttonsConfiguration = this.editorConfiguration.buttons;
39 this.parentPlugin = this.getPluginInstance('BlockElements');
40 var parentPlugin = this.parentPlugin;
41 this.tags = parentPlugin.tags;
42 this.useClass = parentPlugin.useClass;
43 this.useBlockquote = parentPlugin.useBlockquote;
44 this.useAlignAttribute = parentPlugin.useAlignAttribute;
45 this.allowedBlockElements = parentPlugin.allowedBlockElements;
46 this.indentedList = null;
47 this.standardBlockElements = parentPlugin.standardBlockElements;
48 this.formatBlockItems = parentPlugin.formatBlockItems;
49
50 /**
51 * Registering plugin "About" information
52 */
53 var pluginInformation = {
54 version : '2.0',
55 developer : 'Stanislas Rolland',
56 developerUrl : 'http://www.sjbr.ca/',
57 copyrightOwner : 'Stanislas Rolland',
58 sponsor : this.localize('Technische Universitat Ilmenau'),
59 sponsorUrl : 'http://www.tu-ilmenau.de/',
60 license : 'GPL'
61 };
62 this.registerPluginInformation(pluginInformation);
63
64 /**
65 * Registering the buttons
66 */
67 var button, buttonId;
68 for (var i = 0, n = this.buttonList.length; i < n; i++) {
69 button = this.buttonList[i];
70 buttonId = button[0];
71 var buttonConfiguration = {
72 id : buttonId,
73 tooltip : this.localize(buttonId + '-Tooltip'),
74 contextMenuTitle: this.localize(buttonId + '-contextMenuTitle'),
75 helpText : this.localize(buttonId + '-helpText'),
76 iconCls : 'htmlarea-action-' + button[5],
77 action : 'onButtonPress',
78 context : button[1],
79 hotKey : ((this.buttonsConfiguration[button[3]] && this.buttonsConfiguration[button[3]].hotKey) ? this.buttonsConfiguration[button[3]].hotKey : (button[2] ? button[2] : null)),
80 noAutoUpdate : button[4]
81 };
82 this.registerButton(buttonConfiguration);
83 }
84 return true;
85 },
86
87 /**
88 * The list of buttons added by this plugin
89 */
90 buttonList: [
91 ['Indent', null, 'TAB', 'indent', false, 'indent'],
92 ['Outdent', null, 'SHIFT-TAB', 'outdent', false, 'outdent'],
93 ['DefinitionList', null, null, 'definitionlist', true, 'definition-list'],
94 ['DefinitionItem', 'dd,dt', null, 'definitionitem', false, 'definition-list-item']
95 ],
96
97 /**
98 * This function gets called when the plugin is generated
99 * Avoid re-execution of the base function
100 */
101 onGenerate: Util.emptyFunction,
102
103 /**
104 * This function gets called when a button was pressed.
105 *
106 * @param object editor: the editor instance
107 * @param string id: the button id or the key
108 * @param object target: the target element of the contextmenu event, when invoked from the context menu
109 * @param string className: the className to be assigned to the element
110 *
111 * @return boolean false if action is completed
112 */
113 onButtonPress: function (editor, id, target, className) {
114 // Could be a button or its hotkey
115 var buttonId = this.translateHotKey(id);
116 buttonId = buttonId ? buttonId : id;
117 var range = this.editor.getSelection().createRange();
118 var statusBarSelection = this.editor.statusBar ? this.editor.statusBar.getSelection() : null;
119 var parentElement = statusBarSelection ? statusBarSelection : this.editor.getSelection().getParentElement();
120 if (target) {
121 parentElement = target;
122 }
123 while (parentElement && (!Dom.isBlockElement(parentElement) || /^(li)$/i.test(parentElement.nodeName))) {
124 parentElement = parentElement.parentNode;
125 }
126 switch (buttonId) {
127 case 'Indent' :
128 if (/^(dd|dt)$/i.test(parentElement.nodeName) && this.indentDefinitionList(parentElement)) {
129 break;
130 } else {
131 this.parentPlugin.onButtonPress(editor, id, target, className);
132 }
133 break;
134 case 'Outdent' :
135 if (/^(dt)$/i.test(parentElement.nodeName) && this.outdentDefinitionList()) {
136 break;
137 } else {
138 this.parentPlugin.onButtonPress(editor, id, target, className);
139 }
140 break;
141 case 'DefinitionList':
142 var bookmark = this.editor.getBookMark().get(range);
143 this.insertDefinitionList();
144 this.editor.getSelection().selectRange(this.editor.getBookMark().moveTo(bookmark));
145 break;
146 case 'DefinitionItem':
147 var bookmark = this.editor.getBookMark().get(range);
148 this.remapNode(parentElement, (parentElement.nodeName.toLowerCase() === 'dt') ? 'dd' : 'dt');
149 this.editor.getSelection().selectRange(this.editor.getBookMark().moveTo(bookmark));
150 break;
151 default:
152 this.parentPlugin.onButtonPress(editor, id, target, className);
153 }
154 return false;
155 },
156
157 /**
158 * This function remaps a node to the specified node name
159 */
160 remapNode: function (node, nodeName) {
161 var newNode = Dom.convertNode(node, nodeName);
162 var attributes = node.attributes, attributeName, attributeValue;
163 for (var i = attributes.length; --i >= 0;) {
164 attributeName = attributes.item(i).nodeName;
165 attributeValue = node.getAttribute(attributeName);
166 if (attributeValue) newNode.setAttribute(attributeName, attributeValue);
167 }
168 if (this.tags && this.tags[nodeName] && this.tags[nodeName].allowedClasses) {
169 if (newNode.className && /\S/.test(newNode.className)) {
170 var allowedClasses = this.tags[nodeName].allowedClasses;
171 var classNames = newNode.className.trim().split(' ');
172 for (var i = classNames.length; --i >= 0;) {
173 if (!allowedClasses.test(classNames[i])) {
174 Dom.removeClass(newNode, classNames[i]);
175 }
176 }
177 }
178 }
179 return newNode;
180 },
181
182 /**
183 * Insert a definition list
184 */
185 insertDefinitionList: function () {
186 var endBlocks = this.editor.getSelection().getEndBlocks();
187 var list = null;
188 if (this.editor.getSelection().isEmpty()) {
189 if (/^(body|div|address|pre|blockquote|li|td|dd)$/i.test(endBlocks.start.nodeName)) {
190 list = this.editor.document.createElement('dl');
191 var term = list.appendChild(this.editor.document.createElement('dt'));
192 while (endBlocks.start.firstChild) {
193 term.appendChild(endBlocks.start.firstChild);
194 }
195 list = endBlocks.start.appendChild(list);
196 } else if (/^(p|h[1-6])$/i.test(endBlocks.start.nodeName)) {
197 var list = endBlocks.start.parentNode.insertBefore(this.editor.document.createElement('dl'), endBlocks.start);
198 endBlocks.start = list.appendChild(endBlocks.start);
199 endBlocks.start = this.remapNode(endBlocks.start, 'dt');
200 }
201 } else if (endBlocks.start != endBlocks.end && /^(p|h[1-6])$/i.test(endBlocks.start.nodeName)) {
202 // We wrap the selected elements in a dl element
203 var paragraphs = endBlocks.start.nodeName.toLowerCase() === 'p';
204 list = this.parentPlugin.wrapSelectionInBlockElement('dl');
205 var items = list.childNodes;
206 for (var i = 0, n = items.length; i < n; ++i) {
207 var paragraphItem = items[i].nodeName.toLowerCase() === 'p';
208 this.remapNode(items[i], paragraphs ? ((i % 2) ? 'dd' : 'dt') : (paragraphItem ? 'dd' : 'dt'));
209 }
210 }
211 return list;
212 },
213
214 /**
215 * Indent a definition list
216 */
217 indentDefinitionList: function (parentElement) {
218 var range = this.editor.getSelection().createRange();
219 var endBlocks = this.editor.getSelection().getEndBlocks();
220 if (this.editor.getSelection().isEmpty() && /^dd$/i.test(parentElement.nodeName)) {
221 var list = parentElement.appendChild(this.editor.document.createElement('dl'));
222 var term = list.appendChild(this.editor.document.createElement('dt'));
223 if (UserAgent.isWebKit) {
224 term.innerHTML = '<br />';
225 } else {
226 term.appendChild(this.editor.document.createTextNode(''));
227 }
228 this.editor.getSelection().selectNodeContents(term, false);
229 return true;
230 } else if (endBlocks.start && /^dt$/i.test(endBlocks.start.nodeName) && endBlocks.start.previousSibling) {
231 var sibling = endBlocks.start.previousSibling;
232 var bookmark = this.editor.getBookMark().get(range);
233 if (/^dd$/i.test(sibling.nodeName)) {
234 var list = this.parentPlugin.wrapSelectionInBlockElement('dl');
235 list = sibling.appendChild(list);
236 // May need to merge the list if it has a previous sibling
237 if (list.previousSibling && /^dl$/i.test(list.previousSibling.nodeName)) {
238 while (list.firstChild) {
239 list.previousSibling.appendChild(list.firstChild);
240 }
241 Dom.removeFromParent(list);
242 }
243 } else if (/^dt$/i.test(sibling.nodeName)) {
244 var definition = this.editor.document.createElement('dd');
245 definition.appendChild(this.parentPlugin.wrapSelectionInBlockElement('dl'));
246 sibling.parentNode.insertBefore(definition, sibling.nextSibling);
247 }
248 this.editor.getSelection().selectRange(this.editor.getBookMark().moveTo(bookmark));
249 return true;
250 }
251 return false;
252 },
253
254 /**
255 * Outdent a definition list
256 */
257 outdentDefinitionList: function () {
258 var endBlocks = this.editor.getSelection().getEndBlocks();
259 if (/^dt$/i.test(endBlocks.start.nodeName)
260 && /^dl$/i.test(endBlocks.start.parentNode.nodeName)
261 && /^dd$/i.test(endBlocks.start.parentNode.parentNode.nodeName)
262 && !endBlocks.end.nextSibling) {
263 var bookmark = this.editor.getBookMark().get(this.editor.getSelection().createRange());
264 var dl = endBlocks.start.parentNode;
265 var dd = dl.parentNode;
266 if (this.editor.getSelection().isEmpty()) {
267 dd.parentNode.insertBefore(endBlocks.start, dd.nextSibling);
268 } else {
269 var selected = this.parentPlugin.wrapSelectionInBlockElement('dl');
270 while (selected.lastChild) {
271 dd.parentNode.insertBefore(selected.lastChild, dd.nextSibling);
272 }
273 selected.parentNode.removeChild(selected);
274 }
275 // We may have outdented all the child nodes of a list
276 if (!dl.hasChildNodes()) {
277 dd.removeChild(dl);
278 if (!dd.hasChildNodes()) {
279 dd.parentNode.removeChild(dd);
280 }
281 }
282 this.editor.getSelection().selectRange(this.editor.getBookMark().moveTo(bookmark));
283 return true;
284 }
285 return false;
286 },
287
288 /**
289 * This function gets called when the toolbar is updated
290 */
291 onUpdateToolbar: function (button, mode, selectionEmpty, ancestors) {
292 var editor = this.editor;
293 if (mode === 'wysiwyg' && this.editor.isEditable()) {
294 var statusBarSelection = editor.statusBar ? editor.statusBar.getSelection() : null;
295 var parentElement = statusBarSelection ? statusBarSelection : editor.getSelection().getParentElement();
296 if (!/^(body)$/i.test(parentElement.nodeName)) {
297 var endBlocks = editor.getSelection().getEndBlocks();
298 switch (button.itemId) {
299 case 'Outdent':
300 if (/^(dt)$/i.test(endBlocks.start.nodeName)
301 && /^(dl)$/i.test(endBlocks.start.parentNode.nodeName)
302 && /^(dd)$/i.test(endBlocks.start.parentNode.parentNode.nodeName)
303 && !endBlocks.end.nextSibling) {
304 button.setDisabled(false);
305 } else {
306 this.parentPlugin.onUpdateToolbar(button, mode, selectionEmpty, ancestors);
307 }
308 break;
309 case 'DefinitionList':
310 button.setDisabled(!(selectionEmpty && /^(p|div|address|pre|blockquote|h[1-6]|li|td|dd)$/i.test(endBlocks.start.nodeName))
311 && !(endBlocks.start != endBlocks.end && /^(p|h[1-6])$/i.test(endBlocks.start.nodeName)));
312 break;
313 }
314 } else {
315 switch (button.itemId) {
316 case 'Outdent':
317 this.parentPlugin.onUpdateToolbar(button, mode, selectionEmpty, ancestors);
318 break;
319 }
320 }
321 }
322 }
323 });
324
325 return DefinitionList;
326
327 });