Jdlrobson has submitted this change and it was merged.
Change subject: Rewrite createOverlay to use an Overlay View that is stackable
......................................................................
Rewrite createOverlay to use an Overlay View that is stackable
This refactors overlays so that you can have more than one
open at a time. When closed they are removed from the stack
until you escape back to the page content.
PhotoUploaderPreview now creates an instance of Overlay
- this is probably not perfect but it keeps this patchset as
simplistic as possible.
Change-Id: I0a5ff8fa2c2b7c3c68276bead268b25a0c54a7c8
TODO: Make overlays close with hardware back button press
---
M MobileFrontend.php
M includes/MobileFrontend.hooks.php
M javascripts/common/mf-navigation.js
M javascripts/modules/mf-cleanuptemplates.js
M javascripts/modules/mf-languages.js
M javascripts/modules/mf-photo.js
M javascripts/modules/mf-tables.js
M less/common/mf-navigation.less
M less/modules/mf-search.less
M less/modules/mf-tables.less
M less/specials/userlogin.less
M stylesheets/common/mf-navigation.css
M stylesheets/modules/mf-search.css
M stylesheets/modules/mf-tables.css
M stylesheets/specials/userlogin.css
A templates/overlay.html
A templates/overlays/cleanup.html
A templates/overlays/languages.html
A templates/overlays/photoCopyrightDialog.html
D templates/photoCopyrightDialog.html
A tests/js/common/mf-navigation.js
M tests/js/fixtures-templates.js
22 files changed, 369 insertions(+), 225 deletions(-)
Approvals:
Ori.livneh: Looks good to me, but someone else must approve
Jdlrobson: Verified; Looks good to me, approved
jenkins-bot: Checked
diff --git a/MobileFrontend.php b/MobileFrontend.php
index a9edf19..f15d116 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -220,8 +220,10 @@
'localBasePath' => $localBasePath,
'localTemplateBasePath' => $localBasePath . '/templates',
'templates' => array(
- 'photoCopyrightDialog',
'leadPhoto',
+ 'overlay',
+ 'overlays/cleanup',
+ 'overlays/photoCopyrightDialog',
'photoUploader',
'photoUploadPreview',
'ctaDrawer'
@@ -230,11 +232,12 @@
'mobileTargets' => array( 'stable', 'beta', 'alpha' ),
);
-$wgResourceModules['mobile.beta.templates'] = array(
+$wgResourceModules['mobile.beta.plumbing'] = array(
'localBasePath' => $localBasePath,
'localTemplateBasePath' => $localBasePath . '/templates',
'templates' => array(
'languageSection',
+ 'overlays/languages',
),
'class' => 'MFResourceLoaderModule',
'mobileTargets' => array( 'beta', 'alpha' ),
@@ -243,7 +246,7 @@
$wgResourceModules['mobile.beta'] = $wgMFMobileResourceBoilerplate + array(
'dependencies' => array(
'mobile.stable',
- 'mobile.beta.templates',
+ 'mobile.beta.plumbing',
),
'scripts' => array(
'javascripts/modules/mf-languages.js',
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index 8a899e8..88c043f 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -207,6 +207,7 @@
'javascripts/modules/mf-toggle-dynamic.js',
'javascripts/actions/mf-edit.js',
'tests/js/test_mf-edit.js',
'javascripts/common/mf-navigation.js',
+ 'tests/js/common/mf-navigation.js',
'javascripts/common/mf-notification.js',
'javascripts/modules/mf-photo.js',
'tests/js/test_mf-photo.js',
'javascripts/modules/mf-references.js',
'tests/js/test_references.js',
diff --git a/javascripts/common/mf-navigation.js
b/javascripts/common/mf-navigation.js
index c60dc02..4345acf 100644
--- a/javascripts/common/mf-navigation.js
+++ b/javascripts/common/mf-navigation.js
@@ -3,8 +3,9 @@
var m = ( function( $ ) {
var View = M.require( 'view' ),
u = M.utils, mfePrefix = M.prefix,
- lastScrollTopPosition = 0,
inBeta = mw.config.get( 'wgMFMode' ) === 'beta',
+ Overlay,
+ OverlayManager,
Drawer, CtaDrawer;
Drawer = View.extend( {
@@ -55,43 +56,72 @@
template: M.template.get( 'ctaDrawer' )
} );
- function getOverlay() {
- return document.getElementById( 'mw-mf-overlay' );
- }
+ OverlayManager = function() {};
- function closeOverlay( ) {
- $( 'html' ).removeClass( 'overlay' );
- window.scrollTo( document.body.scrollLeft,
lastScrollTopPosition );
- M.history.replaceHash( '#' );
- }
+ OverlayManager.prototype = {
+ stack: [],
+ getTopOverlay: function() {
+ return this.stack[ this.stack.length - 1 ];
+ },
+ pop: function() {
+ var overlay = this.stack.pop(); // assume the overlay
being escaped is the topmost one
+ // Make sure all open overlays are closed before
returning to article
+ if ( this.stack.length === 0 ) {
+ $( 'html' ).removeClass( 'overlay' );
+ // return to last known scroll position
+ window.scrollTo( document.body.scrollLeft,
overlay.scrollTop );
+ return true;
+ } else {
+ this.getTopOverlay().show();
+ return false;
+ }
+ },
+ push: function( overlay ) {
+ // hide the current open overlay
+ var top = this.getTopOverlay();
+ if ( top ) {
+ top.hide();
+ }
- function showOverlay() {
- lastScrollTopPosition = document.body.scrollTop;
- $( 'html' ).addClass( 'overlay' );
- window.scrollTo( 0, 0 ); // scroll right to top
- $( 'html' ).removeClass( 'navigationEnabled' );
- }
+ this.stack.push( overlay );
+ $( 'html' ).addClass( 'overlay' ).
+ removeClass( 'navigationEnabled' );
- // FIXME: redo using view
- function createOverlay( heading, contents, options ) {
- options = options || {};
- var overlay = document.getElementById( mfePrefix + 'overlay' );
- M.history.pushState( options.hash || '#mw-mf-overlay' );
- showOverlay();
- $( overlay ).empty();
- $( '<div class="header">' ).appendTo( '#' + mfePrefix +
'overlay' );
- $( '<button id="close"></button>' ).text( mw.msg(
'mobile-frontend-overlay-escape' ) ).
- addClass( 'escapeOverlay' ).
- click( closeOverlay ).appendTo( '#' + mfePrefix +
'overlay .header' );
- if( typeof heading === 'string' ) {
- heading = $( '<h2 />' ).text( heading );
+ // skip the URL bar if possible
+ window.scrollTo( 0, 1 );
}
- $( heading ).appendTo( '#' + mfePrefix + 'overlay .header' );
- $( overlay ).append( contents );
- $( overlay ).find( '.close' ).click( closeOverlay );
+ };
- return overlay;
- }
+ Overlay = View.extend( {
+ defaults: {
+ heading: '',
+ content: '',
+ closeMsg: mw.msg( 'mobile-frontend-overlay-escape' )
+ },
+ template: M.template.get( 'overlay' ),
+ className: 'mw-mf-overlay',
+ initialize: function() {
+ var self = this;
+ this.isOpened = false;
+ this.$( '.cancel' ).click( function( ev ) {
+ ev.preventDefault();
+ self.hide();
+ self.isOpened = false;
+ M.emit( 'overlay-closed' );
+ } );
+ },
+ show: function() {
+ this.$el.appendTo( 'body' );
+ this.scrollTop = document.body.scrollTop;
+ if ( !this.isOpened ) {
+ this.isOpened = true;
+ M.emit( 'overlay-opened', this );
+ }
+ },
+ hide: function() {
+ this.$el.detach();
+ }
+ } );
function getPageMenu() {
return $( '#mw-mf-menu-page' )[ 0 ];
@@ -110,7 +140,7 @@
}
function init() {
- var id = mfePrefix + 'overlay',
+ var manager,
search = document.getElementById( mfePrefix + 'search'
);
$( '#mw-mf-menu-main a' ).click( function() {
@@ -126,25 +156,12 @@
}
function openNavigation() {
- M.history.pushState( '#mw-mf-page-left' );
$( 'html' ).addClass( 'navigationEnabled' );
}
function closeNavigation() {
M.history.pushState( '#' );
$( 'html' ).removeClass( 'navigationEnabled' );
- }
-
- M.on( 'history-change', function( curPage ) {
- if ( curPage.hash === '#' || curPage.hash === '' ||
curPage.hash === '#_' ) {
- closeOverlay();
- closeNavigation();
- } else if ( curPage.hash === '#mw-mf-page-left' ) {
- toggleNavigation();
- }
- } );
- if ( !document.getElementById( id ) ) {
- $( '<div>' ).attr( 'id', id ).appendTo( document.body );
}
function toggleNavigation() {
@@ -180,17 +197,23 @@
u( document.documentElement ).removeClass(
'navigationEnabled' );
}
} );
+
+ // events
+ manager = new OverlayManager();
+ M.on( 'overlay-opened', function( overlay ) {
+ manager.push( overlay );
+ } );
+ M.on( 'overlay-closed', function() {
+ manager.pop();
+ } );
}
init();
return {
CtaDrawer: CtaDrawer,
- closeOverlay: closeOverlay,
- createOverlay: createOverlay,
- getPageMenu: getPageMenu,
- getOverlay: getOverlay,
- showOverlay: showOverlay
+ Overlay: Overlay,
+ getPageMenu: getPageMenu
};
}( jQuery ));
diff --git a/javascripts/modules/mf-cleanuptemplates.js
b/javascripts/modules/mf-cleanuptemplates.js
index 148caf9..54379a7 100644
--- a/javascripts/modules/mf-cleanuptemplates.js
+++ b/javascripts/modules/mf-cleanuptemplates.js
@@ -1,11 +1,16 @@
( function( M, $ ) {
var module = (function() {
- var nav = M.require( 'navigation' );
+ var nav = M.require( 'navigation' ),
+ Overlay = nav.Overlay,
+ CleanupOverlay = Overlay.extend( {
+ template: M.template.get( 'overlays/cleanup' )
+ } );
function run() {
var $metadata = $( '#content_0 table.ambox' ),
- $container = $( '<div class="content">' );
+ overlay,
+ $container = $( '<div>' );
$metadata.each( function() {
if ( $( this ).find( 'table.ambox' ).length === 0 ) {
@@ -13,8 +18,13 @@
}
} );
+ overlay = new CleanupOverlay( {
+ heading: M.message(
'mobile-frontend-meta-data-issues-header' ),
+ content: $container.html()
+ } );
+
$( '<a class="mw-mf-cleanup">' ).click( function() {
- nav.createOverlay( M.message(
'mobile-frontend-meta-data-issues-header' ), $container[ 0 ] );
+ overlay.show();
} ).text( M.message( 'mobile-frontend-meta-data-issues' )
).insertBefore( $metadata.eq( 0 ) );
$metadata.remove();
}
diff --git a/javascripts/modules/mf-languages.js
b/javascripts/modules/mf-languages.js
index a804d4a..f2aa887 100644
--- a/javascripts/modules/mf-languages.js
+++ b/javascripts/modules/mf-languages.js
@@ -1,6 +1,7 @@
( function( M, $ ) {
- var createOverlay = M.require( 'navigation' ).createOverlay;
+ var Overlay = M.require( 'navigation' ).Overlay,
+ LanguageOverlay;
function countAvailableLanguages() {
return $( '#mw-mf-language-selection a' ).length;
@@ -39,36 +40,39 @@
return $list.empty().append( $items );
}
+ LanguageOverlay = Overlay.extend( {
+ template: M.template.get( 'overlays/languages' ),
+ init: function() { // FIXME: rename to initialize when you can
inherit from parent.
+ var $footer, $lists;
+
+ $lists = this.$( 'ul' );
+ $footer = this.$( '.mw-mf-overlay-footer' );
+ $lists.find( 'a' ).on( 'click', function() {
+ M.emit( 'language-select', $( this ).attr(
'lang' ) );
+ } );
+ this.$( '.search' ).on( 'keyup', function() {
+ var matches = filterLists( $lists,
this.value.toLowerCase() );
+ if ( matches > 0 ) {
+ $footer.hide();
+ } else {
+ $footer.show();
+ }
+ } );
+ }
+ } );
+
function createLanguagePage() {
- var $wrapper = $( '<div class="languageOverlay">' ), $footer,
overlay, $lists,
- $search = $( '<div class="search-box">' );
-
- $( '<input type="search" class="search">' ).
- attr( 'placeholder', M.message(
'mobile-frontend-language-site-choose' ) ).
- appendTo( $search );
-
- $( '#mw-mf-language-variant-header' ).addClass(
'mw-mf-overlay-header' ).appendTo( $wrapper );
- $( '#mw-mf-language-variant-selection' ).appendTo( $wrapper );
- $( '#mw-mf-language-header' ).addClass( 'mw-mf-overlay-header'
).appendTo( $wrapper );
- sortList( $( '#mw-mf-language-selection' ) ).appendTo( $wrapper
);
-
- $footer = $( '<p>' ).addClass( 'mw-mf-overlay-footer'
).hide().appendTo( $wrapper );
- $( '<a>' ).attr( 'href', M.history.getArticleUrl(
'Special:MobileOptions/Language' ) ).
- text( mw.msg( 'mobile-frontend-language-footer' )
).appendTo( $footer );
-
- overlay = createOverlay( $search, $wrapper, { hash:
'#mw-mf-overlay-language' } );
- $lists = $( overlay ).find( 'ul' );
- $lists.find( 'a' ).on( 'click', function() {
- M.emit( 'language-select', $( this ).attr( 'lang' ) );
+ var overlay = new LanguageOverlay( {
+ placeholder: M.message(
'mobile-frontend-language-site-choose' ),
+ variantHeader: $( '#mw-mf-language-variant-header'
).html(),
+ variantItems: $( '#mw-mf-language-variant-selection'
).html(),
+ header: $( '#mw-mf-language-header' ).html(),
+ languageItems: sortList( $( '#mw-mf-language-selection'
) ).html(),
+ languagesLink: M.history.getArticleUrl(
'Special:MobileOptions/Language' ),
+ languagesText: mw.msg(
'mobile-frontend-language-footer' )
} );
- $( overlay ).find( '.search' ).on( 'keyup', function() {
- var matches = filterLists( $lists,
this.value.toLowerCase() );
- if ( matches > 0 ) {
- $footer.hide();
- } else {
- $footer.show();
- }
- } );
+ overlay.init();
+ overlay.show();
}
function initButton() {
diff --git a/javascripts/modules/mf-photo.js b/javascripts/modules/mf-photo.js
index eabc3c4..3760327 100644
--- a/javascripts/modules/mf-photo.js
+++ b/javascripts/modules/mf-photo.js
@@ -5,6 +5,20 @@
EventEmitter = M.require( 'eventemitter' ),
ProgressBar = M.require( 'widgets/progress-bar' ),
nav = M.require( 'navigation' ),
+ Overlay = nav.Overlay,
+ msg = mw.msg( 'mobile-frontend-photo-ownership', mw.config.get(
'wgUserName' ) ),
+ CopyrightOverlay = Overlay.extend( {
+ defaults: {
+ bulletPoints: [
+ { text: mw.msg(
'mobile-frontend-photo-ownership-bullet-one' ) },
+ { text: mw.msg(
'mobile-frontend-photo-ownership-bullet-two' ) },
+ { text: mw.msg(
'mobile-frontend-photo-ownership-bullet-three' ) }
+ ],
+ closeText: mw.msg(
'mobile-frontend-photo-ownership-confirm' ),
+ leadText: msg
+ },
+ template: M.template.get(
'overlays/photoCopyrightDialog' )
+ } ),
popup = M.require( 'notifications' ),
endpoint = mw.config.get( 'wgMFPhotoUploadEndpoint' ),
apiUrl = endpoint || M.getApiUrl(),
@@ -246,13 +260,19 @@
initialize: function() {
var self = this,
- $description = this.$( 'textarea' ),
- $submitButton = this.$( 'button.submit' );
+ $overlay, $description, $submitButton;
+
+ this.overlay = new Overlay( {
+ content: $( '<div>' ).html( this.$el ).html()
+ } );
+ $overlay = this.overlay.$el;
+
+ $description = $overlay.find( 'textarea' );
+ $submitButton = $overlay.find( 'button.submit' );
this.$description = $description;
// make license links open in separate tabs
- this.$( '.license a' ).attr( 'target', '_blank' );
-
+ $overlay.find( '.license a' ).attr( 'target', '_blank'
);
// use input event too, Firefox doesn't fire keyup on
many devices:
// https://bugzilla.mozilla.org/show_bug.cgi?id=737658
$description.on( 'keyup input', function() {
@@ -266,7 +286,7 @@
$submitButton.on( 'click', function() {
self.emit( 'submit' );
} );
- this.$( 'button.cancel' ).on( 'click', function() {
+ $overlay.find( 'button.cancel' ).on( 'click',
function() {
self.emit( 'cancel' );
} );
},
@@ -276,23 +296,14 @@
},
setImageUrl: function( url ) {
- var msg = mw.msg( 'mobile-frontend-photo-ownership',
- mw.config.get( 'wgUserName' ) ),
- data = {
- bulletPoints: [
- { text: mw.msg(
'mobile-frontend-photo-ownership-bullet-one' ) },
- { text: mw.msg(
'mobile-frontend-photo-ownership-bullet-two' ) },
- { text: mw.msg(
'mobile-frontend-photo-ownership-bullet-three' ) }
- ],
- closeText: mw.msg(
'mobile-frontend-photo-ownership-confirm' ),
- leadText: msg
- };
this.imageUrl = url;
- this.$( '.loading' ).remove();
- this.$( 'a.help' ).on( 'click', function() {
- nav.createOverlay( '', $(
M.template.get( 'photoCopyrightDialog' ).render( data ) ) );
- } );
- $( '<img>' ).attr( 'src', url ).prependTo( this.$(
'.photoPreview' ) );
+ this.overlay.$( '.loading' ).remove();
+ this.overlay.$( 'a.help' ).on( 'click', function( ev ) {
+ ev.preventDefault(); // avoid setting #
+ var overlay = new CopyrightOverlay();
+ overlay.show();
+ } );
+ $( '<img>' ).attr( 'src', url ).prependTo(
this.overlay.$( '.photoPreview' ) );
}
} );
@@ -423,15 +434,13 @@
preview.
on( 'cancel', function() {
self.log( { action:
'previewCancel' } );
- nav.closeOverlay();
} ).
on( 'submit', function() {
self.log( { action:
'previewSubmit' } );
self._submit();
} );
- // FIXME: replace if we make overlay an
object (and inherit from it?)
- nav.createOverlay( null, preview.$el );
+ preview.overlay.show();
// skip the URL bar if possible
window.scrollTo( 0, 1 );
@@ -452,7 +461,7 @@
progressPopup = new PhotoUploadProgress();
this.emit( 'start' );
- nav.closeOverlay();
+ this.preview.overlay.close();
popup.show( progressPopup.$el, 'locked noButton
loading' );
progressPopup.on( 'cancel', function() {
api.abort();
diff --git a/javascripts/modules/mf-tables.js b/javascripts/modules/mf-tables.js
index 23ed8f4..a7f4b95 100644
--- a/javascripts/modules/mf-tables.js
+++ b/javascripts/modules/mf-tables.js
@@ -29,7 +29,11 @@
$tr = $( '<tr class="overlayZoomer">'
).prependTo( $tc );
$( '<td>' ).attr( 'colspan', colspan
).click( function() {
- nav.createOverlay( $( this
).text(), $container[ 0 ] );
+ var overlay = new nav.Overlay( {
+ heading: '<h2>' + $(
this ).text() + '</h2>',
+ content: $(
'<div>').append( $container ).html()
+ } );
+ overlay.show();
} ).text( M.message(
'mobile-frontend-table', tableId ) ).appendTo( $tr );
// make the vertical expando
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index f832df5..5de7bb6 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -83,34 +83,33 @@
overflow: hidden;
}
-#mw-mf-overlay {
- display: none;
-}
-
-#mw-mf-overlay li {
- text-align: left;
-}
-
-#mw-mf-overlay .mw-mf-overlay-footer a {
- display: inline;
-}
-
-.escapeOverlay {
- display: none;
-}
-
html.overlay {
+ .mw-mf-overlay {
+ display: block;
+ }
+
#mw-mf-viewport {
display: none;
}
+ #footer {
+ display: none !important;
+ }
+}
+
+.mw-mf-overlay {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: white;
+ z-index: 4;
+
a.escapeOverlay,
button.escapeOverlay {
display: block;
- }
-
- #footer {
- display: none !important;
}
div.languageOverlay ul,
@@ -122,13 +121,15 @@
}
}
}
-}
-.overlay #mw-mf-overlay {
- display: block;
-}
+ .mw-mf-overlay-header {
+ background-color: #F1F1F1;
+ }
-#mw-mf-overlay {
+ li {
+ text-align: left;
+ }
+
div.content {
padding-bottom: 20px;
}
@@ -136,7 +137,7 @@
.content {
margin-top: @headingMarginTop;
- .close {
+ .cancel {
display: block;
margin: auto;
}
@@ -153,6 +154,23 @@
button {
margin: 0 5px;
+ }
+ }
+
+ .mw-mf-overlay-footer,
+ .mw-mf-overlay-header {
+ padding: 4px 8px 4px @searchBarPaddingLeft;
+
+ margin: 0;
+ font-size: 0.8em;
+ color: #666;
+ border-bottom: solid 1px #eee;
+ }
+
+ .mw-mf-overlay-footer {
+ a {
+ display: inline;
+ color: #002BB8;
}
}
}
@@ -263,26 +281,6 @@
#mw-mf-page-left,
#mw-mf-page-center {
min-height: 100%;
-}
-
-#mw-mf-overlay {
- .mw-mf-overlay-footer,
- .mw-mf-overlay-header {
- padding: 4px 8px 4px @searchBarPaddingLeft;
-
- margin: 0;
- font-size: 0.8em;
- color: #666;
- border-bottom: solid 1px #eee;
- }
-}
-
-#mw-mf-overlay .mw-mf-overlay-footer a {
- color: #002BB8;
-}
-
-#mw-mf-overlay .mw-mf-overlay-header {
- background-color: #F1F1F1;
}
.supportsPositionFixed #mw-mf-page-center {
diff --git a/less/modules/mf-search.less b/less/modules/mf-search.less
index 1f2a03b..f9346aa 100644
--- a/less/modules/mf-search.less
+++ b/less/modules/mf-search.less
@@ -40,6 +40,11 @@
width: 100%;
}
+// FIXME: This becomes redundant when search is rewritten as an overlay
+#remove-results {
+ display: none;
+}
+
.full-screen-search {
#mw-mf-header {
@@ -50,7 +55,7 @@
#results,
.search-box.notEmpty .clearlink,
- button.escapeOverlay {
+ #remove-results {
display: block;
}
diff --git a/less/modules/mf-tables.less b/less/modules/mf-tables.less
index 88fd456..c084f8c 100644
--- a/less/modules/mf-tables.less
+++ b/less/modules/mf-tables.less
@@ -1,6 +1,6 @@
@import "../mf-mixins.less";
-#mw-mf-overlay {
+.mw-mf-overlay {
.tableContent > table {
.boxshadow( -4px, 10px, 10px, -1px, #aaa );
}
diff --git a/less/specials/userlogin.less b/less/specials/userlogin.less
index 18a44f5..43fbb77 100644
--- a/less/specials/userlogin.less
+++ b/less/specials/userlogin.less
@@ -7,7 +7,7 @@
background-color: @overlayContentBackground;
}
- #mw-mf-overlay {
+ .mw-mf-overlay {
.header {
h1 {
padding-left: @overlayHeadingIndent;
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index 2e7cc11..5d56b33 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -53,30 +53,31 @@
height: 100%;
overflow: hidden;
}
-#mw-mf-overlay {
- display: none;
-}
-#mw-mf-overlay li {
- text-align: left;
-}
-#mw-mf-overlay .mw-mf-overlay-footer a {
- display: inline;
-}
-.escapeOverlay {
- display: none;
+html.overlay .mw-mf-overlay {
+ display: block;
}
html.overlay #mw-mf-viewport {
display: none;
}
-html.overlay a.escapeOverlay,
-html.overlay button.escapeOverlay {
- display: block;
-}
html.overlay #footer {
display: none !important;
}
-html.overlay div.languageOverlay ul li,
-html.overlay ul.content li {
+.mw-mf-overlay {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: white;
+ z-index: 4;
+}
+.mw-mf-overlay a.escapeOverlay,
+.mw-mf-overlay button.escapeOverlay {
+ display: block;
+}
+.mw-mf-overlay div.languageOverlay ul li,
+.mw-mf-overlay ul.content li {
color: #666;
border: none;
position: relative;
@@ -85,43 +86,46 @@
padding: 12px 40px;
font-size: 0.9em;
}
-html.overlay div.languageOverlay ul li a,
-html.overlay ul.content li a {
+.mw-mf-overlay div.languageOverlay ul li a,
+.mw-mf-overlay ul.content li a {
display: block;
text-decoration: none;
color: #666;
}
-html.overlay div.languageOverlay ul li a:active,
-html.overlay ul.content li a:active,
-html.overlay div.languageOverlay ul li a:hover,
-html.overlay ul.content li a:hover,
-html.overlay div.languageOverlay ul li a:visited,
-html.overlay ul.content li a:visited {
+.mw-mf-overlay div.languageOverlay ul li a:active,
+.mw-mf-overlay ul.content li a:active,
+.mw-mf-overlay div.languageOverlay ul li a:hover,
+.mw-mf-overlay ul.content li a:hover,
+.mw-mf-overlay div.languageOverlay ul li a:visited,
+.mw-mf-overlay ul.content li a:visited {
text-decoration: none;
color: #666;
}
-html.overlay div.languageOverlay ul li:hover,
-html.overlay ul.content li:hover {
+.mw-mf-overlay div.languageOverlay ul li:hover,
+.mw-mf-overlay ul.content li:hover {
background-color: #ACD1E9;
}
-html.overlay div.languageOverlay ul li.preferred,
-html.overlay ul.content li.preferred {
+.mw-mf-overlay div.languageOverlay ul li.preferred,
+.mw-mf-overlay ul.content li.preferred {
font-weight: bold;
}
-.overlay #mw-mf-overlay {
- display: block;
+.mw-mf-overlay .mw-mf-overlay-header {
+ background-color: #F1F1F1;
}
-#mw-mf-overlay div.content {
+.mw-mf-overlay li {
+ text-align: left;
+}
+.mw-mf-overlay div.content {
padding-bottom: 20px;
}
-#mw-mf-overlay .content {
+.mw-mf-overlay .content {
margin-top: 14pt;
}
-#mw-mf-overlay .content .close {
+.mw-mf-overlay .content .cancel {
display: block;
margin: auto;
}
-#mw-mf-overlay .buttonBar {
+.mw-mf-overlay .buttonBar {
position: fixed;
bottom: 0;
width: 100%;
@@ -130,8 +134,20 @@
background: #f3f3f3;
text-align: center;
}
-#mw-mf-overlay .buttonBar button {
+.mw-mf-overlay .buttonBar button {
margin: 0 5px;
+}
+.mw-mf-overlay .mw-mf-overlay-footer,
+.mw-mf-overlay .mw-mf-overlay-header {
+ padding: 4px 8px 4px 40px;
+ margin: 0;
+ font-size: 0.8em;
+ color: #666;
+ border-bottom: solid 1px #eee;
+}
+.mw-mf-overlay .mw-mf-overlay-footer a {
+ display: inline;
+ color: #002BB8;
}
.alert {
padding: 0.5em 1em;
@@ -224,20 +240,6 @@
#mw-mf-page-left,
#mw-mf-page-center {
min-height: 100%;
-}
-#mw-mf-overlay .mw-mf-overlay-footer,
-#mw-mf-overlay .mw-mf-overlay-header {
- padding: 4px 8px 4px 40px;
- margin: 0;
- font-size: 0.8em;
- color: #666;
- border-bottom: solid 1px #eee;
-}
-#mw-mf-overlay .mw-mf-overlay-footer a {
- color: #002BB8;
-}
-#mw-mf-overlay .mw-mf-overlay-header {
- background-color: #F1F1F1;
}
.supportsPositionFixed #mw-mf-page-center {
min-height: none !important;
diff --git a/stylesheets/modules/mf-search.css
b/stylesheets/modules/mf-search.css
index dee7618..5cbd084 100644
--- a/stylesheets/modules/mf-search.css
+++ b/stylesheets/modules/mf-search.css
@@ -35,6 +35,9 @@
display: none;
width: 100%;
}
+#remove-results {
+ display: none;
+}
.full-screen-search #mw-mf-header {
z-index: 2;
color: white;
@@ -47,7 +50,7 @@
}
.full-screen-search #results,
.full-screen-search .search-box.notEmpty .clearlink,
-.full-screen-search button.escapeOverlay {
+.full-screen-search #remove-results {
display: block;
}
.full-screen-search #mw-mf-page-left,
diff --git a/stylesheets/modules/mf-tables.css
b/stylesheets/modules/mf-tables.css
index 81d1b8d..246f21d 100644
--- a/stylesheets/modules/mf-tables.css
+++ b/stylesheets/modules/mf-tables.css
@@ -1,4 +1,4 @@
-#mw-mf-overlay .tableContent > table {
+.mw-mf-overlay .tableContent > table {
box-shadow: -4px 10px 10px -1px #aaaaaa;
}
#content table.expando {
diff --git a/stylesheets/specials/userlogin.css
b/stylesheets/specials/userlogin.css
index fa29e01..c6db02a 100644
--- a/stylesheets/specials/userlogin.css
+++ b/stylesheets/specials/userlogin.css
@@ -1,7 +1,7 @@
.specialPage.overlay body {
background-color: #ffffff;
}
-.specialPage.overlay #mw-mf-overlay .header h1 {
+.specialPage.overlay .mw-mf-overlay .header h1 {
padding-left: 0.4em;
}
#mw-mf-login .watermark,
diff --git a/templates/overlay.html b/templates/overlay.html
new file mode 100644
index 0000000..10f7993
--- /dev/null
+++ b/templates/overlay.html
@@ -0,0 +1,5 @@
+<div class="header">
+ <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ {{{heading}}}
+</div>
+{{{content}}}
diff --git a/templates/overlays/cleanup.html b/templates/overlays/cleanup.html
new file mode 100644
index 0000000..9271aa4
--- /dev/null
+++ b/templates/overlays/cleanup.html
@@ -0,0 +1,7 @@
+<div class="header">
+ <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <h2>{{heading}}</h2>
+</div>
+<div class="content">
+ {{{content}}}
+</div>
diff --git a/templates/overlays/languages.html
b/templates/overlays/languages.html
new file mode 100644
index 0000000..3e5d428
--- /dev/null
+++ b/templates/overlays/languages.html
@@ -0,0 +1,19 @@
+<div class="header">
+ <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <div class="search-box">
+ <input type="search" class="search"
placeholder="{{placeholder}}">
+ </div>
+</div>
+<div class="languageOverlay">
+ <p class="mw-mf-overlay-header">{{{variantHeader}}}</p>
+ <ul>
+ {{{variantItems}}}
+ </ul>
+ <p class="mw-mf-overlay-header">{{{header}}}</p>
+ <ul>
+ {{{languageItems}}}
+ </ul>
+ <p class="mw-mf-overlay-footer" style="display:none">
+ <a href="{{languagesLink}}">{{languagesText}}</a>
+ </p>
+</div>
diff --git a/templates/overlays/photoCopyrightDialog.html
b/templates/overlays/photoCopyrightDialog.html
new file mode 100644
index 0000000..e1f5e4b
--- /dev/null
+++ b/templates/overlays/photoCopyrightDialog.html
@@ -0,0 +1,13 @@
+<div class="header">
+ <button class="cancel escapeOverlay">{{closeMsg}}</button>
+</div>
+<div class="content">
+ <p>{{leadText}}</p>
+
+ <ul class="informative">
+ {{#bulletPoints}}
+ <li>{{text}}</li>
+ {{/bulletPoints}}
+ </ul>
+ <button class="cancel">{{closeText}}</button>
+</div>
diff --git a/templates/photoCopyrightDialog.html
b/templates/photoCopyrightDialog.html
deleted file mode 100644
index 734c1e1..0000000
--- a/templates/photoCopyrightDialog.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="content">
- <p>{{leadText}}</p>
-
- <ul class="informative">
- {{#bulletPoints}}
- <li>{{text}}</li>
- {{/bulletPoints}}
- </ul>
- <button class="close">{{closeText}}</button>
-</div>
diff --git a/tests/js/common/mf-navigation.js b/tests/js/common/mf-navigation.js
new file mode 100644
index 0000000..4fe2fc4
--- /dev/null
+++ b/tests/js/common/mf-navigation.js
@@ -0,0 +1,46 @@
+( function( nav, $ ) {
+
+module( 'MobileFrontend: mf-navigation.js', {} );
+
+test( 'Simple overlay', function() {
+ var overlay = new nav.Overlay( { heading: '<h2>Title</h2>', content:
'Text' } );
+ overlay.show();
+ strictEqual( overlay.$el[0].parentNode, document.body, 'In DOM' );
+ strictEqual( overlay.$el.html(), '<h2>Title</h2>/Text' );
+} );
+
+test( 'HTML overlay', function() {
+ var overlay = new nav.Overlay( {
+ heading: '<div>Awesome: <input></div>',
+ content: '<div class="content">YO</div>'
+ } );
+ strictEqual( overlay.$el.html(), '<div>Awesome: <input></div>/<div
class="content">YO</div>' );
+} );
+
+test( 'Close overlay', function() {
+ var overlay = new nav.Overlay( { heading: '<h2>Title</h2>', content:
'Text' } );
+ overlay.show();
+ overlay.hide();
+ strictEqual( overlay.$el[0].parentNode, null, 'No longer in DOM' );
+} );
+
+test( 'Stacked overlays', function() {
+ var overlay = new nav.Overlay( { heading: 'Overlay 1', content: 'Text'
} ),
+ overlayTwo = new nav.Overlay( { heading: 'Overlay 2', content:
'Text <button class="cancel">cancel</button>' } );
+ overlay.show();
+ overlayTwo.show();
+ strictEqual( $( 'html' ).hasClass( 'overlay' ), true, 'In overlay mode'
);
+ strictEqual( overlayTwo.$el.is( ':visible' ), true,
+ 'The second overlay is the active one' );
+ strictEqual( overlay.$el[0].parentNode, null,
+ 'The first overlay is no longer in the DOM' );
+
+ // now close the top stacked one...
+ overlayTwo.$( '.cancel' ).trigger( 'click' );
+ strictEqual( overlayTwo.$el[0].parentNode, null, 'No longer in DOM' );
+ strictEqual( overlay.$el[0].parentNode, document.body, 'Still in DOM' );
+ strictEqual( $( 'html' ).hasClass( 'overlay' ), true, 'Still in overlay
mode' );
+} );
+
+
+} )( mw.mobileFrontend.require( 'navigation' ), jQuery );
diff --git a/tests/js/fixtures-templates.js b/tests/js/fixtures-templates.js
index f49f256..5f30089 100644
--- a/tests/js/fixtures-templates.js
+++ b/tests/js/fixtures-templates.js
@@ -2,3 +2,5 @@
mw.mobileFrontend.template.add( 'leadPhoto', '' );
mw.mobileFrontend.template.add( 'photoUploader', '' );
mw.mobileFrontend.template.add( 'ctaDrawer', '' );
+mw.mobileFrontend.template.add( 'overlay', '{{{heading}}}/{{{content}}}' );
+mw.mobileFrontend.template.add( 'overlays/photoCopyrightDialog', '' );
--
To view, visit https://gerrit.wikimedia.org/r/55397
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I0a5ff8fa2c2b7c3c68276bead268b25a0c54a7c8
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Ori.livneh <[email protected]>
Gerrit-Reviewer: awjrichards <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
