WordPress.org
Get WordPress

Make WordPress Core

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

File 23935-improved-tick-marks.7.diff, 13.0 KB (added by ocean90, 11 years ago)

  • 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();
    … …  
    191192                                        self.slider.refresh({
    192193                                                'max': self.revisions.length
    193194                                        });
    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
     195                                        // ensure right handle not beyond length
    196196                                        if ( self.rightDiff > self.revisions.length )
    197197                                                self.rightDiff = self.revisions.length;
    198198                                        },
    … …  
    401401                refresh: function( options, slide ) {
    402402                        $( '#diff-slider' ).slider( 'option', options );
    403403
    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 
    408404                        // Triggers the slide event
    409405                        if ( slide )
    410406                                $( '#diff-slider' ).trigger( 'slide' );
    … …  
    441437                model: Revision,
    442438
    443439                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 ) );
     440                        var sliderMax, sliderWidth, adjustMax, tickWidth, tickCount = 0, aTickWidth, tickMargin, self = this;
     441                        sliderMax   = Diff.slider.option( 'max' );
     442                        sliderWidth = Diff.slider.width();
     443                        adjustMax   = Diff.singleRevision ? 0 : 1;
     444                        tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
     445                        tickWidth   = (tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks
     446                        tickWidth   = (tickWidth < 10 ) ? 10 : tickWidth;
     447                        sliderWidth = tickWidth * (sliderMax - adjustMax ) + 2; //calculate the slider width
     448                        aTickWidth  = $( '.revision-tick' ).width();
    448449
    449                         // TODO: adjust right margins for wider ticks so they stay centered on handle stop point
     450                        if ( tickWidth !== aTickWidth ) { // is the width already set correctly?
     451                                $( '.revision-tick' ).each( function() {
     452                                        tickMargin = Math.floor( ( tickWidth - $( this ).width() ) / 2 ) + 1;
     453                                        $( this ).css( 'border-left', tickMargin + 'px solid #f7f7f7'); // space the ticks out using margins
     454                                        $( this ).css( 'border-right', ( tickWidth - tickMargin - $( this ).width() ) + 'px solid #f7f7f7'); // space the ticks out using margins
     455                                });
     456                                sliderWidth = sliderWidth + 1; // one extra pixel so it all fits
     457                                $( '.revision-tick' ).last().css( 'border-right', 'none' ); // last tick gets no right border
     458                                $( '.revision-tick' ).first().css( 'border-left', 'none' ); // first tick gets no left border
     459                        }
    450460
    451                         // set minimum and maximum widths for tick marks
    452                         tickWidth = (tickWidth > 50 ) ? 50 : tickWidth;
    453                         tickWidth = (tickWidth < 10 ) ? 10 : tickWidth;
    454 
    455                         sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1;
    456 
     461                        /**
     462                         * reset the slider width
     463                         */
    457464                        Diff.slider.setWidth( sliderWidth );
    458465                        $( '.diff-slider-ticks-wrapper' ).width( sliderWidth );
    459466                        $( '#diff-slider-ticks' ).width( sliderWidth );
    460467
    461                         var aTickWidth = $( '.revision-tick' ).width();
     468                        /**
     469                         * go through all ticks, add hover and click interactions
     470                         */
     471                        $( '.revision-tick' ).each( function() {
     472                                Diff.slider.addTooltip ( $( this ), Diff.revisions.at( tickCount++ ).get( 'titleTooltip' ) );
     473                                $( this ).hover(
     474                                        function() {
     475                                                $( this ).find( '.ui-slider-tooltip' ).show().append('<div class="arrow"></div>');
     476                                        },
     477                                        function() {
     478                                                $( this ).find( '.ui-slider-tooltip' ).hide().find( '.arrow' ).remove();
     479                                        }
     480                                );
    462481
    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 
     482                                /**
     483                                 * move the slider handle when the tick marks are clicked
     484                                 */
     485                                $( this ).on( 'click',
     486                                        { tickCount: tickCount }, // //pass the tick through so we know where to move the handle
     487                                        function( event ) {
     488                                                if ( Diff.slider.singleRevision ) { //single handle mode
     489                                                        Diff.rightDiff = event.data.tickCount; //reposition the right handle
     490                                                        Diff.slider.refresh({
     491                                                                value: Diff.rightDiff - 1
     492                                                        } );
     493                                                } else { //compare two mode
     494                                                        if ( event.data.tickCount < Diff.leftDiff ||
     495                                                                isRtl && event.data.tickCount > Diff.leftDiff ) { // click was on the 'left' side
     496                                                                        Diff.leftDiff = event.data.tickCount; // set the left handle location
     497                                                                        Diff.reloadRight(); //reload the right handle comparison models
     498                                                        } else { //middle or 'right' clicks
     499                                                                Diff.rightDiff = event.data.tickCount; // set the right handle location
     500                                                                Diff.reloadLeft(); //reload left handle models
     501                                                        }
     502                                                        Diff.slider.refresh( { // set the slider handle positions
     503                                                                values: [ Diff.leftDiff, Diff.rightDiff ]
     504                                                        } );
     505                                                }
     506                                                Diff.revisionView.render(); // render the main view
     507                                        } );
     508                        } );
    471509                },
    472510
    473                 // render the tickmark view
     511                // render the tick mark view
    474512                render: function() {
    475                         var self = this;
     513                        var self = this, addHtml;
    476514
    477515                        if ( null !== self.model ) {
    478                                 var addHtml = "";
     516                                addHtml = "";
    479517                                _.each ( self.model.models, function( theModel ) {
    480518                                        addHtml = addHtml + self.template ( theModel.toJSON() );
    481519                                });
    … …  
    485523                        self.resetTicks();
    486524                        return self;
    487525                }
    488         });
     526        } );
    489527
    490528        /**
    491529         * wp.revisions.view.Interact
    … …  
    504542                },
    505543
    506544                render: function() {
     545                        var modelcount;
    507546                        this.$el.html( this.template );
    508547
    509                         var modelcount = Diff.revisions.length;
     548                        modelcount = Diff.revisions.length;
    510549
    511550                        Diff.slider.singleRevision = Diff.singleRevision;
    512551                        Diff.slider.render();
    … …  
    580619
    581620                // render the revisions
    582621                render: function() {
    583                         var addHtml = '';
    584                         var thediff;
     622                        var addHtml = '', thediff;
    585623
    586624                        // compare two revisions mode?
    587625                        if ( ! Diff.singleRevision ) {
    … …  
    608646                                $( '.diff-slider-ticks-wrapper' ).hide();
    609647                        }
    610648
    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 
    622649                        this.toggleCompareTwoCheckbox();
    623650
    624651                        // hide the restore button when on the last sport/current post data

  • 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}

  • 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' );