Ghost/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-embed.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

59 lines
2.7 KiB
Handlebars

<KoenigCard
@class="flex flex-column"
@isSelected={{this.isSelected}}
@isEditing={{this.isEditing}}
@selectCard={{action this.selectCard}}
@deselectCard={{action this.deselectCard}}
@onDeselect={{action "onDeselect"}}
@editCard={{action this.editCard}}
@toolbar={{this.toolbar}}
@hasEditMode={{false}}
@showSelectedOutline={{this.payload.html}}
@addParagraphAfterCard={{this.addParagraphAfterCard}}
@moveCursorToPrevSection={{this.moveCursorToPrevSection}}
@moveCursorToNextSection={{this.moveCursorToNextSection}}
@editor={{this.editor}}
as |card|
>
{{#if this.payload.html}}
<div class="kg-card-hover">
<div class="koenig-embed-{{this.payload.type}} flex justify-center relative" data-kg-embed>
<iframe class="bn miw-100" scrolling="no"></iframe>
<div class="koenig-card-click-overlay ba b--transparent" data-kg-overlay></div>
</div>
{{#if (or this.isSelected (clean-basic-html this.payload.caption))}}
<card.CaptionInput
@caption={{this.payload.caption}}
@update={{action "updateCaption"}}
@placeholder="Type caption for embed (optional)"
/>
{{/if}}
</div>
{{else}}
{{#if this.convertUrl.isRunning}}
<div class="miw-100 pa2 ba br2 b--lightgrey-d1 flex items-center justify-center bg-whitegrey-l2 f6 lh-title h10">
&nbsp;<div class="ghost-spinner spinner-blue"></div>&nbsp;
</div>
{{else if this.hasError}}
<div class="miw-100 flex flex-row pa2 pl3 ba br2 b--red-l3 red bg-error-red f7 fw4 lh-title h10 items-center">
<span class="mr3">There was an error when parsing the URL.</span>
<button type="button" class="red-d2 mr3 fw6 hover-red" {{action "retry"}}><span class="underline">Retry</span></button>
<button type="button" class="red-d2 mr-auto fw6 underline hover-red" {{action "insertAsLink"}}><span class="underline">Paste URL as link</span></button>
<button type="button" {{action this.deleteCard}} class="nudge-right--2">
{{svg-jar "close" class="w3 stroke-red-l3"}}
</button>
</div>
{{else}}
<input
type="text"
value={{this.payload.url}}
name="url"
placeholder="Paste URL to add embedded content..."
class="miw-100 pa2 ba br2 b--lightgrey-d2 f7 form-text lh-title tracked-2 h10 nl2 nr2"
oninput={{action "updateUrl"}}
onkeydown={{action "urlKeydown"}}>
{{/if}}
{{/if}}
</KoenigCard>