Add audio, color and fonts

[perso/Immae/Projets/packagist/ludivine-ckeditor-component.git] / sources / plugins / div / dialogs / div.js

/*\r
 * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
 * For licensing, see LICENSE.md or http://ckeditor.com/license\r
 */\r
\r
( function() {\r
\r
	// Add to collection with DUP examination.\r
	// @param {Object} collection\r
	// @param {Object} element\r
	// @param {Object} database\r
	function addSafely( collection, element, database ) {\r
		// 1. IE doesn't support customData on text nodes;\r
		// 2. Text nodes never get chance to appear twice;\r
		if ( !element.is || !element.getCustomData( 'block_processed' ) ) {\r
			element.is && CKEDITOR.dom.element.setMarker( database, element, 'block_processed', true );\r
			collection.push( element );\r
		}\r
	}\r
\r
	// Dialog reused by both 'creatediv' and 'editdiv' commands.\r
	// @param {Object} editor\r
	// @param {String} command	The command name which indicate what the current command is.\r
	function divDialog( editor, command ) {\r
		// Definition of elements at which div operation should stopped.\r
		var divLimitDefinition = ( function() {\r
\r
			// Customzie from specialize blockLimit elements\r
			var definition = CKEDITOR.tools.extend( {}, CKEDITOR.dtd.$blockLimit );\r
\r
			if ( editor.config.div_wrapTable ) {\r
				delete definition.td;\r
				delete definition.th;\r
			}\r
			return definition;\r
		} )();\r
\r
		// DTD of 'div' element\r
		var dtd = CKEDITOR.dtd.div;\r
\r
		// Get the first div limit element on the element's path.\r
		// @param {Object} element\r
		function getDivContainer( element ) {\r
			var container = editor.elementPath( element ).blockLimit;\r
\r
			// Never consider read-only (i.e. contenteditable=false) element as\r
			// a first div limit (#11083).\r
			if ( container.isReadOnly() )\r
				container = container.getParent();\r
\r
			// Dont stop at 'td' and 'th' when div should wrap entire table.\r
			if ( editor.config.div_wrapTable && container.is( [ 'td', 'th' ] ) ) {\r
				var parentPath = editor.elementPath( container.getParent() );\r
				container = parentPath.blockLimit;\r
			}\r
\r
			return container;\r
		}\r
\r
		// Init all fields' setup/commit function.\r
		// @memberof divDialog\r
		function setupFields() {\r
			this.foreach( function( field ) {\r
				// Exclude layout container elements\r
				if ( /^(?!vbox|hbox)/.test( field.type ) ) {\r
					if ( !field.setup ) {\r
						// Read the dialog fields values from the specified\r
						// element attributes.\r
						field.setup = function( element ) {\r
							field.setValue( element.getAttribute( field.id ) || '', 1 );\r
						};\r
					}\r
					if ( !field.commit ) {\r
						// Set element attributes assigned by the dialog\r
						// fields.\r
						field.commit = function( element ) {\r
							var fieldValue = this.getValue();\r
							// ignore default element attribute values\r
							if ( field.id == 'dir' && element.getComputedStyle( 'direction' ) == fieldValue ) {\r
								return;\r
							}\r
\r
							if ( fieldValue )\r
								element.setAttribute( field.id, fieldValue );\r
							else\r
								element.removeAttribute( field.id );\r
						};\r
					}\r
				}\r
			} );\r
		}\r
\r
		// Wrapping 'div' element around appropriate blocks among the selected ranges.\r
		// @param {Object} editor\r
		function createDiv( editor ) {\r
			// new adding containers OR detected pre-existed containers.\r
			var containers = [];\r
			// node markers store.\r
			var database = {};\r
			// All block level elements which contained by the ranges.\r
			var containedBlocks = [],\r
				block;\r
\r
			// Get all ranges from the selection.\r
			var selection = editor.getSelection(),\r
				ranges = selection.getRanges();\r
			var bookmarks = selection.createBookmarks();\r
			var i, iterator;\r
\r
			// collect all included elements from dom-iterator\r
			for ( i = 0; i < ranges.length; i++ ) {\r
				iterator = ranges[ i ].createIterator();\r
				while ( ( block = iterator.getNextParagraph() ) ) {\r
					// include contents of blockLimit elements.\r
					if ( block.getName() in divLimitDefinition && !block.isReadOnly() ) {\r
						var j,\r
							childNodes = block.getChildren();\r
						for ( j = 0; j < childNodes.count(); j++ )\r
							addSafely( containedBlocks, childNodes.getItem( j ), database );\r
					} else {\r
						while ( !dtd[ block.getName() ] && !block.equals( ranges[ i ].root ) )\r
							block = block.getParent();\r
						addSafely( containedBlocks, block, database );\r
					}\r
				}\r
			}\r
\r
			CKEDITOR.dom.element.clearAllMarkers( database );\r
\r
			var blockGroups = groupByDivLimit( containedBlocks );\r
			var ancestor, divElement;\r
\r
			for ( i = 0; i < blockGroups.length; i++ ) {\r
				var currentNode = blockGroups[ i ][ 0 ];\r
\r
				// Calculate the common parent node of all contained elements.\r
				ancestor = currentNode.getParent();\r
				for ( j = 1; j < blockGroups[ i ].length; j++ )\r
					ancestor = ancestor.getCommonAncestor( blockGroups[ i ][ j ] );\r
\r
				divElement = new CKEDITOR.dom.element( 'div', editor.document );\r
\r
				// Normalize the blocks in each group to a common parent.\r
				for ( j = 0; j < blockGroups[ i ].length; j++ ) {\r
					currentNode = blockGroups[ i ][ j ];\r
\r
					while ( !currentNode.getParent().equals( ancestor ) )\r
						currentNode = currentNode.getParent();\r
\r
					// This could introduce some duplicated elements in array.\r
					blockGroups[ i ][ j ] = currentNode;\r
				}\r
\r
				// Wrapped blocks counting\r
				for ( j = 0; j < blockGroups[ i ].length; j++ ) {\r
					currentNode = blockGroups[ i ][ j ];\r
\r
					// Avoid DUP elements introduced by grouping.\r
					if ( !( currentNode.getCustomData && currentNode.getCustomData( 'block_processed' ) ) ) {\r
						currentNode.is && CKEDITOR.dom.element.setMarker( database, currentNode, 'block_processed', true );\r
\r
						// Establish new container, wrapping all elements in this group.\r
						if ( !j )\r
							divElement.insertBefore( currentNode );\r
\r
						divElement.append( currentNode );\r
					}\r
				}\r
\r
				CKEDITOR.dom.element.clearAllMarkers( database );\r
				containers.push( divElement );\r
			}\r
\r
			selection.selectBookmarks( bookmarks );\r
			return containers;\r
		}\r
\r
		// Divide a set of nodes to different groups by their path's blocklimit element.\r
		// Note: the specified nodes should be in source order naturally, which mean they are supposed to producea by following class:\r
		//  * CKEDITOR.dom.range.Iterator\r
		//  * CKEDITOR.dom.domWalker\r
		// @returns {Array[]} the grouped nodes\r
		function groupByDivLimit( nodes ) {\r
			var groups = [],\r
				lastDivLimit = null,\r
				block;\r
\r
			for ( var i = 0; i < nodes.length; i++ ) {\r
				block = nodes[ i ];\r
				var limit = getDivContainer( block );\r
				if ( !limit.equals( lastDivLimit ) ) {\r
					lastDivLimit = limit;\r
					groups.push( [] );\r
				}\r
				groups[ groups.length - 1 ].push( block );\r
			}\r
			return groups;\r
		}\r
\r
		// Synchronous field values to other impacted fields is required, e.g. div styles\r
		// change should also alter inline-style text.\r
		function commitInternally( targetFields ) {\r
			var dialog = this.getDialog(),\r
				element = dialog._element && dialog._element.clone() || new CKEDITOR.dom.element( 'div', editor.document );\r
\r
			// Commit this field and broadcast to target fields.\r
			this.commit( element, true );\r
\r
			targetFields = [].concat( targetFields );\r
			var length = targetFields.length,\r
				field;\r
			for ( var i = 0; i < length; i++ ) {\r
				field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );\r
				field && field.setup && field.setup( element, true );\r
			}\r
		}\r
\r
\r
		// Registered 'CKEDITOR.style' instances.\r
		var styles = {};\r
\r
		// Hold a collection of created block container elements.\r
		var containers = [];\r
\r
		// @type divDialog\r
		return {\r
			title: editor.lang.div.title,\r
			minWidth: 400,\r
			minHeight: 165,\r
			contents: [ {\r
				id: 'info',\r
				label: editor.lang.common.generalTab,\r
				title: editor.lang.common.generalTab,\r
				elements: [ {\r
					type: 'hbox',\r
					widths: [ '50%', '50%' ],\r
					children: [ {\r
						id: 'elementStyle',\r
						type: 'select',\r
						style: 'width: 100%;',\r
						label: editor.lang.div.styleSelectLabel,\r
						'default': '',\r
						// Options are loaded dynamically.\r
						items: [\r
							[ editor.lang.common.notSet, '' ]\r
						],\r
						onChange: function() {\r
							commitInternally.call( this, [ 'info:elementStyle', 'info:class', 'advanced:dir', 'advanced:style' ] );\r
						},\r
						setup: function( element ) {\r
							for ( var name in styles )\r
								styles[ name ].checkElementRemovable( element, true, editor ) && this.setValue( name, 1 );\r
						},\r
						commit: function( element ) {\r
							var styleName;\r
							if ( ( styleName = this.getValue() ) ) {\r
								var style = styles[ styleName ];\r
								style.applyToObject( element, editor );\r
							}\r
							else {\r
								element.removeAttribute( 'style' );\r
							}\r
						}\r
					},\r
					{\r
						id: 'class',\r
						type: 'text',\r
						requiredContent: 'div(cke-xyz)', // Random text like 'xyz' will check if all are allowed.\r
						label: editor.lang.common.cssClass,\r
						'default': ''\r
					} ]\r
				} ]\r
			},\r
			{\r
				id: 'advanced',\r
				label: editor.lang.common.advancedTab,\r
				title: editor.lang.common.advancedTab,\r
				elements: [ {\r
					type: 'vbox',\r
					padding: 1,\r
					children: [ {\r
						type: 'hbox',\r
						widths: [ '50%', '50%' ],\r
						children: [ {\r
							type: 'text',\r
							id: 'id',\r
							requiredContent: 'div[id]',\r
							label: editor.lang.common.id,\r
							'default': ''\r
						},\r
						{\r
							type: 'text',\r
							id: 'lang',\r
							requiredContent: 'div[lang]',\r
							label: editor.lang.common.langCode,\r
							'default': ''\r
						} ]\r
					},\r
					{\r
						type: 'hbox',\r
						children: [ {\r
							type: 'text',\r
							id: 'style',\r
							requiredContent: 'div{cke-xyz}', // Random text like 'xyz' will check if all are allowed.\r
							style: 'width: 100%;',\r
							label: editor.lang.common.cssStyle,\r
							'default': '',\r
							commit: function( element ) {\r
								element.setAttribute( 'style', this.getValue() );\r
							}\r
						} ]\r
					},\r
					{\r
						type: 'hbox',\r
						children: [ {\r
							type: 'text',\r
							id: 'title',\r
							requiredContent: 'div[title]',\r
							style: 'width: 100%;',\r
							label: editor.lang.common.advisoryTitle,\r
							'default': ''\r
						} ]\r
					},\r
					{\r
						type: 'select',\r
						id: 'dir',\r
						requiredContent: 'div[dir]',\r
						style: 'width: 100%;',\r
						label: editor.lang.common.langDir,\r
						'default': '',\r
						items: [\r
							[ editor.lang.common.notSet, '' ],\r
							[ editor.lang.common.langDirLtr, 'ltr' ],\r
							[ editor.lang.common.langDirRtl, 'rtl' ]\r
						]\r
					} ] }\r
				]\r
			} ],\r
			onLoad: function() {\r
				setupFields.call( this );\r
\r
				// Preparing for the 'elementStyle' field.\r
				var dialog = this,\r
					stylesField = this.getContentElement( 'info', 'elementStyle' );\r
\r
				// Reuse the 'stylescombo' plugin's styles definition.\r
				editor.getStylesSet( function( stylesDefinitions ) {\r
					var styleName, style;\r
\r
					if ( stylesDefinitions ) {\r
						// Digg only those styles that apply to 'div'.\r
						for ( var i = 0; i < stylesDefinitions.length; i++ ) {\r
							var styleDefinition = stylesDefinitions[ i ];\r
							if ( styleDefinition.element && styleDefinition.element == 'div' ) {\r
								styleName = styleDefinition.name;\r
								styles[ styleName ] = style = new CKEDITOR.style( styleDefinition );\r
\r
								if ( editor.filter.check( style ) ) {\r
									// Populate the styles field options with style name.\r
									stylesField.items.push( [ styleName, styleName ] );\r
									stylesField.add( styleName, styleName );\r
								}\r
							}\r
						}\r
					}\r
\r
					// We should disable the content element\r
					// it if no options are available at all.\r
					stylesField[ stylesField.items.length > 1 ? 'enable' : 'disable' ]();\r
\r
					// Now setup the field value manually if dialog was opened on element. (#9689)\r
					setTimeout( function() {\r
						dialog._element && stylesField.setup( dialog._element );\r
					}, 0 );\r
				} );\r
			},\r
			onShow: function() {\r
				// Whether always create new container regardless of existed\r
				// ones.\r
				if ( command == 'editdiv' ) {\r
					// Try to discover the containers that already existed in\r
					// ranges\r
					// update dialog field values\r
					this.setupContent( this._element = CKEDITOR.plugins.div.getSurroundDiv( editor ) );\r
				}\r
			},\r
			onOk: function() {\r
				if ( command == 'editdiv' )\r
					containers = [ this._element ];\r
				else\r
					containers = createDiv( editor, true );\r
\r
				// Update elements attributes\r
				var size = containers.length;\r
				for ( var i = 0; i < size; i++ ) {\r
					this.commitContent( containers[ i ] );\r
\r
					// Remove empty 'style' attribute.\r
					!containers[ i ].getAttribute( 'style' ) && containers[ i ].removeAttribute( 'style' );\r
				}\r
\r
				this.hide();\r
			},\r
			onHide: function() {\r
				// Remove style only when editing existing DIV. (#6315)\r
				if ( command == 'editdiv' )\r
					this._element.removeCustomData( 'elementStyle' );\r
				delete this._element;\r
			}\r
		};\r
	}\r
\r
	CKEDITOR.dialog.add( 'creatediv', function( editor ) {\r
		return divDialog( editor, 'creatediv' );\r
	} );\r
\r
	CKEDITOR.dialog.add( 'editdiv', function( editor ) {\r
		return divDialog( editor, 'editdiv' );\r
	} );\r
\r
} )();\r
\r
/**\r
 * Whether to wrap the entire table instead of individual cells when creating a `<div>` in a table cell.\r
 *\r
 *		config.div_wrapTable = true;\r
 *\r
 * @cfg {Boolean} [div_wrapTable=false]\r
 * @member CKEDITOR.config\r
 */\r