Florianschmidtwelzow has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/354642 )
Change subject: WIP: Enable RevisionSlider for mobile diff pages ...................................................................... WIP: Enable RevisionSlider for mobile diff pages With the dependant change, the RevisionSlider is enabled on mobile devices, too. This change ensures, that the design and functionality is working on mobile devices. This includes: * The jquery.ui.draggable module is only loaded, if the page is not viewed in mobile loading all needed jquery dependencies in mobile would be too much, and using the new concept of clicking in the RevisionSlider works pretty well on mobile) * The z-index is removed from most elements, except the pointer lines, which will be behind the other content Bug: T165835 Change-Id: I05677e555353361610b93df70d6d2fc81f718b89 Depends-On: I68cf50f5dd339f34802d70df1f32d2c3390944a3 --- M extension.json M modules/ext.RevisionSlider.SliderView.js M modules/ext.RevisionSlider.SliderViewTwo.js M modules/ext.RevisionSlider.css M modules/ext.RevisionSlider.init.js M modules/ext.RevisionSlider.lazy.css M src/RevisionSliderHooks.php 7 files changed, 130 insertions(+), 32 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider refs/changes/42/354642/1 diff --git a/extension.json b/extension.json index bbf27d1..36d4fe1 100644 --- a/extension.json +++ b/extension.json @@ -37,7 +37,11 @@ "styles": [ "modules/ext.RevisionSlider.lazy.css" ], - "position": "top" + "position": "top", + "targets": [ + "desktop", + "mobile" + ] }, "ext.RevisionSlider.lazyJs": { "scripts": [ @@ -46,7 +50,11 @@ "dependencies": [ "ext.RevisionSlider.Settings" ], - "position": "top" + "position": "top", + "targets": [ + "desktop", + "mobile" + ] }, "ext.RevisionSlider.init": { "scripts": [ @@ -80,19 +88,35 @@ "revisionslider-turn-on-auto-expand-title", "revisionslider-turn-off-auto-expand-title" ], - "position": "top" + "position": "top", + "targets": [ + "desktop", + "mobile" + ] }, "ext.RevisionSlider.noscript": { - "styles": "modules/ext.RevisionSlider.noscript.css" + "styles": "modules/ext.RevisionSlider.noscript.css", + "targets": [ + "desktop", + "mobile" + ] }, "ext.RevisionSlider.util": { "scripts": [ "modules/ext.RevisionSlider.util.js" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.Api": { "scripts": [ "modules/ext.RevisionSlider.Api.js" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.Settings": { @@ -103,6 +127,10 @@ "mediawiki.user", "mediawiki.storage", "mediawiki.cookie" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.Revision": { @@ -111,6 +139,10 @@ ], "dependencies": [ "moment" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.Pointer": { @@ -120,16 +152,28 @@ "dependencies": [ "ext.RevisionSlider.PointerView", "ext.RevisionSlider.PointerLine" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.PointerView": { "scripts": [ "modules/ext.RevisionSlider.PointerView.js" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.PointerLine": { "scripts": [ "modules/ext.RevisionSlider.PointerLine.js" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.Slider": { @@ -138,6 +182,10 @@ ], "dependencies": [ "ext.RevisionSlider.SliderView" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.SliderView": { @@ -147,7 +195,6 @@ "modules/ext.RevisionSlider.SliderViewTwo.js" ], "dependencies": [ - "jquery.ui.draggable", "mediawiki.util", "oojs-ui", "ext.RevisionSlider.util", @@ -158,6 +205,10 @@ "messages": [ "revisionslider-arrow-tooltip-newer", "revisionslider-arrow-tooltip-older" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.SliderViewTwo": { @@ -166,6 +217,10 @@ ], "dependencies": [ "ext.RevisionSlider.init" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.DiffPage": { @@ -174,6 +229,10 @@ ], "dependencies": [ "mediawiki.Uri" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.RevisionList": { @@ -184,6 +243,10 @@ "ext.RevisionSlider.Revision", "ext.RevisionSlider.RevisionListView", "mediawiki.util" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.RevisionListView": { @@ -205,6 +268,10 @@ "mediawiki.language", "mediawiki.util", "oojs-ui" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.icons": { @@ -220,7 +287,11 @@ }, "images": { "auto-expand": "resources/ext.RevisionSlider.icons/pin.svg" - } + }, + "targets": [ + "desktop", + "mobile" + ] }, "ext.RevisionSlider.pointers.lower": { "position": "top", @@ -229,7 +300,11 @@ "images": { "oldid": "resources/ext.RevisionSlider.pointers/pointer-lower-old.svg", "newid": "resources/ext.RevisionSlider.pointers/pointer-lower-new.svg" - } + }, + "targets": [ + "desktop", + "mobile" + ] }, "ext.RevisionSlider.pointers.upper": { "position": "top", @@ -238,7 +313,11 @@ "images": { "oldid": "resources/ext.RevisionSlider.pointers/pointer-upper-old.svg", "newid": "resources/ext.RevisionSlider.pointers/pointer-upper-new.svg" - } + }, + "targets": [ + "desktop", + "mobile" + ] }, "ext.RevisionSlider.HelpDialog": { "scripts": [ @@ -259,6 +338,10 @@ "revisionslider-previous-dialog", "revisionslider-next-dialog", "revisionslider-close-dialog" + ], + "targets": [ + "desktop", + "mobile" ] }, "ext.RevisionSlider.dialogImages": { @@ -284,7 +367,11 @@ "2a": "resources/ext.RevisionSlider.helpDialog/slide2.svg", "3a": "resources/ext.RevisionSlider.helpDialog/slide3a.svg", "4a": "resources/ext.RevisionSlider.helpDialog/slide4a.svg" - } + }, + "targets": [ + "desktop", + "mobile" + ] } }, "ResourceFileModulePaths": { diff --git a/modules/ext.RevisionSlider.SliderView.js b/modules/ext.RevisionSlider.SliderView.js index 9de8dd6..a30a810 100644 --- a/modules/ext.RevisionSlider.SliderView.js +++ b/modules/ext.RevisionSlider.SliderView.js @@ -195,7 +195,9 @@ } } ); - $pointers.draggable( this.buildDraggableOptions( escapePressed, $revisions, '.mw-revslider-pointer-container' ) ); + if ( mw.config.get( 'extRevisionSliderDragDropSupport' ) ) { + $pointers.draggable(this.buildDraggableOptions(escapePressed, $revisions, '.mw-revslider-pointer-container')); + } $pointers.on( 'touchstart touchmove touchend', mw.libs.revisionSlider.touchEventConverter @@ -568,8 +570,10 @@ self = this; this.slider.slide( direction ); - this.pointerOlder.getView().getElement().draggable( 'disable' ); - this.pointerNewer.getView().getElement().draggable( 'disable' ); + if ( mw.config.get( 'extRevisionSliderDragDropSupport' ) ) { + this.pointerOlder.getView().getElement().draggable('disable'); + this.pointerNewer.getView().getElement().draggable('disable'); + } if ( this.slider.isAtStart() ) { this.backwardArrowButton.setDisabled( true ); @@ -592,8 +596,10 @@ duration, null, function () { - self.pointerOlder.getView().getElement().draggable( 'enable' ); - self.pointerNewer.getView().getElement().draggable( 'enable' ); + if ( mw.config.get( 'extRevisionSliderDragDropSupport' ) ) { + self.pointerOlder.getView().getElement().draggable('enable'); + self.pointerNewer.getView().getElement().draggable('enable'); + } if ( self.slider.isAtStart() && !self.noMoreOlderRevisions ) { self.addOlderRevisionsIfNeeded( $( '.mw-revslider-revision-slider' ) ); @@ -691,7 +697,7 @@ if ( this.noMoreNewerRevisions || !this.slider.isAtEnd() ) { return; } - api.fetchRevisionData( mw.config.get( 'wgPageName' ), { + api.fetchRevisionData( mw.config.get( 'wgRelevantPageName' ), { startId: revisions[ revisions.length - 1 ].getId(), dir: 'newer', limit: revisionCount + 1, @@ -724,7 +730,7 @@ if ( this.noMoreOlderRevisions || !this.slider.isAtStart() ) { return; } - api.fetchRevisionData( mw.config.get( 'wgPageName' ), { + api.fetchRevisionData( mw.config.get( 'wgRelevantPageName' ), { startId: revisions[ 0 ].getId(), dir: 'older', // fetch an extra revision if there are more older revision than the current "window", diff --git a/modules/ext.RevisionSlider.SliderViewTwo.js b/modules/ext.RevisionSlider.SliderViewTwo.js index 32490b7..8cadb01 100644 --- a/modules/ext.RevisionSlider.SliderViewTwo.js +++ b/modules/ext.RevisionSlider.SliderViewTwo.js @@ -94,14 +94,16 @@ } } ); - $pointerOlder.draggable( this.buildDraggableOptions( - escapePressed, $revisions, - '.mw-revslider-pointer-container-older' - ) ); - $pointerNewer.draggable( this.buildDraggableOptions( - escapePressed, $revisions, - '.mw-revslider-pointer-container-newer' - ) ); + if ( mw.config.get( 'extRevisionSliderDragDropSupport' ) ) { + $pointerOlder.draggable(this.buildDraggableOptions( + escapePressed, $revisions, + '.mw-revslider-pointer-container-older' + )); + $pointerNewer.draggable(this.buildDraggableOptions( + escapePressed, $revisions, + '.mw-revslider-pointer-container-newer' + )); + } $pointerNewer.on( 'touchstart touchmove touchend touchcancel touchleave', diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css index 32428e3..4471cbf 100644 --- a/modules/ext.RevisionSlider.css +++ b/modules/ext.RevisionSlider.css @@ -79,7 +79,6 @@ .mw-revslider-revision-wrapper { display: inline-block; cursor: pointer; - z-index: 10; height: 140px; } @@ -177,7 +176,6 @@ /* This is a bit hacky way, the goal being to have a framed toggle button widget with some styles of the frameless one (to fit the size of the toggle button */ .mw-revslider-container .mw-revslider-auto-expand-button .oo-ui-buttonElement-button { - z-index: 10; padding: 0; box-sizing: border-box; min-height: 0; @@ -207,7 +205,6 @@ clear: both; top: 57px; margin: auto; - z-index: 10; } .mw-revslider-pointer-upper { @@ -220,7 +217,6 @@ .mw-revslider-pointer { position: absolute !important; /* stylelint-disable-line declaration-no-important */ - z-index: 11; width: 16px; height: 13px; background-repeat: no-repeat; @@ -285,8 +281,9 @@ .mw-revslider-pointer-line { position: absolute; - top: 73px; + /* The pointer lines should be behind the bars and circles */ z-index: -1; + top: 73px; } .mw-revslider-pointer-line-upper, diff --git a/modules/ext.RevisionSlider.init.js b/modules/ext.RevisionSlider.init.js index f964ef4..e0e91ab 100644 --- a/modules/ext.RevisionSlider.init.js +++ b/modules/ext.RevisionSlider.init.js @@ -13,7 +13,7 @@ mw.libs.revisionSlider.HelpDialog.init(); - api.fetchRevisionData( mw.config.get( 'wgPageName' ), { + api.fetchRevisionData( mw.config.get( 'wgRelevantPageName' ), { startId: mw.config.get( 'extRevisionSliderNewRev' ), limit: mw.libs.revisionSlider.calculateRevisionsPerWindow( 160, 16 ) } ).then( function ( data ) { @@ -122,6 +122,10 @@ mw.loader.load( 'ext.RevisionSlider.SliderViewTwo' ); } expand(); - initialize(); + if ( mw.config.get( 'extRevisionSliderDragDropSupport' ) ) { + mw.loader.using( 'jquery.ui.draggable', initialize ); + } else { + initialize() + } }( mediaWiki, jQuery ) ); diff --git a/modules/ext.RevisionSlider.lazy.css b/modules/ext.RevisionSlider.lazy.css index cda8428..5228b64 100644 --- a/modules/ext.RevisionSlider.lazy.css +++ b/modules/ext.RevisionSlider.lazy.css @@ -9,7 +9,6 @@ /* the interface is in RTL */ direction: ltr; position: relative; - z-index: 8; border: 1px solid #ccc; } diff --git a/src/RevisionSliderHooks.php b/src/RevisionSliderHooks.php index 2cabf66..962bc4c 100644 --- a/src/RevisionSliderHooks.php +++ b/src/RevisionSliderHooks.php @@ -73,6 +73,9 @@ $out->addJsConfigVars( 'extRevisionSliderOldRev', $oldRev->getId() ); $out->addJsConfigVars( 'extRevisionSliderNewRev', $newRev->getId() ); $out->addJsConfigVars( 'extRevisionSliderTimeOffset', intval( $timeOffset ) ); + $dragDropSupported = !( ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) && + MobileContext::singleton()->shouldDisplayMobileView() ); + $out->addJsConfigVars( 'extRevisionSliderDragDropSupport', $dragDropSupported ); $out->addJsConfigVars( 'extRevisionSliderAlternateSlider', $config->get( 'RevisionSliderAlternateSlider' ) -- To view, visit https://gerrit.wikimedia.org/r/354642 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I05677e555353361610b93df70d6d2fc81f718b89 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/RevisionSlider Gerrit-Branch: master Gerrit-Owner: Florianschmidtwelzow <florian.schmidt.stargatewis...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits