Fix file picker SVG issuestags/v7.0.0alpha2
@@ -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 |
@@ -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 |
@@ -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; |
@@ -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 |
@@ -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')); | |||
} | |||
}); | |||
}, | |||
/** |
@@ -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' | |||
); | |||
}); | |||
}); | |||
}); | |||