updating index.js
This commit is contained in:
parent
e7f132f121
commit
706af769a8
2 changed files with 101 additions and 90 deletions
25
index.css
25
index.css
|
@ -100,19 +100,10 @@ body.OxThemeModern,
|
||||||
}
|
}
|
||||||
|
|
||||||
.OxThemeClassic .page {
|
.OxThemeClassic .page {
|
||||||
background: rgb(255, 255, 255);
|
background-color: rgb(255, 255, 255);
|
||||||
}
|
}
|
||||||
.OxThemeModern .page {
|
.OxThemeModern .page {
|
||||||
background: rgb(0, 0, 0);
|
background-color: rgb(0, 0, 0);
|
||||||
}
|
|
||||||
|
|
||||||
.OxThemeClassic .logo,
|
|
||||||
.OxThemeClassic .page {
|
|
||||||
box-shadow: 0 0 1px rgb(0, 0, 0)
|
|
||||||
}
|
|
||||||
.OxThemeModern .logo,
|
|
||||||
.OxThemeModern .page {
|
|
||||||
box-shadow: 0 0 1px rgb(255, 255, 255)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.OxThemeClassic .readme .item.selected {
|
.OxThemeClassic .readme .item.selected {
|
||||||
|
@ -121,3 +112,15 @@ body.OxThemeModern,
|
||||||
.OxThemeModern .readme .item.selected {
|
.OxThemeModern .readme .item.selected {
|
||||||
background: rgb(32, 32, 32);
|
background: rgb(32, 32, 32);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.OxThemeClassic .logo,
|
||||||
|
.OxThemeClassic .page,
|
||||||
|
.OxThemeClassic .readme .OxSyntaxHighlighter {
|
||||||
|
box-shadow: 0 0 1px rgb(0, 0, 0)
|
||||||
|
}
|
||||||
|
.OxThemeModern .logo,
|
||||||
|
.OxThemeModern .page,
|
||||||
|
.OxThemeModern .readme .OxSyntaxHighlighter {
|
||||||
|
box-shadow: 0 0 1px rgb(255, 255, 255)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
166
index.js
166
index.js
|
@ -2,8 +2,9 @@ Ox.load(function() {
|
||||||
|
|
||||||
var app = {
|
var app = {
|
||||||
$ui: {},
|
$ui: {},
|
||||||
animate: function() {
|
animate: function(callback) {
|
||||||
var home = !app.url.get();
|
var home = !app.url.get();
|
||||||
|
app.state.animating = true;
|
||||||
if (home) {
|
if (home) {
|
||||||
app.$ui.logo.attr({
|
app.$ui.logo.attr({
|
||||||
src: app.getSRC('logo')
|
src: app.getSRC('logo')
|
||||||
|
@ -11,10 +12,10 @@ Ox.load(function() {
|
||||||
app.$ui.screen.show();
|
app.$ui.screen.show();
|
||||||
app.$ui.label.show();
|
app.$ui.label.show();
|
||||||
app.$ui.menu.options({value: ''}).show();
|
app.$ui.menu.options({value: ''}).show();
|
||||||
app.$ui.panel.find('.OxButtonGroup').css({opacity: 0});
|
|
||||||
} else {
|
} else {
|
||||||
app.$ui.menu.options({value: app.user('url').split('/')[0]});
|
app.$ui.menu.options({value: app.user('url').split('/')[0]});
|
||||||
}
|
}
|
||||||
|
app.$ui.panel.find('.OxButtonGroup').css({opacity: 0});
|
||||||
[
|
[
|
||||||
'screen', 'logo', 'label', 'menu', 'switch'
|
'screen', 'logo', 'label', 'menu', 'switch'
|
||||||
].forEach(function(element) {
|
].forEach(function(element) {
|
||||||
|
@ -31,12 +32,14 @@ Ox.load(function() {
|
||||||
app.$ui.label.hide();
|
app.$ui.label.hide();
|
||||||
app.$ui.menu.hide().options({value: ''});
|
app.$ui.menu.hide().options({value: ''});
|
||||||
}
|
}
|
||||||
|
app.state.animating = false;
|
||||||
|
callback();
|
||||||
} : void 0
|
} : void 0
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
sections: [
|
pages: [
|
||||||
{id: 'about', title: 'About'},
|
{id: 'about', title: 'About'},
|
||||||
{id: 'readme', title: 'Readme'},
|
{id: 'readme', title: 'Readme'},
|
||||||
{id: 'examples', title: 'Examples'},
|
{id: 'examples', title: 'Examples'},
|
||||||
|
@ -55,19 +58,21 @@ Ox.load(function() {
|
||||||
top: middle + 16 + 'px',
|
top: middle + 16 + 'px',
|
||||||
left: center - 128 + 'px',
|
left: center - 128 + 'px',
|
||||||
width: '240px',
|
width: '240px',
|
||||||
|
height: '14px',
|
||||||
fontSize: '11px',
|
fontSize: '11px',
|
||||||
opacity: 1
|
opacity: 1
|
||||||
} : {
|
} : {
|
||||||
top: '26px',
|
top: '26px',
|
||||||
left: '4px',
|
left: '4px',
|
||||||
width: '32px',
|
width: '32px',
|
||||||
|
height: '4px',
|
||||||
fontSize: '1px',
|
fontSize: '1px',
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}
|
}
|
||||||
} else if (element == 'loading') {
|
} else if (element == 'loading') {
|
||||||
css.top = middle + 40 + 'px'
|
css.top = middle + 40 + 'px'
|
||||||
} else if (element == 'logo') {
|
} else if (element == 'logo') {
|
||||||
css = home || !app.loaded ? {
|
css = home || !app.state.loaded ? {
|
||||||
left: center - 128 + 'px',
|
left: center - 128 + 'px',
|
||||||
top: middle - 128 + 'px',
|
top: middle - 128 + 'px',
|
||||||
width: '256px',
|
width: '256px',
|
||||||
|
@ -115,11 +120,12 @@ Ox.load(function() {
|
||||||
src = 'source/Ox.UI/themes/' + theme
|
src = 'source/Ox.UI/themes/' + theme
|
||||||
+ '/svg/symbolLoadingAnimated.svg'
|
+ '/svg/symbolLoadingAnimated.svg'
|
||||||
} else if (element == 'logo') {
|
} else if (element == 'logo') {
|
||||||
src = 'source/Ox.UI/themes/' + theme
|
src = 'source/Ox.UI/themes/' + theme + '/png/logo'
|
||||||
+ '/png/logo' + (home || !app.loaded ? 128 : 16) + '.png'
|
+ (home || !app.state.loaded ? 128 : 16) + '.png'
|
||||||
}
|
}
|
||||||
return src;
|
return src;
|
||||||
},
|
},
|
||||||
|
history: {},
|
||||||
init: function() {
|
init: function() {
|
||||||
app.loadScreen(function() {
|
app.loadScreen(function() {
|
||||||
app.loadData(function() {
|
app.loadData(function() {
|
||||||
|
@ -135,7 +141,7 @@ Ox.load(function() {
|
||||||
app.user({url: 'about'});
|
app.user({url: 'about'});
|
||||||
}
|
}
|
||||||
app.$ui.panel = app.ui.panel()
|
app.$ui.panel = app.ui.panel()
|
||||||
.select(app.user('url'))
|
.select(app.url.parse(app.user('url')).page)
|
||||||
.appendTo(Ox.$body);
|
.appendTo(Ox.$body);
|
||||||
// jqueryfy so that we can animate
|
// jqueryfy so that we can animate
|
||||||
['screen', 'logo', 'loading'].forEach(function(element) {
|
['screen', 'logo', 'loading'].forEach(function(element) {
|
||||||
|
@ -160,9 +166,7 @@ Ox.load(function() {
|
||||||
app.$ui.logo
|
app.$ui.logo
|
||||||
.css({cursor: 'pointer'})
|
.css({cursor: 'pointer'})
|
||||||
.bind({
|
.bind({
|
||||||
click: function() {
|
click: app.toggle
|
||||||
app.url.set(app.url.get() ? '' : app.user('url'));
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
['label', 'menu', 'switch'].forEach(function(element) {
|
['label', 'menu', 'switch'].forEach(function(element) {
|
||||||
app.$ui[element] = app.ui[element]()
|
app.$ui[element] = app.ui[element]()
|
||||||
|
@ -175,9 +179,8 @@ Ox.load(function() {
|
||||||
} else {
|
} else {
|
||||||
['label', 'menu', 'switch'].forEach(function(element) {
|
['label', 'menu', 'switch'].forEach(function(element) {
|
||||||
app.$ui[element] = app.ui[element]().appendTo(Ox.$body);
|
app.$ui[element] = app.ui[element]().appendTo(Ox.$body);
|
||||||
app.$ui[element].css(app.getCSS(element));
|
app.$ui[element].css(app.getCSS(element)).hide();
|
||||||
});
|
});
|
||||||
app.$ui.menu.hide();
|
|
||||||
app.$ui.screen.animate({opacity: 0}, 500, function() {
|
app.$ui.screen.animate({opacity: 0}, 500, function() {
|
||||||
app.$ui.screen.hide();
|
app.$ui.screen.hide();
|
||||||
});
|
});
|
||||||
|
@ -189,17 +192,18 @@ Ox.load(function() {
|
||||||
app.$ui.logo
|
app.$ui.logo
|
||||||
.css({cursor: 'pointer'})
|
.css({cursor: 'pointer'})
|
||||||
.bind({
|
.bind({
|
||||||
click: function() {
|
click: app.toggle
|
||||||
app.url.set(app.url.get() ? '' : app.user('url'));
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
app.$ui.switch.css({opacity: 0}).show().animate({
|
||||||
|
opacity: 1
|
||||||
|
}, 500);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
Ox.$window.bind({
|
Ox.$window.bind({
|
||||||
hashchange: app.urlchange
|
hashchange: app.urlchange
|
||||||
});
|
});
|
||||||
app.loaded = true;
|
app.state.loaded = true;
|
||||||
},
|
},
|
||||||
loadData: function(callback) {
|
loadData: function(callback) {
|
||||||
Ox.getJSON('index.json', function(data) {
|
Ox.getJSON('index.json', function(data) {
|
||||||
|
@ -207,7 +211,6 @@ Ox.load(function() {
|
||||||
callback();
|
callback();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
loaded: false,
|
|
||||||
loadScreen: function(callback) {
|
loadScreen: function(callback) {
|
||||||
app.setTheme(app.user('theme') || 'classic');
|
app.setTheme(app.user('theme') || 'classic');
|
||||||
app.$ui.screen = app.ui.screen();
|
app.$ui.screen = app.ui.screen();
|
||||||
|
@ -226,7 +229,6 @@ Ox.load(function() {
|
||||||
resize: app.resize
|
resize: app.resize
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
previousURL: '',
|
|
||||||
re: {
|
re: {
|
||||||
code: [
|
code: [
|
||||||
new RegExp(
|
new RegExp(
|
||||||
|
@ -281,6 +283,15 @@ Ox.load(function() {
|
||||||
: Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme)
|
: Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme)
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
state: {
|
||||||
|
animating: false,
|
||||||
|
loaded: false
|
||||||
|
},
|
||||||
|
toggle: function() {
|
||||||
|
!app.state.animating && app.url.set(
|
||||||
|
app.url.get() ? '' : app.user('url')
|
||||||
|
);
|
||||||
|
},
|
||||||
ui: {
|
ui: {
|
||||||
doc: function() {
|
doc: function() {
|
||||||
return Ox.DocPanel({
|
return Ox.DocPanel({
|
||||||
|
@ -308,7 +319,7 @@ Ox.load(function() {
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
select: function(data) {
|
select: function(data) {
|
||||||
app.url.push(
|
app.url.set(
|
||||||
'examples' + (data.id ? '/' + data.id : '')
|
'examples' + (data.id ? '/' + data.id : '')
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -321,10 +332,8 @@ Ox.load(function() {
|
||||||
width: 256
|
width: 256
|
||||||
})
|
})
|
||||||
.addClass('label animate')
|
.addClass('label animate')
|
||||||
.bindEvent({
|
.bind({
|
||||||
anyclick: function() {
|
click: app.toggle
|
||||||
app.url.set(app.url.get() ? '' : app.user('url'));
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
loading: function() {
|
loading: function() {
|
||||||
|
@ -341,7 +350,7 @@ Ox.load(function() {
|
||||||
},
|
},
|
||||||
menu: function() {
|
menu: function() {
|
||||||
return Ox.ButtonGroup({
|
return Ox.ButtonGroup({
|
||||||
buttons: app.data.sections,
|
buttons: app.data.pages,
|
||||||
min: 0,
|
min: 0,
|
||||||
selectable: true,
|
selectable: true,
|
||||||
})
|
})
|
||||||
|
@ -365,41 +374,42 @@ Ox.load(function() {
|
||||||
panel: function() {
|
panel: function() {
|
||||||
return Ox.TabPanel({
|
return Ox.TabPanel({
|
||||||
content: function(id) {
|
content: function(id) {
|
||||||
return app.ui[id] ? app.ui[id]() : app.ui.page(id);
|
return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id);
|
||||||
},
|
},
|
||||||
size: 32,
|
size: 32,
|
||||||
tabs: app.data.sections
|
tabs: app.data.pages
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: function(data) {
|
change: function(data) {
|
||||||
app.url.push(data.selected);
|
app.state.loaded && app.url.set(data.selected);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
readme: function() {
|
readme: function() {
|
||||||
var $list = Ox.Container().css({overflowY: 'scroll'}),
|
var $list = Ox.Container().css({overflowY: 'scroll'}),
|
||||||
$text = Ox.Container().addClass('OxSerif text'),
|
$text = Ox.Container().addClass('OxSerif text'),
|
||||||
$panel = Ox.SplitPanel({
|
self = {},
|
||||||
|
that = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{element: $list, size: 256},
|
{element: $list, size: 256},
|
||||||
{element: $text}
|
{element: $text}
|
||||||
],
|
],
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
})
|
}, self)
|
||||||
.addClass('readme');
|
.addClass('readme');
|
||||||
app.data.readme.forEach(function(item, i) {
|
app.data.readme.forEach(function(item, i) {
|
||||||
var $item = $('<div>')
|
var $item = $('<div>')
|
||||||
.addClass('item')
|
.addClass('item')
|
||||||
|
.attr({id: 'readme_' + item.id})
|
||||||
.css({
|
.css({
|
||||||
width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
|
width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
|
||||||
})
|
})
|
||||||
.bind({
|
.bind({
|
||||||
click: function(e) {
|
click: function(e) {
|
||||||
var $this = $(this);
|
if (!$(this).is('.selected')) {
|
||||||
if (!$this.is('.selected')) {
|
selectItem(item.id);
|
||||||
selectItem(item.id, $this);
|
|
||||||
} else if (e.metaKey) {
|
} else if (e.metaKey) {
|
||||||
selectItem(null, $this);
|
selectItem();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -413,34 +423,30 @@ Ox.load(function() {
|
||||||
.html(Ox.formatDate(item.date, '%B %e, %Y', true))
|
.html(Ox.formatDate(item.date, '%B %e, %Y', true))
|
||||||
.appendTo($item);
|
.appendTo($item);
|
||||||
});
|
});
|
||||||
function selectItem(id, $element) {
|
selectItem(self.options.selected);
|
||||||
|
function selectItem(id) {
|
||||||
$('.readme .item.selected').removeClass('selected');
|
$('.readme .item.selected').removeClass('selected');
|
||||||
if (id) {
|
id && $('#readme_' + id).addClass('selected');
|
||||||
$element.addClass('selected');
|
Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) {
|
||||||
Ox.get('readme/html/' + id + '.html', function(html) {
|
$text.html(html);
|
||||||
$text.html(html);
|
$text.find('.code').each(function() {
|
||||||
$text.find('.code').each(function() {
|
var $this = $(this);
|
||||||
var $this = $(this);
|
$this.replaceWith(
|
||||||
$this.replaceWith(
|
Ox.SyntaxHighlighter({
|
||||||
Ox.SyntaxHighlighter({
|
source: $this.text()
|
||||||
source: $this.text()
|
})
|
||||||
})
|
.attr({id: $this.attr('id')})
|
||||||
.attr({id: $this.attr('id')})
|
);
|
||||||
/*
|
|
||||||
.css({
|
|
||||||
border: '1px solid rgb(192, 192, 192)'
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
app.url.push('readme/' + id);
|
});
|
||||||
} else {
|
app.url.set('readme' + (id ? '/' + id : ''));
|
||||||
$text.empty();
|
}
|
||||||
app.url.push('readme');
|
self.setOption = function(key, value) {
|
||||||
|
if (key == 'selected') {
|
||||||
|
selectItem(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return $panel;
|
return that;
|
||||||
},
|
},
|
||||||
screen: function() {
|
screen: function() {
|
||||||
return Ox.$('<div>').addClass('screen animate');
|
return Ox.$('<div>').addClass('screen animate');
|
||||||
|
@ -476,38 +482,40 @@ Ox.load(function() {
|
||||||
get: function() {
|
get: function() {
|
||||||
return window.location.hash.substr(1);
|
return window.location.hash.substr(1);
|
||||||
},
|
},
|
||||||
push: function(url) {
|
parse: function(url) {
|
||||||
history.pushState({}, '', '#' + url);
|
var split = (
|
||||||
url && app.user({url: url});
|
url === void 0 ? app.url.get() : url
|
||||||
return app;
|
).split('/');
|
||||||
|
return {page: split[0], item: split[1] || ''};
|
||||||
},
|
},
|
||||||
set: function() {
|
set: function(url) {
|
||||||
window.location.hash = '#' + arguments[0];
|
window.location.hash = '#' + url;
|
||||||
return app;
|
return app;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
urlchange: function() {
|
urlchange: function() {
|
||||||
var url = app.url.get(),
|
var url = app.url.get(),
|
||||||
section = url.split('/')[0];
|
current = app.url.parse(url);
|
||||||
url && app.user({url: url});
|
url && app.user({url: url});
|
||||||
Ox.print(
|
Ox.print(JSON.stringify({
|
||||||
'url', url,
|
'current': current,
|
||||||
'section', section,
|
'history': app.history,
|
||||||
'prev', app.previousURL,
|
'user.url': app.user('url')
|
||||||
'sect', app.previousURL.split('/')[0],
|
}, null, ' '));
|
||||||
'user url', app.user('url')
|
if (current.page != app.history.page) {
|
||||||
);
|
app.$ui.panel.select(current.page);
|
||||||
if (section != app.previousURL.split('/')[0]) {
|
|
||||||
app.$ui.panel.select(section);
|
|
||||||
}
|
}
|
||||||
app[!url || !app.previousURL ? 'animate' : 'void'](function() {
|
if (Ox.in(['readme', 'examples', 'doc'], current.page)) {
|
||||||
app.previousURL = url;
|
Ox.print('cp',current.page, current.item)
|
||||||
|
app.$ui[current.page].options({selected: current.item});
|
||||||
|
}
|
||||||
|
(!current.page || !app.history.page ? app.animate : Ox.void)(function() {
|
||||||
|
//app.url.replace(url);
|
||||||
|
app.history = current;
|
||||||
|
Ox.print('CALLBACK, HISTORY', app.history)
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
user: Ox.localStorage('OxJS'),
|
user: Ox.localStorage('OxJS')
|
||||||
void: function(callback) {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
app.init();
|
app.init();
|
||||||
|
|
Loading…
Reference in a new issue