Merge pull request #227 from bustlelabs/update-demos

Update demos

demo/app/components/mobiledoc-dom-renderer.js

@@ -1,17 +1,18 @@
 import Ember from 'ember';
 import { cardsHash } from '../mobiledoc-cards/index';
+import Renderer from 'ember-mobiledoc-dom-renderer';
 
 let { computed, run } = Ember;
 
 export default Ember.Component.extend({
   domRenderer: computed(function(){
-    return new window.MobiledocDOMRenderer();
+    return new Renderer();
   }),
   didRender() {
     let domRenderer = this.get('domRenderer');
     let mobiledoc = this.get('mobiledoc');
     run(() => {
-      let target = this.$('.rendered-mobiledoc');
+      let target = this.$();
       target.empty();
       if (mobiledoc) {
         domRenderer.render(mobiledoc, target[0], cardsHash);

demo/app/components/mobiledoc-html-renderer.js

@@ -0,0 +1,23 @@
+import Ember from 'ember';
+import { cardsHash } from '../mobiledoc-cards/index';
+import Renderer from 'ember-mobiledoc-html-renderer';
+
+let { computed, run } = Ember;
+
+export default Ember.Component.extend({
+  htmlRenderer: computed(function(){
+    return new Renderer();
+  }),
+  didRender() {
+    let renderer = this.get('htmlRenderer');
+    let mobiledoc = this.get('mobiledoc');
+    run(() => {
+      let target = this.$();
+      target.empty();
+      if (mobiledoc) {
+        let html = renderer.render(mobiledoc, cardsHash);
+        target.text(html);
+      }
+    });
+  }
+});

demo/app/components/mobiledoc-text-renderer.js

@@ -0,0 +1,26 @@
+import Ember from 'ember';
+import { cardsHash } from '../mobiledoc-cards/index';
+import Renderer from 'ember-mobiledoc-text-renderer';
+
+let { computed, run } = Ember;
+
+export default Ember.Component.extend({
+  textRenderer: computed(function(){
+    return new Renderer();
+  }),
+  didRender() {
+    let renderer = this.get('textRenderer');
+    let mobiledoc = this.get('mobiledoc');
+    run(() => {
+      let target = this.$();
+      target.empty();
+      if (mobiledoc) {
+        let text = renderer.render(mobiledoc, cardsHash);
+        text = text.replace(/</g, '&lt;')
+                   .replace(/>/g,'&gt;')
+                   .replace(/\n/g, '<br>');
+        target.html(text);
+      }
+    });
+  }
+});

demo/app/controllers/index.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-import * as mobiledocs from '../mobiledocs/index';
+import mobiledocs from '../mobiledocs/index';
 
 let { $ } = Ember;
 
@@ -10,6 +10,7 @@ export default Ember.Controller.extend({
     let mobiledoc = mobiledocs['simple'];
     this.set('mobiledoc', mobiledoc);
     this.set('editedMobiledoc', mobiledoc);
+    this.set('rendererName', 'dom');
   },
 
   actions: {
@@ -22,6 +23,10 @@ export default Ember.Controller.extend({
       this.set('editedMobiledoc', mobiledoc);
     },
 
+    setRenderer(rendererName) {
+      this.set('rendererName', rendererName);
+    },
+
     didEdit(value) {
       this.set('editedMobiledoc', value);
     }

demo/app/mobiledoc-cards/codemirror.js

@@ -0,0 +1,47 @@
+/* global $, CodeMirror */
+let getCode = ({code}) => {
+  return code || 'let x = 3;';
+};
+
+export default {
+  name: 'codemirror-card',
+  display: {
+    setup(element, options, env, payload) {
+      $(element).empty();
+      let code = getCode(payload);
+      let button = $('<button>Edit</button>');
+
+      if (env.edit) {
+        button.on('click', env.edit);
+        $(element).append(button);
+      }
+
+      let ta = $(`<textarea>${code}</textarea>`);
+      $(element).append(ta);
+      CodeMirror.fromTextArea(ta[0], {
+        mode: 'javascript',
+        readOnly: 'nocursor'
+      });
+    }
+  },
+  edit: {
+    setup(element, options, env, payload) {
+      $(element).empty();
+
+      let code = getCode(payload);
+      let ta = $(`<textarea>${code}</textarea>`);
+
+      let button = $('<button>Save</button>');
+      $(element).append(button);
+
+      $(element).append(ta);
+      let cm = CodeMirror.fromTextArea(ta[0], {
+        mode: 'javascript'
+      });
+      button.on('click', () => {
+        let code = cm.getValue();
+        env.save({code});
+      });
+    }
+  }
+};

demo/app/mobiledoc-cards/image.js

@@ -1,10 +1,59 @@
-export let imageCard = {
+/* global $ */
+const defaultSrc = 'http://placekitten.com/200/75';
+
+function displayImage(element, src=defaultSrc) {
+  let img = $(`<img src="${src}">`);
+  $(element).append(img);
+}
+
+export default {
   name: 'image-card',
   display: {
-    setup(element) {
-      var card = document.createElement('img');
-      card.src = 'http://placehold.it/200x75';
-      element.appendChild(card);
+    setup(element, options, env, payload) {
+      displayImage(element, payload.src);
+      if (env.edit) {
+        $('<button>Change</button>').appendTo(element)
+          .on('click', env.edit);
+      }
+      return element;
+    },
+    teardown(element) {
+      $(element).empty();
+    }
+  },
+  edit: {
+    setup(element, options, env, payload) {
+      function importImage(event) {
+        let reader = new FileReader();
+        let file = event.target.files[0];
+        reader.onloadend = () => {
+          env.save({src: reader.result});
+        };
+        reader.readAsDataURL(file);
+      }
+
+      $('<input type="file">').appendTo(element)
+        .on('change', importImage);
+
+      $('<button>Save</button>').appendTo(element)
+        .on('click', () => { env.save(payload); });
+
+      return element;
+    },
+    teardown(element) {
+      $(element).empty();
+    }
+  },
+  html: {
+    setup(buffer, options, env, payload) {
+      let src = payload.src || defaultSrc;
+      let html = `<img src="${src}">`;
+      buffer.push(html);
+    }
+  },
+  text: {
+    setup(/*str, options, env, payload*/) {
+      return "[image]";
     }
   }
 };

demo/app/mobiledoc-cards/index.js

@@ -1,18 +1,19 @@
-import { inputCard } from './input';
-import { simpleCard } from './simple';
-import { selfieCard } from './selfie';
-import { imageCard } from './image';
+import inputCard from './input';
+import simpleCard from './simple';
+import selfieCard from './selfie';
+import imageCard from './image';
+import codemirrorCard from './codemirror';
 
 export let cardsList = [
   inputCard,
   simpleCard,
   selfieCard,
-  imageCard
+  imageCard,
+  codemirrorCard
 ];
 
-export let cardsHash = {
-  ['input-card']: inputCard,
-  ['simple-card']: simpleCard,
-  ['selfie-card']: selfieCard,
-  ['image-card']: imageCard
-};
+let cardsHash = {};
+cardsList.forEach(card => {
+  cardsHash[card.name] = card;
+});
+export { cardsHash };

demo/app/mobiledoc-cards/input.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 let { $ } = Ember;
 
-export let inputCard = {
+export default {
   name: 'input-card',
   display: {
     setup(element, options, env, payload) {

demo/app/mobiledoc-cards/selfie.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 let { $ } = Ember;
 
-export let selfieCard = {
+export default {
   name: 'selfie-card',
   display: {
     setup(element, options, env, payload) {
@@ -27,9 +27,11 @@ export let selfieCard = {
         );
       }
 
-      $('#go-edit').click(function() {
-        env.edit();
-      });
+      if (env.edit) {
+        $('#go-edit').click(function() {
+          env.edit();
+        });
+      }
     }
   },
   edit: {
@@ -38,9 +40,9 @@ export let selfieCard = {
 
       var vid = $('' +
         '<div>' +
-          '<video id="video" width="160" height="120" autoplay></video>' +
+          '<video id="video" width="400" height="300" autoplay></video>' +
           '<button id="snap">Snap Photo</button>' +
-          '<canvas id="canvas" width="160" height="120"></canvas>' +
+          '<canvas id="canvas" width="400" height="300"></canvas>' +
         '</div>' +
       '');
       element.appendChild(vid[0]);
@@ -70,11 +72,21 @@ export let selfieCard = {
         }
 
         $('#snap').click(function() {
-          context.drawImage(video, 0, 0, 160, 120);
+          context.drawImage(video, 0, 0, 400, 300);
           var src = canvas.toDataURL('image/png');
           env.save({src: src});
         });
       }, errBack);
     }
+  },
+  html: {
+    setup(buffer, options, env, payload) {
+      buffer.push(`<img src="${payload.src}>"`);
+    }
+  },
+  text: {
+    setup() {
+      return "[ :-) ]";
+    }
   }
 };

demo/app/mobiledoc-cards/simple.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 let { $ } = Ember;
 
-export let simpleCard = {
+export default {
   name: 'simple-card',
   display: {
     setup(element, options, env) {