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

17
demos/examplepanel/index.html
View file

@ -8,11 +8,18 @@
Ox.load('UI', function() {
///*
Ox.ExamplePanel({
examples: ['cities'],
path: Ox.PATH + '../examples/',
replace: [[/\b(Ox[\.\w]+)\b/g, '<b>$1</b>']]
})
.appendTo(Ox.$body);
examples: ['cities'],
keywords: /\b(Ox\.[\w]+)\b/g,
path: Ox.PATH + '../examples/',
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);
//*/
/*
Ox.ExamplePage({

1
examples/cities/index.html
View file

@ -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>

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

@ -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

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

@ -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);
});
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;

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

@ -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);