Gilles has uploaded a new change for review. https://gerrit.wikimedia.org/r/115610
Change subject: Make the SVG filter inline ...................................................................... Make the SVG filter inline The external SVG doesn't work on beta, because it's hosted on a different domain Change-Id: Ic6ae42a33f9dbd656df051f056376aea60ac9ea3 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/146 --- D resources/mmv/img/blur.svg M resources/mmv/mmv.js M resources/mmv/mmv.less M resources/mmv/mmv.lightboxinterface.js 4 files changed, 15 insertions(+), 18 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/10/115610/1 diff --git a/resources/mmv/img/blur.svg b/resources/mmv/img/blur.svg deleted file mode 100644 index f422ea9..0000000 --- a/resources/mmv/img/blur.svg +++ /dev/null @@ -1,9 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> -<svg version="1.1" xmlns="http://www.w3.org/2000/svg";> - <defs> - <filter id="gaussian-blur" x="0" y="0"> - <feGaussianBlur color-interpolation-filters="sRGB" stdDeviation="3" /> - </filter> - </defs> -</svg> \ No newline at end of file diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index ac40e61..366f1cf 100755 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -366,7 +366,10 @@ // Only blur the placeholder if it's blown up significantly if ( blowupFactor > 2 ) { - $initialImage.addClass( 'blurred' ); + // We have to apply the SVG filter here, it doesn't work when defined in the .less file + // We can't use an external SVG file because filters can't be accessed cross-domain + // We can't embed the SVG file because accessing the filter inside of it doesn't work + $initialImage.addClass( 'blurred' ).css( 'filter', 'url("#gaussian-blur")' ); this.blurredThumbnailShown = true; } diff --git a/resources/mmv/mmv.less b/resources/mmv/mmv.less index 2cb3c18..9b3b570 100644 --- a/resources/mmv/mmv.less +++ b/resources/mmv/mmv.less @@ -309,11 +309,6 @@ } .mlb-image img.blurred { - /** - * SVG is for Firefox - * Cannot be embedded because of the hash needed to access the filter inside the SVG - */ - filter: url(img/blur.svg#gaussian-blur); filter: blur(3px); -webkit-filter: blur(3px); opacity: 0.8; diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index 5ec8040..fda8211 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -59,6 +59,9 @@ .addClass( 'mlb-staging-area' ); $( document.body ).append( this.$staging ); + // SVG filter, needed to achieve blur in Firefox + this.$filter = $( '<svg><filter id="gaussian-blur"><fegaussianblur stdDeviation="3"></filter></svg>' ); + this.$overlay = $( '<div>' ) .addClass( 'mlb-overlay' ); @@ -91,7 +94,8 @@ this.$main.append( this.$preDiv, this.$imageWrapper, - this.$postDiv + this.$postDiv, + this.$filter ); this.$wrapper.append( @@ -440,9 +444,13 @@ var self = this, animationLength = 300; - // The blurred class has an opacity < 1. This animated the image to become fully opaque + // The blurred class has an opacity < 1. This animates the image to become fully opaque this.$image .addClass( 'blurred' ) + // We have to apply the SVG filter here, it doesn't work when defined in the .less file + // We can't use an external SVG file because filters can't be accessed cross-domain + // We can't embed the SVG file because accessing the filter inside of it doesn't work + .css( 'filter', 'url("#gaussian-blur")' ) .animate( { opacity: 1.0 }, animationLength ); // During the same amount of time (animationLength) we animate a blur value from 3.0 to 0.0 @@ -457,7 +465,7 @@ // When the animation is complete, the blur value is 0 // We apply empty CSS values to remove the inline styles applied by jQuery // so that they don't get in the way of styles defined in CSS - self.$image.css( { '-webkit-filter' : '', 'opacity' : '' } ) + self.$image.css( { '-webkit-filter' : '', 'opacity' : '', 'filter' : '' } ) .removeClass( 'blurred' ); } } ); -- To view, visit https://gerrit.wikimedia.org/r/115610 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ic6ae42a33f9dbd656df051f056376aea60ac9ea3 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gilles <gdu...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
