_source/plugins/iframe/dialogs/iframe.js

   1 /*
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.html or http://ckeditor.com/license
   4 */
   5
   6 (function()
   7 {
   8         // Map 'true' and 'false' values to match W3C's specifications
   9         // http://www.w3.org/TR/REC-html40/present/frames.html#h-16.5
  10         var checkboxValues =
  11         {
  12                 scrolling : { 'true' : 'yes', 'false' : 'no' },
  13                 frameborder : { 'true' : '1', 'false' : '0' }
  14         };
  15
  16         function loadValue( iframeNode )
  17         {
  18                 var isCheckbox = this instanceof CKEDITOR.ui.dialog.checkbox;
  19                 if ( iframeNode.hasAttribute( this.id ) )
  20                 {
  21                         var value = iframeNode.getAttribute( this.id );
  22                         if ( isCheckbox )
  23                                 this.setValue( checkboxValues[ this.id ][ 'true' ] == value.toLowerCase() );
  24                         else
  25                                 this.setValue( value );
  26                 }
  27         }
  28
  29         function commitValue( iframeNode )
  30         {
  31                 var isRemove = this.getValue() === '',
  32                         isCheckbox = this instanceof CKEDITOR.ui.dialog.checkbox,
  33                         value = this.getValue();
  34                 if ( isRemove )
  35                         iframeNode.removeAttribute( this.att || this.id );
  36                 else if ( isCheckbox )
  37                         iframeNode.setAttribute( this.id, checkboxValues[ this.id ][ value ] );
  38                 else
  39                         iframeNode.setAttribute( this.att || this.id, value );
  40         }
  41
  42         CKEDITOR.dialog.add( 'iframe', function( editor )
  43         {
  44                 var iframeLang = editor.lang.iframe,
  45                         commonLang = editor.lang.common,
  46                         dialogadvtab = editor.plugins.dialogadvtab;
  47                 return {
  48                         title : iframeLang.title,
  49                         minWidth : 350,
  50                         minHeight : 260,
  51                         onShow : function()
  52                         {
  53                                 // Clear previously saved elements.
  54                                 this.fakeImage = this.iframeNode = null;
  55
  56                                 var fakeImage = this.getSelectedElement();
  57                                 if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == 'iframe' )
  58                                 {
  59                                         this.fakeImage = fakeImage;
  60
  61                                         var iframeNode = editor.restoreRealElement( fakeImage );
  62                                         this.iframeNode = iframeNode;
  63
  64                                         this.setupContent( iframeNode );
  65                                 }
  66                         },
  67                         onOk : function()
  68                         {
  69                                 var iframeNode;
  70                                 if ( !this.fakeImage )
  71                                         iframeNode = new CKEDITOR.dom.element( 'iframe' );
  72                                 else
  73                                         iframeNode = this.iframeNode;
  74
  75                                 // A subset of the specified attributes/styles
  76                                 // should also be applied on the fake element to
  77                                 // have better visual effect. (#5240)
  78                                 var extraStyles = {}, extraAttributes = {};
  79                                 this.commitContent( iframeNode, extraStyles, extraAttributes );
  80
  81                                 // Refresh the fake image.
  82                                 var newFakeImage = editor.createFakeElement( iframeNode, 'cke_iframe', 'iframe', true );
  83                                 newFakeImage.setAttributes( extraAttributes );
  84                                 newFakeImage.setStyles( extraStyles );
  85                                 if ( this.fakeImage )
  86                                 {
  87                                         newFakeImage.replace( this.fakeImage );
  88                                         editor.getSelection().selectElement( newFakeImage );
  89                                 }
  90                                 else
  91                                         editor.insertElement( newFakeImage );
  92                         },
  93                         contents : [
  94                                 {
  95                                         id : 'info',
  96                                         label : commonLang.generalTab,
  97                                         accessKey : 'I',
  98                                         elements :
  99                                         [
 100                                                 {
 101                                                         type : 'vbox',
 102                                                         padding : 0,
 103                                                         children :
 104                                                         [
 105                                                                 {
 106                                                                         id : 'src',
 107                                                                         type : 'text',
 108                                                                         label : commonLang.url,
 109                                                                         required : true,
 110                                                                         validate : CKEDITOR.dialog.validate.notEmpty( iframeLang.noUrl ),
 111                                                                         setup : loadValue,
 112                                                                         commit : commitValue
 113                                                                 }
 114                                                         ]
 115                                                 },
 116                                                 {
 117                                                         type : 'hbox',
 118                                                         children :
 119                                                         [
 120                                                                 {
 121                                                                         id : 'width',
 122                                                                         type : 'text',
 123                                                                         style : 'width:100%',
 124                                                                         labelLayout : 'vertical',
 125                                                                         label : commonLang.width,
 126                                                                         validate : CKEDITOR.dialog.validate.htmlLength( commonLang.invalidHtmlLength.replace( '%1', commonLang.width ) ),
 127                                                                         setup : loadValue,
 128                                                                         commit : commitValue
 129                                                                 },
 130                                                                 {
 131                                                                         id : 'height',
 132                                                                         type : 'text',
 133                                                                         style : 'width:100%',
 134                                                                         labelLayout : 'vertical',
 135                                                                         label : commonLang.height,
 136                                                                         validate : CKEDITOR.dialog.validate.htmlLength( commonLang.invalidHtmlLength.replace( '%1', commonLang.height ) ),
 137                                                                         setup : loadValue,
 138                                                                         commit : commitValue
 139                                                                 },
 140                                                                 {
 141                                                                         id : 'align',
 142                                                                         type : 'select',
 143                                                                         'default' : '',
 144                                                                         items :
 145                                                                         [
 146                                                                                 [ commonLang.notSet , '' ],
 147                                                                                 [ commonLang.alignLeft , 'left' ],
 148                                                                                 [ commonLang.alignRight , 'right' ],
 149                                                                                 [ commonLang.alignTop , 'top' ],
 150                                                                                 [ commonLang.alignMiddle , 'middle' ],
 151                                                                                 [ commonLang.alignBottom , 'bottom' ]
 152                                                                         ],
 153                                                                         style : 'width:100%',
 154                                                                         labelLayout : 'vertical',
 155                                                                         label : commonLang.align,
 156                                                                         setup : function( iframeNode, fakeImage )
 157                                                                         {
 158                                                                                 loadValue.apply( this, arguments );
 159                                                                                 if ( fakeImage )
 160                                                                                 {
 161                                                                                         var fakeImageAlign = fakeImage.getAttribute( 'align' );
 162                                                                                         this.setValue( fakeImageAlign && fakeImageAlign.toLowerCase() || '' );
 163                                                                                 }
 164                                                                         },
 165                                                                         commit : function( iframeNode, extraStyles, extraAttributes )
 166                                                                         {
 167                                                                                 commitValue.apply( this, arguments );
 168                                                                                 if ( this.getValue() )
 169                                                                                         extraAttributes.align = this.getValue();
 170                                                                         }
 171                                                                 }
 172                                                         ]
 173                                                 },
 174                                                 {
 175                                                         type : 'hbox',
 176                                                         widths : [ '50%', '50%' ],
 177                                                         children :
 178                                                         [
 179                                                                 {
 180                                                                         id : 'scrolling',
 181                                                                         type : 'checkbox',
 182                                                                         label : iframeLang.scrolling,
 183                                                                         setup : loadValue,
 184                                                                         commit : commitValue
 185                                                                 },
 186                                                                 {
 187                                                                         id : 'frameborder',
 188                                                                         type : 'checkbox',
 189                                                                         label : iframeLang.border,
 190                                                                         setup : loadValue,
 191                                                                         commit : commitValue
 192                                                                 }
 193                                                         ]
 194                                                 },
 195                                                 {
 196                                                         type : 'hbox',
 197                                                         widths : [ '50%', '50%' ],
 198                                                         children :
 199                                                         [
 200                                                                 {
 201                                                                         id : 'name',
 202                                                                         type : 'text',
 203                                                                         label : commonLang.name,
 204                                                                         setup : loadValue,
 205                                                                         commit : commitValue
 206                                                                 },
 207                                                                 {
 208                                                                         id : 'title',
 209                                                                         type : 'text',
 210                                                                         label : commonLang.advisoryTitle,
 211                                                                         setup : loadValue,
 212                                                                         commit : commitValue
 213                                                                 }
 214                                                         ]
 215                                                 },
 216                                                 {
 217                                                         id : 'longdesc',
 218                                                         type : 'text',
 219                                                         label : commonLang.longDescr,
 220                                                         setup : loadValue,
 221                                                         commit : commitValue
 222                                                 }
 223                                         ]
 224                                 },
 225                                 dialogadvtab && dialogadvtab.createAdvancedTab( editor, { id:1, classes:1, styles:1 })
 226                         ]
 227                 };
 228         });
 229 })();