Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/115188
Change subject: [WIP] Flip the arrow position if the popup is flipped
......................................................................
[WIP] Flip the arrow position if the popup is flipped
- Only text popups
- Portrait popups
- Landscape popups
Change-Id: Ib30bb7f5ff9857f6a470b07db05ab50fb0ca8a5d
---
M resources/ext.popups.core.js
M resources/ext.popups.core.less
2 files changed, 70 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Popups
refs/changes/88/115188/1
diff --git a/resources/ext.popups.core.js b/resources/ext.popups.core.js
index 2d82c52..c9ec344 100644
--- a/resources/ext.popups.core.js
+++ b/resources/ext.popups.core.js
@@ -110,10 +110,30 @@
var $thumbnail;
if ( tall ) {
- // This is to mask and center the image within
a given size
- $thumbnail = $( '<div>' )
- .addClass( 'mwe-popups-is-tall' )
- .css( 'background-image', 'url(' +
thumbnail.source + ')');
+ if ( supportsSVG() ) {
+ $thumbnail = $( '<image>' )
+ .addClass(
'mwe-popups-is-not-tall' )
+ .attr( {
+ 'xlink:href':
thumbnail.source,
+ x: 0,
+ y: ( thumbnail.height >
260) ? ( ( thumbnail.height - 260 ) / -2 ) : thumbnail.height,
+ width: thumbnail.width,
+ height: thumbnail.height
+ } );
+
+ $thumbnail = $( '<svg>' )
+ .attr( {
+ xmlns:
'http://www.w3.org/2000/svg',
+ viewBox: '0 0 203 265',
+ width: 203,
+ height: 265
+ } )
+ .append( $thumbnail );
+ } else {
+ $thumbnail = $( '<div>' )
+ .addClass( 'mwe-popups-is-tall'
)
+ .css( 'background-image',
'url(' + thumbnail.source + ')');
+ }
} else {
if ( supportsSVG() ) {
$thumbnail = $( '<image>' )
@@ -156,7 +176,8 @@
function createBox ( href, $el ) {
var bar = cache[ href ],
offsetTop = $el.offset().top + $el.height() + 9,
- offsetLeft = $el.offset().left;
+ offsetLeft = $el.offset().left,
+ flipped = false;
elTime = mw.now();
elAction = 'dismissed';
@@ -172,6 +193,7 @@
if ( offsetLeft > ( $( window ).width() / 2 ) ) {
offsetLeft = offsetLeft + $el.width();
offsetLeft -= ( !bar.tall ) ? 300 : 450;
+ flipped = true;
}
$box
@@ -179,7 +201,8 @@
.detach()
// avoid .empty() to keep event handlers
.end()
- .removeClass( 'mwe-popups-is-tall
mwe-popups-is-not-tall mwe-popups-no-image-tri mwe-popups-image-tri' )
+ .removeClass( 'mwe-popups-is-tall
mwe-popups-is-not-tall mwe-popups-no-image-tri mwe-popups-image-tri flipped' )
+ .toggleClass( 'flipped', flipped )
// Add border triangle if there is no image or
its landscape
.toggleClass( 'mwe-popups-no-image-tri', (
!bar.thumbnail || bar.tall ) )
// If theres an image and the popup is portrait
do the SVG stuff
@@ -197,6 +220,17 @@
// Elements get added to the DOM and not to the
screen because of different namespaces of HTML and SVG
// More information and workarounds here -
http://stackoverflow.com/a/13654655/366138
.html( $box.html() );
+
+ if ( flipped && bar.thumbnail ) {
+ if ( !bar.tall ) {
+ $box.find( 'image' )[0].setAttribute(
'clip-path', 'url(#mwe-popups-mask-flip)' );
+ } else {
+ $box
+ .removeClass(
'mwe-popups-no-image-tri' )
+ .find( 'image'
)[0].setAttribute( 'clip-path', 'url(#mwe-popups-landscape-mask)' );
+ }
+ }
+
$el
.off( 'mouseleave', leaveInactive )
.on( 'mouseleave', leaveActive );
@@ -412,7 +446,17 @@
$svg = $( '<div>' )
.attr( 'id', 'mwe-popups-svg' )
.appendTo( document.body )
- .html( '<svg width="0"
height="0"><defs><clippath id="mwe-popups-mask"><polygon points="0 8, 10 8, 18
0, 26 8, 1000 8, 1000 1000, 0 1000"/></clippath></defs></svg>' );
+ .html( '<svg width="0" height="0">' +
+ '<defs><clippath
id="mwe-popups-mask">' +
+ '<polygon points="0 8,
10 8, 18 0, 26 8, 1000 8, 1000 1000, 0 1000"/></clippath>' +
+ '</defs>' +
+ '<defs><clippath
id="mwe-popups-mask-flip">' +
+ '<polygon points="0 8,
274 8, 282 0, 290 8, 1000 8, 1000 1000, 0 1000"/></clippath>' +
+ '</defs>' +
+ '<defs><clippath
id="mwe-popups-landscape-mask">' +
+ '<polygon points="0 8,
174 8, 182 0, 190 8, 1000 8, 1000 1000, 0 1000"/></clippath>' +
+ '</defs>' +
+ '</svg>' );
}
} );
diff --git a/resources/ext.popups.core.less b/resources/ext.popups.core.less
index 42db1be..94e142c 100644
--- a/resources/ext.popups.core.less
+++ b/resources/ext.popups.core.less
@@ -125,6 +125,18 @@
}
}
+ &.flipped.mwe-popups-no-image-tri {
+ &:after {
+ left: initial;
+ right: 11px;
+ }
+
+ &:before {
+ left: initial;
+ right: 10px;
+ }
+ }
+
&.mwe-popups-image-tri {
border-top: none;
@@ -132,4 +144,11 @@
margin-top: -8px;
}
}
+
+ &.flipped.mwe-popups-is-tall {
+ > a > svg {
+ margin: 0;
+ margin-top: -9px;
+ }
+ }
}
--
To view, visit https://gerrit.wikimedia.org/r/115188
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib30bb7f5ff9857f6a470b07db05ab50fb0ca8a5d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Popups
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
