enmi-conf.org: comparison wp/wp-admin/js/image-edit.js

Mercurial Mercurial > enmi-conf.org / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

wp/wp-admin/js/image-edit.js

changeset 21	48c4eec2b7e6
parent 19	3d72ae0968f4
child 22	8c2e4d02f4ef

equal deleted inserted replaced

-:7b1b88e27a20
+:48c4eec2b7e6
 (function($) {
 	var __ = wp.i18n.__;
 	/**
-	 * Contains all the methods to initialise and control the image editor.
+	 * Contains all the methods to initialize and control the image editor.
 	 *
 	 * @namespace imageEdit
 	 */
 	var imageEdit = window.imageEdit = {
 	iasapi : {},
 	hold : {},
 	postid : '',
 	_view : false,
 	/**
-	 * Handle crop tool clicks.
+	 * Enable crop tool.
 	 */
-	handleCropToolClick: function( postid, nonce, cropButton ) {
+	toggleCropTool: function( postid, nonce, cropButton ) {
 		var img = $( '#image-preview-' + postid ),
 			selection = this.iasapi.getSelection();
-		// Ensure selection is available, otherwise reset to full image.
+		imageEdit.toggleControls( cropButton );
-		if ( isNaN( selection.x1 ) ) {
+		var $el = $( cropButton );
-			this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': img.innerWidth(), 'y2': img.innerHeight(), 'width': img.innerWidth(), 'height': img.innerHeight() } );
+		var state = ( $el.attr( 'aria-expanded' ) === 'true' ) ? 'true' : 'false';
-			selection = this.iasapi.getSelection();
+		// Crop tools have been closed.
-		}
+		if ( 'false' === state ) {
+			// Cancel selection, but do not unset inputs.
-		// If we don't already have a selection, select the entire image.
+			this.iasapi.cancelSelection();
-		if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
+			imageEdit.setDisabled($('.imgedit-crop-clear'), 0);
-			this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
-			this.iasapi.setOptions( { show: true } );
-			this.iasapi.update();
 		} else {
+			imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
+			// Get values from inputs to restore previous selection.
+			var startX = ( $( '#imgedit-start-x-' + postid ).val() ) ? $('#imgedit-start-x-' + postid).val() : 0;
+			var startY = ( $( '#imgedit-start-y-' + postid ).val() ) ? $('#imgedit-start-y-' + postid).val() : 0;
+			var width = ( $( '#imgedit-sel-width-' + postid ).val() ) ? $('#imgedit-sel-width-' + postid).val() : img.innerWidth();
+			var height = ( $( '#imgedit-sel-height-' + postid ).val() ) ? $('#imgedit-sel-height-' + postid).val() : img.innerHeight();
+			// Ensure selection is available, otherwise reset to full image.
+			if ( isNaN( selection.x1 ) ) {
+				this.setCropSelection( postid, { 'x1': startX, 'y1': startY, 'x2': width, 'y2': height, 'width': width, 'height': height } );
+				selection = this.iasapi.getSelection();
+			}
+			// If we don't already have a selection, select the entire image.
+			if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
+				this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
+				this.iasapi.setOptions( { show: true } );
+				this.iasapi.update();
+			} else {
+				this.iasapi.setSelection( startX, startY, width, height, true );
+				this.iasapi.setOptions( { show: true } );
+				this.iasapi.update();
+			}
+		}
+	},
+	/**
+	 * Handle crop tool clicks.
+	 */
+	handleCropToolClick: function( postid, nonce, cropButton ) {
+		if ( cropButton.classList.contains( 'imgedit-crop-clear' ) ) {
+			this.iasapi.cancelSelection();
+			imageEdit.setDisabled($('.imgedit-crop-apply'), 0);
+			$('#imgedit-sel-width-' + postid).val('');
+			$('#imgedit-sel-height-' + postid).val('');
+			$('#imgedit-start-x-' + postid).val('0');
+			$('#imgedit-start-y-' + postid).val('0');
+			$('#imgedit-selection-' + postid).val('');
+		} else {
 			// Otherwise, perform the crop.
 			imageEdit.crop( postid, nonce , cropButton );
 		}
 	},
 		t.hold.xy_ratio = x / y;
 		t.hold.sizer = parseFloat( $('#imgedit-sizer-' + postid).val() );
 		t.postid = postid;
 		$('#imgedit-response-' + postid).empty();
+		$('#imgedit-panel-' + postid).on( 'keypress', function(e) {
+			var nonce = $( '#imgedit-nonce-' + postid ).val();
+			if ( e.which === 26 && e.ctrlKey ) {
+				imageEdit.undo( postid, nonce );
+			}
+			if ( e.which === 25 && e.ctrlKey ) {
+				imageEdit.redo( postid, nonce );
+			}
+		});
 		$('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {
 			var k = e.keyCode;
 			// Key codes 37 through 40 are the arrow keys.
 			if ( 36 < k && k < 41 ) {
 			} );
 		}
 	},
 	/**
+	 * Shows or hides image menu popup.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @memberof imageEdit
+	 *
+	 * @param {HTMLElement} el The activated control element.
+	 *
+	 * @return {boolean} Always returns false.
+	 */
+	togglePopup : function(el) {
+		var $el = $( el );
+		var $targetEl = $( el ).attr( 'aria-controls' );
+		var $target = $( '#' + $targetEl );
+		$el
+			.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
+		// Open menu and set z-index to appear above image crop area if it is enabled.
+		$target
+			.toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' ).css( { 'z-index' : 200000 } );
+		// Move focus to first item in menu when opening menu.
+		if ( 'true' === $el.attr( 'aria-expanded' ) ) {
+			$target.find( 'button' ).first().trigger( 'focus' );
+		}
+		return false;
+	},
+	/**
+	 * Observes whether the popup should remain open based on focus position.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @memberof imageEdit
+	 *
+	 * @param {HTMLElement} el The activated control element.
+	 *
+	 * @return {boolean} Always returns false.
+	 */
+	monitorPopup : function() {
+		var $parent = document.querySelector( '.imgedit-rotate-menu-container' );
+		var $toggle = document.querySelector( '.imgedit-rotate-menu-container .imgedit-rotate' );
+		setTimeout( function() {
+			var $focused = document.activeElement;
+			var $contains = $parent.contains( $focused );
+			// If $focused is defined and not inside the menu container, close the popup.
+			if ( $focused && ! $contains ) {
+				if ( 'true' === $toggle.getAttribute( 'aria-expanded' ) ) {
+					imageEdit.togglePopup( $toggle );
+				}
+			}
+		}, 100 );
+		return false;
+	},
+	/**
+	 * Navigate popup menu by arrow keys.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @memberof imageEdit
+	 *
+	 * @param {HTMLElement} el The current element.
+	 *
+	 * @return {boolean} Always returns false.
+	 */
+	browsePopup : function(el) {
+		var $el = $( el );
+		var $collection = $( el ).parent( '.imgedit-popup-menu' ).find( 'button' );
+		var $index = $collection.index( $el );
+		var $prev = $index - 1;
+		var $next = $index + 1;
+		var $last = $collection.length;
+		if ( $prev < 0 ) {
+			$prev = $last - 1;
+		}
+		if ( $next === $last ) {
+			$next = 0;
+		}
+		var $target = false;
+		if ( event.keyCode === 40 ) {
+			$target = $collection.get( $next );
+		} else if ( event.keyCode === 38 ) {
+			$target = $collection.get( $prev );
+		}
+		if ( $target ) {
+			$target.focus();
+			event.preventDefault();
+		}
+		return false;
+	},
+	/**
+	 * Close popup menu and reset focus on feature activation.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @memberof imageEdit
+	 *
+	 * @param {HTMLElement} el The current element.
+	 *
+	 * @return {boolean} Always returns false.
+	 */
+	closePopup : function(el) {
+		var $parent = $(el).parent( '.imgedit-popup-menu' );
+		var $controlledID = $parent.attr( 'id' );
+		var $target = $( 'button[aria-controls="' + $controlledID + '"]' );
+		$target
+			.attr( 'aria-expanded', 'false' ).trigger( 'focus' );
+		$parent
+			.toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' );
+		return false;
+	},
+	/**
 	 * Shows or hides the image edit help box.
 	 *
 	 * @since 2.9.0
 	 *
 	 * @memberof imageEdit
 		return false;
 	},
 	/**
+	 * Shows or hides image edit input fields when enabled.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @memberof imageEdit
+	 *
+	 * @param {HTMLElement} el The element to trigger the edit panel.
+	 *
+	 * @return {boolean} Always returns false.
+	 */
+	toggleControls : function(el) {
+		var $el = $( el );
+		var $target = $( '#' + $el.attr( 'aria-controls' ) );
+		$el
+			.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
+		$target
+			.parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' );
+		return false;
+	},
+	/**
 	 * Gets the value from the image edit target.
 	 *
 	 * The image edit target contains the image sizes where the (possible) changes
 	 * have to be applied to.
 	 *
 	 * @memberof imageEdit
 	 *
 	 * @param {number} postid The post ID.
 	 *
 	 * @return {string} The value from the imagedit-save-target input field when available,
-	 *                  or 'full' when not available.
+	 *                  'full' when not selected, or 'all' if it doesn't exist.
 	 */
-	getTarget : function(postid) {
+	getTarget : function( postid ) {
-		return $('input[name="imgedit-target-' + postid + '"]:checked', '#imgedit-save-target-' + postid).val() || 'full';
+		var element = $( '#imgedit-save-target-' + postid );
+		if ( element.length ) {
+			return element.find( 'input[name="imgedit-target-' + postid + '"]:checked' ).val() || 'full';
+		}
+		return 'all';
 	},
 	/**
 	 * Recalculates the height or width and keeps the original aspect ratio.
 	 *
 	 *
 	 * @return {void}
 	 */
 	scaleChanged : function( postid, x, el ) {
 		var w = $('#imgedit-scale-width-' + postid), h = $('#imgedit-scale-height-' + postid),
-		warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '';
+		warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '',
+		scaleBtn = $('#imgedit-scale-button');
 		if ( false === this.validateNumeric( el ) ) {
 			return;
 		}
 			w.val( w1 );
 		}
 		if ( ( h1 && h1 > this.hold.oh ) || ( w1 && w1 > this.hold.ow ) ) {
 			warn.css('visibility', 'visible');
+			scaleBtn.prop('disabled', true);
 		} else {
 			warn.css('visibility', 'hidden');
+			scaleBtn.prop('disabled', false);
 		}
 	},
 	/**
 	 * Gets the selected aspect ratio.
 				if ( (typeof callback !== 'undefined') && callback !== null ) {
 					callback();
 				}
 				if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) {
-					$('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
+					$('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
 				} else {
-					$('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
+					$('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
 				}
+				var successMessage = __( 'Image updated.' );
 				t.toggleEditor(postid, 0);
+				wp.a11y.speak( successMessage, 'assertive' );
 			})
 			.on( 'error', function() {
 				var errorMessage = __( 'Could not load the preview image. Please reload the page and try again.' );
 				$( '#imgedit-crop-' + postid )
 	 * @param {string} action The action to perform on the image.
 	 *                        The possible actions are: "scale" and "restore".
 	 *
 	 * @return {boolean|void} Executes a post request that refreshes the page
 	 *                        when the action is performed.
-	 *                        Returns false if a invalid action is given,
+	 *                        Returns false if an invalid action is given,
 	 *                        or when the action cannot be performed.
 	 */
 	action : function(postid, nonce, action) {
 		var t = this, data, w, h, fw, fh;
 					}
 				} );
 				btn.removeClass( 'button-activated' );
 				spin.removeClass( 'is-active' );
 			} );
