← Back to branch summary

~canonical-sysadmins/wordpress/3.9.x

« back to all changes in this revision

Viewing changes to wp-admin/js/image-edit.dev.js

  • Committer: Chris Jones
  • Date: 2010-01-19 13:17:33 UTC
  • Revision ID: cmsj@tenshu.net-20100119131733-rf31jv9k1v0xzo2h
[CJ] Import wordpress 2.9.1

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/js/image-edit.dev.js
 
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).attr('disabled', 'disabled');
 
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).attr('disabled', 'disabled');
 
182
 
 
183
                        t.toggleEditor(postid, 0);
 
184
                }).attr('src', ajaxurl + '?' + $.param(data));
 
185
        },
 
186
 
 
187
        action : function(postid, nonce, action) {
 
188
                var t = this, data, w, h, fw, fh;
 
189
 
 
190
                if ( t.notsaved(postid) )
 
191
                        return false;
 
192
 
 
193
                data = {
 
194
                        'action': 'image-editor',
 
195
                        '_ajax_nonce': nonce,
 
196
                        'postid': postid
 
197
                };
 
198
 
 
199
                if ( 'scale' == action ) {
 
200
                        w = $('#imgedit-scale-width-' + postid),
 
201
                        h = $('#imgedit-scale-height-' + postid),
 
202
                        fw = t.intval(w.val()),
 
203
                        fh = t.intval(h.val());
 
204
 
 
205
                        if ( fw < 1 ) {
 
206
                                w.focus();
 
207
                                return false;;
 
208
                        } else if ( fh < 1 ) {
 
209
                                h.focus();
 
210
                                return false;;
 
211
                        }
 
212
 
 
213
                        if ( fw == t.hold.ow || fh == t.hold.oh )
 
214
                                return false;
 
215
 
 
216
                        data['do'] = 'scale';
 
217
                        data['fwidth'] = fw;
 
218
                        data['fheight'] = fh;
 
219
                } else if ( 'restore' == action ) {
 
220
                        data['do'] = 'restore';
 
221
                } else {
 
222
                        return false;
 
223
                }
 
224
 
 
225
                t.toggleEditor(postid, 1);
 
226
                $.post(ajaxurl, data, function(r) {
 
227
                        $('#image-editor-' + postid).empty().append(r);
 
228
                        t.toggleEditor(postid, 0);
 
229
                });
 
230
        },
 
231
 
 
232
        save : function(postid, nonce) {
 
233
                var data, target = this.getTarget(postid), history = this.filterHistory(postid, 0);
 
234
 
 
235
                if ( '' == history )
 
236
                        return false;
 
237
 
 
238
                this.toggleEditor(postid, 1);
 
239
                data = {
 
240
                        'action': 'image-editor',
 
241
                        '_ajax_nonce': nonce,
 
242
                        'postid': postid,
 
243
                        'history': history,
 
244
                        'target': target,
 
245
                        'do': 'save'
 
246
                };
 
247
 
 
248
                $.post(ajaxurl, data, function(r) {
 
249
                        var ret = JSON.parse(r);
 
250
 
 
251
                        if ( ret.error ) {
 
252
                                $('#imgedit-response-' + postid).html('<div class="error"><p>' + ret.error + '</p><div>');
 
253
                                imageEdit.close(postid);
 
254
                                return;
 
255
                        }
 
256
 
 
257
                        if ( ret.fw && ret.fh )
 
258
                                $('#media-dims-' + postid).html( ret.fw + ' &times; ' + ret.fh );
 
259
 
 
260
                        if ( ret.thumbnail )
 
261
                                $('.thumbnail', '#thumbnail-head-' + postid).attr('src', ''+ret.thumbnail);
 
262
 
 
263
                        if ( ret.msg )
 
264
                                $('#imgedit-response-' + postid).html('<div class="updated"><p>' + ret.msg + '</p></div>');
 
265
 
 
266
                        imageEdit.close(postid);
 
267
                });
 
268
        },
 
