f046e0de894a862757894f7b181cd947a8fe1e10
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / htmlarea / plugins / InsertSmiley / insert-smiley.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2004 Ki Master George <kimastergeorge@gmail.com>
5 * (c) 2005-2012 Stanislas Rolland <typo3(arobas)sjbr.ca>
6 * All rights reserved
7 *
8 * This script is part of the TYPO3 project. The TYPO3 project is
9 * free software; you can redistribute it and/or modify
10 * it under the terms of the GNU General Public License as published by
11 * the Free Software Foundation; either version 2 of the License, or
12 * (at your option) any later version.
13 *
14 * The GNU General Public License can be found at
15 * http://www.gnu.org/copyleft/gpl.html.
16 * A copy is found in the textfile GPL.txt and important notices to the license
17 * from the author is found in LICENSE.txt distributed with these scripts.
18 *
19 *
20 * This script is distributed in the hope that it will be useful,
21 * but WITHOUT ANY WARRANTY; without even the implied warranty of
22 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
23 * GNU General Public License for more details.
24 *
25 * This script is a modified version of a script published under the htmlArea License.
26 * A copy of the htmlArea License may be found in the textfile HTMLAREA_LICENSE.txt.
27 *
28 * This copyright notice MUST APPEAR in all copies of the script!
29 ***************************************************************/
30 /*
31 * Insert Smiley Plugin for TYPO3 htmlArea RTE
32 */
33 HTMLArea.InsertSmiley = Ext.extend(HTMLArea.Plugin, {
34 /*
35 * This function gets called by the class constructor
36 */
37 configurePlugin: function (editor) {
38 this.pageTSConfiguration = this.editorConfiguration.buttons.emoticon;
39 // Default set of imoticons from Mozilla Thunderbird
40 this.icons = [
41 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_smile' + '.png', alt: ':-)', title: this.localize('mozilla_smile')},
42 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_frown' + '.png', alt: ':-(', title: this.localize('mozilla_frown')},
43 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_wink' + '.png', alt: ';-)', title: this.localize('mozilla_wink')},
44 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_tongueout' + '.png', alt: ':-P', title: this.localize('mozilla_tongueout')},
45 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_laughing' + '.png', alt: ':-D', title: this.localize('mozilla_laughing')},
46 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_embarassed' + '.png', alt: ':-[', title: this.localize('mozilla_embarassed')},
47 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_undecided' + '.png', alt: ':-\\', title: this.localize('mozilla_undecided')},
48 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_surprised' + '.png', alt: '=-O', title: this.localize('mozilla_surprised')},
49 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_kiss' + '.png', alt: ':-*', title: this.localize('mozilla_kiss')},
50 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_yell' + '.png', alt: '>:o', title: this.localize('mozilla_yell')},
51 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_cool' + '.png', alt: '8-)', title: this.localize('mozilla_cool')},
52 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_moneyinmouth' + '.png', alt: ':-$', title: this.localize('mozilla_moneyinmouth')},
53 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_footinmouth' + '.png', alt: ':-!', title: this.localize('mozilla_footinmouth')},
54 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_innocent' + '.png', alt: 'O:-)', title: this.localize('mozilla_innocent')},
55 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_cry' + '.png', alt: ':\'(', title: this.localize('mozilla_cry')},
56 { file: HTMLArea.editorUrl + 'plugins/InsertSmiley/smileys/' + 'mozilla_sealed' + '.png', alt: ':-X', title: this.localize('mozilla_sealed')}
57 ];
58 /*
59 * Registering plugin "About" information
60 */
61 var pluginInformation = {
62 version : '2.2',
63 developer : 'Ki Master George & Stanislas Rolland',
64 developerUrl : 'http://www.sjbr.ca/',
65 copyrightOwner : 'Ki Master George & Stanislas Rolland',
66 sponsor : 'Ki Master George & SJBR',
67 sponsorUrl : 'http://www.sjbr.ca/',
68 license : 'GPL'
69 };
70 this.registerPluginInformation(pluginInformation);
71 /*
72 * Registering the button
73 */
74 var buttonId = 'InsertSmiley';
75 var buttonConfiguration = {
76 id : buttonId,
77 tooltip : this.localize('Insert Smiley'),
78 iconCls : 'htmlarea-action-smiley-insert',
79 action : 'onButtonPress',
80 hotKey : (this.pageTSConfiguration ? this.pageTSConfiguration.hotKey : null),
81 dialog : true
82 };
83 this.registerButton(buttonConfiguration);
84 return true;
85 },
86 /*
87 * This function gets called when the button was pressed.
88 *
89 * @param object editor: the editor instance
90 * @param string id: the button id or the key
91 *
92 * @return boolean false if action is completed
93 */
94 onButtonPress: function (editor, id) {
95 // Could be a button or its hotkey
96 var buttonId = this.translateHotKey(id);
97 buttonId = buttonId ? buttonId : id;
98 var dimensions = this.getWindowDimensions({width:216, height:230}, buttonId);
99 this.dialog = new Ext.Window({
100 title: this.localize('Insert Smiley'),
101 cls: 'htmlarea-window',
102 border: false,
103 width: dimensions.width,
104 height: 'auto',
105 iconCls: this.getButton(buttonId).iconCls,
106 listeners: {
107 close: {
108 fn: this.onClose,
109 scope: this
110 }
111 },
112 items: {
113 xtype: 'box',
114 cls: 'emoticon-array',
115 tpl: new Ext.XTemplate(
116 '<tpl for="."><a href="#" class="emoticon" hidefocus="on" ext:qtitle="{alt}" ext:qtip="{title}"><img src="{file}" /></a></tpl>'
117 ),
118 listeners: {
119 render: {
120 fn: this.render,
121 scope: this
122 }
123 }
124 },
125 buttons: [this.buildButtonConfig('Cancel', this.onCancel)]
126 });
127 this.show();
128 },
129 /*
130 * Render the array of emoticon
131 *
132 * @param object component: the box containing the emoticons
133 *
134 * @return void
135 */
136 render: function (component) {
137 component.tpl.overwrite(component.el, this.icons);
138 component.mon(component.el, 'click', this.insertImageTag, this, {delegate: 'a'});
139 },
140 /*
141 * Insert the selected emoticon
142 *
143 * @param object event: the Ext event
144 * @param HTMLelement target: the html element target
145 *
146 * @return void
147 */
148 insertImageTag: function (event, target) {
149 event.stopEvent();
150 this.restoreSelection();
151 var icon = Ext.get(target).first();
152 var imgTag = this.editor.document.createElement('img');
153 imgTag.setAttribute('src', icon.getAttribute('src'));
154 imgTag.setAttribute('alt', target.getAttribute('ext:qtitle'));
155 imgTag.setAttribute('title', target.getAttribute('ext:qtip'));
156 this.editor.getSelection().insertNode(imgTag);
157 if (!Ext.isIE) {
158 this.editor.getSelection().selectNode(imgTag, false);
159 }
160 this.close();
161 return false;
162 }
163 });