GitHub.Browser

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

.onyx-item > * {
    display: inline-block;
}

.icon_blob:before {
	content: url("http://kappline.nl/img/images_trans.png");
    height: 32px;
}

JavaScript

enyo.store.ignoreDuplicates = true;

enyo.kind({
    name: "GitHub.Client",
    kind: "Component",
    
    getTree: function(user, repository, sha, callback) {
        var url = [this._urlBase, "repos", user, repository, "git", "trees", sha].join("/");
        this.go(url, null, callback);
    },
    
    getRepositories: function(user, callback) {
        var url = [this._urlBase, "users", user, "repos"].join("/");
        this.go(url, null, callback);
    },
    
    //* @private
    
    _urlBase: "https://api.github.com",
    go: function(url, body, callback) {
        var xhr = new enyo.Ajax({url:url});
        xhr.go(body);
        xhr.response(callback);
    }
});

enyo.kind({
    name: "GitHub.RepoBrowser",
    kind: "FittableRows",
    
    //* @public
    username: "enyojs",
    
    events: {
        onSelectRepository: ""
    },

    //* @private
    observers: {
        userChanged: ["username"]
    },
    bindings: [
        {from:".username", to:".$.user.value", kind:"enyo.InputBinding"},
        {from:".repos", to:".$.list.collection"}
    ],
    components: [
        {kind:"onyx.Toolbar", components:[
            {content:"Select a Repository"}
        ]},
        {kind:"onyx.InputDecorator", style:"display:block;margin:8px;", components:[
            {name:"user", kind:"onyx.Input", placeholder:"Username", style:"width:100%"}
        ]},
        {name:"views", kind:"Panels", draggable:false, fit:true, components:[
            {},
            {style:"text-align:center;margin:20px;", components:[
                {kind:"onyx.Spinner", classes:"onyx-light"}
            ]},
            {name:"error"},
            {name:"list", kind:"DataList", components:[
                {kind:"onyx.Item", ontap:"repoSelected", components:[
                    {name:"repo"}
                ], bindings:[
                    {from:".model.name", to:".$.repo.content"}
                ]}
            ]}
        ]},
        {name:"github", kind:"GitHub.Client"}
    ],
  ...