← Back to branch summary

~ubuntu-branches/ubuntu/utopic/ldap-account-manager/utopic-proposed

« back to all changes in this revision

Viewing changes to templates/lib/extra/ckeditor/plugins/colorbutton/plugin.js

  • Committer: Package Import Robot
  • Author(s): Roland Gruber
  • Date: 2014-06-12 17:51:20 UTC
  • mfrom: (1.2.24)
  • Revision ID: package-import@ubuntu.com-20140612175120-grobhwyk369g9aod
Tags: 4.6-1
new upstream release

Show diffs side-by-side

added added

removed removed

Lines of Context:
templates/lib/extra/ckeditor/plugins/colorbutton/plugin.js
 
1
/**
 
2
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 
3
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 
4
 */
 
5
 
 
6
/**
 
7
 * @fileOverview The "colorbutton" plugin that makes it possible to assign
 
8
 *               text and background colors to editor contents.
 
9
 *
 
10
 */
 
11
CKEDITOR.plugins.add( 'colorbutton', {
 
12
        requires: 'panelbutton,floatpanel',
 
13
        lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
 
14
        icons: 'bgcolor,textcolor', // %REMOVE_LINE_CORE%
 
15
        hidpi: true, // %REMOVE_LINE_CORE%
 
16
        init: function( editor ) {
 
17
                var config = editor.config,
 
18
                        lang = editor.lang.colorbutton;
 
19
 
 
20
                var clickFn;
 
21
 
 
22
                if ( !CKEDITOR.env.hc ) {
 
23
                        addButton( 'TextColor', 'fore', lang.textColorTitle, 10 );
 
24
                        addButton( 'BGColor', 'back', lang.bgColorTitle, 20 );
 
25
                }
 
26
 
 
27
                function addButton( name, type, title, order ) {
 
28
                        var style = new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ] ),
 
29
                                colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox';
 
30
 
 
31
                        editor.ui.add( name, CKEDITOR.UI_PANELBUTTON, {
 
32
                                label: title,
 
33
                                title: title,
 
34
                                modes: { wysiwyg: 1 },
 
35
                                editorFocus: 0,
 
36
                                toolbar: 'colors,' + order,
 
37
                                allowedContent: style,
 
38
                                requiredContent: style,
 
39
 
 
40
                                panel: {
 
41
                                        css: CKEDITOR.skin.getPath( 'editor' ),
 
42
                                        attributes: { role: 'listbox', 'aria-label': lang.panelTitle }
 
43
                                },
 
44
 
 
45
                                onBlock: function( panel, block ) {
 
46
                                        block.autoSize = true;
 
47
                                        block.element.addClass( 'cke_colorblock' );
 
48
                                        block.element.setHtml( renderColors( panel, type, colorBoxId ) );
 
49
                                        // The block should not have scrollbars (#5933, #6056)
 
50
                                        block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );
 
51
 
 
52
                                        CKEDITOR.ui.fire( 'ready', this );
 
53
 
 
54
                                        var keys = block.keys;
 
55
                                        var rtl = editor.lang.dir == 'rtl';
 
56
                                        keys[ rtl ? 37 : 39 ] = 'next'; // ARROW-RIGHT
 
57
                                        keys[ 40 ] = 'next'; // ARROW-DOWN
 
58
                                        keys[ 9 ] = 'next'; // TAB
 
59
                                        keys[ rtl ? 39 : 37 ] = 'prev'; // ARROW-LEFT
 
60
                                        keys[ 38 ] = 'prev'; // ARROW-UP
 
61
                                        keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB
 
62
                                        keys[ 32 ] = 'click'; // SPACE
 
63
                                },
 
64
 
 
65
                                refresh: function() {
 
66
                                        if ( !editor.activeFilter.check( style ) )
 
67
                                                this.setState( CKEDITOR.TRISTATE_DISABLED );
 
68
                                },
 
69
 
 
70
                                // The automatic colorbox should represent the real color (#6010)
 
71
                                onOpen: function() {
 
72
 
 
73
                                        var selection = editor.getSelection(),
 
74
                                                block = selection && selection.getStartElement(),
 
75
                                                path = editor.elementPath( block ),
 
76
                                                color;
 
77
 
 
78
                                        if ( !path )
 
79
                                                return;
 
80
 
 
81
                                        // Find the closest block element.
 
82
                                        block = path.block || path.blockLimit || editor.document.getBody();
 
83
 
 
84
                                        // The background color might be transparent. In that case, look up the color in the DOM tree.
 
85
                                        do {
 
86
                                                color = block && block.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) || 'transparent';
 
87
                                        }
 
88
                                        while ( type == 'back' && color == 'transparent' && block && ( block = block.getParent() ) );
 
89
 
 
90
                                        // The box should never be transparent.
 
91
                                        if ( !color || color == 'transparent' )
 
92
                                                color = '#ffffff';
 
93
 
 
94
                                        this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', color );
 
95
 
 
96
                                        return color;
 
97
                                }
 
98
                        } );
 
