WordPress.org

Make WordPress Core

Ticket #23935: improved-tick-marks.diff

File improved-tick-marks.diff, 11.1 KB (added by adamsilverstein, 12 months ago)
  • wp-admin/js/revisions.js

     
    4444                slider: null, // the slider instance 
    4545 
    4646                constructor: function() { 
     47                        var self    = this; 
    4748                        this.slider = new revisions.view.Slider(); 
     49 
    4850                        if ( null === this.revisions ) { 
    4951                                this.revisions = new Revisions(); // set up collection 
    5052                                this.startRightModelLoading(); 
    5153 
    52                                 var self = this; 
    5354                                this.revisions.fetch({ // load revision data 
    5455                                        success: function() { 
    5556                                                self.stopRightModelLoading(); 
     
    6263                loadDiffs: function( models ) { 
    6364                        var self = this, 
    6465                                revisionsToLoad = models.where( { completed: false } ), 
    65                                 delay = 0; 
     66                                delay = 0, 
     67                                totalChanges; 
    6668 
    6769                        // match slider to passed revision_id 
    6870                        _.each( revisionsToLoad, function( revision ) { 
     
    8587 
    8688                                                                self.tickmarkView.render(); 
    8789 
    88                                                                 var totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), 
     90                                                                totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), 
    8991                                                                        scopeOfChanges = 'vsmall'; 
    9092 
    9193                                                                // Note: hard coded scope of changes 
     
    195197                                        self.slider.refresh({ 
    196198                                                'max': self.revisions.length 
    197199                                        }); 
    198                                         // ensure right handle not beyond length, in particular if viewing autosaves is switched from on to off 
    199                                         // the number of models in the collection might get shorter, this ensures right handle is not beyond last model 
     200                                        // ensure right handle not beyond length 
    200201                                        if ( self.rightDiff > self.revisions.length ) 
    201202                                                self.rightDiff = self.revisions.length; 
    202203                                        }, 
     
    411412                refresh: function( options, slide ) { 
    412413                        $( '#diff-slider' ).slider( 'option', options ); 
    413414 
    414                         // reset all of the slider tooltips during a refresh, but not on prev/next button actions 
    415                         if ( ! slide ) 
    416                                 $( 'a.ui-slider-handle' ).html( '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"></span>' ); 
    417  
    418415                        // Triggers the slide event 
    419416                        if ( slide ) 
    420417                                $( '#diff-slider' ).trigger( 'slide' ); 
     
    451448                model: Revision, 
    452449 
    453450                resetTicks: function() { 
    454                         var sliderMax   = Diff.slider.option( 'max' ); 
    455                         var sliderWidth = Diff.slider.width(); 
    456                         var adjustMax   = Diff.singleRevision ? 0 : 1; 
    457                         var tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) ); 
     451                        var sliderMax, sliderWidth, adjustMax, tickWidth, tickCount = 0, aTickWidth, tickMargin, self = this; 
     452                        sliderMax   = Diff.slider.option( 'max' ); 
     453                        sliderWidth = Diff.slider.width(); 
     454                        adjustMax   = Diff.singleRevision ? 0 : 1; 
     455                        tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) ); 
     456                        tickWidth   = (tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks 
     457                        tickWidth   = (tickWidth < 10 ) ? 10 : tickWidth; 
     458                        sliderWidth = tickWidth * (sliderMax - adjustMax ) + 2; //calculate the slider width 
     459                        aTickWidth  = $( '.revision-tick' ).width(); 
    458460 
    459                         // TODO: adjust right margins for wider ticks so they stay centered on handle stop point 
     461                        if ( tickWidth !== aTickWidth ) { // is the width already set correctly? 
     462                                $( '.revision-tick' ).each( function() { 
     463                                        tickMargin = Math.floor( ( tickWidth - $( this ).width() ) / 2 ) + 1; 
     464                                        $( this ).css( 'border-left', tickMargin + 'px solid #f7f7f7'); // space the ticks out using margins 
     465                                        $( this ).css( 'border-right', ( tickWidth - tickMargin - $( this ).width() ) + 'px solid #f7f7f7'); // space the ticks out using margins 
     466                                }); 
     467                                sliderWidth = sliderWidth + 1; // one extra pixel so it all fits 
     468                                $( '.revision-tick' ).last().css( 'border-right', 'none' ); // last tick gets no right border 
     469                                $( '.revision-tick' ).first().css( 'border-left', 'none' ); // first tick gets no left border 
     470                        } 
    460471 
    461                         // set minimum and maximum widths for tick marks 
    462                         tickWidth = (tickWidth > 50 ) ? 50 : tickWidth; 
    463                         tickWidth = (tickWidth < 10 ) ? 10 : tickWidth; 
    464  
    465                         sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1; 
    466  
     472                        /** 
     473                         * reset the slider width 
     474                         */ 
    467475                        Diff.slider.setWidth( sliderWidth ); 
    468476                        $( '.diff-slider-ticks-wrapper' ).width( sliderWidth ); 
    469477                        $( '#diff-slider-ticks' ).width( sliderWidth ); 
    470478 
    471                         var aTickWidth = $( '.revision-tick' ).width(); 
     479                        /** 
     480                         * go through all ticks, add hover and click interactions 
     481                         */ 
     482                        $( '.revision-tick' ).each( function() { 
     483                                Diff.slider.addTooltip ( $( this ), Diff.revisions.at( tickCount++ ).get( 'titleTooltip' ) ); 
     484                                $( this ).hover( 
     485                                        function() { 
     486                                                $( this ).find( '.ui-slider-tooltip' ).show(); 
     487                                        }, 
     488                                        function() { 
     489                                                $( this ).find( '.ui-slider-tooltip' ).hide(); 
     490                                        } 
     491                                ); 
    472492 
    473                         if ( tickWidth !== aTickWidth ) { // is the width already set correctly? 
    474                                 $( '.revision-tick' ).each( function( ) { 
    475                                         $(this).css( 'margin-right', tickWidth - 1 + 'px'); // space the ticks out using right margin 
    476                                 }); 
    477  
    478                                 $( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin 
    479                         } 
    480  
     493                                /** 
     494                                 * move the slider handle when the tick marks are clicked 
     495                                 */ 
     496                                $( this ).on( 'click', 
     497                                        { tickCount: tickCount }, // //pass the tick through so we know where to move the handle 
     498                                        function( event ) { 
     499                                                if ( Diff.slider.singleRevision ) { //single handle mode 
     500                                                        Diff.rightDiff = event.data.tickCount; //reposition the right handle 
     501                                                        Diff.slider.refresh({ 
     502                                                                value: Diff.rightDiff - 1 
     503                                                        } ); 
     504                                                } else { //compare two mode 
     505                                                        if ( event.data.tickCount < Diff.leftDiff || 
     506                                                                isRtl && event.data.tickCount > Diff.leftDiff ) { // click was on the 'left' side 
     507                                                                        Diff.leftDiff = event.data.tickCount; // set the left handle location 
     508                                                                        Diff.reloadRight(); //reload the right handle comparison models 
     509                                                        } else { //middle or 'right' clicks 
     510                                                                Diff.rightDiff = event.data.tickCount; // set the right handle location 
     511                                                                Diff.reloadLeft(); //reload left handle models 
     512                                                        } 
     513                                                        Diff.slider.refresh( { // set the slider handle positions 
     514                                                                values: [ Diff.leftDiff, Diff.rightDiff ] 
     515                                                        } ); 
     516                                                } 
     517                                                Diff.revisionView.render(); // render the main view 
     518                                        } ); 
     519                        } ); 
    481520                }, 
    482521 
    483                 // render the tickmark view 
     522                // render the tick mark view 
    484523                render: function() { 
    485                         var self = this; 
     524                        var self = this, addHtml; 
    486525 
    487526                        if ( null !== self.model ) { 
    488                                 var addHtml = ""; 
     527                                addHtml = ""; 
    489528                                _.each ( self.model.models, function( theModel ) { 
    490529                                        addHtml = addHtml + self.template ( theModel.toJSON() ); 
    491530                                }); 
     
    495534                        self.resetTicks(); 
    496535                        return self; 
    497536                } 
    498         }); 
     537        } ); 
    499538 
    500539        /** 
    501540         * wp.revisions.view.Interact 
     
    514553                }, 
    515554 
    516555                render: function() { 
     556                        var modelcount; 
    517557                        this.$el.html( this.template ); 
    518558 
    519                         var modelcount = Diff.revisions.length; 
     559                        modelcount = Diff.revisions.length; 
    520560 
    521561                        Diff.slider.singleRevision = Diff.singleRevision; 
    522562                        Diff.slider.render(); 
     
    590630 
    591631                // render the revisions 
    592632                render: function() { 
    593                         var addHtml = ''; 
    594                         var thediff; 
     633                        var addHtml = '', thediff; 
    595634 
    596635                        // compare two revisions mode? 
    597636                        if ( ! Diff.singleRevision ) { 
     
    618657                                $( '.diff-slider-ticks-wrapper' ).hide(); 
    619658                        } 
    620659 
    621                         // add tooltips to the handles 
    622                         if ( ! Diff.singleRevision ) { 
    623                                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle.left-handle' ), 
    624                                         ( Diff.leftDiff < 0 ) ? '' : Diff.revisions.at( Diff.leftDiff - 1 ).get( 'titleTooltip' ) ); 
    625                                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle.right-handle' ), 
    626                                         ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) ); 
    627                         } else { 
    628                                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle' ), 
    629                                         ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) ); 
    630                         } 
    631  
    632660                        this.toggleCompareTwoCheckbox(); 
    633661 
    634662                        // hide the restore button when on the last sport/current post data 
  • wp-admin/revision.php

     
    102102                <h2 class="long-header"><?php echo $h2; ?></h2> 
    103103 
    104104                <div id="loading-status" class="updated message"> 
    105                         <p><span class="spinner" ></span> <?php _e( 'Calculating revision diffs' ); ?></p> 
     105                        <p><span class="spinner" ></span></p> 
    106106                </div> 
    107107 
    108108                <div class="diff-slider-ticks-wrapper"> 
     
    161161</script> 
    162162 
    163163<script id="tmpl-revision-ticks" type="text/html"> 
    164         <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}"></div> 
     164        <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}"> 
     165                <span class="ui-slider-tooltip ui-widget-content ui-corner-all hidden"></span> 
     166        </div> 
    165167</script> 
    166168<?php 
    167169require_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} 
  • wp-admin/css/wp-admin.css

     
    35843584 
    35853585#loading-status { 
    35863586        display: none; 
     3587        position: absolute; 
     3588        top: 8px; 
     3589        z-index: 1000; 
    35873590} 
    35883591 
    35893592#loading-status .spinner { 
     
    36183621        width: 95%; 
    36193622} 
    36203623 
    3621 #diff-slider .ui-slider-tooltip { 
     3624#diff-slider .ui-slider-tooltip, 
     3625#diff-slider-ticks .ui-slider-tooltip { 
    36223626        display: none; 
    36233627        position: absolute; 
    36243628        bottom: 20px; 
     
    37093713.revision-tick { 
    37103714        width: 1px; 
    37113715        float: left; 
    3712         margin: 1px 15px 0 0; 
     3716        margin: 1px 0 0 0; 
    37133717        height: .8em; 
    37143718        padding: 0; 
    37153719        margin-left: 0px; 
     3720        cursor: hand; cursor: pointer;  
    37163721} 
    37173722 
    3718 .revision-tick.scope-of-changes-vsmall { 
     3723.revision-tick.scope-of-changes-vsmall, 
     3724.revision-tick.scope-of-changes-none { 
    37193725        width: 1px; 
    37203726} 
    37213727 
    37223728.revision-tick.scope-of-changes-small { 
    37233729        width: 2px; 
    3724         margin-left: -1px; 
    37253730} 
    37263731 
    37273732.revision-tick.scope-of-changes-med { 
    37283733        width: 3px; 
    3729         margin-left: -2px; 
    37303734} 
    37313735 
    37323736.revision-tick.scope-of-changes-large { 
    37333737        width: 4px; 
    3734         margin-left: -3px; 
    37353738} 
    37363739 
    37373740.revision-tick.scope-of-changes-vlarge { 
    3738         margin-left: -3px; 
    37393741        width: 4px; 
    3740         left: 1; 
    37413742} 
    37423743 
    37433744.diff-loading {