From 63f3b83d5f81ad4b08ecabde80b60178afcdb5d0 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Tue, 30 Jan 2018 21:36:44 +0100 Subject: Auto resize schedule --- .../react/components/presentational/Schedule.js | 63 ++++++++++++++++++---- 1 file changed, 53 insertions(+), 10 deletions(-) (limited to 'src/client/react/components') diff --git a/src/client/react/components/presentational/Schedule.js b/src/client/react/components/presentational/Schedule.js index 256c1b4..e62039c 100644 --- a/src/client/react/components/presentational/Schedule.js +++ b/src/client/react/components/presentational/Schedule.js @@ -2,18 +2,61 @@ import React from 'react'; import PropTypes from 'prop-types'; import createDOMPurify from 'dompurify'; -const Schedule = ({ htmlStr }) => { - const DOMPurify = createDOMPurify(window); +class Schedule extends React.Component { + constructor(props) { + super(props); - const cleanHTML = DOMPurify.sanitize(htmlStr, { - ADD_ATTR: ['rules'], - }); + this.updateScaling = this.updateScaling.bind(this); + } - return ( - // eslint-disable-next-line react/no-danger -
- ); -}; + componentDidMount() { + window.addEventListener('resize', this.updateScaling); + this.updateScaling(); + } + + componentDidUpdate() { + this.updateScaling(); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.updateScaling); + } + + updateScaling() { + const windowWidth = window.innerWidth; + const tableNode = this.scheduleDiv.querySelector('table'); + if (!tableNode) return; + + // We want a 16px margin on both sides, this marging will be scaled with + // the entire schedule. + const tableWidth = tableNode.offsetWidth + 32; + + let scale = windowWidth / tableWidth; + if (scale > 1) { + scale = 1; + } + + this.scheduleDiv.style.transform = `scale(${scale})`; + this.scheduleDiv.style.transformOrigin = 'left top'; + this.scheduleDiv.style.margin = `${16 * scale}px`; + } + + render() { + const DOMPurify = createDOMPurify(window); + + const cleanHTML = DOMPurify.sanitize(this.props.htmlStr, { + ADD_ATTR: ['rules'], + }); + + return ( +
{ this.scheduleDiv = div; }} + /> + ); + } +} Schedule.propTypes = { htmlStr: PropTypes.string.isRequired, -- cgit v1.1