r103309 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r103308‎ | r103309 | r103310 >
Date:10:38, 16 November 2011
Author:hashar
Status:ok (Comments)
Tags:
Comment:
Better image comparaison using jquery.ucompare

Patch adds jquery.ucompare plugin by userdot.net see a demo at:
http://www.userdot.net/files/jquery/jquery.ucompare/demo/
Demo files have been removed from this local distribution.

I have migrated the existing css/js to a new ext.vipsscaler module which now
only trigger the ucompare system.
Old code left commented so we can easy reenable it if needed :)

KNOWN BUG:
ucompare hides the <img> elements hence the parent div height is set to 0.
It then create two divs using those images as background image but somehow
the parent div height does not get updated and stick to 0. Thus nothing is
shown. A follow up commit add a patch to jquery.ucompare to fix this.
Modified paths:
  • /trunk/extensions/VipsScaler/SpecialVipsTest.php (modified) (history)
  • /trunk/extensions/VipsScaler/VipsScaler.php (modified) (history)
  • /trunk/extensions/VipsScaler/modules (added) (history)
  • /trunk/extensions/VipsScaler/modules/ext.vipsScaler (added) (history)
  • /trunk/extensions/VipsScaler/modules/ext.vipsScaler/ext.vipsScaler.css (added) (history)
  • /trunk/extensions/VipsScaler/modules/ext.vipsScaler/ext.vipsScaler.js (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/README (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/css (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/css/index.html (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/css/jquery.ucompare.css (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/index.html (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/js (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/js/index.html (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/js/jquery.ucompare.js (added) (history)
  • /trunk/extensions/VipsScaler/modules/jquery.ucompare/license.gz (added) (history)
  • /trunk/extensions/VipsScaler/mw.vipsscaler.css (deleted) (history)
  • /trunk/extensions/VipsScaler/mw.vipsscaler.js (deleted) (history)

Diff [purge]

Index: trunk/extensions/VipsScaler/mw.vipsscaler.css
——@@ -1,5 +0,0 @@
2 -#mw-vipstest-default-thumb, #mw-vipstest-vips-thumb {
3 - float: left;
4 - margin-top: 1em;
5 - margin-right: 1em;
6 -}
\ No newline at end of file
Index: trunk/extensions/VipsScaler/mw.vipsscaler.js
——@@ -1,38 +0,0 @@
2 -jQuery( function( $ ) {
3 - var container = document.getElementById( 'mw-vipstest-thumbnails' );
4 - if ( container ) {
5 - $( '<p id="mw-vipstest-buttons">\n' +
6 - '<button id="mw-vipstest-show-both">' +
7 - mediaWiki.message( 'vipsscaler-show-both' ).escaped() +
8 - '</button> ' +
9 - '<button id="mw-vipstest-show-default">' +
10 - mediaWiki.message( 'vipsscaler-show-default' ).escaped() +
11 - '</button> ' +
12 - '<button id="mw-vipstest-show-vips">' +
13 - mediaWiki.message( 'vipsscaler-show-vips' ).escaped() +
14 - '</button> ' +
15 - '</p>'
16 - ).prependTo( container );
17 -
18 -
19 - $( '#mw-vipstest-show-both' ).click( function() {
20 - document.getElementById( 'mw-vipstest-show-default' ).style.display = 'inline';
21 - document.getElementById( 'mw-vipstest-show-vips' ).style.display = 'inline';
22 - document.getElementById( 'mw-vipstest-default-thumb' ).style.display = 'block';
23 - document.getElementById( 'mw-vipstest-vips-thumb' ).style.display = 'block';
24 - } );
25 - $( '#mw-vipstest-show-default' ).click( function() {
26 - document.getElementById( 'mw-vipstest-show-default' ).style.display = 'none';
27 - document.getElementById( 'mw-vipstest-show-vips' ).style.display = 'inline';
28 - document.getElementById( 'mw-vipstest-default-thumb' ).style.display = 'block';
29 - document.getElementById( 'mw-vipstest-vips-thumb' ).style.display = 'none';
30 - } );
31 - $( '#mw-vipstest-show-vips' ).click( function() {
32 - document.getElementById( 'mw-vipstest-show-default' ).style.display = 'inline';
33 - document.getElementById( 'mw-vipstest-show-vips' ).style.display = 'none';
34 - document.getElementById( 'mw-vipstest-default-thumb' ).style.display = 'none';
35 - document.getElementById( 'mw-vipstest-vips-thumb' ).style.display = 'block';
36 - } );
37 - }
38 -}
39 -);
Index: trunk/extensions/VipsScaler/VipsScaler.php
——@@ -89,12 +89,26 @@
9090 ),
9191 );
9292
 93+# Package vipsScaler material in a resource loader module:
9394 $wgResourceModules['ext.vipsscaler'] = array(
94 - 'scripts' => array( 'mw.vipsscaler.js', ),
95 - 'styles' => array( 'mw.vipsscaler.css' ),
 95+ 'scripts' => array( 'ext.vipsScaler.js', ),
 96+ 'styles' => array( 'ext.vipsScaler.css' ),
9697 'messages' => array( 'vipsscaler-show-both', 'vipsscaler-show-default', 'vipsscaler-show-vips' ),
97 - 'localBasePath' => dirname( __FILE__ ),
98 - 'remoteExtPath' => 'VipsScaler'
 98+ 'dependencies' => array(
 99+ 'jquery.ucompare',
 100+ ),
 101+
 102+ 'localBasePath' => dirname( __FILE__ ) . '/modules/ext.vipsScaler',
 103+ 'remoteExtPath' => 'VipsScaler/modules/ext.vipsScaler',
99104 );
100105
 106+# Also package upstream jquery.ucompare
 107+$wgResourceModules['jquery.ucompare'] = array(
 108+ 'scripts' => array( 'js/jquery.ucompare.js', ),
 109+ 'styles' => array( 'css/jquery.ucompare.css' ),
101110
 111+ 'localBasePath' => dirname( __FILE__ ) . '/modules/jquery.ucompare',
 112+ 'remoteExtPath' => 'VipsScaler/modules/jquery.ucompare'
 113+);
 114+
 115+
Index: trunk/extensions/VipsScaler/SpecialVipsTest.php
——@@ -100,19 +100,20 @@
101101
102102 # Add to output
103103 $html = Html::rawElement( 'div', array( 'id' => 'mw-vipstest-thumbnails' ),
104 - Html::rawElement( 'div', array( 'id' => 'mw-vipstest-default-thumb' ),
105 - Html::element( 'img', array( 'src' => $normalThumbUrl ) ) . ' ' .
106 - wfMessage( 'vipsscaler-default-thumb' )->parseAsBlock()
107 - )
108 - . ' ' .
109 - Html::rawElement( 'div', array( 'id' => 'mw-vipstest-vips-thumb' ),
110 - Html::element( 'img', array( 'src' => $vipsThumbUrl ) ) . ' ' .
111 - wfMessage( 'vipsscaler-vips-thumb' )->parseAsBlock()
112 - )
113 - );
114 -
 104+ Html::element( 'img', array(
 105+ 'src' => $normalThumbUrl,
 106+ 'alt' => wfMessage( 'vipsscaler-default-thumb' ),
 107+ ) ) . ' ' .
 108+ Html::element( 'img', array(
 109+ 'src' => $vipsThumbUrl,
 110+ 'alt' => wfMessage( 'vipsscaler-vips-thumb' ),
 111+ ) )
 112+ );
115113 $this->getOutput()->addHTML( $html );
116 - $this->getOutput()->addModules( 'ext.vipsscaler' );
 114+ $this->getOutput()->addModules( array(
 115+ 'ext.vipsscaler',
 116+ 'jquery.ucompare',
 117+ ) );
117118 }
118119
119120 /**
Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/license.gz
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/VipsScaler/modules/jquery.ucompare/license.gz
___________________________________________________________________
Added: svn:mime-type
120121 + application/octet-stream
Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/css/jquery.ucompare.css
——@@ -0,0 +1,12 @@
 2+/*!
 3+ * jQuery uCompare
 4+ * http://www.userdot.net/#!/jquery
 5+ *
 6+ * Copyright 2011, UserDot www.userdot.net
 7+ * Licensed under the GPL Version 3 license.
 8+ * Version 1.0.0
 9+ *
 10+ */
 11+ .uc-mask {position:absolute; top:0; left:0; z-index:100; border-right:3px solid #333; overflow:hidden; box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.6);box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6); -moz-box-shadow: 5px 0 7px rgba(0, 0, 0, 0.6);}
 12+.uc-bg {position:absolute; top:0; left:0; z-index:0;}
 13+.uc-caption {position:absolute; bottom:10px; left:10px; z-index:120; background:#000; filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8; color:#fff; text-align:center;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:5px; font-size:12px; font-family:arial; display:none;}
\ No newline at end of file
Property changes on: trunk/extensions/VipsScaler/modules/jquery.ucompare/css/jquery.ucompare.css
___________________________________________________________________
Added: svn:eol-style
114 + native
Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/css/index.html
Property changes on: trunk/extensions/VipsScaler/modules/jquery.ucompare/css/index.html
___________________________________________________________________
Added: svn:eol-style
215 + native
Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/index.html
Property changes on: trunk/extensions/VipsScaler/modules/jquery.ucompare/index.html
___________________________________________________________________
Added: svn:eol-style
316 + native
Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/js/jquery.ucompare.js
——@@ -0,0 +1,65 @@
 2+/*!
 3+ * jQuery uCompare
 4+ * http://www.userdot.net/#!/jquery
 5+ *
 6+ * Copyright 2011, UserDot www.userdot.net
 7+ * Licensed under the GPL Version 3 license.
 8+ * Version 1.0.0
 9+ *
 10+ */
 11+(function ($) {
 12+ $.fn.extend({
 13+ ucompare: function (b) {
 14+ var c = {
 15+ defaultgap: 50,
 16+ leftgap: 10,
 17+ rightgap: 10,
 18+ caption: false,
 19+ reveal: .5
 20+ };
 21+ var b = $.extend(c, b);
 22+ return this.each(function () {
 23+ var c = b;
 24+ var d = $(this);
 25+ var e = d.children("img:eq(0)").attr("src");
 26+ var f = d.children("img:eq(1)").attr("src");
 27+ var g = d.children("img:eq(0)").attr("alt");
 28+ var h = d.children("img:eq(0)").width();
 29+ var i = d.children("img:eq(0)").height();
 30+ d.children("img").hide();
 31+ d.css({
 32+ overflow: "hidden",
 33+ position: "relative"
 34+ });
 35+ d.append('<div class="uc-mask"></div>');
 36+ d.append('<div class="uc-bg"></div>');
 37+ d.append('<div class="uc-caption">' + g + "</div>");
 38+ d.children(".uc-mask, .uc-bg").width(h);
 39+ d.children(".uc-mask, .uc-bg").height(i);
 40+ d.children(".uc-mask").animate({
 41+ width: h - c.defaultgap
 42+ }, 1e3);
 43+ d.children(".uc-mask").css("backgroundImage", "url(" + e + ")");
 44+ d.children(".uc-bg").css("backgroundImage", "url(" + f + ")");
 45+ if (c.caption) d.children(".uc-caption").show()
 46+ }).mousemove(function (c) {
 47+ var d = b;
 48+ var e = $(this);
 49+ pos_img = e.position()["left"];
 50+ pos_mouse = c.pageX - e.children(".uc-mask").offset().left;
 51+ new_width = pos_mouse - pos_img;
 52+ img_width = e.width();
 53+ img_cap_one = e.children("img:eq(0)").attr("alt");
 54+ img_cap_two = e.children("img:eq(1)").attr("alt");
 55+ if (new_width > d.leftgap && new_width < img_width - d.rightgap) {
 56+ e.children(".uc-mask").width(new_width)
 57+ }
 58+ if (new_width < img_width * d.reveal) {
 59+ e.children(".uc-caption").html(img_cap_two)
 60+ } else {
 61+ e.children(".uc-caption").html(img_cap_one)
 62+ }
 63+ })
 64+ }
 65+ })
 66+})(jQuery)
Property changes on: trunk/extensions/VipsScaler/modules/jquery.ucompare/js/jquery.ucompare.js
___________________________________________________________________
Added: svn:eol-style
167 + native
Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/js/index.html
Property changes on: trunk/extensions/VipsScaler/modules/jquery.ucompare/js/index.html
___________________________________________________________________
Added: svn:eol-style
268 + native
Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/README
——@@ -0,0 +1,9 @@
 2+The jQuery uCompare is a jQuery plugin written by Marius Stanciu - Sergiu
 3+for Userdot, a plugin which gives you the ability to compare two images
 4+(before and after, etc) via a nice interface.
 5+
 6+Source: http://www.userdot.net/files/jquery/jquery.ucompare/
 7+Demo: http://www.userdot.net/files/jquery/jquery.ucompare/demo/
 8+
 9+--
 10+Copied to MediaWiki subversion repository on 2011-11-15 by hashar
Property changes on: trunk/extensions/VipsScaler/modules/jquery.ucompare/README
___________________________________________________________________
Added: svn:eol-style
111 + native
Index: trunk/extensions/VipsScaler/modules/ext.vipsScaler/ext.vipsScaler.css
——@@ -0,0 +1,5 @@
 2+#mw-vipstest-default-thumb, #mw-vipstest-vips-thumb {
 3+ float: left;
 4+ margin-top: 1em;
 5+ margin-right: 1em;
 6+}
Property changes on: trunk/extensions/VipsScaler/modules/ext.vipsScaler/ext.vipsScaler.css
___________________________________________________________________
Added: svn:eol-style
17 + native
Index: trunk/extensions/VipsScaler/modules/ext.vipsScaler/ext.vipsScaler.js
——@@ -0,0 +1,57 @@
 2+jQuery( function( $ ) {
 3+ var container = document.getElementById( 'mw-vipstest-thumbnails' );
 4+ if ( container ) {
 5+/*
 6+ $( '<p id="mw-vipstest-buttons">\n' +
 7+ '<button id="mw-vipstest-show-both">' +
 8+ mediaWiki.message( 'vipsscaler-show-both' ).escaped() +
 9+ '</button> ' +
 10+ '<button id="mw-vipstest-show-default">' +
 11+ mediaWiki.message( 'vipsscaler-show-default' ).escaped() +
 12+ '</button> ' +
 13+ '<button id="mw-vipstest-show-vips">' +
 14+ mediaWiki.message( 'vipsscaler-show-vips' ).escaped() +
 15+ '</button> ' +
 16+ '</p>'
 17+ ).prependTo( container );
 18+*/
 19+/**
 20+ $( '#mw-vipstest-show-both' ).click( function() {
 21+ document.getElementById( 'mw-vipstest-show-default' ).style.display = 'inline';
 22+ document.getElementById( 'mw-vipstest-show-vips' ).style.display = 'inline';
 23+ document.getElementById( 'mw-vipstest-default-thumb' ).style.display = 'block';
 24+ document.getElementById( 'mw-vipstest-vips-thumb' ).style.display = 'block';
 25+ } );
 26+ $( '#mw-vipstest-show-default' ).click( function() {
 27+ document.getElementById( 'mw-vipstest-show-default' ).style.display = 'none';
 28+ document.getElementById( 'mw-vipstest-show-vips' ).style.display = 'inline';
 29+ document.getElementById( 'mw-vipstest-default-thumb' ).style.display = 'block';
 30+ document.getElementById( 'mw-vipstest-vips-thumb' ).style.display = 'none';
 31+ } );
 32+ $( '#mw-vipstest-show-vips' ).click( function() {
 33+ document.getElementById( 'mw-vipstest-show-default' ).style.display = 'inline';
 34+ document.getElementById( 'mw-vipstest-show-vips' ).style.display = 'none';
 35+ document.getElementById( 'mw-vipstest-default-thumb' ).style.display = 'none';
 36+ document.getElementById( 'mw-vipstest-vips-thumb' ).style.display = 'block';
 37+ } );
 38+**/
 39+ /**
 40+ * options are detailed in upstream documentation available at
 41+ * http://www.userdot.net/files/jquery/jquery.ucompare/demo/
 42+ *
 43+ * Copying them here for version 1.0
 44+ * - caption: toggle the
 45+ * - leftgap: the gap to the left of the image
 46+ * - rightgap: the gap to the right of the image
 47+ * - defaultgap: the default gap shown before any interactions
 48+ */
 49+ $('#mw-vipstest-thumbnails').ucompare({
 50+ defaultgap: 50,
 51+ leftgap: 0,
 52+ rightgap: 0,
 53+ caption: true,
 54+ reveal: 0.5
 55+ });
 56+ }
 57+}
 58+);
Property changes on: trunk/extensions/VipsScaler/modules/ext.vipsScaler/ext.vipsScaler.js
___________________________________________________________________
Added: svn:eol-style
159 + native

Follow-up revisions

RevisionCommit summaryAuthorDate
r103310fix ucompare not showing images...hashar10:42, 16 November 2011
r103658add click handler to switch instantly between pics...hashar11:01, 19 November 2011

Comments

#Comment by Bryan (talk | contribs)   19:44, 18 November 2011

Looks good, but it would be nice to switch the entire image quickly. Perhaps that a click on the image should trigger switching the entire thumbnail?

#Comment by Hashar (talk | contribs)   11:01, 19 November 2011

click added with r103658.

Status & tagging log