Jakob has submitted this change and it was merged.
Change subject: Prefix all classes and IDs with mw-revslider
......................................................................
Prefix all classes and IDs with mw-revslider
Bug: T139105
Change-Id: Ia92396ec4f8acea39398173c81842d66257dc519
---
M RevisionSlider.hooks.php
M extension.json
M modules/ext.RevisionSlider.DiffPage.js
M modules/ext.RevisionSlider.HelpDialog.js
M modules/ext.RevisionSlider.PointerView.js
M modules/ext.RevisionSlider.RevisionListView.js
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.css
M modules/ext.RevisionSlider.init.js
M modules/ext.RevisionSlider.noscript.css
M tests/browser/features/support/pages/diff_page.rb
M tests/qunit/RevisionSlider.HelpDialog.test.js
M tests/qunit/RevisionSlider.Pointer.test.js
M tests/qunit/RevisionSlider.PointerView.test.js
M tests/qunit/RevisionSlider.RevisionListView.test.js
M tests/qunit/RevisionSlider.SliderView.test.js
16 files changed, 160 insertions(+), 158 deletions(-)
Approvals:
WMDE-Fisch: Checked; Looks good to me, but someone else must approve
Jakob: Looks good to me, approved
jenkins-bot: Verified
diff --git a/RevisionSlider.hooks.php b/RevisionSlider.hooks.php
index 48c821a..a1a1109 100644
--- a/RevisionSlider.hooks.php
+++ b/RevisionSlider.hooks.php
@@ -46,13 +46,13 @@
Html::rawElement(
'div',
[
- 'id' => 'mw-revision-slider-container',
+ 'id' => 'mw-revslider-container',
'style' => 'min-height: 150px;',
],
Html::element(
'p',
[
- 'id' =>
'mw-revision-slider-placeholder',
+ 'id' =>
'mw-revslider-placeholder',
'style' => 'text-align: center',
],
( new Message(
'revisionslider-loading-placeholder' ) )->text()
diff --git a/extension.json b/extension.json
index 5b93e36..bc8bc38 100644
--- a/extension.json
+++ b/extension.json
@@ -135,7 +135,7 @@
"ext.RevisionSlider.arrows.left": {
"position": "top",
"class": "ResourceLoaderImageModule",
- "selector": ".mw-arrow-left.mw-arrow-{name}",
+ "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",
@@ -145,7 +145,7 @@
"ext.RevisionSlider.arrows.right": {
"position": "top",
"class": "ResourceLoaderImageModule",
- "selector": ".mw-arrow-right.mw-arrow-{name}",
+ "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",
@@ -155,7 +155,7 @@
"ext.RevisionSlider.pointers.lower": {
"position": "top",
"class": "ResourceLoaderImageModule",
- "selector": ".mw-lower-pointer.mw-{name}-pointer",
+ "selector":
".mw-revslider-pointer-lower.mw-revslider-pointer-{name}",
"images": {
"oldid":
"resources/ext.RevisionSlider.pointers/pointer-lower-old.svg",
"newid":
"resources/ext.RevisionSlider.pointers/pointer-lower-new.svg"
@@ -164,7 +164,7 @@
"ext.RevisionSlider.pointers.upper": {
"position": "top",
"class": "ResourceLoaderImageModule",
- "selector": ".mw-upper-pointer.mw-{name}-pointer",
+ "selector":
".mw-revslider-pointer-upper.mw-revslider-pointer-{name}",
"images": {
"oldid":
"resources/ext.RevisionSlider.pointers/pointer-upper-old.svg",
"newid":
"resources/ext.RevisionSlider.pointers/pointer-upper-new.svg"
@@ -192,7 +192,7 @@
"ext.RevisionSlider.dialogImages": {
"position": "top",
"class": "ResourceLoaderImageModule",
- "selector": ".mw-help-dialog-slide-{name}",
+ "selector": ".mw-revslider-help-dialog-slide-{name}",
"images": {
"1": {
"file": {
diff --git a/modules/ext.RevisionSlider.DiffPage.js
b/modules/ext.RevisionSlider.DiffPage.js
index 5857710..5bbe2ff 100644
--- a/modules/ext.RevisionSlider.DiffPage.js
+++ b/modules/ext.RevisionSlider.DiffPage.js
@@ -18,7 +18,7 @@
$( 'table.diff[data-mw="interface"]' )
.append( $( '<tr>' ) )
.append( $( '<td>' ) )
- .append( $( '<div>' ).attr( 'id',
'mw-revision-slider-darkness' ) );
+ .append( $( '<div>' ).attr( 'id',
'mw-revslider-darkness' ) );
$.ajax( {
url: mw.util.wikiScript( 'index' ),
data: {
@@ -28,15 +28,15 @@
tryCount: 0,
retryLimit: 2,
success: function ( data ) {
- var $container = $(
'#mw-revision-slider-container' ),
+ var $container = $(
'#mw-revslider-container' ),
$contentText = $(
'#mw-content-text' ),
- scrollLeft = $container.find(
'.mw-revisions-container' ).scrollLeft();
+ scrollLeft = $container.find(
'.mw-revslider-revisions-container' ).scrollLeft();
data = $( data );
- data.find(
'#mw-revision-slider-container' )
+ data.find( '#mw-revslider-container' )
.replaceWith( $container );
$contentText.html( data.find(
'#mw-content-text' ) )
- .find(
'.mw-revisions-container' ).scrollLeft( scrollLeft );
+ .find(
'.mw-revslider-revisions-container' ).scrollLeft( scrollLeft );
mw.hook( 'wikipage.content' ).fire(
$contentText );
},
@@ -94,7 +94,7 @@
sliderView.slide( 0 );
sliderView.resetPointerStylesBasedOnPosition();
sliderView.resetRevisionStylesBasedOnPointerPosition(
- sliderView.$element.find(
'div.mw-revisions' )
+ sliderView.$element.find(
'div.mw-revslider-revisions' )
);
self.refresh( event.state.revid1,
event.state.revid2 );
} );
diff --git a/modules/ext.RevisionSlider.HelpDialog.js
b/modules/ext.RevisionSlider.HelpDialog.js
index 8913e35..e4ce1f2 100644
--- a/modules/ext.RevisionSlider.HelpDialog.js
+++ b/modules/ext.RevisionSlider.HelpDialog.js
@@ -58,10 +58,10 @@
slide.$element
.append(
- $( '<div>' ).addClass(
'mw-help-dialog-image-landscape mw-help-dialog-slide-1' )
+ $( '<div>' ).addClass(
'mw-revslider-help-dialog-image-landscape mw-revslider-help-dialog-slide-1' )
)
.append(
- $( '<p>' ).addClass(
'mw-help-dialog-text' )
+ $( '<p>' ).addClass(
'mw-revslider-help-dialog-text' )
.html( mw.message(
'revisionslider-help-dialog-slide1' ).parse() )
);
@@ -75,9 +75,9 @@
var slide = new OO.ui.PanelLayout( { $: this.$, padded:
true, expanded: false } );
slide.$element
- .append( $( '<div>' ).addClass(
'mw-help-dialog-image-landscape mw-help-dialog-slide-2' ) )
+ .append( $( '<div>' ).addClass(
'mw-revslider-help-dialog-image-landscape mw-revslider-help-dialog-slide-2' ) )
.append(
- $( '<p>' ).addClass(
'mw-help-dialog-text' )
+ $( '<p>' ).addClass(
'mw-revslider-help-dialog-text' )
.text( mw.msg(
'revisionslider-help-dialog-slide2' ) )
);
@@ -91,9 +91,9 @@
var slide = new OO.ui.PanelLayout( { $: this.$, padded:
true, expanded: false } );
slide.$element
- .append( $( '<div>' ).addClass(
'mw-help-dialog-image-portrait mw-help-dialog-slide-3 mw-image-column' ) )
+ .append( $( '<div>' ).addClass(
'mw-revslider-help-dialog-image-portrait mw-revslider-help-dialog-slide-3
mw-revslider-column-image' ) )
.append(
- $( '<div>' ).addClass( 'mw-text-column
mw-help-dialog-text' )
+ $( '<div>' ).addClass(
'mw-revslider-column-text mw-revslider-help-dialog-text' )
.html( mw.message(
'revisionslider-help-dialog-slide3' ).parse() )
)
.append( $( '<div>' ).css( 'clear', 'both' ) );
@@ -108,9 +108,9 @@
var slide = new OO.ui.PanelLayout( { $: this.$, padded:
true, expanded: false } );
slide.$element
- .append( $( '<div>' ).addClass(
'mw-help-dialog-image-landscape mw-help-dialog-slide-4' ) )
+ .append( $( '<div>' ).addClass(
'mw-revslider-help-dialog-image-landscape mw-revslider-help-dialog-slide-4' ) )
.append(
- $( '<p>' ).addClass(
'mw-help-dialog-text' )
+ $( '<p>' ).addClass(
'mw-revslider-help-dialog-text' )
.text( mw.msg(
'revisionslider-help-dialog-slide4' ) )
);
diff --git a/modules/ext.RevisionSlider.PointerView.js
b/modules/ext.RevisionSlider.PointerView.js
index 960ac83..852778d 100644
--- a/modules/ext.RevisionSlider.PointerView.js
+++ b/modules/ext.RevisionSlider.PointerView.js
@@ -33,7 +33,7 @@
initialize: function () {
this.$html = $( '<div>' )
.attr( 'id', this.id )
- .addClass( 'mw-pointer mw-pointer-cursor' );
+ .addClass( 'mw-revslider-pointer
mw-revslider-pointer-cursor' );
},
/**
@@ -57,7 +57,7 @@
* @return {boolean}
*/
isUpperPointer: function () {
- return this.getElement().hasClass( 'mw-upper-pointer' );
+ return this.getElement().hasClass(
'mw-revslider-pointer-upper' );
},
/**
diff --git a/modules/ext.RevisionSlider.RevisionListView.js
b/modules/ext.RevisionSlider.RevisionListView.js
index 35e1954..cd7b5e6 100644
--- a/modules/ext.RevisionSlider.RevisionListView.js
+++ b/modules/ext.RevisionSlider.RevisionListView.js
@@ -28,7 +28,7 @@
* @return {jQuery}
*/
render: function ( revisionTickWidth ) {
- var $html = $( '<div>' ).addClass( 'mw-revisions' ),
+ var $html = $( '<div>' ).addClass(
'mw-revslider-revisions' ),
revs = this.revisionList.getRevisions(),
maxChangeSizeLogged = Math.log(
this.revisionList.getBiggestChangeSize() ),
self = this,
@@ -48,17 +48,17 @@
$html
.append( $( '<div>' )
- .addClass(
'mw-revision-wrapper' )
+ .addClass(
'mw-revslider-revision-wrapper' )
.attr( 'title', tooltip )
.width( revisionTickWidth )
.tipsy( {
gravity: 's',
html: true,
trigger: 'manual',
- className:
'mw-revision-tooltip'
+ className:
'mw-revslider-revision-tooltip'
} )
.append( $( '<div>' )
- .addClass(
'mw-revision' )
+ .addClass(
'mw-revslider-revision' )
.attr( 'data-revid',
revs[ i ].getId() )
.attr( 'data-pos', i +
1 )
.css( {
@@ -66,8 +66,8 @@
width:
revisionTickWidth + 'px',
top: diffSize >
0 ? '-' + relativeChangeSize + 'px' : 0
} )
- .addClass( diffSize > 0
? 'mw-revision-up' : 'mw-revision-down' )
- .append( $( '<div>'
).addClass( 'mw-revision-border-box' ) )
+ .addClass( diffSize > 0
? 'mw-revslider-revision-up' : 'mw-revslider-revision-down' )
+ .append( $( '<div>'
).addClass( 'mw-revslider-revision-border-box' ) )
)
.mouseover( showTooltip )
.mouseout( hideTooltip )
@@ -86,7 +86,7 @@
if ( this.tooltipTimeout !== -1 ) {
window.clearTimeout( this.tooltipTimeout );
this.currentTooltip.tipsy( 'hide' );
- this.currentTooltip.removeClass(
'mw-revision-wrapper-hovered' );
+ this.currentTooltip.removeClass(
'mw-revslider-revision-wrapper-hovered' );
}
},
@@ -98,7 +98,7 @@
hideTooltip: function ( $rev ) {
this.tooltipTimeout = window.setTimeout( function () {
$rev.tipsy( 'hide' );
- $rev.removeClass( 'mw-revision-wrapper-hovered'
);
+ $rev.removeClass(
'mw-revslider-revision-wrapper-hovered' );
}, 500 );
},
@@ -110,7 +110,7 @@
showTooltip: function ( $rev ) {
this.hideCurrentTooltip();
$rev.tipsy( 'show' );
- $rev.addClass( 'mw-revision-wrapper-hovered' );
+ $rev.addClass( 'mw-revslider-revision-wrapper-hovered'
);
this.currentTooltip = $rev;
},
@@ -121,10 +121,10 @@
var self = this;
$( document )
- .on( 'mouseover', '.mw-revision-tooltip',
function () {
+ .on( 'mouseover',
'.mw-revslider-revision-tooltip', function () {
window.clearTimeout(
self.tooltipTimeout );
} )
- .on( 'mouseout', '.mw-revision-tooltip',
function () {
+ .on( 'mouseout',
'.mw-revslider-revision-tooltip', function () {
self.hideTooltip( self.currentTooltip );
} );
},
@@ -216,15 +216,15 @@
* @return {jQuery}
*/
makeChangeSizeLine: function ( relativeSize ) {
- var changeSizeClass = 'mw-no-change',
+ var changeSizeClass = 'mw-revslider-change-none',
leadingSign = '',
$changeNumber;
if ( relativeSize > 0 ) {
- changeSizeClass = 'mw-positive-change';
+ changeSizeClass =
'mw-revslider-change-positive';
leadingSign = '+';
} else if ( relativeSize < 0 ) {
- changeSizeClass = 'mw-negative-change';
+ changeSizeClass =
'mw-revslider-change-negative';
}
$changeNumber = $( '<span>' )
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index e1a66eb..add3ca8 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -58,7 +58,7 @@
pointerContainerStyle,
$revisions =
this.slider.getRevisions().getView().render( this.revisionWidth ),
$slider = $( '<div>' )
- .addClass( 'mw-revision-slider' )
+ .addClass(
'mw-revslider-revision-slider' )
.css( { direction: $container.css(
'direction' ) } ),
self = this;
@@ -83,24 +83,24 @@
} )
.append(
$( '<a> ' )
- .addClass( 'mw-arrow
mw-arrow-backwards' )
+ .addClass( 'mw-revslider-arrow
mw-revslider-arrow-backwards' )
.attr( 'data-dir', '-1' )
.tipsy( {
title: function () {
- if ( $( this
).hasClass( 'mw-arrow-disabled' ) ) {
+ if ( $( this
).hasClass( 'mw-revslider-arrow-disabled' ) ) {
return
'';
}
return
mw.message( 'revisionslider-arrow-tooltip-older' ).text();
}
} ),
$( '<div>' )
- .addClass(
'mw-revisions-container' )
+ .addClass(
'mw-revslider-revisions-container' )
.css( {
width: containerWidth +
'px'
} )
.append( $revisions ),
$( '<a> ' )
- .addClass( 'mw-arrow
mw-arrow-forwards' )
+ .addClass( 'mw-revslider-arrow
mw-revslider-arrow-forwards' )
.attr( 'data-dir', '1' )
.tipsy( {
gravity: function () {
@@ -111,7 +111,7 @@
}
},
title: function () {
- if ( $( this
).hasClass( 'mw-arrow-disabled' ) ) {
+ if ( $( this
).hasClass( 'mw-revslider-arrow-disabled' ) ) {
return
'';
}
return
mw.message( 'revisionslider-arrow-tooltip-newer' ).text();
@@ -119,22 +119,22 @@
} ),
$( '<div>' ).css( { clear: 'both' } ),
$( '<div>' )
- .addClass(
'mw-pointer-container' )
+ .addClass(
'mw-revslider-pointer-container' )
.css( pointerContainerStyle )
.append(
this.pointerOlder.getView().render(), this.pointerNewer.getView().render() )
);
if ( $slider.css( 'direction' ) === 'ltr' ) {
- $slider.find( '.mw-arrow-backwards' ).addClass(
'mw-arrow-left' );
- $slider.find( '.mw-arrow-forwards' ).addClass(
'mw-arrow-right' );
+ $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-arrow-backwards' ).addClass(
'mw-arrow-right' );
- $slider.find( '.mw-arrow-forwards' ).addClass(
'mw-arrow-left' );
+ $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-arrow' ).click( function () {
+ $slider.find( '.mw-revslider-arrow' ).click( function
() {
var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-arrow-disabled' ) ) {
+ if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) ) {
return;
}
mw.track(
'counter.MediaWiki.RevisionSlider.event.arrowClick' );
@@ -142,39 +142,39 @@
} )
.mouseenter( function () {
var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-arrow-disabled' ) ) {
+ if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) ) {
return;
}
- $arrow.removeClass( 'mw-arrow-enabled'
).addClass( 'mw-arrow-hovered' );
+ $arrow.removeClass(
'mw-revslider-arrow-enabled' ).addClass( 'mw-revslider-arrow-hovered' );
} )
.mouseleave( function () {
var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-arrow-disabled' ) ) {
+ if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) ) {
return;
}
- $arrow.removeClass( 'mw-arrow-hovered'
).addClass( 'mw-arrow-enabled' );
+ $arrow.removeClass(
'mw-revslider-arrow-hovered' ).addClass( 'mw-revslider-arrow-enabled' );
} )
.mousedown( function ( event ) {
var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-arrow-disabled' ) || event.which !== 1 ) {
+ if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) || event.which !== 1 ) {
return;
}
- $arrow.addClass( 'mw-arrow-active' );
+ $arrow.addClass(
'mw-revslider-arrow-active' );
} )
.mouseup( function ( event ) {
var $arrow = $( this );
- if ( $arrow.hasClass(
'mw-arrow-disabled' ) || event.which !== 1 ) {
+ if ( $arrow.hasClass(
'mw-revslider-arrow-disabled' ) || event.which !== 1 ) {
return;
}
- $arrow.removeClass( 'mw-arrow-active' );
+ $arrow.removeClass(
'mw-revslider-arrow-active' );
} );
- $slider.find( '.mw-pointer' ).draggable( {
+ $slider.find( '.mw-revslider-pointer' ).draggable( {
axis: 'x',
grid: [ this.revisionWidth, null ],
- containment: '.mw-pointer-container',
+ containment: '.mw-revslider-pointer-container',
start: function () {
- $( '.mw-revision-wrapper' ).addClass(
'mw-pointer-cursor' );
+ $( '.mw-revslider-revision-wrapper'
).addClass( 'mw-revslider-pointer-cursor' );
},
stop: function () {
var $p = $( this ),
@@ -194,7 +194,7 @@
self.diffPage.refresh( revId1, revId2 );
self.diffPage.pushState( revId1,
revId2, self );
- $( '.mw-revision-wrapper'
).removeClass( 'mw-pointer-cursor' );
+ $( '.mw-revslider-revision-wrapper'
).removeClass( 'mw-revslider-pointer-cursor' );
},
drag: function ( event, ui ) {
var newestVisibleRevisionLeftPos =
containerWidth - self.revisionWidth;
@@ -213,9 +213,9 @@
}
} );
- $slider.find( '.mw-revision-wrapper' ).click( function
( e ) {
+ $slider.find( '.mw-revslider-revision-wrapper' ).click(
function ( e ) {
var $revWrap = $( this ),
- $clickedRev = $revWrap.find(
'.mw-revision' ),
+ $clickedRev = $revWrap.find(
'.mw-revslider-revision' ),
hasClickedTop = e.pageY -
$revWrap.offset().top < $revWrap.height() / 2,
pOld = self.getOldRevPointer(),
pNew = self.getNewRevPointer();
@@ -239,7 +239,7 @@
self.alignPointers();
} );
- this.slider.setRevisionsPerWindow( $slider.find(
'.mw-revisions-container' ).width() / this.revisionWidth );
+ this.slider.setRevisionsPerWindow( $slider.find(
'.mw-revslider-revisions-container' ).width() / this.revisionWidth );
this.initializePointers( this.getOldRevElement(
$revisions ), this.getNewRevElement( $revisions ) );
this.resetRevisionStylesBasedOnPointerPosition(
$revisions );
@@ -289,7 +289,7 @@
* @return {jQuery}
*/
getRevElementAtPosition: function ( $revs, pos ) {
- return $revs.find( 'div.mw-revision[data-pos="' + pos +
'"]' );
+ return $revs.find(
'div.mw-revslider-revision[data-pos="' + pos + '"]' );
},
/**
@@ -299,7 +299,7 @@
* @return {jQuery}
*/
getOldRevElement: function ( $revs ) {
- return $revs.find( 'div.mw-revision[data-revid="' +
mw.config.values.extRevisionSliderOldRev + '"]' );
+ return $revs.find(
'div.mw-revslider-revision[data-revid="' +
mw.config.values.extRevisionSliderOldRev + '"]' );
},
/**
@@ -309,7 +309,7 @@
* @return {jQuery}
*/
getNewRevElement: function ( $revs ) {
- return $revs.find( 'div.mw-revision[data-revid="' +
mw.config.values.extRevisionSliderNewRev + '"]' );
+ return $revs.find(
'div.mw-revslider-revision[data-revid="' +
mw.config.values.extRevisionSliderNewRev + '"]' );
},
/**
@@ -337,11 +337,11 @@
*/
resetPointerColorsBasedOnValues: function ( p1, p2 ) {
if ( p1 > p2 ) {
-
this.pointerOlder.getView().getElement().removeClass( 'mw-oldid-pointer'
).addClass( 'mw-newid-pointer' );
-
this.pointerNewer.getView().getElement().removeClass( 'mw-newid-pointer'
).addClass( 'mw-oldid-pointer' );
+
this.pointerOlder.getView().getElement().removeClass(
'mw-revslider-pointer-oldid' ).addClass( 'mw-revslider-pointer-newid' );
+
this.pointerNewer.getView().getElement().removeClass(
'mw-revslider-pointer-newid' ).addClass( 'mw-revslider-pointer-oldid' );
} else {
-
this.pointerOlder.getView().getElement().removeClass( 'mw-newid-pointer'
).addClass( 'mw-oldid-pointer' );
-
this.pointerNewer.getView().getElement().removeClass( 'mw-oldid-pointer'
).addClass( 'mw-newid-pointer' );
+
this.pointerOlder.getView().getElement().removeClass(
'mw-revslider-pointer-newid' ).addClass( 'mw-revslider-pointer-oldid' );
+
this.pointerNewer.getView().getElement().removeClass(
'mw-revslider-pointer-oldid' ).addClass( 'mw-revslider-pointer-newid' );
}
},
@@ -349,10 +349,10 @@
* Resets the pointer styles (upper/lower, blue/yellow) based
on their position.
*/
resetPointerStylesBasedOnPosition: function () {
-
this.getNewRevPointer().getView().getElement().removeClass( 'mw-oldid-pointer'
).addClass( 'mw-newid-pointer' )
- .removeClass( 'mw-lower-pointer' ).addClass(
'mw-upper-pointer' );
-
this.getOldRevPointer().getView().getElement().removeClass( 'mw-newid-pointer'
).addClass( 'mw-oldid-pointer' )
- .removeClass( 'mw-upper-pointer' ).addClass(
'mw-lower-pointer' );
+
this.getNewRevPointer().getView().getElement().removeClass(
'mw-revslider-pointer-oldid' ).addClass( 'mw-revslider-pointer-newid' )
+ .removeClass( 'mw-revslider-pointer-lower'
).addClass( 'mw-revslider-pointer-upper' );
+
this.getOldRevPointer().getView().getElement().removeClass(
'mw-revslider-pointer-newid' ).addClass( 'mw-revslider-pointer-oldid' )
+ .removeClass( 'mw-revslider-pointer-upper'
).addClass( 'mw-revslider-pointer-lower' );
},
/**
@@ -365,13 +365,13 @@
newerRevPosition =
this.getNewRevPointer().getPosition(),
positionIndex = olderRevPosition + 1;
- $revisions.find( 'div.mw-revision' )
- .removeClass( 'mw-revision-intermediate
mw-revision-old mw-revision-new' );
+ $revisions.find( 'div.mw-revslider-revision' )
+ .removeClass(
'mw-revslider-revision-intermediate mw-revslider-revision-old
mw-revslider-revision-new' );
- this.getRevElementAtPosition( $revisions,
olderRevPosition ).addClass( 'mw-revision-old' );
- this.getRevElementAtPosition( $revisions,
newerRevPosition ).addClass( 'mw-revision-new' );
+ this.getRevElementAtPosition( $revisions,
olderRevPosition ).addClass( 'mw-revslider-revision-old' );
+ this.getRevElementAtPosition( $revisions,
newerRevPosition ).addClass( 'mw-revslider-revision-new' );
while ( positionIndex < newerRevPosition ) {
- this.getRevElementAtPosition( $revisions,
positionIndex ).addClass( 'mw-revision-intermediate' );
+ this.getRevElementAtPosition( $revisions,
positionIndex ).addClass( 'mw-revslider-revision-intermediate' );
positionIndex++;
}
},
@@ -394,7 +394,7 @@
slide: function ( direction, duration ) {
var animateObj,
- $animatedElement = this.$element.find(
'.mw-revisions-container' ),
+ $animatedElement = this.$element.find(
'.mw-revslider-revisions-container' ),
self = this;
this.slider.slide( direction );
@@ -402,14 +402,14 @@
this.pointerNewer.getView().getElement().draggable(
'disable' );
if ( this.slider.isAtStart() ) {
- $( '.mw-arrow-backwards' ).removeClass(
'mw-arrow-enabled mw-arrow-hovered' ).addClass( 'mw-arrow-disabled' );
+ $( '.mw-revslider-arrow-backwards'
).removeClass( 'mw-revslider-arrow-enabled mw-revslider-arrow-hovered'
).addClass( 'mw-revslider-arrow-disabled' );
} else {
- $( '.mw-arrow-backwards' ).removeClass(
'mw-arrow-disabled' ).addClass( 'mw-arrow-enabled' );
+ $( '.mw-revslider-arrow-backwards'
).removeClass( 'mw-revslider-arrow-disabled' ).addClass(
'mw-revslider-arrow-enabled' );
}
if ( this.slider.isAtEnd() ) {
- $( '.mw-arrow-forwards' ).removeClass(
'mw-arrow-enabled mw-arrow-hovered' ).addClass( 'mw-arrow-disabled' );
+ $( '.mw-revslider-arrow-forwards'
).removeClass( 'mw-revslider-arrow-enabled mw-revslider-arrow-hovered'
).addClass( 'mw-revslider-arrow-disabled' );
} else {
- $( '.mw-arrow-forwards' ).removeClass(
'mw-arrow-disabled' ).addClass( 'mw-arrow-enabled' );
+ $( '.mw-revslider-arrow-forwards'
).removeClass( 'mw-revslider-arrow-disabled' ).addClass(
'mw-revslider-arrow-enabled' );
}
animateObj = { scrollLeft:
this.slider.getFirstVisibleRevisionIndex() * this.revisionWidth };
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index ccce1de..e07a6da 100644
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -1,20 +1,20 @@
/* stylelint-disable selector-no-id */
/* TODO: No need to use IDs, they should be replaced with classes */
-#mw-revision-slider-container {
+#mw-revslider-container {
/* This will flip with CSSJanus in case */
/* the interface is in RTL */
direction: ltr;
position: relative;
}
-.mw-revision {
+.mw-revslider-revision {
position: relative;
margin-top: 70px;
background-color: #e3e3e3;
border-color: #e3e3e3;
}
-.mw-revision:hover {
+.mw-revslider-revision:hover {
background-color: #ccc;
border-color: #ccc;
transition: all ease 0.2s;
@@ -23,55 +23,55 @@
-o-transition: all ease 0.2s;
}
-.mw-revision-up {
+.mw-revslider-revision-up {
border-bottom-width: 2px;
border-bottom-style: solid;
}
-.mw-revision-down {
+.mw-revslider-revision-down {
border-top-width: 2px;
border-top-style: solid;
}
-.mw-revision-old {
+.mw-revslider-revision-old {
background-color: #fee6a8;
border-color: #e8bd4f;
}
-.mw-revision-old:hover {
+.mw-revslider-revision-old:hover {
background-color: #fdc44b;
border-color: #dda000;
}
-.mw-revision-new {
+.mw-revslider-revision-new {
background-color: #c3e2ff;
border-color: #1e6db8;
}
-.mw-revision-new:hover {
+.mw-revslider-revision-new:hover {
background-color: #45a6ff;
border-color: #065cad;
}
-.mw-revision-intermediate {
+.mw-revslider-revision-intermediate {
background-color: #bcbcbc;
border-color: #989898;
}
-.mw-revision-intermediate:hover {
+.mw-revslider-revision-intermediate:hover {
background-color: #a6a6a6;
border-color: #828282;
}
-.mw-revision-wrapper {
+.mw-revslider-revision-wrapper {
display: inline-block;
cursor: pointer;
z-index: 10;
height: 140px;
}
-.mw-revision-wrapper:hover,
-.mw-revision-wrapper-hovered {
+.mw-revslider-revision-wrapper:hover,
+.mw-revslider-revision-wrapper-hovered {
background-color: #f2f2f2;
transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
@@ -79,79 +79,80 @@
-o-transition: all ease 0.2s;
}
-.mw-revision-border-box {
+.mw-revslider-revision-border-box {
height: 100%;
width: 100%;
border-left: solid 1px #fff;
}
-.mw-revision-tooltip .tipsy-inner {
+.mw-revslider-revision-tooltip .tipsy-inner {
max-width: none;
}
-.mw-revision-tooltip .mw-positive-change {
+.mw-revslider-revision-tooltip .mw-revslider-change-positive {
color: #006400;
}
-.mw-revision-tooltip .mw-negative-change {
+.mw-revslider-revision-tooltip .mw-revslider-change-negative {
color: #8b0000;
}
-.mw-revision-tooltip .mw-no-change {
+.mw-revslider-revision-tooltip .mw-revslider-change-none {
color: #aaa;
}
-.mw-revisions {
+.mw-revslider-revisions {
height: 140px;
white-space: nowrap;
}
-.mw-revisions-container {
+
+.mw-revslider-revisions-container {
width: 90%;
position: relative;
overflow: hidden;
}
-.mw-revisions-container,
-.mw-arrow {
+.mw-revslider-revisions-container,
+.mw-revslider-arrow {
float: left;
}
-.mw-arrow {
+.mw-revslider-arrow {
width: 20px;
height: 140px;
background-position: center center;
background-repeat: no-repeat;
}
-.mw-arrow-backwards {
+.mw-revslider-arrow-backwards {
margin-right: 30px;
}
-.mw-arrow-forwards {
+.mw-revslider-arrow-forwards {
margin-left: 30px;
}
-.mw-arrow-enabled,
-.mw-arrow-disabled {
+.mw-revslider-arrow-enabled,
+.mw-revslider-arrow-disabled {
border: #ddd solid 2px;
}
-.mw-arrow-hovered {
+.mw-revslider-arrow-hovered {
border: #ddd solid 2px;
background-color: #e5e5e5;
cursor: pointer;
}
-.mw-arrow-active {
+.mw-revslider-arrow-active {
border: #ccc solid 2px;
}
-.mw-revision-slider {
+.mw-revslider-revision-slider {
position: relative;
margin: auto;
}
-.mw-pointer-container {
+.mw-revslider-pointer-container {
position: absolute;
clear: both;
height: 1px;
@@ -159,11 +160,12 @@
margin: auto;
z-index: 10;
}
-.mw-lower-pointer {
+
+.mw-revslider-pointer-lower {
top: 15px;
}
-.mw-pointer {
+.mw-revslider-pointer {
position: absolute !important; /* stylelint-disable-line
declaration-no-important */
z-index: 11;
width: 18px;
@@ -171,19 +173,19 @@
background-repeat: no-repeat;
}
-.mw-pointer-cursor {
+.mw-revslider-pointer-cursor {
cursor: ew-resize;
}
-.mw-revisions-older {
+.mw-revslider-revisions-older {
float: left;
}
-.mw-revisions-newer {
+.mw-revslider-revisions-newer {
float: right;
}
-#mw-revision-slider-darkness {
+#mw-revslider-darkness {
background-color: #fff;
filter: alpha( opacity=50 ); /* IE 5-7 */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; /*
IE 8 */
@@ -200,36 +202,36 @@
left: 0;
}
-.mw-help-dialog-image-landscape {
+.mw-revslider-help-dialog-image-landscape {
height: 160px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
}
-.mw-help-dialog-image-portrait {
+.mw-revslider-help-dialog-image-portrait {
height: 180px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
}
-.mw-image-column {
+.mw-revslider-column-image {
width: 50%;
float: left;
}
-.mw-text-column {
+.mw-revslider-column-text {
width: 50%;
float: right;
}
-.mw-help-dialog-text {
+.mw-revslider-help-dialog-text {
font-size: 15px;
font-size: 1rem;
}
-.mw-show-help {
+.mw-revslider-show-help {
position: absolute;
right: -18px;
bottom: 7px;
diff --git a/modules/ext.RevisionSlider.init.js
b/modules/ext.RevisionSlider.init.js
index 008fc97..4ab9aa0 100644
--- a/modules/ext.RevisionSlider.init.js
+++ b/modules/ext.RevisionSlider.init.js
@@ -19,7 +19,7 @@
revs.reverse();
revisionList = new
mw.libs.revisionSlider.RevisionList( revs );
- $container = $( '#mw-revision-slider-container'
);
+ $container = $( '#mw-revslider-container' );
slider = new mw.libs.revisionSlider.Slider(
revisionList );
slider.getView().render( $container );
@@ -34,7 +34,7 @@
mw.libs.revisionSlider.HelpDialog.show();
} )
.text( mw.message(
'revisionslider-show-help' ).text() )
- .addClass( 'mw-show-help' )
+ .addClass(
'mw-revslider-show-help' )
.tipsy( {
gravity: $( 'body'
).hasClass( 'ltr' ) ? 'se' : 'sw',
offset: 15,
@@ -44,15 +44,15 @@
} )
);
- $( '#mw-revision-slider-placeholder' ).remove();
+ $( '#mw-revslider-placeholder' ).remove();
} catch ( err ) {
if ( err === 'RS-rev-out-of-range' ) {
- $( '#mw-revision-slider-placeholder' )
+ $( '#mw-revslider-placeholder' )
.text( mw.message(
'revisionslider-loading-out-of-range' ).text() );
console.log( err );
mw.track(
'counter.MediaWiki.RevisionSlider.error.outOfRange' );
} else {
- $( '#mw-revision-slider-placeholder' )
+ $( '#mw-revslider-placeholder' )
.text( mw.message(
'revisionslider-loading-failed' ).text() );
console.log( err );
mw.track(
'counter.MediaWiki.RevisionSlider.error.init' );
@@ -61,7 +61,7 @@
},
error: function ( err ) {
- $( '#mw-revision-slider-placeholder' )
+ $( '#mw-revslider-placeholder' )
.text( mw.message(
'revisionslider-loading-failed' ).text() );
console.log( err );
mw.track( 'counter.MediaWiki.RevisionSlider.error.init'
);
diff --git a/modules/ext.RevisionSlider.noscript.css
b/modules/ext.RevisionSlider.noscript.css
index d30d63b..48f5107 100644
--- a/modules/ext.RevisionSlider.noscript.css
+++ b/modules/ext.RevisionSlider.noscript.css
@@ -1,5 +1,5 @@
/* stylelint-disable selector-no-id */
/* TODO: No need to use IDs, they should be replaced with classes */
-.client-nojs #mw-revision-slider-container {
+.client-nojs #mw-revslider-container {
display: none;
}
diff --git a/tests/browser/features/support/pages/diff_page.rb
b/tests/browser/features/support/pages/diff_page.rb
index b04f7b5..c8aa392 100644
--- a/tests/browser/features/support/pages/diff_page.rb
+++ b/tests/browser/features/support/pages/diff_page.rb
@@ -1,8 +1,8 @@
class DiffPage
include PageObject
- p(:revisionslider_placeholder, id: 'mw-revision-slider-placeholder')
- div(:revisionslider_container, id: 'mw-revision-slider-container')
+ p(:revisionslider_placeholder, id: 'mw-revslider-placeholder')
+ div(:revisionslider_container, id: 'mw-revslider-container')
def wait_for_slider_to_load
wait_until do
diff --git a/tests/qunit/RevisionSlider.HelpDialog.test.js
b/tests/qunit/RevisionSlider.HelpDialog.test.js
index 066f5bd..ee7666d 100644
--- a/tests/qunit/RevisionSlider.HelpDialog.test.js
+++ b/tests/qunit/RevisionSlider.HelpDialog.test.js
@@ -8,7 +8,7 @@
windowManager = new OO.ui.WindowManager();
function getSlideTextHtml( slide ) {
- return slide.$element.find( '.mw-help-dialog-text'
).html();
+ return slide.$element.find(
'.mw-revslider-help-dialog-text' ).html();
}
$( 'body' ).append( windowManager.$element );
diff --git a/tests/qunit/RevisionSlider.Pointer.test.js
b/tests/qunit/RevisionSlider.Pointer.test.js
index 3282315..8180d44 100644
--- a/tests/qunit/RevisionSlider.Pointer.test.js
+++ b/tests/qunit/RevisionSlider.Pointer.test.js
@@ -4,7 +4,7 @@
QUnit.module( 'ext.RevisionSlider.Pointer' );
QUnit.test( 'Initialize Pointer', function ( assert ) {
- assert.ok( ( new Pointer( 'mw-revslider-pointer' )
).getView().render().hasClass( 'mw-pointer' ) );
+ assert.ok( ( new Pointer( 'mw-revslider-pointer' )
).getView().render().hasClass( 'mw-revslider-pointer' ) );
} );
QUnit.test( 'Set and get position', function ( assert ) {
diff --git a/tests/qunit/RevisionSlider.PointerView.test.js
b/tests/qunit/RevisionSlider.PointerView.test.js
index 547e60c..4f2af40 100644
--- a/tests/qunit/RevisionSlider.PointerView.test.js
+++ b/tests/qunit/RevisionSlider.PointerView.test.js
@@ -4,7 +4,7 @@
QUnit.module( 'ext.RevisionSlider.PointerView' );
QUnit.test( 'Initialize PointerView', function ( assert ) {
- assert.ok( ( new PointerView( null, 'mw-revslider-pointer' )
).render().hasClass( 'mw-pointer' ) );
+ assert.ok( ( new PointerView( null, 'mw-revslider-pointer' )
).render().hasClass( 'mw-revslider-pointer' ) );
} );
QUnit.test( 'Is upper pointer', function ( assert ) {
@@ -12,7 +12,7 @@
pv.render();
assert.notOk( pv.isUpperPointer() );
- pv.getElement().addClass( 'mw-upper-pointer' );
+ pv.getElement().addClass( 'mw-revslider-pointer-upper' );
assert.ok( pv.isUpperPointer() );
} );
@@ -21,7 +21,7 @@
pv.render();
assert.equal( pv.getOffset(), 0 );
- pv.getElement().addClass( 'mw-upper-pointer' );
+ pv.getElement().addClass( 'mw-revslider-pointer-upper' );
assert.equal( pv.getOffset(), 16 );
} );
} )( mediaWiki );
diff --git a/tests/qunit/RevisionSlider.RevisionListView.test.js
b/tests/qunit/RevisionSlider.RevisionListView.test.js
index 145d1ab..26d2194 100644
--- a/tests/qunit/RevisionSlider.RevisionListView.test.js
+++ b/tests/qunit/RevisionSlider.RevisionListView.test.js
@@ -14,16 +14,16 @@
$resultHtml, $revisionWrapperDivs, $revisionDivs;
$resultHtml = revisionListView.render( 11 );
- $revisionWrapperDivs = $resultHtml.find( '.mw-revision-wrapper'
);
- $revisionDivs = $resultHtml.find( '.mw-revision' );
+ $revisionWrapperDivs = $resultHtml.find(
'.mw-revslider-revision-wrapper' );
+ $revisionDivs = $resultHtml.find( '.mw-revslider-revision' );
assert.equal( $revisionWrapperDivs.length, 3 );
assert.equal( $( $revisionDivs[ 0 ] ).attr( 'data-revid' ), 1 );
assert.equal( $( $revisionDivs[ 2 ] ).attr( 'data-revid' ), 37
);
assert.equal( $( $revisionDivs[ 1 ] ).css( 'width' ), '11px' );
assert.equal( $( $revisionDivs[ 1 ] ).css( 'height' ), '70px'
); // max relative size
- assert.ok( $( $revisionDivs[ 1 ] ).hasClass( 'mw-revision-up' )
);
- assert.ok( $( $revisionDivs[ 2 ] ).hasClass( 'mw-revision-down'
) );
+ assert.ok( $( $revisionDivs[ 1 ] ).hasClass(
'mw-revslider-revision-up' ) );
+ assert.ok( $( $revisionDivs[ 2 ] ).hasClass(
'mw-revslider-revision-down' ) );
} );
QUnit.test( 'tool tip is composed correctly', function ( assert ) {
@@ -112,8 +112,8 @@
$changeSizeLineHtml = revisionListView.makeChangeSizeLine( 9 );
- assert.equal( $changeSizeLineHtml.find( '.mw-positive-change'
).length, 1 );
- assert.equal( $changeSizeLineHtml.find( '.mw-positive-change'
).text(), '+9' );
+ assert.equal( $changeSizeLineHtml.find(
'.mw-revslider-change-positive' ).length, 1 );
+ assert.equal( $changeSizeLineHtml.find(
'.mw-revslider-change-positive' ).text(), '+9' );
} );
QUnit.test( 'negative change is composed correctly', function ( assert
) {
@@ -122,8 +122,8 @@
$changeSizeLineHtml = revisionListView.makeChangeSizeLine( -9 );
- assert.equal( $changeSizeLineHtml.find( '.mw-negative-change'
).length, 1 );
- assert.equal( $changeSizeLineHtml.find( '.mw-negative-change'
).text(), '-9' );
+ assert.equal( $changeSizeLineHtml.find(
'.mw-revslider-change-negative' ).length, 1 );
+ assert.equal( $changeSizeLineHtml.find(
'.mw-revslider-change-negative' ).text(), '-9' );
} );
QUnit.test( 'neutral change is composed correctly', function ( assert )
{
@@ -132,8 +132,8 @@
$changeSizeLineHtml = revisionListView.makeChangeSizeLine( 0 );
- assert.equal( $changeSizeLineHtml.find( '.mw-no-change'
).length, 1 );
- assert.equal( $changeSizeLineHtml.find( '.mw-no-change'
).text(), '0' );
+ assert.equal( $changeSizeLineHtml.find(
'.mw-revslider-change-none' ).length, 1 );
+ assert.equal( $changeSizeLineHtml.find(
'.mw-revslider-change-none' ).text(), '0' );
} );
QUnit.test( 'big change number is formatted correctly', function (
assert ) {
@@ -142,7 +142,7 @@
$changeSizeLineHtml = revisionListView.makeChangeSizeLine( 1000
);
- assert.equal( $changeSizeLineHtml.find( '.mw-positive-change'
).text(), '+1,000' );
+ assert.equal( $changeSizeLineHtml.find(
'.mw-revslider-change-positive' ).text(), '+1,000' );
} );
QUnit.test( 'page size is formatted correctly', function ( assert ) {
diff --git a/tests/qunit/RevisionSlider.SliderView.test.js
b/tests/qunit/RevisionSlider.SliderView.test.js
index 710de14..a567df1 100644
--- a/tests/qunit/RevisionSlider.SliderView.test.js
+++ b/tests/qunit/RevisionSlider.SliderView.test.js
@@ -30,9 +30,9 @@
view.render( $container );
- assert.ok( $container.find( '.mw-revision-slider' ).length > 0
);
- $revisionOld = $container.find( '.mw-revision-old' );
- $revisionNew = $container.find( '.mw-revision-new' );
+ assert.ok( $container.find( '.mw-revslider-revision-slider'
).length > 0 );
+ $revisionOld = $container.find( '.mw-revslider-revision-old' );
+ $revisionNew = $container.find( '.mw-revslider-revision-new' );
assert.ok( $revisionOld.length > 0 );
assert.equal( $revisionOld.attr( 'data-revid' ), 1 );
assert.ok( $revisionNew.length > 0 );
--
To view, visit https://gerrit.wikimedia.org/r/296873
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ia92396ec4f8acea39398173c81842d66257dc519
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Addshore <addshorew...@gmail.com>
Gerrit-Reviewer: Gabriel Birke <gabriel.bi...@wikimedia.de>
Gerrit-Reviewer: Jakob <jakob.warkot...@wikimedia.de>
Gerrit-Reviewer: Kai Nissen (WMDE) <kai.nis...@wikimedia.de>
Gerrit-Reviewer: Tobias Gritschacher <tobias.gritschac...@wikimedia.de>
Gerrit-Reviewer: WMDE-Fisch <christoph.fisc...@wikimedia.de>
Gerrit-Reviewer: WMDE-leszek <leszek.mani...@wikimedia.de>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
