diff --git a/app/javascript/flavours/glitch/containers/card_container.js b/app/javascript/flavours/glitch/containers/card_container.js
deleted file mode 100644
index dec7df5223..0000000000
--- a/app/javascript/flavours/glitch/containers/card_container.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Card from 'flavours/glitch/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/flavours/glitch/containers/cards_container.js b/app/javascript/flavours/glitch/containers/cards_container.js
new file mode 100644
index 0000000000..1cf980f65a
--- /dev/null
+++ b/app/javascript/flavours/glitch/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 'flavours/glitch/features/status/components/card';
+import ModalRoot from 'flavours/glitch/components/modal_root';
+import MediaModal from 'flavours/glitch/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/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js
index ed685b6b76..4e621c67f7 100644
--- a/app/javascript/flavours/glitch/packs/public.js
+++ b/app/javascript/flavours/glitch/packs/public.js
@@ -7,7 +7,6 @@ function main() {
const { getLocale } = require('locales');
const { localeData } = getLocale();
const VideoContainer = require('flavours/glitch/containers/video_container').default;
- const CardContainer = require('flavours/glitch/containers/card_container').default;
const React = require('react');
const ReactDOM = require('react-dom');
@@ -57,10 +56,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"]');