EmberMasonry

Make ember and masonry work how i like it

by mgrassotti

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.js"></script>
<script src="http://masonry.desandro.com/js/box-maker.js"></script>
<!doctype html>
<html lang="en">
<head>
  <title>Ember and Masonry</title>
</head>
<body>

<script type='text/x-handlebars' data-template-name='item'>
    {{view.content.text}}
</script>
    
<script type="text/x-handlebars" data-template-name="application">
    <h1>EMBER + MASONRY FTW</h1>
    <button {{action prependBox}}>+ prepend</button>
    <button {{action appendBox}}>+ append</button>
    <hr/>

    {{outlet}}
</script>
    
</body>
</html>

CSS

.hidden { display: none; }

/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/**** Demos ****/

.masonry-container {
  background: #EEE;
  padding: 10px;
  margin: 20px;
  border-radius: 5px;
  clear: both;
}

.box {
  margin: 5px;
  padding: 5px;
  background: pink;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.box img {
  display: block;
  width: 100%;
}

.col1 { width: 80px; }
.col1 img { max-width: 80px; }

CoffeeScript

App = Em.Application.create(
  VERSION: '0.0.1'
  ready: ->
    console.log "App.ready()", @get('VERSION')
    App.router.send('appendBox') for x in [0..2]
)
@App = App

App.boxMaker = Em.Object.create
  lorem: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu interdum odio. Cras lobortis mauris vitae tellus consectetur sit amet cursus ipsum vestibulum. Duis facilisis sodales tristique. Vivamus aliquet, est a rhoncus dapibus, velit tortor tempor turpis, a pharetra diam lacus a metus. Donec gravida faucibus magna, nec laoreet nibh placerat et. Cras magna lorem, faucibus vitae rhoncus ac, tincidunt vel velit. Mauris aliquam, risus vel sodales laoreet, mi nulla faucibus nunc, eu tincidunt nisi leo sed orci. Curabitur sagittis libero eu augue luctus ullamcorper.".split(".")
  
  randoLoremText: ->
    lorem = @get('lorem')
    loremText = ""
    sentences = Math.random() * 5
    j = 0

    while j < sentences
      whichSentence = Math.floor(Math.random() * lorem.length - 1 )
      loremText += lorem[whichSentence] + ". "
      j++
    loremText
    
    
App.ApplicationController = Em.Controller.extend()
App.ApplicationView = Em.View.extend(templateName: "application")
App.ItemsController = Ember.ArrayController.extend(content: [])


App.ItemView = Ember.View.extend
    classNames: ['box col1']
    templateName: "item"
    didInsertElement: ->
#        console.log 'Inserted view App.Item for ' + this.getPath('content.text')
        @get('parentView').childDidInsertElement()

App.MasonryGrid = Ember.Mixin.create

    init: ->
      @_super();
      @set "masonry", @get('masonry').create 
        grid: this
            
    masonry: Em.StateManager.extend
      enableLogging: true
      
      initMasonry: ->
        @get('grid').$().masonry
          itemSelector: '.box'
      reloadMasonry: ->        
        @get('grid').$().masonry 'reload'
      
      start: Em.State.extend
        containerElementInserted: (manager, context) ->
         ...