jenkins-bot has submitted this change and it was merged.
Change subject: Make map optionally responsive using only CSS
......................................................................
Make map optionally responsive using only CSS
Using a couple of extra wrappers we can make the map
shrink to fit its container, and maintain its original
aspect ratio.
For now only do this in MobileFrontend, but there's no
reason we couldn't do this on desktop if desired.
Bug: T133619
Change-Id: Ic96ef6e88e4042068c6541d65c951857b331e30b
---
M modules/kartographer.js
M modules/ve-maps/ve.dm.MWMapsNode.js
M styles/kartographer.less
3 files changed, 116 insertions(+), 10 deletions(-)
Approvals:
Yurik: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/kartographer.js b/modules/kartographer.js
index 9782318..793d996 100644
--- a/modules/kartographer.js
+++ b/modules/kartographer.js
@@ -75,17 +75,26 @@
*/
mw.kartographer.createMap = function ( container, data ) {
var map,
- style = data.style || mw.config.get(
'wgKartographerDfltStyle' );
+ $container = $( container ),
+ style = data.style || mw.config.get(
'wgKartographerDfltStyle' ),
+ width, height;
+
+ $container.addClass( 'mw-kartographer-map' );
map = L.map( container );
+
if ( !container.clientWidth ) {
+ // Get `max` properties in case the container was
wrapped
+ // with {@link #responsiveContainerWrap}.
+ width = $container.css( 'max-width' );
+ height = $container.css( 'max-height' );
+ width = ( !width || width === 'none' ) ?
$container.width() : width;
+ height = ( !height || height === 'none' ) ?
$container.height() : height;
+
// HACK: If the container is not naturally measurable,
try jQuery
// which will pick up CSS dimensions. T125263
/*jscs:disable disallowDanglingUnderscores */
- map._size = new L.Point(
- $( container ).width(),
- $( container ).height()
- );
+ map._size = new L.Point( width, height );
/*jscs:enable disallowDanglingUnderscores */
}
map.setView( [ data.latitude, data.longitude ], data.zoom );
@@ -320,8 +329,82 @@
return deferred.promise();
}
+ /**
+ * Wraps a map container to make it (and its map) responsive on
+ * mobile (MobileFrontend).
+ *
+ * The initial `mapContainer`:
+ *
+ * <div class="mw-kartographer mw-kartographer-interactive"
style="height: Y; width: X;">
+ * <!-- this is the component carrying Leaflet.Map -->
+ * </div>
+ *
+ * Becomes :
+ *
+ * <div class="mw-kartographer mw-kartographer-interactive
mw-kartographer-responsive" style="max-height: Y; max-width: X;">
+ * <div class="mw-kartographer-responder"
style="padding-bottom: (100*Y/X)%">
+ * <div>
+ * <!-- this is the component carrying Leaflet.Map -->
+ * </div>
+ * </div>
+ * </div>
+ *
+ * **Note:** the container that carries the map data remains the initial
+ * `mapContainer` passed in arguments. Its selector remains
`.mw-kartographer-interactive`.
+ * However it is now a sub-child that carries the map.
+ *
+ * **Note 2:** the CSS applied to these elements vary whether the map
width
+ * is absolute (px) or relative (%). The example above describes the
absolute
+ * width case.
+ *
+ * @param {HTMLElement} mapContainer Initial component to carry the map.
+ * @return {HTMLElement} New map container to carry the map.
+ */
+ function responsiveContainerWrap( mapContainer ) {
+ var $container = $( mapContainer ),
+ $responder, $map,
+ width = mapContainer.style.width,
+ isRelativeWidth = width.slice( -1 ) === '%',
+ height = +( mapContainer.style.height.slice( 0, -2 ) ),
+ containerCss, responderCss;
+
+ // Convert the value to a string.
+ width = isRelativeWidth ? width : +( width.slice( 0, -2 ) );
+
+ if ( isRelativeWidth ) {
+ containerCss = {};
+ responderCss = {
+ // The inner container must occupy the full
height
+ height: height
+ };
+ } else {
+ containerCss = {
+ // Remove explicitly set dimensions
+ width: '',
+ height: '',
+ // Prevent over-sizing
+ 'max-width': width,
+ 'max-height': height
+ };
+ responderCss = {
+ // Use padding-bottom trick to maintain
original aspect ratio
+ 'padding-bottom': ( 100 * height / width ) + '%'
+ };
+ }
+ $container.addClass( 'mw-kartographer-responsive' ).css(
containerCss );
+ $responder = $( '<div>' ).addClass( 'mw-kartographer-responder'
).css( responderCss );
+
+ $map = $( '<div>' );
+ $container.append( $responder.append( $map ) );
+ return $map[ 0 ];
+ }
+
+ /**
+ * This code will be executed once the article is rendered and ready.
+ */
mw.hook( 'wikipage.content' ).add( function ( $content ) {
- var mapsInArticle = [];
+ var mapsInArticle = [],
+ isMobile = mw.config.get( 'skin' ) === 'minerva';
$content.on( 'click', '.mw-kartographer-link', function ( ) {
var data = getMapData( this );
@@ -339,11 +422,17 @@
} );
$content.find( '.mw-kartographer-interactive' ).each( function
() {
var map,
- data = getMapData( this );
+ data = getMapData( this ),
+ container = this;
if ( data ) {
data.enableFullScreenButton = true;
- map = mw.kartographer.createMap( this, data );
+
+ if ( isMobile ) {
+ container = responsiveContainerWrap(
container );
+ }
+
+ map = mw.kartographer.createMap( container,
data );
map.doubleClickZoom.disable();
mapsInArticle.push( map );
diff --git a/modules/ve-maps/ve.dm.MWMapsNode.js
b/modules/ve-maps/ve.dm.MWMapsNode.js
index a51a0d4..8f4a754 100644
--- a/modules/ve-maps/ve.dm.MWMapsNode.js
+++ b/modules/ve-maps/ve.dm.MWMapsNode.js
@@ -68,8 +68,8 @@
height: dimensions.height
},
minDimensions: {
- width: 10,
- height: 10
+ width: 200,
+ height: 100
},
maxDimensions: {
width: 1000,
diff --git a/styles/kartographer.less b/styles/kartographer.less
index 14c2aec..7586d5a 100644
--- a/styles/kartographer.less
+++ b/styles/kartographer.less
@@ -1,5 +1,22 @@
.mw-kartographer {
display: inline-block;
+ min-width: 200px;
+}
+
+.mw-kartographer-responsive {
+ width: 100%;
+
+ .mw-kartographer-responder {
+ position: relative;
+ }
+
+ .mw-kartographer-map {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
}
.mw-kartographer-mapDialog-map {
--
To view, visit https://gerrit.wikimedia.org/r/285648
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ic96ef6e88e4042068c6541d65c951857b331e30b
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/Kartographer
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: JGirault <jgira...@wikimedia.org>
Gerrit-Reviewer: MaxSem <maxsem.w...@gmail.com>
Gerrit-Reviewer: Yurik <yu...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
