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 <div class="card my-2">
31 <div class="row no-gutters">
32 {iframely.thumbnail_url && (
33 <div class="col-sm-3">
37 onClick={linkEvent(this, this.handleIframeExpand)}
39 <img class="card-img" src={iframely.thumbnail_url} />
43 class="img-fluid card-img"
44 src={iframely.thumbnail_url}
49 <div class="col-sm-9">
50 <div class="card-body">
51 <h5 class="card-title d-inline">
53 <a class="text-body" target="_blank" href={iframely.url}>
58 <span class="d-inline-block ml-2 mb-2 small text-muted">
59 <a class="text-muted" target="_blank" href={iframely.url}>
60 {new URL(iframely.url).hostname}
61 <svg class="ml-1 icon">
62 <use xlinkHref="#icon-external-link"></use>
68 onClick={linkEvent(this, this.handleIframeExpand)}
70 {this.state.expanded ? '[-]' : '[+]'}
74 {iframely.description && (
76 className="card-text small text-muted md-div"
77 dangerouslySetInnerHTML={mdToHtml(iframely.description)}
84 {this.state.expanded && (
85 <div class="my-2 embed-responsive embed-responsive-16by9">
87 class="embed-responsive-item"
88 dangerouslySetInnerHTML={{ __html: iframely.html }}
96 handleIframeExpand(i: IFramelyCard) {
97 i.state.expanded = !i.state.expanded;