crude image embeds

bustle · Jul 17, 2014 · 84a634a · 84a634a
1 parent 3bdb065
commit 84a634a
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 13 deletions.
diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css
@@ -30,7 +30,11 @@
   padding-left: 1.05em;
   color: #a0a0a0;
 }
-
+.ck-editor img {
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
+}
 /**
  * Toolbar
  */
@@ -259,6 +263,10 @@
           transform: rotate(-135deg);
 }
 
+.ck-file-input {
+  display:none;
+}
+
 /**
  * Icons
  */

diff --git a/dist/content-kit-editor.js b/dist/content-kit-editor.js
@@ -507,7 +507,7 @@ function EmbedCommand(options) {
   Command.call(this, options);
 }
 inherits(EmbedCommand, Command);
-EmbedCommand.prototype.exec = function(value) {
+EmbedCommand.prototype.exec = function() {
   alert(this.name);
 };
 
@@ -516,13 +516,49 @@ function ImageEmbedCommand(options) {
     name: 'image',
     button: '<i class="ck-icon-image"></i>'
   });
+
+  var fileBrowser = document.createElement('input');
+  fileBrowser.type = 'file';
+  fileBrowser.accept = 'image/*';
+  fileBrowser.className = 'ck-file-input';
+  fileBrowser.addEventListener('change', this.handleFile);
+  document.body.appendChild(fileBrowser);
+  this.fileBrowser = fileBrowser;
 }
 inherits(ImageEmbedCommand, EmbedCommand);
+ImageEmbedCommand.prototype = {
+  exec: function() {
+    var clickEvent = new MouseEvent('click', { bubbles: false });
+    this.fileBrowser.dispatchEvent(clickEvent);
+  },
+  handleFile: function(e) {
+    var target = e.target;
+    var file = target && target.files[0];
+    var reader = new FileReader();
+    reader.onload = function(event) {
+      var base64File = event.target.result;
+      var selectionRoot = getCurrentSelectionRootNode();
+      var image = document.createElement('img');
+      image.src = base64File;
+
+      // image needs to be placed outside of the current empty paragraph
+      var editorNode = selectionRoot.parentNode;
+      editorNode.insertBefore(image, selectionRoot);
+      editorNode.removeChild(selectionRoot);
+    };
+    reader.readAsDataURL(file);
+    target.value = null; // reset
+  }
+};
 
 function MediaEmbedCommand(options) {
   EmbedCommand.call(this, {
     name: 'media',
-    button: '<i class="ck-icon-embed"></i>'
+    button: '<i class="ck-icon-embed"></i>',
+    prompt: new Prompt({
+      command: this,
+      placeholder: 'Enter a twitter, or youtube url...'
+    })
   });
 }
 inherits(MediaEmbedCommand, EmbedCommand);
