oxjs/index.js

732 lines
30 KiB
JavaScript
Raw Normal View History

2012-05-29 22:28:29 +00:00
'use strict';
window.onerror = function(error, url) {
if (!url) {
document.onreadystatechange = function() {
if (document.readyState == 'complete') {
var logo = new Image();
logo.onload = function() {
var warning = document.createElement('div');
warning.innerHTML = 'Please open this file over HTTP.';
warning.style.margin = '16px';
document.body.appendChild(warning);
}
2013-02-10 11:45:11 +00:00
logo.src = 'source/Ox.UI/themes/oxlight/png/logo128.png';
document.body.style.backgroundColor = 'rgb(224, 224, 224)';
document.body.style.color = 'rgb(64, 64, 64)';
document.body.style.fontFamily = [
'Lucida Grande', 'Segoe UI', 'DejaVu Sans',
'Lucida Sans Unicode', 'Helvetica', 'Arial', 'sans-serif'
].join(', ');
document.body.style.fontSize = '13px';
document.body.style.margin = Math.floor(
window.innerHeight / 2
) - 128 + 'px';
document.body.style.textAlign = 'center';
document.body.appendChild(logo);
}
};
}
};
Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
window.location.href
), function() {
var app = window.oxjs = {
2012-04-06 23:42:54 +00:00
$ui: {},
animate: function() {
2012-07-05 19:37:17 +00:00
var home = app.url.parse().page == '';
2012-04-08 12:48:07 +00:00
app.state.animating = true;
2012-04-06 23:42:54 +00:00
if (home) {
2012-06-18 12:15:47 +00:00
app.$ui.logo.attr({src: app.getSRC('logo')});
2012-04-06 23:42:54 +00:00
app.$ui.screen.show();
app.$ui.label.show();
app.$ui.menu.options({value: ''}).show();
} else {
app.$ui.menu.options({value: app.user.page});
2012-04-06 23:42:54 +00:00
}
2012-04-08 12:48:07 +00:00
app.$ui.panel.find('.OxButtonGroup').css({opacity: 0});
2012-04-06 23:42:54 +00:00
[
'screen', 'logo', 'label', 'menu', 'switch'
].forEach(function(element) {
app.$ui[element].stop().animate(
app.getCSS(element),
500,
2012-04-06 23:42:54 +00:00
element == 'screen' ? function() {
if (!home) {
2012-06-18 12:15:47 +00:00
app.$ui.logo.attr({src: app.getSRC('logo')});
app.$ui.panel.find('.OxButtonGroup').css({
opacity: 1
2012-04-06 23:42:54 +00:00
});
app.$ui.screen.hide();
2012-04-07 14:42:57 +00:00
app.$ui.label.hide();
2012-04-06 23:42:54 +00:00
app.$ui.menu.hide().options({value: ''});
}
2012-04-08 12:48:07 +00:00
app.state.animating = false;
2012-04-06 23:42:54 +00:00
} : void 0
);
});
},
2012-04-07 14:42:57 +00:00
data: {
2012-06-17 11:10:29 +00:00
downloads: {},
2012-04-08 18:18:25 +00:00
html: {},
2013-02-10 11:45:11 +00:00
legacyThemes: {classic: 'oxlight', modern: 'oxdark'},
2012-04-08 12:48:07 +00:00
pages: [
2012-04-07 14:42:57 +00:00
{id: 'about', title: 'About'},
{id: 'readme', title: 'Readme'},
{id: 'examples', title: 'Examples'},
{id: 'doc', title: 'Documentation'},
2012-06-17 09:19:01 +00:00
{id: 'download', title: 'Download'},
2012-04-07 14:42:57 +00:00
{id: 'development', title: 'Development'}
],
user: {
item: {doc: '', examples: '', readme: ''},
page: '',
previousPage: 'about',
2013-02-10 11:45:11 +00:00
theme: 'oxlight'
},
warning: 'Aw, snap! This website requires an up-to-date, '
+ 'HTML5-compliant web browser. '
+ 'It should work fine in current versions of '
+ '<a href="http://google.com/chrome/">Chrome</a>, '
+ '<a href"http://mozilla.org/firefox/">Firefox</a> and '
+ '<a href="http://apple.com/safari/">Safari</a>, or '
+ 'Internet Explorer with '
+ '<a href="http://google.com/chromeframe/">'
+ 'Chrome Frame</a> installed. '
+ 'To proceed at your own risk, click on the logo above.'
2012-04-07 14:42:57 +00:00
},
db: Ox.localStorage('OxJS'),
2012-04-06 23:42:54 +00:00
getCSS: function(element) {
var css = {},
2012-07-05 19:37:17 +00:00
home = app.url.parse().page == '',
2012-04-06 23:42:54 +00:00
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',
2012-04-08 18:18:25 +00:00
width: '242px',
height: '16px',
fontSize: '12px',
2012-04-19 17:35:27 +00:00
opacity: 1,
overflow: 'visible'
2012-04-06 23:42:54 +00:00
} : {
2012-04-08 18:18:25 +00:00
top: '35px',
2012-04-06 23:42:54 +00:00
left: '4px',
2012-04-08 18:18:25 +00:00
width: '40px',
2012-04-08 12:48:07 +00:00
height: '4px',
2012-04-06 23:42:54 +00:00
fontSize: '1px',
opacity: 0
}
} else if (element == 'loading') {
2012-04-08 18:18:25 +00:00
css.top = middle + 52 + 'px'
2012-04-06 23:42:54 +00:00
} else if (element == 'logo') {
2012-04-08 12:48:07 +00:00
css = home || !app.state.loaded ? {
2012-04-06 23:42:54 +00:00
left: center - 128 + 'px',
top: middle - 128 + 'px',
width: '256px',
2012-04-09 08:36:25 +00:00
height: '128px',
borderRadius: '32px'
2012-04-06 23:42:54 +00:00
} : {
2012-04-09 08:36:25 +00:00
top: '6px',
left: '6px',
2012-04-08 18:18:25 +00:00
width: '48px',
2012-04-09 08:36:25 +00:00
height: '24px',
borderRadius: '6px'
2012-04-06 23:42:54 +00:00
};
} else if (element == 'menu') {
css = home ? {
2012-04-08 18:18:25 +00:00
top: middle + 56 + 'px',
2012-04-06 23:42:54 +00:00
left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
} : {
2012-04-09 08:36:25 +00:00
top: '6px',
2012-04-06 23:42:54 +00:00
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 ? {
2012-04-08 18:18:25 +00:00
top: middle + 96 + 'px',
2012-04-06 23:42:54 +00:00
right: Math.floor(center - app.$ui.switch.width() / 2) + 'px'
} : {
2012-04-09 08:36:25 +00:00
top: '6px',
right: '6px'
2012-04-06 23:42:54 +00:00
};
} else if (element == 'warning') {
css = {
left: center - 128 + 'px',
top: middle + 16 + 'px',
};
2012-04-06 23:42:54 +00:00
}
return css;
},
getSRC: function(element) {
2012-12-28 17:27:41 +00:00
return 'build/Ox.UI/themes/' + app.user.theme + '/' + {
2012-06-18 12:15:47 +00:00
icon: 'png/icon16.png',
loading: 'svg/symbolLoading.svg',
logo: 'png/logo128.png'
}[element];
2012-04-06 23:42:54 +00:00
},
init: function() {
app.user = Ox.extend(app.data.user, app.db());
2013-02-10 11:45:11 +00:00
app.user.theme = app.data.legacyThemes[app.user.theme]
|| app.user.theme;
2012-04-06 23:42:54 +00:00
app.loadScreen(function() {
app.loadData(function() {
Ox.load('UI', {theme: app.user.theme}, app.load);
2012-04-06 23:42:54 +00:00
});
});
},
load: function(browserSupported) {
2012-07-05 19:37:17 +00:00
var data = app.url.parse();
app.user.page = data.page;
if (data.item && data.page in app.user.item) {
app.user.item[data.page] = data.item;
2012-04-06 23:42:54 +00:00
}
app.db(app.user);
2012-04-06 23:42:54 +00:00
app.$ui.panel = app.ui.panel()
.select(app.user.page)
2012-04-06 23:42:54 +00:00
.appendTo(Ox.$body);
2012-07-05 19:37:17 +00:00
// jquerify so that we can animate
2012-04-06 23:42:54 +00:00
['screen', 'logo', 'loading'].forEach(function(element) {
app.$ui[element] = $('.' + element);
});
app.$ui.loading.animate({opacity: 0}, 500, function() {
app.$ui.loading.remove();
});
if (!browserSupported) {
app.$ui.warning = app.ui.warning()
.css(app.getCSS('warning'))
.appendTo(Ox.$body);
app.$ui.logo
.css({cursor: 'pointer'})
.one({
click: function() {
app.$ui.warning.remove();
app.load(true);
}
});
2012-07-05 19:37:17 +00:00
} else if (!data.page) {
2012-04-06 23:42:54 +00:00
app.$ui.logo
.css({cursor: 'pointer'})
2012-06-18 17:12:01 +00:00
.on({click: app.toggle});
2012-04-06 23:42:54 +00:00
['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);
2012-04-08 12:48:07 +00:00
app.$ui[element].css(app.getCSS(element)).hide();
2012-04-06 23:42:54 +00:00
});
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'})
2012-06-18 17:12:01 +00:00
.on({click: app.toggle});
2012-04-06 23:42:54 +00:00
});
2012-06-18 17:12:01 +00:00
app.$ui.switch.css({opacity: 0}).show()
.animate({opacity: 1}, 500);
2012-04-06 23:42:54 +00:00
});
}
2012-07-05 19:37:17 +00:00
Ox.$window.on({hashchange: app.url.change});
2012-04-08 12:48:07 +00:00
app.state.loaded = true;
2012-04-06 23:42:54 +00:00
},
loadData: function(callback) {
var q = '?' + salt,
2012-07-05 17:05:52 +00:00
url = '//oxjs.org/downloads/downloads.json' + q;
2012-06-18 12:15:47 +00:00
Ox.getJSON('index.json' + q, function(data) {
2012-04-07 14:42:57 +00:00
app.data = Ox.extend(app.data, data);
2012-04-08 18:18:25 +00:00
app.data.pages.forEach(function(page) {
var id = page.id == 'doc' ? 'documentation' : page.id;
2012-06-20 09:04:44 +00:00
Ox.get('readme/index/' + id + '.html' + q, function(html) {
2012-06-18 12:15:47 +00:00
app.data.html[id] = html;
if (Ox.len(app.data.html) == app.data.pages.length) {
navigator.onLine ? Ox.getJSON(url, function(data) {
app.data.downloads = data;
2012-06-17 09:19:01 +00:00
callback();
}) : callback();
2012-06-17 09:19:01 +00:00
}
2012-04-08 18:18:25 +00:00
});
2012-06-17 09:19:01 +00:00
});
2012-04-06 23:42:54 +00:00
});
},
loadScreen: function(callback) {
app.setTheme(app.user.theme);
2012-04-06 23:42:54 +00:00
app.$ui.screen = app.ui.screen();
2012-12-29 17:14:43 +00:00
app.$ui.loading = app.ui.loading();
app.$ui.logo = app.ui.logo().one({
load: function() {
Ox.$('body')
.append(app.$ui.screen)
.append(app.$ui.logo)
.append(app.$ui.loading);
app.rotate();
callback();
}
});
Ox.$(window).on({resize: app.resize});
2012-04-06 23:42:54 +00:00
},
2012-04-08 18:18:25 +00:00
patchButtonGroup: function($buttonGroup) {
$buttonGroup.find('.OxButton').css({
height: '22px',
2012-04-09 08:36:25 +00:00
paddingLeft: '8px',
paddingRight: '8px',
fontSize: '13px'
}).find('.OxButton:first-child').css({
2012-04-08 18:18:25 +00:00
borderTopLeftRadius: '6px',
borderBottomLeftRadius: '6px'
}).find('.OxButton:last-child').css({
2012-04-08 18:18:25 +00:00
borderTopRightRadius: '6px',
borderBottomRightRadius: '6px'
});
return $buttonGroup;
2012-04-08 18:18:25 +00:00
},
2012-04-06 23:42:54 +00:00
re: {
code: [
new RegExp(
'<span class="OxIdentifier">Ox</span>'
2012-04-09 08:36:25 +00:00
+ '(<span class="OxOperator">\\.</span>'
2012-04-06 23:42:54 +00:00
+ '<span class="OxIdentifier">UI</span>)?'
2012-04-09 08:36:25 +00:00
+ '<span class="OxOperator">\\.</span>'
2012-06-12 12:32:49 +00:00
+ '<span class="Ox\\w+">([\\w\\$]+)<\\/span>',
2012-04-06 23:42:54 +00:00
'g'
),
function(match) {
var string = Ox.stripTags(match);
return string == 'Ox.My' ? string
: '<a href="#doc/' + string
+ '" class="doclink">' + match + '</a>';
2012-04-06 23:42:54 +00:00
}
],
comment: [
2012-06-12 12:32:49 +00:00
/\b(Ox\.[\w\$]+)/g,
function(match) {
return match == 'Ox.My' ? match
: '<a href="#doc/' + match
+ '" class="OxMonospace doclink">' + match + '</a>'
}
2012-04-07 14:42:57 +00:00
],
2012-06-17 11:10:29 +00:00
size: [
/\{size\.(\w+)\}/g,
function(match, key) {
2012-06-20 13:51:09 +00:00
return app.data.downloads.size ? ' (' + Ox.formatValue(
2012-06-17 11:10:29 +00:00
app.data.downloads.size[key], 'B'
) + ')' : '';
}
],
2012-04-07 14:42:57 +00:00
version: [
'{version}',
function() {
2012-06-17 11:10:29 +00:00
var version = app.data.downloads.version,
current = 'You\'re currently running version '
+ Ox.VERSION + '.',
2012-06-20 13:51:09 +00:00
latest = version ? 'The latest version is ' + version
+ ' (' + app.data.downloads.date.slice(0, 10)
+ ').' : '';
2012-06-17 11:10:29 +00:00
return version ? latest + (
/^https?:\/\/(www\.)?oxjs\.org\//.test(
window.location.href
) ? ''
: version == Ox.VERSION ? ' You\'re up to date.'
: ' ' + current
2012-06-17 09:19:01 +00:00
) : current;
2012-04-07 14:42:57 +00:00
}
2012-04-06 23:42:54 +00:00
]
},
resize: function() {
[
'logo', 'loading', 'label', 'menu', 'switch'
].forEach(function(element) {
app.$ui[element] && app.$ui[element].css(app.getCSS(element));
});
},
2012-05-29 22:28:29 +00:00
rotate: function() {
var css, deg = 0,
previousTime = +new Date(),
interval = setInterval(function() {
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000,
loadingIcon = document.getElementById('loadingIcon');
if (loadingIcon) {
previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
css = 'rotate(' + deg + 'deg)';
loadingIcon.style.MozTransform = css;
loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = css;
loadingIcon.style.transform = css;
2012-05-29 22:28:29 +00:00
} else {
clearInterval(interval);
}
}, 83);
},
2012-04-06 23:42:54 +00:00
setTheme: function(theme) {
app.user.theme = theme;
app.db(app.user);
2012-04-06 23:42:54 +00:00
(Ox.$('#icon') || Ox.$('<link>').attr({
id: 'icon',
rel: 'shortcut icon',
type: 'image/png'
}).appendTo(Ox.$('head'))).attr({
href: app.getSRC('icon')
});
2012-04-07 14:42:57 +00:00
app.$ui.logo && app.$ui.logo
.attr({src: app.getSRC('logo')})
.css(app.getCSS('logo'));
2012-04-06 23:42:54 +00:00
Ox.Theme
? Ox.Theme(theme)
2013-07-03 09:12:35 +00:00
: Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme));
2012-04-06 23:42:54 +00:00
},
2012-04-08 12:48:07 +00:00
state: {
animating: false,
loaded: false
},
toggle: function() {
2012-07-05 19:37:17 +00:00
!app.state.animating && app.url.push(
app.url.parse().page ? {
page: '',
item: ''
} : {
page: app.user.previousPage,
item: app.user.previousPage in app.user.item
? app.user.item[app.user.previousPage] : ''
}
2012-04-08 12:48:07 +00:00
);
},
2012-04-06 23:42:54 +00:00
ui: {
doc: function() {
return Ox.DocPanel({
2012-04-09 08:36:25 +00:00
element: $('<div>')
2012-06-12 12:32:49 +00:00
.addClass('page')
2012-04-09 08:36:25 +00:00
.css({
margin: '32px',
width: window.innerWidth - 640 + 'px'
})
2012-06-18 12:15:47 +00:00
.html(app.data.html.documentation),
2012-06-18 17:12:01 +00:00
examples: app.data.docItems ? null : app.data.examples,
examplesPath: app.data.docItems ? null : 'examples/',
files: app.data.docItems ? null : app.data.documentation,
2012-04-08 18:18:25 +00:00
getModule: function(item) {
2012-06-18 17:12:01 +00:00
return item.file.replace(/^dev\//, '')
.split('/')[0];
2012-04-08 18:18:25 +00:00
},
getSection: function(item) {
2012-06-18 17:12:01 +00:00
return item.section
|| item.file.replace(/^dev\//, '')
.split('/')[2].split('.')[0];
2012-04-08 18:18:25 +00:00
},
2012-06-18 17:12:01 +00:00
items: app.data.docItems || null,
2012-04-08 18:18:25 +00:00
path: 'dev/',
references: /\b(Ox\.[\w\$]+(?=\W))/g,
replace: [app.re.code],
2012-06-18 17:12:01 +00:00
results: app.data.testResults || null,
2012-06-12 11:18:42 +00:00
selected: app.user.item.doc,
showLoading: true,
2012-06-12 11:18:42 +00:00
showTests: true
2012-04-08 18:18:25 +00:00
})
.bindEvent({
2012-06-12 14:26:55 +00:00
example: function(data) {
2012-07-05 19:37:17 +00:00
app.url.push({page: 'examples', item: data.id});
2012-06-12 14:26:55 +00:00
},
2012-04-08 18:18:25 +00:00
select: function(data) {
2012-07-05 21:08:19 +00:00
app.url.push({item: data.id});
2012-04-08 18:18:25 +00:00
}
2012-04-09 08:36:25 +00:00
})
.bindEventOnce({
load: function(data) {
app.data.docItems = data.items;
2012-06-12 14:55:13 +00:00
},
tests: function(data) {
app.data.testResults = data.results;
2012-04-09 08:36:25 +00:00
}
2012-04-08 18:18:25 +00:00
});
2012-04-06 23:42:54 +00:00
},
examples: function() {
return Ox.ExamplePanel({
2012-04-09 08:36:25 +00:00
element: $('<div>')
2012-06-12 12:32:49 +00:00
.addClass('page')
2012-04-09 08:36:25 +00:00
.css({
margin: '32px',
width: window.innerWidth - 640 + 'px'
})
2012-06-18 12:15:47 +00:00
.html(app.data.html.examples),
2012-04-06 23:42:54 +00:00
examples: app.data.examples,
2012-07-05 19:37:17 +00:00
mode: app.url.parse().mode || 'source',
2012-04-06 23:42:54 +00:00
path: 'examples/',
references: /\b(Ox\.[\w\$]+(?=\W))/g,
2012-04-06 23:42:54 +00:00
replaceCode: [app.re.code],
replaceComment: [app.re.comment],
selected: app.user.item.examples
2012-04-06 23:42:54 +00:00
})
.bindEvent({
2012-07-05 19:37:17 +00:00
change: function(data) {
app.url.push({
mode: data.value == 'live' ? 'live' : ''
});
},
2012-04-06 23:42:54 +00:00
select: function(data) {
2012-07-05 21:08:19 +00:00
app.url.push({item: data.id});
2012-04-06 23:42:54 +00:00
}
});
},
label: function() {
return Ox.Label({
textAlign: 'center',
title: 'A JavaScript Library for Web Applications',
width: 256
})
.addClass('label animate')
2012-04-08 18:18:25 +00:00
.css({
paddingTop: '4px',
paddingBottom: '4px',
borderRadius: '6px'
2012-04-06 23:42:54 +00:00
});
},
loading: function() {
return Ox.$('<img>')
.addClass('loading')
.attr({id: 'loadingIcon', src: app.getSRC('loading')})
2012-04-06 23:42:54 +00:00
.css(app.getCSS('loading'));
},
logo: function() {
return Ox.$('<img>')
.addClass('logo animate')
.attr({src: app.getSRC('logo')})
.css(app.getCSS('logo'));
},
menu: function() {
return app.patchButtonGroup(
Ox.ButtonGroup({
2012-04-08 12:48:07 +00:00
buttons: app.data.pages,
2012-04-06 23:42:54 +00:00
min: 0,
selectable: true,
})
.addClass('menu animate')
.bindEvent({
change: function(data) {
2012-07-05 19:37:17 +00:00
data.value && app.url.push({page: data.value});
2012-04-06 23:42:54 +00:00
}
})
);
2012-04-06 23:42:54 +00:00
},
2012-04-07 14:42:57 +00:00
page: function(page, replace) {
return Ox.Container().append(
$('<div>').addClass('OxSelectable page').html(
2012-06-18 12:15:47 +00:00
app.data.html[page]
2012-06-17 11:10:29 +00:00
.replace(app.re.size[0], app.re.size[1])
.replace(app.re.version[0], app.re.version[1])
)
);
2012-04-06 23:42:54 +00:00
},
panel: function() {
2012-04-08 18:18:25 +00:00
var $panel = Ox.TabPanel({
content: function(id) {
app.$ui[id] && app.$ui[id].remove();
return app.$ui[id] = app.ui[id]
? app.ui[id]() : app.ui.page(id);
},
size: 36,
tabs: app.data.pages
})
.bindEvent({
change: function(data) {
if (app.state.loaded) {
2012-07-05 21:08:19 +00:00
app.url.push({page: data.selected});
2012-04-08 18:18:25 +00:00
}
}
2012-04-08 18:18:25 +00:00
});
app.patchButtonGroup(
$panel.find('.OxButtonGroup').css({top: '6px'})
);
2012-04-08 18:18:25 +00:00
return $panel;
2012-04-06 23:42:54 +00:00
},
readme: function() {
2012-06-20 09:04:44 +00:00
var $list = Ox.Container()
.css({overflowY: 'scroll'})
.on({
click: function(e) {
var $target = $(e.target),
$parent = $target.parent();
if ($parent.is('.item')) {
$target = $parent;
}
selectItem(
$target.is('.item') && (
$target.is(':not(.selected)')
|| !e.metaKey
) ? $target.attr('id') : ''
);
}
}),
$text = Ox.Container()
.addClass('OxSerif OxSelectable text'),
$panel = Ox.SplitPanel({
2012-04-07 14:42:57 +00:00
elements: [
{element: $list, size: 256},
{element: $text}
],
orientation: 'horizontal'
2012-06-20 09:04:44 +00:00
})
.update(function(key, value) {
key == 'selected' && selectItem(value);
})
2012-04-07 14:42:57 +00:00
.addClass('readme');
2012-04-19 18:39:28 +00:00
Ox.sortBy(app.data.readme, '-date').forEach(function(item, i) {
2012-04-07 14:42:57 +00:00
var $item = $('<div>')
2012-06-18 17:12:01 +00:00
.addClass('item')
2012-06-20 09:04:44 +00:00
.attr({id: item.id})
2014-09-25 16:35:17 +00:00
.css({width: 224 - Ox.SCROLLBAR_SIZE + 'px'})
2012-06-18 17:12:01 +00:00
.appendTo($list);
2012-04-07 14:42:57 +00:00
$('<div>')
.addClass('OxSerif title')
.html(item.title)
.appendTo($item);
$('<div>')
.addClass('OxSerif OxLight date')
.html(Ox.formatDate(item.date, '%B %e, %Y', true))
.appendTo($item);
});
selectItem(app.user.item.readme);
2012-04-08 12:48:07 +00:00
function selectItem(id) {
2012-06-20 09:04:44 +00:00
if (id && !Ox.getObjectById(app.data.readme, id)) {
id = '';
}
$panel.find('.item.selected').removeClass('selected');
2012-12-29 17:14:43 +00:00
id && $panel.find('.item#' + id).addClass('selected');
2012-06-20 09:04:44 +00:00
Ox.get('readme/' + (
id || 'index/readme'
) + '.html?' + salt, function(html) {
2012-04-09 08:36:25 +00:00
$text.empty()
.append(
id ? html
: $('<div>')
2012-06-12 12:32:49 +00:00
.addClass('page')
2012-04-09 08:36:25 +00:00
.css({
margin: '16px',
width: window.innerWidth - 640 + 'px'
})
.html(html)
)
.find('.code').each(function() {
var $this = $(this);
$this.replaceWith(
Ox.SyntaxHighlighter({
source: $this.text()
})
.attr({id: $this.attr('id')})
);
});
2012-04-08 12:48:07 +00:00
});
2012-07-05 21:08:19 +00:00
app.url.push({item: id});
2012-04-08 12:48:07 +00:00
}
2012-06-20 09:04:44 +00:00
return $panel;
2012-04-06 23:42:54 +00:00
},
screen: function() {
return Ox.$('<div>').addClass('screen animate');
},
switch: function() {
return app.patchButtonGroup(
Ox.ButtonGroup({
2012-04-06 23:42:54 +00:00
buttons: [
2013-02-10 11:45:11 +00:00
{id: 'oxlight', title: 'Light'},
{id: 'oxmedium', title: 'Medium'},
{id: 'oxdark', title: 'Dark'}
2012-04-06 23:42:54 +00:00
],
selectable: true,
value: app.user.theme
2012-04-06 23:42:54 +00:00
})
.addClass('switch animate')
.bindEvent({
change: function(data) {
app.setTheme(data.value);
}
})
);
},
warning: function() {
return $('<div>').addClass('warning').html(app.data.warning);
2012-04-06 23:42:54 +00:00
}
},
url: {
2012-07-05 19:37:17 +00:00
change: function() {
var data = app.url.parse();
app.user.previousPage = app.user.page;
app.user.page = data.page;
if (data.page in app.user.item) {
app.user.item[data.page] = data.item;
}
app.db(app.user);
if (app.user.page != app.user.previousPage) {
app.$ui.panel.select(app.user.page);
}
if (app.user.page) {
app.$ui[app.user.page].options(Ox.extend({
selected: data.item
}, app.user.page == 'examples' ? {
mode: data.mode || 'source'
} : {}));
}
if (!app.user.page || !app.user.previousPage) {
app.animate();
}
2012-04-06 23:42:54 +00:00
},
2012-07-05 19:37:17 +00:00
format: function(data) {
var hash = '';
if (data.page) {
hash = '#' + data.page;
if (data.item && data.page in app.user.item) {
hash += '/' + data.item;
if (data.page == 'examples' && data.mode == 'live') {
hash += '/live';
}
}
}
return hash;
},
parse: function(hash) {
hash = hash || window.location.hash;
var data = {}, formattedHash, split = hash.slice(1).split('/');
data.page = Ox.getObjectById(app.data.pages, split[0])
? split[0] : '';
data.item = data.page in app.user.item && split[1]
? split[1] : '';
data.mode = data.page == 'examples' && split[2] == 'live'
? 'live' : '';
formattedHash = app.url.format(data);
hash != formattedHash && app.url.replace(formattedHash);
return data;
},
push: function(data) {
2012-07-05 21:08:19 +00:00
data = data || {};
data.page = 'page' in data ? data.page : app.user.page;
data.item = 'item' in data ? data.item : app.user.item[data.page] || '';
2012-07-05 19:37:17 +00:00
window.location.hash = app.url.format(data);
return app;
},
replace: function(hash) {
var location = window.location;
if (history.replaceState) {
history.replaceState(
{}, '', location.origin + location.pathname + hash
);
}
2012-04-06 23:42:54 +00:00
return app;
}
},
user: {}
},
salt = /^https?:\/\/(www\.)?oxjs\.org\//.test(window.location.href) ? Ox.VERSION : +new Date;
2012-04-06 23:42:54 +00:00
app.init();
});