Upgrade to 4.5.8

[perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git] / sources / plugins / floatpanel / plugin.js

/**\r
 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
 * For licensing, see LICENSE.md or http://ckeditor.com/license\r
 */\r
\r
CKEDITOR.plugins.add( 'floatpanel', {\r
	requires: 'panel'\r
} );\r
\r
( function() {\r
	var panels = {};\r
\r
	function getPanel( editor, doc, parentElement, definition, level ) {\r
		// Generates the panel key: docId-eleId-skinName-langDir[-uiColor][-CSSs][-level]\r
		var key = CKEDITOR.tools.genKey( doc.getUniqueId(), parentElement.getUniqueId(), editor.lang.dir, editor.uiColor || '', definition.css || '', level || '' ),\r
			panel = panels[ key ];\r
\r
		if ( !panel ) {\r
			panel = panels[ key ] = new CKEDITOR.ui.panel( doc, definition );\r
			panel.element = parentElement.append( CKEDITOR.dom.element.createFromHtml( panel.render( editor ), doc ) );\r
\r
			panel.element.setStyles( {\r
				display: 'none',\r
				position: 'absolute'\r
			} );\r
		}\r
\r
		return panel;\r
	}\r
\r
	/**\r
	 * Represents a floating panel UI element.\r
	 *\r
	 * It is reused by rich combos, color combos, menus, etc.\r
	 * and it renders its content using {@link CKEDITOR.ui.panel}.\r
	 *\r
	 * @class\r
	 * @todo\r
	 */\r
	CKEDITOR.ui.floatPanel = CKEDITOR.tools.createClass( {\r
		/**\r
		 * Creates a floatPanel class instance.\r
		 *\r
		 * @constructor\r
		 * @param {CKEDITOR.editor} editor\r
		 * @param {CKEDITOR.dom.element} parentElement\r
		 * @param {Object} definition Definition of the panel that will be floating.\r
		 * @param {Number} level\r
		 */\r
		$: function( editor, parentElement, definition, level ) {\r
			definition.forceIFrame = 1;\r
\r
			// In case of editor with floating toolbar append panels that should float\r
			// to the main UI element.\r
			if ( definition.toolbarRelated && editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE )\r
				parentElement = CKEDITOR.document.getById( 'cke_' + editor.name );\r
\r
			var doc = parentElement.getDocument(),\r
				panel = getPanel( editor, doc, parentElement, definition, level || 0 ),\r
				element = panel.element,\r
				iframe = element.getFirst(),\r
				that = this;\r
\r
			// Disable native browser menu. (#4825)\r
			element.disableContextMenu();\r
\r
			this.element = element;\r
\r
			this._ = {\r
				editor: editor,\r
				// The panel that will be floating.\r
				panel: panel,\r
				parentElement: parentElement,\r
				definition: definition,\r
				document: doc,\r
				iframe: iframe,\r
				children: [],\r
				dir: editor.lang.dir,\r
				showBlockParams: null\r
			};\r
\r
			editor.on( 'mode', hide );\r
			editor.on( 'resize', hide );\r
\r
			// When resize of the window is triggered floatpanel should be repositioned according to new dimensions.\r
			// #11724. Fixes issue with undesired panel hiding on Android and iOS.\r
			doc.getWindow().on( 'resize', function() {\r
				this.reposition();\r
			}, this );\r
\r
			// We need a wrapper because events implementation doesn't allow to attach\r
			// one listener more than once for the same event on the same object.\r
			// Remember that floatPanel#hide is shared between all instances.\r
			function hide() {\r
				that.hide();\r
			}\r
		},\r
\r
		proto: {\r
			/**\r
			 * @todo\r
			 */\r
			addBlock: function( name, block ) {\r
				return this._.panel.addBlock( name, block );\r
			},\r
\r
			/**\r
			 * @todo\r
			 */\r
			addListBlock: function( name, multiSelect ) {\r
				return this._.panel.addListBlock( name, multiSelect );\r
			},\r
\r
			/**\r
			 * @todo\r
			 */\r
			getBlock: function( name ) {\r
				return this._.panel.getBlock( name );\r
			},\r
\r
			/**\r
			 * Shows the panel block.\r
			 *\r
			 * @param {String} name\r
			 * @param {CKEDITOR.dom.element} offsetParent Positioned parent.\r
			 * @param {Number} corner\r
			 *\r
			 * * For LTR (left to right) oriented editor:\r
			 *      * `1` = top-left\r
			 *      * `2` = top-right\r
			 *      * `3` = bottom-right\r
			 *      * `4` = bottom-left\r
			 * * For RTL (right to left):\r
			 *      * `1` = top-right\r
			 *      * `2` = top-left\r
			 *      * `3` = bottom-left\r
			 *      * `4` = bottom-right\r
			 *\r
			 * @param {Number} [offsetX=0]\r
			 * @param {Number} [offsetY=0]\r
			 * @param {Function} [callback] A callback function executed when block positioning is done.\r
			 * @todo what do exactly these params mean (especially corner)?\r
			 */\r
			showBlock: function( name, offsetParent, corner, offsetX, offsetY, callback ) {\r
				var panel = this._.panel,\r
					block = panel.showBlock( name );\r
\r
				this._.showBlockParams = [].slice.call( arguments );\r
				this.allowBlur( false );\r
\r
				// Record from where the focus is when open panel.\r
				var editable = this._.editor.editable();\r
				this._.returnFocus = editable.hasFocus ? editable : new CKEDITOR.dom.element( CKEDITOR.document.$.activeElement );\r
				this._.hideTimeout = 0;\r
\r
				var element = this.element,\r
					iframe = this._.iframe,\r
					// Edge prefers iframe's window to the iframe, just like the rest of the browsers (#13143).\r
					focused = CKEDITOR.env.ie && !CKEDITOR.env.edge ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow ),\r
					doc = element.getDocument(),\r
					positionedAncestor = this._.parentElement.getPositionedAncestor(),\r
					position = offsetParent.getDocumentPosition( doc ),\r
					positionedAncestorPosition = positionedAncestor ? positionedAncestor.getDocumentPosition( doc ) : { x: 0, y: 0 },\r
					rtl = this._.dir == 'rtl',\r
					left = position.x + ( offsetX || 0 ) - positionedAncestorPosition.x,\r
					top = position.y + ( offsetY || 0 ) - positionedAncestorPosition.y;\r
\r
				// Floating panels are off by (-1px, 0px) in RTL mode. (#3438)\r
				if ( rtl && ( corner == 1 || corner == 4 ) )\r
					left += offsetParent.$.offsetWidth;\r
				else if ( !rtl && ( corner == 2 || corner == 3 ) )\r
					left += offsetParent.$.offsetWidth - 1;\r
\r
				if ( corner == 3 || corner == 4 )\r
					top += offsetParent.$.offsetHeight - 1;\r
\r
				// Memorize offsetParent by it's ID.\r
				this._.panel._.offsetParentId = offsetParent.getId();\r
\r
				element.setStyles( {\r
					top: top + 'px',\r
					left: 0,\r
					display: ''\r
				} );\r
\r
				// Don't use display or visibility style because we need to\r
				// calculate the rendering layout later and focus the element.\r
				element.setOpacity( 0 );\r
\r
				// To allow the context menu to decrease back their width\r
				element.getFirst().removeStyle( 'width' );\r
\r
				// Report to focus manager.\r
				this._.editor.focusManager.add( focused );\r
\r
				// Configure the IFrame blur event. Do that only once.\r
				if ( !this._.blurSet ) {\r
\r
					// With addEventListener compatible browsers, we must\r
					// useCapture when registering the focus/blur events to\r
					// guarantee they will be firing in all situations. (#3068, #3222 )\r
					CKEDITOR.event.useCapture = true;\r
\r
					focused.on( 'blur', function( ev ) {\r
						// As we are using capture to register the listener,\r
						// the blur event may get fired even when focusing\r
						// inside the window itself, so we must ensure the\r
						// target is out of it.\r
						if ( !this.allowBlur() || ev.data.getPhase() != CKEDITOR.EVENT_PHASE_AT_TARGET )\r
							return;\r
\r
						if ( this.visible && !this._.activeChild ) {\r
							// [iOS] Allow hide to be prevented if touch is bound\r
							// to any parent of the iframe blur happens before touch (#10714).\r
							if ( CKEDITOR.env.iOS ) {\r
								if ( !this._.hideTimeout )\r
									this._.hideTimeout = CKEDITOR.tools.setTimeout( doHide, 0, this );\r
							} else {\r
								doHide.call( this );\r
							}\r
						}\r
\r
						function doHide() {\r
							// Panel close is caused by user's navigating away the focus, e.g. click outside the panel.\r
							// DO NOT restore focus in this case.\r
							delete this._.returnFocus;\r
							this.hide();\r
						}\r
					}, this );\r
\r
					focused.on( 'focus', function() {\r
						this._.focused = true;\r
						this.hideChild();\r
						this.allowBlur( true );\r
					}, this );\r
\r
					// [iOS] if touch is bound to any parent of the iframe blur\r
					// happens twice before touchstart and before touchend (#10714).\r
					if ( CKEDITOR.env.iOS ) {\r
						// Prevent false hiding on blur.\r
						// We don't need to return focus here because touchend will fire anyway.\r
						// If user scrolls and pointer gets out of the panel area touchend will also fire.\r
						focused.on( 'touchstart', function() {\r
							clearTimeout( this._.hideTimeout );\r
						}, this );\r
\r
						// Set focus back to handle blur and hide panel when needed.\r
						focused.on( 'touchend', function() {\r
							this._.hideTimeout = 0;\r
							this.focus();\r
						}, this );\r
					}\r
\r
					CKEDITOR.event.useCapture = false;\r
\r
					this._.blurSet = 1;\r
				}\r
\r
				panel.onEscape = CKEDITOR.tools.bind( function( keystroke ) {\r
					if ( this.onEscape && this.onEscape( keystroke ) === false )\r
						return false;\r
				}, this );\r
\r
				CKEDITOR.tools.setTimeout( function() {\r
					var panelLoad = CKEDITOR.tools.bind( function() {\r
						var target = element;\r
\r
						// Reset panel width as the new content can be narrower\r
						// than the old one. (#9355)\r
						target.removeStyle( 'width' );\r
\r
						if ( block.autoSize ) {\r
							var panelDoc = block.element.getDocument(),\r
								width = ( ( CKEDITOR.env.webkit || CKEDITOR.env.edge ) ? block.element : panelDoc.getBody() ).$.scrollWidth;\r
\r
							// Account for extra height needed due to IE quirks box model bug:\r
							// http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug\r
							// (#3426)\r
							if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && width > 0 )\r
								width += ( target.$.offsetWidth || 0 ) - ( target.$.clientWidth || 0 ) + 3;\r
\r
							// Add some extra pixels to improve the appearance.\r
							width += 10;\r
\r
							target.setStyle( 'width', width + 'px' );\r
\r
							var height = block.element.$.scrollHeight;\r
\r
							// Account for extra height needed due to IE quirks box model bug:\r
							// http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug\r
							// (#3426)\r
							if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && height > 0 )\r
								height += ( target.$.offsetHeight || 0 ) - ( target.$.clientHeight || 0 ) + 3;\r
\r
							target.setStyle( 'height', height + 'px' );\r
\r
							// Fix IE < 8 visibility.\r
							panel._.currentBlock.element.setStyle( 'display', 'none' ).removeStyle( 'display' );\r
						} else {\r
							target.removeStyle( 'height' );\r
						}\r
\r
						// Flip panel layout horizontally in RTL with known width.\r
						if ( rtl )\r
							left -= element.$.offsetWidth;\r
\r
						// Pop the style now for measurement.\r
						element.setStyle( 'left', left + 'px' );\r
\r
						/* panel layout smartly fit the viewport size. */\r
						var panelElement = panel.element,\r
							panelWindow = panelElement.getWindow(),\r
							rect = element.$.getBoundingClientRect(),\r
							viewportSize = panelWindow.getViewPaneSize();\r
\r
						// Compensation for browsers that dont support "width" and "height".\r
						var rectWidth = rect.width || rect.right - rect.left,\r
							rectHeight = rect.height || rect.bottom - rect.top;\r
\r
						// Check if default horizontal layout is impossible.\r
						var spaceAfter = rtl ? rect.right : viewportSize.width - rect.left,\r
							spaceBefore = rtl ? viewportSize.width - rect.right : rect.left;\r
\r
						if ( rtl ) {\r
							if ( spaceAfter < rectWidth ) {\r
								// Flip to show on right.\r
								if ( spaceBefore > rectWidth )\r
									left += rectWidth;\r
								// Align to window left.\r
								else if ( viewportSize.width > rectWidth )\r
									left = left - rect.left;\r
								// Align to window right, never cutting the panel at right.\r
								else\r
									left = left - rect.right + viewportSize.width;\r
							}\r
						} else if ( spaceAfter < rectWidth ) {\r
							// Flip to show on left.\r
							if ( spaceBefore > rectWidth )\r
								left -= rectWidth;\r
							// Align to window right.\r
							else if ( viewportSize.width > rectWidth )\r
								left = left - rect.right + viewportSize.width;\r
							// Align to window left, never cutting the panel at left.\r
							else\r
								left = left - rect.left;\r
						}\r
\r
\r
						// Check if the default vertical layout is possible.\r
						var spaceBelow = viewportSize.height - rect.top,\r
							spaceAbove = rect.top;\r
\r
						if ( spaceBelow < rectHeight ) {\r
							// Flip to show above.\r
							if ( spaceAbove > rectHeight )\r
								top -= rectHeight;\r
							// Align to window bottom.\r
							else if ( viewportSize.height > rectHeight )\r
								top = top - rect.bottom + viewportSize.height;\r
							// Align to top, never cutting the panel at top.\r
							else\r
								top = top - rect.top;\r
						}\r
\r
						// If IE is in RTL, we have troubles with absolute\r
						// position and horizontal scrolls. Here we have a\r
						// series of hacks to workaround it. (#6146)\r
						if ( CKEDITOR.env.ie ) {\r
							var offsetParent = new CKEDITOR.dom.element( element.$.offsetParent ),\r
								scrollParent = offsetParent;\r
\r
							// Quirks returns <body>, but standards returns <html>.\r
							if ( scrollParent.getName() == 'html' )\r
								scrollParent = scrollParent.getDocument().getBody();\r
\r
							if ( scrollParent.getComputedStyle( 'direction' ) == 'rtl' ) {\r
								// For IE8, there is not much logic on this, but it works.\r
								if ( CKEDITOR.env.ie8Compat )\r
									left -= element.getDocument().getDocumentElement().$.scrollLeft * 2;\r
								else\r
									left -= ( offsetParent.$.scrollWidth - offsetParent.$.clientWidth );\r
							}\r
						}\r
\r
						// Trigger the onHide event of the previously active panel to prevent\r
						// incorrect styles from being applied (#6170)\r
						var innerElement = element.getFirst(),\r
							activePanel;\r
						if ( ( activePanel = innerElement.getCustomData( 'activePanel' ) ) )\r
							activePanel.onHide && activePanel.onHide.call( this, 1 );\r
						innerElement.setCustomData( 'activePanel', this );\r
\r
						element.setStyles( {\r
							top: top + 'px',\r
							left: left + 'px'\r
						} );\r
						element.setOpacity( 1 );\r
\r
						callback && callback();\r
					}, this );\r
\r
					panel.isLoaded ? panelLoad() : panel.onLoad = panelLoad;\r
\r
					CKEDITOR.tools.setTimeout( function() {\r
						var scrollTop = CKEDITOR.env.webkit && CKEDITOR.document.getWindow().getScrollPosition().y;\r
\r
						// Focus the panel frame first, so blur gets fired.\r
						this.focus();\r
\r
						// Focus the block now.\r
						block.element.focus();\r
\r
						// #10623, #10951 - restore the viewport's scroll position after focusing list element.\r
						if ( CKEDITOR.env.webkit )\r
							CKEDITOR.document.getBody().$.scrollTop = scrollTop;\r
\r
						// We need this get fired manually because of unfired focus() function.\r
						this.allowBlur( true );\r
						this._.editor.fire( 'panelShow', this );\r
					}, 0, this );\r
				}, CKEDITOR.env.air ? 200 : 0, this );\r
				this.visible = 1;\r
\r
				if ( this.onShow )\r
					this.onShow.call( this );\r
			},\r
\r
			/**\r
			 * Repositions the panel with the same parameters that were used in the last {@link #showBlock} call.\r
			 *\r
			 * @since 4.5.4\r
			 */\r
			reposition: function() {\r
				var blockParams = this._.showBlockParams;\r
\r
				if ( this.visible && this._.showBlockParams ) {\r
					this.hide();\r
					this.showBlock.apply( this, blockParams );\r
				}\r
			},\r
\r
			/**\r
			 * Restores the last focused element or simply focuses the panel window.\r
			 */\r
			focus: function() {\r
				// Webkit requires to blur any previous focused page element, in\r
				// order to properly fire the "focus" event.\r
				if ( CKEDITOR.env.webkit ) {\r
					var active = CKEDITOR.document.getActive();\r
					active && !active.equals( this._.iframe ) && active.$.blur();\r
				}\r
\r
				// Restore last focused element or simply focus panel window.\r
				var focus = this._.lastFocused || this._.iframe.getFrameDocument().getWindow();\r
				focus.focus();\r
			},\r
\r
			/**\r
			 * @todo\r
			 */\r
			blur: function() {\r
				var doc = this._.iframe.getFrameDocument(),\r
					active = doc.getActive();\r
\r
				active && active.is( 'a' ) && ( this._.lastFocused = active );\r
			},\r
\r
			/**\r
			 * Hides the panel.\r
			 *\r
			 * @todo\r
			 */\r
			hide: function( returnFocus ) {\r
				if ( this.visible && ( !this.onHide || this.onHide.call( this ) !== true ) ) {\r
					this.hideChild();\r
					// Blur previously focused element. (#6671)\r
					CKEDITOR.env.gecko && this._.iframe.getFrameDocument().$.activeElement.blur();\r
					this.element.setStyle( 'display', 'none' );\r
					this.visible = 0;\r
					this.element.getFirst().removeCustomData( 'activePanel' );\r
\r
					// Return focus properly. (#6247)\r
					var focusReturn = returnFocus && this._.returnFocus;\r
					if ( focusReturn ) {\r
						// Webkit requires focus moved out panel iframe first.\r
						if ( CKEDITOR.env.webkit && focusReturn.type )\r
							focusReturn.getWindow().$.focus();\r
\r
						focusReturn.focus();\r
					}\r
\r
					delete this._.lastFocused;\r
					this._.showBlockParams = null;\r
\r
					this._.editor.fire( 'panelHide', this );\r
				}\r
			},\r
\r
			/**\r
			 * @todo\r
			 */\r
			allowBlur: function( allow ) {\r
				// Prevent editor from hiding the panel. (#3222)\r
				var panel = this._.panel;\r
				if ( allow !== undefined )\r
					panel.allowBlur = allow;\r
\r
				return panel.allowBlur;\r
			},\r
\r
			/**\r
			 * Shows the specified panel as a child of one block of this one.\r
			 *\r
			 * @param {CKEDITOR.ui.floatPanel} panel\r
			 * @param {String} blockName\r
			 * @param {CKEDITOR.dom.element} offsetParent Positioned parent.\r
			 * @param {Number} corner\r
			 *\r
			 * * For LTR (left to right) oriented editor:\r
			 *      * `1` = top-left\r
			 *      * `2` = top-right\r
			 *      * `3` = bottom-right\r
			 *      * `4` = bottom-left\r
			 * * For RTL (right to left):\r
			 *      * `1` = top-right\r
			 *      * `2` = top-left\r
			 *      * `3` = bottom-left\r
			 *      * `4` = bottom-right\r
			 *\r
			 * @param {Number} [offsetX=0]\r
			 * @param {Number} [offsetY=0]\r
			 * @todo\r
			 */\r
			showAsChild: function( panel, blockName, offsetParent, corner, offsetX, offsetY ) {\r
				// Skip reshowing of child which is already visible.\r
				if ( this._.activeChild == panel && panel._.panel._.offsetParentId == offsetParent.getId() )\r
					return;\r
\r
				this.hideChild();\r
\r
				panel.onHide = CKEDITOR.tools.bind( function() {\r
					// Use a timeout, so we give time for this menu to get\r
					// potentially focused.\r
					CKEDITOR.tools.setTimeout( function() {\r
						if ( !this._.focused )\r
							this.hide();\r
					}, 0, this );\r
				}, this );\r
\r
				this._.activeChild = panel;\r
				this._.focused = false;\r
\r
				panel.showBlock( blockName, offsetParent, corner, offsetX, offsetY );\r
				this.blur();\r
\r
				/* #3767 IE: Second level menu may not have borders */\r
				if ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) {\r
					setTimeout( function() {\r
						panel.element.getChild( 0 ).$.style.cssText += '';\r
					}, 100 );\r
				}\r
			},\r
\r
			/**\r
			 * @todo\r
			 */\r
			hideChild: function( restoreFocus ) {\r
				var activeChild = this._.activeChild;\r
\r
				if ( activeChild ) {\r
					delete activeChild.onHide;\r
					delete this._.activeChild;\r
					activeChild.hide();\r
\r
					// At this point focus should be moved back to parent panel.\r
					restoreFocus && this.focus();\r
				}\r
			}\r
		}\r
	} );\r
\r
	CKEDITOR.on( 'instanceDestroyed', function() {\r
		var isLastInstance = CKEDITOR.tools.isEmpty( CKEDITOR.instances );\r
\r
		for ( var i in panels ) {\r
			var panel = panels[ i ];\r
			// Safe to destroy it since there're no more instances.(#4241)\r
			if ( isLastInstance )\r
				panel.destroy();\r
			// Panel might be used by other instances, just hide them.(#4552)\r
			else\r
				panel.element.hide();\r
		}\r
		// Remove the registration.\r
		isLastInstance && ( panels = {} );\r
\r
	} );\r
} )();\r