269
 
 
270
        open : function(postid, nonce) {
 
271
                var data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
 
272
                        btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('img');
 
273
 
 
274
                btn.attr('disabled', 'disabled');
 
275
                spin.css('visibility', 'visible');
 
276
 
 
277
                data = {
 
278
                        'action': 'image-editor',
 
279
                        '_ajax_nonce': nonce,
 
280
                        'postid': postid,
 
281
                        'do': 'open'
 
282
                };
 
283
 
 
284
                elem.load(ajaxurl, data, function() {
 
285
                        elem.fadeIn('fast');
 
286
                        head.fadeOut('fast', function(){
 
287
                                btn.removeAttr('disabled');
 
288
                                spin.css('visibility', 'hidden');
 
289
                        });
 
290
                });
 
291
        },
 
292
 
 
293
        imgLoaded : function(postid) {
 
294
                var img = $('#image-preview-' + postid), parent = $('#imgedit-crop-' + postid);
 
295
 
 
296
                this.initCrop(postid, img, parent);
 
297
                this.setCropSelection(postid, 0);
 
298
                this.toggleEditor(postid, 0);
 
299
        },
 
300
 
 
301
        initCrop : function(postid, image, parent) {
 
302
                var t = this, selW = $('#imgedit-sel-width-' + postid),
 
303
                        selH = $('#imgedit-sel-height-' + postid);
 
304
 
 
305
                t.iasapi = $(image).imgAreaSelect({
 
306
                        parent: parent,
 
307
                        instance: true,
 
308
                        handles: true,
 
309
                        keys: true,
 
310
                        minWidth: 3,
 
311
                        minHeight: 3,
 
312
 
 
313
                        onInit: function(img, c) {
 
314
                                parent.children().mousedown(function(e){
 
315
                                        var ratio = false, sel, defRatio;
 
316
 
 
317
                                        if ( e.shiftKey ) {
 
318
                                                sel = t.iasapi.getSelection();
 
319
                                                defRatio = t.getSelRatio(postid);
 
320
                                                ratio = ( sel && sel.width && sel.height ) ? sel.width + ':' + sel.height : defRatio;
 
321
                                        }
 
322
 
 
323
                                        t.iasapi.setOptions({
 
324
                                                aspectRatio: ratio
 
325
                                        });
 
326
                                });
 
327
                        },
 
328
 
 
329
                        onSelectStart: function(img, c) {
 
330
                                imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1);
 
331
                        },
 
332
 
 
333
                        onSelectEnd: function(img, c) {
 
334
                                imageEdit.setCropSelection(postid, c);
 
335
                        },
 
336
 
 
337
                        onSelectChange: function(img, c) {
 
338
                                var sizer = imageEdit.hold.sizer;
 
339
                                selW.val( imageEdit.round(c.width / sizer) );
 
340
                                selH.val( imageEdit.round(c.height / sizer) );
 
341
                        }
 
342
                });
 
343
        },
 
344
 
 
345
        setCropSelection : function(postid, c) {
 
346
                var sel, min = $('#imgedit-minthumb-' + postid).val() || '128:128',
 
347
                        sizer = this.hold['sizer'];
 
348
                        min = min.split(':');
 
349
                        c = c || 0;
 
350
 
 
351
                if ( !c || ( c.width < 3 && c.height < 3 ) ) {
 
352
                        this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 0);
 
353
                        this.setDisabled($('#imgedit-crop-sel-' + postid), 0);
 
354
                        $('#imgedit-sel-width-' + postid).val('');
 
355
                        $('#imgedit-sel-height-' + postid).val('');
 
356
                        $('#imgedit-selection-' + postid).val('');
 
357
                        return false;
 
358
                }
 
359
 
 
360
                if ( c.width < (min[0] * sizer) && c.height < (min[1] * sizer) ) {
 
361
                        this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 0);
 
362
                        $('#imgedit-selection-' + postid).val('');
 
363
                        return false;
 
364
                }
 
365
 
 
366
                sel = { 'x': c.x1, 'y': c.y1, 'w': c.width, 'h': c.height };
 
367
                this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 1);
 
368
                $('#imgedit-selection-' + postid).val( JSON.stringify(sel) );
 
369
        },
 
