Skip to content

Instantly share code, notes, and snippets.

@skttl
Created November 6, 2020 09:37
Show Gist options
  • Save skttl/738243fafff5f0100797e092754e95dd to your computer and use it in GitHub Desktop.
Save skttl/738243fafff5f0100797e092754e95dd to your computer and use it in GitHub Desktop.
[Custom but OOTB-like detailed block preview]
<button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element flex"
ng-click="api.editBlock(block, block.hideContentInOverlay, index, parentForm)"
ng-focus="block.focus"
ng-class="{ '--active': block.active, '--error': parentForm.$invalid && valFormManager.isShowingValidation() }"
val-server-property-class=""
style="padding:11px;">
<i class="icon {{block.content.icon}}" aria-hidden="true"></i>
<span style="margin-left:8px;">
<!-- if the block is the image block, show the name of the image, and optionally the caption -->
<span ng-if="block.content.contentTypeAlias == 'imageBlock'">
{{ block.data.image | ncNodeName }}
<small ng-if="block.data.caption != ''">
<br />
{{ block.data.caption }}
</small>
</span>
<!-- if the block is a FAQ block - show the first question, and then how many other questions have been added -->
<span ng-if="block.content.contentTypeAlias == 'fAQ'">
{{ block.data.headline }}
<small>
<br />
<span ng-if="block.data.faqItem && block.data.faqItem.contentData.length == 0">
No questions added
</span>
<span ng-if="block.data.faqItem && block.data.faqItem.contentData.length > 0">
{{ block.data.faqItem.contentData[0].question }}
</span>
<span ng-if="block.data.faqItem && block.data.faqItem.contentData.length == 2">
and one other question
</span>
<span ng-if="block.data.faqItem && block.data.faqItem.contentData.length > 2">
and {{ block.data.faqItem.contentData.length - 1 }} other questions
</span>
</small>
</span>
</span>
</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment