WordPress.org

Make WordPress Core

Changeset 41557


Ignore:
Timestamp:
09/21/2017 10:44:38 PM (10 months ago)
Author:
adamsilverstein
Message:

Customizer: retain aspect ration when cropping media w/ shift+click/drag.

Enforce a 1:1 ratio when holding the shift key and dragging in the image cropping tool in the customizer context.

Props melchoyce, mikeschroder.
Fixes #40211.

Location:
trunk/src/wp-includes/js
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/media-views.js

    r41383 r41557  
    45244524    },
    45254525    onImageLoad: function() {
    4526         var imgOptions = this.controller.get('imgSelectOptions');
     4526        var imgOptions = this.controller.get('imgSelectOptions'),
     4527            imgSelect;
     4528
    45274529        if (typeof imgOptions === 'function') {
    45284530            imgOptions = imgOptions(this.options.attachment, this.controller);
    45294531        }
    45304532
    4531         imgOptions = _.extend(imgOptions, {parent: this.$el});
     4533        imgOptions = _.extend(imgOptions, {
     4534            parent: this.$el,
     4535            onInit: function() {
     4536                this.parent.children().on( 'mousedown touchstart', function( e ){
     4537
     4538                    if ( e.shiftKey ) {
     4539                        imgSelect.setOptions( {
     4540                            aspectRatio: '1:1'
     4541                        } );
     4542                    } else {
     4543                        imgSelect.setOptions( {
     4544                            aspectRatio: false
     4545                        } );
     4546                    }
     4547                } );
     4548            }
     4549        } );
    45324550        this.trigger('image-loaded');
    4533         this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
     4551        imgSelect = this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
    45344552    },
    45354553    onError: function() {
  • trunk/src/wp-includes/js/media/views/cropper.js

    r41351 r41557  
    4646    },
    4747    onImageLoad: function() {
    48         var imgOptions = this.controller.get('imgSelectOptions');
     48        var imgOptions = this.controller.get('imgSelectOptions'),
     49            imgSelect;
     50
    4951        if (typeof imgOptions === 'function') {
    5052            imgOptions = imgOptions(this.options.attachment, this.controller);
    5153        }
    5254
    53         imgOptions = _.extend(imgOptions, {parent: this.$el});
     55        imgOptions = _.extend(imgOptions, {
     56            parent: this.$el,
     57            onInit: function() {
     58                this.parent.children().on( 'mousedown touchstart', function( e ){
     59
     60                    if ( e.shiftKey ) {
     61                        imgSelect.setOptions( {
     62                            aspectRatio: '1:1'
     63                        } );
     64                    } else {
     65                        imgSelect.setOptions( {
     66                            aspectRatio: false
     67                        } );
     68                    }
     69                } );
     70            }
     71        } );
    5472        this.trigger('image-loaded');
    55         this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
     73        imgSelect = this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
    5674    },
    5775    onError: function() {
Note: See TracChangeset for help on using the changeset viewer.