radiant-ck_editor_filter-extension 0.2.8 → 0.2.9

data/public/javascripts/extensions/ck_editor_filter/ckeditor/plugins/image2/dialogs/image2.js

@@ -0,0 +1,550 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+/**
+ * @fileOverview Image plugin based on Widgets API
+ */
+
+'use strict';
+
+CKEDITOR.dialog.add( 'image2', function( editor ) {
+
+	// RegExp: 123, 123px, empty string ""
+	var regexGetSizeOrEmpty = /(^\s*(\d+)(px)?\s*$)|^$/i,
+
+		lockButtonId = CKEDITOR.tools.getNextId(),
+		resetButtonId = CKEDITOR.tools.getNextId(),
+
+		lang = editor.lang.image2,
+		commonLang = editor.lang.common,
+
+		lockResetStyle = 'margin-top:18px;width:40px;height:20px;',
+		lockResetHtml = new CKEDITOR.template(
+			'<div>' +
+				'<a href="javascript:void(0)" tabindex="-1" title="' + lang.lockRatio + '" class="cke_btn_locked" id="{lockButtonId}" role="checkbox">' +
+					'<span class="cke_icon"></span>' +
+					'<span class="cke_label">' + lang.lockRatio + '</span>' +
+				'</a>' +
+
+				'<a href="javascript:void(0)" tabindex="-1" title="' + lang.resetSize + '" class="cke_btn_reset" id="{resetButtonId}" role="button">' +
+					'<span class="cke_label">' + lang.resetSize + '</span>' +
+				'</a>' +
+			'</div>' ).output( {
+				lockButtonId: lockButtonId,
+				resetButtonId: resetButtonId
+			} ),
+
+		helpers = CKEDITOR.plugins.image2,
+
+		// Editor instance configuration.
+		config = editor.config,
+
+		// Content restrictions defined by the widget which
+		// impact on dialog structure and presence of fields.
+		features = editor.widgets.registered.image.features,
+
+		// Functions inherited from image2 plugin.
+		getNatural = helpers.getNatural,
+
+		// Global variables referring to the dialog's context.
+		doc, widget, image,
+
+		// Global variable referring to this dialog's image pre-loader.
+		preLoader,
+
+		// Global variables holding the original size of the image.
+		domWidth, domHeight,
+
+		// Global variables related to image pre-loading.
+		preLoadedWidth, preLoadedHeight, srcChanged,
+
+		// Global variables related to size locking.
+		lockRatio, userDefinedLock,
+
+		// Global variables referring to dialog fields and elements.
+		lockButton, resetButton, widthField, heightField,
+
+		natural;
+
+	// Validates dimension. Allowed values are:
+	// "123px", "123", "" (empty string)
+	function validateDimension() {
+		var match = this.getValue().match( regexGetSizeOrEmpty ),
+			isValid = !!( match && parseInt( match[ 1 ], 10 ) !== 0 );
+
+		if ( !isValid )
+			alert( commonLang[ 'invalid' + CKEDITOR.tools.capitalize( this.id ) ] ); // jshint ignore:line
+
+		return isValid;
+	}
+
+	// Creates a function that pre-loads images. The callback function passes
+	// [image, width, height] or null if loading failed.
+	//
+	// @returns {Function}
+	function createPreLoader() {
+		var image = doc.createElement( 'img' ),
+			listeners = [];
+
+		function addListener( event, callback ) {
+			listeners.push( image.once( event, function( evt ) {
+				removeListeners();
+				callback( evt );
+			} ) );
+		}
+
+		function removeListeners() {
+			var l;
+
+			while ( ( l = listeners.pop() ) )
+				l.removeListener();
+		}
+
+		// @param {String} src.
+		// @param {Function} callback.
+		return function( src, callback, scope ) {
+			addListener( 'load', function() {
+				// Don't use image.$.(width|height) since it's buggy in IE9-10 (#11159)
+				var dimensions = getNatural( image );
+
+				callback.call( scope, image, dimensions.width, dimensions.height );
+			} );
+
+			addListener( 'error', function() {
+				callback( null );
+			} );
+
+			addListener( 'abort', function() {
+				callback( null );
+			} );
+
+			image.setAttribute( 'src',
+				( config.baseHref || '' ) + src + '?' + Math.random().toString( 16 ).substring( 2 ) );
+		};
+	}
+
+	// This function updates width and height fields once the
+	// "src" field is altered. Along with dimensions, also the
+	// dimensions lock is adjusted.
+	function onChangeSrc() {
+		var value = this.getValue();
+
+		toggleDimensions( false );
+
+		// Remember that src is different than default.
+		if ( value !== widget.data.src ) {
+			// Update dimensions of the image once it's preloaded.
+			preLoader( value, function( image, width, height ) {
+				// Re-enable width and height fields.
+				toggleDimensions( true );
+
+				// There was problem loading the image. Unlock ratio.
+				if ( !image )
+					return toggleLockRatio( false );
+
+				// Fill width field with the width of the new image.
+				widthField.setValue( width );
+
+				// Fill height field with the height of the new image.
+				heightField.setValue( height );
+
+				// Cache the new width.
+				preLoadedWidth = width;
+
+				// Cache the new height.
+				preLoadedHeight = height;
+
+				// Check for new lock value if image exist.
+				toggleLockRatio( helpers.checkHasNaturalRatio( image ) );
+			} );
+
+			srcChanged = true;
+		}
+
+		// Value is the same as in widget data but is was
+		// modified back in time. Roll back dimensions when restoring
+		// default src.
+		else if ( srcChanged ) {
+			// Re-enable width and height fields.
+			toggleDimensions( true );
+
+			// Restore width field with cached width.
+			widthField.setValue( domWidth );
+
+			// Restore height field with cached height.
+			heightField.setValue( domHeight );
+
+			// Src equals default one back again.
+			srcChanged = false;
+		}
+
+		// Value is the same as in widget data and it hadn't
+		// been modified.
+		else {
+			// Re-enable width and height fields.
+			toggleDimensions( true );
+		}
+	}
+
+	function onChangeDimension() {
+		// If ratio is un-locked, then we don't care what's next.
+		if ( !lockRatio )
+			return;
+
+		var value = this.getValue();
+
+		// No reason to auto-scale or unlock if the field is empty.
+		if ( !value )
+			return;
+
+		// If the value of the field is invalid (e.g. with %), unlock ratio.
+		if ( !value.match( regexGetSizeOrEmpty ) )
+			toggleLockRatio( false );
+
+		// No automatic re-scale when dimension is '0'.
+		if ( value === '0' )
+			return;
+
+		var isWidth = this.id == 'width',
+			// If dialog opened for the new image, domWidth and domHeight
+			// will be empty. Use dimensions from pre-loader in such case instead.
+			width = domWidth || preLoadedWidth,
+			height = domHeight || preLoadedHeight;
+
+		// If changing width, then auto-scale height.
+		if ( isWidth )
+			value = Math.round( height * ( value / width ) );
+
+		// If changing height, then auto-scale width.
+		else
+			value = Math.round( width * ( value / height ) );
+
+		// If the value is a number, apply it to the other field.
+		if ( !isNaN( value ) )
+			( isWidth ? heightField : widthField ).setValue( value );
+	}
+
+	// Set-up function for lock and reset buttons:
+	// 	* Adds lock and reset buttons to focusables. Check if button exist first
+	// 	  because it may be disabled e.g. due to ACF restrictions.
+	// 	* Register mouseover and mouseout event listeners for UI manipulations.
+	// 	* Register click event listeners for buttons.
+	function onLoadLockReset() {
+		var dialog = this.getDialog();
+
+		function setupMouseClasses( el ) {
+			el.on( 'mouseover', function() {
+				this.addClass( 'cke_btn_over' );
+			}, el );
+
+			el.on( 'mouseout', function() {
+				this.removeClass( 'cke_btn_over' );
+			}, el );
+		}
+
+		// Create references to lock and reset buttons for this dialog instance.
+		lockButton = doc.getById( lockButtonId );
+		resetButton = doc.getById( resetButtonId );
+
+		// Activate (Un)LockRatio button
+		if ( lockButton ) {
+			// Consider that there's an additional focusable field
+			// in the dialog when the "browse" button is visible.
+			dialog.addFocusable( lockButton, 4 + hasFileBrowser );
+
+			lockButton.on( 'click', function( evt ) {
+				toggleLockRatio();
+				evt.data && evt.data.preventDefault();
+			}, this.getDialog() );
+
+			setupMouseClasses( lockButton );
+		}
+
+		// Activate the reset size button.
+		if ( resetButton ) {
+			// Consider that there's an additional focusable field
+			// in the dialog when the "browse" button is visible.
+			dialog.addFocusable( resetButton, 5 + hasFileBrowser );
+
+			// Fills width and height fields with the original dimensions of the
+			// image (stored in widget#data since widget#init).
+			resetButton.on( 'click', function( evt ) {
+				// If there's a new image loaded, reset button should revert
+				// cached dimensions of pre-loaded DOM element.
+				if ( srcChanged ) {
+					widthField.setValue( preLoadedWidth );
+					heightField.setValue( preLoadedHeight );
+				}
+
+				// If the old image remains, reset button should revert
+				// dimensions as loaded when the dialog was first shown.
+				else {
+					widthField.setValue( domWidth );
+					heightField.setValue( domHeight );
+				}
+
+				evt.data && evt.data.preventDefault();
+			}, this );
+
+			setupMouseClasses( resetButton );
+		}
+	}
+
+	function toggleLockRatio( enable ) {
+		// No locking if there's no radio (i.e. due to ACF).
+		if ( !lockButton )
+			return;
+
+		if ( typeof enable == 'boolean' ) {
+			// If user explicitly wants to decide whether
+			// to lock or not, don't do anything.
+			if ( userDefinedLock )
+				return;
+
+			lockRatio = enable;
+		}
+
+		// Undefined. User changed lock value.
+		else {
+			var width = widthField.getValue(),
+				height;
+
+			userDefinedLock = true;
+			lockRatio = !lockRatio;
+
+			// Automatically adjust height to width to match
+			// the original ratio (based on dom- dimensions).
+			if ( lockRatio && width ) {
+				height = domHeight / domWidth * width;
+
+				if ( !isNaN( height ) )
+					heightField.setValue( Math.round( height ) );
+			}
+		}
+
+		lockButton[ lockRatio ? 'removeClass' : 'addClass' ]( 'cke_btn_unlocked' );
+		lockButton.setAttribute( 'aria-checked', lockRatio );
+
+		// Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE
+		if ( CKEDITOR.env.hc ) {
+			var icon = lockButton.getChild( 0 );
+			icon.setHtml( lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
+		}
+	}
+
+	function toggleDimensions( enable ) {
+		var method = enable ? 'enable' : 'disable';
+
+		widthField[ method ]();
+		heightField[ method ]();
+	}
+
+	var hasFileBrowser = !!( config.filebrowserImageBrowseUrl || config.filebrowserBrowseUrl ),
+		srcBoxChildren = [
+			{
+				id: 'src',
+				type: 'text',
+				label: commonLang.url,
+				onKeyup: onChangeSrc,
+				onChange: onChangeSrc,
+				setup: function( widget ) {
+					this.setValue( widget.data.src );
+				},
+				commit: function( widget ) {
+					widget.setData( 'src', this.getValue() );
+				},
+				validate: CKEDITOR.dialog.validate.notEmpty( lang.urlMissing )
+			}
+		];
+
+	// Render the "Browse" button on demand to avoid an "empty" (hidden child)
+	// space in dialog layout that distorts the UI.
+	if ( hasFileBrowser ) {
+		srcBoxChildren.push( {
+			type: 'button',
+			id: 'browse',
+			// v-align with the 'txtUrl' field.
+			// TODO: We need something better than a fixed size here.
+			style: 'display:inline-block;margin-top:14px;',
+			align: 'center',
+			label: editor.lang.common.browseServer,
+			hidden: true,
+			filebrowser: 'info:src'
+		} );
+	}
+
+	return {
+		title: lang.title,
+		minWidth: 250,
+		minHeight: 100,
+		onLoad: function() {
+			// Create a "global" reference to the document for this dialog instance.
+			doc = this._.element.getDocument();
+
+			// Create a pre-loader used for determining dimensions of new images.
+			preLoader = createPreLoader();
+		},
+		onShow: function() {
+			// Create a "global" reference to edited widget.
+			widget = this.widget;
+
+			// Create a "global" reference to widget's image.
+			image = widget.parts.image;
+
+			// Reset global variables.
+			srcChanged = userDefinedLock = lockRatio = false;
+
+			// Natural dimensions of the image.
+			natural = getNatural( image );
+
+			// Get the natural width of the image.
+			preLoadedWidth = domWidth = natural.width;
+
+			// Get the natural height of the image.
+			preLoadedHeight = domHeight = natural.height;
+		},
+		contents: [
+			{
+				id: 'info',
+				label: lang.infoTab,
+				elements: [
+					{
+						type: 'vbox',
+						padding: 0,
+						children: [
+							{
+								type: 'hbox',
+								widths: [ '100%' ],
+								children: srcBoxChildren
+							}
+						]
+					},
+					{
+						id: 'alt',
+						type: 'text',
+						label: lang.alt,
+						setup: function( widget ) {
+							this.setValue( widget.data.alt );
+						},
+						commit: function( widget ) {
+							widget.setData( 'alt', this.getValue() );
+						}
+					},
+					{
+						type: 'hbox',
+						widths: [ '25%', '25%', '50%' ],
+						requiredContent: features.dimension.requiredContent,
+						children: [
+							{
+								type: 'text',
+								width: '45px',
+								id: 'width',
+								label: commonLang.width,
+								validate: validateDimension,
+								onKeyUp: onChangeDimension,
+								onLoad: function() {
+									widthField = this;
+								},
+								setup: function( widget ) {
+									this.setValue( widget.data.width );
+								},
+								commit: function( widget ) {
+									widget.setData( 'width', this.getValue() );
+								}
+							},
+							{
+								type: 'text',
+								id: 'height',
+								width: '45px',
+								label: commonLang.height,
+								validate: validateDimension,
+								onKeyUp: onChangeDimension,
+								onLoad: function() {
+									heightField = this;
+								},
+								setup: function( widget ) {
+									this.setValue( widget.data.height );
+								},
+								commit: function( widget ) {
+									widget.setData( 'height', this.getValue() );
+								}
+							},
+							{
+								id: 'lock',
+								type: 'html',
+								style: lockResetStyle,
+								onLoad: onLoadLockReset,
+								setup: function( widget ) {
+									toggleLockRatio( widget.data.lock );
+								},
+								commit: function( widget ) {
+									widget.setData( 'lock', lockRatio );
+								},
+								html: lockResetHtml
+							}
+						]
+					},
+					{
+						type: 'hbox',
+						id: 'alignment',
+						requiredContent: features.align.requiredContent,
+						children: [
+							{
+								id: 'align',
+								type: 'radio',
+								items: [
+									[ commonLang.alignNone, 'none' ],
+									[ commonLang.alignLeft, 'left' ],
+									[ commonLang.alignCenter, 'center' ],
+									[ commonLang.alignRight, 'right' ]
+								],
+								label: commonLang.align,
+								setup: function( widget ) {
+									this.setValue( widget.data.align );
+								},
+								commit: function( widget ) {
+									widget.setData( 'align', this.getValue() );
+								}
+							}
+						]
+					},
+					{
+						id: 'hasCaption',
+						type: 'checkbox',
+						label: lang.captioned,
+						requiredContent: features.caption.requiredContent,
+						setup: function( widget ) {
+							this.setValue( widget.data.hasCaption );
+						},
+						commit: function( widget ) {
+							widget.setData( 'hasCaption', this.getValue() );
+						}
+					}
+				]
+			},
+			{
+				id: 'Upload',
+				hidden: true,
+				filebrowser: 'uploadButton',
+				label: lang.uploadTab,
+				elements: [
+					{
+						type: 'file',
+						id: 'upload',
+						label: lang.btnUpload,
+						style: 'height:40px'
+					},
+					{
+						type: 'fileButton',
+						id: 'uploadButton',
+						filebrowser: 'info:src',
+						label: lang.btnUpload,
+						'for': [ 'Upload', 'upload' ]
+					}
+				]
+			}
+		]
+	};
+} );