370
 
 
371
        close : function(postid, warn) {
 
372
                warn = warn || false;
 
373
 
 
374
                if ( warn && this.notsaved(postid) )
 
375
                        return false;
 
376
 
 
377
                this.iasapi = {};
 
378
                this.hold = {};
 
379
                $('#image-editor-' + postid).fadeOut('fast', function() {
 
380
                        $('#media-head-' + postid).fadeIn('fast');
 
381
                        $(this).empty();
 
382
                });
 
383
        },
 
384
 
 
385
        notsaved : function(postid) {
 
386
                var h = $('#imgedit-history-' + postid).val(),
 
387
                        history = (h != '') ? JSON.parse(h) : new Array(),
 
388
                        pop = this.intval( $('#imgedit-undone-' + postid).val() );
 
389
 
 
390
                if ( pop < history.length ) {
 
391
                        if ( confirm( $('#imgedit-leaving-' + postid).html() ) )
 
392
                                return false;
 
393
                        return true;
 
394
                }
 
395
                return false;
 
396
        },
 
397
 
 
398
        addStep : function(op, postid, nonce) {
 
399
                var t = this, elem = $('#imgedit-history-' + postid),
 
400
                history = (elem.val() != '') ? JSON.parse(elem.val()) : new Array(),
 
401
                undone = $('#imgedit-undone-' + postid),
 
402
                pop = t.intval(undone.val());
 
403
 
 
404
                while ( pop > 0 ) {
 
405
                        history.pop();
 
406
                        pop--;
 
407
                }
 
408
                undone.val(0); // reset
 
409
 
 
410
                history.push(op);
 
411
                elem.val( JSON.stringify(history) );
 
412
 
 
413
                t.refreshEditor(postid, nonce, function() {
 
414
                        t.setDisabled($('#image-undo-' + postid), true);
 
415
                        t.setDisabled($('#image-redo-' + postid), false);
 
416
                });
 
417
        },
 
418
 
 
419
        rotate : function(angle, postid, nonce, t) {
 
420
                if ( $(t).hasClass('disabled') )
 
421
                        return false;
 
422
 
 
423
                this.addStep({ 'r': { 'r': angle, 'fw': this.hold['h'], 'fh': this.hold['w'] }}, postid, nonce);
 
424
        },
 
425
 
 
426
        flip : function (axis, postid, nonce, t) {
 
427
                if ( $(t).hasClass('disabled') )
 
428
                        return false;
 
429
 
 
430
                this.addStep({ 'f': { 'f': axis, 'fw': this.hold['w'], 'fh': this.hold['h'] }}, postid, nonce);
 
431
        },
 
432
 
 
433
        crop : function (postid, nonce, t) {
 
434
                var sel = $('#imgedit-selection-' + postid).val(),
 
435
                        w = this.intval( $('#imgedit-sel-width-' + postid).val() ),
 
436
                        h = this.intval( $('#imgedit-sel-height-' + postid).val() );
 
437
 
 
438
                if ( $(t).hasClass('disabled') || sel == '' )
 
439
                        return false;
 
440
 
 
441
                sel = JSON.parse(sel);
 
442
                if ( sel.w > 0 && sel.h > 0 && w > 0 && h > 0 ) {
 
443
                        sel['fw'] = w;
 
444
                        sel['fh'] = h;
 
445
                        this.addStep({ 'c': sel }, postid, nonce);
 
446
                }
 
447
        },
 
448
 
 
449
        undo : function (postid, nonce) {
 
450
                var t = this, button = $('#image-undo-' + postid), elem = $('#imgedit-undone-' + postid),
 
451
                        pop = t.intval( elem.val() ) + 1;
 
452
 
 
453
                if ( button.hasClass('disabled') )
 
454
                        return;
 
455
 
 
456
                elem.val(pop);
 
457
                t.refreshEditor(postid, nonce, function() {
 
458
                        var elem = $('#imgedit-history-' + postid),
 
459
                        history = (elem.val() != '') ? JSON.parse(elem.val()) : new Array();
 
460
 
 
461
                        t.setDisabled($('#image-redo-' + postid), true);
 
462
                        t.setDisabled(button, pop < history.length);
 
463
                });
 
464
        },
 
