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
