');
+ $('#imgedit-response-' + postid).html('
');
imageEdit.close(postid);
return;
}
@@ -283,16 +324,29 @@ var imageEdit = window.imageEdit = {
$('#imgedit-response-' + postid).html('
');
}
- imageEdit.close(postid);
+ if ( self._view ) {
+ self._view.save();
+ } else {
+ imageEdit.close(postid);
+ }
});
},
- open : function(postid, nonce) {
- var data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
+ open : function( postid, nonce, view ) {
+ this._view = view;
+
+ var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
- btn.prop('disabled', true);
- spin.show();
+ /*
+ * Instead of disabling the button, which causes a focus loss and makes screen
+ * readers announce "unavailable", return if the button was already clicked.
+ */
+ if ( btn.hasClass( 'button-activated' ) ) {
+ return;
+ }
+
+ spin.addClass( 'is-active' );
data = {
'action': 'image-editor',
@@ -301,13 +355,25 @@ var imageEdit = window.imageEdit = {
'do': 'open'
};
- elem.load(ajaxurl, data, function() {
- elem.fadeIn('fast');
+ dfd = $.ajax({
+ url: ajaxurl,
+ type: 'post',
+ data: data,
+ beforeSend: function() {
+ btn.addClass( 'button-activated' );
+ }
+ }).done(function( html ) {
+ elem.html( html );
head.fadeOut('fast', function(){
- btn.removeAttr('disabled');
- spin.hide();
+ elem.fadeIn('fast');
+ btn.removeClass( 'button-activated' );
+ spin.removeClass( 'is-active' );
});
+ // Initialise the Image Editor now that everything is ready.
+ imageEdit.init( postid );
});
+
+ return dfd;
},
imgLoaded : function(postid) {
@@ -316,11 +382,15 @@ var imageEdit = window.imageEdit = {
this.initCrop(postid, img, parent);
this.setCropSelection(postid, 0);
this.toggleEditor(postid, 0);
+ // Editor is ready, move focus to the first focusable element.
+ $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
},
initCrop : function(postid, image, parent) {
- var t = this, selW = $('#imgedit-sel-width-' + postid),
- selH = $('#imgedit-sel-height-' + postid);
+ var t = this,
+ selW = $('#imgedit-sel-width-' + postid),
+ selH = $('#imgedit-sel-height-' + postid),
+ $img;
t.iasapi = $(image).imgAreaSelect({
parent: parent,
@@ -330,7 +400,13 @@ var imageEdit = window.imageEdit = {
minWidth: 3,
minHeight: 3,
- onInit: function() {
+ onInit: function( img ) {
+ // Ensure that the imgareaselect wrapper elements are position:absolute
+ // (even if we're in a position:fixed modal)
+ $img = $( img );
+ $img.next().css( 'position', 'absolute' )
+ .nextAll( '.imgareaselect-outer' ).css( 'position', 'absolute' );
+
parent.children().mousedown(function(e){
var ratio = false, sel, defRatio;
@@ -363,10 +439,9 @@ var imageEdit = window.imageEdit = {
},
setCropSelection : function(postid, c) {
- var sel, min = $('#imgedit-minthumb-' + postid).val() || '128:128',
- sizer = this.hold.sizer;
- min = min.split(':');
- c = c || 0;
+ var sel;
+
+ c = c || 0;
if ( !c || ( c.width < 3 && c.height < 3 ) ) {
this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 0);
@@ -377,12 +452,6 @@ var imageEdit = window.imageEdit = {
return false;
}
- if ( c.width < (min[0] * sizer) && c.height < (min[1] * sizer) ) {
- this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 0);
- $('#imgedit-selection-' + postid).val('');
- return false;
- }
-
sel = { 'x': c.x1, 'y': c.y1, 'w': c.width, 'h': c.height };
this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 1);
$('#imgedit-selection-' + postid).val( JSON.stringify(sel) );
@@ -397,10 +466,25 @@ var imageEdit = window.imageEdit = {
this.iasapi = {};
this.hold = {};
- $('#image-editor-' + postid).fadeOut('fast', function() {
- $('#media-head-' + postid).fadeIn('fast');
- $(this).empty();
- });
+
+ // If we've loaded the editor in the context of a Media Modal, then switch to the previous view,
+ // whatever that might have been.
+ if ( this._view ){
+ this._view.back();
+ }
+
+ // In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
+ else {
+ $('#image-editor-' + postid).fadeOut('fast', function() {
+ $( '#media-head-' + postid ).fadeIn( 'fast', function() {
+ // Move focus back to the Edit Image button. Runs also when saving.
+ $( '#imgedit-open-btn-' + postid ).focus();
+ });
+ $(this).empty();
+ });
+ }
+
+
},
notsaved : function(postid) {
@@ -419,9 +503,9 @@ var imageEdit = window.imageEdit = {
addStep : function(op, postid, nonce) {
var t = this, elem = $('#imgedit-history-' + postid),
- history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
- undone = $('#imgedit-undone-' + postid),
- pop = t.intval(undone.val());
+ history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
+ undone = $( '#imgedit-undone-' + postid ),
+ pop = t.intval( undone.val() );
while ( pop > 0 ) {
history.pop();
@@ -482,10 +566,14 @@ var imageEdit = window.imageEdit = {
elem.val(pop);
t.refreshEditor(postid, nonce, function() {
var elem = $('#imgedit-history-' + postid),
- history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
+ history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
t.setDisabled($('#image-redo-' + postid), true);
t.setDisabled(button, pop < history.length);
+ // When undo gets disabled, move focus to the redo button to avoid a focus loss.
+ if ( history.length === pop ) {
+ $( '#image-redo-' + postid ).focus();
+ }
});
},
@@ -501,15 +589,23 @@ var imageEdit = window.imageEdit = {
t.refreshEditor(postid, nonce, function() {
t.setDisabled($('#image-undo-' + postid), true);
t.setDisabled(button, pop > 0);
+ // When redo gets disabled, move focus to the undo button to avoid a focus loss.
+ if ( 0 === pop ) {
+ $( '#image-undo-' + postid ).focus();
+ }
});
},
- setNumSelection : function(postid) {
+ setNumSelection : function( postid, el ) {
var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
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 ) ) {
+ return;
+ }
+
if ( x < 1 ) {
elX.val('');
return false;
@@ -568,8 +664,7 @@ var imageEdit = window.imageEdit = {
y = this.intval( $('#imgedit-crop-height-' + postid).val() ),
h = $('#image-preview-' + postid).height();
- if ( !this.intval( $(el).val() ) ) {
- $(el).val('');
+ if ( false === this.validateNumeric( el ) ) {
return;
}
@@ -594,6 +689,13 @@ var imageEdit = window.imageEdit = {
this.iasapi.update();
}
}
+ },
+
+ validateNumeric: function( el ) {
+ if ( ! this.intval( $( el ).val() ) ) {
+ $( el ).val( '' );
+ return false;
+ }
}
};
})(jQuery);