update and refactor Ox.UI loader
This commit is contained in:
rolux
parent
2c2b680284
commit
f54db91aaa
1 changed files with 77 additions and 63 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue