update and refactor Ox.UI loader

This commit is contained in:
rolux 2012-12-28 18:21:26 +01:00
parent 2c2b680284
commit f54db91aaa

View file

@ -4,7 +4,6 @@ Ox.load.UI = function(options, callback) {
options = Ox.extend({
hideScreen: true,
loadImages: true,
showScreen: false,
theme: 'classic'
}, options);
@ -44,10 +43,19 @@ Ox.load.UI = function(options, callback) {
}
],
browserSupported = false,
imageNames = {},
imageURLs = {},
colors = {
marker: {
'#000000': 'videoMarkerBorder',
'#FFFFFF': 'videoMarkerBackground'
},
symbol: {
'#FF0000': 'symbolWarningColor'
}
},
images = {},
isInternetExplorer = /MSIE/.test(navigator.userAgent),
loadingInterval;
loadingInterval,
themes = {};
browsers.forEach(function(browser) {
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() {
initUI();
Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.files.json?' + Ox.VERSION, function(files) {
var promises = [], themes = {};
files.forEach(function(file) {
var dfd = new $.Deferred();
promises.push(dfd.promise());
if (/\.json$/.test(file)) {
Ox.getJSON(Ox.PATH + file + '?' + Ox.VERSION, function(data) {
var theme = /\/(\w+)\.json$/.exec(file)[1];
Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.json?' + Ox.VERSION, function(data) {
var counter = 0, length = data.files.length;
images = data.images;
data.files.forEach(function(file) {
if (/\.jsonc$/.test(file)) {
Ox.getJSONC(Ox.PATH + file + '?' + Ox.VERSION, function(data) {
var theme = /\/themes\/(\w+)\/json\//.exec(file)[1];
themes[theme] = data;
dfd.resolve();
++counter == length && initThemes();
});
} else {
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() {
if (options.showScreen && options.hideScreen) {
Ox.UI.hideLoadingScreen();
}
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 = {};
/*@
Ox.UI.getImageName <f> get image name from url
Ox.UI.getImageData <f> Returns image properties
(url) -> <s> Image Name
@*/
Ox.UI.getImageName = function(url) {
return imageNames[url];
};
Ox.UI.getImageData = Ox.cache(function(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
(name[, theme[, color]]) -> <s> Image URL
Setting color works only when the `loadImages` option is set to
`true`.
(name[, color[, theme]]) -> <s> Image URL
name <s> Image name
color <s|[n]> Color name or RGB values
theme <s> Theme name
@*/
Ox.UI.getImageURL = function(name, theme, color) {
var imageURL;
Ox.UI.getImageURL = Ox.cache(function(name, color, theme) {
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();
color = Ox.Theme[theme].color[color] || null;
// fixme: not the best idea to do this here
if (name == 'symbolPlay') {
name = 'symbolRight';
themeData = Ox.Theme.getThemeData(theme);
if (type == 'symbol') {
if (Ox.isString(color)) {
colorName = color;
color = themeData['symbol' + Ox.toTitleCase(color) + 'Color'];
}
imageURL = imageURLs[theme + '/' + name];
if (options.loadImages && color) {
imageURL = 'data:image/svg+xml;base64,' + btoa(
atob(imageURL.split(',')[1]).replace(
/#[0-9A-F]{6}/i, '#' + Ox.toHex(color)
)
image = image.replace(/#808080/g, '#' + Ox.toHex(color));
}
Ox.forEach(colors[type], function(name, hex) {
image = image.replace(
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
(formats) -> <a> of supported formats