From de857d0af25f18c894a139a939061758068d9367 Mon Sep 17 00:00:00 2001 From: rolux Date: Sat, 7 Apr 2012 01:42:54 +0200 Subject: [PATCH] despaghettify --- index.css | 91 +++---- index.js | 765 ++++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 570 insertions(+), 286 deletions(-) diff --git a/index.css b/index.css index 8f65dbda..785e87d5 100644 --- a/index.css +++ b/index.css @@ -8,70 +8,35 @@ body.OxThemeModern { background-color: rgb(16, 16, 16); } -div { - font-family: Lucida Grande, Segoe UI, DejaVu Sans, Arial; - font-size: 11px; -} -.OxThemeClassic div { - color: rgb(16, 16, 16); -} -.OxThemeModern div { - color: rgb(240, 240, 240); +.animate, .loading { + position: absolute; + z-index: 1001; } -.OxThemeClassic .bar { - background-image: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); - background-image: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); - background-image: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); -} -.OxThemeModern .bar { - background-image: -moz-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32)); - background-image: -o-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32)); - background-image: -webkit-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32)); -} - -.button { - padding: 0 4px 0 4px; - border-radius: 4px; - margin: 0 3px 0 3px; - cursor: pointer; -} -.button.selected { - cursor: default; -} -.button:hover { - box-shadow: 0 0 1px rgb(0, 0, 0); -} -.OxThemeClassic .button:hover { - //background-color: rgba(255, 255, 255, 0.5); - box-shadow: 0 0 1px rgba(0, 0, 0, 1); -} -.OxThemeClassic .button.selected { - background-color: rgb(255, 255, 255); - box-shadow: 0 0 1px rgb(0, 0, 0); -} -.OxThemeModern .button:hover { - //background-color: rgba(0, 0, 0, 0.5); - box-shadow: 0 0 1px rgba(255, 255, 255, 1); -} -.OxThemeModern .button.selected { - background-color: rgb(0, 0, 0); - box-shadow: 0 0 1px rgb(255, 255, 255); -} - -.doclink { +.OxCode .doclink { text-decoration: underline; } .OxComment .doclink { font-size: 12px; + text-decoration: none; +} +.OxComment .doclink:hover { + text-decoration: underline; } -.line { - font-weight: bold; +.loading { + left: 0; + right: 0; + width: 32px; + height: 32px; + margin: auto; } -.logo { - cursor: pointer; +.OxThemeClassic .logo { + box-shadow: 0 0 1px rgb(0, 0, 0) +} +.OxThemeModern .logo { + box-shadow: 0 0 1px rgb(255, 255, 255) } .page { @@ -104,11 +69,17 @@ div { } .OxThemeModern .page { border-color: rgb(48, 48, 48); - background: rgb(255, 255, 255); + background: rgb(0, 0, 0); } -.ui { - position: absolute; - font-size: 12px; - text-align: center; -} \ No newline at end of file +.screen { + width: 100%; + height: 100%; + z-index: 1000; +} +.OxThemeClassic .screen { + background-color: rgba(240, 240, 240, 1); +} +.OxThemeModern .screen { + background-color: rgba(16, 16, 16, 1); +} diff --git a/index.js b/index.js index c90d8e5f..0370a7b4 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,430 @@ +Ox.load(function() { + + var app = { + $ui: {}, + animate: function() { + var home = !app.url.get(); + if (home) { + app.$ui.logo.attr({ + src: app.getSRC('logo') + }); + app.$ui.screen.show(); + app.$ui.label.show(); + app.$ui.menu.options({value: ''}).show(); + app.$ui.panel.find('.OxButtonGroup').css({opacity: 0}); + } else { + app.$ui.menu.options({value: app.user('url').split('/')[0]}); + } + [ + 'screen', 'logo', 'label', 'menu', 'switch' + ].forEach(function(element) { + app.$ui[element].stop().animate( + app.getCSS(element), + 1000, + element == 'screen' ? function() { + if (!home) { + app.$ui.logo.attr({ + src: app.getSRC('logo') + }); + app.$ui.panel.find('.OxButtonGroup').css({opacity: 1}); + app.$ui.screen.hide(); + app.$ui.label.show(); + app.$ui.menu.hide().options({value: ''}); + } + } : void 0 + ); + }); + }, + data: {}, + getCSS: function(element) { + var css = {}, + home = !app.url.get(), + center = Math.floor(window.innerWidth / 2), + middle = Math.floor(window.innerHeight / 2); + if (element == 'label') { + css = home ? { + top: middle + 16 + 'px', + left: center - 128 + 'px', + width: '240px', + fontSize: '11px', + opacity: 1 + } : { + top: '26px', + left: '4px', + width: '32px', + fontSize: '1px', + opacity: 0 + } + } else if (element == 'loading') { + css.top = middle + 40 + 'px' + } else if (element == 'logo') { + css = home || !app.loaded ? { + left: center - 128 + 'px', + top: middle - 128 + 'px', + width: '256px', + height: '128px' + } : { + top: '8px', + left: '8px', + width: '32px', + height: '16px' + }; + } else if (element == 'menu') { + css = home ? { + top: middle + 48 + 'px', + left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px' + } : { + top: '8px', + left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px' + }; + } else if (element == 'screen') { + css.opacity = home ? 1 : 0; + } else if (element == 'switch') { + css = home ? { + top: middle + 80 + 'px', + right: Math.floor(center - app.$ui.switch.width() / 2) + 'px' + } : { + top: '8px', + right: '8px' + }; + } + return css; + }, + getSRC: function(element) { + var src, + home = !app.url.get(), + theme = app.user('theme'); + if (element == 'icon') { + src = 'source/Ox.UI/themes/' + theme + + '/png/icon16.png'; + } else if (element == 'loading') { + src = 'source/Ox.UI/themes/' + theme + + '/svg/symbolLoadingAnimated.svg' + } else if (element == 'logo') { + src = 'source/Ox.UI/themes/' + theme + + '/png/logo' + (home || !app.loaded ? 128 : 16) + '.png' + } + return src; + }, + init: function() { + app.loadScreen(function() { + app.loadData(function() { + Ox.load({UI: {theme: app.theme}}, app.load); + }); + }); + }, + load: function() { + var url = app.url.get(); + if (url) { + app.user({url: url}) + } else if (!app.user('url')) { + app.user({url: 'about'}); + } + app.$ui.panel = app.ui.panel() + .select(app.user('url')) + .appendTo(Ox.$body); + // jqueryfy + ['screen', 'logo', 'loading'].forEach(function(element) { + app.$ui[element] = $('.' + element); + }); + app.$ui.loading.animate({opacity: 0}, 500, function() { + app.$ui.loading.remove(); + }); + if (!url) { + app.$ui.logo + .css({cursor: 'pointer'}) + .bind({ + click: function() { + app.url.set(app.url.get() ? '' : app.user('url')); + } + }); + ['label', 'menu', 'switch'].forEach(function(element) { + app.$ui[element] = app.ui[element]() + .css({opacity: 0}) + .appendTo(Ox.$body); + app.$ui[element] + .css(app.getCSS(element)) + .animate({opacity: 1}, 500); + }); + } else { + ['label', 'menu', 'switch'].forEach(function(element) { + app.$ui[element] = app.ui[element]().appendTo(Ox.$body); + app.$ui[element].css(app.getCSS(element)); + }); + app.$ui.menu.hide(); + app.$ui.screen.animate({opacity: 0}, 500, function() { + app.$ui.screen.hide(); + }); + app.$ui.logo.animate({opacity: 0}, 500, function() { + app.$ui.logo + .attr({src: app.getSRC('logo')}) + .css(app.getCSS('logo')) + .animate({opacity: 1}, 500, function() { + app.$ui.logo + .css({cursor: 'pointer'}) + .bind({ + click: function() { + app.url.set(app.url.get() ? '' : app.user('url')); + } + }); + }); + }); + } + Ox.$window.bind({ + hashchange: app.urlchange + }); + app.loaded = true; + }, + loadData: function(callback) { + Ox.getJSON('index.json', function(data) { + app.data = data; + callback(); + }); + }, + loaded: false, + loadScreen: function(callback) { + app.setTheme(app.user('theme') || 'classic'); + app.$ui.screen = app.ui.screen(); + app.$ui.loading = app.ui.loading(); + app.$ui.logo = app.ui.logo() + .bindOnce({ + load: function() { + Ox.$('body') + .append(app.$ui.screen) + .append(app.$ui.logo) + .append(app.$ui.loading); + callback(); + } + }); + Ox.$(window).bind({ + resize: app.resize + }); + }, + previousURL: '', + re: { + code: [ + new RegExp( + 'Ox' + + '(\.' + + 'UI)?' + + '\.' + + '([\\$\\w]+)<\/span>', + 'g' + ), + function (str) { + return '' + str + ''; + } + ], + comment: [ + /\b(Ox\.\w+)\b/g, + '$1' + ] + }, + resize: function() { + [ + 'logo', 'loading', 'label', 'menu', 'switch' + ].forEach(function(element) { + app.$ui[element] && app.$ui[element].css(app.getCSS(element)); + }); + }, + sections: [ + {id: 'about', title: 'About'}, + {id: 'readme', title: 'Readme'}, + {id: 'examples', title: 'Examples'}, + {id: 'doc', title: 'Documentation'}, + {id: 'downloads', title: 'Downloads'}, + {id: 'development', title: 'Development'}, + {id: 'contact', title: 'Contact'} + ], + setTheme: function(theme) { + app.user({theme: theme}); + (Ox.$('#icon') || Ox.$('').attr({ + id: 'icon', + rel: 'shortcut icon', + type: 'image/png' + }).appendTo(Ox.$('head'))).attr({ + href: app.getSRC('icon') + }); + app.$ui.logo && app.$ui.logo.attr({ + src: app.getSRC('logo') + }).css(app.getCSS('logo')); + Ox.Theme + ? Ox.Theme(theme) + : Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme) + ); + }, + ui: { + doc: function() { + return Ox.DocPanel({ + files: app.data.documentation, + getModule: function(item) { + var file = item.file.replace(/^dev\//, ''); + return file.split('/')[0]; + }, + getSection: function(item) { + var file = item.file.replace(/^dev\//, ''); + return item.section || file.split('/')[2].split('.')[0]; + }, + path: 'dev/', + replace: [app.re.code], + }); + }, + examples: function() { + return Ox.ExamplePanel({ + examples: app.data.examples, + keywords: /\b(Ox\.[\w]+)\b/g, + path: 'examples/', + replaceCode: [app.re.code], + replaceComment: [app.re.comment], + selected: '' + }) + .bindEvent({ + select: function(data) { + app.url.push( + 'examples' + (data.id ? '/' + data.id : '') + ) + } + }); + }, + label: function() { + return Ox.Label({ + textAlign: 'center', + title: 'A JavaScript Library for Web Applications', + width: 256 + }) + .addClass('label animate') + .bindEvent({ + anyclick: function() { + app.url.set(app.url.get() ? '' : app.user('url')); + } + }); + }, + loading: function() { + return Ox.$('') + .addClass('loading') + .attr({src: app.getSRC('loading')}) + .css(app.getCSS('loading')); + }, + logo: function() { + return Ox.$('') + .addClass('logo animate') + .attr({src: app.getSRC('logo')}) + .css(app.getCSS('logo')); + }, + menu: function() { + return Ox.ButtonGroup({ + buttons: app.sections, + min: 0, + selectable: true, + }) + .addClass('menu animate') + .bindEvent({ + change: function(data) { + data.value && app.url.set(data.value); + } + }) + }, + page: function(page) { + var $element = Ox.Container(); + Ox.get('readme/html/_' + page + '.html', function(html) { + $('
') + .addClass('OxSerif page') + .html(html) + .appendTo($element); + }); + return $element; + }, + panel: function() { + return Ox.TabPanel({ + content: function(id) { + return app.ui[id] ? app.ui[id]() : app.ui.page(id); + }, + size: 32, + tabs: [ + {id: 'about', title: 'About'}, + {id: 'readme', title: 'Readme'}, + {id: 'examples', title: 'Examples'}, + {id: 'doc', title: 'Documentation'}, + {id: 'downloads', title: 'Downloads'}, + {id: 'dev', title: 'Development'}, + {id: 'contact', title: 'Contact'} + ] + }) + .bindEvent({ + change: function(data) { + app.url.push(data.selected); + } + }); + }, + readme: function() { + return Ox.Element(); + }, + screen: function() { + return Ox.$('
').addClass('screen animate'); + }, + switch: function() { + return Ox.ButtonGroup({ + buttons: [ + {id: 'classic', title: 'Light'}, + {id: 'modern', title: 'Dark'} + ], + selectable: true, + value: app.user('theme') + }) + .addClass('switch animate') + .bindEvent({ + change: function(data) { + app.setTheme(data.value); + } + }); + } + }, + url: { + get: function() { + return window.location.hash.substr(1); + }, + push: function(url) { + history.pushState({}, '', '#' + url); + url && app.user({url: url}); + return app; + }, + set: function() { + window.location.hash = '#' + arguments[0]; + return app; + } + }, + urlchange: function() { + var url = app.url.get(), + section = url.split('/')[0]; + url && app.user({url: url}); + Ox.print( + 'url', url, + 'section', section, + 'prev', app.previousURL, + 'sect', app.previousURL.split('/')[0], + 'user url', app.user('url') + ); + if (section != app.previousURL.split('/')[0]) { + app.$ui.panel.select(section); + } + app[!url || !app.previousURL ? 'animate' : 'void'](function() { + app.previousURL = url; + }); + }, + user: Ox.localStorage('OxJS'), + void: function(callback) { + callback(); + } + }; + + app.init(); + window.oxjs = app; + +}); + + +/* Ox.load(function() { var app = { @@ -6,34 +433,16 @@ Ox.load(function() { data: {}, + hash: '', + fn: { - animate: function(callback) { - var css = app.fn.getCSS(), - home = !app.fn.url(); - home && app.$ui.logo.attr({ - src: app.fn.getLogoURL() - }) - Ox.forEach(app.fn.getCSS(), function(css, element) { - app.$ui[element].animate( - css, - 1000, - element == 'logo' ? function() { - !home && app.$ui.logo.attr({ - src: app.fn.getLogoURL() - }); - callback(); - } : void 0 - ); - }); - }, - getCSS: function() { - return app.fn.url() ? { - panel: { - opacity: 1 + return app.fn.hash() ? { + screen: { + opacity: 0 }, - line: { + label: { top: '26px', left: '4px', width: '32px', @@ -46,23 +455,23 @@ Ox.load(function() { width: '32px', height: '16px' }, - sections: { + menu: { top: '8px', - left: app.window.center - 256 + 'px' + width: '512px' }, - themes: { + switch: { top: '8px', right: '8px' } } : { - panel: { - opacity: 0 + screen: { + opacity: 1 }, - line: { + label: { top: app.window.middle + 16 + 'px', - left: app.window.center - 192 + 'px', - width: '384px', - fontSize: '12px', + left: app.window.center - 128 + 'px', + width: '240px', + fontSize: '11px', opacity: 1 }, logo: { @@ -71,13 +480,13 @@ Ox.load(function() { width: '256px', height: '128px' }, - sections: { + menu: { top: app.window.middle + 48 + 'px', - left: app.window.center - 256 + 'px' + left: Math.ceil(app.window.center - app.menuWidth / 2) + 'px', }, - themes: { + switch: { top: app.window.middle + 80 + 'px', - right: app.window.center - 40 + 'px' + right: Math.floor(app.window.center - app.switchWidth / 2) + 'px' } } }, @@ -89,7 +498,7 @@ Ox.load(function() { getLogoURL: function() { return 'source/Ox.UI/themes/' + app.user('theme') - + '/png/logo' + (app.fn.url() ? 16 : 128) + '.png' + + '/png/logo' + (app.fn.hash() ? 16 : 128) + '.png' }, getLogoCSS: function() { @@ -102,40 +511,104 @@ Ox.load(function() { }; }, + hash: function() { + var len = arguments.length, ret; + if (len == 0) { + ret = window.location.hash.substr(1); + } else { + window.location.hash = '#' + arguments[0]; + ret = app; + } + return ret; + }, + hashchange: function() { - var url = app.fn.url(), - section = url.split('/')[0]; - app.fn[!url || !app.url ? 'animate' : 'void'](function() { - if (section && section != app.url.split('/')[0] && !app.foo) { + return; + var hash = app.fn.hash(), + section = hash.split('/')[0]; + app.fn[!hash || !app.hash ? 'animate' : 'void'](function() { + if (section != app.hash.split('/')[0]) { app.fn.setSection(section); } - app.url = url; + hash && app.user({hash: hash}); + app.hash = hash; }); }, load: function() { - var $window = Ox.$(window); - app.fn.setTheme(app.user('theme') || 'classic'); - !app.user('url') && app.user({url: 'about'}); - app.fn.render(); - Ox.getJSON('index.json', function(data) { - app.data = data; - }); - $window.bind({ + app.fn.setTheme(app.user('theme') || 'classic') + app.window = app.fn.window(); + var theme = app.user('theme') || 'classic', + $body = Ox.$('body'), + $screen = Ox.$('
') + .addClass('loading screen'); + $icon = Ox.$('') + .addClass('loading icon') + .attr({ + src: 'build/Ox.UI/themes/' + + theme + '/svg/symbolLoadingAnimated.svg' + }) + .css({ + top: app.window.middle + 40 + 'px' + }) + .appendTo($screen); + $logo = Ox.$('') + .addClass('loading logo') + .attr({ + src: 'build/Ox.UI/themes/' + + theme + '/png/logo128.png' + }) + .css({ + left: app.window.center - 128 + 'px', + top: app.window.middle - 128 + 'px' + }) + .bind({ + load: function() { + $screen.appendTo($body); + $logo.appendTo($body); + } + }) + Ox.$(window).bind({ hashchange: app.fn.hashchange, resize: app.fn.resize }); - window.oxjs = app; // so that you can play with it in the console - Ox.load({UI: {theme: app.user('theme')}}, app.fn.render); - }, + setTimeout(function() { + Ox.getJSON('index.json', function(data) { + app.data = data; + Ox.load({UI: {theme: theme}}, function() { + app.$ui.panel = app.ui.panel().appendTo(Ox.$body); + app.$ui.panel.find('.OxButtonGroup').css({opacity: 0}); - render: function() { - var $body = (Ox.UI ? $ : Ox.$)('body').empty(); - Ox.forEach(app.fn.getCSS(), function(css, element) { - app.$ui[element] = app.ui[element]().css( - Ox.extend(css, element == 'logo' ? app.fn.getLogoCSS() : {}) - ).appendTo($body); - }); + !app.user('hash') && app.user({hash: 'about'}); + app.fn.hashchange(); + app.$ui.screen = $('.screen'); + app.$ui.logo = $('.logo') + .bind({ + click: function() { + app.fn.hash( + app.fn.hash() ? '' : app.user('hash') + ); + app.fn.animate(); + } + }); + $('.icon').animate({opacity: 0}, 1000, function() { + $('.icon').remove(); + }); + ['label', 'menu', 'switch'].forEach(function(element) { + app.$ui[element] = app.ui[element]() + .appendTo(Ox.$body); + }); + app.menuWidth = app.$ui.menu.width(); + app.switchWidth = app.$ui.switch.width(); + css = app.fn.getCSS(); + ['label', 'menu', 'switch'].forEach(function(element) { + app.$ui[element] + .css(Ox.extend(css[element], {opacity: 0})) + .animate({opacity: 1}, 1000); + }); + }); + }); + }, 2500); }, resize: function() { @@ -168,23 +641,6 @@ Ox.load(function() { ); }, - url: function() { - var len = arguments.length, ret; - if (len == 0) { - ret = window.location.hash.substr(1); - } else { - if (len == 2) { - app.foo = true; - } - window.location.hash = '#' + arguments[0]; - if (len == 2) { - app.foo = false; - } - ret = app; - } - return ret; - }, - void: function(callback) { callback(); }, @@ -223,158 +679,15 @@ Ox.load(function() { }, - ui: { - doc: function() { - return Ox.DocPanel({ - files: app.data.documentation, - getModule: function(item) { - var file = item.file.replace(/^dev\//, ''); - return file.split('/')[0]; - }, - getSection: function(item) { - var file = item.file.replace(/^dev\//, ''); - return item.section || file.split('/')[2].split('.')[0]; - }, - path: 'dev/', - replace: [app.re.code], - }); - }, - examples: function() { - return Ox.ExamplePanel({ - examples: app.data.examples, - keywords: /\b(Ox\.[\w]+)\b/g, - path: 'examples/', - replaceCode: [app.re.code], - replaceComment: [app.re.comment], - selected: '' - }) - .bindEvent({ - select: function(data) { - app.fn.url( - 'examples' + (data.id ? '/' + data.id : '') - ) - } - }); - }, - - line: function() { - return (Ox.UI ? $ : Ox.$)('
') - .addClass('ui line') - .css({ - top: app.window.middle + 12 + 'px', - left: app.window.center - 192 + 'px', - }) - .html('A JavaScript Library for Web Applications') - }, - - logo: function() { - return (Ox.UI ? $ : Ox.$)('') - .addClass('ui logo') - .attr({ - src: app.fn.getLogoURL() - }) - .bind({ - click: function() { - app.fn.url(app.fn.url() ? '' : app.user('url')); - } - }); - }, - - page: function(page) { - var $element = Ox.Container(); - Ox.get('readme/html/_' + page + '.html', function(html) { - $('
') - .addClass('OxSerif page') - .html(html) - .appendTo($element); - }); - return $element; - }, - - panel: function() { - return Ox.UI - ? Ox.SplitPanel({ - elements: [ - { - element: Ox.Bar({size: 32}), - size: 32 - }, - { - element: Ox.Element() - } - ], - orientation: 'vertical' - }) - .css({opacity: 0}) - : Ox.$('
').append( - Ox.$('
').addClass('bar').css({ - width: '100%', - height: '32px' - }) - ); - }, - - readme: function() { - return Ox.Element(); - }, - - sections: function() { - var $element = (Ox.UI ? $ : Ox.$)('
').addClass('ui sections'); - [ - 'about', 'readme', 'examples', 'doc', - 'downloads', 'dev', 'contact' - ].forEach(function(section, i) { - Ox.$('') - .addClass('button' + ( - app.user('section') == section ? ' selected' : '' - )) - .html(Ox.toTitleCase( - section == 'doc' ? 'documentation' - : section == 'dev' ? 'development' - : section - )) - .bind({ - click: function() { - app.$ui.sections.children().removeClass('selected'); - $(this).addClass('selected'); - app.fn.url(section); - } - }) - .appendTo($element); - }); - return $element; - }, - - themes: function() { - var $element = (Ox.UI ? $ : Ox.$)('
').addClass('ui themes'); - ['classic', 'modern'].forEach(function(theme, i) { - Ox.$('') - .addClass('button' + ( - app.user('theme') == theme ? ' selected' : '' - )) - .html(theme == 'classic' ? 'Light' : 'Dark') - .bind({ - click: function() { - app.$ui.themes.children().removeClass('selected'); - $(this).addClass('selected'); - app.fn.setTheme(theme) - } - }) - .appendTo($element); - }); - return $element; - } - - }, - - user: Ox.localStorage('OxJS'), + user: Ox.localStorage('OxJS') }; - app.url = app.fn.url(); - app.window = app.fn.window(); app.fn.load(); -}); \ No newline at end of file + window.oxjs = app; // so that you can play with it in the console + +}); +*/ \ No newline at end of file