99
                }
 
100
 
 
101
 
 
102
                function renderColors( panel, type, colorBoxId ) {
 
103
                        var output = [],
 
104
                                colors = config.colorButton_colors.split( ',' );
 
105
 
 
106
                        var clickFn = CKEDITOR.tools.addFunction( function( color, type ) {
 
107
                                if ( color == '?' ) {
 
108
                                        var applyColorStyle = arguments.callee;
 
109
 
 
110
                                        function onColorDialogClose( evt ) {
 
111
                                                this.removeListener( 'ok', onColorDialogClose );
 
112
                                                this.removeListener( 'cancel', onColorDialogClose );
 
113
 
 
114
                                                evt.name == 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type );
 
115
                                        }
 
116
 
 
117
                                        editor.openDialog( 'colordialog', function() {
 
118
                                                this.on( 'ok', onColorDialogClose );
 
119
                                                this.on( 'cancel', onColorDialogClose );
 
120
                                        } );
 
121
 
 
122
                                        return;
 
123
                                }
 
124
 
 
125
                                editor.focus();
 
126
 
 
127
                                panel.hide();
 
128
 
 
129
                                editor.fire( 'saveSnapshot' );
 
130
 
 
131
                                // Clean up any conflicting style within the range.
 
132
                                editor.removeStyle( new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ], { color: 'inherit' } ) );
 
133
 
 
134
                                if ( color ) {
 
135
                                        var colorStyle = config[ 'colorButton_' + type + 'Style' ];
 
136
 
 
137
                                        colorStyle.childRule = type == 'back' ?
 
138
                                        function( element ) {
 
139
                                                // It's better to apply background color as the innermost style. (#3599)
 
140
                                                // Except for "unstylable elements". (#6103)
 
141
                                                return isUnstylable( element );
 
142
                                        } : function( element ) {
 
143
                                                // Fore color style must be applied inside links instead of around it. (#4772,#6908)
 
144
                                                return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element );
 
145
                                        };
 
146
 
 
147
                                        editor.applyStyle( new CKEDITOR.style( colorStyle, { color: color } ) );
 
148
                                }
 
149
 
 
150
                                editor.fire( 'saveSnapshot' );
 
151
                        } );
 
152
 
 
153
                        // Render the "Automatic" button.
 
