TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 12:21:36 +03:00
Code Issues Projects Releases Wiki Activity

markdown card given new format

Browse Source
This commit is contained in:
Ryan McCarvill 2017-04-06 20:11:25 +12:00 committed by Kevin Ansfield
parent c022938890
commit b41ff3b22e
6 changed files with 72 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ghost/admin/app/styles/addons/gh-koenig/gh-koenig.css
View File

@ -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; }

23
ghost/admin/lib/gh-koenig/addon/components/cards/card-markdown.js
View File

@ -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');
}
}
});

40
ghost/admin/lib/gh-koenig/addon/components/gh-koenig.js
View File

@ -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);
}
}

36
ghost/admin/lib/gh-koenig/addon/components/koenig-card.js
View File

@ -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);
}
}
});

4
ghost/admin/lib/gh-koenig/addon/templates/components/gh-koenig.hbs
View File

@ -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'>

11
ghost/admin/lib/gh-koenig/addon/templates/components/koenig-card.hbs
View File

@ -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}}