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

Refactor pointer class names

Browse source 
Pointers can always be identified as the pointer for the "older" and
"newer" revisions. Class nameing was cleaned up and changed accordingly.

Change-Id: Id17878e780b5a405b196fdc5ec7429eeaef5bd4c
This commit is contained in:
WMDE-Fisch 2017-07-11 10:17:24 +02:00
parent 90d90a2f3c
commit 4a9ee131d3
10 changed files with 65 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/ext.RevisionSlider.PointerLine.js
View file

@ -112,7 +112,7 @@
return false;
}
if ( this.pointer.getView().isUpperPointer() ) {
if ( this.pointer.getView().isNewerPointer() ) {
$lowerLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
$upperLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
$newerUnderLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );

10
modules/ext.RevisionSlider.PointerView.js
View file

@ -51,21 +51,21 @@
},
/**
* Returns whether a pointer is the upper/new revision pointer based on its CSS class
* Returns whether a pointer is the newer revision pointer based on its CSS class
*
* @return {boolean}
*/
isUpperPointer: function () {
return this.getElement().hasClass( 'mw-revslider-pointer-upper' );
isNewerPointer: function () {
return this.getElement().hasClass( 'mw-revslider-pointer-newer' );
},
/**
* Returns the offset (margin-left) depending on whether its the upper or lower pointer
* Returns the offset (margin-left) depending on whether its the newer or older pointer
*
* @return {number}
*/
getOffset: function () {
return this.isUpperPointer() ? 16 : 0;
return this.isNewerPointer() ? 16 : 0;
},
// For correct positioning of the pointer in the RTL mode the left position is flipped in the container.

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

@ -216,13 +216,11 @@
* @param {jQuery} $revisions
*/
initPointers: function ( $revisions ) {
var $pointers,
var $pointers = this.$element.find( '.mw-revslider-pointer' ),
$pointerOlder = this.pointerOlder.getView().getElement(),
$pointerNewer = this.pointerNewer.getView().getElement(),
self = this;
$pointers = this.$element.find( '.mw-revslider-pointer' );
$( 'body' ).keydown( function ( e ) {
if ( e.which === 27 ) {
self.escapePressed = true;
@ -230,27 +228,20 @@
}
} );
$pointerOlder.draggable( this.buildDraggableOptions(
$revisions,
'.mw-revslider-pointer-container-older'
) );
$pointerNewer.draggable( this.buildDraggableOptions(
$revisions,
'.mw-revslider-pointer-container-newer'
) );
$pointers.on(
'touchstart touchmove touchend touchcancel touchleave',
mw.libs.revisionSlider.touchEventConverter
);
$pointerNewer
.on(
'touchstart touchmove touchend touchcancel touchleave',
mw.libs.revisionSlider.touchEventConverter
)
.addClass( 'mw-revslider-pointer-newid mw-revslider-pointer-upper' );
$pointerOlder
.on(
'touchstart touchmove touchend touchcancel touchleave',
mw.libs.revisionSlider.touchEventConverter
)
.addClass( 'mw-revslider-pointer-oldid mw-revslider-pointer-lower' );
$pointerOlder.draggable( this.buildDraggableOptions(
$revisions,
'.mw-revslider-pointer-container-older'
) );
$pointerNewer.draggable( this.buildDraggableOptions(
$revisions,
'.mw-revslider-pointer-container-newer'
) );
},
getOlderPointerPos: function () {

17
modules/ext.RevisionSlider.css
View file

@ -188,18 +188,9 @@ of the frameless one (to fit the size of the toggle button */
margin-top: 4px;
}
.mw-revslider-pointer-upper {
padding-top: 2px;
}
.mw-revslider-pointer-lower {
top: 15px;
padding-bottom: 2px;
}
.mw-revslider-pointer {
position: absolute !important; /* stylelint-disable-line declaration-no-important */
z-index: 1;
padding: 0;
width: 14px;
height: 14px;
border-radius: 50%;
@ -220,7 +211,7 @@ of the frameless one (to fit the size of the toggle button */
cursor: -webkit-grabbing;
}
.mw-revslider-pointer-upper.mw-revslider-pointer-newid {
.mw-revslider-pointer.mw-revslider-pointer-newer {
top: 10px;
border: 1px solid #66b2ff;
background: #2f93f7;
@ -231,7 +222,7 @@ of the frameless one (to fit the size of the toggle button */
background: linear-gradient( to bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
}
.mw-revslider-pointer-upper.mw-revslider-pointer-newid:hover {
.mw-revslider-pointer.mw-revslider-pointer-newer:hover {
background: #6db6fd;
background: -webkit-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
@ -240,7 +231,7 @@ of the frameless one (to fit the size of the toggle button */
background: linear-gradient( to bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
}
.mw-revslider-pointer-lower.mw-revslider-pointer-oldid {
.mw-revslider-pointer.mw-revslider-pointer-older {
top: 18px;
border: 1px solid #ffc561;
background: #fde072;
@ -251,7 +242,7 @@ of the frameless one (to fit the size of the toggle button */
background: linear-gradient( to bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
}
.mw-revslider-pointer-lower.mw-revslider-pointer-oldid:hover {
.mw-revslider-pointer.mw-revslider-pointer-older:hover {
background: #ffeba1;
background: -webkit-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );

8
tests/browser/features/difflinks.feature
View file

@ -8,8 +8,8 @@ Feature: RevisionSlider diff links
When I have loaded the RevisionSlider and dismissed the help dialog
And I click on the older edit link
And I wait until the diff has loaded
Then the lower pointer should be on revision 2
And the upper pointer should be on revision 3
Then the older pointer should be on revision 2
And the newer pointer should be on revision 3
And revision 2 should be loaded on the left of the diff
And revision 3 should be loaded on the right of the diff
@ -20,7 +20,7 @@ Feature: RevisionSlider diff links
And I wait until the diff has loaded
And I click on the newer edit link
And I wait until the diff has loaded
Then the lower pointer should be on revision 3
And the upper pointer should be on revision 4
Then the older pointer should be on revision 3
And the newer pointer should be on revision 4
And revision 3 should be loaded on the left of the diff
And revision 4 should be loaded on the right of the diff

16
tests/browser/features/history.feature
View file

@ -8,9 +8,9 @@ Feature: RevisionSlider history
# Scenario: RevisionSlider history can be accessed using browser back and forward buttons after clicking on a revision
# Given I am on the diff page
# When I have loaded the RevisionSlider and dismissed the help dialog
# And I click on revision 1 to move the lower pointer
# And I click on revision 1 to move the older pointer
# And I wait until the diff has loaded
# And I click on revision 2 to move the upper pointer
# And I click on revision 2 to move the newer pointer
# And I wait until the diff has loaded
# And I click the browser back button
# And I wait until the diff has loaded
@ -18,17 +18,17 @@ Feature: RevisionSlider history
# And I wait until the diff has loaded
# And I click the browser forward button
# And I wait until the diff has loaded
# Then the lower pointer should be on revision 1
# And the upper pointer should be on revision 4
# Then the older pointer should be on revision 1
# And the newer pointer should be on revision 4
# And revision 1 should be loaded on the left of the diff
# And revision 4 should be loaded on the right of the diff
Scenario: RevisionSlider history can be accessed using browser back and forward buttons after dragging to a revision
Given I am on the diff page
When I have loaded the RevisionSlider and dismissed the help dialog
And I drag the lower pointer to revision 1
And I drag the older pointer to revision 1
And I wait until the diff has loaded
And I drag the upper pointer to revision 2
And I drag the newer pointer to revision 2
And I wait until the diff has loaded
And I click the browser back button
And I wait until the diff has loaded
@ -36,7 +36,7 @@ Feature: RevisionSlider history
And I wait until the diff has loaded
And I click the browser forward button
And I wait until the diff has loaded
Then the lower pointer should be on revision 1
And the upper pointer should be on revision 4
Then the older pointer should be on revision 1
And the newer pointer should be on revision 4
And revision 1 should be loaded on the left of the diff
And revision 4 should be loaded on the right of the diff

16
tests/browser/features/pointers.feature
View file

@ -8,23 +8,23 @@ Feature: RevisionSlider pointers
# Scenario: RevisionSlider pointers move when revision bars are clicked
# Given I am on the diff page
# When I have loaded the RevisionSlider and dismissed the help dialog
# And I click on revision 3 to move the lower pointer
# And I click on revision 3 to move the older pointer
# And I wait until the diff has loaded
# And I click on revision 4 to move the upper pointer
# And I click on revision 4 to move the newer pointer
# And I wait until the diff has loaded
# Then the lower pointer should be on revision 3
# And the upper pointer should be on revision 4
# Then the older pointer should be on revision 3
# And the newer pointer should be on revision 4
# And revision 3 should be loaded on the left of the diff
# And revision 4 should be loaded on the right of the diff
Scenario: RevisionSlider pointers can be dragged
Given I am on the diff page
When I have loaded the RevisionSlider and dismissed the help dialog
And I drag the lower pointer to revision 3
And I drag the older pointer to revision 3
And I wait until the diff has loaded
And I drag the upper pointer to revision 4
And I drag the newer pointer to revision 4
And I wait until the diff has loaded
Then the lower pointer should be on revision 3
And the upper pointer should be on revision 4
Then the older pointer should be on revision 3
And the newer pointer should be on revision 4
And revision 3 should be loaded on the left of the diff
And revision 4 should be loaded on the right of the diff

8
tests/browser/features/support/pages/diff_page.rb
View file

@ -23,8 +23,8 @@ class DiffPage
span(:revisionslider_timeline_backwards_disabled, css: '.mw-revslider-arrow.mw-revslider-arrow-backwards.oo-ui-widget-disabled')
span(:revisionslider_timeline_forwards_disabled, css: '.mw-revslider-arrow.mw-revslider-arrow-forwards.oo-ui-widget-disabled')
div(:revisionslider_pointer_lower, css: '.mw-revslider-pointer-lower')
div(:revisionslider_pointer_upper, css: '.mw-revslider-pointer-upper')
div(:revisionslider_pointer_older, css: '.mw-revslider-pointer-older')
div(:revisionslider_pointer_newer, css: '.mw-revslider-pointer-newer')
div(:revisionslider_left_summary, id: 'mw-diff-otitle3')
div(:revisionslider_right_summary, id: 'mw-diff-ntitle3')
@ -33,12 +33,12 @@ class DiffPage
element('div', css: '.mw-revslider-revision[data-pos="' + index.to_s + '"]')
end
def click_revision_lower(index = 1)
def click_revision_older(index = 1)
revbar = revisionslider_rev(index).element.wd
browser.driver.action.move_to(revbar, 1, revbar.size.height - 1).click.perform
end
def click_revision_upper(index = 1)
def click_revision_newer(index = 1)
revbar = revisionslider_rev(index).element.wd
browser.driver.action.move_to(revbar, 1, 0).click.perform
end

24
tests/browser/features/support/step_definitions/pointers.rb
View file

@ -1,9 +1,9 @@
When(/^I click on revision (\d+) to move the lower pointer$/) do |index|
on(DiffPage).click_revision_lower(index.to_i)
When(/^I click on revision (\d+) to move the older pointer$/) do |index|
on(DiffPage).click_revision_older(index.to_i)
end
When(/^I click on revision (\d+) to move the upper pointer$/) do |index|
on(DiffPage).click_revision_upper(index.to_i)
When(/^I click on revision (\d+) to move the newer pointer$/) do |index|
on(DiffPage).click_revision_newer(index.to_i)
end
When(/^I click on the older edit link$/) do
@ -14,15 +14,15 @@ When(/^I click on the newer edit link$/) do
on(DiffPage).click_newer_edit_link
end
Given(/^I drag the lower pointer to revision (\d+)$/) do |index|
Given(/^I drag the older pointer to revision (\d+)$/) do |index|
on(DiffPage) do |page|
page.revisionslider_pointer_lower_element.element.drag_and_drop_on page.revisionslider_rev(index.to_i).element
page.revisionslider_pointer_older_element.element.drag_and_drop_on page.revisionslider_rev(index.to_i).element
end
end
Given(/^I drag the upper pointer to revision (\d+)$/) do |index|
Given(/^I drag the newer pointer to revision (\d+)$/) do |index|
on(DiffPage) do |page|
page.revisionslider_pointer_upper_element.element.drag_and_drop_on page.revisionslider_rev(index.to_i).element
page.revisionslider_pointer_newer_element.element.drag_and_drop_on page.revisionslider_rev(index.to_i).element
end
end
@ -46,10 +46,10 @@ Then(/^revision (\d+) should be loaded on the right of the diff$/) do |index|
expect(on(DiffPage).revisionslider_right_summary_element.text).to include 'RS-Summary-' + index.to_s
end
Then(/^the upper pointer should be on revision (\d+)$/) do |index|
expect(on(DiffPage).revisionslider_pointer_upper_element.attribute('data-pos')).to eq index
Then(/^the newer pointer should be on revision (\d+)$/) do |index|
expect(on(DiffPage).revisionslider_pointer_newer_element.attribute('data-pos')).to eq index
end
Then(/^the lower pointer should be on revision (\d+)$/) do |index|
expect(on(DiffPage).revisionslider_pointer_lower_element.attribute('data-pos')).to eq index
Then(/^the older pointer should be on revision (\d+)$/) do |index|
expect(on(DiffPage).revisionslider_pointer_older_element.attribute('data-pos')).to eq index
end

10
tests/qunit/RevisionSlider.PointerView.test.js
View file

@ -7,13 +7,13 @@
assert.ok( ( new PointerView( null, 'mw-revslider-pointer' ) ).render().hasClass( 'mw-revslider-pointer' ) );
} );
QUnit.test( 'Is upper pointer', function ( assert ) {
QUnit.test( 'Is newer pointer', function ( assert ) {
var pv = new PointerView( null, 'mw-revslider-pointer' );
pv.render();
assert.notOk( pv.isUpperPointer() );
assert.notOk( pv.isNewerPointer() );
pv.getElement().addClass( 'mw-revslider-pointer-upper' );
assert.ok( pv.isUpperPointer() );
pv.getElement().addClass( 'mw-revslider-pointer-newer' );
assert.ok( pv.isNewerPointer() );
} );
QUnit.test( 'Has offset', function ( assert ) {
@ -21,7 +21,7 @@
pv.render();
assert.equal( pv.getOffset(), 0 );
pv.getElement().addClass( 'mw-revslider-pointer-upper' );
pv.getElement().addClass( 'mw-revslider-pointer-newer' );
assert.equal( pv.getOffset(), 16 );
} );
}( mediaWiki ) );