TheDJ has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/331942 )
Change subject: Maps: Improve frame genertion
......................................................................
Maps: Improve frame genertion
- Fix missing tnone
- Don't use align classes for fullwidth maps
- Closer emulation of structure as images use
- No div for none aligned content
- Makes sure we don't need to redefine floatleft/right and center
- Use a single consistent 'content' part for framed and frameless
- Use a <img> element inside the <a> link.
- <img> are one of few elements that feature replacement content.
- replacement content automagically can keep aspect ratio using
content-fit, which is nice for mobile.
- Now matches scaling logic for MF
- Make more sense HTML wise
TODO:
- I don't understand some of that 'staticframe' stuff
- lots of commented code should be made actionable
- probably need to fix the VE editor now.
Change-Id: I9909e47ecc430f384d0fc7166ebb555c093e936a
---
M includes/Tag/MapFrame.php
M modules/staticframe/staticframe.js
M styles/kartographer.less
3 files changed, 21 insertions(+), 59 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Kartographer
refs/changes/42/331942/1
diff --git a/includes/Tag/MapFrame.php b/includes/Tag/MapFrame.php
index 38627eb..7ce9767 100644
--- a/includes/Tag/MapFrame.php
+++ b/includes/Tag/MapFrame.php
@@ -45,6 +45,7 @@
'left' => 'tleft',
'center' => 'center',
'right' => 'tright',
+ 'none' => 'tnone',
];
$caption = $this->getText( 'text', null );
@@ -158,7 +159,9 @@
$containerClass = 'mw-kartographer-container';
if ( $fullWidth ) {
$containerClass .= ' mw-kartographer-full';
+ $this->align = 'none';
}
+ $attrs['class'] .= " {$containerClass}";
$bgUrl =
"{$wgKartographerMapServer}/img/{$this->mapStyle},{$staticZoom},{$staticLat},{$staticLon},{$staticWidth}x{$this->height}.png";
if ( $this->showGroups ) {
@@ -167,27 +170,31 @@
$bgUrl .=
"?domain={$wgServerName}&title={$title}&groups={$groupList}";
}
- $attrs['style'] = "background-image: url({$bgUrl});";
+ $mapElement = Html::rawElement( 'a', $attrs,
+ Html::rawElement( 'img', [
+ 'src' => $bgUrl,
+ 'width' => $staticWidth,
+ 'height' =>
$this->height,
+ ] ) );
if ( !$framed ) {
- $attrs['style'] .= " width: {$width}; height:
{$height};";
- $attrs['class'] .= " {$containerClass}
{$alignClasses[$this->align]}";
-
- return Html::rawElement( 'a', $attrs );
+ if ( $this->align === 'none' ) {
+ return $mapElement;
+ }
+ return Html::rawElement( 'div', [
+ 'class' =>
"{$alignClasses[$this->align]}"
+ ], $mapElement );
}
-
- $attrs['style'] .= " height: {$height};";
- $containerClass .= " thumb {$thumbAlignClasses[$this->align]}";
$captionFrame = Html::rawElement( 'div', [ 'class' =>
'thumbcaption' ],
$this->parser->recursiveTagParse( $caption ) );
- $mapDiv = Html::rawElement( 'a', $attrs );
-
- return Html::rawElement( 'div', [ 'class' => $containerClass ],
+ return Html::rawElement( 'div', [
+ 'class' => "thumb
{$thumbAlignClasses[$this->align]}"
+ ],
Html::rawElement( 'div', [
'class' => 'thumbinner',
'style' => "width: {$width};",
- ], $mapDiv . $captionFrame ) );
+ ], $mapElement . $captionFrame ) );
}
}
diff --git a/modules/staticframe/staticframe.js
b/modules/staticframe/staticframe.js
index ac36428..7cd23de 100644
--- a/modules/staticframe/staticframe.js
+++ b/modules/staticframe/staticframe.js
@@ -72,8 +72,7 @@
maps.pop().remove();
} );
- // need to find
.mw-kartographer-interactive:not(.mw-kartographer-map) for backward
compatibility
- $content.find( '.mw-kartographer-map,
.mw-kartographer-interactive:not(.mw-kartographer-map)' ).each( function (
index ) {
+ $content.find( '.mw-kartographer-map' ).each( function ( index
) {
var container = this,
$container = $( container ),
diff --git a/styles/kartographer.less b/styles/kartographer.less
index 2ff1141..bce1a89 100644
--- a/styles/kartographer.less
+++ b/styles/kartographer.less
@@ -68,15 +68,8 @@
.mw-kartographer-map {
position: relative;
- background-position: center;
- background-repeat: no-repeat;
- background-size: contain;
- display: block;
+ display: inline-block;
font-size: 14px;
-
- &.mw-kartographer-link {
- display: block;
- }
&.leaflet-container {
background-size: contain;
@@ -90,43 +83,6 @@
margin-right: 0;
}
-.mw-kartographer-container:not(.mw-kartographer-full) {
- max-width: 100%;
-
- /* Fixes `align=center` use case */
- &.center {
- margin-left: auto;
- margin-right: auto;
- display: block;
- }
-
- &.thumb {
- .thumbinner {
- max-width: 100%;
-
- > .mw-kartographer-map {
- width: 100%;
- }
- }
- }
-}
-
.mw-kartographer-container.mw-kartographer-full {
width: 100%;
-}
-
-// Define `.floatright` and `.floatleft` for `a` elements.
-// FIXME: we should not have to define this here.
-/* @noflip */
-a.floatright {
- float: right;
- clear: right;
- margin: 0 0 1em 1em;
-}
-
-/* @noflip */
-a.floatleft {
- float: left;
- clear: left;
- margin: 0.3em 0.5em 0.5em 0;
}
--
To view, visit https://gerrit.wikimedia.org/r/331942
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I9909e47ecc430f384d0fc7166ebb555c093e936a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Kartographer
Gerrit-Branch: master
Gerrit-Owner: TheDJ <hartman.w...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
