Merge pull request #8049 from owncloud/filepickersvg

Fix file picker SVG issues
This commit is contained in:
Morris Jobke 2014-04-09 15:05:40 +02:00
commit d8f56e3c00
6 changed files with 120 additions and 56 deletions

View File

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

View File

@ -9,7 +9,7 @@
*/ */
/* global OC, t, n, FileList, FileActions, Files, BreadCrumb */ /* global OC, t, n, FileList, FileActions, Files, BreadCrumb */
/* global procesSelection, dragOptions, SVGSupport */ /* global procesSelection, dragOptions */
window.FileList = { window.FileList = {
appName: t('files', 'Files'), appName: t('files', 'Files'),
isEmpty: true, isEmpty: true,
@ -159,22 +159,6 @@ window.FileList = {
this.$fileList.trigger(jQuery.Event("updated")); 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. * Creates a new table row element using the given file data.
* @param fileData map of file attributes * @param fileData map of file attributes
@ -183,7 +167,7 @@ window.FileList = {
*/ */
_createRow: function(fileData, options) { _createRow: function(fileData, options) {
var td, simpleSize, basename, extension, sizeColor, var td, simpleSize, basename, extension, sizeColor,
icon = FileList._replaceSVG(fileData.icon), icon = OC.Util.replaceSVGIcon(fileData.icon),
name = fileData.name, name = fileData.name,
type = fileData.type || 'file', type = fileData.type || 'file',
mtime = parseInt(fileData.mtime, 10) || new Date().getTime(), mtime = parseInt(fileData.mtime, 10) || new Date().getTime(),
@ -659,7 +643,11 @@ window.FileList = {
}, null, null, result.data.etag); }, null, null, result.data.etag);
} }
else { 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 // reinsert row

View File

@ -635,7 +635,7 @@ Files.getMimeIcon = function(mime, ready) {
ready(Files.getMimeIcon.cache[mime]); ready(Files.getMimeIcon.cache[mime]);
} else { } else {
$.get( OC.filePath('files','ajax','mimeicon.php'), {mime: mime}, function(path) { $.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'; path = path.substr(0, path.length-4) + '.svg';
} }
Files.getMimeIcon.cache[mime]=path; Files.getMimeIcon.cache[mime]=path;

View File

@ -498,7 +498,7 @@ var OC={
}); });
} }
if(!SVGSupport()) { if(!SVGSupport()) {
replaceSVG(); OC.Util.replaceSVG();
} }
}).show(); }).show();
}, 'html'); }, 'html');
@ -785,7 +785,7 @@ SVGSupport.checkMimeType=function(){
} }
}); });
if(headers["content-type"]!=='image/svg+xml'){ if(headers["content-type"]!=='image/svg+xml'){
replaceSVG(); OC.Util.replaceSVG();
SVGSupport.checkMimeType.correct=false; SVGSupport.checkMimeType.correct=false;
} }
} }
@ -794,34 +794,9 @@ SVGSupport.checkMimeType=function(){
SVGSupport.checkMimeType.correct=true; SVGSupport.checkMimeType.correct=true;
// replace all svg images with png for browser compatibility // replace all svg images with png for browser compatibility
function replaceSVG(){ // @deprecated use OC.Util.replaceSVG instead
$('img.svg').each(function(index,element){ function replaceSVG($el){
element=$(element); return OC.Util.replaceSVG($el);
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);
}
}
});
});
} }
/** /**
@ -900,7 +875,7 @@ function initCore() {
} }
if(!SVGSupport()){ //replace all svg images with png images for browser that dont support svg if(!SVGSupport()){ //replace all svg images with png images for browser that dont support svg
replaceSVG(); OC.Util.replaceSVG();
}else{ }else{
SVGSupport.checkMimeType(); SVGSupport.checkMimeType();
} }
@ -1134,6 +1109,72 @@ function relative_modified_date(timestamp) {
else { return t('core','years ago'); } 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 * get a variable by name
* @param string name * @param string name

View File

@ -19,6 +19,8 @@
* *
*/ */
/* global OC, t */
/** /**
* this class to ease the usage of jquery dialogs * this class to ease the usage of jquery dialogs
*/ */
@ -138,6 +140,9 @@ var OCdialogs = {
self.$filePicker = null; self.$filePicker = null;
} }
}); });
if (!OC.Util.hasSVGSupport()) {
OC.Util.replaceSVG(self.$filePicker.parent());
}
}) })
.fail(function(status, error) { .fail(function(status, error) {
// If the method is called while navigating away // If the method is called while navigating away
@ -560,7 +565,6 @@ var OCdialogs = {
filename: entry.name, filename: entry.name,
date: OC.mtime2date(Math.floor(entry.mtime / 1000)) date: OC.mtime2date(Math.floor(entry.mtime / 1000))
}); });
$li.find('img').attr('src', entry.icon);
if (entry.isPreviewAvailable) { if (entry.isPreviewAvailable) {
var urlSpec = { var urlSpec = {
file: dir + '/' + entry.name file: dir + '/' + entry.name
@ -568,10 +572,16 @@ var OCdialogs = {
var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec); var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec);
$li.find('img').attr('src', previewUrl); $li.find('img').attr('src', previewUrl);
} }
else {
$li.find('img').attr('src', OC.Util.replaceSVGIcon(entry.icon));
}
self.$filelist.append($li); self.$filelist.append($li);
}); });
self.$filelist.removeClass('loading'); self.$filelist.removeClass('loading');
if (!OC.Util.hasSVGSupport()) {
OC.Util.replaceSVG(self.$filePicker.find('.dirtree'));
}
}); });
}, },
/** /**

View File

@ -448,5 +448,31 @@ describe('Core base tests', function() {
expect($navigation.is(':visible')).toEqual(true); 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'
);
});
});
}); });