forked from 0x2620/oxjs
load svg images inline
This commit is contained in:
parent
6118eae51a
commit
dd7191e8d4
12 changed files with 78 additions and 59 deletions
|
|
@ -69,7 +69,7 @@ Ox.DocPage = function(options, self) {
|
|||
})
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: Ox.UI.getImagePath('symbolDown.svg')})
|
||||
.attr({src: Ox.UI.getImageURL('symbolDown')})
|
||||
.css({
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
|
|
@ -77,11 +77,11 @@ Ox.DocPage = function(options, self) {
|
|||
})
|
||||
.click(function() {
|
||||
var $this = $(this),
|
||||
isExpanded = $this.attr('src') == Ox.UI.getImagePath('symbolDown.svg');
|
||||
isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolDown');
|
||||
$this.attr({
|
||||
src: isExpanded ?
|
||||
Ox.UI.getImagePath('symbolRight.svg') :
|
||||
Ox.UI.getImagePath('symbolDown.svg')
|
||||
Ox.UI.getImageURL('symbolRight') :
|
||||
Ox.UI.getImageURL('symbolDown')
|
||||
});
|
||||
$('.' + className).each(function() {
|
||||
var $this = $(this);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Ox.LoadingIcon = function(options, self) {
|
|||
})
|
||||
.options(options || {})
|
||||
.attr({
|
||||
src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
|
||||
src: Ox.UI.getImageURL('symbolLoadingAnimated')
|
||||
})
|
||||
.addClass(
|
||||
'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
|
||||
|
|
|
|||
|
|
@ -32,14 +32,13 @@ Ox.Theme = function(theme) {
|
|||
Ox.UI.$body
|
||||
.addClass('OxTheme' + Ox.toTitleCase(theme))
|
||||
.removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
|
||||
$('img:not(.OxVideo)').add('input[type=image]:not(.OxVideo)').each(function() {
|
||||
var $this = $(this);
|
||||
$('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function() {
|
||||
var $this = $(this),
|
||||
src = $this.attr('src');
|
||||
$this.attr({
|
||||
src: $this.attr('src').replace(
|
||||
'/Ox.UI/themes/' + currentTheme + '/',
|
||||
'/Ox.UI/themes/' + theme + '/'
|
||||
)
|
||||
src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
|
||||
});
|
||||
Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
|
||||
});
|
||||
}
|
||||
return theme;
|
||||
|
|
|
|||
|
|
@ -120,8 +120,8 @@ Ox.Button = function(options, self) {
|
|||
self.title = title;
|
||||
if (self.options.type == 'image') {
|
||||
that.attr({
|
||||
src: Ox.UI.getImagePath(
|
||||
'symbol' + title[0].toUpperCase() + title.substr(1) + '.svg'
|
||||
src: Ox.UI.getImageURL(
|
||||
'symbol' + title[0].toUpperCase() + title.substr(1)
|
||||
)
|
||||
});
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ Ox.Select = function(options, self) {
|
|||
key_down: showMenu
|
||||
});
|
||||
|
||||
Ox.print('Ox.Select', self.options);
|
||||
//Ox.print('Ox.Select', self.options);
|
||||
|
||||
$.extend(self, {
|
||||
buttonId: self.options.id + 'Button',
|
||||
|
|
@ -193,7 +193,7 @@ Ox.Select = function(options, self) {
|
|||
id <s> item id
|
||||
@*/
|
||||
that.selectItem = function(id) {
|
||||
Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
|
||||
//Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
|
||||
self.options.type == 'text' && self.$title.html(
|
||||
Ox.getObjectById(self.options.items, id).title[0] // fixme: title should not have become an array
|
||||
);
|
||||
|
|
@ -213,7 +213,7 @@ Ox.Select = function(options, self) {
|
|||
|
||||
that.value = function() {
|
||||
if (arguments.length == 0) {
|
||||
Ox.print('selected::', that.selected())
|
||||
//Ox.print('selected::', that.selected())
|
||||
return that.selected()[0].id;
|
||||
} else {
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -91,8 +91,8 @@ Ox.TreeList = function(options, self) {
|
|||
$('<img>')
|
||||
.addClass('OxToggle')
|
||||
.attr({
|
||||
src: Ox.UI.getImagePath(
|
||||
'symbol' + (data.expanded ? 'Down' : 'Right') + '.svg'
|
||||
src: Ox.UI.getImageURL(
|
||||
'symbol' + (data.expanded ? 'Down' : 'Right')
|
||||
)
|
||||
})
|
||||
.css({
|
||||
|
|
@ -186,8 +186,8 @@ Ox.TreeList = function(options, self) {
|
|||
}
|
||||
});
|
||||
$img.attr({
|
||||
src: Ox.UI.getImagePath(
|
||||
'symbol' + (expanded ? 'Down' : 'Right') + '.svg'
|
||||
src: Ox.UI.getImageURL(
|
||||
'symbol' + (expanded ? 'Down' : 'Right')
|
||||
)
|
||||
});
|
||||
that.$element.value(item.id, 'expanded', expanded);
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ Ox.ListMap = function(options, self) {
|
|||
},
|
||||
id: 'countryCode',
|
||||
resizable: false, // fixme: implement
|
||||
title: '<img src="' + Ox.UI.getImagePath('symbolFlag.svg') +
|
||||
title: '<img src="' + Ox.UI.getImageURL('symbolFlag') +
|
||||
'" style="width: 10px; height: 10px; padding: 3px 1px 1px 3px"/>',
|
||||
visible: true,
|
||||
width: 16
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ Ox.Menu <f:Ox.Element> Menu Object
|
|||
@*/
|
||||
|
||||
Ox.Menu = function(options, self) {
|
||||
Ox.print(options);
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
|
|
|
|||
|
|
@ -372,7 +372,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
]),
|
||||
selectable: false,
|
||||
title: $('<img>').attr({
|
||||
src: Ox.UI.getImagePath('symbolSet.svg')
|
||||
src: Ox.UI.getImageURL('symbolSet')
|
||||
}),
|
||||
tooltip: 'Actions and Settings',
|
||||
type: 'image'
|
||||
|
|
@ -400,7 +400,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$videobar);
|
||||
self.$videoMenuButton.find('input').attr({
|
||||
src: Ox.UI.getImagePath('symbolSet.svg')
|
||||
src: Ox.UI.getImageURL('symbolSet')
|
||||
});
|
||||
|
||||
self.$selectButton = Ox.Button({
|
||||
|
|
@ -588,7 +588,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
],
|
||||
max: 2,
|
||||
title: $('<img>').attr({
|
||||
src: Ox.UI.getImagePath('symbolSet.svg')
|
||||
src: Ox.UI.getImageURL('symbolSet')
|
||||
}),
|
||||
tooltip: 'Actions and Settings',
|
||||
type: 'image'
|
||||
|
|
@ -596,7 +596,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
.css({float: 'left'})
|
||||
.appendTo(self.$annotationsbar);
|
||||
self.$annotationsMenuButton.find('input').attr({
|
||||
src: Ox.UI.getImagePath('symbolSet.svg')
|
||||
src: Ox.UI.getImageURL('symbolSet')
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -356,8 +356,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.$loadingIcon = $('<img>')
|
||||
.addClass('OxLoadingIcon OxVideo')
|
||||
.attr({
|
||||
src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
|
||||
.replace('/classic/', '/modern/')
|
||||
src: Ox.UI.getImageURL('symbolLoadingAnimated', 'modern')
|
||||
})
|
||||
.appendTo(self.$videoContainer);
|
||||
|
||||
|
|
@ -365,9 +364,9 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.$playIcon = $('<img>')
|
||||
.addClass('OxPlayIcon OxVideo')
|
||||
.attr({
|
||||
src: Ox.UI.getImagePath(
|
||||
'symbol' + (self.options.paused ? 'Play' : 'Pause') + '.svg'
|
||||
).replace('/classic/', '/modern/')
|
||||
src: Ox.UI.getImageURL('symbol' + (
|
||||
self.options.paused ? 'Play' : 'Pause'
|
||||
), 'modern')
|
||||
})
|
||||
.appendTo(self.$videoContainer);
|
||||
if (self.options.showIcon) {
|
||||
|
|
@ -633,7 +632,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
var $this = $(this);
|
||||
$this.children()[1].src =
|
||||
$this.data('resolution') == resolution ?
|
||||
Ox.UI.getImagePath('symbolCheck.svg') :
|
||||
Ox.UI.getImageURL('symbolCheck') :
|
||||
Ox.UI.PATH + 'png/transparent.png'
|
||||
});
|
||||
self.$resolutionButton.html(resolution + 'p');
|
||||
|
|
@ -664,7 +663,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
.addClass('OxVideo')
|
||||
.attr({
|
||||
src: resolution == self.options.resolution ?
|
||||
Ox.UI.getImagePath('symbolCheck.svg').replace('/classic/', '/modern/') :
|
||||
Ox.UI.getImageURL('symbolCheck', 'modern') :
|
||||
Ox.UI.PATH + 'png/transparent.png'
|
||||
})
|
||||
.appendTo($item);
|
||||
|
|
@ -1310,7 +1309,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
} else {
|
||||
symbol = 'mute';
|
||||
}
|
||||
return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/');
|
||||
return Ox.UI.getImageURL('symbol' + symbol, 'modern');
|
||||
}
|
||||
|
||||
function goToPoint() {
|
||||
|
|
@ -1361,7 +1360,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
function hideLoadingIcon() {
|
||||
self.$loadingIcon.hide().attr({
|
||||
src: Ox.UI.getImagePath('symbolLoading.svg')
|
||||
src: Ox.UI.getImageURL('symbolLoading')
|
||||
.replace('/classic/', '/modern/')
|
||||
});
|
||||
}
|
||||
|
|
@ -1752,7 +1751,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
function showLoadingIcon() {
|
||||
self.$loadingIcon.attr({
|
||||
src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
|
||||
src: Ox.UI.getImageURL('symbolLoadingAnimated')
|
||||
.replace('/classic/', '/modern/')
|
||||
}).show();
|
||||
}
|
||||
|
|
@ -1960,9 +1959,9 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
function togglePlayIcon() {
|
||||
self.$playIcon.attr({
|
||||
src: Ox.UI.getImagePath(
|
||||
src: Ox.UI.getImageURL(
|
||||
'symbol' + (self.options.paused ? 'Play' : 'Pause'
|
||||
)+ '.svg').replace('/classic/', '/modern/')
|
||||
), 'modern')
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue