mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider
synced 2024-11-28 01:00:08 +00:00
Move arrow button logic to own class
Change-Id: I56e52d8b11f8557d759dc495512d9754e8f441f6
This commit is contained in:
WMDE-Fisch
parent
7e277fbd9d
commit
97c85abdf2
|
|
@ -131,7 +131,8 @@
|
|||
},
|
||||
"ext.RevisionSlider.SliderView": {
|
||||
"scripts": [
|
||||
"modules/ext.RevisionSlider.SliderView.js"
|
||||
"modules/ext.RevisionSlider.SliderView.js",
|
||||
"modules/ext.RevisionSlider.SliderArrowView.js"
|
||||
],
|
||||
"dependencies": [
|
||||
"jquery.ui.draggable",
|
||||
|
|
|
|||
149
modules/ext.RevisionSlider.SliderArrowView.js
Normal file
149
modules/ext.RevisionSlider.SliderArrowView.js
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
( function ( mw, $ ) {
|
||||
/**
|
||||
* Module containing presentation logic for the arrow buttons
|
||||
*
|
||||
* @param {SliderView} sliderView
|
||||
* @constructor
|
||||
*/
|
||||
var SliderArrowView = function ( sliderView ) {
|
||||
this.sliderView = sliderView;
|
||||
};
|
||||
|
||||
$.extend( SliderArrowView.prototype, {
|
||||
/**
|
||||
* @type {SliderView}
|
||||
*/
|
||||
sliderView: null,
|
||||
|
||||
/**
|
||||
* Renders the backwards arrow button, returns it
|
||||
* and renders and adds the popup for it.
|
||||
*
|
||||
* @return {OO.ui.ButtonWidget}
|
||||
*/
|
||||
renderBackwardArrow: function() {
|
||||
var backwardArrowButton,
|
||||
backwardArrowPopup;
|
||||
|
||||
backwardArrowButton = new OO.ui.ButtonWidget( {
|
||||
icon: 'previous',
|
||||
width: 20,
|
||||
height: 140,
|
||||
framed: true,
|
||||
classes: [ 'mw-revslider-arrow', 'mw-revslider-arrow-backwards' ]
|
||||
} );
|
||||
|
||||
backwardArrowPopup = new OO.ui.PopupWidget( {
|
||||
$content: $( '<p>' ).text( mw.msg( 'revisionslider-arrow-tooltip-older' ) ),
|
||||
$floatableContainer: backwardArrowButton.$element,
|
||||
padded: true,
|
||||
width: 200,
|
||||
classes: [ 'mw-revslider-tooltip', 'mw-revslider-arrow-tooltip' ]
|
||||
} );
|
||||
|
||||
backwardArrowButton.connect( this, {
|
||||
click: [ 'arrowClickHandler', backwardArrowButton ]
|
||||
} );
|
||||
|
||||
backwardArrowButton.$element
|
||||
.attr( 'data-dir', -1 )
|
||||
.mouseover( { button: backwardArrowButton, popup: backwardArrowPopup }, this.showPopup )
|
||||
.mouseout( { popup: backwardArrowPopup }, this.hidePopup )
|
||||
.focusin( { button: backwardArrowButton }, this.arrowFocusHandler );
|
||||
|
||||
$( 'body' ).append( backwardArrowPopup.$element );
|
||||
|
||||
return backwardArrowButton;
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders the forwards arrow button, returns it
|
||||
* and renders and adds the popup for it.
|
||||
*
|
||||
* @return {OO.ui.ButtonWidget}
|
||||
*/
|
||||
renderForwardArrow: function() {
|
||||
var forwardArrowButton,
|
||||
forwardArrowPopup;
|
||||
|
||||
forwardArrowButton = new OO.ui.ButtonWidget( {
|
||||
icon: 'next',
|
||||
width: 20,
|
||||
height: 140,
|
||||
framed: true,
|
||||
classes: [ 'mw-revslider-arrow', 'mw-revslider-arrow-forwards' ]
|
||||
} );
|
||||
|
||||
forwardArrowPopup = new OO.ui.PopupWidget( {
|
||||
$content: $( '<p>' ).text( mw.msg( 'revisionslider-arrow-tooltip-newer' ) ),
|
||||
$floatableContainer: forwardArrowButton.$element,
|
||||
padded: true,
|
||||
width: 200,
|
||||
classes: [ 'mw-revslider-tooltip', 'mw-revslider-arrow-tooltip' ]
|
||||
} );
|
||||
|
||||
forwardArrowButton.connect( this, {
|
||||
click: [ 'arrowClickHandler', forwardArrowButton ]
|
||||
} );
|
||||
|
||||
forwardArrowButton.$element
|
||||
.attr( 'data-dir', 1 )
|
||||
.mouseover( { button: forwardArrowButton, popup: forwardArrowPopup }, this.showPopup )
|
||||
.mouseout( { popup: forwardArrowPopup }, this.hidePopup )
|
||||
.focusin( { button: forwardArrowButton }, this.arrowFocusHandler );
|
||||
|
||||
$( 'body' ).append( forwardArrowPopup.$element );
|
||||
|
||||
return forwardArrowButton;
|
||||
},
|
||||
|
||||
showPopup: function ( e ) {
|
||||
var button = e.data.button,
|
||||
popup = e.data.popup;
|
||||
if ( typeof button !== 'undefined' && button.isDisabled() ) {
|
||||
return;
|
||||
}
|
||||
popup.$element.css( {
|
||||
left: $( this ).offset().left + $( this ).outerWidth() / 2 + 'px',
|
||||
top: $( this ).offset().top + $( this ).outerHeight() + 'px'
|
||||
} );
|
||||
popup.toggle( true );
|
||||
},
|
||||
|
||||
hidePopup: function ( e ) {
|
||||
var popup = e.data.popup;
|
||||
popup.toggle( false );
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OO.ui.ButtonWidget} button
|
||||
*/
|
||||
arrowClickHandler: function ( button ) {
|
||||
if ( button.isDisabled() ) {
|
||||
return;
|
||||
}
|
||||
mw.track( 'counter.MediaWiki.RevisionSlider.event.arrowClick' );
|
||||
this.sliderView.slide( button.$element.data( 'dir' ) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Disabled oo.ui.ButtonWidgets get focused when clicked. In particular cases
|
||||
* (arrow gets clicked when disabled, none other elements gets focus meanwhile, the other arrow is clicked)
|
||||
* previously disabled arrow button still has focus and has OOjs-ui focused button styles
|
||||
* applied (blue border) which is not what is wanted. And generally setting a focus on disabled
|
||||
* buttons does not seem right in case of RevisionSlider's arrow buttons.
|
||||
* This method removes focus from the disabled button if such case happens.
|
||||
*
|
||||
* @param {jQuery.Event} e
|
||||
*/
|
||||
arrowFocusHandler: function ( e ) {
|
||||
var button = e.data.button;
|
||||
if ( button.isDisabled() ) {
|
||||
button.$element.find( 'a.oo-ui-buttonElement-button' ).blur();
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
mw.libs.revisionSlider = mw.libs.revisionSlider || {};
|
||||
mw.libs.revisionSlider.SliderArrowView = SliderArrowView;
|
||||
}( mediaWiki, jQuery ) );
|
||||
|
|
@ -81,6 +81,7 @@
|
|||
render: function ( $container ) {
|
||||
var containerWidth = this.calculateSliderContainerWidth(),
|
||||
$revisions = this.slider.getRevisions().getView().render( this.revisionWidth ),
|
||||
sliderArrowView = new mw.libs.revisionSlider.SliderArrowView( this ),
|
||||
self = this;
|
||||
|
||||
this.dir = $container.css( 'direction' ) || 'ltr';
|
||||
|
|
@ -92,8 +93,8 @@
|
|||
this.pointerOlder = this.pointerOlder || new mw.libs.revisionSlider.Pointer( 'mw-revslider-pointer-older' );
|
||||
this.pointerNewer = this.pointerNewer || new mw.libs.revisionSlider.Pointer( 'mw-revslider-pointer-newer' );
|
||||
|
||||
this.renderBackwardArrow();
|
||||
this.renderForwardArrow();
|
||||
this.backwardArrowButton = sliderArrowView.renderBackwardArrow();
|
||||
this.forwardArrowButton = sliderArrowView.renderForwardArrow();
|
||||
|
||||
this.$element = $( '<div>' )
|
||||
.addClass( 'mw-revslider-revision-slider' )
|
||||
|
|
@ -293,124 +294,6 @@
|
|||
return $( '.mw-revslider-revisions-container' ).width() - this.revisionWidth;
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders the backwards arrow, adds the element to the class attribute
|
||||
* and renders and adds the popup for it.
|
||||
*/
|
||||
renderBackwardArrow: function() {
|
||||
var backwardArrowPopup;
|
||||
|
||||
this.backwardArrowButton = new OO.ui.ButtonWidget( {
|
||||
icon: 'previous',
|
||||
width: 20,
|
||||
height: 140,
|
||||
framed: true,
|
||||
classes: [ 'mw-revslider-arrow', 'mw-revslider-arrow-backwards' ]
|
||||
} );
|
||||
|
||||
backwardArrowPopup = new OO.ui.PopupWidget( {
|
||||
$content: $( '<p>' ).text( mw.msg( 'revisionslider-arrow-tooltip-older' ) ),
|
||||
$floatableContainer: this.backwardArrowButton.$element,
|
||||
padded: true,
|
||||
width: 200,
|
||||
classes: [ 'mw-revslider-tooltip', 'mw-revslider-arrow-tooltip' ]
|
||||
} );
|
||||
|
||||
this.backwardArrowButton.connect( this, {
|
||||
click: [ 'arrowClickHandler', this.backwardArrowButton ]
|
||||
} );
|
||||
|
||||
this.backwardArrowButton.$element
|
||||
.attr( 'data-dir', -1 )
|
||||
.mouseover( { button: this.backwardArrowButton, popup: backwardArrowPopup }, this.showPopup )
|
||||
.mouseout( { popup: backwardArrowPopup }, this.hidePopup )
|
||||
.focusin( { button: this.backwardArrowButton }, this.arrowFocusHandler );
|
||||
|
||||
$( 'body' ).append( backwardArrowPopup.$element );
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders the forwards arrow, adds the element to the class attribute
|
||||
* and renders and adds the popup for it.
|
||||
*/
|
||||
renderForwardArrow: function() {
|
||||
var forwardArrowPopup;
|
||||
|
||||
this.forwardArrowButton = new OO.ui.ButtonWidget( {
|
||||
icon: 'next',
|
||||
width: 20,
|
||||
height: 140,
|
||||
framed: true,
|
||||
classes: [ 'mw-revslider-arrow', 'mw-revslider-arrow-forwards' ]
|
||||
} );
|
||||
|
||||
forwardArrowPopup = new OO.ui.PopupWidget( {
|
||||
$content: $( '<p>' ).text( mw.msg( 'revisionslider-arrow-tooltip-newer' ) ),
|
||||
$floatableContainer: this.forwardArrowButton.$element,
|
||||
padded: true,
|
||||
width: 200,
|
||||
classes: [ 'mw-revslider-tooltip', 'mw-revslider-arrow-tooltip' ]
|
||||
} );
|
||||
|
||||
this.forwardArrowButton.connect( this, {
|
||||
click: [ 'arrowClickHandler', this.forwardArrowButton ]
|
||||
} );
|
||||
|
||||
this.forwardArrowButton.$element
|
||||
.attr( 'data-dir', 1 )
|
||||
.mouseover( { button: this.forwardArrowButton, popup: forwardArrowPopup }, this.showPopup )
|
||||
.mouseout( { popup: forwardArrowPopup }, this.hidePopup )
|
||||
.focusin( { button: this.forwardArrowButton }, this.arrowFocusHandler );
|
||||
|
||||
$( 'body' ).append( forwardArrowPopup.$element );
|
||||
},
|
||||
|
||||
showPopup: function ( e ) {
|
||||
var button = e.data.button,
|
||||
popup = e.data.popup;
|
||||
if ( typeof button !== 'undefined' && button.isDisabled() ) {
|
||||
return;
|
||||
}
|
||||
popup.$element.css( {
|
||||
left: $( this ).offset().left + $( this ).outerWidth() / 2 + 'px',
|
||||
top: $( this ).offset().top + $( this ).outerHeight() + 'px'
|
||||
} );
|
||||
popup.toggle( true );
|
||||
},
|
||||
|
||||
hidePopup: function ( e ) {
|
||||
var popup = e.data.popup;
|
||||
popup.toggle( false );
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OO.ui.ButtonWidget} button
|
||||
*/
|
||||
arrowClickHandler: function ( button ) {
|
||||
if ( button.isDisabled() ) {
|
||||
return;
|
||||
}
|
||||
mw.track( 'counter.MediaWiki.RevisionSlider.event.arrowClick' );
|
||||
this.slide( button.$element.data( 'dir' ) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Disabled oo.ui.ButtonWidgets get focused when clicked. In particular cases
|
||||
* (arrow gets clicked when disabled, none other elements gets focus meanwhile, the other arrow is clicked)
|
||||
* previously disabled arrow button still has focus and has OOjs-ui focused button styles
|
||||
* applied (blue border) which is not what is wanted. And generally setting a focus on disabled
|
||||
* buttons does not seem right in case of RevisionSlider's arrow buttons.
|
||||
* This method removes focus from the disabled button if such case happens.
|
||||
*
|
||||
* @param {jQuery.Event} e
|
||||
*/
|
||||
arrowFocusHandler: function ( e ) {
|
||||
var button = e.data.button;
|
||||
if ( button.isDisabled() ) {
|
||||
button.$element.find( 'a.oo-ui-buttonElement-button' ).blur();
|
||||
}
|
||||
},
|
||||
|
||||
revisionWrapperClickHandler: function ( e ) {
|
||||
var pClicked, pOther,
|
||||
$revWrap = $( this ),
|
||||
|
|
|
|||
Loading…
Reference in a new issue