update compiler, update demo code pane ux

bustle · Aug 22, 2014 · f830621 · f830621
1 parent c74e6a2
commit f830621
Show file tree

Hide file tree

Showing 24 changed files with 342 additions and 246 deletions.
diff --git a/demo/demo.css b/demo/demo.css
@@ -7,19 +7,24 @@
 body {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   color: #333;
-  margin: 0 1.45em 3em;
+  margin: 0;
   padding: 0;
-  overflow-y: scroll;
 }
 @media only screen and (max-width: 767px) {
   body {
     font-size: 0.88em;
   }
 }
 
-.wrapper {
+.editor-pane {
   max-width: 50em;
-  margin: 6.7em auto 1em;
+  margin: 0 auto;
+  padding: 5.5em 1.45em 3em;
+  width: 100%;
+}
+.code-pane-open .editor-pane {
+  width: 50%;
+  margin: 0;
 }
 
 header {
@@ -74,23 +79,30 @@ header {
   outline: none;
 }
 
-#code-panes {
-  display: none;
-}
-.code-pane {
-  position: absolute;
+
+.code-panes {
+  position: fixed;
   top: 3.125em;
   bottom: 0;
+  right: -50%;
+  width: 0;
+}
+.code-pane-open .code-panes {
   right: 0;
   width: 50%;
-  border-left: 1px dotted #c0c5ce;
+}
+.code-pane {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
   background-color: #2b303b;
   overflow: hidden;
 }
 .code-pane:first-child {
-  left: 0;
-  right: auto;
-  border-left: none;
+  display: block;
 }
 .code-pane code {
   white-space: pre-wrap;

diff --git a/demo/demo.js b/demo/demo.js
@@ -3,29 +3,33 @@
 'use strict';
 
 exports.ContentKitDemo = {
-  toggleCode: function(e, button, editor) {
-    var codeUI = document.getElementById('code-panes'),
-        editorUI = editor.element;
-
-    if(codeUI.style.display === '') {
-      var codePaneJSON = document.getElementById('code-json'),
-          codePaneHTML = document.getElementById('code-html'),
-          json = editor.model,
-          html = editor.compiler.render(json);
+  toggleCodePane: function(editor) {
+    if(document.body.className === 'code-pane-open') {
+      this.closeCodePane();
+    } else {
+      this.openCodePane(editor);
+    }
+  },
+
+  openCodePane: function(editor) {
+    this.syncCodePane(editor);
+    window.getSelection().removeAllRanges();
+    document.body.className = 'code-pane-open';
+  },
 
-      codePaneJSON.innerHTML = this.syntaxHighlight(json);
-      codePaneHTML.textContent = this.formatXML(html);
+  closeCodePane: function() {
+    window.getSelection().removeAllRanges();
+    document.body.className = '';
+  },
 
-      window.getSelection().removeAllRanges();
+  syncCodePane: function(editor) {
+    var codePaneJSON = document.getElementById('code-json');
+    var codePaneHTML = document.getElementById('code-html');
+    var json = editor.model;
+    var html = editor.compiler.render(json);
 
-      codeUI.style.display = 'block';
-      editorUI.style.display = 'none';
-      button.textContent = 'Show Editor';
-    } else {
-      codeUI.style.display = '';
-      editorUI.style.display = 'block';
-      button.textContent = 'Show Code';
-    }
+    codePaneJSON.innerHTML = this.syntaxHighlight(json);
+    codePaneHTML.textContent = this.formatXML(html);
   },
 
   formatXML: function(xml) {

diff --git a/demo/index.html b/demo/index.html
@@ -16,11 +16,13 @@
   <header>
     <h1 class="demo-title">ContentKit Editor</h1>
     <div class="mode-buttons">
-      <button onclick="ContentKitDemo.toggleCode(event, this, editor)">Show Code</button>
+      <button onclick="ContentKitDemo.toggleCodePane(editor)">Toggle Code</button>
     </div>
   </header>
 
-  <div class="wrapper">
+  <div class="editor-pane">
+
+    <!-- This is the element we will target for the Editor -->
     <article class="editor" data-placeholder="Write your story here...">
       <p>A modern, minimalist text editor allowing you to write in a distraction free environment. Simply select any text you would like to format and a toolbar will appear where you can toggle options such as <b>bold</b> and <i>italic</i>, or create a <a href="https://github.com/ContentKit">link</a>.</p>
       <h2>Create headings by pressing "H1" on the toolbar</h2>
@@ -53,9 +55,10 @@ <h3>Keyboard shortcuts:</h3>
 
       <p>Enjoy focusing on your content and not worrying about formatting!</p>
     </article>
+
   </div>
 
-  <div id="code-panes">
+  <div class="code-panes" id="code-panes">
     <div class="code-pane">
       <label>ContentKit JSON</label>
       <code id="code-json"></code>
@@ -72,58 +75,10 @@ <h3>Keyboard shortcuts:</h3>
   <script>window.ContentKit = require('content-kit')['default'];</script>
 
   <script>
-    // Initializes a new Editor
+    // Initialize a new Editor
     var editor = new ContentKit.Editor('.editor', {
       imageServiceUrl: 'http://localhost:5000/upload',
-      embedServiceUrl: 'http://localhost:5000/embed',
-      compiler: new ContentKit.Compiler({
-        includeTypeNames: true // outputs type names for easier debugging
-      })
-    });
-
-    /*
-    // Adding a custom text formatting button
-    editor.addTextFormat({
-      name: 'underline',
-      tag: 'u',
-      button: '<u>U</u>'
-    });
-    */
-
-    // Overriding what gets rendered for a Type
-    // Here, we are wrapping the default embed renderer with more info and controls
-    editor.willRenderType(ContentKit.Type.EMBED, function(model) {
-      var embedAttrs = model.attributes;
-      var isVideo = embedAttrs.embed_type === 'video';
-      return '<div class="ck-embed" contenteditable="false">' +
-                '<figure>' + 
-                  (isVideo ? '<div class="ck-video-container">' : '') + this.render(model) + (isVideo ? '</div>' : '') + 
-                  '<figcaption>' + embedAttrs.provider_name + ': ' + 
-                    '<a target="_blank" href="' + embedAttrs.url + '">' + embedAttrs.title + '</a>' + 
-                  '</figcaption>' +
-                '</figure>' +
-              '</div>';
-    });
-
-    editor.willRenderType(ContentKit.Type.IMAGE, function(model) {
-      return '<div class="ck-embed" contenteditable="false">' +
-                '<figure>' + this.render(model) + '</figure>' +
-              '</div>';
-    });
-
-    // Add an after render hook to load Twitter's Javascript SDK
-    editor.afterRender(function(element, model) {
-      var embedProvider = model.attributes && model.attributes.provider_name;
-      if (embedProvider && embedProvider.toLowerCase() === 'twitter') {
-        if (window.twttr) {
-          twttr.widgets.load(element);
-        } else {
-          var script = document.createElement('script');
-          script.async = true;
-          script.src = 'http://platform.twitter.com/widgets.js';
-          document.head.appendChild(script);
-        }
-      }
+      embedServiceUrl: 'http://localhost:5000/embed'
     });
   </script>
 

diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css
@@ -285,10 +285,11 @@
   .ck-embed figcaption {
     position: absolute;
     top: 0;
-    right: -140px;
-    width: 120px;
+    right: -130px;
+    width: 130px;
     text-align: left;
     margin: 0;
+    padding-left: 2em;
   }
 }
 .ck-video-container {