Merge pull request #8049 from owncloud/filepickersvg

Fix file picker SVG issues

apps/files/js/breadcrumb.js

@@ -20,7 +20,6 @@
 */
 
 /* global OC */
-/* global SVGSupport, replaceSVG */
 (function() {
 	/**
 	 * Creates an breadcrumb element in the given container
@@ -104,8 +103,8 @@
 			$crumb.addClass('last');
 
 			// in case svg is not supported by the browser we need to execute the fallback mechanism
-			if (!SVGSupport()) {
-				replaceSVG();
+			if (!OC.Util.hasSVGSupport()) {
+				OC.Util.replaceSVG(this.$el);
 			}
 
 			// setup drag and drop

apps/files/js/filelist.js

@@ -9,7 +9,7 @@
  */
 
 /* global OC, t, n, FileList, FileActions, Files, BreadCrumb */
-/* global procesSelection, dragOptions, SVGSupport */
+/* global procesSelection, dragOptions */
 window.FileList = {
 	appName: t('files', 'Files'),
 	isEmpty: true,
@@ -159,22 +159,6 @@ window.FileList = {
 
 		this.$fileList.trigger(jQuery.Event("updated"));
 	},
-	/**
-	 * If SVG is not supported, replaces the given images's extension
-	 * from ".svg" to ".png".
-	 * If SVG is supported, return the image path as is.
-	 * @param icon image path
-	 * @return fixed image path
-	 */
-	_replaceSVG: function(icon) {
-		if (!SVGSupport()) {
-			var i = icon.lastIndexOf('.svg');
-			if (i >= 0) {
-				icon = icon.substr(0, i) + '.png' + icon.substr(i+4);
-			}
-		}
-		return icon;
-	},
 	/**
 	 * Creates a new table row element using the given file data.
 	 * @param fileData map of file attributes
@@ -183,7 +167,7 @@ window.FileList = {
 	 */
 	_createRow: function(fileData, options) {
 		var td, simpleSize, basename, extension, sizeColor,
-			icon = FileList._replaceSVG(fileData.icon),
+			icon = OC.Util.replaceSVGIcon(fileData.icon),
 			name = fileData.name,
 			type = fileData.type || 'file',
 			mtime = parseInt(fileData.mtime, 10) || new Date().getTime(),
@@ -659,7 +643,11 @@ window.FileList = {
 									}, null, null, result.data.etag);
 								}
 								else {
-									tr.find('td.filename').removeClass('preview').attr('style','background-image:url('+FileList._replaceSVG(fileInfo.icon)+')');
+									tr.find('td.filename')
+										.removeClass('preview')
+										.attr('style','background-image:url('
+												+ OC.Util.replaceSVGIcon(fileInfo.icon)
+												+ ')');
 								}
 							}
 							// reinsert row

apps/files/js/files.js

@@ -635,7 +635,7 @@ Files.getMimeIcon = function(mime, ready) {
 		ready(Files.getMimeIcon.cache[mime]);
 	} else {
 		$.get( OC.filePath('files','ajax','mimeicon.php'), {mime: mime}, function(path) {
-			if(SVGSupport()){
+			if(OC.Util.hasSVGSupport()){
 				path = path.substr(0, path.length-4) + '.svg';
 			}
 			Files.getMimeIcon.cache[mime]=path;

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

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'));
+			}
 		});
 	},
 	/**

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'
+			);
+		});
+	});
 });