0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

make it possible to parse keywords from documented source

Browse source
This commit is contained in:
rolux 2012-04-04 18:26:17 +02:00
parent 6c4e520b6d
commit fb8dd98b8a
5 changed files with 78 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
demos/examplepanel/index.html
View file

@ -9,8 +9,15 @@
///* ///*
Ox.ExamplePanel({ Ox.ExamplePanel({
examples: ['cities'], examples: ['cities'],
keywords: /\b(Ox\.[\w]+)\b/g,
path: Ox.PATH + '../examples/', 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); .appendTo(Ox.$body);
//*/ //*/

1
examples/cities/index.html
View file

@ -3,7 +3,6 @@
<head> <head>
<title>Cities</title> <title>Cities</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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="shortcut icon" type="image/png" href="../../source/Ox/png/OxJS16.png"/>
<link rel="stylesheet" type="text/css" href="css/example.css"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>

24
source/Ox.UI/js/Code/Ox.ExamplePage.js
View file

@ -27,7 +27,7 @@ Ox.ExamplePage = function(options, self) {
tooltip: 'Reload', tooltip: 'Reload',
type: 'image' type: 'image'
}) })
.css({float: 'right', margin: '4px 4px 4px 2px'}) .css({float: 'right', margin: '4px 2px 4px 2px'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
self.$frame.attr({src: self.options.html}); self.$frame.attr({src: self.options.html});
@ -39,11 +39,13 @@ Ox.ExamplePage = function(options, self) {
buttons: [ buttons: [
{ {
id: 'source', id: 'source',
title: 'View Source' title: 'View Source',
width: 80
}, },
{ {
id: 'live', id: 'live',
title: 'View Live' title: 'View Live',
width: 80
} }
], ],
selectable: true, selectable: true,
@ -66,6 +68,22 @@ Ox.ExamplePage = function(options, self) {
}) })
.appendTo(self.$toolbar); .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({ self.$viewer = Ox.SourceViewer({
file: self.options.js, file: self.options.js,
replace: self.options.replace replace: self.options.replace

76
source/Ox.UI/js/Code/Ox.ExamplePanel.js
View file

@ -5,13 +5,11 @@ Ox.ExamplePanel = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
collapsibe: false,
examples: [], examples: [],
keywords: null,
path: '', path: '',
replace: [], replace: [],
resizable: false, size: 256
resize: [],
size: 256,
}) })
.options(options || {}) .options(options || {})
@ -22,10 +20,7 @@ Ox.ExamplePanel = function(options, self) {
self.$panel = Ox.SplitPanel({ self.$panel = Ox.SplitPanel({
elements: [ elements: [
{ {
collapsible: self.options.collapsible,
element: self.$list, element: self.$list,
resizable: self.options.resizable,
resize: self.options.resize,
size: self.options.size size: self.options.size
}, },
{ {
@ -53,54 +48,65 @@ Ox.ExamplePanel = function(options, self) {
} }
], ],
items: self.items, items: self.items,
selected: [self.options.selected],
scrollbarVisible: true, scrollbarVisible: true,
sort: ['+title'] sort: ['+title']
}) })
.bindEvent({ .bindEvent({
select: function(data) { select: function(data) {
var item; selectExample(data.ids[0] || '');
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()
}
} }
}); });
self.$panel.replaceElement(0, self.$list); self.$panel.replaceElement(0, self.$list);
selectExample(self.options.selected);
that.triggerEvent('load', {}); that.triggerEvent('load', {});
}); });
function loadList(callback) { function loadList(callback) {
var items = []; var items = [];
self.options.examples.forEach(function(example) { self.options.examples.forEach(function(example) {
var file = self.options.path + example + '/index.html'; var item = {
Ox.get(file, function(html) { html: self.options.path + example + '/index.html',
var keywords = html.match(/<meta name="keywords" content="(.+)"/),
title = html.match(/<title>(.+)<\/title>/);
items.push({
html: file,
id: example, id: example,
js: self.options.path + example + '/js/example.js', js: self.options.path + example + '/js/example.js'
keywords: keywords ? keywords[1].split(', ') : [], };
title: title ? title[1] : 'Untitled' 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); 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; return that;

6
source/Ox.UI/js/Form/Ox.ButtonGroup.js
View file

@ -38,6 +38,7 @@ Ox.ButtonGroup = function(options, self) {
id: button.id || button, id: button.id || button,
title: button.title || button, title: button.title || button,
tooltip: button.tooltip, tooltip: button.tooltip,
width: button.width
}, self.options.selectable ? { }, self.options.selectable ? {
selected: Ox.toArray(self.options.value).indexOf(button.id || button) > -1 selected: Ox.toArray(self.options.value).indexOf(button.id || button) > -1
} : {}); } : {});
@ -56,7 +57,7 @@ Ox.ButtonGroup = function(options, self) {
self.$buttons = []; self.$buttons = [];
self.options.buttons.forEach(function(button, pos) { 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({ self.$buttons[pos] = Ox.Button({
disabled: button.disabled, disabled: button.disabled,
group: true, group: true,
@ -67,7 +68,8 @@ Ox.ButtonGroup = function(options, self) {
title: button.title, title: button.title,
tooltip: button.tooltip, tooltip: button.tooltip,
type: self.options.type, type: self.options.type,
value: button.selected value: button.selected,
width: button.width
}) })
.bindEvent('change', function() { .bindEvent('change', function() {
self.options.selectable && toggleButton(pos); self.options.selectable && toggleButton(pos);