mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 06:35:49 +03:00
Migrated code card to Octane syntax
refs https://github.com/TryGhost/Ghost/issues/14101 - applying boyscout rule and upgrading/cleaning up when touching files - nothing out of the ordinary to report with this migration
This commit is contained in:
Kevin Ansfield
parent
aab02f0f4c
commit
242106d596
@ -1249,3 +1249,13 @@ remove|ember-template-lint|no-duplicate-landmark-elements|353|28|353|28|38d3be08
|
||||
remove|ember-template-lint|no-duplicate-landmark-elements|421|28|421|28|345501bb9545198904b82e4c073b11d792ae2ea6|1652054400000|1662422400000|1665014400000|app/components/gh-post-settings-menu.hbs
|
||||
add|ember-template-lint|no-action|6|77|6|77|76726a13a086d82dab219df12e86db1773a9de32|1657756800000|1668128400000|1673312400000|app/components/gh-file-uploader.hbs
|
||||
remove|ember-template-lint|no-action|12|92|12|92|031d04576149d3034549aa3d14bc26da704cd70c|1652054400000|1662422400000|1665014400000|app/components/gh-file-uploader.hbs
|
||||
remove|ember-template-lint|no-action|9|16|9|16|822c6a91d06436c87443aba1c5316874b4de7e93|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|no-action|10|18|10|18|40a9eaaf8ee3a30448bd8f5c51e4f57ad6f637cb|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|no-action|11|14|11|14|45b936fe4ae520e86dc577dced7e4de626004fba|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|no-action|12|14|12|14|c27072dba50f6e36c62d708160adb2e96b8244e3|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|no-action|14|17|14|17|2ecb8ec2db47e693d292cac348977b4c83e5b0a4|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|no-action|15|17|15|17|b562d5c8ffc834037fff995329aa4cd49218776b|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|no-action|28|20|28|20|b96b7bd3d4b17c4761201d3a44c6876b119611f9|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|no-action|34|19|34|19|bb54609cede4c2f20ae22de5cbc2771d396aaaf4|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|no-action|55|20|55|20|ee695277e2f7dac9fbe5570ebfbe9c738280a976|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
remove|ember-template-lint|require-input-label|31|8|31|8|615e3b52bcc28f911cc3b8e3630bd77324e357a6|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
|
||||
|
||||
@ -1,36 +1,37 @@
|
||||
<KoenigCard
|
||||
@class={{concat "ba b--white relative kg-card-hover miw-100" (if this.isEditing " bw2 pt1 pb1 pl2 nl6 pr6 nr6")}}
|
||||
@class={{concat "ba b--white relative kg-card-hover miw-100" (if @isEditing " bw2 pt1 pb1 pl2 nl6 pr6 nr6")}}
|
||||
@style={{this.cardStyle}}
|
||||
@headerOffset={{this.headerOffset}}
|
||||
@headerOffset={{@headerOffset}}
|
||||
@toolbar={{this.toolbar}}
|
||||
@payload={{this.payload}}
|
||||
@isSelected={{this.isSelected}}
|
||||
@isEditing={{this.isEditing}}
|
||||
@selectCard={{action this.selectCard}}
|
||||
@deselectCard={{action this.deselectCard}}
|
||||
@editCard={{action this.editCard}}
|
||||
@saveCard={{action this.saveCard}}
|
||||
@saveAsSnippet={{this.saveAsSnippet}}
|
||||
@onEnterEdit={{action "enterEditMode"}}
|
||||
@onLeaveEdit={{action "leaveEditMode"}}
|
||||
@addParagraphAfterCard={{this.addParagraphAfterCard}}
|
||||
@moveCursorToPrevSection={{this.moveCursorToPrevSection}}
|
||||
@moveCursorToNextSection={{this.moveCursorToNextSection}}
|
||||
@editor={{this.editor}}
|
||||
@payload={{@payload}}
|
||||
@isSelected={{@isSelected}}
|
||||
@isEditing={{@isEditing}}
|
||||
@selectCard={{@selectCard}}
|
||||
@deselectCard={{@deselectCard}}
|
||||
@editCard={{@editCard}}
|
||||
@saveCard={{@saveCard}}
|
||||
@saveAsSnippet={{@saveAsSnippet}}
|
||||
@onEnterEdit={{this.enterEditMode}}
|
||||
@onLeaveEdit={{this.leaveEditMode}}
|
||||
@addParagraphAfterCard={{@addParagraphAfterCard}}
|
||||
@moveCursorToPrevSection={{@moveCursorToPrevSection}}
|
||||
@moveCursorToNextSection={{@moveCursorToNextSection}}
|
||||
@editor={{@editor}}
|
||||
as |card|
|
||||
>
|
||||
{{#if this.isEditing}}
|
||||
<GhCmEditor @value={{this.payload.code}}
|
||||
{{#if @isEditing}}
|
||||
<GhCmEditor @value={{@payload.code}}
|
||||
@class="koenig-card-code--editor koenig-card-html--editor"
|
||||
@textareaClass="o-0"
|
||||
@autofocus={{true}}
|
||||
@lineWrapping={{true}}
|
||||
@update={{action "updateCode"}}
|
||||
@update={{this.updateCode}}
|
||||
@mode={{this.cmMode}}
|
||||
/>
|
||||
<input
|
||||
aria-label="Code card language"
|
||||
type="text"
|
||||
value={{readonly this.payload.language}}
|
||||
value={{@payload.language}}
|
||||
{{on "blur" this.updateLanguage}}
|
||||
placeholder="Language..."
|
||||
class="absolute w-20 pa1 ba b--lightgrey br2 f8 tracked-2 fw4 z-999 outline-0 anim-normal"
|
||||
@ -38,21 +39,21 @@
|
||||
/>
|
||||
{{else}}
|
||||
<div class="koenig-card-html-rendered">
|
||||
<pre><code class="line-numbers {{if this.payload.language (concat "language-" this.payload.language)}}">{{this.escapedCode}}</code></pre>
|
||||
<pre><code class="line-numbers {{if @payload.language (concat "language-" @payload.language)}}">{{this.escapedCode}}</code></pre>
|
||||
</div>
|
||||
{{#if this.payload.language}}
|
||||
{{#if @payload.language}}
|
||||
<div class="absolute top-2 right-2 flex justify-center items-center pa2">
|
||||
<span class="db nudge-top--2 fw5 f8 midlightgrey">{{this.payload.language}}</span>
|
||||
<span class="db nudge-top--2 fw5 f8 midlightgrey">{{@payload.language}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="koenig-card-click-overlay"></div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (and (not this.isEditing) (or this.isSelected (clean-basic-html this.payload.caption)))}}
|
||||
{{#if (and (not @isEditing) (or @isSelected (clean-basic-html @payload.caption)))}}
|
||||
<card.CaptionInput
|
||||
@class="z-999"
|
||||
@caption={{this.payload.caption}}
|
||||
@update={{action "updateCaption"}}
|
||||
@caption={{@payload.caption}}
|
||||
@update={{this.updateCaption}}
|
||||
@placeholder="Type caption for code block (optional)"
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import Component from '@ember/component';
|
||||
import Component from '@glimmer/component';
|
||||
import Ember from 'ember';
|
||||
import classic from 'ember-classic-decorator';
|
||||
import {action, computed, set} from '@ember/object';
|
||||
import {action} from '@ember/object';
|
||||
import {utils as ghostHelperUtils} from '@tryghost/helpers';
|
||||
import {htmlSafe} from '@ember/template';
|
||||
import {isBlank} from '@ember/utils';
|
||||
import {run} from '@ember/runloop';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const {Handlebars} = Ember;
|
||||
const {countWords} = ghostHelperUtils;
|
||||
@ -17,39 +17,19 @@ const CM_MODE_MAP = {
|
||||
js: 'javascript'
|
||||
};
|
||||
|
||||
@classic
|
||||
export default class KoenigCardCode extends Component {
|
||||
// attrs
|
||||
payload = null;
|
||||
isSelected = false;
|
||||
isEditing = false;
|
||||
headerOffset = 0;
|
||||
showLanguageInput = true;
|
||||
@tracked showLanguageInput = true;
|
||||
|
||||
// closure actions
|
||||
editCard() {}
|
||||
saveCard() {}
|
||||
selectCard() {}
|
||||
deselectCard() {}
|
||||
deleteCard() {}
|
||||
registerComponent() {}
|
||||
moveCursorToNextSection() {}
|
||||
moveCursorToPrevSection() {}
|
||||
addParagraphAfterCard() {}
|
||||
|
||||
@computed('payload.code')
|
||||
get isEmpty() {
|
||||
return isBlank(this.payload.code);
|
||||
return isBlank(this.args.payload.code);
|
||||
}
|
||||
|
||||
@computed('payload.code')
|
||||
get counts() {
|
||||
return {wordCount: countWords(this.payload.code)};
|
||||
return {wordCount: countWords(this.args.payload.code)};
|
||||
}
|
||||
|
||||
@computed('isEditing')
|
||||
get toolbar() {
|
||||
if (this.isEditing) {
|
||||
if (this.args.isEditing) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -60,30 +40,26 @@ export default class KoenigCardCode extends Component {
|
||||
iconClass: 'fill-white',
|
||||
title: 'Edit',
|
||||
text: '',
|
||||
action: run.bind(this, this.editCard)
|
||||
action: this.args.editCard
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
@computed('payload.code')
|
||||
get escapedCode() {
|
||||
let escapedCode = Handlebars.Utils.escapeExpression(this.payload.code);
|
||||
let escapedCode = Handlebars.Utils.escapeExpression(this.args.payload.code);
|
||||
return htmlSafe(escapedCode);
|
||||
}
|
||||
|
||||
@computed('payload.language')
|
||||
get cmMode() {
|
||||
let {language} = this.payload;
|
||||
let {language} = this.args.payload;
|
||||
return CM_MODE_MAP[language] || language;
|
||||
}
|
||||
|
||||
@computed('isEditing')
|
||||
get cardStyle() {
|
||||
let style = this.isEditing ? 'background-color: #f4f8fb; border-color: #f4f8fb' : '';
|
||||
let style = this.args.isEditing ? 'background-color: #f4f8fb; border-color: #f4f8fb' : '';
|
||||
return htmlSafe(style);
|
||||
}
|
||||
|
||||
@computed('showLanguageInput')
|
||||
get languageInputStyle() {
|
||||
let styles = ['top: 6px', 'right: 6px'];
|
||||
if (!this.showLanguageInput) {
|
||||
@ -92,18 +68,18 @@ export default class KoenigCardCode extends Component {
|
||||
return htmlSafe(styles.join('; '));
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(...arguments);
|
||||
let payload = this.payload || {};
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
let payload = this.args.payload || {};
|
||||
|
||||
// CodeMirror errors on a `null` or `undefined` value
|
||||
if (!payload.code) {
|
||||
set(payload, 'code', '');
|
||||
payload.code = '';
|
||||
}
|
||||
|
||||
this.set('payload', payload);
|
||||
this.payload = payload;
|
||||
|
||||
this.registerComponent(this);
|
||||
this.args.registerComponent(this);
|
||||
}
|
||||
|
||||
@action
|
||||
@ -134,26 +110,26 @@ export default class KoenigCardCode extends Component {
|
||||
if (this.isEmpty) {
|
||||
// afterRender is required to avoid double modification of `isSelected`
|
||||
// TODO: see if there's a way to avoid afterRender
|
||||
run.scheduleOnce('afterRender', this, this.deleteCard);
|
||||
run.scheduleOnce('afterRender', this, this.args.deleteCard);
|
||||
}
|
||||
}
|
||||
|
||||
_updatePayloadAttr(attr, value) {
|
||||
let payload = this.payload;
|
||||
let save = this.saveCard;
|
||||
let payload = this.args.payload;
|
||||
let save = this.args.saveCard;
|
||||
|
||||
set(payload, attr, value);
|
||||
payload[attr] = value;
|
||||
|
||||
// update the mobiledoc and stay in edit mode
|
||||
save(payload, false);
|
||||
}
|
||||
|
||||
_hideLanguageInput() {
|
||||
this.set('showLanguageInput', false);
|
||||
this.showLanguageInput = false;
|
||||
}
|
||||
|
||||
_showLanguageInput() {
|
||||
this.set('showLanguageInput', true);
|
||||
this.showLanguageInput = true;
|
||||
}
|
||||
|
||||
_addMousemoveHandler() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user