| | 1 | /* |
| | 2 | Copyright (c) 2003-2010, 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.getAttribute( '_cke_real_element_type' ) && fakeImage.getAttribute( '_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, fakeImage ); |
| | 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 : iframeLang.width, |
| | 126 | validate : CKEDITOR.dialog.validate.integer( iframeLang.invalidWidth ), |
| | 127 | setup : function( iframeNode, fakeImage ) |
| | 128 | { |
| | 129 | loadValue.apply( this, arguments ); |
| | 130 | if ( fakeImage ) |
| | 131 | { |
| | 132 | var fakeImageWidth = parseInt( fakeImage.$.style.width, 10 ); |
| | 133 | if ( !isNaN( fakeImageWidth ) ) |
| | 134 | this.setValue( fakeImageWidth ); |
| | 135 | } |
| | 136 | }, |
| | 137 | commit : function( iframeNode, extraStyles ) |
| | 138 | { |
| | 139 | commitValue.apply( this, arguments ); |
| | 140 | if ( this.getValue() ) |
| | 141 | extraStyles.width = this.getValue() + 'px'; |
| | 142 | } |
| | 143 | }, |
| | 144 | { |
| | 145 | id : 'height', |
| | 146 | type : 'text', |
| | 147 | style : 'width:100%', |
| | 148 | labelLayout : 'vertical', |
| | 149 | label : iframeLang.height, |
| | 150 | validate : CKEDITOR.dialog.validate.integer( iframeLang.invalidHeight ), |
| | 151 | setup : function( iframeNode, fakeImage ) |
| | 152 | { |
| | 153 | loadValue.apply( this, arguments ); |
| | 154 | if ( fakeImage ) |
| | 155 | { |
| | 156 | var fakeImageHeight = parseInt( fakeImage.$.style.height, 10 ); |
| | 157 | if ( !isNaN( fakeImageHeight ) ) |
| | 158 | this.setValue( fakeImageHeight ); |
| | 159 | } |
| | 160 | }, |
| | 161 | commit : function( iframeNode, extraStyles ) |
| | 162 | { |
| | 163 | commitValue.apply( this, arguments ); |
| | 164 | if ( this.getValue() ) |
| | 165 | extraStyles.height = this.getValue() + 'px'; |
| | 166 | } |
| | 167 | }, |
| | 168 | { |
| | 169 | id : 'align', |
| | 170 | type : 'select', |
| | 171 | 'default' : '', |
| | 172 | items : |
| | 173 | [ |
| | 174 | [ commonLang.notSet , '' ], |
| | 175 | [ iframeLang.alignLeft , 'left' ], |
| | 176 | [ iframeLang.alignRight , 'right' ], |
| | 177 | [ iframeLang.alignTop , 'top' ], |
| | 178 | [ iframeLang.alignMiddle , 'middle' ], |
| | 179 | [ iframeLang.alignBottom , 'bottom' ] |
| | 180 | ], |
| | 181 | style : 'width:100%', |
| | 182 | labelLayout : 'vertical', |
| | 183 | label : iframeLang.align, |
| | 184 | setup : function( iframeNode, fakeImage ) |
| | 185 | { |
| | 186 | loadValue.apply( this, arguments ); |
| | 187 | if ( fakeImage ) |
| | 188 | { |
| | 189 | var fakeImageAlign = fakeImage.getAttribute( 'align' ); |
| | 190 | this.setValue( fakeImageAlign && fakeImageAlign.toLowerCase() || '' ); |
| | 191 | } |
| | 192 | }, |
| | 193 | commit : function( iframeNode, extraStyles, extraAttributes ) |
| | 194 | { |
| | 195 | commitValue.apply( this, arguments ); |
| | 196 | if ( this.getValue() ) |
| | 197 | extraAttributes.align = this.getValue(); |
| | 198 | } |
| | 199 | } |
| | 200 | ] |
| | 201 | }, |
| | 202 | { |
| | 203 | type : 'hbox', |
| | 204 | widths : [ '50%', '50%' ], |
| | 205 | children : |
| | 206 | [ |
| | 207 | { |
| | 208 | id : 'scrolling', |
| | 209 | type : 'checkbox', |
| | 210 | label : iframeLang.scrolling, |
| | 211 | setup : loadValue, |
| | 212 | commit : commitValue |
| | 213 | }, |
| | 214 | { |
| | 215 | id : 'frameborder', |
| | 216 | type : 'checkbox', |
| | 217 | label : iframeLang.border, |
| | 218 | setup : loadValue, |
| | 219 | commit : commitValue |
| | 220 | } |
| | 221 | ] |
| | 222 | }, |
| | 223 | { |
| | 224 | type : 'hbox', |
| | 225 | widths : [ '50%', '50%' ], |
| | 226 | children : |
| | 227 | [ |
| | 228 | { |
| | 229 | id : 'name', |
| | 230 | type : 'text', |
| | 231 | label : commonLang.name, |
| | 232 | setup : loadValue, |
| | 233 | commit : commitValue |
| | 234 | }, |
| | 235 | { |
| | 236 | id : 'title', |
| | 237 | type : 'text', |
| | 238 | label : commonLang.advisoryTitle, |
| | 239 | setup : loadValue, |
| | 240 | commit : commitValue |
| | 241 | } |
| | 242 | ] |
| | 243 | }, |
| | 244 | { |
| | 245 | id : 'longdesc', |
| | 246 | type : 'text', |
| | 247 | label : commonLang.longDescr, |
| | 248 | setup : loadValue, |
| | 249 | commit : commitValue |
| | 250 | } |
| | 251 | ] |
| | 252 | }, |
| | 253 | dialogadvtab && dialogadvtab.createAdvancedTab( editor, { id:1, classes:1, styles:1 }) |
| | 254 | ] |
| | 255 | }; |
| | 256 | }); |
| | 257 | })(); |