@@ -813,9 +849,13 @@ var Toolbar = (function() {
     },
     updateForSelection: function(selection) {
       var toolbar = this;
-      toolbar.show();
-      toolbar.positionToContent(selection.getRangeAt(0));
-      updateButtonsForSelection(toolbar.buttons, selection);
+      if (selection.isCollapsed) {
+        toolbar.hide();
+      } else {
+        toolbar.show();
+        toolbar.positionToContent(selection.getRangeAt(0));
+        updateButtonsForSelection(toolbar.buttons, selection);
+      }
     },
     positionToContent: function(content) {
       var directions = ToolbarDirection;
@@ -999,14 +1039,15 @@ var EmbedIntent = (function() {
     embedIntent.isShowing = false;
     embedIntent.isActive = false;
 
-    function embedIntentHandler() {
+    function embedIntentHandler(e) {
       var currentNode = getCurrentSelectionRootNode();
       var currentNodeHTML = currentNode.innerHTML;
       if (currentNodeHTML === '' || currentNodeHTML === '<br>') {
         embedIntent.showAt(currentNode);
       } else {
         embedIntent.hide();
       }
+      e.stopPropagation();
     }
 
     rootElement.addEventListener('keyup', embedIntentHandler);

diff --git a/src/css/editor.css b/src/css/editor.css
@@ -30,3 +30,8 @@
   padding-left: 1.05em;
   color: #a0a0a0;
 }
+.ck-editor img {
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
+}
diff --git a/src/css/embeds.css b/src/css/embeds.css
@@ -44,3 +44,7 @@
   -webkit-transform: rotate(-135deg);
           transform: rotate(-135deg);
 }
+
+.ck-file-input {
+  display:none;
+}
diff --git a/src/js/commands.js b/src/js/commands.js
@@ -188,7 +188,7 @@ function EmbedCommand(options) {
   Command.call(this, options);
 }
 inherits(EmbedCommand, Command);
-EmbedCommand.prototype.exec = function(value) {
+EmbedCommand.prototype.exec = function() {
   alert(this.name);
 };
 
@@ -197,13 +197,49 @@ function ImageEmbedCommand(options) {
     name: 'image',
     button: '<i class="ck-icon-image"></i>'
   });
+
+  var fileBrowser = document.createElement('input');
+  fileBrowser.type = 'file';
+  fileBrowser.accept = 'image/*';
+  fileBrowser.className = 'ck-file-input';
+  fileBrowser.addEventListener('change', this.handleFile);
+  document.body.appendChild(fileBrowser);
+  this.fileBrowser = fileBrowser;
 }
 inherits(ImageEmbedCommand, EmbedCommand);
+ImageEmbedCommand.prototype = {
+  exec: function() {
+    var clickEvent = new MouseEvent('click', { bubbles: false });
+    this.fileBrowser.dispatchEvent(clickEvent);
+  },
+  handleFile: function(e) {
+    var target = e.target;
+    var file = target && target.files[0];
+    var reader = new FileReader();
+    reader.onload = function(event) {
+      var base64File = event.target.result;
+      var selectionRoot = getCurrentSelectionRootNode();
+      var image = document.createElement('img');
+      image.src = base64File;
+
+      // image needs to be placed outside of the current empty paragraph
+      var editorNode = selectionRoot.parentNode;
+      editorNode.insertBefore(image, selectionRoot);
+      editorNode.removeChild(selectionRoot);
+    };
+    reader.readAsDataURL(file);
+    target.value = null; // reset
+  }
+};
 
 function MediaEmbedCommand(options) {
   EmbedCommand.call(this, {
     name: 'media',
-    button: '<i class="ck-icon-embed"></i>'
+    button: '<i class="ck-icon-embed"></i>',
+    prompt: new Prompt({
+      command: this,
+      placeholder: 'Enter a twitter, or youtube url...'
+    })
   });
 }
 inherits(MediaEmbedCommand, EmbedCommand);

diff --git a/src/js/embed-intent.js b/src/js/embed-intent.js
@@ -22,14 +22,15 @@ var EmbedIntent = (function() {
     embedIntent.isShowing = false;
     embedIntent.isActive = false;
 
-    function embedIntentHandler() {
+    function embedIntentHandler(e) {
       var currentNode = getCurrentSelectionRootNode();
       var currentNodeHTML = currentNode.innerHTML;
       if (currentNodeHTML === '' || currentNodeHTML === '<br>') {
         embedIntent.showAt(currentNode);
       } else {
         embedIntent.hide();
       }
+      e.stopPropagation();
     }
 
     rootElement.addEventListener('keyup', embedIntentHandler);

diff --git a/src/js/toolbar.js b/src/js/toolbar.js
@@ -71,9 +71,13 @@ var Toolbar = (function() {
     },
     updateForSelection: function(selection) {
       var toolbar = this;
-      toolbar.show();
-      toolbar.positionToContent(selection.getRangeAt(0));
-      updateButtonsForSelection(toolbar.buttons, selection);
+      if (selection.isCollapsed) {
+        toolbar.hide();
+      } else {
+        toolbar.show();
+        toolbar.positionToContent(selection.getRangeAt(0));
+        updateButtonsForSelection(toolbar.buttons, selection);
+      }
     },
     positionToContent: function(content) {
       var directions = ToolbarDirection;