diff --git a/source/Ox.UI/Ox.UI.js b/source/Ox.UI/Ox.UI.js index f65485f4..f7bf48a1 100644 --- a/source/Ox.UI/Ox.UI.js +++ b/source/Ox.UI/Ox.UI.js @@ -49,50 +49,14 @@ Ox.load.UI = function(options, callback) { } ], browserSupported = false, - colors = { - marker: { - '#000000': 'videoMarkerBorder', - '#FFFFFF': 'videoMarkerBackground' - }, - symbol: { - '#FF0000': 'symbolWarningColor' - } - }, - images = {}, - isInternetExplorer = /MSIE/.test(navigator.userAgent), - loadingInterval, - themes = {}; + isInternetExplorer = /MSIE/.test(navigator.userAgent); - browsers.forEach(function(browser) { - var match = browser.regexp && browser.regexp.exec(navigator.userAgent); - if (match && match[1] >= browser.version) { - browserSupported = true; - } - }); + Ox.UI = {}; // FIXME: remove - Ox.documentReady(function() { - Ox.$('body').addClass( - 'OxTheme' + Ox.toTitleCase(options.theme || 'oxlight') - ); - options.showScreen && showScreen(); - }); + Ox.LoadingScreen = (function() { - loadFiles(); - - function showScreen() { - - var body = Ox.$('body'), - css = { - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - margin: 'auto', - MozUserSelect: 'none', - WebkitUserSelect: 'none' - }, - div = Ox.$('
') + var $body = Ox.$('body'), + $screen = Ox.$('
') .addClass('OxLoadingScreen') .css({ position: 'absolute', @@ -108,8 +72,18 @@ Ox.load.UI = function(options, callback) { ) + ')', opacity: 1, zIndex: 1000 - }) - .appendTo(body); + }), + css = { + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: 0, + margin: 'auto', + MozUserSelect: 'none', + WebkitUserSelect: 'none' + }, + loadingInterval browserSupported ? showIcon() : showWarning(); @@ -135,26 +109,27 @@ Ox.load.UI = function(options, callback) { }); */ var deg = 0, - element, + $element, src = Ox.PATH + 'Ox.UI/themes/' + options.theme + '/svg/symbolLoading.svg' Ox.getFile(src, function() { - element = Ox.$('') - .attr({ - src: src - }) - .css(Ox.extend({ - width: '32px', - height: '32px' - }, css)) - .on({ - mousedown: function(e) { - e.preventDefault() - } - }) - .appendTo(div); + var $icon = Ox.$('') + .attr({ + src: src + }) + .css(Ox.extend({ + width: '32px', + height: '32px' + }, css)) + .on({ + mousedown: function(e) { + e.preventDefault() + } + }) + .appendTo($screen), + deg = 0; loadingInterval = setInterval(function() { deg = (deg + 30) % 360; - element.css({ + $icon.css({ MozTransform: 'rotate(' + deg + 'deg)', OTransform: 'rotate(' + deg + 'deg)', WebkitTransform: 'rotate(' + deg + 'deg)', @@ -166,15 +141,6 @@ Ox.load.UI = function(options, callback) { function showWarning() { var counter = 0; - /* - message = 'Browser not supported, use ' + browsers.map(function(browser, i) { - return browser.name + ( - i == browsers.length - 1 ? '.' : - i == browsers.length - 2 ? ' or' : ',' - ); - }).join(' '); - */ - div.addClass('OxError'); browsers = browsers.filter(function(browser) { return browser.url; }); @@ -186,18 +152,20 @@ Ox.load.UI = function(options, callback) { }); }); function showIcons() { - var box = Ox.$('
') + var $box = Ox.$('
') .css(Ox.extend({ width: (browsers.length * 72) + 'px', height: '72px' }, css)) - .appendTo(div); + .appendTo($screen); browsers.forEach(function(browser, i) { - var link = Ox.$('') + Ox.$('') .attr({ href: browser.url, - title: (browser.name == 'Chrome Frame' ? 'Install' : 'Download') - + ' ' + browser.name + title: ( + browser.name == 'Chrome Frame' + ? Ox._('Install') : Ox._('Download') + ) + ' ' + browser.name }) .css({ position: 'absolute', @@ -205,35 +173,73 @@ Ox.load.UI = function(options, callback) { width: '72px', height: '72px' }) - .appendTo(box); - Ox.$('') - .attr({ - src: browser.src - }) - .css(Ox.extend({ - width: '64px', - height: '64px', - border: 0, - cursor: 'pointer' - }, css)) - .on({ - mousedown: function(e) { - e.preventDefault(); - } - }) - .appendTo(link); + .append( + Ox.$('') + .attr({ + src: browser.src + }) + .css(Ox.extend({ + width: '64px', + height: '64px', + border: 0, + cursor: 'pointer' + }, css)) + .on({ + mousedown: function(e) { + e.preventDefault(); + } + }) + ) + .appendTo($box); }); } } - } + return { + hide: function() { + $div.animate({ + opacity: browserSupported ? 0 : 0.9 + }, 1000, function() { + if (browserSupported) { + clearInterval(loadingInterval); + $div.remove(); + } else { + $div.on({ + click: function() { + $div.remove(); + } + }); + } + }); + }, + show: function() { + $screen.appendTo($body); + } + }; - function loadFiles() { + }()); - Ox.getFile(Ox.PATH + 'Ox.UI/jquery/jquery.js?' + Ox.VERSION, function() { - initUI(); - Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.json?' + Ox.VERSION, function(data) { + browsers.forEach(function(browser) { + var match = browser.regexp && browser.regexp.exec(navigator.userAgent); + if (match && match[1] >= browser.version) { + browserSupported = true; + } + }); + + Ox.documentReady(function() { + Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(options.theme)); + options.showScreen && Ox.loadingScreen.show(); + }); + + loadUI(); + + function loadUI() { + + var path = Ox.PATH + 'Ox.UI/jquery/jquery.js?' + Ox.VERSION; + Ox.getFile(path, function() { + path = Ox.PATH + 'Ox.UI/json/Ox.UI.json?' + Ox.VERSION; + Ox.getJSON(path, function(data) { var counter = 0, length; if (!options.loadCSS) { data.files = data.files.filter(function(file) { @@ -241,17 +247,19 @@ Ox.load.UI = function(options, callback) { }); } length = data.files.length; - images = data.images; + Ox.IMAGES = data.images; + Ox.THEMES = {}; data.files.forEach(function(file) { + path = Ox.PATH + file + '?' + Ox.VERSION; if (/\.jsonc$/.test(file)) { - Ox.getJSONC(Ox.PATH + file + '?' + Ox.VERSION, function(data) { + Ox.getJSONC(path, function(data) { var theme = /\/themes\/(\w+)\/json\//.exec(file)[1]; - themes[theme] = data; - ++counter == length && initThemes(); + Ox.THEMES[theme] = data; + ++counter == length && initUI(); }); } else { - Ox.getFile(Ox.PATH + file + '?' + Ox.VERSION, function() { - ++counter == length && initThemes(); + Ox.getFile(path, function() { + ++counter == length && initUI(); }); } }); @@ -260,189 +268,24 @@ Ox.load.UI = function(options, callback) { } - function initThemes() { + function initUI() { - Ox.Theme.getThemes = function() { - return Object.keys(themes); - }; - Ox.Theme.getThemeData = function(theme) { - return themes[theme || Ox.Theme()]; - }; Ox.documentReady(function() { + // FIXME: use Ox.$foo everywhere! + Ox.$body = Ox.UI.$body = $('body'); + Ox.$document = Ox.UI.$document = $(document); + Ox.$head = Ox.UI.$head = $('head'); + Ox.$window = Ox.UI.$window = $(window); + // fixme: is this the right place to do this? + $.browser.mozilla && Ox.$document.on('dragstart', function() { + return false; + }); if (options.showScreen && options.hideScreen) { - Ox.UI.hideLoadingScreen(); + Ox.LoadingScreen.hide(); } callback(browserSupported); }); } - function initUI() { - - //@ UI - //@ Ox.UI Collection of UI methods and properties - Ox.UI = {}; - - /*@ - Ox.UI.ready queue callback to be called once UI is ready - (callback) -> call callback later - @*/ - Ox.UI.ready = (function() { - var callbacks = []; - Ox.documentReady(function() { - // FIXME: use Ox.$foo everywhere! - Ox.body = Ox.$body = Ox.UI.$body = $('body'); - Ox.document = Ox.$document = Ox.UI.$document = $(document); - Ox.head = Ox.$head = Ox.UI.$head = $('head'); - Ox.window = Ox.$window = Ox.UI.$window = $(window); - // fixme: is this the right place to do this? - $.browser.mozilla && Ox.$document.on('dragstart', function() { - return false; - }); - callbacks.forEach(function(callback) { - callback(); - }); - //delete callbacks; - }); - return function(callback) { - if (Ox.$window) { - callback(); - } else { - callbacks.push(callback); - } - } - }()); - - //@ Ox.UI.DIMENSIONS horizontal, vertical dimensions - Ox.UI.DIMENSIONS = { - horizontal: ['width', 'height'], - vertical: ['height', 'width'] - }; - //@ Ox.UI.EDGES horizontal, vertical edges - Ox.UI.EDGES = { - horizontal: ['left', 'right', 'top', 'bottom'], - vertical: ['top', 'bottom', 'left', 'right'] - }; - //@ Ox.UI.elements reference to all UI element instances - Ox.elements = Ox.$elements = Ox.UI.elements = {}; - /*@ - Ox.UI.getImageData Returns image properties - (url) -> Image Name - @*/ - 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 Returns an image URL - (name[, color[, theme]]) -> Image URL - name Image name - color Color name or RGB values - theme Theme name - @*/ - Ox.UI.getImageURL = Ox.cache(function(name, color, theme) { - var colorName, - image = images[name], - themeData, - type = Ox.toDashes(name).split('-')[0]; - color = color || 'default'; - theme = theme || Ox.Theme(); - themeData = Ox.Theme.getThemeData(theme); - if (type == 'symbol') { - if (Ox.isString(color)) { - colorName = color; - color = themeData[ - 'symbol' + color[0].toUpperCase() + color.slice(1) + '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]) - ); - }); - image = image.replace(/\$/g, '#'); - return 'data:image/svg+xml;base64,' + btoa( - image + '' - ); - }, { - key: function(args) { - args[1] = args[1] || 'default'; - args[2] = args[2] || Ox.Theme(); - return JSON.stringify(args); - } - }); - // ... - Ox.getElement = Ox.getOxElement = Ox.UI.getOxElement = function(element) { - return Ox.elements[$(element).data('oxid')]; - }; - /*@ - Ox.UI.hideLoadingScreen hide loading screen - () -> hide loading screen - @*/ - Ox.UI.hideLoadingScreen = function() { - var $div = $('.OxLoadingScreen'), - error = $div.is('.OxError'); - //$div.find('img').remove(); - $div.animate({ - opacity: error ? 0.9 : 0 - }, 1000, function() { - if (error) { - $div.on({ - click: function() { - $div.remove(); - } - }); - } else { - clearInterval(loadingInterval); - $div.remove(); - } - }); - }; - /*@ - Ox.UI.isElement Checks if an object is an Ox.Element - (obj) -> True if object is an Ox.Element - @*/ - Ox.UI.isElement = function(object) { - return Ox.isObject(object) && 'oxid' in object; - }; - // ... - Ox.isOxElement = Ox.UI.isOxElement = function(element) { - return !!$(element).data('oxid'); - }; - //@ Ox.UI.PATH Path of Ox.UI - Ox.UI.PATH = Ox.PATH + 'Ox.UI/'; - //@ Ox.UI.SCOLLBAR_SIZE size of scrollbar - Ox.UI.SCROLLBAR_SIZE = $.browser.webkit ? 8 : (function() { - var inner = Ox.$('

').css({ - height: '200px', - width: '100%' - }), - outer = Ox.$('

').css({ - height: '150px', - left: 0, - overflow: 'hidden', - position: 'absolute', - top: 0, - visibility: 'hidden', - width: '200px' - }).append(inner).appendTo($('body')), - width = inner[0].offsetWidth; - outer.css({overflow: 'scroll'}); - width = 1 + width - (inner[0].offsetWidth == width - ? outer[0].clientWidth : inner[0].offsetWidth); - outer.remove(); - return width; - })(); - - } - };