crude oEmbed working

bustle · Jul 29, 2014 · 7d523d4 · 7d523d4
1 parent 0396d21
commit 7d523d4
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 15 deletions.
diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css
@@ -34,6 +34,10 @@
   max-width: 100%;
   margin: 0 auto;
 }
+.ck-editor div,
+.ck-editor iframe {
+  max-width: 100%;
+}
 /**
  * Toolbar
  */
@@ -123,7 +127,7 @@
   border: none;
   color: #f5f5f5;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 15px;
+  font-size: 14px;
   padding: 0 16px;
   width: 288px;
   height: 44px;

diff --git a/dist/content-kit-editor.js b/dist/content-kit-editor.js
@@ -3,7 +3,7 @@
  * @version  0.1.0
  * @author   Garth Poitras <garth22@gmail.com> (http://garthpoitras.com/)
  * @license  MIT
- * Last modified: Jul 25, 2014
+ * Last modified: Jul 29, 2014
  */
 
 (function(exports, document) {
@@ -258,6 +258,37 @@ function selectNode(node) {
   selection.addRange(range);
 }
 
+var HTTP = (function() {
+
+  var head = document.head;
+  var uuid = 0;
+
+  return {
+    get: function(url, callback) {
+      var request = new XMLHttpRequest();
+      request.onload = function() {
+        callback(this.responseText);
+      };
+      request.open('GET', url);
+      request.send();
+    },
+
+    jsonp: function(url, callback) {
+      var script = document.createElement('script');
+      var name = '_jsonp_' + uuid++;
+      url += ( url.match(/\?/) ? '&' : '?' ) + 'callback=' + name;
+      script.src = url;
+      exports[name] = function(response) {
+        callback(JSON.parse(response));
+        head.removeChild(script);
+        delete exports[name];
+      };
+      head.appendChild(script);
+    }
+  };
+
+}());
+
 function View(options) {
   this.tagName = options.tagName || 'div';
   this.classNames = options.classNames || [];
@@ -574,11 +605,11 @@ ImageEmbedCommand.prototype = {
     reader.onload = function(event) {
       var base64File = event.target.result;
       var blockElement = getSelectionBlockElement();
+      var editorNode = blockElement.parentNode;
       var image = document.createElement('img');
       image.src = base64File;
 
       // image needs to be placed outside of the current empty paragraph
-      var editorNode = blockElement.parentNode;
       editorNode.insertBefore(image, blockElement);
       editorNode.removeChild(blockElement);
     };
@@ -587,21 +618,35 @@ ImageEmbedCommand.prototype = {
   }
 };
 
-function MediaEmbedCommand(options) {
+function OEmbedCommand(options) {
   EmbedCommand.call(this, {
-    name: 'media',
+    name: 'oEmbed',
     button: '<i class="ck-icon-embed"></i>',
     prompt: new Prompt({
       command: this,
-      placeholder: 'Enter a twitter, or youtube url...'
+      placeholder: 'Enter a youtube, twitter, instagram url...'
     })
   });
 }
-inherits(MediaEmbedCommand, EmbedCommand);
+inherits(OEmbedCommand, EmbedCommand);
+OEmbedCommand.prototype.exec = function(url) {
+  HTTP.get('http://noembed.com/embed?url=' + url, function(responseText) {
+    var json = JSON.parse(responseText);
+    console.log(json);
+    if (json.html) {
+      var blockElement = getSelectionBlockElement();
+      var editorNode = blockElement.parentNode;
+      var embed = createDiv();
+      embed.innerHTML = json.html;
+      editorNode.insertBefore(embed, blockElement);
+      editorNode.removeChild(blockElement);
+    }
+  });
+};
 
 EmbedCommand.all = [
   new ImageEmbedCommand(),
-  new MediaEmbedCommand()
+  new OEmbedCommand()
 ];
 
 EmbedCommand.index = createCommandIndex(EmbedCommand.all);

diff --git a/gulpfile.js b/gulpfile.js
@@ -20,6 +20,7 @@ var jsSrc = [
   './src/js/utils/object-utils.js',
   './src/js/utils/element-utils.js',
   './src/js/utils/selection-utils.js',
+  './src/js/utils/http-utils.js',
   './src/js/view.js',
   './src/js/prompt.js',
   './src/js/commands.js',

diff --git a/src/css/editor.less b/src/css/editor.less
@@ -36,4 +36,8 @@
   display: block;
   max-width: 100%;
   margin: 0 auto;
+}
+.ck-editor div,
+.ck-editor iframe {
+  max-width: 100%;
 }
diff --git a/src/css/toolbar.less b/src/css/toolbar.less
@@ -93,7 +93,7 @@
   border: none;
   color: #f5f5f5;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 15px;
+  font-size: 14px;
   padding: 0 16px;
   width: 288px;
   height: 44px;

diff --git a/src/js/commands.js b/src/js/commands.js
@@ -219,11 +219,11 @@ ImageEmbedCommand.prototype = {
     reader.onload = function(event) {
       var base64File = event.target.result;
       var blockElement = getSelectionBlockElement();
+      var editorNode = blockElement.parentNode;
       var image = document.createElement('img');
       image.src = base64File;
 
       // image needs to be placed outside of the current empty paragraph
-      var editorNode = blockElement.parentNode;
       editorNode.insertBefore(image, blockElement);
       editorNode.removeChild(blockElement);
     };
@@ -232,21 +232,35 @@ ImageEmbedCommand.prototype = {
   }
 };
 
-function MediaEmbedCommand(options) {
+function OEmbedCommand(options) {
   EmbedCommand.call(this, {
-    name: 'media',
+    name: 'oEmbed',
     button: '<i class="ck-icon-embed"></i>',
     prompt: new Prompt({
       command: this,
-      placeholder: 'Enter a twitter, or youtube url...'
+      placeholder: 'Enter a youtube, twitter, instagram url...'
     })
   });
 }
-inherits(MediaEmbedCommand, EmbedCommand);
+inherits(OEmbedCommand, EmbedCommand);
+OEmbedCommand.prototype.exec = function(url) {
+  HTTP.get('http://noembed.com/embed?url=' + url, function(responseText) {
+    var json = JSON.parse(responseText);
+    console.log(json);
+    if (json.html) {
+      var blockElement = getSelectionBlockElement();
+      var editorNode = blockElement.parentNode;
+      var embed = createDiv();
+      embed.innerHTML = json.html;
+      editorNode.insertBefore(embed, blockElement);
+      editorNode.removeChild(blockElement);
+    }
+  });
+};
 
 EmbedCommand.all = [
   new ImageEmbedCommand(),
-  new MediaEmbedCommand()
+  new OEmbedCommand()
 ];
 
 EmbedCommand.index = createCommandIndex(EmbedCommand.all);
diff --git a/src/js/utils/http-utils.js b/src/js/utils/http-utils.js
@@ -0,0 +1,30 @@
+var HTTP = (function() {
+
+  var head = document.head;
+  var uuid = 0;
+
+  return {
+    get: function(url, callback) {
+      var request = new XMLHttpRequest();
+      request.onload = function() {
+        callback(this.responseText);
+      };
+      request.open('GET', url);
+      request.send();
+    },
+
+    jsonp: function(url, callback) {
+      var script = document.createElement('script');
+      var name = '_jsonp_' + uuid++;
+      url += ( url.match(/\?/) ? '&' : '?' ) + 'callback=' + name;
+      script.src = url;
+      exports[name] = function(response) {
+        callback(JSON.parse(response));
+        head.removeChild(script);
+        delete exports[name];
+      };
+      head.appendChild(script);
+    }
+  };
+
+}());