/*** OxUI Documentation ***/ var app = {}; $(function() { app.$body = $('body'); app.$document = $(document); app.$window = $(window); app.$ui = {}; app.docstrings = {}; $("
").load('../build/js/ox.ui.js', function(data) { app.source = data; var docstrings = app.source.match(/\/\*\*\n([\s\S]+?\*\/\n.*?)\n/gm) docstrings.forEach(function(doc) { doc = Ox.trim(doc); var name = doc.match(/Ox\.(.+) = function/); if(name) { doc = doc.split('\n'); doc.splice(0, 1); doc.pop(); doc.pop(); //remove whitespace var offset = /^\s+/.exec(doc[0]); if(offset) doc = Ox.map(doc, function(line) { return line.substring(offset[0].length)}); app.docstrings[name[1]] = Ox.trim(doc.join('\n')); } }) }); app.docs = getDocsJSON(); app.$ui.actionList = constructList(); app.$ui.actionInfo = Ox.Container().css({padding: '8px'}).html('select action on the left.'); var $left = new Ox.SplitPanel({ elements: [ { element: new Ox.Element().append(new Ox.Element().html('oxjs API').css({ 'padding': '4px', })).css({ 'background-color': '#ddd', 'font-weight': 'bold', }), size: 24 }, { element: app.$ui.actionList } ], orientation: 'vertical' }); var $main = new Ox.SplitPanel({ elements: [ { element: $left, 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(v.name); }); items = Ox.map(items, function(i) { return {name: i}}); 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); }, scrollbarVisible: true, sort: [ { key: "name", operator: "+" } ] }).bindEvent({ select: function(event, data) { var info = $('
'); 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) { function cell(content) { return $('').css({'padding-right': '4px'}).html(content); } var $div = $('
'); var title = $('

').html('Ox.'+doc.name) .appendTo($div); if(app.docstrings[doc.name]) $('
').html(app.docstrings[doc.name]).appendTo($div);

    if(doc.options) {
        var $options = $('
').html("Options: ") .css({'marginBottom': '20px'}) .appendTo($div); var $table = $('').attr({'cellpadding': '4'}) .appendTo($options); Ox.keys(doc.options).forEach(function(k) { var $option = $(''); cell(k).appendTo($option); if(typeof(doc.options[k]) != 'undefined') { cell(typeof doc.options[k]).appendTo($option); if(Ox.isNull(doc.options[k])) cell(' null').appendTo($option); else cell(' ' + doc.options[k].toString() + '').appendTo($option); } else { cell(' ').appendTo($option); cell('required, no default value').appendTo($option); } $option.appendTo($options); }); } var methods = Ox.keys(doc.methods); if (methods.length > 0) { var $methods = $('
').html("Methods:").appendTo($div); methods.forEach(function(m) { var $method = $('
').appendTo($methods); var $code = $('
').html(doc.methods[m]).hide();
            var options = /function \((.*?)\)/.exec(doc.methods[m]);
            var lable = new Ox.Label({
                                    title: m + '('+options[1]+')', 
                                    width: 190
                                })
                                .css({'float': 'left', 'margin-right': '4px'})
                                .addClass("margin")
                                .appendTo($method);
            var $button = new Ox.Button({
                    title: [
                        {id: "one", title: "expand"},
                        {id: "two", title: "collapse"},
                    ],
                    type: "image"
                })
                .addClass("margin")
                .appendTo($method)
                .click(function() { $code.toggle()});
          $code.appendTo($method);
        });
    }

    if(doc.functionString) {
        var $methodcode = $('
').html(doc.functionString.replace(/').html(' View Source').appendTo($div)
        $methodcode.appendTo($div);
    }
    return $div;
}

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) {
        //FIXME: eventually we want to document all Ox values and functions
        if (!/^[A-Z][a-z]/.test(key)) {
            return false
        }
        var functionString = Ox[key].toString();
        if (typeof Ox[key] != 'function') {
            return {
                'name': key,
                'functionString': functionString
            }
        }
        try {
            var o = new Ox[key]();
        } catch(err) {
            return {
                'name': key,
                'functionString': functionString
            }
        }
        var methods = {};
        var opts = {};
        if ('options' in o && typeof o['options'] == 'function') {
            var opts = o.options();
            //only inclue methods that are defined in the function
            var _methods = Ox.filter(Ox.keys(o), function(m) { return (functionString.indexOf('that.'+m+' =') > -1 && typeof o[m] === 'function')});
            $.each(_methods, function(i, m) { methods[m] = o[m].toString() });
        }
        return {
            'name': key,
            'options': opts,
            'methods': methods,
            'functionString': functionString
        }
    }
}