Girdster in ember

README_01.md

An example of how to use Gridster in Ember.

View Twiddle | Copy Twiddle | View Gist

Original idea of this README taken from @rwjblue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

<link rel="stylesheet" href="http://cdn.jsdelivr.net/gridster.js/0.5.3/jquery.gridster.css">
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{grid-system}}
<br>
<br>

grid-system.component.js

import Ember from 'ember';

export default Ember.Component.extend({
   didRender: function(){
    Ember.$(".gridster ul").gridster({
      widget_base_dimensions: [70,70],
      widget_margins: [5, 5],
      helper: 'clone',
      resize: {
        enabled: true,
        max_size: [4, 4],
        min_size: [1, 1]
      }
    }).data('gridster');
  }
});

grid-system.template.hbs

<div class='gridster'>
      <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">a</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">b</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">c</li>
 
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">d</li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2">e</li>
 
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">f</li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1">g</li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1">h</li>
 
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">i</li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1">j</li>
 
        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1">k</li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2">l</li>
        </ul>
        </div>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.grister {
  
}
.gridster ul {
    list-style: none;
    background-color: gray;
}
.gridster ul li {
    background-color: white;
}

twiddle.json

{
  "version": "0.4.13",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js",
    "gridster": "http://cdn.jsdelivr.net/gridster.js/0.5.3/jquery.gridster.js"
  }
}