MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[Glitch] Show media modal on public pages

Browse Source 
Port ff7941e652 to glitch-soc
master
Thibaut Girka 7 years ago
parent d55ab8e3e8
commit 7a68079b3f
8 changed files with 178 additions and 118 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      app/javascript/flavours/glitch/components/media_gallery.js
  2. 84
      app/javascript/flavours/glitch/components/modal_root.js
  3. 68
      app/javascript/flavours/glitch/containers/media_galleries_container.js
  4. 34
      app/javascript/flavours/glitch/containers/media_gallery_container.js
  5. 77
      app/javascript/flavours/glitch/features/ui/components/modal_root.js
  6. 16
      app/javascript/flavours/glitch/packs/public.js
  7. 5
      app/javascript/flavours/glitch/styles/components/modal.scss
  8. 4
      app/javascript/flavours/glitch/styles/containers.scss

6
app/javascript/flavours/glitch/components/media_gallery.js
Unescape View File

@ -33,10 +33,6 @@ const messages = defineMessages({
class Item extends React.PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
standalone: PropTypes.bool,
@ -73,7 +69,7 @@ class Item extends React.PureComponent {
handleClick = (e) => {
const { index, onClick } = this.props;
if (this.context.router && e.button === 0) {
if (e.button === 0) {
e.preventDefault();
onClick(index);
}

84
app/javascript/flavours/glitch/components/modal_root.js
Unescape View File

@ -0,0 +1,84 @@
import React from 'react';
import PropTypes from 'prop-types';
export default class ModalRoot extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
};
state = {
revealed: !!this.props.children,
};
activeElement = this.state.revealed ? document.activeElement : null;
handleKeyUp = (e) => {
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!this.props.children && !this.props.props.noEsc) {
this.props.onClose();
}
}
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false);
}
componentWillReceiveProps (nextProps) {
if (!!nextProps.children && !this.props.children) {
this.activeElement = document.activeElement;
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
} else if (!nextProps.children) {
this.setState({ revealed: false });
}
}
componentDidUpdate (prevProps) {
if (!this.props.children && !!prevProps.children) {
this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
this.activeElement.focus();
this.activeElement = null;
}
if (this.props.children) {
requestAnimationFrame(() => {
this.setState({ revealed: true });
});
}
}
componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp);
}
getSiblings = () => {
return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node);
}
setRef = ref => {
this.node = ref;
}
render () {
const { children, onClose } = this.props;
const { revealed } = this.state;
const visible = !!children;
if (!visible) {
return (
<div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} />
);
}
return (
<div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
<div role='dialog' className='modal-root__container'>{children}</div>
</div>
</div>
);
}
}

68
app/javascript/flavours/glitch/containers/media_galleries_container.js
Unescape View File

@ -0,0 +1,68 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { IntlProvider, addLocaleData } from 'react-intl';
import { getLocale } from 'mastodon/locales';
import MediaGallery from 'flavours/glitch/components/media_gallery';
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 MediaGalleriesContainer extends React.PureComponent {
static propTypes = {
locale: PropTypes.string.isRequired,
galleries: PropTypes.object.isRequired,
};
state = {
media: null,
index: null,
};
handleOpenMedia = (media, index) => {
document.body.classList.add('media-gallery-standalone__body');
this.setState({ media, index });
}
handleCloseMedia = () => {
document.body.classList.remove('media-gallery-standalone__body');
this.setState({ media: null, index: null });
}
render () {
const { locale, galleries } = this.props;
return (
<IntlProvider locale={locale} messages={messages}>
<React.Fragment>
{[].map.call(galleries, gallery => {
const { media, ...props } = JSON.parse(gallery.getAttribute('data-props'));
return ReactDOM.createPortal(
<MediaGallery
{...props}
media={fromJS(media)}
onOpenMedia={this.handleOpenMedia}
/>,
gallery
);
})}
<ModalRoot onClose={this.handleCloseMedia}>
{this.state.media === null || this.state.index === null ? null : (
<MediaModal
media={this.state.media}
index={this.state.index}
onClose={this.handleCloseMedia}
/>
)}
</ModalRoot>
</React.Fragment>
</IntlProvider>
);
}
}

34
app/javascript/flavours/glitch/containers/media_gallery_container.js
Unescape View File

