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