From 4a9ee131d33b89208cb3203f877a2f60f8f6eb87 Mon Sep 17 00:00:00 2001 From: WMDE-Fisch Date: Tue, 11 Jul 2017 10:17:24 +0200 Subject: [PATCH] Refactor pointer class names 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 --- modules/ext.RevisionSlider.PointerLine.js | 2 +- modules/ext.RevisionSlider.PointerView.js | 10 ++--- modules/ext.RevisionSlider.SliderView.js | 37 +++++++------------ modules/ext.RevisionSlider.css | 17 ++------- tests/browser/features/difflinks.feature | 8 ++-- tests/browser/features/history.feature | 16 ++++---- tests/browser/features/pointers.feature | 16 ++++---- .../features/support/pages/diff_page.rb | 8 ++-- .../support/step_definitions/pointers.rb | 24 ++++++------ .../qunit/RevisionSlider.PointerView.test.js | 10 ++--- 10 files changed, 65 insertions(+), 83 deletions(-) diff --git a/modules/ext.RevisionSlider.PointerLine.js b/modules/ext.RevisionSlider.PointerLine.js index 925c533c..33c050ca 100644 --- a/modules/ext.RevisionSlider.PointerLine.js +++ b/modules/ext.RevisionSlider.PointerLine.js @@ -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' ); diff --git a/modules/ext.RevisionSlider.PointerView.js b/modules/ext.RevisionSlider.PointerView.js index 8e89c23c..6e2db5fa 100644 --- a/modules/ext.RevisionSlider.PointerView.js +++ b/modules/ext.RevisionSlider.PointerView.js @@ -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. diff --git a/modules/ext.RevisionSlider.SliderView.js b/modules/ext.RevisionSlider.SliderView.js index e01c61d1..923a9aaf 100644 --- a/modules/ext.RevisionSlider.SliderView.js +++ b/modules/ext.RevisionSlider.SliderView.js @@ -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 () { diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css index 160508d1..06a315ab 100644 --- a/modules/ext.RevisionSlider.css +++ b/modules/ext.RevisionSlider.css @@ -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 ) ); diff --git a/tests/browser/features/difflinks.feature b/tests/browser/features/difflinks.feature index 8adfb838..6467fc68 100644 --- a/tests/browser/features/difflinks.feature +++ b/tests/browser/features/difflinks.feature @@ -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 diff --git a/tests/browser/features/history.feature b/tests/browser/features/history.feature index b76b5875..be457019 100644 --- a/tests/browser/features/history.feature +++ b/tests/browser/features/history.feature @@ -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 diff --git a/tests/browser/features/pointers.feature b/tests/browser/features/pointers.feature index b720c2fb..fa37c73c 100644 --- a/tests/browser/features/pointers.feature +++ b/tests/browser/features/pointers.feature @@ -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 diff --git a/tests/browser/features/support/pages/diff_page.rb b/tests/browser/features/support/pages/diff_page.rb index 59a172df..e4af22a8 100644 --- a/tests/browser/features/support/pages/diff_page.rb +++ b/tests/browser/features/support/pages/diff_page.rb @@ -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 diff --git a/tests/browser/features/support/step_definitions/pointers.rb b/tests/browser/features/support/step_definitions/pointers.rb index 3142a7ff..ad0348e6 100644 --- a/tests/browser/features/support/step_definitions/pointers.rb +++ b/tests/browser/features/support/step_definitions/pointers.rb @@ -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 diff --git a/tests/qunit/RevisionSlider.PointerView.test.js b/tests/qunit/RevisionSlider.PointerView.test.js index 8ecbbfff..281c358a 100644 --- a/tests/qunit/RevisionSlider.PointerView.test.js +++ b/tests/qunit/RevisionSlider.PointerView.test.js @@ -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 ) );