| Index: trunk/extensions/VipsScaler/VipsScaler.i18n.php |
| — | — | @@ -24,7 +24,10 @@ |
| 25 | 25 | 'vipsscaler-form-sharpen-radius' => 'Amount of sharpening:', |
| 26 | 26 | 'vipsscaler-form-bilinear' => 'Bilinear scaling', |
| 27 | 27 | 'vipsscaler-form-submit' => 'Generate thumbnails', |
| 28 | | - |
| | 28 | + |
| | 29 | + 'vipsscaler-thumbs-legend' => 'Generated thumbnails', |
| | 30 | + 'vipsscaler-thumbs-help' => 'The thumbnail shown below was generated with the default scaler. Move your mouse over the thumbnail to compare it with the one generated by VIPS. Alternatively, you can click / unclick the checkbox below to switch between thumbnails.', |
| | 31 | + 'vipsscaler-thumbs-switch-label' => 'Click to switch between default and VIPS scaling output.', |
| 29 | 32 | 'vipsscaler-default-thumb' => 'Thumbnail generated with default scaler', |
| 30 | 33 | 'vipsscaler-vips-thumb' => 'Thumbnail generated with VIPS', |
| 31 | 34 | |
| Index: trunk/extensions/VipsScaler/SpecialVipsTest.php |
| — | — | @@ -98,8 +98,8 @@ |
| 99 | 99 | # Make url to the vips thumbnail |
| 100 | 100 | $vipsThumbUrl = $this->getTitle()->getLocalUrl( $vipsUrlOptions ); |
| 101 | 101 | |
| 102 | | - # Add to output |
| 103 | | - $html = Html::rawElement( 'div', array( 'id' => 'mw-vipstest-thumbnails' ), |
| | 102 | + # HTML for the thumbnails |
| | 103 | + $thumbs = Html::rawElement( 'div', array( 'id' => 'mw-vipstest-thumbnails' ), |
| 104 | 104 | Html::element( 'img', array( |
| 105 | 105 | 'src' => $normalThumbUrl, |
| 106 | 106 | 'alt' => wfMessage( 'vipsscaler-default-thumb' ), |
| — | — | @@ -109,6 +109,24 @@ |
| 110 | 110 | 'alt' => wfMessage( 'vipsscaler-vips-thumb' ), |
| 111 | 111 | ) ) |
| 112 | 112 | ); |
| | 113 | + |
| | 114 | + # Helper messages shown above the thumbnails rendering |
| | 115 | + $help = wfMessage( 'vipsscaler-thumbs-help' )->parseAsBlock(); |
| | 116 | + |
| | 117 | + # A checkbox to easily alternate between both views: |
| | 118 | + $checkbox = Xml::checkLabel( |
| | 119 | + wfMessage( 'vipsscaler-thumbs-switch-label' ), |
| | 120 | + 'mw-vipstest-thumbs-switch', |
| | 121 | + 'mw-vipstest-thumbs-switch' |
| | 122 | + ); |
| | 123 | + |
| | 124 | + # Wrap the three HTML snippets above in a fieldset: |
| | 125 | + $html = Xml::fieldset( |
| | 126 | + wfMessage( 'vipsscaler-thumbs-legend' ), |
| | 127 | + $help . $checkbox . $thumbs |
| | 128 | + ); |
| | 129 | + |
| | 130 | + # Finally output all of the above |
| 113 | 131 | $this->getOutput()->addHTML( $html ); |
| 114 | 132 | $this->getOutput()->addModules( array( |
| 115 | 133 | 'ext.vipsscaler', |
| Index: trunk/extensions/VipsScaler/modules/ext.vipsScaler/ext.vipsScaler.css |
| — | — | @@ -3,6 +3,9 @@ |
| 4 | 4 | margin-top: 1em; |
| 5 | 5 | margin-right: 1em; |
| 6 | 6 | } |
| | 7 | +#mw-vipstest-thumbs-switch{ |
| | 8 | + margin-bottom: 2em; |
| | 9 | +} |
| 7 | 10 | .uc-caption { |
| 8 | 11 | /** Overrides ucompare caption position from bottom (bottom:10px) to top */ |
| 9 | 12 | top:10px; |
| Index: trunk/extensions/VipsScaler/modules/ext.vipsScaler/ext.vipsScaler.js |
| — | — | @@ -1,4 +1,25 @@ |
| 2 | 2 | jQuery( function( $ ) { |
| | 3 | + $.vipsScaler = { |
| | 4 | + /** function to alternate between both thumbnails */ |
| | 5 | + switchThumbs: function() { |
| | 6 | + var e = $('#mw-vipstest-thumbnails') |
| | 7 | + var mask = e.children(".uc-mask") |
| | 8 | + var caption = e.children(".uc-caption") |
| | 9 | + |
| | 10 | + width = e.width(); |
| | 11 | + maskWidth = mask.width(); |
| | 12 | + |
| | 13 | + if( maskWidth < width / 2 ) { |
| | 14 | + /** Bar is 3 pixels width. We want to show it on the right */ |
| | 15 | + mask.width( width - 3); |
| | 16 | + caption.html( e.children("img:eq(0)").attr("alt") ); |
| | 17 | + } else { |
| | 18 | + mask.width( 0 ); |
| | 19 | + caption.html( e.children("img:eq(1)").attr("alt") ); |
| | 20 | + } |
| | 21 | + }, |
| | 22 | + }; |
| | 23 | + |
| 3 | 24 | var container = document.getElementById( 'mw-vipstest-thumbnails' ); |
| 4 | 25 | if ( container ) { |
| 5 | 26 | /* |
| — | — | @@ -53,23 +74,14 @@ |
| 54 | 75 | reveal: 0.5 |
| 55 | 76 | }); |
| 56 | 77 | |
| 57 | | - /** Also add a click handler to instantly switch beetween pics */ |
| 58 | | - $('#mw-vipstest-thumbnails').click( function() { |
| 59 | | - var e = $(this) |
| 60 | | - var mask = e.children(".uc-mask") |
| 61 | | - var caption = e.children(".uc-caption") |
| 62 | | - |
| 63 | | - width = e.width(); |
| 64 | | - maskWidth = mask.width(); |
| 65 | | - |
| 66 | | - if( maskWidth < width / 2 ) { |
| 67 | | - mask.width( width ); |
| 68 | | - caption.html( e.children("img:eq(0)").attr("alt") ); |
| 69 | | - } else { |
| 70 | | - mask.width( 0 ); |
| 71 | | - caption.html( e.children("img:eq(1)").attr("alt") ); |
| 72 | | - } |
| 73 | | - }); |
| | 78 | + /** |
| | 79 | + * Also add a click handler to instantly switch beetween pics |
| | 80 | + * This can be done by clicking the thumbnail or using a checkbox |
| | 81 | + */ |
| | 82 | + $('#mw-vipstest-thumbs-switch') |
| | 83 | + .click( function() { $.vipsScaler.switchThumbs() } ); |
| | 84 | + $('#mw-vipstest-thumbnails') |
| | 85 | + .click( function() { $.vipsScaler.switchThumbs() } ); |
| 74 | 86 | } |
| 75 | | -} |
| | 87 | +} |
| 76 | 88 | ); |