1 import { Component, linkEvent } from 'inferno';
2 import { FramelyData } from '../interfaces';
3 import { mdToHtml } from '../utils';
5 interface FramelyCardProps {
9 interface FramelyCardState {
13 export class IFramelyCard extends Component<
17 private emptyState: FramelyCardState = {
21 constructor(props: any, context: any) {
22 super(props, context);
23 this.state = this.emptyState;
27 let iframely = this.props.iframely;
30 {iframely.title && !this.state.expanded && (
31 <div class="card mt-3 mb-2">
34 <div class="card-body">
35 <h5 class="card-title d-inline">
37 <a class="text-body" target="_blank" href={iframely.url}>
42 <span class="d-inline-block ml-2 mb-2 small text-muted">
44 class="text-muted font-italic"
48 {new URL(iframely.url).hostname}
49 <svg class="ml-1 icon">
50 <use xlinkHref="#icon-external-link"></use>
55 class="ml-2 pointer text-monospace"
56 onClick={linkEvent(this, this.handleIframeExpand)}
58 {this.state.expanded ? '[-]' : '[+]'}
62 {iframely.description && (
64 className="card-text small text-muted md-div"
65 dangerouslySetInnerHTML={mdToHtml(iframely.description)}
73 {this.state.expanded && (
76 dangerouslySetInnerHTML={{ __html: iframely.html }}
83 handleIframeExpand(i: IFramelyCard) {
84 i.state.expanded = !i.state.expanded;