0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

load svg images inline

Browse source
This commit is contained in:
rolux 2011-08-09 19:00:39 +02:00
parent 6118eae51a
commit dd7191e8d4
12 changed files with 78 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
source/Ox.UI/Ox.UI.js
View file

@ -29,11 +29,11 @@ Ox.load.UI = function(options, callback) {
} }
], ],
browserSupported = false, browserSupported = false,
imageNames = {},
imageURLs = {},
loadingInterval; loadingInterval;
browsers.forEach(function(browser) { browsers.forEach(function(browser) {
// fixme: check if this remains broken in wekbit nightlies
// var match = browser.regexp(navigator.userAgent);
var match = browser.regexp.exec(navigator.userAgent); var match = browser.regexp.exec(navigator.userAgent);
if (match && match[1] >= browser.version) { if (match && match[1] >= browser.version) {
browserSupported = true; browserSupported = true;
@ -126,7 +126,6 @@ Ox.load.UI = function(options, callback) {
} }
function showWarning() { function showWarning() {
//Ox.print('showWarning')
var counter = 0, var counter = 0,
message = 'Browser not supported, use ' + browsers.map(function(browser, i) { message = 'Browser not supported, use ' + browsers.map(function(browser, i) {
return browser.name + ( return browser.name + (
@ -186,7 +185,7 @@ Ox.load.UI = function(options, callback) {
Ox.loadFile(Ox.PATH + 'jquery/jquery' + (options.debug ? '' : '.min') + '.js', function() { Ox.loadFile(Ox.PATH + 'jquery/jquery' + (options.debug ? '' : '.min') + '.js', function() {
initUI(); initUI();
$.getJSON(Ox.UI.PATH + 'json/Ox.UI.json', function(files) { Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.files.json', function(files) {
var promises = []; var promises = [];
if (options.debug == false) { if (options.debug == false) {
files = files.filter(function(file) { files = files.filter(function(file) {
@ -194,27 +193,30 @@ Ox.load.UI = function(options, callback) {
}); });
files.push('Ox.UI/js/Ox.UI.js'); files.push('Ox.UI/js/Ox.UI.js');
} }
if (options.loadImages == false) {
files = files.filter(function(file) {
return ['png', 'svg'].indexOf(file.split('.').pop()) == -1;
});
}
files.forEach(function(file) { files.forEach(function(file) {
// fixme: opera doesnt fire onload for svg // fixme: opera doesnt fire onload for svg
if ($.browser.opera && Ox.endsWith(file, '.svg')) { if ($.browser.opera && Ox.endsWith(file, '.svg')) {
return; return;
} }
//Ox.print('load', file)
var dfd = new $.Deferred(); var dfd = new $.Deferred();
promises.push(dfd.promise());
Ox.loadFile(Ox.PATH + file, function() { Ox.loadFile(Ox.PATH + file, function() {
dfd.resolve(); dfd.resolve();
}); });
promises.push(dfd.promise());
}); });
//Ox.print('promises.length', promises.length) var dfd = new $.Deferred();
promises.push(dfd.promise());
Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.image' + (
options.loadImages ? 'Data' : ''
) + 'URLs.json', function(images) {
imageURLs = images;
Ox.forEach(imageURLs, function(url, key) {
imageNames[url] = key.split('/')[1];
});
dfd.resolve();
});
$.when.apply(null, promises) $.when.apply(null, promises)
.done(function() { .done(function() {
//Ox.print('promises done')
$(function() { $(function() {
if (options.showScreen && options.hideScreen) { if (options.showScreen && options.hideScreen) {
Ox.UI.hideLoadingScreen(); Ox.UI.hideLoadingScreen();
@ -225,7 +227,8 @@ Ox.load.UI = function(options, callback) {
.fail(function() { .fail(function() {
throw new Error('File not found.') throw new Error('File not found.')
}); });
});
});
}); });
} }
@ -265,13 +268,17 @@ Ox.load.UI = function(options, callback) {
vertical: ['top', 'bottom', 'left', 'right'] vertical: ['top', 'bottom', 'left', 'right']
}; };
Ox.UI.elements = {}; Ox.UI.elements = {};
Ox.UI.getImagePath = function(filename) { Ox.UI.getImageName = function(url) {
return imageNames[url];
};
Ox.UI.getImageURL = function(name, theme) {
theme = theme || Ox.Theme();
// fixme: not the best idea to do this here // fixme: not the best idea to do this here
if (filename == 'symbolPlay.svg') { if (name == 'symbolPlay') {
filename = 'symbolRight.svg'; name = 'symbolRight';
} }
return Ox.UI.PATH + 'themes/' + Ox.Theme() + '/' return imageURLs[theme + '/' + name];
+ filename.split('.').pop() + '/' + filename;
}; };
Ox.UI.hideLoadingScreen = function() { Ox.UI.hideLoadingScreen = function() {
//Ox.print('hideLoadingScreen') //Ox.print('hideLoadingScreen')

8
source/Ox.UI/js/Core/Ox.DocPage.js
View file

@ -69,7 +69,7 @@ Ox.DocPage = function(options, self) {
}) })
.append( .append(
$('<img>') $('<img>')
.attr({src: Ox.UI.getImagePath('symbolDown.svg')}) .attr({src: Ox.UI.getImageURL('symbolDown')})
.css({ .css({
width: '12px', width: '12px',
height: '12px', height: '12px',
@ -77,11 +77,11 @@ Ox.DocPage = function(options, self) {
}) })
.click(function() { .click(function() {
var $this = $(this), var $this = $(this),
isExpanded = $this.attr('src') == Ox.UI.getImagePath('symbolDown.svg'); isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolDown');
$this.attr({ $this.attr({
src: isExpanded ? src: isExpanded ?
Ox.UI.getImagePath('symbolRight.svg') : Ox.UI.getImageURL('symbolRight') :
Ox.UI.getImagePath('symbolDown.svg') Ox.UI.getImageURL('symbolDown')
}); });
$('.' + className).each(function() { $('.' + className).each(function() {
var $this = $(this); var $this = $(this);

2
source/Ox.UI/js/Core/Ox.LoadingIcon.js
View file

@ -17,7 +17,7 @@ Ox.LoadingIcon = function(options, self) {
}) })
.options(options || {}) .options(options || {})
.attr({ .attr({
src: Ox.UI.getImagePath('symbolLoadingAnimated.svg') src: Ox.UI.getImageURL('symbolLoadingAnimated')
}) })
.addClass( .addClass(
'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size) 'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)

11
source/Ox.UI/js/Core/Ox.Theme.js
View file

@ -32,14 +32,13 @@ Ox.Theme = function(theme) {
Ox.UI.$body Ox.UI.$body
.addClass('OxTheme' + Ox.toTitleCase(theme)) .addClass('OxTheme' + Ox.toTitleCase(theme))
.removeClass('OxTheme' + Ox.toTitleCase(currentTheme)); .removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
$('img:not(.OxVideo)').add('input[type=image]:not(.OxVideo)').each(function() { $('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function() {
var $this = $(this); var $this = $(this),
src = $this.attr('src');
$this.attr({ $this.attr({
src: $this.attr('src').replace( src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
'/Ox.UI/themes/' + currentTheme + '/',
'/Ox.UI/themes/' + theme + '/'
)
}); });
Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
}); });
} }
return theme; return theme;

4
source/Ox.UI/js/Form/Ox.Button.js
View file

@ -120,8 +120,8 @@ Ox.Button = function(options, self) {
self.title = title; self.title = title;
if (self.options.type == 'image') { if (self.options.type == 'image') {
that.attr({ that.attr({
src: Ox.UI.getImagePath( src: Ox.UI.getImageURL(
'symbol' + title[0].toUpperCase() + title.substr(1) + '.svg' 'symbol' + title[0].toUpperCase() + title.substr(1)
) )
}); });
} else { } else {

6
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -57,7 +57,7 @@ Ox.Select = function(options, self) {
key_down: showMenu key_down: showMenu
}); });
Ox.print('Ox.Select', self.options); //Ox.print('Ox.Select', self.options);
$.extend(self, { $.extend(self, {
buttonId: self.options.id + 'Button', buttonId: self.options.id + 'Button',
@ -193,7 +193,7 @@ Ox.Select = function(options, self) {
id <s> item id id <s> item id
@*/ @*/
that.selectItem = function(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( self.options.type == 'text' && self.$title.html(
Ox.getObjectById(self.options.items, id).title[0] // fixme: title should not have become an array 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() { that.value = function() {
if (arguments.length == 0) { if (arguments.length == 0) {
Ox.print('selected::', that.selected()) //Ox.print('selected::', that.selected())
return that.selected()[0].id; return that.selected()[0].id;
} else { } else {
/* /*

8
source/Ox.UI/js/List/Ox.TreeList.js
View file

@ -91,8 +91,8 @@ Ox.TreeList = function(options, self) {
$('<img>') $('<img>')
.addClass('OxToggle') .addClass('OxToggle')
.attr({ .attr({
src: Ox.UI.getImagePath( src: Ox.UI.getImageURL(
'symbol' + (data.expanded ? 'Down' : 'Right') + '.svg' 'symbol' + (data.expanded ? 'Down' : 'Right')
) )
}) })
.css({ .css({
@ -186,8 +186,8 @@ Ox.TreeList = function(options, self) {
} }
}); });
$img.attr({ $img.attr({
src: Ox.UI.getImagePath( src: Ox.UI.getImageURL(
'symbol' + (expanded ? 'Down' : 'Right') + '.svg' 'symbol' + (expanded ? 'Down' : 'Right')
) )
}); });
that.$element.value(item.id, 'expanded', expanded); that.$element.value(item.id, 'expanded', expanded);

2
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -64,7 +64,7 @@ Ox.ListMap = function(options, self) {
}, },
id: 'countryCode', id: 'countryCode',
resizable: false, // fixme: implement 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"/>', '" style="width: 10px; height: 10px; padding: 3px 1px 1px 3px"/>',
visible: true, visible: true,
width: 16 width: 16

2
source/Ox.UI/js/Menu/Ox.Menu.js
View file

@ -27,7 +27,7 @@ Ox.Menu <f:Ox.Element> Menu Object
@*/ @*/
Ox.Menu = function(options, self) { Ox.Menu = function(options, self) {
Ox.print(options);
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({

8
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -372,7 +372,7 @@ Ox.VideoEditor = function(options, self) {
]), ]),
selectable: false, selectable: false,
title: $('<img>').attr({ title: $('<img>').attr({
src: Ox.UI.getImagePath('symbolSet.svg') src: Ox.UI.getImageURL('symbolSet')
}), }),
tooltip: 'Actions and Settings', tooltip: 'Actions and Settings',
type: 'image' type: 'image'
@ -400,7 +400,7 @@ Ox.VideoEditor = function(options, self) {
}) })
.appendTo(self.$videobar); .appendTo(self.$videobar);
self.$videoMenuButton.find('input').attr({ self.$videoMenuButton.find('input').attr({
src: Ox.UI.getImagePath('symbolSet.svg') src: Ox.UI.getImageURL('symbolSet')
}); });
self.$selectButton = Ox.Button({ self.$selectButton = Ox.Button({
@ -588,7 +588,7 @@ Ox.VideoEditor = function(options, self) {
], ],
max: 2, max: 2,
title: $('<img>').attr({ title: $('<img>').attr({
src: Ox.UI.getImagePath('symbolSet.svg') src: Ox.UI.getImageURL('symbolSet')
}), }),
tooltip: 'Actions and Settings', tooltip: 'Actions and Settings',
type: 'image' type: 'image'
@ -596,7 +596,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'left'}) .css({float: 'left'})
.appendTo(self.$annotationsbar); .appendTo(self.$annotationsbar);
self.$annotationsMenuButton.find('input').attr({ self.$annotationsMenuButton.find('input').attr({
src: Ox.UI.getImagePath('symbolSet.svg') src: Ox.UI.getImageURL('symbolSet')
}); });

23
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -356,8 +356,7 @@ Ox.VideoPlayer = function(options, self) {
self.$loadingIcon = $('<img>') self.$loadingIcon = $('<img>')
.addClass('OxLoadingIcon OxVideo') .addClass('OxLoadingIcon OxVideo')
.attr({ .attr({
src: Ox.UI.getImagePath('symbolLoadingAnimated.svg') src: Ox.UI.getImageURL('symbolLoadingAnimated', 'modern')
.replace('/classic/', '/modern/')
}) })
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
@ -365,9 +364,9 @@ Ox.VideoPlayer = function(options, self) {
self.$playIcon = $('<img>') self.$playIcon = $('<img>')
.addClass('OxPlayIcon OxVideo') .addClass('OxPlayIcon OxVideo')
.attr({ .attr({
src: Ox.UI.getImagePath( src: Ox.UI.getImageURL('symbol' + (
'symbol' + (self.options.paused ? 'Play' : 'Pause') + '.svg' self.options.paused ? 'Play' : 'Pause'
).replace('/classic/', '/modern/') ), 'modern')
}) })
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
if (self.options.showIcon) { if (self.options.showIcon) {
@ -633,7 +632,7 @@ Ox.VideoPlayer = function(options, self) {
var $this = $(this); var $this = $(this);
$this.children()[1].src = $this.children()[1].src =
$this.data('resolution') == resolution ? $this.data('resolution') == resolution ?
Ox.UI.getImagePath('symbolCheck.svg') : Ox.UI.getImageURL('symbolCheck') :
Ox.UI.PATH + 'png/transparent.png' Ox.UI.PATH + 'png/transparent.png'
}); });
self.$resolutionButton.html(resolution + 'p'); self.$resolutionButton.html(resolution + 'p');
@ -664,7 +663,7 @@ Ox.VideoPlayer = function(options, self) {
.addClass('OxVideo') .addClass('OxVideo')
.attr({ .attr({
src: resolution == self.options.resolution ? src: resolution == self.options.resolution ?
Ox.UI.getImagePath('symbolCheck.svg').replace('/classic/', '/modern/') : Ox.UI.getImageURL('symbolCheck', 'modern') :
Ox.UI.PATH + 'png/transparent.png' Ox.UI.PATH + 'png/transparent.png'
}) })
.appendTo($item); .appendTo($item);
@ -1310,7 +1309,7 @@ Ox.VideoPlayer = function(options, self) {
} else { } else {
symbol = 'mute'; symbol = 'mute';
} }
return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/'); return Ox.UI.getImageURL('symbol' + symbol, 'modern');
} }
function goToPoint() { function goToPoint() {
@ -1361,7 +1360,7 @@ Ox.VideoPlayer = function(options, self) {
function hideLoadingIcon() { function hideLoadingIcon() {
self.$loadingIcon.hide().attr({ self.$loadingIcon.hide().attr({
src: Ox.UI.getImagePath('symbolLoading.svg') src: Ox.UI.getImageURL('symbolLoading')
.replace('/classic/', '/modern/') .replace('/classic/', '/modern/')
}); });
} }
@ -1752,7 +1751,7 @@ Ox.VideoPlayer = function(options, self) {
function showLoadingIcon() { function showLoadingIcon() {
self.$loadingIcon.attr({ self.$loadingIcon.attr({
src: Ox.UI.getImagePath('symbolLoadingAnimated.svg') src: Ox.UI.getImageURL('symbolLoadingAnimated')
.replace('/classic/', '/modern/') .replace('/classic/', '/modern/')
}).show(); }).show();
} }
@ -1960,9 +1959,9 @@ Ox.VideoPlayer = function(options, self) {
function togglePlayIcon() { function togglePlayIcon() {
self.$playIcon.attr({ self.$playIcon.attr({
src: Ox.UI.getImagePath( src: Ox.UI.getImageURL(
'symbol' + (self.options.paused ? 'Play' : 'Pause' 'symbol' + (self.options.paused ? 'Play' : 'Pause'
)+ '.svg').replace('/classic/', '/modern/') ), 'modern')
}); });
} }

18
tools/build/build.py
View file

@ -1,5 +1,6 @@
#!/usr/bin/env python #!/usr/bin/env python
#vim: et:ts=4:sw=4:sts=4 #vim: et:ts=4:sw=4:sts=4
import base64
import json import json
import os import os
import re import re
@ -51,6 +52,19 @@ for filename in os.listdir(path):
svg = svg.replace('#404040', '#FFFFFF').replace('#000000', '#FFFFFF') svg = svg.replace('#404040', '#FFFFFF').replace('#000000', '#FFFFFF')
write_file(path.replace('/classic/', '/modern/') + filename, svg) write_file(path.replace('/classic/', '/modern/') + filename, svg)
imageURLs = {}
imageDataURLs = {}
for theme in ['classic', 'modern']:
path = source_path + 'Ox.UI/themes/' + theme + '/svg/'
for filename in os.listdir(path):
if not filename[0] in '._':
key = theme + '/' + filename[:-4]
imageURLs[key] = os.path.join(path, filename).replace(source_path, '')
data = re.sub('\n\s+', '', read_file(path + filename))
imageDataURLs[key] = 'data:image/svg+xml;base64,' + base64.b64encode(data)
write_file(build_path + 'Ox.UI/json/Ox.UI.imageURLs.json', json.dumps(imageURLs, indent=4, sort_keys=True))
write_file(build_path + 'Ox.UI/json/Ox.UI.imageDataURLs.json', json.dumps(imageDataURLs, indent=4, sort_keys=True))
# symlinks # symlinks
for path, dirnames, filenames in os.walk(source_path): for path, dirnames, filenames in os.walk(source_path):
for filename in filenames: for filename in filenames:
@ -80,7 +94,7 @@ root = source_path + 'Ox.UI/'
for path, dirnames, filenames in os.walk(root): for path, dirnames, filenames in os.walk(root):
for filename in filenames: for filename in filenames:
# theme css files get included by main css # theme css files get included by main css
if path != root and not '_' in path and not filename[0] in '._' and filename[-4:] != '.css': if path != root and not '_' in path and not filename[0] in '._' and filename[-4:] != '.css' and filename[-4:] != '.svg':
files.append(os.path.join(path.replace(source_path, ''), filename)) files.append(os.path.join(path.replace(source_path, ''), filename))
if filename[-3:] == '.js': if filename[-3:] == '.js':
folder = os.path.split(path)[-1] folder = os.path.split(path)[-1]
@ -92,4 +106,4 @@ for path, dirnames, filenames in os.walk(root):
write_file(build_path + 'Ox.UI/js/Ox.UI.js', js) write_file(build_path + 'Ox.UI/js/Ox.UI.js', js)
files = json.dumps(sorted(files), indent=4, sort_keys=True) files = json.dumps(sorted(files), indent=4, sort_keys=True)
write_file(build_path + 'Ox.UI/json/Ox.UI.json', files) write_file(build_path + 'Ox.UI/json/Ox.UI.files.json', files)