-			// Initialise the Image Editor now that everything is ready.
+			// Initialize the Image Editor now that everything is ready.
 			imageEdit.init( postid );
 		} );
 		return dfd;
 	},
 			if ( ! elementToSetFocusTo.length ) {
 				elementToSetFocusTo = $( '.imgedit-wrap' ).find( ':tabbable:first' );
 			}
-			elementToSetFocusTo.trigger( 'focus' );
+			elementToSetFocusTo.attr( 'tabindex', '-1' ).trigger( 'focus' );
 		}, 100 );
 	},
 	/**
 	 * Initializes the cropping tool.
 	 */
 	initCrop : function(postid, image, parent) {
 		var t = this,
 			selW = $('#imgedit-sel-width-' + postid),
 			selH = $('#imgedit-sel-height-' + postid),
+			selX = $('#imgedit-start-x-' + postid),
+			selY = $('#imgedit-start-y-' + postid),
 			$image = $( image ),
 			$img;
 		// Already initialized?
 		if ( $image.data( 'imgAreaSelect' ) ) {
 			 *
 			 * @return {void}
 			 */
 			onSelectStart: function() {
 				imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1);
+				imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
+				imageEdit.setDisabled($('.imgedit-crop-apply'), 1);
 			},
 			/**
 			 * Event triggered when the selection is ended.
 			 *
 			 * @ignore
 			 *
 			 * @return {Object}
 			 */
 			onSelectEnd: function(img, c) {
 				imageEdit.setCropSelection(postid, c);
+				if ( ! $('#imgedit-crop > *').is(':visible') ) {
+					imageEdit.toggleControls($('.imgedit-crop.button'));
+				}
 			},
 			/**
 			 * Event triggered when the selection changes.
 			 *
 			 */
 			onSelectChange: function(img, c) {
 				var sizer = imageEdit.hold.sizer;
 				selW.val( imageEdit.round(c.width / sizer) );
 				selH.val( imageEdit.round(c.height / sizer) );
+				selX.val( imageEdit.round(c.x1 / sizer) );
+				selY.val( imageEdit.round(c.y1 / sizer) );
 			}
 		});
 	},
 	/**
 		if ( !c || ( c.width < 3 && c.height < 3 ) ) {
 			this.setDisabled( $( '.imgedit-crop', '#imgedit-panel-' + postid ), 1 );
 			this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 );
 			$('#imgedit-sel-width-' + postid).val('');
 			$('#imgedit-sel-height-' + postid).val('');
+			$('#imgedit-start-x-' + postid).val('0');
+			$('#imgedit-start-y-' + postid).val('0');
 			$('#imgedit-selection-' + postid).val('');
 			return false;
 		}
 		sel = { 'x': c.x1, 'y': c.y1, 'w': c.width, 'h': c.height };
 	 */
 	rotate : function(angle, postid, nonce, t) {
 		if ( $(t).hasClass('disabled') ) {
 			return false;
 		}
+		this.closePopup(t);
 		this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce);
 	},
 	/**
 	 * Flips the image.
 	 */
 	flip : function (axis, postid, nonce, t) {
 		if ( $(t).hasClass('disabled') ) {
 			return false;
 		}
+		this.closePopup(t);
 		this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce);
 	},
 	/**
 	 * Crops the image.
 		}
 		// Clear the selection fields after cropping.
 		$('#imgedit-sel-width-' + postid).val('');
 		$('#imgedit-sel-height-' + postid).val('');
+		$('#imgedit-start-x-' + postid).val('0');
+		$('#imgedit-start-y-' + postid).val('0');
 	},
 	/**
 	 * Undoes an image edit action.
 	 *
 	 *                        void when the value is not numeric or when the operation
 	 *                        is successful.
 	 */
 	setNumSelection : function( postid, el ) {
 		var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
+			elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid),
+			xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ),
 			x = this.intval( elX.val() ), y = this.intval( elY.val() ),
 			img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
 			sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
 		if ( false === this.validateNumeric( el ) ) {
 		if ( y < 1 ) {
 			elY.val('');
 			return false;
 		}
-		if ( x && y && ( sel = ias.getSelection() ) ) {
+		if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) {
 			x2 = sel.x1 + Math.round( x * sizer );
 			y2 = sel.y1 + Math.round( y * sizer );
-			x1 = sel.x1;
+			x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer );
-			y1 = sel.y1;
+			y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer );
 			if ( x2 > imgw ) {
 				x1 = 0;
 				x2 = imgw;
 				elX.val( Math.round( x2 / sizer ) );
 			if ( sel = this.iasapi.getSelection(true) ) {
 				r = Math.ceil( sel.y1 + ( ( sel.x2 - sel.x1 ) / ( x / y ) ) );
 				if ( r > h ) {
 					r = h;
+					var errorMessage = __( 'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.' );
+					$( '#imgedit-crop-' + postid )
+						.prepend( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + errorMessage + '</p></div>' );
+					wp.a11y.speak( errorMessage, 'assertive' );
 					if ( n ) {
-						$('#imgedit-crop-height-' + postid).val('');
+						$('#imgedit-crop-height-' + postid).val( '' );
 					} else {
-						$('#imgedit-crop-width-' + postid).val('');
+						$('#imgedit-crop-width-' + postid).val( '');
+					}
+				} else {
+					var error = $( '#imgedit-crop-' + postid ).find( '.notice-error' );
+					if ( 'undefined' !== typeof( error ) ) {
+						error.remove();
 					}
 				}
 				this.iasapi.setSelection( sel.x1, sel.y1, sel.x2, r );
 				this.iasapi.update();
 	 *
 	 * @return {void|boolean} Returns false if the value is not numeric,
 	 *                        void when it is.
 	 */
 	validateNumeric: function( el ) {
-		if ( ! this.intval( $( el ).val() ) ) {
+		if ( false === this.intval( $( el ).val() ) ) {
 			$( el ).val( '' );
 			return false;
 		}
 	}
 };

enmi-conf.org