_source/plugins/iframe/dialogs/iframe.js

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