Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-code.hbs
Kevin Ansfield 09435ecf76 Co-located component template files
no issue

Keeps component JS backing files and template files in the same directory which avoids hunting across directories when working with components. Also lets you see all components when looking at one directory, whereas previously template-only or js-only components may not have been obvious without looking at both directories.

- ran [codemod](https://github.com/ember-codemods/ember-component-template-colocation-migrator/) for app-level components
- manually moved in-repo-addon component templates in `lib/koenig-editor`
- removed all explicit `layout` imports as JS/template associations are now made at build-time removing the need for them
- updated `.embercli` to default to new flat component structure
2020-05-18 13:14:08 +01: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>