diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js index ff017a22bb..5bc2fac136 100644 --- a/apps/files/js/breadcrumb.js +++ b/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 diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 509929d0e5..506741eb6e 100644 --- a/apps/files/js/filelist.js +++ b/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 diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 4c2d87d808..668faf723c 100644 --- a/apps/files/js/files.js +++ b/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; diff --git a/core/js/js.js b/core/js/js.js index 9a3b2ee6a5..1cbb9636db 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/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js index 94a397b789..8905680778 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' + ); + }); + }); });