WordPress.org

Make WordPress Core

Ticket #23935: 23935-improved-tick-marks.8.diff

File 23935-improved-tick-marks.8.diff, 14.3 KB (added by adamsilverstein, 12 months ago)

fixes last tick mark scope of changes not loaded correctly, fixes slider width calculation

  • wp-admin/js/revisions.js

     
    4040                slider: null, // the slider instance 
    4141 
    4242                constructor: function() { 
     43                        var self    = this; 
    4344                        this.slider = new revisions.view.Slider(); 
     45 
    4446                        if ( null === this.revisions ) { 
    4547                                this.revisions = new Revisions(); // set up collection 
    4648                                this.startRightModelLoading(); 
    4749 
    48                                 var self = this; 
    4950                                this.revisions.fetch({ // load revision data 
    5051                                        success: function() { 
    5152                                                self.stopRightModelLoading(); 
     
    5859                loadDiffs: function( models ) { 
    5960                        var self = this, 
    6061                                revisionsToLoad = models.where( { completed: false } ), 
    61                                 delay = 0; 
     62                                delay = 0, 
     63                                totalChanges; 
    6264 
    6365                        // match slider to passed revision_id 
    6466                        _.each( revisionsToLoad, function( revision ) { 
     
    7981                                                                if ( 0 === models.where( { completed: false } ).length ) 
    8082                                                                        self.stopModelLoadingSpinner(); 
    8183 
    82                                                                 self.tickmarkView.render(); 
    83  
    84                                                                 var totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), 
     84                                                                totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), 
    8585                                                                        scopeOfChanges = 'vsmall'; 
    8686 
    8787                                                                // Note: hard coded scope of changes 
     
    101101                                                                        // reload if current model refreshed 
    102102                                                                        self.revisionView.render(); 
    103103                                                                } 
    104  
     104                                                                self.tickmarkView.render(); 
    105105                                                        } 
    106106                                        } ); 
    107107                                        }, delay ) ; 
     
    191191                                        self.slider.refresh({ 
    192192                                                'max': self.revisions.length 
    193193                                        }); 
    194                                         // ensure right handle not beyond length, in particular if viewing autosaves is switched from on to off 
    195                                         // the number of models in the collection might get shorter, this ensures right handle is not beyond last model 
     194                                        // ensure right handle not beyond length 
    196195                                        if ( self.rightDiff > self.revisions.length ) 
    197196                                                self.rightDiff = self.revisions.length; 
    198197                                        }, 
     
    274273                                model: this.revisions 
    275274                        }); 
    276275                        this.tickmarkView.render(); 
    277                         this.tickmarkView.resetTicks(); 
    278276                } 
    279277        }); 
    280278 
     
    401399                refresh: function( options, slide ) { 
    402400                        $( '#diff-slider' ).slider( 'option', options ); 
    403401 
    404                         // reset all of the slider tooltips during a refresh, but not on prev/next button actions 
    405                         if ( ! slide ) 
    406                                 $( 'a.ui-slider-handle' ).html( '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"></span>' ); 
    407  
    408402                        // Triggers the slide event 
    409403                        if ( slide ) 
    410404                                $( '#diff-slider' ).trigger( 'slide' ); 
     
    441435                model: Revision, 
    442436 
    443437                resetTicks: function() { 
    444                         var sliderMax   = Diff.slider.option( 'max' ); 
    445                         var sliderWidth = Diff.slider.width(); 
    446                         var adjustMax   = Diff.singleRevision ? 0 : 1; 
    447                         var tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) ); 
     438                        var sliderMax, sliderWidth, adjustMax, tickWidth, tickCount = 0, aTickWidth, tickMargin, self = this, firstTick, lastTick; 
     439                        sliderMax   = Diff.slider.option( 'max' ); 
     440                        sliderWidth = Diff.slider.width(); 
     441                        adjustMax   = Diff.singleRevision ? 0 : 1; 
     442                        tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) ); 
     443                        tickWidth   = ( tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks 
     444                        tickWidth   = ( tickWidth < 10 ) ? 10 : tickWidth; 
     445                        sliderWidth = tickWidth * ( sliderMax - adjustMax ); //calculate the slider width 
     446                        aTickWidth  = $( '.revision-tick' ).width(); 
    448447 
    449                         // TODO: adjust right margins for wider ticks so they stay centered on handle stop point 
     448                        if ( tickWidth !== aTickWidth ) { // is the width already set correctly? 
     449                                $( '.revision-tick' ).each( function() { 
     450                                        tickMargin = Math.floor( ( tickWidth - $( this ).width() ) / 2 ) + 1; 
     451                                        $( this ).css( 'border-left', tickMargin + 'px solid #f7f7f7'); // space the ticks out using margins 
     452                                        $( this ).css( 'border-right', ( tickWidth - tickMargin - $( this ).width() ) + 'px solid #f7f7f7'); // space the ticks out using margins 
     453                                }); 
     454                                firstTick = $( '.revision-tick' ).first(); //cache selectors for optimization 
     455                                lastTick = $( '.revision-tick' ).last(); 
    450456 
    451                         // set minimum and maximum widths for tick marks 
    452                         tickWidth = (tickWidth > 50 ) ? 50 : tickWidth; 
    453                         tickWidth = (tickWidth < 10 ) ? 10 : tickWidth; 
     457                                sliderWidth = sliderWidth + Math.floor( ( tickWidth - ( lastTick.outerWidth() - lastTick.innerWidth() ) ) / 2 ); // room for the last tick 
     458                                sliderWidth = sliderWidth + Math.floor( ( tickWidth - ( firstTick.outerWidth() - firstTick.innerWidth() ) ) / 2 ); // room for the first tick 
     459                                firstTick.css( 'border-left', 'none' ); // first tick gets no left border 
     460                                lastTick.css( 'border-right', 'none' ); // last tick gets no right border 
     461                        } 
    454462 
    455                         sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1; 
    456  
     463                        /** 
     464                         * reset the slider width 
     465                         */ 
    457466                        Diff.slider.setWidth( sliderWidth ); 
    458467                        $( '.diff-slider-ticks-wrapper' ).width( sliderWidth ); 
    459468                        $( '#diff-slider-ticks' ).width( sliderWidth ); 
    460469 
    461                         var aTickWidth = $( '.revision-tick' ).width(); 
     470                        /** 
     471                         * go through all ticks, add hover and click interactions 
     472                         */ 
     473                        $( '.revision-tick' ).each( function() { 
     474                                Diff.slider.addTooltip ( $( this ), Diff.revisions.at( tickCount++ ).get( 'titleTooltip' ) ); 
     475                                $( this ).hover( 
     476                                        function() { 
     477                                                $( this ).find( '.ui-slider-tooltip' ).show().append('<div class="arrow"></div>'); 
     478                                        }, 
     479                                        function() { 
     480                                                $( this ).find( '.ui-slider-tooltip' ).hide().find( '.arrow' ).remove(); 
     481                                        } 
     482                                ); 
    462483 
    463                         if ( tickWidth !== aTickWidth ) { // is the width already set correctly? 
    464                                 $( '.revision-tick' ).each( function( ) { 
    465                                         $(this).css( 'margin-right', tickWidth - 1 + 'px'); // space the ticks out using right margin 
    466                                 }); 
    467  
    468                                 $( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin 
    469                         } 
    470  
     484                                /** 
     485                                 * move the slider handle when the tick marks are clicked 
     486                                 */ 
     487                                $( this ).on( 'click', 
     488                                        { tickCount: tickCount }, // //pass the tick through so we know where to move the handle 
     489                                        function( event ) { 
     490                                                if ( Diff.slider.singleRevision ) { //single handle mode 
     491                                                        Diff.rightDiff = event.data.tickCount; //reposition the right handle 
     492                                                        Diff.slider.refresh({ 
     493                                                                value: Diff.rightDiff - 1 
     494                                                        } ); 
     495                                                } else { //compare two mode 
     496                                                        if ( event.data.tickCount < Diff.leftDiff || 
     497                                                                isRtl && event.data.tickCount > Diff.leftDiff ) { // click was on the 'left' side 
     498                                                                        Diff.leftDiff = event.data.tickCount; // set the left handle location 
     499                                                                        Diff.reloadRight(); //reload the right handle comparison models 
     500                                                        } else { //middle or 'right' clicks 
     501                                                                Diff.rightDiff = event.data.tickCount; // set the right handle location 
     502                                                                Diff.reloadLeft(); //reload left handle models 
     503                                                        } 
     504                                                        Diff.slider.refresh( { // set the slider handle positions 
     505                                                                values: [ Diff.leftDiff, Diff.rightDiff ] 
     506                                                        } ); 
     507                                                } 
     508                                                Diff.revisionView.render(); // render the main view 
     509                                        } ); 
     510                        } ); 
    471511                }, 
    472512 
    473                 // render the tickmark view 
     513                // render the tick mark view 
    474514                render: function() { 
    475                         var self = this; 
     515                        var self = this, addHtml; 
    476516 
    477517                        if ( null !== self.model ) { 
    478                                 var addHtml = ""; 
     518                                addHtml = ""; 
    479519                                _.each ( self.model.models, function( theModel ) { 
    480520                                        addHtml = addHtml + self.template ( theModel.toJSON() ); 
    481521                                }); 
     
    485525                        self.resetTicks(); 
    486526                        return self; 
    487527                } 
    488         }); 
     528        } ); 
    489529 
    490530        /** 
    491531         * wp.revisions.view.Interact 
     
    504544                }, 
    505545 
    506546                render: function() { 
     547                        var modelcount; 
    507548                        this.$el.html( this.template ); 
    508549 
    509                         var modelcount = Diff.revisions.length; 
     550                        modelcount = Diff.revisions.length; 
    510551 
    511552                        Diff.slider.singleRevision = Diff.singleRevision; 
    512553                        Diff.slider.render(); 
     
    580621 
    581622                // render the revisions 
    582623                render: function() { 
    583                         var addHtml = ''; 
    584                         var thediff; 
     624                        var addHtml = '', thediff; 
    585625 
    586626                        // compare two revisions mode? 
    587627                        if ( ! Diff.singleRevision ) { 
     
    608648                                $( '.diff-slider-ticks-wrapper' ).hide(); 
    609649                        } 
    610650 
    611                         // add tooltips to the handles 
    612                         if ( ! Diff.singleRevision ) { 
    613                                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle.left-handle' ), 
    614                                         ( Diff.leftDiff < 0 ) ? '' : Diff.revisions.at( Diff.leftDiff - 1 ).get( 'titleTooltip' ) ); 
    615                                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle.right-handle' ), 
    616                                         ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) ); 
    617                         } else { 
    618                                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle' ), 
    619                                         ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) ); 
    620                         } 
    621  
    622651                        this.toggleCompareTwoCheckbox(); 
    623652 
    624653                        // hide the restore button when on the last sport/current post data 
  • wp-admin/revision.php

     
    9797                <h2 class="long-header"><?php echo $h2; ?></h2> 
    9898 
    9999                <div id="loading-status" class="updated message"> 
    100                         <p><span class="spinner" ></span> <?php _e( 'Calculating revision diffs' ); ?></p> 
     100                        <p><span class="spinner" ></span></p> 
    101101                </div> 
    102102 
    103103                <div class="diff-slider-ticks-wrapper"> 
     
    152152</script> 
    153153 
    154154<script id="tmpl-revision-ticks" type="text/html"> 
    155         <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}"></div> 
     155        <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}"> 
     156                <span class="ui-slider-tooltip ui-widget-content ui-corner-all hidden"></span> 
     157        </div> 
    156158</script> 
    157159<?php 
    158160require_once( './admin-footer.php' ); 
  • wp-admin/css/colors-fresh.css

     
    13761376        border: 1px solid #dfdfdf; 
    13771377} 
    13781378 
    1379 #diff-slider .ui-slider-tooltip { 
     1379#diff-slider .ui-slider-tooltip, 
     1380#diff-slider-ticks .ui-slider-tooltip { 
    13801381        border-color: #d7d7d7; 
    13811382        background-color: #fff; 
    13821383} 
     
    14001401        background-image: none; 
    14011402} 
    14021403 
    1403 .revision-tick.scope-of-changes-vsmall { 
     1404.revision-tick.scope-of-changes-none { 
    14041405        background-color: #d7d7d7; 
    14051406} 
    14061407 
    1407 .revision-tick.scope-of-changes-small { 
     1408.revision-tick.scope-of-changes-vsmall { 
    14081409        background-color: #c3c3c3; 
    14091410} 
    14101411 
    1411 .revision-tick.scope-of-changes-med { 
     1412.revision-tick.scope-of-changes-small { 
    14121413        background-color: #b0b0b0; 
    14131414} 
    14141415 
    1415 .revision-tick.scope-of-changes-large { 
     1416.revision-tick.scope-of-changes-med { 
    14161417        background-color: #9c9c9c; 
    14171418} 
    14181419 
    1419 .revision-tick.scope-of-changes-vlarge { 
     1420.revision-tick.scope-of-changes-large { 
    14201421        background-color: #898989; 
    14211422} 
    14221423 
     1424.revision-tick.scope-of-changes-vlarge { 
     1425        background-color: #696969; 
     1426} 
     1427 
    14231428.diff-label { 
    14241429        color: #666; 
    14251430} 
    14261431 
    1427 body .ui-tooltip { 
    1428         border-color: #d7d7d7; 
    1429         background-color: #fff; 
    1430 } 
    1431  
    14321432/* jQuery UI Slider */ 
    14331433.wp-slider.ui-slider { 
    14341434        border-color: #d7d7d7; 
  • wp-admin/css/wp-admin.css

     
    35853585 
    35863586#loading-status { 
    35873587        display: none; 
     3588        position: absolute; 
     3589        top: 8px; 
     3590        z-index: 1000; 
    35883591} 
    35893592 
    35903593#loading-status .spinner { 
     
    36193622        width: 95%; 
    36203623} 
    36213624 
    3622 #diff-slider .ui-slider-tooltip { 
     3625#diff-slider .ui-slider-tooltip, 
     3626#diff-slider-ticks .ui-slider-tooltip { 
    36233627        display: none; 
    36243628        position: absolute; 
    3625         bottom: 20px; 
    3626         margin-left: -4em; 
     3629        bottom: 21px; 
     3630        margin-left: -74px; 
    36273631} 
    36283632 
    36293633#diff-slider .ui-state-active .ui-slider-tooltip, 
     
    36403644        display: inline; 
    36413645} 
    36423646 
    3643 .diff-slider-ticks-wrapper { 
    3644         margin: 0 auto; 
    3645         text-align: center; 
    3646 } 
    3647  
    3648 #diff-slider-ticks { 
    3649         position: absolute; 
    3650         z-index: 2; 
    3651         margin-top: 20px; 
    3652 } 
    3653  
    36543647.diff-label { 
    36553648        margin: 20px 0 5px; 
    36563649        padding-left: 3px; 
     
    37053698        display: block; 
    37063699} 
    37073700 
     3701.diff-slider-ticks-wrapper { 
     3702        margin: 0 auto; 
     3703        text-align: left; 
     3704} 
     3705 
     3706#diff-slider-ticks { 
     3707        position: absolute; 
     3708        z-index: 2; 
     3709        margin-top: 20px; 
     3710} 
     3711 
    37083712.revision-tick { 
    37093713        width: 1px; 
    37103714        float: left; 
    3711         margin: 1px 15px 0 0; 
     3715        margin: 1px 0 0 0; 
    37123716        height: .8em; 
    37133717        padding: 0; 
    37143718        margin-left: 0px; 
     3719        cursor: pointer; 
    37153720} 
    37163721 
    3717 .revision-tick.scope-of-changes-vsmall { 
     3722#diff-slider-ticks .revision-tick:first-child { 
     3723        border-bottom-left-radius: 3px; 
     3724        border-top-left-radius: 3px; 
     3725} 
     3726 
     3727#diff-slider-ticks .revision-tick:last-child { 
     3728        border-bottom-right-radius: 3px; 
     3729        border-top-right-radius: 3px; 
     3730} 
     3731 
     3732.revision-tick.scope-of-changes-none { 
    37183733        width: 1px; 
    37193734} 
    37203735 
    3721 .revision-tick.scope-of-changes-small { 
     3736.revision-tick.scope-of-changes-vsmall { 
    37223737        width: 2px; 
    3723         margin-left: -1px; 
    37243738} 
    37253739 
    3726 .revision-tick.scope-of-changes-med { 
     3740.revision-tick.scope-of-changes-small { 
    37273741        width: 3px; 
    3728         margin-left: -2px; 
    37293742} 
    37303743 
    3731 .revision-tick.scope-of-changes-large { 
     3744.revision-tick.scope-of-changes-med { 
    37323745        width: 4px; 
    3733         margin-left: -3px; 
    37343746} 
    37353747 
     3748.revision-tick.scope-of-changes-large { 
     3749        width: 5px; 
     3750} 
     3751 
    37363752.revision-tick.scope-of-changes-vlarge { 
    3737         margin-left: -3px; 
    3738         width: 4px; 
    3739         left: 1; 
     3753        width: 6px; 
    37403754} 
    37413755 
    37423756.diff-loading { 
     
    37573771.ui-slider-tooltip img { 
    37583772        float: left; 
    37593773        margin-right: 5px; 
     3774        margin-top: 5px; 
    37603775} 
    37613776 
    37623777 
     
    38523867        font-size: .7em; 
    38533868        display: block; 
    38543869        border: 0; 
    3855  
    3856         background-color: #8cc1e9; 
    3857         background-image: -webkit-gradient(linear, left bottom, left top, from(#72a7cf), to(#8cc1e9)); 
    3858         background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9); 
    3859         background-image:    -moz-linear-gradient(bottom, #72a7cf, #8cc1e9); 
    3860         background-image:      -o-linear-gradient(bottom, #72a7cf, #8cc1e9); 
    3861         background-image: linear-gradient(to top, #72a7cf, #8cc1e9); 
     3870        background-color: transparent; 
     3871        background-image: none; 
    38623872} 
    38633873 
    38643874.wp-slider.ui-slider-horizontal { 
  • wp-admin/css/colors-classic.css

     
    14821482        border: 1px solid #d1e5ee; 
    14831483} 
    14841484 
    1485 #diff-slider .ui-slider-tooltip { 
     1485#diff-slider .ui-slider-tooltip, 
     1486#diff-slider-ticks .ui-slider-tooltip { 
    14861487        border-color: #d1e5ee; 
    14871488        background-color: #fff; 
    14881489} 
     
    15021503        background-image: none; 
    15031504} 
    15041505 
     1506.revision-tick.scope-of-changes-none { 
     1507        background-color: #d7d7d7; 
     1508} 
     1509 
    15051510.revision-tick.scope-of-changes-vsmall { 
    15061511        background-color: #d1e5ee; 
    15071512}