154
                        output.push( '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
 
155
                                ' title="', lang.auto, '"' +
 
156
                                ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +
 
157
                                ' href="javascript:void(\'', lang.auto, '\')"' +
 
158
                                ' role="option">' +
 
159
                                '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
 
160
                                        '<tr>' +
 
161
                                                '<td>' +
 
162
                                                        '<span class="cke_colorbox" id="', colorBoxId, '"></span>' +
 
163
                                                '</td>' +
 
164
                                                '<td colspan=7 align=center>', lang.auto, '</td>' +
 
165
                                        '</tr>' +
 
166
                                '</table>' +
 
167
                                '</a>' +
 
168
                                '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );
 
169
 
 
170
                        // Render the color boxes.
 
171
                        for ( var i = 0; i < colors.length; i++ ) {
 
172
                                if ( ( i % 8 ) === 0 )
 
173
                                        output.push( '</tr><tr>' );
 
174
 
 
175
                                var parts = colors[ i ].split( '/' ),
 
176
                                        colorName = parts[ 0 ],
 
177
                                        colorCode = parts[ 1 ] || colorName;
 
178
 
 
179
                                // The data can be only a color code (without #) or colorName + color code
 
180
                                // If only a color code is provided, then the colorName is the color with the hash
 
181
                                // Convert the color from RGB to RRGGBB for better compatibility with IE and <font>. See #5676
 
182
                                if ( !parts[ 1 ] )
 
183
                                        colorName = '#' + colorName.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' );
 
184
 
 
185
                                var colorLabel = editor.lang.colorbutton.colors[ colorCode ] || colorCode;
 
186
                                output.push( '<td>' +
 
187
                                        '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
 
188
                                                ' title="', colorLabel, '"' +
 
189
                                                ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'', colorName, '\',\'', type, '\'); return false;"' +
 
190
                                                ' href="javascript:void(\'', colorLabel, '\')"' +
 
191
                                                ' role="option">' +
 
192
                                                '<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +
 
193
                                        '</a>' +
 
194
                                        '</td>' );
 
195
                        }
 
196
 
 
197
                        // Render the "More Colors" button.
 
198
                        if ( editor.plugins.colordialog && config.colorButton_enableMore === undefined || config.colorButton_enableMore ) {
 
199
                                output.push( '</tr>' +
 
200
                                        '<tr>' +
 
201
                                                '<td colspan=8 align=center>' +
 
202
                                                        '<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
 
203
                                                                ' title="', lang.more, '"' +
 
204
                                                                ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
 
205
                                                                ' href="javascript:void(\'', lang.more, '\')"', ' role="option">', lang.more, '</a>' +
 
206
                                                '</td>' ); // tr is later in the code.
 
207
                        }
 
208
 
 
209
                        output.push( '</tr></table>' );
 
210
 
 
211
                        return output.join( '' );
 
212
                }
 
213
 
 
214
                function isUnstylable( ele ) {
 
215
                        return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-nostyle' );
 
216
                }
 
217
        }
 
218
} );
 
219
 
 
220
/**
 
221
 * Whether to enable the **More Colors*** button in the color selectors.
 
222
 *
 
223
 *              config.colorButton_enableMore = false;
 
224
 *
 
225
 * @cfg {Boolean} [colorButton_enableMore=true]
 
226
 * @member CKEDITOR.config
 
227
 */
 
228
 
 
229
/**
 
230
 * Defines the colors to be displayed in the color selectors. This is a string
 
231
 * containing hexadecimal notation for HTML colors, without the `'#'` prefix.
 
232
 *
 
233
 * **Since 3.3:** A color name may optionally be defined by prefixing the entries with
 
234
 * a name and the slash character. For example, `'FontColor1/FF9900'` will be
 
235
 * displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.
 
236
 *
 
237
 *              // Brazil colors only.
 
238
 *              config.colorButton_colors = '00923E,F8C100,28166F';
 
239
 *
 
240
 *              config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';
 
241
 *
 
242
 * @cfg {String} [colorButton_colors=see source]
 
243
 * @member CKEDITOR.config
 
244
 */
 
245
CKEDITOR.config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
 
246
        'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
 
247
        'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
 
248
        'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
 
249
        'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
 
250
 
 
251
/**
 
252
 * Stores the style definition that applies the text foreground color.
 
253
 *
 
254
 *              // This is actually the default value.
 
255
 *              config.colorButton_foreStyle = {
 
256
 *                      element: 'span',
 
257
 *                      styles: { color: '#(color)' }
 
258
 *              };
 
259
 *
 
260
 * @cfg [colorButton_foreStyle=see source]
 
261
 * @member CKEDITOR.config
 
262
 */
 
263
CKEDITOR.config.colorButton_foreStyle = {
 
264
        element: 'span',
 
265
        styles: { 'color': '#(color)' },
 
266
        overrides: [ {
 
267
                element: 'font', attributes: { 'color': null }
 
268
        } ]
 
269
};
 
270
 
 
271
/**
 
272
 * Stores the style definition that applies the text background color.
 
273
 *
 
274
 *              // This is actually the default value.
 
275
 *              config.colorButton_backStyle = {
 
276
 *                      element: 'span',
 
277
 *                      styles: { 'background-color': '#(color)' }
 
278
 *              };
 
279
 *
 
280
 * @cfg [colorButton_backStyle=see source]
 
281
 * @member CKEDITOR.config
 
282
 */
 
283
CKEDITOR.config.colorButton_backStyle = {
 
284
        element: 'span',
 
285
        styles: { 'background-color': '#(color)' }
 
286
};