X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/6c8f14c09105d0afa4c1574215c59b5021040e76..6359b807ff8b4ffa151d8756cdefb861c6c1d4db:/wp-admin/js/image-edit.js diff --git a/wp-admin/js/image-edit.js b/wp-admin/js/image-edit.js index b11e2d3a..0abf6efc 100644 --- a/wp-admin/js/image-edit.js +++ b/wp-admin/js/image-edit.js @@ -1,10 +1,11 @@ -var imageEdit; +/* global imageEditL10n, ajaxurl, confirm */ (function($) { -imageEdit = { +var imageEdit = window.imageEdit = { iasapi : {}, hold : {}, postid : '', + _view : false, intval : function(f) { return f | 0; @@ -20,28 +21,30 @@ imageEdit = { } }, - init : function(postid, nonce) { + init : function(postid) { var t = this, old = $('#image-editor-' + t.postid), x = t.intval( $('#imgedit-x-' + postid).val() ), y = t.intval( $('#imgedit-y-' + postid).val() ); - if ( t.postid != postid && old.length ) + if ( t.postid !== postid && old.length ) { t.close(t.postid); + } - t.hold['w'] = t.hold['ow'] = x; - t.hold['h'] = t.hold['oh'] = y; - t.hold['xy_ratio'] = x / y; - t.hold['sizer'] = parseFloat( $('#imgedit-sizer-' + postid).val() ); + t.hold.w = t.hold.ow = x; + t.hold.h = t.hold.oh = y; + t.hold.xy_ratio = x / y; + t.hold.sizer = parseFloat( $('#imgedit-sizer-' + postid).val() ); t.postid = postid; $('#imgedit-response-' + postid).empty(); $('input[type="text"]', '#imgedit-panel-' + postid).keypress(function(e) { var k = e.keyCode; - if ( 36 < k && k < 41 ) - $(this).blur() + if ( 36 < k && k < 41 ) { + $(this).blur(); + } - if ( 13 == k ) { + if ( 13 === k ) { e.preventDefault(); e.stopPropagation(); return false; @@ -52,14 +55,15 @@ imageEdit = { toggleEditor : function(postid, toggle) { var wait = $('#imgedit-wait-' + postid); - if ( toggle ) + if ( toggle ) { wait.height( $('#imgedit-panel-' + postid).height() ).fadeIn('fast'); - else + } else { wait.fadeOut('fast'); + } }, toggleHelp : function(el) { - $(el).siblings('.imgedit-help').slideToggle('fast'); + $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); return false; }, @@ -72,29 +76,32 @@ imageEdit = { warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = ''; if ( x ) { - h1 = (w.val() != '') ? Math.round( w.val() / this.hold['xy_ratio'] ) : ''; + h1 = ( w.val() !== '' ) ? Math.round( w.val() / this.hold.xy_ratio ) : ''; h.val( h1 ); } else { - w1 = (h.val() != '') ? Math.round( h.val() * this.hold['xy_ratio'] ) : ''; + w1 = ( h.val() !== '' ) ? Math.round( h.val() * this.hold.xy_ratio ) : ''; w.val( w1 ); } - if ( ( h1 && h1 > this.hold['oh'] ) || ( w1 && w1 > this.hold['ow'] ) ) + if ( ( h1 && h1 > this.hold.oh ) || ( w1 && w1 > this.hold.ow ) ) { warn.css('visibility', 'visible'); - else + } else { warn.css('visibility', 'hidden'); + } }, getSelRatio : function(postid) { - var x = this.hold['w'], y = this.hold['h'], + var x = this.hold.w, y = this.hold.h, X = this.intval( $('#imgedit-crop-width-' + postid).val() ), Y = this.intval( $('#imgedit-crop-height-' + postid).val() ); - if ( X && Y ) + if ( X && Y ) { return X + ':' + Y; + } - if ( x && y ) + if ( x && y ) { return x + ':' + y; + } return '1:1'; }, @@ -103,7 +110,7 @@ imageEdit = { // apply undo state to history var history = $('#imgedit-history-' + postid).val(), pop, n, o, i, op = []; - if ( history != '' ) { + if ( history !== '' ) { history = JSON.parse(history); pop = this.intval( $('#imgedit-undone-' + postid).val() ); if ( pop > 0 ) { @@ -115,8 +122,8 @@ imageEdit = { if ( setSize ) { if ( !history.length ) { - this.hold['w'] = this.hold['ow']; - this.hold['h'] = this.hold['oh']; + this.hold.w = this.hold.ow; + this.hold.h = this.hold.oh; return ''; } @@ -125,8 +132,8 @@ imageEdit = { o = o.c || o.r || o.f || false; if ( o ) { - this.hold['w'] = o.fw; - this.hold['h'] = o.fh; + this.hold.w = o.fw; + this.hold.h = o.fh; } } @@ -158,40 +165,45 @@ imageEdit = { 'rand': t.intval(Math.random() * 1000000) }; - img = $(''); - img.load( function() { - var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit; + img = $('') + .on('load', function() { + var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit; - parent.empty().append(img); + parent.empty().append(img); - // w, h are the new full size dims - max1 = Math.max( t.hold.w, t.hold.h ); - max2 = Math.max( $(img).width(), $(img).height() ); - t.hold['sizer'] = max1 > max2 ? max2 / max1 : 1; + // w, h are the new full size dims + max1 = Math.max( t.hold.w, t.hold.h ); + max2 = Math.max( $(img).width(), $(img).height() ); + t.hold.sizer = max1 > max2 ? max2 / max1 : 1; - t.initCrop(postid, img, parent); - t.setCropSelection(postid, 0); + t.initCrop(postid, img, parent); + t.setCropSelection(postid, 0); - if ( (typeof callback != "unknown") && callback != null ) - callback(); + if ( (typeof callback !== 'undefined') && callback !== null ) { + callback(); + } - if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() == 0 ) - $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).removeAttr('disabled'); - else - $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true); + if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) { + $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).removeAttr('disabled'); + } else { + $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true); + } - t.toggleEditor(postid, 0); - }).error(function(){ - $('#imgedit-crop-' + postid).empty().append('

' + imageEditL10n.error + '

'); - t.toggleEditor(postid, 0); - }).attr('src', ajaxurl + '?' + $.param(data)); + t.toggleEditor(postid, 0); + }) + .on('error', function() { + $('#imgedit-crop-' + postid).empty().append('

' + imageEditL10n.error + '

'); + t.toggleEditor(postid, 0); + }) + .attr('src', ajaxurl + '?' + $.param(data)); }, action : function(postid, nonce, action) { var t = this, data, w, h, fw, fh; - if ( t.notsaved(postid) ) + if ( t.notsaved(postid) ) { return false; + } data = { 'action': 'image-editor', @@ -199,7 +211,7 @@ imageEdit = { 'postid': postid }; - if ( 'scale' == action ) { + if ( 'scale' === action ) { w = $('#imgedit-scale-width-' + postid), h = $('#imgedit-scale-height-' + postid), fw = t.intval(w.val()), @@ -213,13 +225,14 @@ imageEdit = { return false; } - if ( fw == t.hold.ow || fh == t.hold.oh ) + if ( fw === t.hold.ow || fh === t.hold.oh ) { return false; + } data['do'] = 'scale'; - data['fwidth'] = fw; - data['fheight'] = fh; - } else if ( 'restore' == action ) { + data.fwidth = fw; + data.fheight = fh; + } else if ( 'restore' === action ) { data['do'] = 'restore'; } else { return false; @@ -229,14 +242,22 @@ imageEdit = { $.post(ajaxurl, data, function(r) { $('#image-editor-' + postid).empty().append(r); t.toggleEditor(postid, 0); + // refresh the attachment model so that changes propagate + if ( t._view ) { + t._view.refresh(); + } }); }, save : function(postid, nonce) { - var data, target = this.getTarget(postid), history = this.filterHistory(postid, 0); + var data, + target = this.getTarget(postid), + history = this.filterHistory(postid, 0), + self = this; - if ( '' == history ) + if ( '' === history ) { return false; + } this.toggleEditor(postid, 1); data = { @@ -253,30 +274,39 @@ imageEdit = { var ret = JSON.parse(r); if ( ret.error ) { - $('#imgedit-response-' + postid).html('

' + ret.error + '

'); + $('#imgedit-response-' + postid).html('

' + ret.error + '

'); imageEdit.close(postid); return; } - if ( ret.fw && ret.fh ) + if ( ret.fw && ret.fh ) { $('#media-dims-' + postid).html( ret.fw + ' × ' + ret.fh ); + } - if ( ret.thumbnail ) + if ( ret.thumbnail ) { $('.thumbnail', '#thumbnail-head-' + postid).attr('src', ''+ret.thumbnail); + } - if ( ret.msg ) + if ( ret.msg ) { $('#imgedit-response-' + postid).html('

' + ret.msg + '

'); + } - 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(); + spin.addClass( 'is-active' ); data = { 'action': 'image-editor', @@ -285,13 +315,20 @@ imageEdit = { 'do': 'open' }; - elem.load(ajaxurl, data, function() { - elem.fadeIn('fast'); + dfd = $.ajax({ + url: ajaxurl, + type: 'post', + data: data + }).done(function( html ) { + elem.html( html ); head.fadeOut('fast', function(){ + elem.fadeIn('fast'); btn.removeAttr('disabled'); - spin.hide(); + spin.removeClass( 'is-active' ); }); }); + + return dfd; }, imgLoaded : function(postid) { @@ -303,8 +340,10 @@ imageEdit = { }, 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, @@ -314,7 +353,13 @@ imageEdit = { minWidth: 3, minHeight: 3, - onInit: function(img, c) { + 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; @@ -330,7 +375,7 @@ imageEdit = { }); }, - onSelectStart: function(img, c) { + onSelectStart: function() { imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1); }, @@ -347,10 +392,9 @@ 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); @@ -361,12 +405,6 @@ 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) ); @@ -375,25 +413,39 @@ imageEdit = { close : function(postid, warn) { warn = warn || false; - if ( warn && this.notsaved(postid) ) + if ( warn && this.notsaved(postid) ) { return false; + } 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'); + $(this).empty(); + }); + } + + }, notsaved : function(postid) { var h = $('#imgedit-history-' + postid).val(), - history = (h != '') ? JSON.parse(h) : new Array(), + history = ( h !== '' ) ? JSON.parse(h) : [], pop = this.intval( $('#imgedit-undone-' + postid).val() ); if ( pop < history.length ) { - if ( confirm( $('#imgedit-leaving-' + postid).html() ) ) + if ( confirm( $('#imgedit-leaving-' + postid).html() ) ) { return false; + } return true; } return false; @@ -401,7 +453,7 @@ imageEdit = { addStep : function(op, postid, nonce) { var t = this, elem = $('#imgedit-history-' + postid), - history = (elem.val() != '') ? JSON.parse(elem.val()) : new Array(), + history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [], undone = $('#imgedit-undone-' + postid), pop = t.intval(undone.val()); @@ -421,17 +473,19 @@ imageEdit = { }, rotate : function(angle, postid, nonce, t) { - if ( $(t).hasClass('disabled') ) + if ( $(t).hasClass('disabled') ) { return false; + } - this.addStep({ 'r': { 'r': angle, 'fw': this.hold['h'], 'fh': this.hold['w'] }}, postid, nonce); + this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce); }, flip : function (axis, postid, nonce, t) { - if ( $(t).hasClass('disabled') ) + if ( $(t).hasClass('disabled') ) { return false; + } - this.addStep({ 'f': { 'f': axis, 'fw': this.hold['w'], 'fh': this.hold['h'] }}, postid, nonce); + this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce); }, crop : function (postid, nonce, t) { @@ -439,13 +493,14 @@ imageEdit = { w = this.intval( $('#imgedit-sel-width-' + postid).val() ), h = this.intval( $('#imgedit-sel-height-' + postid).val() ); - if ( $(t).hasClass('disabled') || sel == '' ) + if ( $(t).hasClass('disabled') || sel === '' ) { return false; + } sel = JSON.parse(sel); if ( sel.w > 0 && sel.h > 0 && w > 0 && h > 0 ) { - sel['fw'] = w; - sel['fh'] = h; + sel.fw = w; + sel.fh = h; this.addStep({ 'c': sel }, postid, nonce); } }, @@ -454,13 +509,14 @@ imageEdit = { var t = this, button = $('#image-undo-' + postid), elem = $('#imgedit-undone-' + postid), pop = t.intval( elem.val() ) + 1; - if ( button.hasClass('disabled') ) + if ( button.hasClass('disabled') ) { return; + } elem.val(pop); t.refreshEditor(postid, nonce, function() { var elem = $('#imgedit-history-' + postid), - history = (elem.val() != '') ? JSON.parse(elem.val()) : new Array(); + history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : []; t.setDisabled($('#image-redo-' + postid), true); t.setDisabled(button, pop < history.length); @@ -471,8 +527,9 @@ imageEdit = { var t = this, button = $('#image-redo-' + postid), elem = $('#imgedit-undone-' + postid), pop = t.intval( elem.val() ) - 1; - if ( button.hasClass('disabled') ) + if ( button.hasClass('disabled') ) { return; + } elem.val(pop); t.refreshEditor(postid, nonce, function() { @@ -485,7 +542,7 @@ imageEdit = { 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; + sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi; if ( x < 1 ) { elX.val(''); @@ -525,15 +582,17 @@ imageEdit = { var s; num = Math.round(num); - if ( this.hold.sizer > 0.6 ) + if ( this.hold.sizer > 0.6 ) { return num; + } s = num.toString().slice(-1); - if ( '1' == s ) + if ( '1' === s ) { return num - 1; - else if ( '9' == s ) + } else if ( '9' === s ) { return num + 1; + } return num; }, @@ -554,14 +613,15 @@ imageEdit = { }); if ( sel = this.iasapi.getSelection(true) ) { - r = Math.ceil( sel.y1 + ((sel.x2 - sel.x1) / (x / y)) ); + r = Math.ceil( sel.y1 + ( ( sel.x2 - sel.x1 ) / ( x / y ) ) ); if ( r > h ) { r = h; - if ( n ) + if ( n ) { $('#imgedit-crop-height-' + postid).val(''); - else + } else { $('#imgedit-crop-width-' + postid).val(''); + } } this.iasapi.setSelection( sel.x1, sel.y1, sel.x2, r ); @@ -569,5 +629,5 @@ imageEdit = { } } } -} +}; })(jQuery);