image uploading

bustle · Aug 10, 2014 · 4a48469 · 4a48469
1 parent 028f3ba
commit 4a48469
Show file tree

Hide file tree

Showing 21 changed files with 1,879 additions and 1,517 deletions.
diff --git a/demo/demo.css b/demo/demo.css
@@ -50,9 +50,9 @@ header {
 }
 .mode-buttons button {
   background-color: transparent;
-  border: 1px solid #007aff;
+  border: 1px solid #52a3ff;
   outline: none;
-  color: #007aff;
+  color: #52a3ff;
   border-radius: 5px;
   padding: 0.6em 1em;
   margin: 0;
@@ -66,7 +66,7 @@ header {
   background-color: rgba(0,122,255,0.15);
 }
 .mode-buttons button:active {
-  background-color: #007aff;
+  background-color: #52a3ff;
   color: #FFF;
   transition: none;
 }

diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>ContentKit Editor</title>
 
-  <!-- Include Editor CSS (editor.css) -->
+  <!-- Include ContentKit Editor CSS -->
   <link href="../dist/content-kit-editor.css" rel="stylesheet">
 
   <!-- CSS just for the demo page -->
@@ -66,20 +66,20 @@ <h3>Keyboard shortcuts:</h3>
     </div>
   </div>
 
+  <!-- Include if you want image embeds to upload to Amazon S3 -->
+  <script src="../ext/xhr-file-uploader.js"></script>
   <!-- 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="demo.js"></script>
-
   <script>
     // Load the ContentKit Module
     window.ContentKit = require('content-kit')['default'];
 
     // Initializes a new Editor
     var editor = new ContentKit.Editor('.editor', {
+      imageServiceUrl: 'http://localhost:5000/upload',
       compiler: new ContentKit.Compiler({
         includeTypeNames: true // outputs type names for easier debugging
       })
@@ -101,15 +101,38 @@ <h3>Keyboard shortcuts:</h3>
       var isVideo = embedAttrs.embed_type === 'video';
       return '<div class="ck-embed" contenteditable="false">' +
                 '<figure>' + 
-                  (isVideo ? '<div class="ck-video-container">' : '') + this.renderer.render(model) + (isVideo ? '</div>' : '') + 
+                  (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);
+        }
+      }
+    });
   </script>
 
+  <!-- JS just for the demo page -->
+  <script src="demo.js"></script>
+
 </body>
 </html>
diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css
@@ -21,13 +21,13 @@
   color: #bbb;
 }
 .ck-editor a {
-  color: #2ac845;
+  color: #0b8bff;
 }
 .ck-editor p {
   min-height: 1.6em;
 }
 .ck-editor blockquote {
-  border-left: 4px solid #2ac845;
+  border-left: 4px solid #0b8bff;
   margin: 0 0 0 -1.2em;
   padding-left: 1.05em;
   color: #a0a0a0;
@@ -120,7 +120,7 @@
 }
 .ck-toolbar-btn:active,
 .ck-toolbar-btn.active {
-  color: #4cd964;
+  color: #3ea3ff;
 }
 .ck-toolbar-prompt {
   display: none;
@@ -153,8 +153,8 @@
 .ck-editor-hilite {
   position: absolute;
   z-index: -1;
-  background-color: rgba(76, 217, 100, 0.08);
-  border-bottom: 2px dotted #4cd964;
+  background-color: rgba(62, 163, 255, 0.05);
+  border-bottom: 2px dotted #3ea3ff;
 }
 /**
  * Tooltip
@@ -245,6 +245,9 @@
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
 }
+.ck-embed-loading {
+  position: absolute;
+}
 .ck-file-input {
   display: none;
 }
@@ -255,7 +258,10 @@
   border-radius: 2px;
 }
 .ck-embed.selected {
-  border-color: #4cd964;
+  border-color: #3ea3ff;
+}
+.ck-embed iframe {
+  margin: 0 auto !important;
 }
 .ck-embed figure {
   position: relative;
@@ -305,8 +311,8 @@
   left: 50%;
   z-index: 10;
   padding: 0.5em 1em;
-  background-color: #a0ebad;
-  border: 1px solid #219e37;
+  background-color: #a4d4ff;
+  border: 1px solid #0071d7;
   color: #333;
   text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
   border-radius: 2px;