diff --git a/app/javascript/mastodon/containers/card_container.js b/app/javascript/mastodon/containers/card_container.js
deleted file mode 100644
index 11b9f88d4..000000000
--- a/app/javascript/mastodon/containers/card_container.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Card from '../features/status/components/card';
-import { fromJS } from 'immutable';
-
-export default class CardContainer extends React.PureComponent {
-
- static propTypes = {
- locale: PropTypes.string,
- card: PropTypes.array.isRequired,
- };
-
- render () {
- const { card, ...props } = this.props;
- return ;
- }
-
-}
diff --git a/app/javascript/mastodon/containers/cards_container.js b/app/javascript/mastodon/containers/cards_container.js
new file mode 100644
index 000000000..894bf4ef9
--- /dev/null
+++ b/app/javascript/mastodon/containers/cards_container.js
@@ -0,0 +1,59 @@
+import React, { Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import { getLocale } from '../locales';
+import Card from '../features/status/components/card';
+import ModalRoot from '../components/modal_root';
+import MediaModal from '../features/ui/components/media_modal';
+import { fromJS } from 'immutable';
+
+const { localeData, messages } = getLocale();
+addLocaleData(localeData);
+
+export default class CardsContainer extends React.PureComponent {
+
+ static propTypes = {
+ locale: PropTypes.string,
+ cards: PropTypes.object.isRequired,
+ };
+
+ state = {
+ media: null,
+ };
+
+ handleOpenCard = (media) => {
+ document.body.classList.add('card-standalone__body');
+ this.setState({ media });
+ }
+
+ handleCloseCard = () => {
+ document.body.classList.remove('card-standalone__body');
+ this.setState({ media: null });
+ }
+
+ render () {
+ const { locale, cards } = this.props;
+
+ return (
+
+
+ {[].map.call(cards, container => {
+ const { card, ...props } = JSON.parse(container.getAttribute('data-props'));
+
+ return ReactDOM.createPortal(
+ ,
+ container,
+ );
+ })}
+
+ {this.state.media && (
+
+ )}
+
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 7096b9b4f..3a1f1a16b 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -25,7 +25,6 @@ function main() {
const { getLocale } = require('../mastodon/locales');
const { localeData } = getLocale();
const VideoContainer = require('../mastodon/containers/video_container').default;
- const CardContainer = require('../mastodon/containers/card_container').default;
const React = require('react');
const ReactDOM = require('react-dom');
@@ -75,10 +74,16 @@ function main() {
ReactDOM.render(, content);
});
- [].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => {
- const props = JSON.parse(content.getAttribute('data-props'));
- ReactDOM.render(, content);
- });
+ const cards = document.querySelectorAll('[data-component="Card"]');
+
+ if (cards.length > 0) {
+ import(/* webpackChunkName: "containers/cards_container" */ '../mastodon/containers/cards_container').then(({ default: CardsContainer }) => {
+ const content = document.createElement('div');
+
+ ReactDOM.render(, content);
+ document.body.appendChild(content);
+ }).catch(error => console.error(error));
+ }
const mediaGalleries = document.querySelectorAll('[data-component="MediaGallery"]');
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 9d5ab66a4..c40b38a5a 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -60,6 +60,7 @@
}
}
+.card-standalone__body,
.media-gallery-standalone__body {
overflow: hidden;
}