Luis Felipe Schenone has uploaded a new change for review.
https://gerrit.wikimedia.org/r/181259
Change subject: Hover images never leave the screen now
......................................................................
Hover images never leave the screen now
Change-Id: I01caf7a665a9a1ef92d1fda9de6e2ab8f94f6fbb
---
M HoverGallery.body.php
M HoverGallery.css
M HoverGallery.js
M HoverGallery.php
4 files changed, 51 insertions(+), 49 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Hovergallery
refs/changes/59/181259/1
diff --git a/HoverGallery.body.php b/HoverGallery.body.php
index 3508b7f..c6db884 100644
--- a/HoverGallery.body.php
+++ b/HoverGallery.body.php
@@ -8,32 +8,36 @@
}
public static function setParserHook( &$parser ) {
- $parser->setHook( 'hovergallery', 'HoverGallery::renderGallery'
);
+ $parser->setHook( 'hovergallery', 'HoverGallery::render' );
return true;
}
- public static function renderGallery( $input, array $ARGS, Parser
$parser, PPFrame $frame ) {
+ public static function render( $input, array $ARGS, Parser $parser,
PPFrame $frame ) {
- $maxhoverwidth = '100%';
- $maxhoverheight = '100%';
- if ( array_key_exists( 'hoversize', $ARGS ) ) {
- $maxhoverwidth = $ARGS['hoversize'] . 'px';
- $maxhoverheight = $ARGS['hoversize'] . 'px';
+ $maxhoverwidth = '';
+ $maxhoverheight = '';
+ if ( array_key_exists( 'maxhoversize', $ARGS ) ) {
+ $maxhoverwidth = $ARGS['maxhoversize'];
+ $maxhoverheight = $ARGS['maxhoversize'];
}
if ( array_key_exists( 'maxhoverwidth', $ARGS ) ) {
- $maxhoverwidth = $ARGS['maxhoverwidth'] . 'px';
+ $maxhoverwidth = $ARGS['maxhoverwidth'];
}
if ( array_key_exists( 'maxhoverheight', $ARGS ) ) {
- $maxhoverheight = $ARGS['maxhoverheight'] . 'px';
+ $maxhoverheight = $ARGS['maxhoverheight'];
}
$normalGallery = $parser->recursiveTagParse( '<gallery>' .
$input . '</gallery>' );
- $hiddenGallery = '<div class="hover-gallery">';
- $FILENAMES = explode( "\n", $input );
+ $hiddenGallery = '<div class="hovergallery">';
+ $FILENAMES = explode( PHP_EOL, trim( $input ) );
$FILENAMES = array_filter( $FILENAMES );
foreach ( $FILENAMES as $filename ) {
- $hiddenGallery .= $parser->recursiveTagParse( '[[' .
$filename . ']]' );
+ if ( $maxhoverwidth or $maxhoverheight ) {
+ $hiddenGallery .= $parser->recursiveTagParse(
'[[' . $filename . '|' . $maxhoverwidth . 'x' . $maxhoverheight . 'px]]' );
+ } else {
+ $hiddenGallery .= $parser->recursiveTagParse(
'[[' . $filename . ']]' );
+ }
}
$hiddenGallery .= '</div>';
diff --git a/HoverGallery.css b/HoverGallery.css
index 5008bcd..34d2aa0 100644
--- a/HoverGallery.css
+++ b/HoverGallery.css
@@ -1,6 +1,7 @@
-div.hover-gallery img {
+div.hovergallery img {
border-radius: 5px;
display: none;
+ pointer-events: none;
position: fixed;
z-index: 99;
}
\ No newline at end of file
diff --git a/HoverGallery.js b/HoverGallery.js
index 76f9a34..b6b2af3 100644
--- a/HoverGallery.js
+++ b/HoverGallery.js
@@ -1,45 +1,43 @@
-(function ($) {
- $(document).ready(function(){
+$( function () {
- var thumbs, mouseX, mouseY, clientWidth, clientHeight,
fullImage, fullImageX, fullImageY, fullImageWidth, fullImageHeight;
+ var thumbs, mouseX, mouseY, clientWidth, clientHeight, fullImage,
fullImageWidth, fullImageHeight, fullImageX, fullImageY, fullImageWidth,
fullImageHeight;
- // Get all the thumbnails
- // The normal gallery is right before the hidden gallery, so
just move to it and select all the images it contains
- thumbs = $('div.hover-gallery').prev().find('img');
+ // Get all the thumbnails
+ // The normal gallery is right before the hidden gallery, so just move
to it and select all the images it contains
+ thumbs = $( 'div.hovergallery' ).prev().find( 'img' );
- thumbs.mousemove(function(event){
+ thumbs.mouseenter( function ( event ) {
- // Determine which of the thumbs is it
- var thumbIndex = $.inArray( this, thumbs );
+ // Determine which of the thumbs is it
+ var thumbIndex = $.inArray( this, thumbs );
- // Get the corresponding full-size image
- fullImage = $('div.hover-gallery').children().eq(
thumbIndex ).children();
+ // Get the corresponding full-size image, and its width and
height
+ fullImage = $( 'div.hovergallery' ).children().eq( thumbIndex
).children();
- // Calculate the position of the mouse
- mouseX = event.clientX;
- mouseY = event.clientY;
+ // Calculate the position of the mouse
+ mouseX = event.clientX;
+ mouseY = event.clientY;
- // Now the position of the top left corner of the full
image
- fullImageX = mouseX + 10;
- fullImageY = mouseY + 10;
+ // Now the position of the top left corner of the full image
+ fullImageX = mouseX + 10;
+ fullImageY = mouseY + 10;
- // If the mouse is very near the border, move the full
image to the other side
- clientWidth = document.body.clientWidth;
- clientHeight = document.body.clientHeight;
- fullImageWidth = fullImage.width();
- fullImageHeight = fullImage.height();
- if ( mouseX + fullImageWidth > clientWidth ) {
- fullImageX = mouseX - fullImageWidth - 10;
- }
- if ( mouseY + fullImageHeight > clientHeight ) {
- fullImageY = mouseY - fullImageHeight - 10;
- }
+ // Make sure the image doesnt go off the screen
+ clientWidth = document.body.clientWidth;
+ clientHeight = document.body.clientHeight;
+ fullImageWidth = fullImage.width();
+ fullImageHeight = fullImage.height();
+ if ( mouseX + fullImageWidth > clientWidth ) {
+ fullImageX = 20 + mouseX + fullImageWidth - clientWidth;
+ }
+ if ( mouseY + fullImageHeight > clientHeight ) {
+ fullImageY = 20 + mouseY + fullImageHeight -
clientHeight;
+ }
- // Show the image
- fullImage.css({ 'top': fullImageY, 'left': fullImageX
}).show();
+ // Show the image
+ fullImage.css({ 'top': fullImageY, 'left': fullImageX }).show();
- }).mouseleave(function(){
- fullImage.hide();
- });
+ }).mouseleave(function(){
+ fullImage.hide();
});
-}(jQuery));
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/HoverGallery.php b/HoverGallery.php
index bedbb1b..f30e2e2 100644
--- a/HoverGallery.php
+++ b/HoverGallery.php
@@ -4,7 +4,7 @@
'path' => __FILE__,
'name' => 'HoverGallery',
'descriptionmsg' => 'hovergallery-desc',
- 'version' => 0.2,
+ 'version' => '0.3',
'author' => 'Luis Felipe Schenone',
'url' => 'https://www.mediawiki.org/wiki/Extension:HoverGallery',
);
@@ -12,7 +12,6 @@
$wgResourceModules['ext.HoverGallery'] = array(
'scripts' => 'HoverGallery.js',
'styles' => 'HoverGallery.css',
- 'position' => 'top',
'localBasePath' => __DIR__,
'remoteExtPath' => 'HoverGallery',
);
--
To view, visit https://gerrit.wikimedia.org/r/181259
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I01caf7a665a9a1ef92d1fda9de6e2ab8f94f6fbb
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Hovergallery
Gerrit-Branch: master
Gerrit-Owner: Luis Felipe Schenone <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
