sample cards: simple, edit, input

bustle · Jul 15, 2015 · 6a440dc · 6a440dc
1 parent 055776e
commit 6a440dc
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 6 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -1,7 +1,99 @@
 (function(exports, document, undefined) {
-
 'use strict';
 
+function removeChildren(element) {
+  for (var i=0; i < element.childNodes.length; i++) {
+    element.removeChild(element.childNodes[i]);
+  }
+}
+
+var simpleCard = {
+  name: 'simple-card',
+  display: {
+    setup: function(element) {
+      let card = document.createElement('span');
+      card.innerHTML = 'Hello, world';
+      element.appendChild(card);
+    }
+  }
+};
+
+var cardWithEditMode = {
+  name: 'edit-card',
+  display: {
+    setup: function(element, options, env) {
+      removeChildren(element);
+      let card = document.createElement('div');
+      card.innerHTML = 'I am in display mode';
+
+      let button = document.createElement('button');
+      button.innerText = 'Change to edit';
+      button.onclick = env.edit;
+
+      card.appendChild(button);
+      element.appendChild(card);
+    }
+  },
+  edit: {
+    setup: function(element, options, env) {
+      removeChildren(element);
+      let card = document.createElement('div');
+      card.innerHTML = 'I am in edit mode';
+
+      let button = document.createElement('button');
+      button.innerText = 'Change to display';
+      button.onclick = env.save;
+
+      card.appendChild(button);
+      element.appendChild(card);
+    }
+  }
+};
+
+var cardWithInput = {
+  name: 'input-card',
+  display: {
+    setup: function(element, options, env, payload) {
+      removeChildren(element);
+
+      var text = 'I am in display mode';
+      if (payload.name) {
+        text = 'Hello, ' + payload.name + '!';
+      }
+      let card = document.createElement('div');
+      card.innerText = text;
+
+      let button = document.createElement('button');
+      button.innerText = 'Edit';
+      button.onclick = env.edit;
+
+      card.appendChild(button);
+      element.appendChild(card);
+    }
+  },
+  edit: {
+    setup: function(element, options, env) {
+      removeChildren(element);
+      let card = document.createElement('div');
+      card.innerHTML = 'What is your name?';
+
+      let input = document.createElement('input');
+      input.placeholder = 'Enter your name...';
+
+      let button = document.createElement('button');
+      button.innerText = 'Save';
+      button.onclick = function() {
+        var name = input.value;
+        env.save({name:name});
+      };
+
+      card.appendChild(input);
+      card.appendChild(button);
+      element.appendChild(card);
+    }
+  }
+};
+
 var ContentKit = exports.ContentKit,
     $ = exports.$,
     MobiledocHTMLRenderer = exports.MobiledocHTMLRenderer,
@@ -58,11 +150,7 @@ function bootEditor(element, mobiledoc) {
   var editor = new ContentKit.Editor(element, {
     autofocus: false,
     mobiledoc: mobiledoc,
-    cards: {
-      'pick-color': function renderPickColor(payload) {
-        return 'PICK A COLOR: '+payload.options.join(', ');
-      }
-    }
+    cards: [simpleCard, cardWithEditMode, cardWithInput]
   });
 
   editor.on('update', function() {
@@ -145,6 +233,36 @@ var sampleMobiledocs = {
         [[0], 1, "on github."]
       ]]
     ]
+  ],
+
+  mobileDocWithSimpleCard: [
+    [],
+    [
+      [1, "H2", [
+        [[], 0, "Simple Card"]
+      ]],
+      [10, "simple-card"]
+    ]
+  ],
+
+  mobileDocWithEditCard: [
+    [],
+    [
+      [1, "H2", [
+        [[], 0, "Edit Card"]
+      ]],
+      [10, "edit-card"]
+    ]
+  ],
+
+  mobileDocWithInputCard: [
+    [],
+    [
+      [1, "H2", [
+        [[], 0, "Input Card"]
+      ]],
+      [10, "input-card"]
+    ]
   ]
 };
 

diff --git a/demo/index.html b/demo/index.html
@@ -31,6 +31,9 @@ <h2>mobiledoc to load</h2>
          <select id='select-mobiledoc'>
            <option disabled>Choose a mobiledoc...</option>
            <option value='simpleMobiledoc'>Simple mobiledoc</option>
+           <option value='mobileDocWithSimpleCard'>simple card</option>
+           <option value='mobileDocWithEditCard'>edit card</option>
+           <option value='mobileDocWithInputCard'>input card</option>
            <option value='mobileDocWithMarker'>mobiledoc with simple marker</option>
            <option value='mobileDocWithMultipleMarkers'>mobiledoc with multiple markers</option>
            <option value='mobileDocWithAttributeMarker'>mobiledoc with attributed marker</option>