1 import { Component, linkEvent } from 'inferno';
2 import { FramelyData } 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 iframely = this.props.iframely;
31 {iframely.title && !this.state.expanded && (
32 <div class="card mt-3 mb-2">
35 <div class="card-body">
36 <h5 class="card-title d-inline">
38 <a class="text-body" target="_blank" href={iframely.url}>
43 <span class="d-inline-block ml-2 mb-2 small text-muted">
45 class="text-muted font-italic"
49 {new URL(iframely.url).hostname}
50 <svg class="ml-1 icon">
51 <use xlinkHref="#icon-external-link"></use>
56 class="ml-2 pointer text-monospace"
57 onClick={linkEvent(this, this.handleIframeExpand)}
58 data-tippy-content={i18n.t('expand_here')}
60 {this.state.expanded ? '[-]' : '[+]'}
64 {iframely.description && (
66 className="card-text small text-muted md-div"
67 dangerouslySetInnerHTML={mdToHtml(iframely.description)}
75 {this.state.expanded && (
78 dangerouslySetInnerHTML={{ __html: iframely.html }}
85 handleIframeExpand(i: IFramelyCard) {
86 i.state.expanded = !i.state.expanded;