From e9c9a5746b51616ed98139054c6bc5df7d64b12f Mon Sep 17 00:00:00 2001 From: Ryan McCarvill Date: Thu, 6 Apr 2017 20:11:25 +1200 Subject: [PATCH] markdown card given new format --- app/styles/addons/gh-koenig/gh-koenig.css | 7 ++-- .../addon/components/cards/card-markdown.js | 23 ++++------- lib/gh-koenig/addon/components/gh-koenig.js | 40 +++++++++++++------ lib/gh-koenig/addon/components/koenig-card.js | 36 ++++++++++++----- .../addon/templates/components/gh-koenig.hbs | 4 +- .../templates/components/koenig-card.hbs | 11 ++--- 6 files changed, 72 insertions(+), 49 deletions(-) diff --git a/app/styles/addons/gh-koenig/gh-koenig.css b/app/styles/addons/gh-koenig/gh-koenig.css index c6f2049615..45b44806a2 100644 --- 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 index ecc953ce4c..f2e3d227c9 100644 --- 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 index bd3c41e653..5010f5eacf 100644 --- 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 index 995c9404f7..44ba2edbd2 100644 --- 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 index 36307cf246..d484351276 100644 --- 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}}
diff --git a/lib/gh-koenig/addon/templates/components/koenig-card.hbs b/lib/gh-koenig/addon/templates/components/koenig-card.hbs index c089b3f3ed..8143f08dbb 100644 --- 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") }}
{{#if isEditing}} - - --}} + {{else}} {{#if card.card.buttons.edit}} - {{/if}}