Item Collection Display

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 imagesCollection}}
</script>
<script type="text/x-handlebars" data-template-name="image">
    <div>
        <div class="imageTitle">{{view.content.title.$t}}</div>
        <img src="{{unbound view.content.content.src}}"></img>
    </div>
</script>
<div class="controls">
    <div class="direction">
        <div class="control"></div>
        <div class="control up">&#9652;</div>
        <div class="control"></div>
        <div class="control left">&#9666;</div>
        <div class="control select">&#128191;</div>
        <div class="control right">&#9656;</div>
        <div class="control"></div>
        <div class="control down">&#9662;</div>
        <div class="control"></div>
    </div>    
</div>
<div class="entypo-items">
&amp;#128222;,&amp;#128241;,&amp;#59273;,&amp;#59171;,&amp;#9993;,&amp;#128319;,&amp;#9998;,&amp;#10002;,&amp;#128206;,&amp;#59255;,&amp;#59154;,&amp;#59155;,&amp;#10150;,&amp;#128100;,&amp;#128101;,&amp;#59136;,&amp;#59170;,&amp;#59157;,&amp;#59172;,&amp;#59175;,&amp;#59176;,&amp;#10146;,&amp;#127919;,&amp;#59196;,&amp;#59198;,&amp;hearts;,&amp;#9825;,&amp;#9733;,&amp;#9734;,&amp;#128077;,&amp;#128078;,&amp;#59168;,&amp;#59160;,&amp;#10078;,&amp;#8962;,&amp;#59212;,&amp;#128269;,&amp;#128294;,&amp;#59158;,&amp;#128276;,&amp;#128279;,&amp;#9873;,&amp;#9881;,&amp;#9874;,&amp;#127942;,&amp;#59148;,&amp;#128247;,&amp;#128227;,&amp;#9789;,&amp;#127912;,&amp;#127810;,&amp;#9834;,&amp;#9835;,&amp;#128165;,&amp;#127891;,&amp;#128213;,&amp;#128240;,&amp;#128092;,&amp;#9992;,&amp;#59272;,&amp;#59146;,&amp;#128340;...

CSS

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

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
.entypo-items, .entypo-items:before {
  font-family: 'entypo';
    font-size: 3em;
    width: 500px;
    word-wrap:break-word;
}
/*/ EOF entypo
//////////////////////////////////////////////////////////////////////*/
.imageWrap {
    display: inline-block;
    width: 120px;
    height: 100px;
    margin: 1px;
    border-collapse:separate;
    background-color: #cdcdcd;
    border-radius: 4px;
    padding: 2px;
    padding-bottom:4px;
    border: solid 1px #ababab;
    border-left: solid 1px  #898989;
    border-top: solid 1px  #cdcdcd;
    border-right: solid 1px  #676767;
    border-bottom: solid 1px #454545;
}
.imageWrap .imageTitle {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto;
    margin-right: auto;
}
.imageWrap img {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
    display: block;
}

.controls {
    font-family: 'entypo';
    position: absolute;
    bottom: 1px;
    color: white;
    border-collapse:separate;
    background-color: #232323;
    border-radius: 4px;
    padding: 2px;
    padding-bottom:4px;
    border: solid 1px #ababab;
    border-left: solid 1px  #898989;
    border-top: solid 1px  #cdcdcd;
    border-right: solid 1px  #676767;
    border-bottom: solid 1px #454545;
    text-align:center;
}
.controls .direction {
    width: 57px;
    height: 57px;
}
.controls .control {
    width: 15px;
    height: 15px;
    display: inline-block;
}

JavaScript

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

App.Images = Em.Object.create({
    content:[],
    /*
    init: function(){
        var self = this;
        $.getJSON( 
            "http://picasaweb.google.com/data/feed/api/user/buckley.robin/albumid/5751950773409336513" + '' +'?alt=json&thumbsize=' + '50' , function(data){
            var allImages = data.feed.entry;
            allImages.sort(function(a, b){            
                return b.gphoto$timestamp.$t - a.gphoto$timestamp.$t;
            });
            self.content.pushObjects(allImages)
            console.log("self.content ", self.content);
        });
    }*/
});
App.ImagesCollectionView = Em.CollectionView.extend({
    contentBinding: 'App.Images.content',
    itemViewClass:'App.ImageView'
});
App.ImageView = Em.View.extend({
    templateName:"image",
    classNames: "imageWrap"
})

$(function(){
    var str = $('.entypo-items').text();
    str = str.replace('&amp;', '&');
    //var ar = str.split(',');
    $('.entypo-items').html(str);
})