]>
git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blob - sources/core/skin.js
290157d4bdc9008c108506e5f2056131a940266c
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
7 * @fileOverview Defines the {@link CKEDITOR.skin} class that is used to manage skin parts.
14 return CKEDITOR
.skinName
.split( ',' )[ 0 ];
17 function getConfigPath() {
18 return CKEDITOR
.getUrl( CKEDITOR
.skinName
.split( ',' )[ 1 ] || ( 'skins/' + getName() + '/' ) );
22 * Manages the loading of skin parts among all editor instances.
29 * Returns the root path to the skin directory.
37 * Loads a skin part into the page. Does nothing if the part has already been loaded.
39 * **Note:** The "editor" part is always auto loaded upon instance creation,
40 * thus this function is mainly used to **lazy load** other parts of the skin
41 * that do not have to be displayed until requested.
43 * // Load the dialog part.
44 * editor.skin.loadPart( 'dialog' );
46 * @param {String} part The name of the skin part CSS file that resides in the skin directory.
47 * @param {Function} fn The provided callback function which is invoked after the part is loaded.
49 loadPart: function( part
, fn
) {
50 if ( CKEDITOR
.skin
.name
!= getName() ) {
51 CKEDITOR
.scriptLoader
.load( CKEDITOR
.getUrl( getConfigPath() + 'skin.js' ), function() {
60 * Retrieves the real URL of a (CSS) skin part.
62 * @param {String} part
64 getPath: function( part
) {
65 return CKEDITOR
.getUrl( getCssPath( part
) );
69 * The list of registered icons. To add new icons to this list, use {@link #addIcon}.
76 * @param {String} name The icon name.
77 * @param {String} path The path to the icon image file.
78 * @param {Number} [offset] The vertical offset position of the icon, if
79 * available inside a strip image.
80 * @param {String} [bgsize] The value of the CSS "background-size" property to
83 addIcon: function( name
, path
, offset
, bgsize
) {
84 name
= name
.toLowerCase();
85 if ( !this.icons
[ name
] ) {
86 this.icons
[ name
] = {
89 bgsize: bgsize
|| '16px'
95 * Gets the CSS background styles to be used to render a specific icon.
97 * @param {String} name The icon name, as registered with {@link #addIcon}.
98 * @param {Boolean} [rtl] Indicates that the RTL version of the icon is
99 * to be used, if available.
100 * @param {String} [overridePath] The path to the icon image file. It
101 * overrides the path defined by the named icon, if available, and is
102 * used if the named icon was not registered.
103 * @param {Number} [overrideOffset] The vertical offset position of the
104 * icon. It overrides the offset defined by the named icon, if
105 * available, and is used if the named icon was not registered.
106 * @param {String} [overrideBgsize] The value of the CSS "background-size" property
107 * to use for the icon. It overrides the value defined by the named icon,
108 * if available, and is used if the named icon was not registered.
110 getIconStyle: function( name
, rtl
, overridePath
, overrideOffset
, overrideBgsize
) {
111 var icon
, path
, offset
, bgsize
;
114 name
= name
.toLowerCase();
115 // If we're in RTL, try to get the RTL version of the icon.
117 icon
= this.icons
[ name
+ '-rtl' ];
119 // If not in LTR or no RTL version available, get the generic one.
121 icon
= this.icons
[ name
];
124 path
= overridePath
|| ( icon
&& icon
.path
) || '';
125 offset
= overrideOffset
|| ( icon
&& icon
.offset
);
126 bgsize
= overrideBgsize
|| ( icon
&& icon
.bgsize
) || '16px';
128 // If we use apostrophes in background-image, we must escape apostrophes in path (just to be sure). (http://dev.ckeditor.com/ticket/13361)
130 path
= path
.replace( /'/g, '\\\'' );
133 ( 'background
-image:url(\'' + CKEDITOR.getUrl( path ) + '\');background
-position:0 ' + offset + 'px
;background
-size:' + bgsize + ';' );
137 function getCssPath( part ) {
138 // Check for ua-specific version of skin part.
139 var uas = CKEDITOR.skin[ 'ua_
' + part ], env = CKEDITOR.env;
142 // Having versioned UA checked first.
143 uas = uas.split( ',' ).sort( function( a, b ) {
144 return a > b ? -1 : 1;
147 // Loop through all ua entries, checking is any of them match the current ua.
148 for ( var i = 0, ua; i < uas.length; i++ ) {
152 if ( ( ua.replace( /^ie/, '' ) == env.version ) || ( env.quirks && ua == 'iequirks
' ) )
157 part += '_
' + uas[ i ];
162 return CKEDITOR.getUrl( getConfigPath() + part + '.css
' );
165 function loadCss( part, callback ) {
167 if ( !cssLoaded[ part ] ) {
168 CKEDITOR.document.appendStyleSheet( getCssPath( part ) );
169 cssLoaded[ part ] = 1;
172 // CSS loading should not be blocking.
173 callback && callback();
176 CKEDITOR.tools.extend( CKEDITOR.editor.prototype, {
177 /** Gets the color of the editor user interface.
179 * CKEDITOR.instances.editor1.getUiColor();
182 * @member CKEDITOR.editor
183 * @returns {String} uiColor The editor UI color or `undefined` if the UI color is not set.
185 getUiColor: function() {
189 /** Sets the color of the editor user interface. This method accepts a color value in
190 * hexadecimal notation, with a `#` character (e.g. #ffffff).
192 * CKEDITOR.instances.editor1.setUiColor( '#ff00ff
' );
195 * @member CKEDITOR.editor
196 * @param {String} color The desired editor UI color in hexadecimal notation.
198 setUiColor: function( color ) {
199 var uiStyle = getStylesheet( CKEDITOR.document );
201 return ( this.setUiColor = function( color ) {
202 this.uiColor = color;
204 var chameleon = CKEDITOR.skin.chameleon,
205 editorStyleContent = '',
206 panelStyleContent = '';
208 if ( typeof chameleon == 'function' ) {
209 editorStyleContent = chameleon( this, 'editor
' );
210 panelStyleContent = chameleon( this, 'panel
' );
213 var replace = [ [ uiColorRegexp, color ] ];
215 // Update general style.
216 updateStylesheets( [ uiStyle ], editorStyleContent, replace );
218 // Update panel styles.
219 updateStylesheets( uiColorMenus, panelStyleContent, replace );
220 } ).call( this, color );
224 var uiColorStylesheetId = 'cke_ui_color
',
226 uiColorRegexp = /\$color/g;
228 function getStylesheet( document ) {
229 var node = document.getById( uiColorStylesheetId );
231 node = document.getHead().append( 'style
' );
232 node.setAttribute( 'id
', uiColorStylesheetId );
233 node.setAttribute( 'type
', 'text
/css
' );
238 function updateStylesheets( styleNodes, styleContent, replace ) {
241 // We have to split CSS declarations for webkit.
242 if ( CKEDITOR.env.webkit ) {
243 styleContent = styleContent.split( '}' ).slice( 0, -1 );
244 for ( i = 0; i < styleContent.length; i++ )
245 styleContent[ i ] = styleContent[ i ].split( '{' );
248 for ( var id = 0; id < styleNodes.length; id++ ) {
249 if ( CKEDITOR.env.webkit ) {
250 for ( i = 0; i < styleContent.length; i++ ) {
251 content = styleContent[ i ][ 1 ];
252 for ( r = 0; r < replace.length; r++ )
253 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
255 styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );
258 content = styleContent;
259 for ( r = 0; r < replace.length; r++ )
260 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
262 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 11 )
263 styleNodes[ id ].$.styleSheet.cssText += content;
265 styleNodes[ id ].$.innerHTML += content;
270 CKEDITOR.on( 'instanceLoaded
', function( evt ) {
271 // The chameleon feature is not for IE quirks.
272 if ( CKEDITOR.env.ie && CKEDITOR.env.quirks )
275 var editor = evt.editor,
276 showCallback = function( event ) {
277 var panel = event.data[ 0 ] || event.data;
278 var iframe = panel.element.getElementsByTag( 'iframe
' ).getItem( 0 ).getFrameDocument();
280 // Add stylesheet if missing.
281 if ( !iframe.getById( 'cke_ui_color
' ) ) {
282 var node = getStylesheet( iframe );
283 uiColorMenus.push( node );
285 var color = editor.getUiColor();
286 // Set uiColor for new panel.
288 updateStylesheets( [ node ], CKEDITOR.skin.chameleon( editor, 'panel
' ), [ [ uiColorRegexp, color ] ] );
293 editor.on( 'panelShow
', showCallback );
294 editor.on( 'menuShow
', showCallback );
296 // Apply UI color if specified in config.
297 if ( editor.config.uiColor )
298 editor.setUiColor( editor.config.uiColor );
303 * The list of file names matching the browser user agent string from
304 * {@link CKEDITOR.env}. This is used to load the skin part file in addition
305 * to the "main" skin file for a particular browser.
307 * **Note:** For each of the defined skin parts the corresponding
308 * CSS file with the same name as the user agent must exist inside
309 * the skin directory.
316 * The name of the skin that is currently used.
318 * @property {String} name
323 * The editor skin name. Note that it is not possible to have editors with
324 * different skin settings in the same page. In such case just one of the
325 * skins will be used for all editors.
327 * This is a shortcut to {@link CKEDITOR#skinName}.
329 * It is possible to install skins outside the default `skin` folder in the
330 * editor installation. In that case, the absolute URL path to that folder
331 * should be provided, separated by a comma (`'skin_name
,skin_path
'`).
333 * config.skin = 'moono
';
335 * config.skin = 'myskin
,/customstuff/myskin/';
338 * @member CKEDITOR.config
342 * A function that supports the chameleon (skin color switch) feature, providing
343 * the skin color style updates to be applied in runtime.
345 * **Note:** The embedded `$color` variable is to be substituted with a specific UI color.
348 * @param {String} editor The editor instance that the color changes apply to.
349 * @param {String} part The name of the skin part where the color changes take place.