Ghost/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-code.hbs
Kevin Ansfield 2231dd84c2 Migrated to <AngleBracketSyntax /> (#1460)
no issue

Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md

We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere.

This simplifies the rules for what template code is referring to...

`<Component>` = a component
`{{helper}}` = a helper (or locally assigned handlebars variable)
`{{this.foo}}` = data on the template backing context (a component/controller)
`{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments)

- ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories:
  - `app/templates`
  - `lib/koenig-editor/addon/templates`
- removed positional params from components as angle bracket syntax does not support them
  - `gh-feature-flag`
  - `gh-tour-item`
  - `gh-cm-editor`
  - `gh-fullscreen-modal`
  - `gh-task-button`
- updates some code that was missed in 3c851293c1 to use explicit this
2020-01-16 15:14:03 +00:00

58 lines
2.4 KiB
Handlebars

<KoenigCard
@class={{concat "ba b--white relative kg-card-hover miw-100 relative" (if this.isEditing " bw2 pt1 pb1 pl2 nl6 pr6 nr6")}}
@style={{this.cardStyle}}
@headerOffset={{this.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}}
@onEnterEdit={{action "enterEditMode"}}
@onLeaveEdit={{action "leaveEditMode"}}
@addParagraphAfterCard={{this.addParagraphAfterCard}}
@moveCursorToPrevSection={{this.moveCursorToPrevSection}}
@moveCursorToNextSection={{this.moveCursorToNextSection}}
@editor={{this.editor}}
as |card|
>
{{#if this.isEditing}}
<GhCmEditor @value={{this.payload.code}}
@class="koenig-card-code--editor koenig-card-html--editor"
@textareaClass="o-0"
@autofocus={{true}}
@lineWrapping={{true}}
@update={{action "updateCode"}}
@mode={{this.cmMode}}
/>
<input
type="text"
value={{readonly this.payload.language}}
onblur={{action (mut this.payload.language) value="target.value"}}
placeholder="Language..."
class="absolute w-20 pa1 ba b--lightgrey br2 f8 tracked-2 fw4 z-999 outline-0 anim-normal"
style={{this.languageInputStyle}}
/>
{{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>
</div>
{{#if this.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>
</div>
{{/if}}
<div class="koenig-card-click-overlay"></div>
{{/if}}
{{#if (and (not this.isEditing) (or this.isSelected (clean-basic-html this.payload.caption)))}}
<card.CaptionInput
@class="z-999"
@caption={{this.payload.caption}}
@update={{action "updateCaption"}}
@placeholder="Type caption for code block (optional)"
/>
{{/if}}
</KoenigCard>