Remote Layout

by amindunited

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Application top
    {{render tabs}}
    {{render remote}}
</script>
<script type="text/x-handlebars" data-template-name="tabs">
    <ul>
        <li>Film</li>
        <li>Television</li>
        <li>Music</li>
        <li>PlayList</li>
        <li>Search</li>
    </ul>
</script>
<script type="text/x-handlebars" data-template-name="remote">
    <div class="innerRemote">
        <div class="direction">
            <div class=""></div>
            <div class="icon-triangle-up" {{action up target="controller"}}></div>
            <div class=""></div>
            <div class="icon-triangle-left" {{action left target="controller"}}></div>
            <div class="icon-cd select" {{action select target="controller"}}></div>
            <div class="icon-triangle-right" {{action right target="controller"}}></div>
            <div class=""></div>
            <div class="icon-triangle-down" {{action down target="controller"}}></div>
            <div class=""></div>
        </div>
        <div class="playback">
            
            <div class="icon-fb" {{action rewind target="controller"}}></div>
            <div class="icon-play" {{action play target="controller"}}></div>
            <div class="icon-ff" {{action fastForward target="controller"}}></div>
            <div class="icon-to-start" {{action prev target="controller"}}></div>
            <div class="icon-stop" {{action stop target="controller"}}></div>
            <div class="icon-to-end" {{action next target="controller"}}></div>
        </div>
    </div>
</script>

CSS

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

html, body {
    font-size: 10px;
    font-family: sans-serif;
}
[class*="icon"] {
  font-family: 'entypo';
}

.entypo-items, .entypo-items:before {
  /*font-family: 'entypo';*/
}
.entypo-items > div {
    display:inline-block;
    font-size: 4em;
    color: #999999;
}

.entypo-items > div:hover {
    color:black;
}
/*/ EOF entypo
//////////////////////////////////////////////////////////////////////*/
.icon-phone:after { content:"\1F4DE"; }
.icon-mobile:after { content:"\1F4F1"; }
.icon-mouse:after { content:"\E789"; }
.icon-address:after { content:"\E723"; }
.icon-mail:after { content:"\2709"; }
.icon-paper-plane:after { content:"\1F53F"; }
.icon-pencil:after { content:"\270E"; }
.icon-feather:after { content:"\2712"; }
.icon-attach:after { content:"\1F4CE"; }
.icon-inbox:after { content:"\E777"; }
.icon-reply:after { content:"\E712"; }
.icon-reply-all:after { content:"\E713"; }
.icon-forward:after { content:"\27A6"; }
.icon-user:after { content:"\1F464"; }
.icon-users:after { content:"\1F465"; }
.icon-add-user:after { content:"\E700"; }
.icon-vcard:after { content:"\E722"; }
.icon-export:after { content:"\E715"; }
.icon-location:after { content:"\E724"; }
.icon-map:after { content:"\E727"; }
.icon-compass:after { content:"\E728"; }
.icon-direction:after { content:"\27A2"; }
.icon-hair-cross:after { content:"\1F3AF"; }
.icon-share:after { content:"\E73C"; }
.icon-shareable:after { content:"\E73E"; }
.icon-heart:after { content:"\2665"; }
.icon-heart-empty:after { content:"\2661"; }
.icon-star:after { content:"\2605"; }
.icon-star-empty:after { content:"\2606"; }
.icon-thumbs-up:after { content:"\1F44D"; }
.icon-thumbs-down:after { content:"\1F44E"; }
.icon-chat:after { content:"\E720"; }
.icon-comment:after { content:"\E718"; }
.icon-quote:after { content:"\275E"; }
.icon-home:after { content:"\2302";...

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({});

App.xbmcAPI = Em.Object.create({
    request: function(data, callback){
        console.log("requesting ", data);
    }
});

App.Remote = Em.Object.create();
App.RemoteController = Em.Controller.extend({

    /* SOF actions */
    up: function(){console.log("called up")},
    down: function(){console.log("called down")},
    left: function(){console.log("called left")},
    right: function(){console.log("called right")},
    select: function(){console.log("called select")},
    rewind: function(){console.log("called rewind")},
    fastForward: function(){console.log("called fastForward")},
    play: function(){console.log("called play")},
    prev:function(){console.log("called prev")},
    stop: function(){console.log("called stop")},
    next: function(){console.log("called next")}
    /* EOF actions */

});
App.RemoteView = Em.View.extend({
    template: "remote",
    classNames: ['remote']
});


App.Tabs = Em.Object.create();
App.TabsController = Em.Controller.extend();
App.TabsView = Em.View.extend({
    classNames: ['tabs']
});