465
 
 
466
        redo : function(postid, nonce) {
 
467
                var t = this, button = $('#image-redo-' + postid), elem = $('#imgedit-undone-' + postid),
 
468
                        pop = t.intval( elem.val() ) - 1;
 
469
 
 
470
                if ( button.hasClass('disabled') )
 
471
                        return;
 
472
 
 
473
                elem.val(pop);
 
474
                t.refreshEditor(postid, nonce, function() {
 
475
                        t.setDisabled($('#image-undo-' + postid), true);
 
476
                        t.setDisabled(button, pop > 0);
 
477
                });
 
478
        },
 
479
 
 
480
        setNumSelection : function(postid) {
 
481
                var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
 
482
                        x = this.intval( elX.val() ), y = this.intval( elY.val() ),
 
483
                        img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
 
484
                        sizer = this.hold['sizer'], x1, y1, x2, y2, ias = this.iasapi;
 
485
 
 
486
                if ( x < 1 ) {
 
487
                        elX.val('');
 
488
                        return false;
 
489
                }
 
490
 
 
491
                if ( y < 1 ) {
 
492
                        elY.val('');
 
493
                        return false;
 
494
                }
 
495
 
 
496
                if ( x && y && ( sel = ias.getSelection() ) ) {
 
497
                        x2 = sel.x1 + Math.round( x * sizer );
 
498
                        y2 = sel.y1 + Math.round( y * sizer );
 
499
                        x1 = sel.x1;
 
500
                        y1 = sel.y1;
 
501
 
 
502
                        if ( x2 > imgw ) {
 
503
                                x1 = 0;
 
504
                                x2 = imgw;
 
505
                                elX.val( Math.round( x2 / sizer ) );
 
506
                        }
 
507
 
 
508
                        if ( y2 > imgh ) {
 
509
                                y1 = 0;
 
510
                                y2 = imgh;
 
511
                                elY.val( Math.round( y2 / sizer ) );
 
512
                        }
 
513
 
 
514
                        ias.setSelection( x1, y1, x2, y2 );
 
515
                        ias.update();
 
516
                        this.setCropSelection(postid, ias.getSelection());
 
517
                }
 
518
        },
 
519
 
 
520
        round : function(num) {
 
521
                var s;
 
522
                num = Math.round(num);
 
523
 
 
524
                if ( this.hold.sizer > 0.6 )
 
525
                        return num;
 
526
 
 
527
                s = num.toString().slice(-1);
 
528
 
 
529
                if ( '1' == s )
 
530
                        return num - 1;
 
531
                else if ( '9' == s )
 
532
                        return num + 1;
 
533
 
 
534
                return num;
 
535
        },
 
536
 
 
537
        setRatioSelection : function(postid, n, el) {
 
538
                var sel, r, x = this.intval( $('#imgedit-crop-width-' + postid).val() ),
 
539
                        y = this.intval( $('#imgedit-crop-height-' + postid).val() ),
 
540
                        h = $('#image-preview-' + postid).height();
 
541
 
 
542
                if ( !this.intval( $(el).val() ) ) {
 
543
                        $(el).val('');
 
544
                        return;
 
545
                }
 
546
 
 
547
                if ( x && y ) {
 
548
                        this.iasapi.setOptions({
 
549
                                aspectRatio: x + ':' + y
 
550
                        });
 
551
 
 
552
                        if ( sel = this.iasapi.getSelection(true) ) {
 
553
                                r = Math.ceil( sel.y1 + ((sel.x2 - sel.x1) / (x / y)) );
 
554
 
 
555
                                if ( r > h ) {
 
556
                                        r = h;
 
557
                                        if ( n )
 
558
                                                $('#imgedit-crop-height-' + postid).val('');
 
559
                                        else
 
560
                                                $('#imgedit-crop-width-' + postid).val('');
 
561
                                }
 
562
 
 
563
                                this.iasapi.setSelection( sel.x1, sel.y1, sel.x2, r );
 
564
                                this.iasapi.update();
 
565
                        }
 
566
                }
 
567
        }
 
568
}
 
569
})(jQuery);