@ -1,34 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { IntlProvider, addLocaleData } from 'react-intl';
import { getLocale } from 'mastodon/locales';
import MediaGallery from 'flavours/glitch/components/media_gallery';
import { fromJS } from 'immutable';
const { localeData, messages } = getLocale();
addLocaleData(localeData);
export default class MediaGalleryContainer extends React.PureComponent {
static propTypes = {
locale: PropTypes.string.isRequired,
media: PropTypes.array.isRequired,
};
handleOpenMedia = () => {}
render () {
const { locale, media, ...props } = this.props;
return (
<IntlProvider locale={locale} messages={messages}>
<MediaGallery
{...props}
media={fromJS(media)}
onOpenMedia={this.handleOpenMedia}
/>
</IntlProvider>
);
}
}

77
app/javascript/flavours/glitch/features/ui/components/modal_root.js
Unescape View File

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import Base from '../../../components/modal_root';
import BundleContainer from '../containers/bundle_container';
import BundleModalError from './bundle_modal_error';
import ModalLoading from './modal_loading';
@ -43,56 +44,6 @@ export default class ModalRoot extends React.PureComponent {
onClose: PropTypes.func.isRequired,
};
state = {
revealed: false,
};
handleKeyUp = (e) => {
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!this.props.type && !this.props.props.noEsc) {
this.props.onClose();
}
}
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false);
}
componentWillReceiveProps (nextProps) {
if (!!nextProps.type && !this.props.type) {
this.activeElement = document.activeElement;
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
} else if (!nextProps.type) {
this.setState({ revealed: false });
}
}
componentDidUpdate (prevProps) {
if (!this.props.type && !!prevProps.type) {
this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
this.activeElement.focus();
this.activeElement = null;
}
if (this.props.type) {
requestAnimationFrame(() => {
this.setState({ revealed: true });
});
}
}
componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp);
}
getSiblings = () => {
return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node);
}
setRef = ref => {
this.node = ref;
}
renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
}
@ -105,30 +56,16 @@ export default class ModalRoot extends React.PureComponent {
render () {
const { type, props, onClose } = this.props;
const { revealed } = this.state;
const visible = !!type;
if (!visible) {
return (
<div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} />
);
}
return (
<div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
<div role='dialog' className='modal-root__container'>
{
visible ?
(<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
<Base onClose={onClose}>
{visible && (
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
</BundleContainer>) :
null
}
</div>
</div>
</div>
</BundleContainer>
)}
</Base>
);
}

16
app/javascript/flavours/glitch/packs/public.js
Unescape View File

@ -7,7 +7,6 @@ function main() {
const { getLocale } = require('locales');
const { localeData } = getLocale();
const VideoContainer = require('flavours/glitch/containers/video_container').default;
const MediaGalleryContainer = require('flavours/glitch/containers/media_gallery_container').default;
const CardContainer = require('flavours/glitch/containers/card_container').default;
const React = require('react');
const ReactDOM = require('react-dom');
@ -58,15 +57,20 @@ function main() {
ReactDOM.render(<VideoContainer locale={locale} {...props} />, content);
});
[].forEach.call(document.querySelectorAll('[data-component="MediaGallery"]'), (content) => {
const props = JSON.parse(content.getAttribute('data-props'));
ReactDOM.render(<MediaGalleryContainer locale={locale} {...props} />, content);
});
[].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => {
const props = JSON.parse(content.getAttribute('data-props'));
ReactDOM.render(<CardContainer locale={locale} {...props} />, content);
});
const mediaGalleries = document.querySelectorAll('[data-component="MediaGallery"]');
if (mediaGalleries.length > 0) {
const MediaGalleriesContainer = require('flavours/glitch/containers/media_galleries_container').default;
const content = document.createElement('div');
ReactDOM.render(<MediaGalleriesContainer locale={locale} galleries={mediaGalleries} />, content);
document.body.appendChild(content);
}
});
}

5
app/javascript/flavours/glitch/styles/components/modal.scss
Unescape View File

@ -3,13 +3,14 @@
}
.modal-root {
position: relative;
transition: opacity 0.3s linear;
will-change: opacity;
z-index: 9999;
}
.modal-root__overlay {
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
@ -18,7 +19,7 @@
}
.modal-root__container {
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100%;

4
app/javascript/flavours/glitch/styles/containers.scss
Unescape View File

@ -60,6 +60,10 @@
}
}
.media-gallery-standalone__body {
overflow: hidden;
}
.account-header {
width: 400px;
margin: 0 auto;

Write Preview
Loading…
Cancel
Save