sources/plugins/dialogadvtab/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 ( function() {
   7
   8         function setupAdvParams( element ) {
   9                 var attrName = this.att;
  10
  11                 var value = element && element.hasAttribute( attrName ) && element.getAttribute( attrName ) || '';
  12
  13                 if ( value !== undefined )
  14                         this.setValue( value );
  15         }
  16
  17         function commitAdvParams() {
  18                 // Dialogs may use different parameters in the commit list, so, by
  19                 // definition, we take the first CKEDITOR.dom.element available.
  20                 var element;
  21
  22                 for ( var i = 0; i < arguments.length; i++ ) {
  23                         if ( arguments[ i ] instanceof CKEDITOR.dom.element ) {
  24                                 element = arguments[ i ];
  25                                 break;
  26                         }
  27                 }
  28
  29                 if ( element ) {
  30                         var attrName = this.att,
  31                                 value = this.getValue();
  32
  33                         if ( value )
  34                                 element.setAttribute( attrName, value );
  35                         else
  36                                 element.removeAttribute( attrName, value );
  37                 }
  38         }
  39
  40         var defaultTabConfig = { id: 1, dir: 1, classes: 1, styles: 1 };
  41
  42         CKEDITOR.plugins.add( 'dialogadvtab', {
  43                 requires: 'dialog',
  44
  45                 // Returns allowed content rule for the content created by this plugin.
  46                 allowedContent: function( tabConfig ) {
  47                         if ( !tabConfig )
  48                                 tabConfig = defaultTabConfig;
  49
  50                         var allowedAttrs = [];
  51                         if ( tabConfig.id )
  52                                 allowedAttrs.push( 'id' );
  53                         if ( tabConfig.dir )
  54                                 allowedAttrs.push( 'dir' );
  55
  56                         var allowed = '';
  57
  58                         if ( allowedAttrs.length )
  59                                 allowed += '[' + allowedAttrs.join( ',' ) +  ']';
  60
  61                         if ( tabConfig.classes )
  62                                 allowed += '(*)';
  63                         if ( tabConfig.styles )
  64                                 allowed += '{*}';
  65
  66                         return allowed;
  67                 },
  68
  69                 // @param tabConfig
  70                 // id, dir, classes, styles
  71                 createAdvancedTab: function( editor, tabConfig, element ) {
  72                         if ( !tabConfig )
  73                                 tabConfig = defaultTabConfig;
  74
  75                         var lang = editor.lang.common;
  76
  77                         var result = {
  78                                 id: 'advanced',
  79                                 label: lang.advancedTab,
  80                                 title: lang.advancedTab,
  81                                 elements: [ {
  82                                         type: 'vbox',
  83                                         padding: 1,
  84                                         children: []
  85                                 } ]
  86                         };
  87
  88                         var contents = [];
  89
  90                         if ( tabConfig.id || tabConfig.dir ) {
  91                                 if ( tabConfig.id ) {
  92                                         contents.push( {
  93                                                 id: 'advId',
  94                                                 att: 'id',
  95                                                 type: 'text',
  96                                                 requiredContent: element ? element + '[id]' : null,
  97                                                 label: lang.id,
  98                                                 setup: setupAdvParams,
  99                                                 commit: commitAdvParams
 100                                         } );
 101                                 }
 102
 103                                 if ( tabConfig.dir ) {
 104                                         contents.push( {
 105                                                 id: 'advLangDir',
 106                                                 att: 'dir',
 107                                                 type: 'select',
 108                                                 requiredContent: element ? element + '[dir]' : null,
 109                                                 label: lang.langDir,
 110                                                 'default': '',
 111                                                 style: 'width:100%',
 112                                                 items: [
 113                                                         [ lang.notSet, '' ],
 114                                                         [ lang.langDirLTR, 'ltr' ],
 115                                                         [ lang.langDirRTL, 'rtl' ]
 116                                                 ],
 117                                                 setup: setupAdvParams,
 118                                                 commit: commitAdvParams
 119                                         } );
 120                                 }
 121
 122                                 result.elements[ 0 ].children.push( {
 123                                         type: 'hbox',
 124                                         widths: [ '50%', '50%' ],
 125                                         children: [].concat( contents )
 126                                 } );
 127                         }
 128
 129                         if ( tabConfig.styles || tabConfig.classes ) {
 130                                 contents = [];
 131
 132                                 if ( tabConfig.styles ) {
 133                                         contents.push( {
 134                                                 id: 'advStyles',
 135                                                 att: 'style',
 136                                                 type: 'text',
 137                                                 requiredContent: element ? element + '{cke-xyz}' : null,
 138                                                 label: lang.styles,
 139                                                 'default': '',
 140
 141                                                 validate: CKEDITOR.dialog.validate.inlineStyle( lang.invalidInlineStyle ),
 142                                                 onChange: function() {},
 143
 144                                                 getStyle: function( name, defaultValue ) {
 145                                                         var match = this.getValue().match( new RegExp( '(?:^|;)\\s*' + name + '\\s*:\\s*([^;]*)', 'i' ) );
 146                                                         return match ? match[ 1 ] : defaultValue;
 147                                                 },
 148
 149                                                 updateStyle: function( name, value ) {
 150                                                         var styles = this.getValue();
 151
 152                                                         var tmp = editor.document.createElement( 'span' );
 153                                                         tmp.setAttribute( 'style', styles );
 154                                                         tmp.setStyle( name, value );
 155                                                         styles = CKEDITOR.tools.normalizeCssText( tmp.getAttribute( 'style' ) );
 156
 157                                                         this.setValue( styles, 1 );
 158                                                 },
 159
 160                                                 setup: setupAdvParams,
 161
 162                                                 commit: commitAdvParams
 163
 164                                         } );
 165                                 }
 166
 167                                 if ( tabConfig.classes ) {
 168                                         contents.push( {
 169                                                 type: 'hbox',
 170                                                 widths: [ '45%', '55%' ],
 171                                                 children: [ {
 172                                                         id: 'advCSSClasses',
 173                                                         att: 'class',
 174                                                         type: 'text',
 175                                                         requiredContent: element ? element + '(cke-xyz)' : null,
 176                                                         label: lang.cssClasses,
 177                                                         'default': '',
 178                                                         setup: setupAdvParams,
 179                                                         commit: commitAdvParams
 180
 181                                                 } ]
 182                                         } );
 183                                 }
 184
 185                                 result.elements[ 0 ].children.push( {
 186                                         type: 'hbox',
 187                                         widths: [ '50%', '50%' ],
 188                                         children: [].concat( contents )
 189                                 } );
 190                         }
 191
 192                         return result;
 193                 }
 194         } );
 195
 196 } )();