1 import { Component, linkEvent } from 'inferno';
2 import { Post } from '../interfaces';
3 import { mdToHtml } from '../utils';
4 import { i18n } from '../i18next';
6 interface FramelyCardProps {
10 interface FramelyCardState {
14 export class IFramelyCard extends Component<
18 private emptyState: FramelyCardState = {
22 constructor(props: any, context: any) {
23 super(props, context);
24 this.state = this.emptyState;
28 let post = this.props.post;
31 {post.embed_title && !this.state.expanded && (
32 <div class="card bg-transparent border-secondary mt-3 mb-2">
35 <div class="card-body">
36 <h5 class="card-title d-inline">
39 class="unselectable pointer"
40 onClick={linkEvent(this, this.handleIframeExpand)}
41 data-tippy-content={i18n.t('expand_here')}
58 <span class="d-inline-block ml-2 mb-2 small text-muted">
60 class="text-muted font-italic"
65 {new URL(post.url).hostname}
66 <svg class="ml-1 icon">
67 <use xlinkHref="#icon-external-link"></use>
72 class="ml-2 pointer text-monospace"
73 onClick={linkEvent(this, this.handleIframeExpand)}
74 data-tippy-content={i18n.t('expand_here')}
76 {this.state.expanded ? '[-]' : '[+]'}
80 {post.embed_description && (
82 className="card-text small text-muted md-div"
83 dangerouslySetInnerHTML={mdToHtml(post.embed_description)}
91 {this.state.expanded && (
94 dangerouslySetInnerHTML={{ __html: post.embed_html }}
101 handleIframeExpand(i: IFramelyCard) {
102 i.state.expanded = !i.state.expanded;