WMDE-leszek has uploaded a new change for review.
https://gerrit.wikimedia.org/r/303166
Change subject: Make backward/forward arrows OO.ui.ButtonWidgets
......................................................................
Make backward/forward arrows OO.ui.ButtonWidgets
Bug: T142206
Change-Id: I25c98e32c74235a2b70ac1d02c221f1898ba9958
---
M extension.json
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.css
D resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg
D resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg
D resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg
D resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg
D resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg
D resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg
M tests/browser/features/support/pages/diff_page.rb
M tests/browser/features/support/step_definitions/timeline.rb
11 files changed, 88 insertions(+), 134 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider
refs/changes/66/303166/1
diff --git a/extension.json b/extension.json
index 18240a1..bc07861 100644
--- a/extension.json
+++ b/extension.json
@@ -37,8 +37,6 @@
"ext.RevisionSlider.RevisionList",
"ext.RevisionSlider.HelpDialog",
"ext.RevisionSlider.Api",
- "ext.RevisionSlider.arrows.left",
- "ext.RevisionSlider.arrows.right",
"ext.RevisionSlider.pointers.lower",
"ext.RevisionSlider.pointers.upper",
"mediawiki.api.options"
@@ -135,26 +133,6 @@
"dependencies": [
"oojs-ui"
]
- },
- "ext.RevisionSlider.arrows.left": {
- "position": "top",
- "class": "ResourceLoaderImageModule",
- "selector":
".mw-revslider-arrow-left.mw-revslider-arrow-{name}",
- "images": {
- "enabled":
"resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg",
- "hovered":
"resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg",
- "disabled":
"resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg"
- }
- },
- "ext.RevisionSlider.arrows.right": {
- "position": "top",
- "class": "ResourceLoaderImageModule",
- "selector":
".mw-revslider-arrow-right.mw-revslider-arrow-{name}",
- "images": {
- "enabled":
"resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg",
- "hovered":
"resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg",
- "disabled":
"resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg"
- }
},
"ext.RevisionSlider.pointers.lower": {
"position": "top",
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index da7fb26..96bc09c 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -41,6 +41,16 @@
pointerNewer: null,
/**
+ * @type {OO.ui.ButtonWidget}
+ */
+ backwardArrowButton: null,
+
+ /**
+ * @type {OO.ui.ButtonWidget}
+ */
+ forwardArrowButton: null,
+
+ /**
* @type {string}
*
* Value of scrollLeft property when in RTL mode varies between
browser. This identifies
@@ -63,7 +73,7 @@
render: function ( $container ) {
var containerWidth =
this.calculateSliderContainerWidth(),
- pointerContainerPosition = 55,
+ pointerContainerPosition = 53,
pointerContainerWidth = containerWidth +
this.revisionWidth - 1,
pointerContainerStyle,
$revisions =
this.slider.getRevisions().getView().render( this.revisionWidth ),
@@ -116,6 +126,36 @@
} );
$( 'body' ).append( backwardArrowPopup.$element,
forwardArrowPopup.$element, helpPopup.$element );
+ this.backwardArrowButton = new OO.ui.ButtonWidget( {
+ icon: 'previous',
+ width: 20,
+ height: 140,
+ framed: true,
+ classes: [ 'mw-revslider-arrow',
'mw-revslider-arrow-backwards' ]
+ } );
+ 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 );
+
+ this.forwardArrowButton = new OO.ui.ButtonWidget( {
+ icon: 'next',
+ width: 20,
+ height: 140,
+ framed: true,
+ classes: [ 'mw-revslider-arrow',
'mw-revslider-arrow-forwards' ]
+ } );
+ 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 );
+
pointerContainerStyle = { left:
pointerContainerPosition + 'px', width: pointerContainerWidth + 'px' };
if ( $slider.css( 'direction' ) === 'rtl' ) {
// Due to properly limit dragging a pointer on
the right side of the screen,
@@ -129,22 +169,14 @@
width: ( containerWidth +
this.containerMargin ) + 'px'
} )
.append(
- $( '<a> ' )
- .addClass( 'mw-revslider-arrow
mw-revslider-arrow-backwards' )
- .attr( 'data-dir', '-1' )
- .mouseover( { popup:
backwardArrowPopup }, this.showPopup )
- .mouseout( { popup:
backwardArrowPopup }, this.hidePopup ),
+ this.backwardArrowButton.$element,
$( '<div>' )
.addClass(
'mw-revslider-revisions-container' )
.css( {
width: containerWidth +
'px'
} )
.append( $revisions ),
- $( '<a> ' )
- .addClass( 'mw-revslider-arrow
mw-revslider-arrow-forwards' )
- .attr( 'data-dir', '1' )
- .mouseover( { popup:
forwardArrowPopup }, this.showPopup )
- .mouseout( { popup:
forwardArrowPopup }, this.hidePopup ),
+ this.forwardArrowButton.$element,
helpButton.$element,
$( '<div>' ).css( { clear: 'both' } ),
$( '<div>' )
@@ -152,51 +184,6 @@
.css( pointerContainerStyle )
.append(
this.pointerOlder.getView().render(), this.pointerNewer.getView().render() )
);
-
- if ( $slider.css( 'direction' ) === 'ltr' ) {
- $slider.find( '.mw-revslider-arrow-backwards'
).addClass( 'mw-revslider-arrow-left' );
- $slider.find( '.mw-revslider-arrow-forwards'
).addClass( 'mw-revslider-arrow-right' );
- } else {
- $slider.find( '.mw-revslider-arrow-backwards'
).addClass( 'mw-revslider-arrow-right' );
- $slider.find( '.mw-revslider-arrow-forwards'
).addClass( 'mw-revslider-arrow-left' );
- }
-
- $slider.find( '.mw-revslider-arrow' ).click( function
() {
- var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) ) {
- return;
- }
- mw.track(
'counter.MediaWiki.RevisionSlider.event.arrowClick' );
- self.slide( $arrow.data( 'dir' ) );
- } )
- .mouseenter( function () {
- var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) ) {
- return;
- }
- $arrow.removeClass(
'mw-revslider-arrow-enabled' ).addClass( 'mw-revslider-arrow-hovered' );
- } )
- .mouseleave( function () {
- var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) ) {
- return;
- }
- $arrow.removeClass(
'mw-revslider-arrow-hovered' ).addClass( 'mw-revslider-arrow-enabled' );
- } )
- .mousedown( function ( event ) {
- var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) || event.which !== 1 ) {
- return;
- }
- $arrow.addClass(
'mw-revslider-arrow-active' );
- } )
- .mouseup( function ( event ) {
- var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) || event.which !== 1 ) {
- return;
- }
- $arrow.removeClass(
'mw-revslider-arrow-active' );
- } );
$slider.find( '.mw-revslider-pointer' ).draggable( {
axis: 'x',
@@ -257,8 +244,9 @@
},
showPopup: function ( e ) {
- var popup = e.data.popup;
- if ( $( this ).hasClass( 'mw-revslider-arrow-disabled'
) ) {
+ var button = e.data.button,
+ popup = e.data.popup;
+ if ( typeof button !== 'undefined' &&
button.isDisabled() ) {
return;
}
popup.$element.css( {
@@ -271,6 +259,17 @@
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' ) );
},
revisionWrapperClickHandler: function ( e ) {
@@ -449,14 +448,14 @@
this.pointerNewer.getView().getElement().draggable(
'disable' );
if ( this.slider.isAtStart() ) {
- $( '.mw-revslider-arrow-backwards'
).removeClass( 'mw-revslider-arrow-enabled mw-revslider-arrow-hovered'
).addClass( 'mw-revslider-arrow-disabled' );
+ this.backwardArrowButton.setDisabled( true );
} else {
- $( '.mw-revslider-arrow-backwards'
).removeClass( 'mw-revslider-arrow-disabled' ).addClass(
'mw-revslider-arrow-enabled' );
+ this.backwardArrowButton.setDisabled( false );
}
if ( this.slider.isAtEnd() ) {
- $( '.mw-revslider-arrow-forwards'
).removeClass( 'mw-revslider-arrow-enabled mw-revslider-arrow-hovered'
).addClass( 'mw-revslider-arrow-disabled' );
+ this.forwardArrowButton.setDisabled( true );
} else {
- $( '.mw-revslider-arrow-forwards'
).removeClass( 'mw-revslider-arrow-disabled' ).addClass(
'mw-revslider-arrow-enabled' );
+ this.forwardArrowButton.setDisabled( false );
}
animateObj = { scrollLeft:
this.slider.getFirstVisibleRevisionIndex() * this.revisionWidth };
@@ -660,7 +659,7 @@
this.slider.getRevisions().getView().adjustRevisionSizes( $slider );
if ( !this.slider.isAtEnd() ) {
- $slider.find( '.mw-revslider-arrow-forwards'
).removeClass( 'mw-revslider-arrow-disabled' ).addClass(
'mw-revslider-arrow-enabled' );
+ this.forwardArrowButton.setDisabled( false );
}
},
@@ -733,7 +732,7 @@
this.slider.getRevisions().getView().adjustRevisionSizes( $slider );
- $slider.find( '.mw-revslider-arrow-backwards'
).removeClass( 'mw-revslider-arrow-disabled' ).addClass(
'mw-revslider-arrow-enabled' );
+ this.backwardArrowButton.setDisabled( false );
},
/**
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index 847b2dd..cba7509 100644
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -123,10 +123,26 @@
}
.mw-revslider-arrow {
- width: 20px;
+ width: 22px;
+ height: 142px;
+}
+
+.mw-revslider-arrow .oo-ui-buttonElement-button {
height: 140px;
- background-position: center center;
- background-repeat: no-repeat;
+ width: 20px;
+ padding: 0;
+}
+
+.mw-revslider-arrow .oo-ui-iconElement-icon {
+ width: 20px;
+ height: 20px;
+ min-width: inherit;
+ min-height: inherit;
+}
+
+.mw-revslider-arrow.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
+ left: 0;
+ top: 61px;
}
.mw-revslider-arrow-backwards {
@@ -135,21 +151,6 @@
.mw-revslider-arrow-forwards {
margin-left: 30px;
-}
-
-.mw-revslider-arrow-enabled,
-.mw-revslider-arrow-disabled {
- border: #ddd solid 2px;
-}
-
-.mw-revslider-arrow-hovered {
- border: #ddd solid 2px;
- background-color: #e5e5e5;
- cursor: pointer;
-}
-
-.mw-revslider-arrow-active {
- border: #ccc solid 2px;
}
.mw-revslider-revision-slider {
diff --git a/resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg
b/resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg
deleted file mode 100644
index 4df619d..0000000
--- a/resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
- <path d="M7 13.1l8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7
13.1z" fill="#ddd"/>
-</svg>
diff --git a/resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg
b/resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg
deleted file mode 100644
index 74b5115..0000000
--- a/resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
- <path d="M7 13.1l8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7
13.1z" fill="#4c4c4c"/>
-</svg>
diff --git a/resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg
b/resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg
deleted file mode 100644
index 998ea9c..0000000
--- a/resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
- <path d="M7 13.1l8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7
13.1z" fill="#000"/>
-</svg>
diff --git a/resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg
b/resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg
deleted file mode 100644
index e13da27..0000000
--- a/resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
- <path d="M16.5 13.1L7.6 22c-.8-.8-.8-2 0-2.8l6.1-6.1-6-6.1c-.8-.8-.8-2
0-2.8l8.8 8.9z" fill="#ddd"/>
-</svg>
diff --git a/resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg
b/resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg
deleted file mode 100644
index d2c2b72..0000000
--- a/resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
- <path d="M16.5 13.1L7.6 22c-.8-.8-.8-2 0-2.8l6.1-6.1-6-6.1c-.8-.8-.8-2
0-2.8l8.8 8.9z" fill="#4c4c4c"/>
-</svg>
diff --git a/resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg
b/resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg
deleted file mode 100644
index 389cfb7..0000000
--- a/resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
- <path d="M16.5 13.1L7.6 22c-.8-.8-.8-2 0-2.8l6.1-6.1-6-6.1c-.8-.8-.8-2
0-2.8l8.8 8.9z" fill="#000"/>
-</svg>
diff --git a/tests/browser/features/support/pages/diff_page.rb
b/tests/browser/features/support/pages/diff_page.rb
index cf3e257..785175e 100644
--- a/tests/browser/features/support/pages/diff_page.rb
+++ b/tests/browser/features/support/pages/diff_page.rb
@@ -12,8 +12,8 @@
a(:revisionslider_help_close_start, css: '#revisionslider-help-close-start >
a')
a(:revisionslider_help_close_end, css: '#revisionslider-help-close-end > a')
- a(:revisionslider_timeline_backwards, css: '#mw-revslider-container > div >
a.mw-revslider-arrow.mw-revslider-arrow-backwards')
- a(:revisionslider_timeline_forwards, css: '#mw-revslider-container > div >
a.mw-revslider-arrow.mw-revslider-arrow-forwards')
+ div(:revisionslider_timeline_backwards, css:
'.mw-revslider-arrow.mw-revslider-arrow-backwards')
+ div(:revisionslider_timeline_forwards, css:
'.mw-revslider-arrow.mw-revslider-arrow-forwards')
div(:revisionslider_pointer_lower, css: '.mw-revslider-pointer-lower')
div(:revisionslider_pointer_upper, css: '.mw-revslider-pointer-upper')
diff --git a/tests/browser/features/support/step_definitions/timeline.rb
b/tests/browser/features/support/step_definitions/timeline.rb
index 283d1dc..848bb0c 100644
--- a/tests/browser/features/support/step_definitions/timeline.rb
+++ b/tests/browser/features/support/step_definitions/timeline.rb
@@ -1,17 +1,17 @@
Then(/^The forward arrow should be disabled/) do
- expect(on(DiffPage).revisionslider_timeline_forwards_element.class_name).to
match 'mw-revslider-arrow-disabled'
+ expect(on(DiffPage).revisionslider_timeline_forwards_element.class_name).to
match 'oo-ui-widget-disabled'
end
Then(/^The backward arrow should be disabled/) do
- expect(on(DiffPage).revisionslider_timeline_backwards_element.class_name).to
match 'mw-revslider-arrow-disabled'
+ expect(on(DiffPage).revisionslider_timeline_backwards_element.class_name).to
match 'oo-ui-widget-disabled'
end
Then(/^The forward arrow should be enabled/) do
-
expect(on(DiffPage).revisionslider_timeline_forwards_element.class_name).not_to
match 'mw-revslider-arrow-disabled'
+
expect(on(DiffPage).revisionslider_timeline_forwards_element.class_name).not_to
match 'oo-ui-widget-disabled'
end
Then(/^The backward arrow should be enabled/) do
-
expect(on(DiffPage).revisionslider_timeline_backwards_element.class_name).not_to
match 'mw-revslider-arrow-disabled'
+
expect(on(DiffPage).revisionslider_timeline_backwards_element.class_name).not_to
match 'oo-ui-widget-disabled'
end
Given(/^I click on the forward arrow$/) do
--
To view, visit https://gerrit.wikimedia.org/r/303166
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I25c98e32c74235a2b70ac1d02c221f1898ba9958
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-leszek <leszek.mani...@wikimedia.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
