Browse Source

Extended documentation of FramedEditableUIIframe and FramedEditableUIIframeView.

Aleksander Nowodzinski 9 years ago
parent
commit
cf575714dd

+ 12 - 0
tests/_utils/ui/editableui/framed/framededitableuiiframe.js

@@ -7,7 +7,19 @@
 
 import EditableUI from '/ckeditor5/ui/editableui/editableui.js';
 
+/**
+ * The basic implementation of an iframe-based {@link ui.editableUI.EditableUI}.
+ *
+ * @memberOf ui.editableUI.iframe
+ * @extends ui.editableUI.EditableUI
+ */
 export default class FramedEditableUIIframe extends EditableUI {
+	/**
+	 * Creates a new instance of the iframe–based {@link ui.editableUI.EditableUI EditableUI}.
+	 *
+	 * @param {ckeditor5.Editor} editor The editor instance.
+	 * @param {utils.Observable} editableModel The model for the editable.
+	 */
 	constructor( editor, editableModel ) {
 		super( editor, editableModel );
 

+ 41 - 43
tests/_utils/ui/editableui/framed/framededitableuiiframeview.js

@@ -5,48 +5,37 @@
 
 'use strict';
 
-// import EditableUIView from '/ckeditor5/ui/editableui/editableuiview.js';
-import View from '/ckeditor5/ui/view.js';
+import IframeView from '/ckeditor5/ui/iframe/iframeview.js';
 import FramedEditableUIView from './framededitableuiview.js';
 
-export default class FramedEditableUIIframeView extends View {
+/**
+ * The basic implementation of an {@link ui.iframe.IframeView IframeView}-based
+ * {@link ui.editableUI.EditableUIView}.
+ *
+ * @memberOf ui.editableUI.iframe
+ * @extends ui.iframe.IframeView
+ */
+export default class FramedEditableUIIframeView extends IframeView {
+	/**
+	 * Creates a new instance of the {@link ui.iframe.IframeView IframeView}–based
+	 * {@link ui.editableUI.EditableUIView EditableUIView}.
+	 *
+	 * @param {utils.Observable} [model] (View)Model of this View.
+	 * @param {utils.Locale} [locale] The {@link ckeditor5.Editor#locale editor's locale} instance.
+	 */
 	constructor( model, locale ) {
 		super( model, locale );
 
-		const bind = this.attributeBinder;
-
-		// Here's the tricky part - we must return the promise from init()
-		// because iframe loading may be asynchronous. However, we can't start
-		// listening to 'load' in init(), because at this point the element is already in the DOM
-		// and the 'load' event might already be fired.
-		// So here we store both - the promise and the deferred object so we're able to resolve
-		// the promise in _iframeLoaded.
-		this._iframePromise = new Promise( ( resolve, reject ) => {
-			this._iframeDeferred = { resolve, reject };
-		} );
-
-		this.template = {
-			tag: 'iframe',
-			attributes: {
-				class: [ 'ck-framededitable ck-reset-all' ],
-				// It seems that we need to allow scripts in order to be able to listen to events.
-				// TODO: Research that. Perhaps the src must be set?
-				sandbox: 'allow-same-origin allow-scripts',
-				width: bind.to( 'width' ),
-				height: bind.to( 'height' )
-			},
-			on: {
-				load: 'loaded'
-			}
-		};
+		this.template.attributes.class.push( 'ck-framededitable' );
 
 		this.on( 'loaded', this._iframeLoaded, this );
-	}
-
-	init() {
-		super.init();
 
-		return this._iframePromise;
+		/**
+		 * A view which represents the editable `<body>` element within the iframe.
+		 *
+		 * @private
+		 * @member {FramedEditableUIView} ui.editableUI.iframe#_innerView
+		 */
 	}
 
 	/**
@@ -54,24 +43,33 @@ export default class FramedEditableUIIframeView extends View {
 	 * `<body>` inside the `<iframe>` document, which is provided by `FramedEditableUIView`.
 	 */
 	get editableElement() {
-		return this.editableUIView.editableElement;
+		return this._innerView.editableElement;
+	}
+
+	/**
+	 * Destroys the View instance and child {@link _innerView}.
+	 */
+	destroy() {
+		super.destroy();
+
+		return this._innerView.destroy();
 	}
 
+	/**
+	 * When the iframe is loaded, it creates a child view out of <body> element
+	 * and initializes it. Element of this view is exposed through {@link editableElement}.
+	 *
+	 * @protected
+	 */
 	_iframeLoaded() {
-		this.editableUIView = new FramedEditableUIView(
+		this._innerView = new FramedEditableUIView(
 			this.model,
 			this.locale,
 			this.element.contentDocument.body
 		);
 
-		this.editableUIView.init();
+		this._innerView.init();
 
 		this._iframeDeferred.resolve();
 	}
-
-	destroy() {
-		super.destroy();
-
-		return this.editableUIView.destroy();
-	}
 }