start with self documenting api
This commit is contained in:
parent
af8244a173
commit
9bb674ff7a
181
docs/api.js
Normal file
181
docs/api.js
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
/***
|
||||||
|
OxUI Documentation
|
||||||
|
***/
|
||||||
|
var app = {};
|
||||||
|
$(function() {
|
||||||
|
app.$body = $('body');
|
||||||
|
app.$document = $(document);
|
||||||
|
app.$window = $(window);
|
||||||
|
|
||||||
|
app.$ui = {};
|
||||||
|
app.docs = getDocsJSON();
|
||||||
|
app.$ui.actionList = constructList();
|
||||||
|
app.$ui.actionInfo = Ox.Container().css({padding: '8px'});
|
||||||
|
|
||||||
|
|
||||||
|
var $main = new Ox.SplitPanel({
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
element: app.$ui.actionList,
|
||||||
|
size: 160
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: app.$ui.actionInfo
|
||||||
|
}
|
||||||
|
],
|
||||||
|
orientation: 'horizontal'
|
||||||
|
});
|
||||||
|
|
||||||
|
$main.appendTo(app.$body);
|
||||||
|
});
|
||||||
|
|
||||||
|
function constructList() {
|
||||||
|
return new Ox.TextList({
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
align: "left",
|
||||||
|
id: "name",
|
||||||
|
operator: "+",
|
||||||
|
title: "Name",
|
||||||
|
unique: true,
|
||||||
|
visible: true,
|
||||||
|
width: 140
|
||||||
|
},
|
||||||
|
],
|
||||||
|
columnsMovable: false,
|
||||||
|
columnsRemovable: false,
|
||||||
|
id: 'actionList',
|
||||||
|
request: function(data, callback) {
|
||||||
|
var items = [];
|
||||||
|
app.docs.forEach(function(v) {
|
||||||
|
items.push({'name': v.name});
|
||||||
|
});
|
||||||
|
items.sort(function(a, b) { if(a.name < b.name) { return -1 } else if( a.name == b.name) { return 0 }else { return 1 } })
|
||||||
|
if(!data.keys) {
|
||||||
|
var result = {'data': {'items': items.length}};
|
||||||
|
} else {
|
||||||
|
var result = {'data': {'items': items}};
|
||||||
|
}
|
||||||
|
Ox.print("items", items);
|
||||||
|
callback(result);
|
||||||
|
},
|
||||||
|
sort: [
|
||||||
|
{
|
||||||
|
key: "name",
|
||||||
|
operator: "+"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}).bindEvent({
|
||||||
|
select: function(event, data) {
|
||||||
|
var info = $('<div>');
|
||||||
|
var ids = data.ids;
|
||||||
|
ids.forEach(function(v) {
|
||||||
|
var docObj = getObjectByName(app.docs, v);
|
||||||
|
var html = getDocHtml(docObj);
|
||||||
|
info.append(html);
|
||||||
|
});
|
||||||
|
app.$ui.actionInfo.html(info);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDocHtml(doc) {
|
||||||
|
var wrapper = $('<div>');
|
||||||
|
var title = $('<h2>').html(doc.name).appendTo(wrapper);
|
||||||
|
var $options = $('<div>').html("Options: ").css({'marginBottom': '20px'}).appendTo(wrapper);
|
||||||
|
Ox.keys(doc.options).forEach(function(k) {
|
||||||
|
var $option = $('<div>');
|
||||||
|
var optionKey = $('<b>').html(k + ": ").appendTo($option);
|
||||||
|
var optionVal = $('<span>').html(typeof doc.options[k]).appendTo($option);
|
||||||
|
$('<span>').html(' <b>' + doc.options[k].toString() + '</b>').appendTo($option);
|
||||||
|
$option.appendTo($options);
|
||||||
|
});
|
||||||
|
var methods = Ox.keys(doc.methods);
|
||||||
|
if (methods.length > 0) {
|
||||||
|
var $methods = $('<div>').html("Methods: <br>").appendTo(wrapper);
|
||||||
|
methods.forEach(function(m) {
|
||||||
|
var $m = $('<div>').appendTo($methods);
|
||||||
|
var f = $('<pre>').html(doc.methods[m]).hide();
|
||||||
|
var title = m;
|
||||||
|
var options = /function \((.*?)\)/.exec(doc.methods[m]);
|
||||||
|
if(options) {
|
||||||
|
title = title + '('+options[1]+')';
|
||||||
|
}
|
||||||
|
var lable = new Ox.Label({
|
||||||
|
title: title,
|
||||||
|
width: 190
|
||||||
|
})
|
||||||
|
.css({'float': 'left', 'margin-right': '4px'})
|
||||||
|
.addClass("margin")
|
||||||
|
.appendTo($m);
|
||||||
|
var b = new Ox.Button({
|
||||||
|
title: [
|
||||||
|
{id: "one", title: "expand"},
|
||||||
|
{id: "two", title: "collapse"},
|
||||||
|
],
|
||||||
|
type: "image"
|
||||||
|
})
|
||||||
|
.addClass("margin")
|
||||||
|
.appendTo($m)
|
||||||
|
.click(function() { f.toggle()});
|
||||||
|
f.appendTo($m);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
var $functionString = $('<pre>').html(doc.functionString).appendTo(wrapper);
|
||||||
|
return wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getObjectByName(obj, name) {
|
||||||
|
var ret = false;
|
||||||
|
obj.forEach(function(o) {
|
||||||
|
if (o.name == name) {
|
||||||
|
ret = o;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDocsJSON() {
|
||||||
|
var ret = [],
|
||||||
|
keys = Ox.keys(Ox);
|
||||||
|
keys.forEach(function(v) {
|
||||||
|
if (doc = getDoc(v)) {
|
||||||
|
ret.push(doc);
|
||||||
|
} else {
|
||||||
|
$.noop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return ret;
|
||||||
|
|
||||||
|
function getDoc(key) {
|
||||||
|
var standardElement = new Ox.Element();
|
||||||
|
var standardMethods = Ox.filter(Ox.keys(standardElement), function(m) { return typeof standardElement[m] === 'function' });
|
||||||
|
var firstLetter = key.substring(0,1);
|
||||||
|
if (firstLetter != firstLetter.toUpperCase() || typeof Ox[key] != 'function') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
var o = new Ox[key]();
|
||||||
|
}
|
||||||
|
catch(err) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if ('options' in o && typeof o['options'] == 'function') {
|
||||||
|
var functionString = Ox[key].toString();
|
||||||
|
var opts = o.options();
|
||||||
|
var _methods = Ox.filter(Ox.keys(o), function(m) { return (functionString.indexOf('that.'+m+' =') > -1 && typeof o[m] === 'function')});
|
||||||
|
var methods = {};
|
||||||
|
$.each(_methods, function(i, m) { methods[m] = o[m].toString() });
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
'name': key,
|
||||||
|
'options': opts,
|
||||||
|
'methods': methods,
|
||||||
|
'functionString': functionString
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
16
docs/index.html
Normal file
16
docs/index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>oxjs API</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="../build/css/ox.ui.css"/>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../build/js/jquery-1.4.2.js"></script>
|
||||||
|
<script type="text/javascript" src="../build/js/ox.js"></script>
|
||||||
|
<script type="text/javascript" src="../build/js/ox.ui.js"></script>
|
||||||
|
<script type="text/javascript" src="api.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user