Merge pull request #28 from bustlelabs/markers-cory

capture enter key, create new sections
bustle · Jul 31, 2015 · 5028e64 · 5028e64
2 parents 510faeb + f49d483
commit 5028e64
Show file tree

Hide file tree

Showing 29 changed files with 1,508 additions and 362 deletions.
diff --git a/demo/demo.css b/demo/demo.css
@@ -4,31 +4,82 @@
   box-sizing: border-box;
 }
 
-body {
+html, body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #454545;
+  color: #121212;
   margin: 0;
-  padding: 0;
-  background-color: #EFEFEF;
+  padding: 1.2rem;
+  background-color: #F3F3F3;
+  font-size: 1.1rem;
+  line-height: 1.4;
+  height: 100%;
+  width: 100%;
 }
 @media only screen and (max-width: 767px) {
   body {
-    font-size: 0.88em;
+    font-size: 0.79rem;
   }
 }
 
+h1, h2, h3, h4, h5 {
+  font-family: "Merriweather Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0.2rem 0 0.2rem;
+}
+
+h1 {
+  font-size: 1.8rem;
+}
+
+h2 {
+  font-size: 1.4rem;
+}
+
+h4 {
+  font-size: 0.9rem;
+  color: #3C3C3C;
+}
+
+p {
+  margin: 0.6rem 0 0.6rem;
+}
+
 .container {
-  display: -ms-flexbox;
-  display: -webkit-flex;
+  margin: 0.5rem 0 0;
   display: flex;
+  flex-direction: row;
+}
+
+.col-container {
+  display: flex;
+  flex-direction: column;
+}
 
-  -ms-flex-pack: justify;
-  justify-content: space-around;
+hr {
+  content: 0;
+  height: 0;
+  border: 0;
+  border-bottom: 3px solid #121212;
+  margin: 0.9rem 0 0.8rem;
+}
+
+.headline-note {
+  color: #D0021B;
+  font-size: 1.0rem;
+  font-weight: normal;
+  margin: 0 0.4rem 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.subheadline {
+  color: #565656;
 }
 
 .pane {
-  max-width: 20%;
-  padding: 0 1em;
+  flex: 1;
+}
+
+.row {
+  flex: 1;
 }
 
 .pane p.desc {
@@ -75,13 +126,34 @@ body {
   right: 0;
   width: 50%;
 }
+#editor {
+  font-size: 0.9rem;
+}
 #serialized-mobiledoc, #mobiledoc-to-load {
   overflow: hidden;
   padding: 0.25em;
 }
 #serialized-mobiledoc {
   white-space: pre;
-  background-color: #080808;
+  font-size: 0.7rem;
+}
+.output {
+  margin: 0.3rem;
+  background: #ffffff;
+  border: 2px solid #8A888A;
+  padding: 0.3rem 0 0.3rem 0.5rem;
+}
+.output.full-left {
+  margin-left: 0;
+}
+.output.full-right {
+  margin-right: 0;
+}
+.serialized-mobiledoc-wrapper {
+  line-height: 1.1;
+}
+#rendered-mobiledoc {
+  font-size: 0.9rem;
 }
 #mobiledoc-to-load {
 }
