equal
deleted
inserted
replaced
593 className: 'revisions-controls', |
593 className: 'revisions-controls', |
594 |
594 |
595 initialize: function() { |
595 initialize: function() { |
596 _.bindAll( this, 'setWidth' ); |
596 _.bindAll( this, 'setWidth' ); |
597 |
597 |
|
598 // Add the checkbox view. |
|
599 this.views.add( new revisions.view.Checkbox({ |
|
600 model: this.model |
|
601 }) ); |
|
602 |
598 // Add the button view. |
603 // Add the button view. |
599 this.views.add( new revisions.view.Buttons({ |
604 this.views.add( new revisions.view.Buttons({ |
600 model: this.model |
|
601 }) ); |
|
602 |
|
603 // Add the checkbox view. |
|
604 this.views.add( new revisions.view.Checkbox({ |
|
605 model: this.model |
605 model: this.model |
606 }) ); |
606 }) ); |
607 |
607 |
608 // Prep the slider model. |
608 // Prep the slider model. |
609 var slider = new revisions.model.Slider({ |
609 var slider = new revisions.model.Slider({ |
625 |
625 |
626 // Add the tickmarks view. |
626 // Add the tickmarks view. |
627 this.views.add( new revisions.view.Tickmarks({ |
627 this.views.add( new revisions.view.Tickmarks({ |
628 model: tooltip |
628 model: tooltip |
629 }) ); |
629 }) ); |
|
630 |
|
631 // Add the visually hidden slider help view. |
|
632 this.views.add( new revisions.view.SliderHelp() ); |
630 |
633 |
631 // Add the slider view. |
634 // Add the slider view. |
632 this.views.add( new revisions.view.Slider({ |
635 this.views.add( new revisions.view.Slider({ |
633 model: slider |
636 model: slider |
634 }) ); |
637 }) ); |
802 // Activate compare two mode? |
805 // Activate compare two mode? |
803 this.model.set({ compareTwoMode: $('.compare-two-revisions').prop('checked') }); |
806 this.model.set({ compareTwoMode: $('.compare-two-revisions').prop('checked') }); |
804 } |
807 } |
805 }); |
808 }); |
806 |
809 |
|
810 // The slider visually hidden help view. |
|
811 revisions.view.SliderHelp = wp.Backbone.View.extend({ |
|
812 className: 'revisions-slider-hidden-help', |
|
813 template: wp.template( 'revisions-slider-hidden-help' ) |
|
814 }); |
|
815 |
807 // The tooltip view. |
816 // The tooltip view. |
808 // Encapsulates the tooltip. |
817 // Encapsulates the tooltip. |
809 revisions.view.Tooltip = wp.Backbone.View.extend({ |
818 revisions.view.Tooltip = wp.Backbone.View.extend({ |
810 className: 'revisions-tooltip', |
819 className: 'revisions-tooltip', |
811 template: wp.template('revisions-meta'), |
820 template: wp.template('revisions-meta'), |
955 }); |
964 }); |
956 |
965 |
957 this.applySliderSettings(); |
966 this.applySliderSettings(); |
958 }, |
967 }, |
959 |
968 |
|
969 accessibilityHelper: function() { |
|
970 var handles = $( '.ui-slider-handle' ); |
|
971 handles.first().attr( { |
|
972 role: 'button', |
|
973 'aria-labelledby': 'diff-title-from diff-title-author', |
|
974 'aria-describedby': 'revisions-slider-hidden-help', |
|
975 } ); |
|
976 handles.last().attr( { |
|
977 role: 'button', |
|
978 'aria-labelledby': 'diff-title-to diff-title-author', |
|
979 'aria-describedby': 'revisions-slider-hidden-help', |
|
980 } ); |
|
981 }, |
|
982 |
960 mouseMove: function( e ) { |
983 mouseMove: function( e ) { |
961 var zoneCount = this.model.revisions.length - 1, // One fewer zone than models. |
984 var zoneCount = this.model.revisions.length - 1, // One fewer zone than models. |
962 sliderFrom = this.$el.allOffsets()[this.direction], // "From" edge of slider. |
985 sliderFrom = this.$el.allOffsets()[this.direction], // "From" edge of slider. |
963 sliderWidth = this.$el.width(), // Width of slider. |
986 sliderWidth = this.$el.width(), // Width of slider. |
964 tickWidth = sliderWidth / zoneCount, // Calculated width of zone. |
987 tickWidth = sliderWidth / zoneCount, // Calculated width of zone. |
994 .toggleClass( 'to-handle', !! isRtl ) |
1017 .toggleClass( 'to-handle', !! isRtl ) |
995 .toggleClass( 'from-handle', ! isRtl ); |
1018 .toggleClass( 'from-handle', ! isRtl ); |
996 handles.last() |
1019 handles.last() |
997 .toggleClass( 'from-handle', !! isRtl ) |
1020 .toggleClass( 'from-handle', !! isRtl ) |
998 .toggleClass( 'to-handle', ! isRtl ); |
1021 .toggleClass( 'to-handle', ! isRtl ); |
|
1022 this.accessibilityHelper(); |
999 } else { |
1023 } else { |
1000 handles.removeClass('from-handle to-handle'); |
1024 handles.removeClass('from-handle to-handle'); |
1001 } |
1025 this.accessibilityHelper(); |
|
1026 } |
|
1027 |
1002 }, |
1028 }, |
1003 |
1029 |
1004 start: function( event, ui ) { |
1030 start: function( event, ui ) { |
1005 this.model.set({ scrubbing: true }); |
1031 this.model.set({ scrubbing: true }); |
1006 |
1032 |