Sophivorus has uploaded a new change for review.
https://gerrit.wikimedia.org/r/309098
Change subject: Rewrite extension so that images are not preloaded
......................................................................
Rewrite extension so that images are not preloaded
Before, all full-size images were preloaded and hidden so that when
a user hovered over a thumbnail, the corresponding full-size image
would be instantly shown. This had the huge problem of requiring to
preload all images even if no thumbnail was ever hovered. Now, images
are only loaded if a user hovers over the thumbnail.
Change-Id: I5225319d44f1db133f0c48de1ab0cb1117a75f72
---
M HoverGallery.css
M HoverGallery.js
M HoverGallery.php
M extension.json
4 files changed, 56 insertions(+), 59 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Hovergallery
refs/changes/98/309098/1
diff --git a/HoverGallery.css b/HoverGallery.css
index 34d2aa0..1a225ff 100644
--- a/HoverGallery.css
+++ b/HoverGallery.css
@@ -1,7 +1,8 @@
-div.hovergallery img {
+.hoverimage {
border-radius: 5px;
- display: none;
pointer-events: none;
position: fixed;
- z-index: 99;
+ top: 20px;
+ left: 20px;
+ z-index: 2147483647; /* Max possible value */
}
\ No newline at end of file
diff --git a/HoverGallery.js b/HoverGallery.js
index 6d678ec..b405ee4 100644
--- a/HoverGallery.js
+++ b/HoverGallery.js
@@ -1,43 +1,37 @@
-jQuery( function ( $ ) {
+var HoverGallery = {
- var thumbs, mouseX, mouseY, clientWidth, clientHeight, fullImage,
fullImageWidth, fullImageHeight, fullImageX, fullImageY;
+ init: function () {
+ HoverGallery.bind();
+ },
- // 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' );
+ bind: function () {
+ $( '.gallery img' ).hover( HoverGallery.onMouseEnter,
HoverGallery.onMouseLeave );
+ },
- thumbs.mouseenter( function ( event ) {
+ onMouseEnter: function ( event ) {
+ var gallery = $( this ).closest( '.gallery' ),
+ fileUrls = gallery.data( 'hovergallery-fileurls' ),
+ maxHoverWidth = gallery.data(
'hovergallery-maxhoverwidth' ),
+ maxHoverHeight = gallery.data(
'hovergallery-maxhoverheight' );
// Determine which of the thumbs is it
- var thumbIndex = $.inArray( this, thumbs );
+ var thumbs = $( 'img', gallery ),
+ thumbIndex = $.inArray( this, thumbs );
- // 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;
-
- // Now the position of the top left corner of the full image
- fullImageX = mouseX + 10;
- fullImageY = mouseY + 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;
- }
+ // Get the corresponding URL and build the image
+ var url = fileUrls[ thumbIndex ],
+ image = $( '<img>' ).attr( 'src', url ).addClass(
'hoverimage' ).css({
+ 'max-width': maxHoverWidth + 'px',
+ 'max-height': maxHoverHeight + 'px'
+ });
// Show the image
- fullImage.css({ 'top': fullImageY, 'left': fullImageX }).show();
+ $( 'body' ).append( image );
+ },
- }).mouseleave(function(){
- fullImage.hide();
- });
-}( jQuery ) );
\ No newline at end of file
+ onMouseLeave: function ( event ) {
+ $( 'body .hoverimage' ).remove();
+ }
+};
+
+$( HoverGallery.init );
\ No newline at end of file
diff --git a/HoverGallery.php b/HoverGallery.php
index 5b0be9f..2c9ee5a 100644
--- a/HoverGallery.php
+++ b/HoverGallery.php
@@ -2,20 +2,20 @@
class HoverGallery {
- public static function onBeforePageDisplay( &$output ) {
- $output->addModules( 'ext.HoverGallery' );
+ static function onBeforePageDisplay( OutputPage &$out, Skin &$skin ) {
+ $out->addModules( 'ext.HoverGallery' );
return true;
}
- public static function onParserFirstCallInit( &$parser ) {
+ static function onParserFirstCallInit( Parser &$parser ) {
$parser->setHook( 'hovergallery', 'HoverGallery::render' );
return true;
}
- public static function render( $input, array $ARGS, Parser $parser,
PPFrame $frame ) {
+ static function render( $input, array $ARGS, Parser $parser, PPFrame
$frame ) {
- $maxhoverwidth = '';
- $maxhoverheight = '';
+ $maxhoverwidth = 640;
+ $maxhoverheight = 640;
if ( array_key_exists( 'maxhoversize', $ARGS ) ) {
$maxhoverwidth = $ARGS['maxhoversize'];
$maxhoverheight = $ARGS['maxhoversize'];
@@ -25,22 +25,24 @@
}
if ( array_key_exists( 'maxhoverheight', $ARGS ) ) {
$maxhoverheight = $ARGS['maxhoverheight'];
- }
-
- $normalGallery = $parser->recursiveTagParse( '<gallery>' .
$input . '</gallery>' );
-
- $hiddenGallery = '<div class="hovergallery">';
- $FILENAMES = explode( PHP_EOL, trim( $input ) );
- $FILENAMES = array_filter( $FILENAMES );
- foreach ( $FILENAMES as $filename ) {
- if ( $maxhoverwidth or $maxhoverheight ) {
- $hiddenGallery .= $parser->recursiveTagParse(
'[[' . $filename . '|' . $maxhoverwidth . 'x' . $maxhoverheight . 'px]]' );
- } else {
- $hiddenGallery .= $parser->recursiveTagParse(
'[[' . $filename . ']]' );
- }
}
- $hiddenGallery .= '</div>';
- return $normalGallery . $hiddenGallery;
+ $FILEURLS = array();
+ $FILENAMES = array_filter( explode( PHP_EOL, trim( $input ) ) );
+ foreach ( $FILENAMES as $filename ) {
+ $title = Title::newFromText( $filename );
+ $file = wfLocalFile( $title );
+ $FILEURLS[] = $file->getFullUrl();
+ }
+
+ $fileUrls = json_encode( $FILEURLS );
+ $fileUrls = htmlspecialchars( $fileUrls, ENT_QUOTES );
+
+ $gallery = '<gallery
+ data-hovergallery-maxhoverwidth="' . $maxhoverwidth . '"
+ data-hovergallery-maxhoverheight="' . $maxhoverheight . '"
+ data-hovergallery-fileurls="' . $fileUrls . '">' . $input .
'</gallery>';
+
+ return $parser->recursiveTagParse( $gallery );
}
}
\ No newline at end of file
diff --git a/extension.json b/extension.json
index d057c26..97183ed 100644
--- a/extension.json
+++ b/extension.json
@@ -1,6 +1,6 @@
{
"name": "HoverGallery",
- "version": "0.5",
+ "version": "1.0",
"author": "[http://mediawiki.org/wiki/User:Felipe_Schenone Felipe
Schenone]",
"url": "https://www.mediawiki.org/wiki/Extension:HoverGallery";,
"descriptionmsg": "hovergallery-desc",
--
To view, visit https://gerrit.wikimedia.org/r/309098
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5225319d44f1db133f0c48de1ab0cb1117a75f72
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Hovergallery
Gerrit-Branch: master
Gerrit-Owner: Sophivorus <scheno...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