@@ -101,7 +173,6 @@ body {
   background-color: transparent;
   color: #c0c5ce;
   padding: 5em 1em 1em;
-  overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: absolute;
   top: 0;

diff --git a/demo/demo.js b/demo/demo.js
@@ -15,14 +15,13 @@ var selfieCard = {
     setup: function(element, options, env, payload) {
       removeChildren(element);
 
-      if (payload.imageSrc) {
+      if (payload.src) {
         element.appendChild(
           $('' +
               '<div>' +
-                '<img src="' + payload.imageSrc + '"><br>' +
+                '<img src="' + payload.src + '"><br>' +
                 '<div>You look nice today.</div>' +
                 (env.edit ? "<div><button id='go-edit'>Take a better picture</button></div>" : "") +
-                '<div><button id="go-edit">Take a better picture</button></div>' +
               '</div>' +
             '')[0]
         );
@@ -61,16 +60,16 @@ var selfieCard = {
             alert('error getting video feed');
           };
       if (!navigator.webkitGetUserMedia) {
-        alert('Cannot get your video because no navigator.webkitGetUserMedia');
+        alert('This only works in Chrome (no navigator.webkitGetUserMedia)');
       }
       navigator.webkitGetUserMedia(videoObj, function(stream) {
         video.src = window.webkitURL.createObjectURL(stream);
         video.play();
 
         $('#snap').click(function() {
           context.drawImage(video, 0, 0, 160, 120);
-          var imageSrc = canvas.toDataURL('image/png');
-          env.save({imageSrc: imageSrc});
+          var src = canvas.toDataURL('image/png');
+          env.save({src: src});
         });
       }, errBack);
     }
@@ -100,7 +99,9 @@ var cardWithEditMode = {
       button.innerText = 'Change to edit';
       button.onclick = env.edit;
 
-      card.appendChild(button);
+      if (env.edit) {
+        card.appendChild(button);
+      }
       element.appendChild(card);
     }
   },
@@ -137,7 +138,9 @@ var cardWithInput = {
       button.innerText = 'Edit';
       button.onclick = env.edit;
 
-      card.appendChild(button);
+      if (env.edit) {
+        card.appendChild(button);
+      }
       element.appendChild(card);
     }
   },
@@ -173,7 +176,7 @@ var ContentKitDemo = exports.ContentKitDemo = {
   syncCodePane: function(editor) {
     var codePaneJSON = document.getElementById('serialized-mobiledoc');
     var mobiledoc = editor.serialize();
-    codePaneJSON.innerHTML = this.syntaxHighlight(mobiledoc);
+    codePaneJSON.innerText = JSON.stringify(mobiledoc, null, '  ');
 
     var cards = {
       'simple-card': simpleCard,
@@ -202,16 +205,21 @@ var ContentKitDemo = exports.ContentKitDemo = {
         }
       }
 
-      function addPipeBetweenAdjacentTextNodes(textNode) {
+      function markAdjacentTextNodes(textNode) {
+        var boxChar = '\u2591',
+            emptySquareChar = '\u25A2',
+            invisibleChar = '\u200C';
         var nextSibling = textNode.nextSibling;
         if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE) {
-          textNode.textContent = textNode.textContent + '|';
+          textNode.textContent = textNode.textContent + boxChar;
         }
+        textNode.textContent = textNode.textContent.replace(new RegExp(invisibleChar, 'g'),
+                                                            emptySquareChar);
       }
 
       var deep = true;
       var cloned = node.cloneNode(deep);
-      convertTextNodes(cloned, addPipeBetweenAdjacentTextNodes);
+      convertTextNodes(cloned, markAdjacentTextNodes);
       return displayHTML(cloned.innerHTML);
     };
 
@@ -278,8 +286,7 @@ function isValidJSON(string) {
   }
 }
 
-function attemptEditorReboot(editor, textarea) {
-  var textPayload = $(textarea).val();
+function attemptEditorReboot(editor, textPayload) {
   if (isValidJSON(textPayload)) {
     var mobiledoc = readMobiledoc(textPayload);
     if (editor) {
@@ -356,22 +363,6 @@ var sampleMobiledocs = {
     ]
   },
 
-  mobileDocWithAttributeMarker: {
-    version: MOBILEDOC_VERSION,
-    sections: [
-      [['A', ['href', 'http://github.com/bustlelabs/content-kit-editor']]],
-      [
-        [1, "H2", [
-          [[], 0, "headline h2"]
-        ]],
-        [1, "P", [
-          [[], 0, "see it "],
-          [[0], 1, "on github."]
-        ]]
-      ]
-    ]
-  },
-
   mobileDocWithSimpleCard: {
     version: MOBILEDOC_VERSION,
     sections: [
@@ -434,14 +425,13 @@ $(function() {
   textarea.val(window.JSON.stringify(mobiledoc, false, 2));
 
   textarea.on('input', function() {
-    attemptEditorReboot(editor, textarea);
   });
 
   $('#select-mobiledoc').on('change', function() {
     var mobiledocName = $(this).val();
     var mobiledoc = sampleMobiledocs[mobiledocName];
-    textarea.val(window.JSON.stringify(mobiledoc, false, 2));
-    textarea.trigger('input');
+    var text = window.JSON.stringify(mobiledoc, false, 2);
+    attemptEditorReboot(editor, text);
   });
 
   bootEditor(editorEl, mobiledoc);