markdown card given new format

TryGhost · Apr 6, 2017 · e9c9a57 · e9c9a57
1 parent 1b129e1
commit e9c9a57
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 49 deletions.
diff --git a/app/styles/addons/gh-koenig/gh-koenig.css b/app/styles/addons/gh-koenig/gh-koenig.css
@@ -173,16 +173,15 @@ textarea.ed_code {
 }
 
 .dragOver {
-    background-color: pink;
-    border:100px solid red;
+    background-color: var(--lightgrey);
+    position: relative;
 }
 
 
+
 /**
  * Tooltip
  */
-
-
 @keyframes tooltip-fadein {
     0% { opacity: 0; }
     100% { opacity: 1; }

diff --git a/lib/gh-koenig/addon/components/cards/card-markdown.js b/lib/gh-koenig/addon/components/cards/card-markdown.js
@@ -20,7 +20,6 @@ import {
 
 export default Component.extend({
     layout,
-    isEditing: true,
     accept: 'image/gif,image/jpg,image/jpeg,image/png,image/svg+xml',
     extensions: ['gif', 'jpg', 'jpeg', 'png', 'svg'],
     ajax: injectService(),
@@ -39,7 +38,6 @@ export default Component.extend({
         this.set('value', this.$('textarea').val());
         this.set('payload', payload);
         this.get('env').save(payload, false);
-        this.set('isEditing', false);
     }),
     init() {
         this._super(...arguments);
@@ -73,7 +71,7 @@ export default Component.extend({
         invokeAction(this, 'uploadSuccess', response);
         let placeholderText = `![uploading:${response.file.name}]()`;
         let imageText = `![](${response.url})`;
-        let [el] = this.$('textarea');
+        let el = this.$('textarea')[0]; // array destructuring on jquery causes ember to throw an error about calling an Object as a Function
 
         el.value = el.value.replace(placeholderText, imageText);
         this.sendAction('updateValue');
@@ -205,23 +203,21 @@ export default Component.extend({
             invokeAction(this, 'selectCard');
         },
         didDrop(event) {
+
             event.preventDefault();
             event.stopPropagation();
-            let [el] = this.$('textarea');
+            // eslint-disable-next-line ember-suave/prefer-destructuring
+            let el = this.$('textarea')[0]; // array destructuring here causes ember to throw an error about calling an Object as a Function
+
             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 file = files[0]; // array destructuring here causes ember to throw an error about calling an Object as a Function
             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;
@@ -237,8 +233,5 @@ export default Component.extend({
         didDragLeave(event) {
             this.$('textarea').removeClass('dragOver');
         }
-
-
     }
-
 });
diff --git a/lib/gh-koenig/addon/components/gh-koenig.js b/lib/gh-koenig/addon/components/gh-koenig.js
@@ -23,6 +23,7 @@ export default Component.extend({
     classNames: ['editor-holder'],
     emberCards: emberA([]),
     selectedCard: null,
+    editedCard: null,
     keyDownHandler: [],
     init() {
         this._super(...arguments);
@@ -194,10 +195,10 @@ export default Component.extend({
                 window.getSelection().removeAllRanges();
                 this.send('selectCardHard', id);
             } else {
-                this.send('deselectCard');
+                 this.send('deselectCard');
             }
         } else {
-            this.send('deselectCard');
+             this.send('deselectCard');
         }
     },
 
@@ -214,7 +215,9 @@ export default Component.extend({
         selectCard(cardId) {
             let card = this.get('emberCards').find((card) => card.id === cardId);
             let cardHolder = $(`#${cardId}`).parent('.kg-card');
-            this.send('deselectCard');
+            if(this.get('selectedCard') !== card) {
+                this.send('deselectCard');
+             }
             cardHolder.addClass('selected');
             cardHolder.removeClass('selected-hard');
             this.set('selectedCard', card);
@@ -223,7 +226,7 @@ export default Component.extend({
             document.onclick = (event) => {
                 let target = $(event.target);
                 let parent = target.parents('.kg-card');
-                if (!target.hasClass('kg-card') && (!parent.length || parent[0] !== cardHolder[0])) {
+                if (!target.hasClass('kg-card') && !target.hasClass('kg-card-button') && !target.hasClass('kg-card-button-text') && (!parent.length || parent[0] !== cardHolder[0])) {
                     this.send('deselectCard');
                 }
             };
@@ -232,17 +235,20 @@ export default Component.extend({
         // creating blocks under the card and deleting the card.
         // used when selecting the card with the keyboard or clicking on the toolbar.
         selectCardHard(cardId) {
-            let card = this.get('emberCards').find((card) => card.id === cardId);
-            let cardHolder = $(`#${cardId}`).parents('.kg-card');
-            this.send('deselectCard');
-            cardHolder.addClass('selected');
-            cardHolder.addClass('selected-hard');
-            this.set('selectedCard', card);
-            // cardHolder.focus();
+             let card = this.get('emberCards').find((card) => card.id === cardId);
+             let cardHolder = $(`#${cardId}`).parents('.kg-card');
+             if(this.get('selectedCard') !== card) {
+                this.send('deselectCard');
+             }
+             cardHolder.addClass('selected');
+             cardHolder.addClass('selected-hard');
+             this.set('selectedCard', card);
+
             document.onclick = (event) => {
                 let target = $(event.target);
                 let parent = target.parents('.kg-card');
-                if (!target.hasClass('kg-card') && (!parent.length || parent[0] !== cardHolder[0])) {
+
+                if (!target.hasClass('kg-card') && !target.hasClass('kg-card-button') && !target.hasClass('kg-card-button-text') && (!parent.length || parent[0] !== cardHolder[0])) {
                     this.send('deselectCard');
                 }
             };
@@ -324,6 +330,16 @@ export default Component.extend({
             }
             this.get('keyDownHandler').length = 0;
             document.onclick = null;
+
+            this.set('editedCard', null);
+        },
+        editCard(cardId) {
+          //  this.send('selectCard', cardId);
+            let card = this.get('emberCards').find((card) => card.id === cardId);
+            this.set('editedCard', card);
+        },
+        stopEditingCard() {
+            this.set('editedCard', null);
         }
     }
 

diff --git a/lib/gh-koenig/addon/components/koenig-card.js b/lib/gh-koenig/addon/components/koenig-card.js
@@ -1,12 +1,19 @@
 import Component from 'ember-component';
 import layout from '../templates/components/koenig-card';
 import run from 'ember-runloop';
+import observer from 'ember-metal/observer';
 
 export default Component.extend({
     layout,
+    editing: observer('editedCard', function () {
+        let editing = this.get('editedCard') === this.get('card');
+        if(this.get('isEditing') && !editing) {
+            this.send('stopEdit');
+        }
+        this.set('isEditing', editing);
+    }),
     init() {
         this._super(...arguments);
-        this.set('isEditing', false);
     },
     didRender() {
         // add the classname to the wrapping card as generated by mobiledoc.
@@ -15,36 +22,42 @@ export default Component.extend({
             () => {
                 let card = this.get('card');
 
-                if (card.newlyCreated) {
-                    this.set('isEditing', true);
-                    this.send('selectCard');
-                }
+
                 let {env: {name}} = card;
+
+                // the mobiledoc generated container.
                 let mobiledocCard = this.$().parents('.__mobiledoc-card');
 
                 mobiledocCard.removeClass('__mobiledoc-card');
                 mobiledocCard.addClass('kg-card');
                 mobiledocCard.addClass(name ? `kg-${name}` : '');
                 mobiledocCard.attr('tabindex', 3);
+                mobiledocCard.click(() => {
+                    if(!this.get('isEditing')) {
+                        this.send('selectCardHard');
+                    }
+                });
             }
         );
     },
     actions: {
         save() {
             this.set('doSave', Date.now());
-            this.send('stopEdit');
-            this.send('selectCardHard');
-            // this.send('on-save');
         },
 
         toggleState() {
-            this.set('isEditing', !this.get('isEditing'));
+            if(this.get('isEditing')) {
+                this.send('stopEdit');
+            } else {
+                this.send('startEdit');
+            }
         },
         selectCard() {
             this.sendAction('selectCard', this.card.id);
         },
         deselectCard() {
             this.sendAction('deselectCard', this.card.id);
+            this.send('stopEdit');
         },
         selectCardHard() {
             this.sendAction('selectCardHard', this.card.id);
@@ -53,10 +66,11 @@ export default Component.extend({
             this.get('card').env.remove();
         },
         startEdit() {
-            this.set('isEditing', true);
+            this.sendAction('edit', this.card.id)
         },
         stopEdit() {
-            this.set('isEditing', false);
+            this.send('save');
+            this.sendAction('stopEdit', this.card.id);
         }
     }
 });
diff --git a/lib/gh-koenig/addon/templates/components/gh-koenig.hbs b/lib/gh-koenig/addon/templates/components/gh-koenig.hbs
@@ -1,6 +1,6 @@
-{{#each emberCards as |card|}}
+{{#each emberCards as |card index|}}
     {{#ember-wormhole to=card.id}}
-        {{koenig-card card=card apiRoot=apiRoot assetPath=assetPath selectCard=(action "selectCard") selectCardHard=(action "selectCardHard") deselectCard=(action "deselectCard")}}
+        {{koenig-card tabindex=index card=card apiRoot=apiRoot assetPath=assetPath selectCard=(action "selectCard") selectCardHard=(action "selectCardHard") deselectCard=(action "deselectCard") edit=(action "editCard") stopEdit=(action "stopEditingCard") editedCard=editedCard}}
     {{/ember-wormhole}}
 {{/each}}
 <div class='gh-koenig'>

diff --git a/lib/gh-koenig/addon/templates/components/koenig-card.hbs b/lib/gh-koenig/addon/templates/components/koenig-card.hbs
@@ -10,20 +10,21 @@
     selectCard=(action "selectCard")
     selectCardHard=(action "selectCardHard")
     deselectCard=(action "deselectCard")
+    stopEdit=(action "stopEdit")
 }}
 <div class="kg-card-toolbar">
     <div class="button-group">
         <label {{action "selectCardHard"}}>{{card.card.label}}:</label>
         {{#if isEditing}}
-            <button {{action "toggleState"}} class='kg-card-button-text'>
+            {{!--<button {{action "stopEdit"}} class='kg-card-button-text'>
                         Cancel
-            </button>
-            <button {{action "save"}} class='kg-card-button-save'>
-                        Save
+            </button>--}}
+            <button {{action "stopEdit"}} class='kg-card-button-save'>
+                Done            
             </button>
         {{else}}
             {{#if card.card.buttons.edit}}
-                <button {{action "toggleState"}} class='kg-card-button-text'>
+                <button {{action "startEdit"}} class='kg-card-button-text'>
                         Edit
                 </button>
             {{/if}}