Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/386702 )
Change subject: Minerva owns BacktoTopOverlay
......................................................................
Minerva owns BacktoTopOverlay
Not used in MobileFrontend so it is moved here from that repo.
Change-Id: I97e6010026daf4c6610bcfbedf140fb2a45b1130
---
A resources/skins.minerva.backtotop/BackToTopOverlay.hogan
A resources/skins.minerva.backtotop/BackToTopOverlay.js
A resources/skins.minerva.backtotop/backtotop.less
M resources/skins.minerva.backtotop/init.js
M skin.json
5 files changed, 113 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/MinervaNeue
refs/changes/02/386702/1
diff --git a/resources/skins.minerva.backtotop/BackToTopOverlay.hogan
b/resources/skins.minerva.backtotop/BackToTopOverlay.hogan
new file mode 100644
index 0000000..1dd5be9
--- /dev/null
+++ b/resources/skins.minerva.backtotop/BackToTopOverlay.hogan
@@ -0,0 +1 @@
+<div class="arrow-up"></div>
diff --git a/resources/skins.minerva.backtotop/BackToTopOverlay.js
b/resources/skins.minerva.backtotop/BackToTopOverlay.js
new file mode 100644
index 0000000..db6e0c9
--- /dev/null
+++ b/resources/skins.minerva.backtotop/BackToTopOverlay.js
@@ -0,0 +1,55 @@
+( function ( M, $ ) {
+
+ var View = M.require( 'mobile.startup/View' );
+
+ /**
+ * Displays a little arrow at the bottom right of the viewport.
+ * @class BackToTopOverlay
+ * @extends View
+ */
+ function BackToTopOverlay() {
+ View.apply( this, arguments );
+ }
+
+ OO.mfExtend( BackToTopOverlay, View, {
+ /**
+ * @inheritdoc
+ */
+ className: 'backtotop',
+ /**
+ * @inheritdoc
+ */
+ template: mw.template.get( 'mobile.backtotop',
'BackToTopOverlay.hogan' ),
+ /**
+ * @inheritdoc
+ */
+ events: $.extend( {}, View.prototype.events, {
+ click: 'onBackToTopClick'
+ } ),
+
+ /**
+ * Show the back to top element, if it's not visible already.
+ */
+ show: function () {
+ this.$el.css( 'visibility', 'visible' ).addClass(
'visible' );
+ },
+
+ /**
+ * Hide the back to top element, if it's visible.
+ */
+ hide: function () {
+ this.$el.removeClass( 'visible' );
+ },
+
+ /**
+ * Handles the click on the "Back to top" element and scrolls
back
+ * to the top smoothly.
+ */
+ onBackToTopClick: function () {
+ $( 'html, body' ).animate( { scrollTop: 0 }, 400 );
+ }
+ } );
+
+ M.define( 'skins.minerva.backtotop/BackToTopOverlay', BackToTopOverlay
);
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/skins.minerva.backtotop/backtotop.less
b/resources/skins.minerva.backtotop/backtotop.less
new file mode 100644
index 0000000..29c7aa9
--- /dev/null
+++ b/resources/skins.minerva.backtotop/backtotop.less
@@ -0,0 +1,47 @@
+@import 'mobile.variables';
+@import 'mediawiki.mixins.less';
+
+.backtotop {
+ /* initially hide the element */
+ visibility: hidden;
+ opacity: 0;
+
+ /* basic styling */
+ position: fixed;
+ width: 2.5em;
+ height: 2.5em;
+ border-radius: 100%;
+ box-shadow: 0.1em 0.2em 0.3em @colorGray12;
+ bottom: 20px;
+ right: 0;
+ cursor: pointer;
+ z-index: @z-indexOverlay;
+ background-color: @colorProgressive;
+
+ /* define what happens, if the visible class is added/removed, add a
nice fade out/in */
+ .transition( opacity 0.5s 0s );
+
+ &.visible {
+ &:hover {
+ opacity: 1;
+ }
+ opacity: 0.8;
+ }
+
+ > .arrow-up {
+ width: 0;
+ height: 0;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid #fff;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate( -50%, -50% );
+ }
+
+ /* center arrow in RTL wikis */
+ .rtl > & .arrow-up {
+ transform: translate( 50%, -50% );
+ }
+}
diff --git a/resources/skins.minerva.backtotop/init.js
b/resources/skins.minerva.backtotop/init.js
index 39cc340..f6553a6 100644
--- a/resources/skins.minerva.backtotop/init.js
+++ b/resources/skins.minerva.backtotop/init.js
@@ -1,5 +1,5 @@
( function ( M, $ ) {
- var BackToTopOverlay = M.require( 'mobile.backtotop/BackToTopOverlay' ),
+ var BackToTopOverlay = M.require(
'skins.minerva.backtotop/BackToTopOverlay' ),
backtotop = new BackToTopOverlay(),
browser = M.require( 'mobile.startup/Browser' ).getSingleton();
diff --git a/skin.json b/skin.json
index c692eb3..6db3580 100644
--- a/skin.json
+++ b/skin.json
@@ -385,16 +385,24 @@
"resources/skins.minerva.editor/init.js"
]
},
+
"skins.minerva.backtotop": {
"targets": [
"mobile",
"desktop"
],
"dependencies": [
- "mobile.backtotop",
+ "mobile.toggle",
"mobile.startup"
],
+ "templates": {
+ "BackToTopOverlay.hogan":
"resources/skins.minerva.backtotop/BackToTopOverlay.hogan"
+ },
+ "styles": [
+
"resources/skins.minerva.backtotop/backtotop.less"
+ ],
"scripts": [
+
"resources/skins.minerva.backtotop/BackToTopOverlay.js",
"resources/skins.minerva.backtotop/init.js"
]
},
--
To view, visit https://gerrit.wikimedia.org/r/386702
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I97e6010026daf4c6610bcfbedf140fb2a45b1130
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/MinervaNeue
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
