mucho trabajo

bustle · Aug 5, 2014 · 2304dc3 · 2304dc3
1 parent 7d523d4
commit 2304dc3
Show file tree

Hide file tree

Showing 23 changed files with 2,483 additions and 1,147 deletions.
diff --git a/demo/content-kit-demo.js → demo/demo.js b/demo/content-kit-demo.js → demo/demo.js
@@ -2,19 +2,16 @@
 
 'use strict';
 
-var ContentKit = exports.ContentKit || {};
-exports.ContentKit = ContentKit;
-
-ContentKit.Demo = {
+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.parse(),
-          html = new ContentKit.HTMLRenderer().render(json); //editor.element.innerHTML;
+          json = editor.model,
+          html = editor.compiler.render(json);
 
       codePaneJSON.innerHTML = this.syntaxHighlight(json);
       codePaneHTML.textContent = this.formatXML(html);

diff --git a/demo/index.html b/demo/index.html
@@ -16,7 +16,7 @@
   <header>
     <h1 class="demo-title">ContentKit Editor</h1>
     <div class="mode-buttons">
-      <button onclick="ContentKit.Demo.toggleCode(event, this, editor)">Show Code</button>
+      <button onclick="ContentKitDemo.toggleCode(event, this, editor)">Show Code</button>
     </div>
   </header>
 
@@ -66,17 +66,39 @@ <h3>Keyboard shortcuts:</h3>
     </div>
   </div>
 
+  <!-- Include JS Module Loader -->
+  <script src="../ext/loader.js"></script>
   <!-- Include Editor JS (content-kit-editor.js) -->
   <script src="../dist/content-kit-editor.js"></script>
 
   <!-- JS just for the demo page -->
-  <script src="content-kit-demo.js"></script>
+  <script src="demo.js"></script>
 
-  <!-- This initializes a new Editor -->
   <script>
-    var editor = new ContentKit.Editor('.editor', { 
-      parser: new ContentKit.HTMLParser({ includeTypeNames: true }) // shows type names for easier debugging
+    // Load the ContentKit Module
+    window.ContentKit = require('content-kit')['default'];
+
+    // Initializes a new Editor
+    var editor = new ContentKit.Editor('.editor', {
+      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>'
     });
+    */
+
+    // Modifing what gets rendered for a Type
+    editor.setRendererFor(ContentKit.Type.EMBED, function(model, type) {
+      return '<figure class="ck-editor-embed" contenteditable="false"><h5>' + type.name + ' (' + model.attributes.provider_name + ') : ' + model.attributes.title + '</h5><img src="' + model.attributes.thumbnail + '"/></figure>';
+    });
+
   </script>
 
 </body>

diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css
@@ -23,6 +23,9 @@
 .ck-editor a {
   color: #2ac845;
 }
+.ck-editor p {
+  min-height: 1.6em;
+}
 .ck-editor blockquote {
   border-left: 4px solid #2ac845;
   margin: 0 0 0 -1.2em;
@@ -54,7 +57,7 @@
   box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 1px 1px 0 #282828, inset -1px -1px 0 #282828;
   border-radius: 5px;
   transition: left 0.1s, top 0.1s;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.6em;
   /* space for arrow */
 }
 .ck-toolbar:after {
@@ -245,6 +248,37 @@
 .ck-file-input {
   display: none;
 }
+.ck-editor-embed {
+  text-align: center;
+  margin: 1em 0;
+  background-color: #fafafa;
+  border: 2px solid #eee;
+  padding: 1em;
+  border-radius: 4px;
+  color: #666;
+  font-family: Helvetica Neue;
+  cursor: pointer;
+}
+.ck-editor-embed.selected {
+  border-color: #4cd964;
+}
+.ck-message {
+  position: fixed;
+  top: 0.45em;
+  left: 50%;
+  z-index: 10;
+  padding: 0.5em 1em;
+  background-color: #a0ebad;
+  border: 1px solid #219e37;
+  color: #333;
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
+  box-shadow: 0px 2px 8px 3px rgba(0, 0, 0, 0.1);
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  -webkit-animation: fadeIn 0.3s;
+  animation: fadeIn 0.3s;
+}
 /**
  * Icons
  */
@@ -311,6 +345,34 @@
     opacity: 1;
   }
 }
+@-webkit-keyframes shake {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+  }
+  20%,
+  60% {
+    -webkit-transform: translateX(-10px);
+  }
+  40%,
+  80% {
+    -webkit-transform: translateX(10px);
+  }
+}
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-10px);
+  }
+  40%,
+  80% {
+    transform: translateX(10px);
+  }
+}
 @-webkit-keyframes textGlimmer {
   0% {
     background-position: -288px 0;