Ticket #23935: 23935-improved-tick-marks.9.diff
File 23935-improved-tick-marks.9.diff, 14.3 KB (added by , 12 years ago) |
---|
-
wp-admin/js/revisions.js
40 40 slider: null, // the slider instance 41 41 42 42 constructor: function() { 43 var self = this; 43 44 this.slider = new revisions.view.Slider(); 45 44 46 if ( null === this.revisions ) { 45 47 this.revisions = new Revisions(); // set up collection 46 48 this.startRightModelLoading(); 47 49 48 var self = this;49 50 this.revisions.fetch({ // load revision data 50 51 success: function() { 51 52 self.stopRightModelLoading(); … … 58 59 loadDiffs: function( models ) { 59 60 var self = this, 60 61 revisionsToLoad = models.where( { completed: false } ), 61 delay = 0; 62 delay = 0, 63 totalChanges; 62 64 63 65 // match slider to passed revision_id 64 66 _.each( revisionsToLoad, function( revision ) { … … 79 81 if ( 0 === models.where( { completed: false } ).length ) 80 82 self.stopModelLoadingSpinner(); 81 83 82 self.tickmarkView.render(); 83 84 var totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), 84 totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), 85 85 scopeOfChanges = 'vsmall'; 86 86 87 87 // Note: hard coded scope of changes … … 101 101 // reload if current model refreshed 102 102 self.revisionView.render(); 103 103 } 104 104 self.tickmarkView.render(); 105 105 } 106 106 } ); 107 107 }, delay ) ; … … 191 191 self.slider.refresh({ 192 192 'max': self.revisions.length 193 193 }); 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 196 195 if ( self.rightDiff > self.revisions.length ) 197 196 self.rightDiff = self.revisions.length; 198 197 }, … … 274 273 model: this.revisions 275 274 }); 276 275 this.tickmarkView.render(); 277 this.tickmarkView.resetTicks();278 276 } 279 277 }); 280 278 … … 401 399 refresh: function( options, slide ) { 402 400 $( '#diff-slider' ).slider( 'option', options ); 403 401 404 // reset all of the slider tooltips during a refresh, but not on prev/next button actions405 if ( ! slide )406 $( 'a.ui-slider-handle' ).html( '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"></span>' );407 408 402 // Triggers the slide event 409 403 if ( slide ) 410 404 $( '#diff-slider' ).trigger( 'slide' ); … … 441 435 model: Revision, 442 436 443 437 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(); 448 447 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(); 450 456 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.ceil( ( tickWidth - ( lastTick.outerWidth() - lastTick.innerWidth() ) ) / 2 ); // room for the last tick 458 sliderWidth = sliderWidth + Math.ceil( ( 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 } 454 462 455 sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1; 456 463 /** 464 * reset the slider width 465 */ 457 466 Diff.slider.setWidth( sliderWidth ); 458 467 $( '.diff-slider-ticks-wrapper' ).width( sliderWidth ); 459 468 $( '#diff-slider-ticks' ).width( sliderWidth ); 460 469 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 ); 462 483 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 } ); 471 511 }, 472 512 473 // render the tick mark view513 // render the tick mark view 474 514 render: function() { 475 var self = this ;515 var self = this, addHtml; 476 516 477 517 if ( null !== self.model ) { 478 varaddHtml = "";518 addHtml = ""; 479 519 _.each ( self.model.models, function( theModel ) { 480 520 addHtml = addHtml + self.template ( theModel.toJSON() ); 481 521 }); … … 485 525 self.resetTicks(); 486 526 return self; 487 527 } 488 } );528 } ); 489 529 490 530 /** 491 531 * wp.revisions.view.Interact … … 504 544 }, 505 545 506 546 render: function() { 547 var modelcount; 507 548 this.$el.html( this.template ); 508 549 509 varmodelcount = Diff.revisions.length;550 modelcount = Diff.revisions.length; 510 551 511 552 Diff.slider.singleRevision = Diff.singleRevision; 512 553 Diff.slider.render(); … … 580 621 581 622 // render the revisions 582 623 render: function() { 583 var addHtml = ''; 584 var thediff; 624 var addHtml = '', thediff; 585 625 586 626 // compare two revisions mode? 587 627 if ( ! Diff.singleRevision ) { … … 608 648 $( '.diff-slider-ticks-wrapper' ).hide(); 609 649 } 610 650 611 // add tooltips to the handles612 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 622 651 this.toggleCompareTwoCheckbox(); 623 652 624 653 // hide the restore button when on the last sport/current post data -
wp-admin/revision.php
97 97 <h2 class="long-header"><?php echo $h2; ?></h2> 98 98 99 99 <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> 101 101 </div> 102 102 103 103 <div class="diff-slider-ticks-wrapper"> … … 152 152 </script> 153 153 154 154 <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> 156 158 </script> 157 159 <?php 158 160 require_once( './admin-footer.php' ); -
wp-admin/css/colors-fresh.css
1376 1376 border: 1px solid #dfdfdf; 1377 1377 } 1378 1378 1379 #diff-slider .ui-slider-tooltip { 1379 #diff-slider .ui-slider-tooltip, 1380 #diff-slider-ticks .ui-slider-tooltip { 1380 1381 border-color: #d7d7d7; 1381 1382 background-color: #fff; 1382 1383 } … … 1400 1401 background-image: none; 1401 1402 } 1402 1403 1403 .revision-tick.scope-of-changes- vsmall{1404 .revision-tick.scope-of-changes-none { 1404 1405 background-color: #d7d7d7; 1405 1406 } 1406 1407 1407 .revision-tick.scope-of-changes- small {1408 .revision-tick.scope-of-changes-vsmall { 1408 1409 background-color: #c3c3c3; 1409 1410 } 1410 1411 1411 .revision-tick.scope-of-changes- med{1412 .revision-tick.scope-of-changes-small { 1412 1413 background-color: #b0b0b0; 1413 1414 } 1414 1415 1415 .revision-tick.scope-of-changes- large{1416 .revision-tick.scope-of-changes-med { 1416 1417 background-color: #9c9c9c; 1417 1418 } 1418 1419 1419 .revision-tick.scope-of-changes- vlarge {1420 .revision-tick.scope-of-changes-large { 1420 1421 background-color: #898989; 1421 1422 } 1422 1423 1424 .revision-tick.scope-of-changes-vlarge { 1425 background-color: #696969; 1426 } 1427 1423 1428 .diff-label { 1424 1429 color: #666; 1425 1430 } 1426 1431 1427 body .ui-tooltip {1428 border-color: #d7d7d7;1429 background-color: #fff;1430 }1431 1432 1432 /* jQuery UI Slider */ 1433 1433 .wp-slider.ui-slider { 1434 1434 border-color: #d7d7d7; -
wp-admin/css/wp-admin.css
3585 3585 3586 3586 #loading-status { 3587 3587 display: none; 3588 position: absolute; 3589 top: 8px; 3590 z-index: 1000; 3588 3591 } 3589 3592 3590 3593 #loading-status .spinner { … … 3619 3622 width: 95%; 3620 3623 } 3621 3624 3622 #diff-slider .ui-slider-tooltip { 3625 #diff-slider .ui-slider-tooltip, 3626 #diff-slider-ticks .ui-slider-tooltip { 3623 3627 display: none; 3624 3628 position: absolute; 3625 bottom: 2 0px;3626 margin-left: - 4em;3629 bottom: 21px; 3630 margin-left: -74px; 3627 3631 } 3628 3632 3629 3633 #diff-slider .ui-state-active .ui-slider-tooltip, … … 3640 3644 display: inline; 3641 3645 } 3642 3646 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 3654 3647 .diff-label { 3655 3648 margin: 20px 0 5px; 3656 3649 padding-left: 3px; … … 3705 3698 display: block; 3706 3699 } 3707 3700 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 3708 3712 .revision-tick { 3709 3713 width: 1px; 3710 3714 float: left; 3711 margin: 1px 15px0 0;3715 margin: 1px 0 0 0; 3712 3716 height: .8em; 3713 3717 padding: 0; 3714 3718 margin-left: 0px; 3719 cursor: pointer; 3715 3720 } 3716 3721 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 { 3718 3733 width: 1px; 3719 3734 } 3720 3735 3721 .revision-tick.scope-of-changes- small {3736 .revision-tick.scope-of-changes-vsmall { 3722 3737 width: 2px; 3723 margin-left: -1px;3724 3738 } 3725 3739 3726 .revision-tick.scope-of-changes- med{3740 .revision-tick.scope-of-changes-small { 3727 3741 width: 3px; 3728 margin-left: -2px;3729 3742 } 3730 3743 3731 .revision-tick.scope-of-changes- large{3744 .revision-tick.scope-of-changes-med { 3732 3745 width: 4px; 3733 margin-left: -3px;3734 3746 } 3735 3747 3748 .revision-tick.scope-of-changes-large { 3749 width: 5px; 3750 } 3751 3736 3752 .revision-tick.scope-of-changes-vlarge { 3737 margin-left: -3px; 3738 width: 4px; 3739 left: 1; 3753 width: 6px; 3740 3754 } 3741 3755 3742 3756 .diff-loading { … … 3757 3771 .ui-slider-tooltip img { 3758 3772 float: left; 3759 3773 margin-right: 5px; 3774 margin-top: 5px; 3760 3775 } 3761 3776 3762 3777 … … 3852 3867 font-size: .7em; 3853 3868 display: block; 3854 3869 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; 3862 3872 } 3863 3873 3864 3874 .wp-slider.ui-slider-horizontal { -
wp-admin/css/colors-classic.css
1482 1482 border: 1px solid #d1e5ee; 1483 1483 } 1484 1484 1485 #diff-slider .ui-slider-tooltip { 1485 #diff-slider .ui-slider-tooltip, 1486 #diff-slider-ticks .ui-slider-tooltip { 1486 1487 border-color: #d1e5ee; 1487 1488 background-color: #fff; 1488 1489 } … … 1502 1503 background-image: none; 1503 1504 } 1504 1505 1506 .revision-tick.scope-of-changes-none { 1507 background-color: #d7d7d7; 1508 } 1509 1505 1510 .revision-tick.scope-of-changes-vsmall { 1506 1511 background-color: #d1e5ee; 1507 1512 }