Merge pull request #8049 from owncloud/filepickersvg

Fix file picker SVG issues

3 files changed, 110 insertions, 33 deletions

diff --git a/core/js/js.js b/core/js/js.js
index 9a3b2ee6a5d..1cbb9636dbe 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -498,7 +498,7 @@ var OC={
 						});
 					}
 					if(!SVGSupport()) {
-						replaceSVG();
+						OC.Util.replaceSVG();
 					}
 				}).show();
 			}, 'html');
@@ -785,7 +785,7 @@ SVGSupport.checkMimeType=function(){
 				}
 			});
 			if(headers["content-type"]!=='image/svg+xml'){
-				replaceSVG();
+				OC.Util.replaceSVG();
 				SVGSupport.checkMimeType.correct=false;
 			}
 		}
@@ -793,35 +793,10 @@ SVGSupport.checkMimeType=function(){
 };
 SVGSupport.checkMimeType.correct=true;
 
-//replace all svg images with png for browser compatibility
-function replaceSVG(){
-	$('img.svg').each(function(index,element){
-		element=$(element);
-		var src=element.attr('src');
-		element.attr('src',src.substr(0,src.length-3)+'png');
-	});
-	$('.svg').each(function(index,element){
-		element=$(element);
-		var background=element.css('background-image');
-		if(background){
-			var i=background.lastIndexOf('.svg');
-			if(i>=0){
-				background=background.substr(0,i)+'.png'+background.substr(i+4);
-				element.css('background-image',background);
-			}
-		}
-		element.find('*').each(function(index,element) {
-			element=$(element);
-			var background=element.css('background-image');
-			if(background){
-				var i=background.lastIndexOf('.svg');
-				if(i>=0){
-					background=background.substr(0,i)+'.png'+background.substr(i+4);
-					element.css('background-image',background);
-				}
-			}
-		});
-	});
+// replace all svg images with png for browser compatibility
+// @deprecated use OC.Util.replaceSVG instead
+function replaceSVG($el){
+	return OC.Util.replaceSVG($el);
 }
 
 /**
@@ -900,7 +875,7 @@ function initCore() {
 	}
 
 	if(!SVGSupport()){ //replace all svg images with png images for browser that dont support svg
-		replaceSVG();
+		OC.Util.replaceSVG();
 	}else{
 		SVGSupport.checkMimeType();
 	}
@@ -1134,6 +1109,72 @@ function relative_modified_date(timestamp) {
 	else { return t('core','years ago'); }
 }
 
+OC.Util = {
+	/**
+	 * Returns whether the browser supports SVG
+	 *
+	 * @return true if the browser supports SVG, false otherwise
+	 */
+	// TODO: replace with original function
+	hasSVGSupport: SVGSupport,
+	/**
+	 * If SVG is not supported, replaces the given icon's extension
+	 * from ".svg" to ".png".
+	 * If SVG is supported, return the image path as is.
+	 *
+	 * @param file image path with svg extension
+	 * @return fixed image path with png extension if SVG is not
+	 * supported
+	 */
+	replaceSVGIcon: function(file) {
+		if (!OC.Util.hasSVGSupport()) {
+			var i = file.lastIndexOf('.svg');
+			if (i >= 0) {
+				file = file.substr(0, i) + '.png' + file.substr(i+4);
+			}
+		}
+		return file;
+	},
+	/**
+	 * Replace SVG images in all elements that have the "svg" class set
+	 * with PNG images.
+	 *
+	 * @param $el root element from which to search, defaults to $('body')
+	 */
+	replaceSVG: function($el) {
+		if (!$el) {
+			$el = $('body');
+		}
+		$el.find('img.svg').each(function(index,element){
+			element=$(element);
+			var src=element.attr('src');
+			element.attr('src',src.substr(0, src.length-3) + 'png');
+		});
+		$el.find('.svg').each(function(index,element){
+			element = $(element);
+			var background = element.css('background-image');
+			if (background){
+				var i = background.lastIndexOf('.svg');
+				if (i >= 0){
+					background = background.substr(0,i) + '.png' + background.substr(i + 4);
+					element.css('background-image', background);
+				}
+			}
+			element.find('*').each(function(index, element) {
+				element = $(element);
+				var background = element.css('background-image');
+				if (background) {
+					var i = background.lastIndexOf('.svg');
+					if(i >= 0){
+						background = background.substr(0,i) + '.png' + background.substr(i + 4);
+						element.css('background-image', background);
+					}
+				}
+			});
+		});
+	}
+};
+
 /**
  * get a variable by name
  * @param string name
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 4da56f27d27..2233b983ad4 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -19,6 +19,8 @@
  *
  */
 
+/* global OC, t */
+
 /**
  * this class to ease the usage of jquery dialogs
  */
@@ -138,6 +140,9 @@ var OCdialogs = {
 					self.$filePicker = null;
 				}
 			});
+			if (!OC.Util.hasSVGSupport()) {
+				OC.Util.replaceSVG(self.$filePicker.parent());
+			}
 		})
 		.fail(function(status, error) {
 			// If the method is called while navigating away
@@ -560,7 +565,6 @@ var OCdialogs = {
 					filename: entry.name,
 					date: OC.mtime2date(Math.floor(entry.mtime / 1000))
 				});
-				$li.find('img').attr('src', entry.icon);
 				if (entry.isPreviewAvailable) {
 					var urlSpec = {
 						file: dir + '/' + entry.name
@@ -568,10 +572,16 @@ var OCdialogs = {
 					var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec);
 					$li.find('img').attr('src', previewUrl);
 				}
+				else {
+					$li.find('img').attr('src', OC.Util.replaceSVGIcon(entry.icon));
+				}
 				self.$filelist.append($li);
 			});
 
 			self.$filelist.removeClass('loading');
+			if (!OC.Util.hasSVGSupport()) {
+				OC.Util.replaceSVG(self.$filePicker.find('.dirtree'));
+			}
 		});
 	},
 	/**
diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js
index 94a397b7892..89056807788 100644
--- a/core/js/tests/specs/coreSpec.js
+++ b/core/js/tests/specs/coreSpec.js
@@ -448,5 +448,31 @@ describe('Core base tests', function() {
 			expect($navigation.is(':visible')).toEqual(true);
 		});
 	});
+	describe('SVG extension replacement', function() {
+		var svgSupportStub;
+
+		beforeEach(function() {
+			svgSupportStub = sinon.stub(OC.Util, 'hasSVGSupport');
+		});
+		afterEach(function() {
+			svgSupportStub.restore();
+		});
+		it('does not replace svg extension with png when SVG is supported', function() {
+			svgSupportStub.returns(true);
+			expect(
+				OC.Util.replaceSVGIcon('/path/to/myicon.svg?someargs=1')
+			).toEqual(
+				'/path/to/myicon.svg?someargs=1'
+			);
+		});
+		it('replaces svg extension with png when SVG not supported', function() {
+			svgSupportStub.returns(false);
+			expect(
+				OC.Util.replaceSVGIcon('/path/to/myicon.svg?someargs=1')
+			).toEqual(
+				'/path/to/myicon.png?someargs=1'
+			);
+		});
+	});
 });