Layout Template Markdown Demos

README.md

@@ -170,33 +170,46 @@ import Ember from 'ember'
 export default Ember.Helper.helper(function(params, hash) {
    return {
     /**
-     * Return an object that describes the size of the content area
+     * Size of the content area
+     * @param {Number} containerWidth
+     * @param {Number} containerHeight
+     * @return {Object} contentSize
      */
     contentSize(clientWidth, clientHeight) {
-        return { width, height };
+      return { width, height };
     }
-    
+
     /**
-     * Return the index of the first item shown.
+     * Index of the first visible item
+     * @param {Number} offsetX
+     * @param {Number} offsetY
+     * @param {Number} containerWidth
+     * @param {Number} containerHeight
+     * @return {Number} indexAt
      */
-    indexAt(offsetX, offsetY, clientWidth, clientHeight) {
-        return Number;
+    indexAt(offsetX, offsetY, containerWidth, containerHeight) {
+      return Number;
     }
-    
+
     /**
-     *  Return the number of items to display
+     * Return the number of items to display
+     * @param {Number} offsetX
+     * @param {Number} offsetY
+     * @param {Number} containerWidth
+     * @param {Number} containerHeight
+     * @return {Number} count
      */
-    count(offsetX, offsetY, width, height) {
-        return Number;
+    count(offsetX, offsetY, containerWidth, containerHeight) {
+      return Number;
     }
-    
+
     /**
      * Return the css that should be used to set the size and position of the item.
      */
     formatItemStyle(itemIndex, clientWidth, clientHeight) {
         return String;
     }
-  } 
+  }
 });
 ```
 

bower.json

@@ -4,6 +4,8 @@
     "ember": "~2.3.1",
     "ember-cli-shims": "0.1.0",
     "ember-cli-test-loader": "0.2.2",
-    "ember-qunit-notifications": "0.1.0"
+    "ember-qunit-notifications": "0.1.0",
+    "remarkable": "^1.6.2",
+    "highlightjs": "^9.2.0"
   }
 }

ember-cli-build.js

@@ -13,6 +13,7 @@ module.exports = function(defaults) {
     This build file does *not* influence how the addon or the app using it
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
+  app.import(app.bowerDirectory + '/highlightjs/styles/tomorrow.css');
 
   return app.toTree();
 };

package.json

@@ -35,6 +35,7 @@
     "ember-disable-proxy-controllers": "^1.0.1",
     "ember-export-application-global": "^1.0.4",
     "ember-load-initializers": "^0.5.0",
+    "ember-remarkable": "3.1.0",
     "ember-resolver": "^2.0.3",
     "ember-try": "^0.2.0",
     "exists-sync": "0.0.3",
@@ -47,7 +48,9 @@
   "dependencies": {
     "ember-cli-babel": "^5.1.5",
     "ember-cli-htmlbars": "^1.0.1",
-    "layout-bin-packer": "^1.2.0"
+    "layout-bin-packer": "^1.2.0",
+    "broccoli-stew": "^1.2.0",
+    "ember-cli-github-pages": "0.0.8"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",

tests/dummy/app/controllers/mixed.js

@@ -1,2 +1,22 @@
 import Ember from 'ember';
-export default Ember.Controller.extend({});
+import { MixedGridInterface } from '../interface/grid-interface';
+
+export default Ember.Controller.extend({
+  showLayout: false,
+  mixedGrid: Ember.computed('model', function() {
+    return new MixedGridInterface(this.get('model'));
+  }),
+  code: Ember.computed('mixedGrid._size', 'mixedGrid._contentSize', 'mixedGrid._indexAt', 'mixedGrid._count', function() {
+    if(!(this.get('mixedGrid._size') || 0)){ return ''; }
+    return '\n' +
+      this.get('mixedGrid.markdownContentSize') + '\n' +
+      this.get('mixedGrid.markdownIndexAt') + '\n' +
+      this.get('mixedGrid.markdownCount');
+  }),
+
+  actions: {
+    toggleLayout: function() {
+      this.toggleProperty('showLayout');
+    }
+  }
+});

tests/dummy/app/controllers/percentages.js

@@ -1,9 +1,22 @@
 import Ember from 'ember';
+import { PercentageColumnsInterface } from '../interface/grid-interface';
 
 export default Ember.Controller.extend({
   columns: Ember.computed(function() {
     return [20, 60, 20];
   }),
+  showLayout: false,
+  percentageGrid: Ember.computed('model.length', 'columns', function() {
+    return new PercentageColumnsInterface(this.get('model.length'), this.get('columns'), 50);
+  }),
+
+  code: Ember.computed('percentageGrid._size', 'percentageGrid._contentSize', 'percentageGrid._indexAt', 'percentageGrid._count', function() {
+    if(!(this.get('percentageGrid._size') || 0)){ return ''; }
+    return '\n' +
+      this.get('percentageGrid.markdownContentSize') + '\n' +
+      this.get('percentageGrid.markdownIndexAt') + '\n' +
+      this.get('percentageGrid.markdownCount');
+  }),
   actions: {
     changeColumn: function(col) {
       switch (col) {
@@ -26,6 +39,9 @@ export default Ember.Controller.extend({
           this.set('columns', [50, 50]);
           break;
         }
+    },
+    toggleLayout: function() {
+      this.toggleProperty('showLayout');
     }
   }
 });

tests/dummy/app/controllers/scroll-position.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import { FixedGridInterface } from '../interface/grid-interface';
 
 export default Ember.Controller.extend({
   itemWidth: 100,
@@ -8,6 +9,20 @@ export default Ember.Controller.extend({
   scrollLeft: 0,
   scrollTop: 0,
 
+  showLayout: false,
+
+  fixedGrid: Ember.computed('itemWidth', 'itemHeight', function() {
+    return new FixedGridInterface(this.get('itemWidth'), this.get('itemHeight'));
+  }),
+
+  code: Ember.computed('fixedGrid._size', 'fixedGrid._contentSize', 'fixedGrid._indexAt', 'fixedGrid._count', function() {
+    if(!(this.get('fixedGrid._size') || 0)){ return ''; }
+    return '\n' +
+      this.get('fixedGrid.markdownContentSize') + '\n' +
+      this.get('fixedGrid.markdownIndexAt') + '\n' +
+      this.get('fixedGrid.markdownCount');
+  }),
+
   actions: {
     updateContainerWidth: function(value) {
       this.set('containerWidth', parseInt(value, 10));
@@ -20,7 +35,7 @@ export default Ember.Controller.extend({
     makeSquare: function() {
       this.setProperties({
         itemWidth: 100,
-        itemHeight: 100,
+        itemHeight: 100
       });
     },
 
@@ -50,6 +65,10 @@ export default Ember.Controller.extend({
         scrollLeft: scrollLeft,
         scrollTop: scrollTop
       });
+    },
+
+    toggleLayout: function() {
+      this.toggleProperty('showLayout');
     }
   }
 });

tests/dummy/app/controllers/simple.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import { FixedGridInterface } from '../interface/grid-interface';
 
 function shuffle(array) {
   var currentIndex = array.length, temporaryValue, randomIndex ;
@@ -25,6 +26,20 @@ export default Ember.Controller.extend({
   containerWidth: 315,
   containerHeight: 600,
 
+  showLayout: false,
+
+  fixedGrid: Ember.computed('itemWidth', 'itemHeight', function() {
+    return new FixedGridInterface(this.get('itemWidth'), this.get('itemHeight'));
+  }),
+
+  code: Ember.computed('fixedGrid._size', 'fixedGrid._contentSize', 'fixedGrid._indexAt', 'fixedGrid._count', function() {
+    if(!(this.get('fixedGrid._size') || 0)){ return ''; }
+    return '\n' +
+      this.get('fixedGrid.markdownContentSize') + '\n' +
+      this.get('fixedGrid.markdownIndexAt') + '\n' +
+      this.get('fixedGrid.markdownCount');
+  }),
+
   actions: {
     updateContainerWidth: function(value) {
       this.set('containerWidth', parseInt(value, 10));
@@ -35,7 +50,7 @@ export default Ember.Controller.extend({
     },
 
     shuffle: function() {
-        this.set('model', shuffle(this.get('model').slice(0)));
+      this.set('model', shuffle(this.get('model').slice(0)));
     },
 
     makeSquare: function() {
@@ -64,6 +79,10 @@ export default Ember.Controller.extend({
         itemWidth: 50,
         itemHeight: 100
       });
+    },
+
+    toggleLayout: function() {
+      this.toggleProperty('showLayout');
     }
   }
 });