make it possible to parse keywords from documented source
This commit is contained in:
parent
6c4e520b6d
commit
fb8dd98b8a
5 changed files with 78 additions and 46 deletions
|
@ -9,8 +9,15 @@
|
|||
///*
|
||||
Ox.ExamplePanel({
|
||||
examples: ['cities'],
|
||||
keywords: /\b(Ox\.[\w]+)\b/g,
|
||||
path: Ox.PATH + '../examples/',
|
||||
replace: [[/\b(Ox[\.\w]+)\b/g, '<b>$1</b>']]
|
||||
replace: [[/\b(Ox[\.\w]+)\b/g, '<b>$1</b>']],
|
||||
selected: window.location.hash.substr(1)
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
window.location.hash = data.id;
|
||||
}
|
||||
})
|
||||
.appendTo(Ox.$body);
|
||||
//*/
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>Cities</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="Ox.Map, Ox.TextList"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox/png/OxJS16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
|
|
|
@ -27,7 +27,7 @@ Ox.ExamplePage = function(options, self) {
|
|||
tooltip: 'Reload',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
||||
.css({float: 'right', margin: '4px 2px 4px 2px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
self.$frame.attr({src: self.options.html});
|
||||
|
@ -39,11 +39,13 @@ Ox.ExamplePage = function(options, self) {
|
|||
buttons: [
|
||||
{
|
||||
id: 'source',
|
||||
title: 'View Source'
|
||||
title: 'View Source',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
id: 'live',
|
||||
title: 'View Live'
|
||||
title: 'View Live',
|
||||
width: 80
|
||||
}
|
||||
],
|
||||
selectable: true,
|
||||
|
@ -66,6 +68,22 @@ Ox.ExamplePage = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$keywordMenu = Ox.MenuButton({
|
||||
items: self.options.keywords.map(function(keyword) {
|
||||
return {id: keyword, title: keyword};
|
||||
}),
|
||||
title: 'select',
|
||||
tooltip: 'Documentation',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right', margin: '4px 2px 4px 2px'})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
that.triggerEvent('select', {id: data.id});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$viewer = Ox.SourceViewer({
|
||||
file: self.options.js,
|
||||
replace: self.options.replace
|
||||
|
|
|
@ -5,13 +5,11 @@ Ox.ExamplePanel = function(options, self) {
|
|||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
collapsibe: false,
|
||||
examples: [],
|
||||
keywords: null,
|
||||
path: '',
|
||||
replace: [],
|
||||
resizable: false,
|
||||
resize: [],
|
||||
size: 256,
|
||||
size: 256
|
||||
})
|
||||
.options(options || {})
|
||||
|
||||
|
@ -22,10 +20,7 @@ Ox.ExamplePanel = function(options, self) {
|
|||
self.$panel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: self.options.collapsible,
|
||||
element: self.$list,
|
||||
resizable: self.options.resizable,
|
||||
resize: self.options.resize,
|
||||
size: self.options.size
|
||||
},
|
||||
{
|
||||
|
@ -53,54 +48,65 @@ Ox.ExamplePanel = function(options, self) {
|
|||
}
|
||||
],
|
||||
items: self.items,
|
||||
selected: [self.options.selected],
|
||||
scrollbarVisible: true,
|
||||
sort: ['+title']
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
var item;
|
||||
if (data.ids.length) {
|
||||
item = Ox.getObjectById(self.items, data.ids[0]);
|
||||
self.$panel.replaceElement(1,
|
||||
self.$page = Ox.ExamplePage({
|
||||
height: window.innerHeight,
|
||||
html: item.html,
|
||||
js: item.js,
|
||||
replace: self.options.replace,
|
||||
title: item.title,
|
||||
width: window.innerWidth - self.options.size
|
||||
})
|
||||
)
|
||||
} else {
|
||||
self.$page.empty()
|
||||
}
|
||||
selectExample(data.ids[0] || '');
|
||||
}
|
||||
});
|
||||
self.$panel.replaceElement(0, self.$list);
|
||||
selectExample(self.options.selected);
|
||||
that.triggerEvent('load', {});
|
||||
});
|
||||
|
||||
function loadList(callback) {
|
||||
var items = [];
|
||||
self.options.examples.forEach(function(example) {
|
||||
var file = self.options.path + example + '/index.html';
|
||||
Ox.get(file, function(html) {
|
||||
var keywords = html.match(/<meta name="keywords" content="(.+)"/),
|
||||
title = html.match(/<title>(.+)<\/title>/);
|
||||
items.push({
|
||||
html: file,
|
||||
var item = {
|
||||
html: self.options.path + example + '/index.html',
|
||||
id: example,
|
||||
js: self.options.path + example + '/js/example.js',
|
||||
keywords: keywords ? keywords[1].split(', ') : [],
|
||||
title: title ? title[1] : 'Untitled'
|
||||
});
|
||||
js: self.options.path + example + '/js/example.js'
|
||||
};
|
||||
Ox.get(item.html, function(html) {
|
||||
var title = html.match(/<title>(.+)<\/title>/);
|
||||
item.title = title ? title[1] : 'Untitled'
|
||||
Ox.get(item.js, function(js) {
|
||||
var keywords = js.match(self.options.keywords);
|
||||
item.keywords = keywords ? Ox.unique(keywords).sort(function(a, b) {
|
||||
a = a.toLowerCase();
|
||||
b = b.toLowerCase();
|
||||
return a < b ? -1 : a > b ? 1 : 0;
|
||||
}) : [];
|
||||
items.push(item);
|
||||
items.length == self.options.examples.length && callback(items);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function parseExample() {
|
||||
|
||||
function selectExample(id) {
|
||||
var item;
|
||||
if (id) {
|
||||
item = Ox.getObjectById(self.items, id);
|
||||
self.$panel.replaceElement(1,
|
||||
self.$page = Ox.ExamplePage({
|
||||
height: window.innerHeight,
|
||||
html: item.html,
|
||||
js: item.js,
|
||||
keywords: item.keywords,
|
||||
replace: self.options.replace,
|
||||
title: item.title,
|
||||
width: window.innerWidth - self.options.size - 1
|
||||
})
|
||||
);
|
||||
} else {
|
||||
self.$page.empty()
|
||||
}
|
||||
self.options.selected = id;
|
||||
that.triggerEvent('select', {id: id});
|
||||
}
|
||||
|
||||
return that;
|
||||
|
|
|
@ -38,6 +38,7 @@ Ox.ButtonGroup = function(options, self) {
|
|||
id: button.id || button,
|
||||
title: button.title || button,
|
||||
tooltip: button.tooltip,
|
||||
width: button.width
|
||||
}, self.options.selectable ? {
|
||||
selected: Ox.toArray(self.options.value).indexOf(button.id || button) > -1
|
||||
} : {});
|
||||
|
@ -56,7 +57,7 @@ Ox.ButtonGroup = function(options, self) {
|
|||
|
||||
self.$buttons = [];
|
||||
self.options.buttons.forEach(function(button, pos) {
|
||||
var id = self.options.id + Ox.toTitleCase(button.id)
|
||||
var id = self.options.id + Ox.toTitleCase(button.id);
|
||||
self.$buttons[pos] = Ox.Button({
|
||||
disabled: button.disabled,
|
||||
group: true,
|
||||
|
@ -67,7 +68,8 @@ Ox.ButtonGroup = function(options, self) {
|
|||
title: button.title,
|
||||
tooltip: button.tooltip,
|
||||
type: self.options.type,
|
||||
value: button.selected
|
||||
value: button.selected,
|
||||
width: button.width
|
||||
})
|
||||
.bindEvent('change', function() {
|
||||
self.options.selectable && toggleButton(pos);
|
||||
|
|
Loading…
Reference in a new issue