1 /* 2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved. 3 For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 /** 7 * @fileOverview Plugin for making iframe based dialogs. 8 */ 9 10 CKEDITOR.plugins.add( 'iframedialog', 11 { 12 requires : [ 'dialog' ], 13 onLoad : function() 14 { 15 /** 16 * An iframe base dialog. 17 * @param {String} name Name of the dialog 18 * @param {String} title Title of the dialog 19 * @param {Number} minWidth Minimum width of the dialog 20 * @param {Number} minHeight Minimum height of the dialog 21 * @param {Function} [onContentLoad] Function called when the iframe has been loaded. 22 * If it isn't specified, the inner frame is notified of the dialog events ('load', 23 * 'resize', 'ok' and 'cancel') on a function called 'onDialogEvent' 24 * @param {Object} [userDefinition] Additional properties for the dialog definition 25 * @example 26 */ 27 CKEDITOR.dialog.addIframe = function( name, title, src, minWidth, minHeight, onContentLoad, userDefinition ) 28 { 29 var element = 30 { 31 type : 'iframe', 32 src : src, 33 width : '100%', 34 height : '100%' 35 }; 36 37 if ( typeof( onContentLoad ) == 'function' ) 38 element.onContentLoad = onContentLoad; 39 else 40 element.onContentLoad = function() 41 { 42 var element = this.getElement(), 43 childWindow = element.$.contentWindow; 44 45 // If the inner frame has defined a "onDialogEvent" function, setup listeners 46 if ( childWindow.onDialogEvent ) 47 { 48 var dialog = this.getDialog(), 49 notifyEvent = function(e) 50 { 51 return childWindow.onDialogEvent(e); 52 }; 53 54 dialog.on( 'ok', notifyEvent ); 55 dialog.on( 'cancel', notifyEvent ); 56 dialog.on( 'resize', notifyEvent ); 57 58 // Clear listeners 59 dialog.on( 'hide', function(e) 60 { 61 dialog.removeListener( 'ok', notifyEvent ); 62 dialog.removeListener( 'cancel', notifyEvent ); 63 dialog.removeListener( 'resize', notifyEvent ); 64 65 e.removeListener(); 66 } ); 67 68 // Notify child iframe of load: 69 childWindow.onDialogEvent( { 70 name : 'load', 71 sender : this, 72 editor : dialog._.editor 73 } ); 74 } 75 }; 76 77 var definition = 78 { 79 title : title, 80 minWidth : minWidth, 81 minHeight : minHeight, 82 contents : 83 [ 84 { 85 id : 'iframe', 86 label : title, 87 expand : true, 88 elements : [ element ] 89 } 90 ] 91 }; 92 93 for ( var i in userDefinition ) 94 definition[i] = userDefinition[i]; 95 96 this.add( name, function(){ return definition; } ); 97 }; 98 99 (function() 100 { 101 /** 102 * An iframe element. 103 * @extends CKEDITOR.ui.dialog.uiElement 104 * @example 105 * @constructor 106 * @param {CKEDITOR.dialog} dialog 107 * Parent dialog object. 108 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition 109 * The element definition. Accepted fields: 110 * <ul> 111 * <li><strong>src</strong> (Required) The src field of the iframe. </li> 112 * <li><strong>width</strong> (Required) The iframe's width.</li> 113 * <li><strong>height</strong> (Required) The iframe's height.</li> 114 * <li><strong>onContentLoad</strong> (Optional) A function to be executed 115 * after the iframe's contents has finished loading.</li> 116 * </ul> 117 * @param {Array} htmlList 118 * List of HTML code to output to. 119 */ 120 var iframeElement = function( dialog, elementDefinition, htmlList ) 121 { 122 if ( arguments.length < 3 ) 123 return; 124 125 var _ = ( this._ || ( this._ = {} ) ), 126 contentLoad = elementDefinition.onContentLoad && CKEDITOR.tools.bind( elementDefinition.onContentLoad, this ), 127 cssWidth = CKEDITOR.tools.cssLength( elementDefinition.width ), 128 cssHeight = CKEDITOR.tools.cssLength( elementDefinition.height ); 129 _.frameId = CKEDITOR.tools.getNextId() + '_iframe'; 130 131 // IE BUG: Parent container does not resize to contain the iframe automatically. 132 dialog.on( 'load', function() 133 { 134 var iframe = CKEDITOR.document.getById( _.frameId ), 135 parentContainer = iframe.getParent(); 136 137 parentContainer.setStyles( 138 { 139 width : cssWidth, 140 height : cssHeight 141 } ); 142 } ); 143 144 var attributes = 145 { 146 src : '%2', 147 id : _.frameId, 148 frameborder : 0, 149 allowtransparency : true 150 }; 151 var myHtml = []; 152 153 if ( typeof( elementDefinition.onContentLoad ) == 'function' ) 154 attributes.onload = 'CKEDITOR.tools.callFunction(%1);'; 155 156 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, myHtml, 'iframe', 157 { 158 width : cssWidth, 159 height : cssHeight 160 }, attributes, '' ); 161 162 // Put a placeholder for the first time. 163 htmlList.push( '<div style="width:' + cssWidth + ';height:' + cssHeight + ';" id="' + this.domId + '"></div>' ); 164 165 // Iframe elements should be refreshed whenever it is shown. 166 myHtml = myHtml.join( '' ); 167 dialog.on( 'show', function() 168 { 169 var iframe = CKEDITOR.document.getById( _.frameId ), 170 parentContainer = iframe.getParent(), 171 callIndex = CKEDITOR.tools.addFunction( contentLoad ), 172 html = myHtml.replace( '%1', callIndex ).replace( '%2', CKEDITOR.tools.htmlEncode( elementDefinition.src ) ); 173 parentContainer.setHtml( html ); 174 } ); 175 }; 176 177 iframeElement.prototype = new CKEDITOR.ui.dialog.uiElement; 178 179 CKEDITOR.dialog.addUIElement( 'iframe', 180 { 181 build : function( dialog, elementDefinition, output ) 182 { 183 return new iframeElement( dialog, elementDefinition, output ); 184 } 185 } ); 186 })(); 187 } 188 } ); 189