move drop handler onto textarea

TryGhost · Apr 6, 2017 · 4c8e558 · 4c8e558
1 parent 1cff0de
commit 4c8e558
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 43 deletions.
diff --git a/app/styles/addons/gh-koenig/gh-koenig.css b/app/styles/addons/gh-koenig/gh-koenig.css
@@ -171,6 +171,10 @@ textarea.ed_code {
     border: none;
 }
 
+.dragOver {
+    background-color: pink;
+    border:100px solid red;
+}
 
 
 /**

diff --git a/lib/gh-koenig/addon/components/cards/card-markdown.js b/lib/gh-koenig/addon/components/cards/card-markdown.js
@@ -7,6 +7,7 @@ import {isEmberArray} from 'ember-array/utils';
 import {isBlank} from 'ember-utils';
 import computed from 'ember-computed';
 import observer from 'ember-metal/observer';
+import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import run from 'ember-runloop';
 import {
     isRequestEntityTooLargeError,
@@ -21,7 +22,6 @@ export default Component.extend({
     isEditing: true,
     accept: 'image/gif,image/jpg,image/jpeg,image/png,image/svg+xml',
     extensions: ['gif', 'jpg', 'jpeg', 'png', 'svg'],
-
     ajax: injectService(),
 
     editing: observer('isEditing', function () {
@@ -35,19 +35,7 @@ export default Component.extend({
     save: observer('doSave', function () {
         this.get('env').save(this.get('payload'), false);
     }),
-
-    value: computed('payload', {
-        get() {
-            return this.get('payload').markdown || '';
-        },
-
-        set(_, value) {
-            this.get('payload').markdown = value;
-            this.get('env').save(this.get('payload'), false);
-            return value;
-        }
-
-    }),
+
     _uploadStarted() {
         invokeAction(this, 'uploadStarted');
     },
@@ -171,36 +159,9 @@ export default Component.extend({
         });
     },
 
-    drop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        let [el] = this.$('textarea');
-        let start = el.selectionStart;
-        let end = el.selectionEnd;
-
-        let {files} = event.dataTransfer;
-        let combinedLength = 0;
-        // for(let i = 0; i < files.length; i++) {
-        //     let file = files[i];
-        //     let placeholderText = `\r\n![uploading:${file.name}]()\r\n`;
-        //     el.value = el.value.substring(0, start) + placeholderText + el.value.substring(end, el.value.length);
-        //     combinedLength += placeholderText.length;
-        // }
-
-        // eslint-disable-next-line ember-suave/prefer-destructuring
-        let file = files[0];
-        let placeholderText = `\r\n![uploading:${file.name}]()\r\n`;
-        el.value = el.value.substring(0, start) + placeholderText + el.value.substring(end, el.value.length);
-        combinedLength += placeholderText.length;
-
-        el.selectionStart = start;
-        el.selectionEnd = end + combinedLength;
-
-        this.send('fileSelected', event.dataTransfer.files);
-    },
-
     actions: {
         updateValue() {
+            console.log("update value");
             this.get('payload').markdown = this.$('textarea').val();
             this.get('env').save(this.get('payload'), false);
             this.set('preview', formatMarkdown([this.get('payload').markdown]));
@@ -239,7 +200,42 @@ export default Component.extend({
         },
         selectCard() {
             invokeAction(this, 'selectCard');
+        },
+        didDrop(event) {
+            event.preventDefault();
+            event.stopPropagation();
+            let [el] = this.$('textarea');
+            let start = el.selectionStart;
+            let end = el.selectionEnd;
+
+            let {files} = event.dataTransfer;
+            let combinedLength = 0;
+            // for(let i = 0; i < files.length; i++) {
+            //     let file = files[i];
+            //     let placeholderText = `\r\n![uploading:${file.name}]()\r\n`;
+            //     el.value = el.value.substring(0, start) + placeholderText + el.value.substring(end, el.value.length);
+            //     combinedLength += placeholderText.length;
+            // }
+
+            // eslint-disable-next-line ember-suave/prefer-destructuring
+            let file = files[0];
+            let placeholderText = `\r\n![uploading:${file.name}]()\r\n`;
+            el.value = el.value.substring(0, start) + placeholderText + el.value.substring(end, el.value.length);
+            combinedLength += placeholderText.length;
+
+            el.selectionStart = start;
+            el.selectionEnd = end + combinedLength;
+
+            this.send('fileSelected', event.dataTransfer.files);
+        },
+        didDragOver(event) {
+            this.$('textarea').addClass('dragOver');
+        },
+        didDragLeave(event) {
+            this.$('textarea').removeClass('dragOver');
         }
+
+
     }
 
 });
diff --git a/lib/gh-koenig/addon/templates/components/card-markdown.hbs b/lib/gh-koenig/addon/templates/components/card-markdown.hbs
@@ -1,5 +1,6 @@
 {{#if isEditing}}
-    {{textarea value=value key-up="updateValue" focus-in=(action "selectCard")}}
+    {{!--{{textarea value=value key-up="updateValue" focus-in=(action "selectCard")}}--}}
+    <textarea onfocus={{action "selectCard"}} ondrop={{action "didDrop"}} ondragover={{action "didDragOver"}} ondragleave={{action "didDragLeave"}}>{{value}}</textarea>
 {{else}}
     {{{preview}}}
 {{/if}}