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

update and refactor Ox.UI loader

Browse source
This commit is contained in:
rolux 2012-12-28 18:21:26 +01:00
parent 2c2b680284
commit f54db91aaa
1 changed files with 77 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,6 @@ Ox.load.UI = function(options, callback) {
options = Ox.extend({ options = Ox.extend({
hideScreen: true, hideScreen: true,
loadImages: true,
showScreen: false, showScreen: false,
theme: 'classic' theme: 'classic'
}, options); }, options);
@ -44,10 +43,19 @@ Ox.load.UI = function(options, callback) {
} }
], ],
browserSupported = false, browserSupported = false,
imageNames = {}, colors = {
imageURLs = {}, marker: {
'#000000': 'videoMarkerBorder',
'#FFFFFF': 'videoMarkerBackground'
},
symbol: {
'#FF0000': 'symbolWarningColor'
}
},
images = {},
isInternetExplorer = /MSIE/.test(navigator.userAgent), isInternetExplorer = /MSIE/.test(navigator.userAgent),
loadingInterval; loadingInterval,
themes = {};
browsers.forEach(function(browser) { browsers.forEach(function(browser) {
var match = browser.regexp && browser.regexp.exec(navigator.userAgent); var match = browser.regexp && browser.regexp.exec(navigator.userAgent);
@ -216,51 +224,41 @@ Ox.load.UI = function(options, callback) {
Ox.getFile(Ox.PATH + '/Ox.UI/jquery/jquery.js', function() { Ox.getFile(Ox.PATH + '/Ox.UI/jquery/jquery.js', function() {
initUI(); initUI();
Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.files.json?' + Ox.VERSION, function(files) { Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.json?' + Ox.VERSION, function(data) {
var promises = [], themes = {}; var counter = 0, length = data.files.length;
files.forEach(function(file) { images = data.images;
var dfd = new $.Deferred(); data.files.forEach(function(file) {
promises.push(dfd.promise()); if (/\.jsonc$/.test(file)) {
if (/\.json$/.test(file)) { Ox.getJSONC(Ox.PATH + file + '?' + Ox.VERSION, function(data) {
Ox.getJSON(Ox.PATH + file + '?' + Ox.VERSION, function(data) { var theme = /\/themes\/(\w+)\/json\//.exec(file)[1];
var theme = /\/(\w+)\.json$/.exec(file)[1];
themes[theme] = data; themes[theme] = data;
dfd.resolve(); ++counter == length && initThemes();
}); });
} else { } else {
Ox.getFile(Ox.PATH + file, function() { Ox.getFile(Ox.PATH + file, function() {
dfd.resolve(); ++counter == length && initThemes();
}); });
} }
}); });
var dfd = new $.Deferred();
promises.push(dfd.promise());
Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.image' + (
options.loadImages ? 'Data' : ''
) + 'URLs.json?' + Ox.VERSION, function(images) {
imageURLs = images;
Ox.forEach(imageURLs, function(url, key) {
imageNames[url] = key.split('/')[1];
}); });
dfd.resolve();
});
$.when.apply(null, promises)
.done(function() {
Ox.forEach(themes, function(data, theme) {
Ox.Theme[theme] = data;
}); });
}
function initThemes() {
Ox.Theme.getThemes = function() {
return Object.keys(themes);
};
Ox.Theme.getThemeData = function(theme) {
return themes[theme || Ox.Theme()];
};
$(function() { $(function() {
if (options.showScreen && options.hideScreen) { if (options.showScreen && options.hideScreen) {
Ox.UI.hideLoadingScreen(); Ox.UI.hideLoadingScreen();
} }
callback(browserSupported); callback(browserSupported);
}); });
})
.fail(function() {
throw new Error('File not found.')
});
});
});
} }
@ -313,36 +311,52 @@ Ox.load.UI = function(options, callback) {
//@ Ox.UI.elements <o> reference to all UI element instnaces //@ Ox.UI.elements <o> reference to all UI element instnaces
Ox.UI.elements = {}; Ox.UI.elements = {};
/*@ /*@
Ox.UI.getImageName <f> get image name from url Ox.UI.getImageData <f> Returns image properties
(url) -> <s> Image Name (url) -> <s> Image Name
@*/ @*/
Ox.UI.getImageName = function(url) { Ox.UI.getImageData = Ox.cache(function(url) {
return imageNames[url]; var str = 'data:image/svg+xml;base64,';
}; return Ox.startsWith(url, str)
? JSON.parse(atob(url.split(',')[1]).match(/<!--(.+?)-->/)[1])
: null;
});
/*@ /*@
Ox.UI.getImageURL <f> Returns an image URL Ox.UI.getImageURL <f> Returns an image URL
(name[, theme[, color]]) -> <s> Image URL (name[, color[, theme]]) -> <s> Image URL
Setting color works only when the `loadImages` option is set to name <s> Image name
`true`. color <s|[n]> Color name or RGB values
theme <s> Theme name
@*/ @*/
Ox.UI.getImageURL = function(name, theme, color) { Ox.UI.getImageURL = Ox.cache(function(name, color, theme) {
var imageURL; Ox.print('getImageURL', name, color, theme)
var colorName,
image = images[name],
themeData,
type = Ox.toDashes(name).split('-')[0];
color = color || 'default';
theme = theme || Ox.Theme(); theme = theme || Ox.Theme();
color = Ox.Theme[theme].color[color] || null; themeData = Ox.Theme.getThemeData(theme);
// fixme: not the best idea to do this here if (type == 'symbol') {
if (name == 'symbolPlay') { if (Ox.isString(color)) {
name = 'symbolRight'; colorName = color;
color = themeData['symbol' + Ox.toTitleCase(color) + 'Color'];
} }
imageURL = imageURLs[theme + '/' + name]; image = image.replace(/#808080/g, '#' + Ox.toHex(color));
if (options.loadImages && color) { }
imageURL = 'data:image/svg+xml;base64,' + btoa( Ox.forEach(colors[type], function(name, hex) {
atob(imageURL.split(',')[1]).replace( image = image.replace(
/#[0-9A-F]{6}/i, '#' + Ox.toHex(color) new RegExp(hex, 'g'),
) '#' + Ox.toHex(themeData[name])
); );
} });
return imageURL; return 'data:image/svg+xml;base64,' + btoa(
}; image + '<!--' + JSON.stringify(Ox.extend(color ? {
color: colorName
} : {}, {
name: name, theme: theme
})) + '-->'
);
});
/*@ /*@
Ox.UI.getVideoFormat <f> Get supported video formats Ox.UI.getVideoFormat <f> Get supported video formats
(formats) -> <a> of supported formats (formats) -> <a> of supported formats