Merge pull request #21 from mixonic/image-section

Image section

.gitignore

@@ -15,6 +15,7 @@ coverage
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
+.env
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release

README.md

@@ -125,3 +125,11 @@ export EMBEDLY_KEY=XXXXXX
 
 Also, set the `bucketName` in `server/config.json` with the name of your AWS
 S3 bucket for uploading files.
+
+Then to boot the server:
+
+```
+node server/index.js
+```
+
+And visit http://localhost:5000/dist/demo/index.html

package.json

@@ -45,8 +45,8 @@
     "broccoli-test-builder": "^0.1.0",
     "content-kit-utils": "^0.2.0",
     "jquery": "^2.1.4",
-    "mobiledoc-dom-renderer": "^0.1.3",
-    "mobiledoc-html-renderer": "^0.1.0",
+    "mobiledoc-dom-renderer": "^0.1.4",
+    "mobiledoc-html-renderer": "^0.1.1",
     "testem": "^0.8.4"
   }
 }

server/config.json

@@ -1,5 +1,5 @@
-{ 
+{
   "s3" : {
-    "bucketName"      : "content-kit"
+    "bucketName"      : "201-bustle-demo"
   }
-}
+}

server/index.js

@@ -4,7 +4,6 @@ var EmbedService = require('./services/embed');
 
 // Express app
 var app = express();
-app.use(express.static('demo'));
 app.use('/dist', express.static('dist'));
 
 // Enable cors

src/js/commands/image.js

@@ -2,82 +2,74 @@ import Command from './base';
 import Message from '../views/message';
 import { inherit } from 'content-kit-utils';
 import { FileUploader } from '../utils/http-utils';
+import { generateBuilder } from '../utils/post-builder';
 
-function createFileInput(command) {
-  var fileInput = document.createElement('input');
-  fileInput.type = 'file';
-  fileInput.accept = 'image/*';
-  fileInput.className = 'ck-file-input';
-  // FIXME should this listener be torn down when the ImageCommand is not active?
-  fileInput.addEventListener('change', function(e) {
-    command.handleFile(e);
-  });
-  return fileInput;
-}
-
-function injectImageBlock(/* src, editor, index */) {
-  throw new Error('Unimplemented: BlockModel and Type.IMAGE are no longer things');
-  /*
-  var imageModel = BlockModel.createWithType(Type.IMAGE, { attributes: { src: src } });
-  editor.replaceBlock(imageModel, index);
-  */
-}
-
-function renderFromFile(file, editor, index) {
-  if (file && window.FileReader) {
-    var reader = new FileReader();
-    reader.onload = function(e) {
-      var base64Src = e.target.result;
-      injectImageBlock(base64Src, editor, index);
-      editor.renderBlockAt(index, true);
-    };
-    reader.readAsDataURL(file);
-  }
+function readFromFile(file, callback) {
+  var reader = new FileReader();
+  reader.onload = ({target}) => callback(target.result);
+  reader.readAsDataURL(file);
 }
 
 function ImageCommand(options) {
   Command.call(this, {
     name: 'image',
     button: '<i class="ck-icon-image"></i>'
   });
-  this.uploader = new FileUploader({ url: options.serviceUrl, maxFileSize: 5000000 });
+  this.uploader = new FileUploader({
+    url: options.serviceUrl,
+    maxFileSize: 5000000
+  });
 }
 inherit(ImageCommand, Command);
 
 ImageCommand.prototype = {
-  exec: function() {
+  exec() {
     ImageCommand._super.prototype.exec.call(this);
-    var fileInput = this.fileInput;
-    if (!fileInput) {
-      fileInput = this.fileInput = createFileInput(this);
-      document.body.appendChild(fileInput);
-    }
+    var fileInput = this.getFileInput();
     fileInput.dispatchEvent(new MouseEvent('click', { bubbles: false }));
   },
-  handleFile: function(e) {
-    var fileInput = e.target;
-    var file = fileInput.files && fileInput.files[0];
-    var editor = this.editorContext;
-    var embedIntent = this.embedIntent;
-    var currentEditingIndex = editor.getCurrentBlockIndex();
+  getFileInput() {
+    if (this._fileInput) {
+      return this._fileInput;
+    }
+
+    var fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'image/*';
+    fileInput.className = 'ck-file-input';
+    fileInput.addEventListener('change', e => this.handleFile(e));
+    document.body.appendChild(fileInput);
+
+    return fileInput;
+  },
+  handleFile({target: fileInput}) {
+    let imageSection;
+
+    let file = fileInput.files[0];
+    readFromFile(file, (base64Image) => {
+      imageSection = generateBuilder().generateImageSection(base64Image);
+      this.editorContext.insertSectionAtCursor(imageSection);
+      this.editorContext.rerender();
+    });
 
-    embedIntent.showLoading();
-    renderFromFile(file, editor, currentEditingIndex); // render image immediately client-side
     this.uploader.upload({
-      fileInput: fileInput,
-      complete: function(response, error) {
-        embedIntent.hideLoading();
-        if (error || !response || !response.url) {
-          setTimeout(function() {
-            editor.removeBlockAt(currentEditingIndex);
-            editor.syncVisual();
-          }, 1000);
-          return new Message().showError(error.message || 'Error uploading image');
+      fileInput,
+      complete: (response, error) => {
+        if (!imageSection) {
+          throw new Error('Upload completed before the image was read into memory');
+        }
+        if (!error && response && response.url) {
+          imageSection.src = response.url;
+          imageSection.renderNode.markDirty();
+          this.editorContext.rerender();
+          this.editorContext.trigger('update');
+        } else {
+          this.editorContext.removeSection(imageSection);
+          new Message().showError(error.message || 'Error uploading image');
         }
-        injectImageBlock(response.url, editor, currentEditingIndex);
+        this.editorContext.rerender();
       }
     });
-    fileInput.value = null; // reset file input
   }
 };