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;
31 <div class="card my-2">
32 <div class="row no-gutters">
33 {iframely.thumbnail_url && (
34 <div class="col-sm-3">
38 onClick={linkEvent(this, this.handleIframeExpand)}
40 <img class="card-img" src={iframely.thumbnail_url} />
44 class="img-fluid card-img"
45 src={iframely.thumbnail_url}
50 <div class="col-sm-9">
51 <div class="card-body">
52 <h5 class="card-title d-inline">
54 <a class="text-body" target="_blank" href={iframely.url}>
59 <span class="d-inline-block ml-2 mb-2 small text-muted">
60 <a class="text-muted" target="_blank" href={iframely.url}>
61 {new URL(iframely.url).hostname}
62 <svg class="ml-1 icon">
63 <use xlinkHref="#icon-external-link"></use>
69 onClick={linkEvent(this, this.handleIframeExpand)}
71 {this.state.expanded ? '[-]' : '[+]'}
75 {iframely.description && (
77 className="card-text small text-muted md-div"
78 dangerouslySetInnerHTML={mdToHtml(iframely.description)}
86 {this.state.expanded && (
87 <div class="my-2 embed-responsive embed-responsive-16by9">
89 class="embed-responsive-item"
90 dangerouslySetInnerHTML={{ __html: iframely.html }}
98 handleIframeExpand(i: IFramelyCard) {
99 i.state.expanded = !i.state.expanded;