update index
This commit is contained in:
rolux
parent
ad75054336
commit
919f119422
6 changed files with 112 additions and 60 deletions
159
index.js
159
index.js
|
|
@ -39,6 +39,7 @@ Ox.load(function() {
|
|||
});
|
||||
},
|
||||
data: {
|
||||
html: {},
|
||||
pages: [
|
||||
{id: 'about', title: 'About'},
|
||||
{id: 'readme', title: 'Readme'},
|
||||
|
|
@ -57,20 +58,20 @@ Ox.load(function() {
|
|||
css = home ? {
|
||||
top: middle + 16 + 'px',
|
||||
left: center - 128 + 'px',
|
||||
width: '240px',
|
||||
height: '14px',
|
||||
fontSize: '11px',
|
||||
width: '242px',
|
||||
height: '16px',
|
||||
fontSize: '12px',
|
||||
opacity: 1
|
||||
} : {
|
||||
top: '26px',
|
||||
top: '35px',
|
||||
left: '4px',
|
||||
width: '32px',
|
||||
width: '40px',
|
||||
height: '4px',
|
||||
fontSize: '1px',
|
||||
opacity: 0
|
||||
}
|
||||
} else if (element == 'loading') {
|
||||
css.top = middle + 40 + 'px'
|
||||
css.top = middle + 52 + 'px'
|
||||
} else if (element == 'logo') {
|
||||
css = home || !app.state.loaded ? {
|
||||
left: center - 128 + 'px',
|
||||
|
|
@ -80,12 +81,12 @@ Ox.load(function() {
|
|||
} : {
|
||||
top: '8px',
|
||||
left: '8px',
|
||||
width: '32px',
|
||||
height: '16px'
|
||||
width: '48px',
|
||||
height: '24px'
|
||||
};
|
||||
} else if (element == 'menu') {
|
||||
css = home ? {
|
||||
top: middle + 48 + 'px',
|
||||
top: middle + 56 + 'px',
|
||||
left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
|
||||
} : {
|
||||
top: '8px',
|
||||
|
|
@ -95,7 +96,7 @@ Ox.load(function() {
|
|||
css.opacity = home ? 1 : 0;
|
||||
} else if (element == 'switch') {
|
||||
css = home ? {
|
||||
top: middle + 80 + 'px',
|
||||
top: middle + 96 + 'px',
|
||||
right: Math.floor(center - app.$ui.switch.width() / 2) + 'px'
|
||||
} : {
|
||||
top: '8px',
|
||||
|
|
@ -126,6 +127,7 @@ Ox.load(function() {
|
|||
return src;
|
||||
},
|
||||
history: {},
|
||||
html: {},
|
||||
init: function() {
|
||||
app.loadScreen(function() {
|
||||
app.loadData(function() {
|
||||
|
|
@ -208,7 +210,13 @@ Ox.load(function() {
|
|||
loadData: function(callback) {
|
||||
Ox.getJSON('index.json', function(data) {
|
||||
app.data = Ox.extend(app.data, data);
|
||||
callback();
|
||||
app.data.pages.forEach(function(page) {
|
||||
var id = page.id == 'doc' ? 'documentation' : page.id;
|
||||
Ox.get('readme/html/_' + (id) + '.html', function(html) {
|
||||
app.html[id] = html;
|
||||
Ox.len(app.html) == app.data.pages.length && callback();
|
||||
});
|
||||
})
|
||||
});
|
||||
},
|
||||
loadScreen: function(callback) {
|
||||
|
|
@ -229,6 +237,22 @@ Ox.load(function() {
|
|||
resize: app.resize
|
||||
});
|
||||
},
|
||||
patchButtonGroup: function($buttonGroup) {
|
||||
$buttonGroup.find('.OxButton').css({
|
||||
height: '22px',
|
||||
fontSize: '12px'
|
||||
});
|
||||
$buttonGroup.find('.OxButton:first-child').css({
|
||||
//paddingLeft: '9px',
|
||||
borderTopLeftRadius: '6px',
|
||||
borderBottomLeftRadius: '6px'
|
||||
});
|
||||
$buttonGroup.find('.OxButton:last-child').css({
|
||||
//paddingRight: '9px',
|
||||
borderTopRightRadius: '6px',
|
||||
borderBottomRightRadius: '6px'
|
||||
});
|
||||
},
|
||||
re: {
|
||||
code: [
|
||||
new RegExp(
|
||||
|
|
@ -295,18 +319,27 @@ 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],
|
||||
});
|
||||
element: app.html.documentation,
|
||||
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],
|
||||
selected: ''
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
app.url.set(
|
||||
'doc' + (data.id ? '/' + data.id : '')
|
||||
)
|
||||
}
|
||||
});
|
||||
},
|
||||
examples: function() {
|
||||
return Ox.ExamplePanel({
|
||||
|
|
@ -332,6 +365,11 @@ Ox.load(function() {
|
|||
width: 256
|
||||
})
|
||||
.addClass('label animate')
|
||||
.css({
|
||||
paddingTop: '4px',
|
||||
paddingBottom: '4px',
|
||||
borderRadius: '6px'
|
||||
})
|
||||
.bind({
|
||||
click: app.toggle
|
||||
});
|
||||
|
|
@ -349,7 +387,7 @@ Ox.load(function() {
|
|||
.css(app.getCSS('logo'));
|
||||
},
|
||||
menu: function() {
|
||||
return Ox.ButtonGroup({
|
||||
var $menu = Ox.ButtonGroup({
|
||||
buttons: app.data.pages,
|
||||
min: 0,
|
||||
selectable: true,
|
||||
|
|
@ -360,30 +398,35 @@ Ox.load(function() {
|
|||
data.value && app.url.set(data.value);
|
||||
}
|
||||
})
|
||||
app.patchButtonGroup($menu);
|
||||
return $menu;
|
||||
},
|
||||
page: function(page, replace) {
|
||||
var $element = Ox.Container();
|
||||
Ox.get('readme/html/_' + page + '.html', function(html) {
|
||||
$('<div>')
|
||||
.addClass('OxSerif page')
|
||||
.html(html.replace(app.re.version[0], app.re.version[1]))
|
||||
.appendTo($element);
|
||||
});
|
||||
$('<div>')
|
||||
.addClass('OxSerif page')
|
||||
.html(app.html[page].replace(app.re.version[0], app.re.version[1]))
|
||||
.appendTo($element);
|
||||
return $element;
|
||||
},
|
||||
panel: function() {
|
||||
return Ox.TabPanel({
|
||||
content: function(id) {
|
||||
return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id);
|
||||
},
|
||||
size: 32,
|
||||
tabs: app.data.pages
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
app.state.loaded && app.url.set(data.selected);
|
||||
}
|
||||
});
|
||||
var $panel = Ox.TabPanel({
|
||||
content: function(id) {
|
||||
return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id);
|
||||
},
|
||||
size: 40,
|
||||
tabs: app.data.pages
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
app.state.loaded && app.url.set(data.selected);
|
||||
}
|
||||
}),
|
||||
$buttonGroup = $panel.find('.OxButtonGroup').css({
|
||||
top: '8px'
|
||||
});
|
||||
app.patchButtonGroup($buttonGroup);
|
||||
return $panel;
|
||||
},
|
||||
readme: function() {
|
||||
var $list = Ox.Container().css({overflowY: 'scroll'}),
|
||||
|
|
@ -399,21 +442,21 @@ Ox.load(function() {
|
|||
.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) {
|
||||
if (!$(this).is('.selected')) {
|
||||
selectItem(item.id);
|
||||
} else if (e.metaKey) {
|
||||
selectItem();
|
||||
.addClass('item')
|
||||
.attr({id: 'readme_' + item.id})
|
||||
.css({
|
||||
width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
|
||||
})
|
||||
.bind({
|
||||
click: function(e) {
|
||||
if (!$(this).is('.selected')) {
|
||||
selectItem(item.id);
|
||||
} else if (e.metaKey) {
|
||||
selectItem();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo($list);
|
||||
})
|
||||
.appendTo($list);
|
||||
$('<div>')
|
||||
.addClass('OxSerif title')
|
||||
.html(item.title)
|
||||
|
|
@ -452,7 +495,7 @@ Ox.load(function() {
|
|||
return Ox.$('<div>').addClass('screen animate');
|
||||
},
|
||||
switch: function() {
|
||||
return Ox.ButtonGroup({
|
||||
var $switch = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{id: 'classic', title: 'Light'},
|
||||
{id: 'modern', title: 'Dark'}
|
||||
|
|
@ -466,6 +509,8 @@ Ox.load(function() {
|
|||
app.setTheme(data.value);
|
||||
}
|
||||
});
|
||||
app.patchButtonGroup($switch);
|
||||
return $switch;
|
||||
},
|
||||
warning: function() {
|
||||
return $('<div>')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue