WordPress.org

Make WordPress Core

Changeset 24603


Ignore:
Timestamp:
07/09/2013 07:33:15 AM (7 years ago)
Author:
koopersmith
Message:

Revisions: A healthy dose of pinking shears. See #24425.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/js/revisions.js

    r24602 r24603  
    4848
    4949    revisions.model.Diff = Backbone.Model.extend({
    50         initialize: function(attributes, options) {
     50        initialize: function( attributes, options ) {
    5151            var fields = this.get('fields');
    5252            this.unset('fields');
     
    5757
    5858    revisions.model.Diffs = Backbone.Collection.extend({
    59         initialize: function(models, options) {
     59        initialize: function( models, options ) {
    6060            this.revisions = options.revisions;
    6161            this.requests  = {};
     
    131131        getProximalDiffIds: function() {
    132132            var previous = 0, ids = [];
    133             this.revisions.each( _.bind( function(revision) {
     133            this.revisions.each( _.bind( function( revision ) {
    134134                ids.push( previous + ':' + revision.id );
    135135                previous = revision.id;
     
    161161        sync: function( method, model, options ) {
    162162            if ( 'read' === method ) {
    163                 options         = options || {};
     163                options = options || {};
    164164                options.context = this;
    165                 options.data    = _.extend( options.data || {}, {
     165                options.data = _.extend( options.data || {}, {
    166166                    action: 'get-revision-diffs',
    167167                    post_id: revisions.settings.postId
     
    233233
    234234            this.listenTo( this.model, 'change:diffId', this.updateDiff );
    235 
    236235            this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
    237236
     
    270269                if ( this.model.get('diffId') !== diff.id )
    271270                    return;
     271
    272272                this.views.set( '.revisions-diff-frame', new revisions.view.Diff({
    273273                    model: diff
    274                 }));
    275                 this.model.trigger( 'renderDiff' );
     274                }) );
     275
     276                this.model.trigger('renderDiff');
    276277            });
    277278        },
     
    291292            this.views.add( new revisions.view.Buttons({
    292293                model: this.model
    293             }));
     294            }) );
    294295
    295296            // Add the checkbox view
    296297            this.views.add( new revisions.view.Checkbox({
    297298                model: this.model
    298             }));
     299            }) );
    299300
    300301            // Add the tooltip view
     
    307308            this.views.add( new revisions.view.Tickmarks({
    308309                model: this.model
    309             }));
     310            }) );
    310311
    311312            // Add the Slider view with a reference to the tooltip view
     
    331332        numberOfTickmarksSet: function() {
    332333            var tickCount = this.model.revisions.length - 1, // One tickmark per model
    333                 sliderWidth = $( '.wp-slider' ).parent().width() * 0.7, // Width of slider is 70% of container (reset on resize)
     334                sliderWidth = $('.wp-slider').parent().width() * 0.7, // Width of slider is 70% of container (reset on resize)
    334335                tickWidth = Math.floor( sliderWidth / tickCount ), // Divide width by # of tickmarks, round down
    335336                newSiderWidth = ( ( tickWidth + 1 ) * tickCount ) + 1, // Calculate the actual width
    336337                tickNumber;
    337338
    338             $( '.wp-slider' ).css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size
     339            $('.wp-slider').css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size
    339340            this.$el.css( 'width', newSiderWidth ); // Match the tickmark div width
    340341
    341342            for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){
    342                 this.$el.append( '<div style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>' );
     343                this.$el.append('<div style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>');
    343344            }
    344345        },
     
    348349            self.numberOfTickmarksSet();
    349350            $( window ).on( 'resize', _.debounce( function() {
    350                 self.$el.html( '' );
     351                self.$el.html('');
    351352                self.numberOfTickmarksSet();
    352                 }, 50 ) );
     353            }, 50 ) );
    353354        }
    354355    });
     
    376377            this.$el.html( this.template( this.model.toJSON() ) );
    377378
    378             $( '#restore-revision' ).prop( 'disabled', this.model.get( 'to' ).attributes.current );
     379            $('#restore-revision').prop( 'disabled', this.model.get('to').attributes.current );
    379380        }
    380381    });
     
    384385    revisions.view.Checkbox = wp.Backbone.View.extend({
    385386        className: 'revisions-checkbox',
    386         template: wp.template( 'revisions-checkbox' ),
     387        template: wp.template('revisions-checkbox'),
    387388
    388389        events: {
     
    395396
    396397        updateCompareTwoMode: function() {
    397             if ( this.model.get( 'compareTwoMode' ) ) {
    398                 $( '.compare-two-revisions' ).prop( 'checked', true );
     398            if ( this.model.get('compareTwoMode') ) {
     399                $('.compare-two-revisions').prop( 'checked', true );
    399400                // in RTL mode the 'left handle' is the second in the slider, 'right' is first
    400                 $( '.wp-slider a.ui-slider-handle' ).first().addClass( isRtl ? 'right-handle' : 'left-handle' );
    401                 $( '.wp-slider a.ui-slider-handle' ).last().addClass( isRtl ? 'left-handle' : 'right-handle' );
     401                $('.wp-slider a.ui-slider-handle').first().addClass( isRtl ? 'right-handle' : 'left-handle' );
     402                $('.wp-slider a.ui-slider-handle').last().addClass( isRtl ? 'left-handle' : 'right-handle' );
    402403            } else {
    403                 $( '.compare-two-revisions' ).prop( 'checked', false );
    404                 $( '.wp-slider a.ui-slider-handle' ).removeClass( 'left-handle' ).removeClass( 'right-handle' );
     404                $('.compare-two-revisions').prop( 'checked', false );
     405                $('.wp-slider a.ui-slider-handle').removeClass('left-handle').removeClass('right-handle');
    405406            }
    406407
     
    410411        compareTwoToggle: function( event ) {
    411412            // Activate compare two mode?
    412             this.model.set( { compareTwoMode: $( '.compare-two-revisions' ).prop( 'checked' ) } );
     413            this.model.set({ compareTwoMode: $('.compare-two-revisions').prop('checked') });
    413414
    414415            // Update route
    415             this.model.revisionsRouter.navigateRoute( this.model.get( 'to').id, this.model.get( 'from' ).id );
     416            this.model.revisionsRouter.navigateRoute( this.model.get('to').id, this.model.get('from').id );
    416417        },
    417418
     
    419420            // Hide compare two mode toggle when fewer than three revisions.
    420421            if ( this.model.revisions.length < 3 )
    421                 $( '.revision-toggle-compare-mode' ).hide();
     422                $('.revision-toggle-compare-mode').hide();
    422423
    423424            this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
     
    433434    revisions.view.Tooltip = wp.Backbone.View.extend({
    434435        className: 'revisions-tooltip',
    435         template: wp.template( 'revisions-tooltip' ),
     436        template: wp.template('revisions-tooltip'),
    436437
    437438        initialize: function() {
     
    441442        ready: function() {
    442443            // Hide tooltip on start.
    443             this.$el.addClass( 'hidden' );
     444            this.$el.addClass('hidden');
    444445        },
    445446
    446447        show: function() {
    447             this.$el.removeClass( 'hidden' );
     448            this.$el.removeClass('hidden');
    448449        },
    449450
    450451        hide: function() {
    451             this.$el.addClass( 'hidden' );
     452            this.$el.addClass('hidden');
    452453        },
    453454
    454455        render: function() {
    455456            // Check if a revision exists.
    456             if ( null === this.model.get( 'revision' ) )
     457            if ( null === this.model.get('revision') )
    457458                return;
    458459
    459460            // Insert revision data.
    460             this.$el.html( this.template( this.model.get( 'revision' ).toJSON() ) );
     461            this.$el.html( this.template( this.model.get('revision').toJSON() ) );
    461462
    462463            // Set the position.
    463             var offset = $( '.revisions-buttons' ).offset().left;
    464             this.$el.css( 'left', this.model.get( 'position' ) - offset );
     464            var offset = $('.revisions-buttons').offset().left;
     465            this.$el.css( 'left', this.model.get('position') - offset );
    465466        }
    466467    });
     
    470471    revisions.view.Buttons = wp.Backbone.View.extend({
    471472        className: 'revisions-buttons',
    472         template: wp.template( 'revisions-buttons' ),
     473        template: wp.template('revisions-buttons'),
    473474
    474475        events: {
     
    504505        // Go to the 'next' revision, direction takes into account RTL mode.
    505506        nextRevision: function() {
    506             var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 : this.model.revisions.indexOf( this.model.get( 'to' ) );
     507            var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : this.model.revisions.indexOf( this.model.get('to') );
    507508            toIndex     = isRtl ? toIndex - 1 : toIndex + 1;
    508509            this.gotoModel( toIndex );
     
    511512        // Go to the 'previous' revision, direction takes into account RTL mode.
    512513        previousRevision: function() {
    513             var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 : this.model.revisions.indexOf( this.model.get( 'to' ) );
     514            var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : this.model.revisions.indexOf( this.model.get('to') );
    514515            toIndex     = isRtl ? toIndex + 1 : toIndex - 1;
    515516            this.gotoModel( toIndex );
     
    520521            var maxVal = this.model.revisions.length - 1,
    521522                minVal = 0,
    522                 next = $( '.revisions-next .button' ),
    523                 previous = $( '.revisions-previous .button' ),
    524                 val = this.model.revisions.indexOf( this.model.get( 'to' ) );
     523                next = $('.revisions-next .button'),
     524                previous = $('.revisions-previous .button'),
     525                val = this.model.revisions.indexOf( this.model.get('to') );
    525526
    526527            // Disable "Next" button if you're on the last node.
     
    555556            var initiallySelectedRevisionIndex =
    556557                this.model.revisions.indexOf(
    557                     this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) );
     558                    this.model.revisions.findWhere({ id: Number( revisions.settings.selectedRevision ) }) );
    558559
    559560            this.settings = new revisions.model.Slider({
     
    569570            // Refresh the currently selected revision position in case router has set it.
    570571            this.settings.attributes.value = this.model.revisions.indexOf(
    571                 this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) );
     572                this.model.revisions.findWhere({ id: Number( revisions.settings.selectedRevision ) }) );
    572573
    573574            // And update the slider in case the route has set it.
     
    620621
    621622        updateSliderSettings: function() {
    622             if ( this.model.get( 'compareTwoMode' ) ) {
     623            if ( this.model.get('compareTwoMode') ) {
    623624                var leftValue, rightValue;
    624625
    625626                // In single handle mode, the 1st stored revision is 'blank' and the 'from' model is not set
    626627                // In this case we move the to index over one
    627                 if ( 'undefined' == typeof this.model.get( 'from' ) ) {
     628                if ( 'undefined' == typeof this.model.get('from') ) {
    628629                    if ( isRtl ) {
    629                         leftValue  = this.model.revisions.length -  this.model.revisions.indexOf( this.model.get( 'to' ) ) - 2;
     630                        leftValue  = this.model.revisions.length -  this.model.revisions.indexOf( this.model.get('to') ) - 2;
    630631                        rightValue = leftValue + 1;
    631632                    } else {
    632                         leftValue  = this.model.revisions.indexOf( this.model.get( 'to' ) );
     633                        leftValue  = this.model.revisions.indexOf( this.model.get('to') );
    633634                        rightValue = leftValue + 1;
    634635                    }
    635636                } else {
    636                     leftValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
    637                                             this.model.revisions.indexOf( this.model.get( 'from' ) ),
    638                     rightValue = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'from' ) ) - 1 :
    639                                             this.model.revisions.indexOf( this.model.get( 'to' ) );
     637                    leftValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 :
     638                                            this.model.revisions.indexOf( this.model.get('from') ),
     639                    rightValue = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get('from') ) - 1 :
     640                                            this.model.revisions.indexOf( this.model.get('to') );
    640641                }
    641642
     
    653654                this.$el.slider( { // Set handle to current to model
    654655                    // Reverse order for RTL.
    655                     value: isRtl ?  this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
    656                                     this.model.revisions.indexOf( this.model.get( 'to' ) ),
     656                    value: isRtl ?  this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 :
     657                                    this.model.revisions.indexOf( this.model.get('to') ),
    657658                    values: null, // Clear existing two handled values
    658659                    range: false
     
    660661            }
    661662
    662             if ( this.model.get( 'compareTwoMode' ) ){
     663            if ( this.model.get('compareTwoMode') ){
    663664                // in RTL mode the 'left handle' is the second in the slider, 'right' is first
    664665                $( 'a.ui-slider-handle', this.$el )
     
    675676        diffIdChanged: function() {
    676677            // Reset the view settings when diffId is changed
    677             if ( this.model.get( 'compareTwoMode' ) ) {
    678                 this.settings.set( { 'values': [
    679                         this.model.revisions.indexOf( this.model.get( 'from' ) ),
    680                         this.model.revisions.indexOf( this.model.get( 'to' ) )
    681                     ] } );
     678            if ( this.model.get('compareTwoMode') ) {
     679                this.settings.set({ 'values': [
     680                    this.model.revisions.indexOf( this.model.get('from') ),
     681                    this.model.revisions.indexOf( this.model.get('to') )
     682                ] });
    682683            } else {
    683                 this.settings.set( { 'value': this.model.revisions.indexOf( this.model.get( 'to' ) ) } );
     684                this.settings.set({ 'value': this.model.revisions.indexOf( this.model.get('to') ) });
    684685            }
    685686        },
     
    703704                // In two handle mode, ensure handles can't be dragged past each other.
    704705                // Adjust left/right boundaries and reset points.
    705                 if ( view.model.get( 'compareTwoMode' ) ) {
    706                     var rightHandle = $( ui.handle ).parent().find( '.right-handle' ),
    707                         leftHandle  = $( ui.handle ).parent().find( '.left-handle' );
    708 
    709                     if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
     706                if ( view.model.get('compareTwoMode') ) {
     707                    var rightHandle = $( ui.handle ).parent().find('.right-handle'),
     708                        leftHandle  = $( ui.handle ).parent().find('.left-handle');
     709
     710                    if ( $( ui.handle ).hasClass('left-handle') ) {
    710711                        // Dragging the left handle, boundary is right handle.
    711712                        // RTL mode calculations reverse directions.
     
    744745            var attributes;
    745746            // Compare two revisions mode
    746             if ( 'undefined' !== typeof ui.values && this.model.get( 'compareTwoMode' ) ) {
     747            if ( 'undefined' !== typeof ui.values && this.model.get('compareTwoMode') ) {
    747748                // Prevent sliders from occupying same spot
    748749                if ( ui.values[1] === ui.values[0] )
     
    765766                    attributes.from = this.model.revisions.at( sliderPosition - 1  );
    766767                else
    767                     this.model.unset('from', { silent: true });
     768                    this.model.unset( 'from', { silent: true });
    768769            }
    769770            this.model.set( attributes );
     
    771772
    772773        stop: function( event, ui ) {
    773             $( window ).off( 'mousemove' );
     774            $( window ).off('mousemove');
    774775
    775776            // Reset settings props handle back to the step position.
    776             this.settings.trigger( 'change' );
     777            this.settings.trigger('change');
    777778        }
    778779    });
     
    806807        navigateRoute: function( to, from ) {
    807808            var navigateTo = '/revision/from/' + from + '/to/' + to + '/handles/';
    808             if ( this.model.get( 'compareTwoMode' ) ) {
     809            if ( this.model.get('compareTwoMode') ) {
    809810                navigateTo += '2';
    810811            } else {
     
    823824
    824825            if ( 'undefined' !== typeof this.model ) {
    825                 var selectedToRevision =
    826                     this.model.revisions.findWhere( { 'id': Number( to ) } ),
    827                     selectedFromRevision =
    828                     this.model.revisions.findWhere( { 'id': Number( from ) } );
    829 
    830                 this.model.set( {
    831                     to:   selectedToRevision,
    832                     from: selectedFromRevision } );
     826                var selectedToRevision = this.model.revisions.findWhere({ 'id': Number( to ) }),
     827                    selectedFromRevision = this.model.revisions.findWhere({ 'id': Number( from ) });
     828
     829                this.model.set({
     830                    to: selectedToRevision,
     831                    from: selectedFromRevision
     832                });
    833833            }
    834834            revisions.settings.selectedRevision = to;
Note: See TracChangeset for help on using the changeset viewer.