wp-admin/js/image-edit.js

   1 /* global imageEditL10n, ajaxurl, confirm */
   2
   3 (function($) {
   4 var imageEdit = window.imageEdit = {
   5         iasapi : {},
   6         hold : {},
   7         postid : '',
   8         _view : false,
   9
  10         intval : function(f) {
  11                 return f | 0;
  12         },
  13
  14         setDisabled : function(el, s) {
  15                 if ( s ) {
  16                         el.removeClass('disabled');
  17                         $('input', el).removeAttr('disabled');
  18                 } else {
  19                         el.addClass('disabled');
  20                         $('input', el).prop('disabled', true);
  21                 }
  22         },
  23
  24         init : function(postid) {
  25                 var t = this, old = $('#image-editor-' + t.postid),
  26                         x = t.intval( $('#imgedit-x-' + postid).val() ),
  27                         y = t.intval( $('#imgedit-y-' + postid).val() );
  28
  29                 if ( t.postid !== postid && old.length ) {
  30                         t.close(t.postid);
  31                 }
  32
  33                 t.hold.w = t.hold.ow = x;
  34                 t.hold.h = t.hold.oh = y;
  35                 t.hold.xy_ratio = x / y;
  36                 t.hold.sizer = parseFloat( $('#imgedit-sizer-' + postid).val() );
  37                 t.postid = postid;
  38                 $('#imgedit-response-' + postid).empty();
  39
  40                 $('input[type="text"]', '#imgedit-panel-' + postid).keypress(function(e) {
  41                         var k = e.keyCode;
  42
  43                         if ( 36 < k && k < 41 ) {
  44                                 $(this).blur();
  45                         }
  46
  47                         if ( 13 === k ) {
  48                                 e.preventDefault();
  49                                 e.stopPropagation();
  50                                 return false;
  51                         }
  52                 });
  53         },
  54
  55         toggleEditor : function(postid, toggle) {
  56                 var wait = $('#imgedit-wait-' + postid);
  57
  58                 if ( toggle ) {
  59                         wait.height( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');
  60                 } else {
  61                         wait.fadeOut('fast');
  62                 }
  63         },
  64
  65         toggleHelp : function(el) {
  66                 $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
  67                 return false;
  68         },
  69
  70         getTarget : function(postid) {
  71                 return $('input[name="imgedit-target-' + postid + '"]:checked', '#imgedit-save-target-' + postid).val() || 'full';
  72         },
  73
  74         scaleChanged : function(postid, x) {
  75                 var w = $('#imgedit-scale-width-' + postid), h = $('#imgedit-scale-height-' + postid),
  76                 warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '';
  77
  78                 if ( x ) {
  79                         h1 = ( w.val() !== '' ) ? Math.round( w.val() / this.hold.xy_ratio ) : '';
  80                         h.val( h1 );
  81                 } else {
  82                         w1 = ( h.val() !== '' ) ? Math.round( h.val() * this.hold.xy_ratio ) : '';
  83                         w.val( w1 );
  84                 }
  85
  86                 if ( ( h1 && h1 > this.hold.oh ) || ( w1 && w1 > this.hold.ow ) ) {
  87                         warn.css('visibility', 'visible');
  88                 } else {
  89                         warn.css('visibility', 'hidden');
  90                 }
  91         },
  92
  93         getSelRatio : function(postid) {
  94                 var x = this.hold.w, y = this.hold.h,
  95                         X = this.intval( $('#imgedit-crop-width-' + postid).val() ),
  96                         Y = this.intval( $('#imgedit-crop-height-' + postid).val() );
  97
  98                 if ( X && Y ) {
  99                         return X + ':' + Y;
 100                 }
 101
 102                 if ( x && y ) {
 103                         return x + ':' + y;
 104                 }
 105
 106                 return '1:1';
 107         },
 108
 109         filterHistory : function(postid, setSize) {
 110                 // apply undo state to history
 111                 var history = $('#imgedit-history-' + postid).val(), pop, n, o, i, op = [];
 112
 113                 if ( history !== '' ) {
 114                         history = JSON.parse(history);
 115                         pop = this.intval( $('#imgedit-undone-' + postid).val() );
 116                         if ( pop > 0 ) {
 117                                 while ( pop > 0 ) {
 118                                         history.pop();
 119                                         pop--;
 120                                 }
 121                         }
 122
 123                         if ( setSize ) {
 124                                 if ( !history.length ) {
 125                                         this.hold.w = this.hold.ow;
 126                                         this.hold.h = this.hold.oh;
 127                                         return '';
 128                                 }
 129
 130                                 // restore
 131                                 o = history[history.length - 1];
 132                                 o = o.c || o.r || o.f || false;
 133
 134                                 if ( o ) {
 135                                         this.hold.w = o.fw;
 136                                         this.hold.h = o.fh;
 137                                 }
 138                         }
 139
 140                         // filter the values
 141                         for ( n in history ) {
 142                                 i = history[n];
 143                                 if ( i.hasOwnProperty('c') ) {
 144                                         op[n] = { 'c': { 'x': i.c.x, 'y': i.c.y, 'w': i.c.w, 'h': i.c.h } };
 145                                 } else if ( i.hasOwnProperty('r') ) {
 146                                         op[n] = { 'r': i.r.r };
 147                                 } else if ( i.hasOwnProperty('f') ) {
 148                                         op[n] = { 'f': i.f.f };
 149                                 }
 150                         }
 151                         return JSON.stringify(op);
 152                 }
 153                 return '';
 154         },
 155
 156         refreshEditor : function(postid, nonce, callback) {
 157                 var t = this, data, img;
 158
 159                 t.toggleEditor(postid, 1);
 160                 data = {
 161                         'action': 'imgedit-preview',
 162                         '_ajax_nonce': nonce,
 163                         'postid': postid,
 164                         'history': t.filterHistory(postid, 1),
 165                         'rand': t.intval(Math.random() * 1000000)
 166                 };
 167
 168                 img = $('<img id="image-preview-' + postid + '" />')
 169                         .on('load', function() {
 170                                 var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit;
 171
 172                                 parent.empty().append(img);
 173
 174                                 // w, h are the new full size dims
 175                                 max1 = Math.max( t.hold.w, t.hold.h );
 176                                 max2 = Math.max( $(img).width(), $(img).height() );
 177                                 t.hold.sizer = max1 > max2 ? max2 / max1 : 1;
 178
 179                                 t.initCrop(postid, img, parent);
 180                                 t.setCropSelection(postid, 0);
 181
 182                                 if ( (typeof callback !== 'undefined') && callback !== null ) {
 183                                         callback();
 184                                 }
 185
 186                                 if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) {
 187                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).removeAttr('disabled');
 188                                 } else {
 189                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
 190                                 }
 191
 192                                 t.toggleEditor(postid, 0);
 193                         })
 194                         .on('error', function() {
 195                                 $('#imgedit-crop-' + postid).empty().append('<div class="error"><p>' + imageEditL10n.error + '</p></div>');
 196                                 t.toggleEditor(postid, 0);
 197                         })
 198                         .attr('src', ajaxurl + '?' + $.param(data));
 199         },
 200
 201         action : function(postid, nonce, action) {
 202                 var t = this, data, w, h, fw, fh;
 203
 204                 if ( t.notsaved(postid) ) {
 205                         return false;
 206                 }
 207
 208                 data = {
 209                         'action': 'image-editor',
 210                         '_ajax_nonce': nonce,
 211                         'postid': postid
 212                 };
 213
 214                 if ( 'scale' === action ) {
 215                         w = $('#imgedit-scale-width-' + postid),
 216                         h = $('#imgedit-scale-height-' + postid),
 217                         fw = t.intval(w.val()),
 218                         fh = t.intval(h.val());
 219
 220                         if ( fw < 1 ) {
 221                                 w.focus();
 222                                 return false;
 223                         } else if ( fh < 1 ) {
 224                                 h.focus();
 225                                 return false;
 226                         }
 227
 228                         if ( fw === t.hold.ow || fh === t.hold.oh ) {
 229                                 return false;
 230                         }
 231
 232                         data['do'] = 'scale';
 233                         data.fwidth = fw;
 234                         data.fheight = fh;
 235                 } else if ( 'restore' === action ) {
 236                         data['do'] = 'restore';
 237                 } else {
 238                         return false;
 239                 }
 240
 241                 t.toggleEditor(postid, 1);
 242                 $.post(ajaxurl, data, function(r) {
 243                         $('#image-editor-' + postid).empty().append(r);
 244                         t.toggleEditor(postid, 0);
 245                         // refresh the attachment model so that changes propagate
 246                         if ( t._view ) {
 247                                 t._view.refresh();
 248                         }
 249                 });
 250         },
 251
 252         save : function(postid, nonce) {
 253                 var data,
 254                         target = this.getTarget(postid),
 255                         history = this.filterHistory(postid, 0),
 256                         self = this;
 257
 258                 if ( '' === history ) {
 259                         return false;
 260                 }
 261
 262                 this.toggleEditor(postid, 1);
 263                 data = {
 264                         'action': 'image-editor',
 265                         '_ajax_nonce': nonce,
 266                         'postid': postid,
 267                         'history': history,
 268                         'target': target,
 269                         'context': $('#image-edit-context').length ? $('#image-edit-context').val() : null,
 270                         'do': 'save'
 271                 };
 272
 273                 $.post(ajaxurl, data, function(r) {
 274                         var ret = JSON.parse(r);
 275
 276                         if ( ret.error ) {
 277                                 $('#imgedit-response-' + postid).html('<div class="error"><p>' + ret.error + '</p></div>');
 278                                 imageEdit.close(postid);
 279                                 return;
 280                         }
 281
 282                         if ( ret.fw && ret.fh ) {
 283                                 $('#media-dims-' + postid).html( ret.fw + ' &times; ' + ret.fh );
 284                         }
 285
 286                         if ( ret.thumbnail ) {
 287                                 $('.thumbnail', '#thumbnail-head-' + postid).attr('src', ''+ret.thumbnail);
 288                         }
 289
 290                         if ( ret.msg ) {
 291                                 $('#imgedit-response-' + postid).html('<div class="updated"><p>' + ret.msg + '</p></div>');
 292                         }
 293
 294                         if ( self._view ) {
 295                                 self._view.save();
 296                         } else {
 297                                 imageEdit.close(postid);
 298                         }
 299                 });
 300         },
 301
 302         open : function( postid, nonce, view ) {
 303                 this._view = view;
 304
 305                 var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
 306                         btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
 307
 308                 btn.prop('disabled', true);
 309                 spin.addClass( 'is-active' );
 310
 311                 data = {
 312                         'action': 'image-editor',
 313                         '_ajax_nonce': nonce,
 314                         'postid': postid,
 315                         'do': 'open'
 316                 };
 317
 318                 dfd = $.ajax({
 319                         url:  ajaxurl,
 320                         type: 'post',
 321                         data: data
 322                 }).done(function( html ) {
 323                         elem.html( html );
 324                         head.fadeOut('fast', function(){
 325                                 elem.fadeIn('fast');
 326                                 btn.removeAttr('disabled');
 327                                 spin.removeClass( 'is-active' );
 328                         });
 329                 });
 330
 331                 return dfd;
 332         },
 333
 334         imgLoaded : function(postid) {
 335                 var img = $('#image-preview-' + postid), parent = $('#imgedit-crop-' + postid);
 336
 337                 this.initCrop(postid, img, parent);
 338                 this.setCropSelection(postid, 0);
 339                 this.toggleEditor(postid, 0);
 340         },
 341
 342         initCrop : function(postid, image, parent) {
 343                 var t = this,
 344                         selW = $('#imgedit-sel-width-' + postid),
 345                         selH = $('#imgedit-sel-height-' + postid),
 346                         $img;
 347
 348                 t.iasapi = $(image).imgAreaSelect({
 349                         parent: parent,
 350                         instance: true,
 351                         handles: true,
 352                         keys: true,
 353                         minWidth: 3,
 354                         minHeight: 3,
 355
 356                         onInit: function( img ) {
 357                                 // Ensure that the imgareaselect wrapper elements are position:absolute
 358                                 // (even if we're in a position:fixed modal)
 359                                 $img = $( img );
 360                                 $img.next().css( 'position', 'absolute' )
 361                                         .nextAll( '.imgareaselect-outer' ).css( 'position', 'absolute' );
 362
 363                                 parent.children().mousedown(function(e){
 364                                         var ratio = false, sel, defRatio;
 365
 366                                         if ( e.shiftKey ) {
 367                                                 sel = t.iasapi.getSelection();
 368                                                 defRatio = t.getSelRatio(postid);
 369                                                 ratio = ( sel && sel.width && sel.height ) ? sel.width + ':' + sel.height : defRatio;
 370                                         }
 371
 372                                         t.iasapi.setOptions({
 373                                                 aspectRatio: ratio
 374                                         });
 375                                 });
 376                         },
 377
 378                         onSelectStart: function() {
 379                                 imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1);
 380                         },
 381
 382                         onSelectEnd: function(img, c) {
 383                                 imageEdit.setCropSelection(postid, c);
 384                         },
 385
 386                         onSelectChange: function(img, c) {
 387                                 var sizer = imageEdit.hold.sizer;
 388                                 selW.val( imageEdit.round(c.width / sizer) );
 389                                 selH.val( imageEdit.round(c.height / sizer) );
 390                         }
 391                 });
 392         },
 393
 394         setCropSelection : function(postid, c) {
 395                 var sel;
 396
 397                 c = c || 0;
 398
 399                 if ( !c || ( c.width < 3 && c.height < 3 ) ) {
 400                         this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 0);
 401                         this.setDisabled($('#imgedit-crop-sel-' + postid), 0);
 402                         $('#imgedit-sel-width-' + postid).val('');
 403                         $('#imgedit-sel-height-' + postid).val('');
 404                         $('#imgedit-selection-' + postid).val('');
 405                         return false;
 406                 }
 407
 408                 sel = { 'x': c.x1, 'y': c.y1, 'w': c.width, 'h': c.height };
 409                 this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 1);
 410                 $('#imgedit-selection-' + postid).val( JSON.stringify(sel) );
 411         },
 412
 413         close : function(postid, warn) {
 414                 warn = warn || false;
 415
 416                 if ( warn && this.notsaved(postid) ) {
 417                         return false;
 418                 }
 419
 420                 this.iasapi = {};
 421                 this.hold = {};
 422
 423                 // If we've loaded the editor in the context of a Media Modal, then switch to the previous view,
 424                 // whatever that might have been.
 425                 if ( this._view ){
 426                         this._view.back();
 427                 }
 428
 429                 // In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
 430                 else {
 431                         $('#image-editor-' + postid).fadeOut('fast', function() {
 432                                 $('#media-head-' + postid).fadeIn('fast');
 433                                 $(this).empty();
 434                         });
 435                 }
 436
 437
 438         },
 439
 440         notsaved : function(postid) {
 441                 var h = $('#imgedit-history-' + postid).val(),
 442                         history = ( h !== '' ) ? JSON.parse(h) : [],
 443                         pop = this.intval( $('#imgedit-undone-' + postid).val() );
 444
 445                 if ( pop < history.length ) {
 446                         if ( confirm( $('#imgedit-leaving-' + postid).html() ) ) {
 447                                 return false;
 448                         }
 449                         return true;
 450                 }
 451                 return false;
 452         },
 453
 454         addStep : function(op, postid, nonce) {
 455                 var t = this, elem = $('#imgedit-history-' + postid),
 456                 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
 457                 undone = $('#imgedit-undone-' + postid),
 458                 pop = t.intval(undone.val());
 459
 460                 while ( pop > 0 ) {
 461                         history.pop();
 462                         pop--;
 463                 }
 464                 undone.val(0); // reset
 465
 466                 history.push(op);
 467                 elem.val( JSON.stringify(history) );
 468
 469                 t.refreshEditor(postid, nonce, function() {
 470                         t.setDisabled($('#image-undo-' + postid), true);
 471                         t.setDisabled($('#image-redo-' + postid), false);
 472                 });
 473         },
 474
 475         rotate : function(angle, postid, nonce, t) {
 476                 if ( $(t).hasClass('disabled') ) {
 477                         return false;
 478                 }
 479
 480                 this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce);
 481         },
 482
 483         flip : function (axis, postid, nonce, t) {
 484                 if ( $(t).hasClass('disabled') ) {
 485                         return false;
 486                 }
 487
 488                 this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce);
 489         },
 490
 491         crop : function (postid, nonce, t) {
 492                 var sel = $('#imgedit-selection-' + postid).val(),
 493                         w = this.intval( $('#imgedit-sel-width-' + postid).val() ),
 494                         h = this.intval( $('#imgedit-sel-height-' + postid).val() );
 495
 496                 if ( $(t).hasClass('disabled') || sel === '' ) {
 497                         return false;
 498                 }
 499
 500                 sel = JSON.parse(sel);
 501                 if ( sel.w > 0 && sel.h > 0 && w > 0 && h > 0 ) {
 502                         sel.fw = w;
 503                         sel.fh = h;
 504                         this.addStep({ 'c': sel }, postid, nonce);
 505                 }
 506         },
 507
 508         undo : function (postid, nonce) {
 509                 var t = this, button = $('#image-undo-' + postid), elem = $('#imgedit-undone-' + postid),
 510                         pop = t.intval( elem.val() ) + 1;
 511
 512                 if ( button.hasClass('disabled') ) {
 513                         return;
 514                 }
 515
 516                 elem.val(pop);
 517                 t.refreshEditor(postid, nonce, function() {
 518                         var elem = $('#imgedit-history-' + postid),
 519                         history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
 520
 521                         t.setDisabled($('#image-redo-' + postid), true);
 522                         t.setDisabled(button, pop < history.length);
 523                 });
 524         },
 525
 526         redo : function(postid, nonce) {
 527                 var t = this, button = $('#image-redo-' + postid), elem = $('#imgedit-undone-' + postid),
 528                         pop = t.intval( elem.val() ) - 1;
 529
 530                 if ( button.hasClass('disabled') ) {
 531                         return;
 532                 }
 533
 534                 elem.val(pop);
 535                 t.refreshEditor(postid, nonce, function() {
 536                         t.setDisabled($('#image-undo-' + postid), true);
 537                         t.setDisabled(button, pop > 0);
 538                 });
 539         },
 540
 541         setNumSelection : function(postid) {
 542                 var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
 543                         x = this.intval( elX.val() ), y = this.intval( elY.val() ),
 544                         img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
 545                         sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
 546
 547                 if ( x < 1 ) {
 548                         elX.val('');
 549                         return false;
 550                 }
 551
 552                 if ( y < 1 ) {
 553                         elY.val('');
 554                         return false;
 555                 }
 556
 557                 if ( x && y && ( sel = ias.getSelection() ) ) {
 558                         x2 = sel.x1 + Math.round( x * sizer );
 559                         y2 = sel.y1 + Math.round( y * sizer );
 560                         x1 = sel.x1;
 561                         y1 = sel.y1;
 562
 563                         if ( x2 > imgw ) {
 564                                 x1 = 0;
 565                                 x2 = imgw;
 566                                 elX.val( Math.round( x2 / sizer ) );
 567                         }
 568
 569                         if ( y2 > imgh ) {
 570                                 y1 = 0;
 571                                 y2 = imgh;
 572                                 elY.val( Math.round( y2 / sizer ) );
 573                         }
 574
 575                         ias.setSelection( x1, y1, x2, y2 );
 576                         ias.update();
 577                         this.setCropSelection(postid, ias.getSelection());
 578                 }
 579         },
 580
 581         round : function(num) {
 582                 var s;
 583                 num = Math.round(num);
 584
 585                 if ( this.hold.sizer > 0.6 ) {
 586                         return num;
 587                 }
 588
 589                 s = num.toString().slice(-1);
 590
 591                 if ( '1' === s ) {
 592                         return num - 1;
 593                 } else if ( '9' === s ) {
 594                         return num + 1;
 595                 }
 596
 597                 return num;
 598         },
 599
 600         setRatioSelection : function(postid, n, el) {
 601                 var sel, r, x = this.intval( $('#imgedit-crop-width-' + postid).val() ),
 602                         y = this.intval( $('#imgedit-crop-height-' + postid).val() ),
 603                         h = $('#image-preview-' + postid).height();
 604
 605                 if ( !this.intval( $(el).val() ) ) {
 606                         $(el).val('');
 607                         return;
 608                 }
 609
 610                 if ( x && y ) {
 611                         this.iasapi.setOptions({
 612                                 aspectRatio: x + ':' + y
 613                         });
 614
 615                         if ( sel = this.iasapi.getSelection(true) ) {
 616                                 r = Math.ceil( sel.y1 + ( ( sel.x2 - sel.x1 ) / ( x / y ) ) );
 617
 618                                 if ( r > h ) {
 619                                         r = h;
 620                                         if ( n ) {
 621                                                 $('#imgedit-crop-height-' + postid).val('');
 622                                         } else {
 623                                                 $('#imgedit-crop-width-' + postid).val('');
 624                                         }
 625                                 }
 626
 627                                 this.iasapi.setSelection( sel.x1, sel.y1, sel.x2, r );
 628                                 this.iasapi.update();
 629                         }
 630                 }
 631         }
 632 };
 633 })(jQuery);