despaghettify
This commit is contained in:
rolux
parent
8a447b8640
commit
de857d0af2
2 changed files with 570 additions and 286 deletions
91
index.css
91
index.css
|
|
@ -8,70 +8,35 @@ body.OxThemeModern {
|
||||||
background-color: rgb(16, 16, 16);
|
background-color: rgb(16, 16, 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
.animate, .loading {
|
||||||
font-family: Lucida Grande, Segoe UI, DejaVu Sans, Arial;
|
position: absolute;
|
||||||
font-size: 11px;
|
z-index: 1001;
|
||||||
}
|
|
||||||
.OxThemeClassic div {
|
|
||||||
color: rgb(16, 16, 16);
|
|
||||||
}
|
|
||||||
.OxThemeModern div {
|
|
||||||
color: rgb(240, 240, 240);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.OxThemeClassic .bar {
|
.OxCode .doclink {
|
||||||
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 {
|
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.OxComment .doclink {
|
.OxComment .doclink {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.OxComment .doclink:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.loading {
|
||||||
font-weight: bold;
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.OxThemeClassic .logo {
|
||||||
cursor: pointer;
|
box-shadow: 0 0 1px rgb(0, 0, 0)
|
||||||
|
}
|
||||||
|
.OxThemeModern .logo {
|
||||||
|
box-shadow: 0 0 1px rgb(255, 255, 255)
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
|
|
@ -104,11 +69,17 @@ div {
|
||||||
}
|
}
|
||||||
.OxThemeModern .page {
|
.OxThemeModern .page {
|
||||||
border-color: rgb(48, 48, 48);
|
border-color: rgb(48, 48, 48);
|
||||||
background: rgb(255, 255, 255);
|
background: rgb(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui {
|
.screen {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
font-size: 12px;
|
height: 100%;
|
||||||
text-align: center;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
.OxThemeClassic .screen {
|
||||||
|
background-color: rgba(240, 240, 240, 1);
|
||||||
|
}
|
||||||
|
.OxThemeModern .screen {
|
||||||
|
background-color: rgba(16, 16, 16, 1);
|
||||||
|
}
|
||||||
|
|
|
||||||
765
index.js
765
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(
|
||||||
|
'<span class="OxIdentifier">Ox</span>'
|
||||||
|
+ '(<span class="OxOperator">\.</span>'
|
||||||
|
+ '<span class="OxIdentifier">UI</span>)?'
|
||||||
|
+ '<span class="OxOperator">\.</span>'
|
||||||
|
+ '<span class="OxIdentifier">([\\$\\w]+)<\/span>',
|
||||||
|
'g'
|
||||||
|
),
|
||||||
|
function (str) {
|
||||||
|
return '<a href="#doc/' + Ox.stripTags(str)
|
||||||
|
+ '" class="doclink">' + str + '</a>';
|
||||||
|
}
|
||||||
|
],
|
||||||
|
comment: [
|
||||||
|
/\b(Ox\.\w+)\b/g,
|
||||||
|
'<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
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.$('<link>').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.$('<img>')
|
||||||
|
.addClass('loading')
|
||||||
|
.attr({src: app.getSRC('loading')})
|
||||||
|
.css(app.getCSS('loading'));
|
||||||
|
},
|
||||||
|
logo: function() {
|
||||||
|
return Ox.$('<img>')
|
||||||
|
.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) {
|
||||||
|
$('<div>')
|
||||||
|
.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.$('<div>').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() {
|
Ox.load(function() {
|
||||||
|
|
||||||
var app = {
|
var app = {
|
||||||
|
|
@ -6,34 +433,16 @@ Ox.load(function() {
|
||||||
|
|
||||||
data: {},
|
data: {},
|
||||||
|
|
||||||
|
hash: '',
|
||||||
|
|
||||||
fn: {
|
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() {
|
getCSS: function() {
|
||||||
return app.fn.url() ? {
|
return app.fn.hash() ? {
|
||||||
panel: {
|
screen: {
|
||||||
opacity: 1
|
opacity: 0
|
||||||
},
|
},
|
||||||
line: {
|
label: {
|
||||||
top: '26px',
|
top: '26px',
|
||||||
left: '4px',
|
left: '4px',
|
||||||
width: '32px',
|
width: '32px',
|
||||||
|
|
@ -46,23 +455,23 @@ Ox.load(function() {
|
||||||
width: '32px',
|
width: '32px',
|
||||||
height: '16px'
|
height: '16px'
|
||||||
},
|
},
|
||||||
sections: {
|
menu: {
|
||||||
top: '8px',
|
top: '8px',
|
||||||
left: app.window.center - 256 + 'px'
|
width: '512px'
|
||||||
},
|
},
|
||||||
themes: {
|
switch: {
|
||||||
top: '8px',
|
top: '8px',
|
||||||
right: '8px'
|
right: '8px'
|
||||||
}
|
}
|
||||||
} : {
|
} : {
|
||||||
panel: {
|
screen: {
|
||||||
opacity: 0
|
opacity: 1
|
||||||
},
|
},
|
||||||
line: {
|
label: {
|
||||||
top: app.window.middle + 16 + 'px',
|
top: app.window.middle + 16 + 'px',
|
||||||
left: app.window.center - 192 + 'px',
|
left: app.window.center - 128 + 'px',
|
||||||
width: '384px',
|
width: '240px',
|
||||||
fontSize: '12px',
|
fontSize: '11px',
|
||||||
opacity: 1
|
opacity: 1
|
||||||
},
|
},
|
||||||
logo: {
|
logo: {
|
||||||
|
|
@ -71,13 +480,13 @@ Ox.load(function() {
|
||||||
width: '256px',
|
width: '256px',
|
||||||
height: '128px'
|
height: '128px'
|
||||||
},
|
},
|
||||||
sections: {
|
menu: {
|
||||||
top: app.window.middle + 48 + 'px',
|
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',
|
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() {
|
getLogoURL: function() {
|
||||||
return 'source/Ox.UI/themes/' + app.user('theme')
|
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() {
|
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() {
|
hashchange: function() {
|
||||||
var url = app.fn.url(),
|
return;
|
||||||
section = url.split('/')[0];
|
var hash = app.fn.hash(),
|
||||||
app.fn[!url || !app.url ? 'animate' : 'void'](function() {
|
section = hash.split('/')[0];
|
||||||
if (section && section != app.url.split('/')[0] && !app.foo) {
|
app.fn[!hash || !app.hash ? 'animate' : 'void'](function() {
|
||||||
|
if (section != app.hash.split('/')[0]) {
|
||||||
app.fn.setSection(section);
|
app.fn.setSection(section);
|
||||||
}
|
}
|
||||||
app.url = url;
|
hash && app.user({hash: hash});
|
||||||
|
app.hash = hash;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
load: function() {
|
load: function() {
|
||||||
var $window = Ox.$(window);
|
app.fn.setTheme(app.user('theme') || 'classic')
|
||||||
app.fn.setTheme(app.user('theme') || 'classic');
|
app.window = app.fn.window();
|
||||||
!app.user('url') && app.user({url: 'about'});
|
var theme = app.user('theme') || 'classic',
|
||||||
app.fn.render();
|
$body = Ox.$('body'),
|
||||||
Ox.getJSON('index.json', function(data) {
|
$screen = Ox.$('<div>')
|
||||||
app.data = data;
|
.addClass('loading screen');
|
||||||
});
|
$icon = Ox.$('<img>')
|
||||||
$window.bind({
|
.addClass('loading icon')
|
||||||
|
.attr({
|
||||||
|
src: 'build/Ox.UI/themes/'
|
||||||
|
+ theme + '/svg/symbolLoadingAnimated.svg'
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
top: app.window.middle + 40 + 'px'
|
||||||
|
})
|
||||||
|
.appendTo($screen);
|
||||||
|
$logo = Ox.$('<img>')
|
||||||
|
.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,
|
hashchange: app.fn.hashchange,
|
||||||
resize: app.fn.resize
|
resize: app.fn.resize
|
||||||
});
|
});
|
||||||
window.oxjs = app; // so that you can play with it in the console
|
setTimeout(function() {
|
||||||
Ox.load({UI: {theme: app.user('theme')}}, app.fn.render);
|
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() {
|
!app.user('hash') && app.user({hash: 'about'});
|
||||||
var $body = (Ox.UI ? $ : Ox.$)('body').empty();
|
app.fn.hashchange();
|
||||||
Ox.forEach(app.fn.getCSS(), function(css, element) {
|
app.$ui.screen = $('.screen');
|
||||||
app.$ui[element] = app.ui[element]().css(
|
app.$ui.logo = $('.logo')
|
||||||
Ox.extend(css, element == 'logo' ? app.fn.getLogoCSS() : {})
|
.bind({
|
||||||
).appendTo($body);
|
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() {
|
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) {
|
void: function(callback) {
|
||||||
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() {
|
user: Ox.localStorage('OxJS')
|
||||||
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.$)('<div>')
|
|
||||||
.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.$)('<img>')
|
|
||||||
.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) {
|
|
||||||
$('<div>')
|
|
||||||
.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.$('<div>').append(
|
|
||||||
Ox.$('<div>').addClass('bar').css({
|
|
||||||
width: '100%',
|
|
||||||
height: '32px'
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
readme: function() {
|
|
||||||
return Ox.Element();
|
|
||||||
},
|
|
||||||
|
|
||||||
sections: function() {
|
|
||||||
var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui sections');
|
|
||||||
[
|
|
||||||
'about', 'readme', 'examples', 'doc',
|
|
||||||
'downloads', 'dev', 'contact'
|
|
||||||
].forEach(function(section, i) {
|
|
||||||
Ox.$('<span>')
|
|
||||||
.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.$)('<div>').addClass('ui themes');
|
|
||||||
['classic', 'modern'].forEach(function(theme, i) {
|
|
||||||
Ox.$('<span>')
|
|
||||||
.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'),
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
app.url = app.fn.url();
|
|
||||||
app.window = app.fn.window();
|
|
||||||
app.fn.load();
|
app.fn.load();
|
||||||
|
|
||||||
});
|
window.oxjs = app; // so that you can play with it in the console
|
||||||
|
|
||||||
|
});
|
||||||
|
*/
|
||||||
Loading…
Reference in a new issue