Initial commit

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

/**\r
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.\r
 * For licensing, see LICENSE.md or http://ckeditor.com/license\r
 */\r
\r
( function() {\r
\r
	CKEDITOR.dialog.add( 'templates', function( editor ) {\r
		// Constructs the HTML view of the specified templates data.\r
		function renderTemplatesList( container, templatesDefinitions ) {\r
			// clear loading wait text.\r
			container.setHtml( '' );\r
\r
			for ( var i = 0, totalDefs = templatesDefinitions.length; i < totalDefs; i++ ) {\r
				var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),\r
					imagesPath = definition.imagesPath,\r
					templates = definition.templates,\r
					count = templates.length;\r
\r
				for ( var j = 0; j < count; j++ ) {\r
					var template = templates[ j ],\r
						item = createTemplateItem( template, imagesPath );\r
					item.setAttribute( 'aria-posinset', j + 1 );\r
					item.setAttribute( 'aria-setsize', count );\r
					container.append( item );\r
				}\r
			}\r
		}\r
\r
		function createTemplateItem( template, imagesPath ) {\r
			var item = CKEDITOR.dom.element.createFromHtml( '<a href="javascript:void(0)" tabIndex="-1" role="option" >' +\r
				'<div class="cke_tpl_item"></div>' +\r
				'</a>' );\r
\r
			// Build the inner HTML of our new item DIV.\r
			var html = '<table style="width:350px;" class="cke_tpl_preview" role="presentation"><tr>';\r
\r
			if ( template.image && imagesPath ) {\r
				html += '<td class="cke_tpl_preview_img"><img src="' +\r
					CKEDITOR.getUrl( imagesPath + template.image ) + '"' +\r
					( CKEDITOR.env.ie6Compat ? ' onload="this.width=this.width"' : '' ) + ' alt="" title=""></td>';\r
			}\r
\r
			html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';\r
\r
			if ( template.description )\r
				html += '<span>' + template.description + '</span>';\r
\r
			html += '</td></tr></table>';\r
\r
			item.getFirst().setHtml( html );\r
\r
			item.on( 'click', function() {\r
				insertTemplate( template.html );\r
			} );\r
\r
			return item;\r
		}\r
\r
		// Insert the specified template content into editor.\r
		// @param {Number} index\r
		function insertTemplate( html ) {\r
			var dialog = CKEDITOR.dialog.getCurrent(),\r
				isReplace = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );\r
\r
			if ( isReplace ) {\r
				editor.fire( 'saveSnapshot' );\r
				// Everything should happen after the document is loaded (#4073).\r
				editor.setData( html, function() {\r
					dialog.hide();\r
\r
					// Place the cursor at the first editable place.\r
					var range = editor.createRange();\r
					range.moveToElementEditStart( editor.editable() );\r
					range.select();\r
					setTimeout( function() {\r
						editor.fire( 'saveSnapshot' );\r
					}, 0 );\r
\r
				} );\r
			} else {\r
				editor.insertHtml( html );\r
				dialog.hide();\r
			}\r
		}\r
\r
		function keyNavigation( evt ) {\r
			var target = evt.data.getTarget(),\r
				onList = listContainer.equals( target );\r
\r
			// Keyboard navigation for template list.\r
			if ( onList || listContainer.contains( target ) ) {\r
				var keystroke = evt.data.getKeystroke(),\r
					items = listContainer.getElementsByTag( 'a' ),\r
					focusItem;\r
\r
				if ( items ) {\r
					// Focus not yet onto list items?\r
					if ( onList )\r
						focusItem = items.getItem( 0 );\r
					else {\r
						switch ( keystroke ) {\r
							case 40: // ARROW-DOWN\r
								focusItem = target.getNext();\r
								break;\r
\r
							case 38: // ARROW-UP\r
								focusItem = target.getPrevious();\r
								break;\r
\r
							case 13: // ENTER\r
							case 32: // SPACE\r
								target.fire( 'click' );\r
						}\r
					}\r
\r
					if ( focusItem ) {\r
						focusItem.focus();\r
						evt.data.preventDefault();\r
					}\r
				}\r
			}\r
		}\r
\r
		// Load skin at first.\r
		var plugin = CKEDITOR.plugins.get( 'templates' );\r
		CKEDITOR.document.appendStyleSheet( CKEDITOR.getUrl( plugin.path + 'dialogs/templates.css' ) );\r
\r
\r
		var listContainer;\r
\r
		var templateListLabelId = 'cke_tpl_list_label_' + CKEDITOR.tools.getNextNumber(),\r
			lang = editor.lang.templates,\r
			config = editor.config;\r
		return {\r
			title: editor.lang.templates.title,\r
\r
			minWidth: CKEDITOR.env.ie ? 440 : 400,\r
			minHeight: 340,\r
\r
			contents: [ {\r
				id: 'selectTpl',\r
				label: lang.title,\r
				elements: [ {\r
					type: 'vbox',\r
					padding: 5,\r
					children: [ {\r
						id: 'selectTplText',\r
						type: 'html',\r
						html: '<span>' +\r
							lang.selectPromptMsg +\r
							'</span>'\r
					},\r
					{\r
						id: 'templatesList',\r
						type: 'html',\r
						focus: true,\r
						html: '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="' + templateListLabelId + '">' +\r
								'<div class="cke_tpl_loading"><span></span></div>' +\r
							'</div>' +\r
							'<span class="cke_voice_label" id="' + templateListLabelId + '">' + lang.options + '</span>'\r
					},\r
					{\r
						id: 'chkInsertOpt',\r
						type: 'checkbox',\r
						label: lang.insertOption,\r
						'default': config.templates_replaceContent\r
					} ]\r
				} ]\r
			} ],\r
\r
			buttons: [ CKEDITOR.dialog.cancelButton ],\r
\r
			onShow: function() {\r
				var templatesListField = this.getContentElement( 'selectTpl', 'templatesList' );\r
				listContainer = templatesListField.getElement();\r
\r
				CKEDITOR.loadTemplates( config.templates_files, function() {\r
					var templates = ( config.templates || 'default' ).split( ',' );\r
\r
					if ( templates.length ) {\r
						renderTemplatesList( listContainer, templates );\r
						templatesListField.focus();\r
					} else {\r
						listContainer.setHtml( '<div class="cke_tpl_empty">' +\r
							'<span>' + lang.emptyListMsg + '</span>' +\r
							'</div>' );\r
					}\r
				} );\r
\r
				this._.element.on( 'keydown', keyNavigation );\r
			},\r
\r
			onHide: function() {\r
				this._.element.removeListener( 'keydown', keyNavigation );\r
			}\r
		};\r
	} );\r
} )();\r