wikimedia/mediawiki-extensions-RevisionSlider
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider synced 2024-11-14 11:14:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move helper button logic to own class

Browse source 
Change-Id: I8fdfeb3344974b3cee7ce07bcf2ceea9308fffe6
This commit is contained in:
WMDE-Fisch 2017-03-24 14:14:18 +01:00
parent 216b959c75
commit 7e277fbd9d
3 changed files with 49 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
extension.json
View file

@ -220,7 +220,8 @@
},
"ext.RevisionSlider.HelpDialog": {
"scripts": [
"modules/ext.RevisionSlider.HelpDialog.js"
"modules/ext.RevisionSlider.HelpDialog.js",
"modules/ext.RevisionSlider.HelpButtonView.js"
],
"dependencies": [
"oojs-ui",

46
modules/ext.RevisionSlider.HelpButtonView.js Normal file
View file

@ -0,0 +1,46 @@
( function ( mw, $ ) {
/**
* Module containing presentation logic for the helper button
*/
var HelpButtonView = {
/**
* Renders the help button and renders and adds the popup for it.
*
* @return {jQuery} the help button object
*/
render: function() {
var helpButton, helpPopup;
helpButton = new OO.ui.ButtonWidget( {
icon: 'help',
framed: false,
classes: [ 'mw-revslider-show-help' ]
} );
helpPopup = new OO.ui.PopupWidget( {
$content: $( '<p>' ).text( mw.msg( 'revisionslider-show-help-tooltip' ) ),
$floatableContainer: helpButton.$element,
padded: true,
width: 200,
classes: [ 'mw-revslider-tooltip', 'mw-revslider-help-tooltip' ]
} );
helpButton.$element
.click( function() {
mw.libs.revisionSlider.HelpDialog.show();
} )
.mouseover( function() {
helpPopup.toggle( true );
} )
.mouseout( function() {
helpPopup.toggle( false );
} );
$( 'body' ).append( helpPopup.$element );
return helpButton.$element;
}
};
mw.libs.revisionSlider = mw.libs.revisionSlider || {};
mw.libs.revisionSlider.HelpButtonView = HelpButtonView;
}( mediaWiki, jQuery ) );

36
modules/ext.RevisionSlider.SliderView.js
View file

@ -105,7 +105,7 @@
this.backwardArrowButton.$element,
this.renderRevisionsContainer( containerWidth, $revisions ),
this.forwardArrowButton.$element,
this.renderHelpButton().$element,
mw.libs.revisionSlider.HelpButtonView.render(),
$( '<div>' ).css( { clear: 'both' } ),
this.renderPointerContainer( containerWidth ),
this.pointerOlder.getLine().render(), this.pointerNewer.getLine().render()
@ -293,40 +293,6 @@
return $( '.mw-revslider-revisions-container' ).width() - this.revisionWidth;
},
/**
* Renders the help button and renders and adds the popup for it.
*
* @return {jQuery} the help button object
*/
renderHelpButton: function() {
var helpButton, helpPopup;
helpButton = new OO.ui.ButtonWidget( {
icon: 'help',
framed: false,
classes: [ 'mw-revslider-show-help' ]
} );
helpPopup = new OO.ui.PopupWidget( {
$content: $( '<p>' ).text( mw.msg( 'revisionslider-show-help-tooltip' ) ),
$floatableContainer: helpButton.$element,
padded: true,
width: 200,
classes: [ 'mw-revslider-tooltip', 'mw-revslider-help-tooltip' ]
} );
helpButton.$element
.click( function() {
mw.libs.revisionSlider.HelpDialog.show();
} )
.mouseover( { popup: helpPopup }, this.showPopup )
.mouseout( function() {
helpPopup.toggle( false );
} );
$( 'body' ).append( helpPopup.$element );
return helpButton.$element;
},
/**
* Renders the backwards arrow, adds the element to the class attribute
* and renders and adds the popup for it.