sources/plugins/iframe/dialogs/iframe.js

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