1#@!#!123s

: / home / shubmkcj / designpitara.com / admin / ckeditor / samples / toolbarconfigurator / js /
Filename : fulltoolbareditor.js
back
/* exported ToolbarConfigurator */
/* global ToolbarConfigurator */

'use strict';

window.ToolbarConfigurator = {};

( function() {
	/**
	 * @class ToolbarConfigurator.FullToolbarEditor
	 * @constructor
	 */
	function FullToolbarEditor() {
		this.instanceid = 'fte' + CKEDITOR.tools.getNextId();
		this.textarea = new CKEDITOR.dom.element( 'textarea' );
		this.textarea.setAttributes( {
			id: this.instanceid,
			name: this.instanceid,
			contentEditable: true
		} );

		this.buttons = null;
		this.editorInstance = null;
	}

	// Expose the class.
	ToolbarConfigurator.FullToolbarEditor = FullToolbarEditor;

	/**
	 * @param {Function} callback
	 * @param {Object} cfg
	 */
	FullToolbarEditor.prototype.init = function( callback ) {
		var that = this;

		document.body.appendChild( this.textarea.$ );

		CKEDITOR.replace( this.instanceid );

		this.editorInstance = CKEDITOR.instances[ this.instanceid ];

		this.editorInstance.once( 'configLoaded', function( e ) {
			var cfg = e.editor.config;

			// We want all the buttons.
			delete cfg.removeButtons;
			delete cfg.toolbarGroups;
			delete cfg.toolbar;
			ToolbarConfigurator.AbstractToolbarModifier.extendPluginsConfig( cfg );

			e.editor.once( 'loaded', function() {
				that.buttons = FullToolbarEditor.toolbarToButtons( that.editorInstance.toolbar );

				that.buttonsByGroup = FullToolbarEditor.groupButtons( that.buttons );

				that.buttonNamesByGroup = that.groupButtonNamesByGroup( that.buttons );

				e.editor.container.hide();

				if ( typeof callback === 'function' )
					callback( that.buttons );
			} );
		} );
	};

	/**
	 * Group array of button names by their group parents.
	 *
	 * @param {Array} buttons
	 * @returns {Object}
	 */
	FullToolbarEditor.prototype.groupButtonNamesByGroup = function( buttons ) {
		var that = this,
			groups = FullToolbarEditor.groupButtons( buttons );

		for ( var groupName in groups ) {
			var currGroup = groups[ groupName ];

			groups[ groupName ] = FullToolbarEditor.map( currGroup, function( button ) {
				return that.getCamelCasedButtonName( button.name );
			} );
		}

		return groups;
	};

	/**
	 * Returns group literal.
	 *
	 * @param {String} name
	 * @returns {Object}
	 */
	FullToolbarEditor.prototype.getGroupByName = function( name ) {
		var groups = this.editorInstance.config.toolbarGroups || this.getFullToolbarGroupsConfig();

		var max = groups.length;
		for ( var i = 0; i < max; i += 1 ) {
			if ( groups[ i ].name === name )
				return groups[ i ];
		}

		return null;
	};

	/**
	 * @param {String} name
	 * @returns {String | null}
	 */
	FullToolbarEditor.prototype.getCamelCasedButtonName = function( name ) {
		var items = this.editorInstance.ui.items;

		for ( var key in items ) {
			if ( items[ key ].name == name )
				return key;
		}

		return null;
	};

	/**
	 * Returns full toolbarGroups config value which is used when
	 * there is no toolbarGroups field in config.
	 *
	 * @param {Boolean} [pickSeparators=false]
	 * @returns {Array}
	 */
	FullToolbarEditor.prototype.getFullToolbarGroupsConfig = function( pickSeparators ) {
		pickSeparators = ( pickSeparators === true ? true : false );

		var result = [],
			toolbarGroups = this.editorInstance.toolbar;

		var max = toolbarGroups.length;
		for ( var i = 0; i < max; i += 1 ) {
			var currentGroup = toolbarGroups[ i ],
				copiedGroup = {};

			if ( typeof currentGroup.name != 'string' ) {
				// this is not a group
				if ( pickSeparators ) {
					result.push( '/' );
				}
				continue;
			}

			copiedGroup.name = currentGroup.name;
			if ( currentGroup.groups )
				copiedGroup.groups = Array.prototype.slice.call( currentGroup.groups );

			result.push( copiedGroup );
		}

		return result;
	};

	/**
	 * Filters array items based on checker provided in second argument.
	 * Returns new array.
	 *
	 * @param {Array} arr
	 * @param {Function} checker
	 * @returns {Array}
	 */
	FullToolbarEditor.filter = function( arr, checker ) {
		var max = ( arr && arr.length ? arr.length : 0 ),
			result = [];

		for ( var i = 0; i < max; i += 1 ) {
			if ( checker( arr[ i ] ) )
				result.push( arr[ i ] );
		}

		return result;
	};

	/**
	 * Simplified http://underscorejs.org/#map functionality
	 *
	 * @param {Array | Object} enumerable
	 * @param {Function} modifier
	 * @returns {Array | Object}
	 */
	FullToolbarEditor.map = function( enumerable, modifier ) {
		var result;

		if ( CKEDITOR.tools.isArray( enumerable ) ) {
			result = [];

			var max = enumerable.length;
			for ( var i = 0; i < max; i += 1 )
				result.push( modifier( enumerable[ i ] ) );
		} else {
			result = {};

			for ( var key in enumerable )
				result[ key ] = modifier( enumerable[ key ] );
		}

		return result;
	};

	/**
	 * Group buttons by their parent names.
	 *
	 * @static
	 * @param {Array} buttons
	 * @returns {Object} The object (`name => group`) representing CKEDITOR.ui.button or CKEDITOR.ui.richCombo
	 */
	FullToolbarEditor.groupButtons = function( buttons ) {
		var groups = {};

		var max = buttons.length;
		for ( var i = 0; i < max; i += 1 ) {
			var currBtn = buttons[ i ],
				currBtnGroupName = currBtn.toolbar.split( ',' )[ 0 ];

			groups[ currBtnGroupName ] = groups[ currBtnGroupName ] || [];

			groups[ currBtnGroupName ].push( currBtn );
		}

		return groups;
	};

	/**
	 * Pick all buttons from toolbar.
	 *
	 * @static
	 * @param {Array} groups
	 * @returns {Array}
	 */
	FullToolbarEditor.toolbarToButtons = function( groups ) {
		var buttons = [];

		var max = groups.length;
		for ( var i = 0; i < max; i += 1 ) {
			var currentGroup = groups[ i ];

			if ( typeof currentGroup == 'object' )
				buttons = buttons.concat( FullToolbarEditor.groupToButtons( groups[ i ] ) );
		}

		return buttons;
	};

	/**
	 * Creates HTML button representation for view.
	 *
	 * @static
	 * @param {CKEDITOR.ui.button | CKEDITOR.ui.richCombo} button
	 * @returns {CKEDITOR.dom.element}
	 */
	FullToolbarEditor.createToolbarButton = function( button ) {
		var $button = new CKEDITOR.dom.element( 'a' ),
			icon = FullToolbarEditor.createIcon( button.name, button.icon, button.command );

		$button.setStyle( 'float', 'none' );

		$button.addClass( 'cke_' + ( CKEDITOR.lang.dir == 'rtl' ? 'rtl' : 'ltr' ) );

		if ( button instanceof CKEDITOR.ui.button ) {
			$button.addClass( 'cke_button' );
			$button.addClass( 'cke_toolgroup' );

			$button.append( icon );
		} else if ( CKEDITOR.ui.richCombo && button instanceof CKEDITOR.ui.richCombo ) {
			var comboLabel = new CKEDITOR.dom.element( 'span' ),
				comboOpen = new CKEDITOR.dom.element( 'span' ),
				comboArrow = new CKEDITOR.dom.element( 'span' );

			$button.addClass( 'cke_combo_button' );

			comboLabel.addClass( 'cke_combo_text' );
			comboLabel.addClass( 'cke_combo_inlinelabel' );
			comboLabel.setText( button.label );

			comboOpen.addClass( 'cke_combo_open' );
			comboArrow.addClass( 'cke_combo_arrow' );
			comboOpen.append( comboArrow );

			$button.append( comboLabel );
			$button.append( comboOpen );
		}

		return $button;
	};

	/**
	 * Create and return icon element.
	 *
	 * @param {String} name
	 * @param {String} icon
	 * @param {String} command
	 * @static
	 * @returns {CKEDITOR.dom.element}
	 */
	FullToolbarEditor.createIcon = function( name, icon, command ) {
		var iconStyle = CKEDITOR.skin.getIconStyle( name, ( CKEDITOR.lang.dir == 'rtl' ) );

		// We don't know exactly how to get icon style. Especially for extra plugins,
		// Which definition may vary.
		iconStyle = iconStyle || CKEDITOR.skin.getIconStyle( icon, ( CKEDITOR.lang.dir == 'rtl' ) );
		iconStyle = iconStyle || CKEDITOR.skin.getIconStyle( command, ( CKEDITOR.lang.dir == 'rtl' ) );

		var iconElement = new CKEDITOR.dom.element( 'span' );

		iconElement.addClass( 'cke_button_icon' );
		iconElement.addClass( 'cke_button__' + name + '_icon' );
		iconElement.setAttribute( 'style', iconStyle );
		iconElement.setStyle( 'float', 'none' );

		return iconElement;
	};

	/**
	 * Create and return button element
	 *
	 * @param {String} text
	 * @param {String} cssClasses
	 * @returns {CKEDITOR.dom.element}
	 */
	FullToolbarEditor.createButton = function( text, cssClasses ) {
		var $button = new CKEDITOR.dom.element( 'button' );

		$button.addClass( 'button-a' );

		$button.setAttribute( 'type', 'button' );

		if ( typeof cssClasses == 'string' ) {
			cssClasses = cssClasses.split( ' ' );

			var i = cssClasses.length;
			while ( i-- ) {
				$button.addClass( cssClasses[ i ] );
			}
		}

		$button.setHtml( text );

		return $button;
	};

	/**
	 * @static
	 * @param {Object} group
	 * @returns {Array} representing HTML buttons for view
	 */
	FullToolbarEditor.groupToButtons = function( group ) {
		var buttons = [],
			items = group.items;

		var max = items ? items.length : 0;
		for ( var i = 0; i < max; i += 1 ) {
			var item = items[ i ];

			if ( item instanceof CKEDITOR.ui.button || CKEDITOR.ui.richCombo && item instanceof CKEDITOR.ui.richCombo ) {
				item.$ = FullToolbarEditor.createToolbarButton( item );
				buttons.push( item );
			}
		}

		return buttons;
	};

} )();