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