Moved code to replace svg with png to OC.Util
- Moved code that replaces the "svg" extension for the given file to core as OC.Util.replaceSVGIcon. - Added unit test for OC.Util.replaceSVGIcon - Moved "replaceSVG" to OC.Util.replaceSVG and deprecated the global "replaceSVG" function. - Added alias for SVGSupport() as OC.Util.hasSVGSupport() (for now)
This commit is contained in:
Vincent Petry
parent
8a10c44eb3
commit
a4eafca77f
|
|
@ -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;
|
||||
|
|
|
|||
105
core/js/js.js
105
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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue