diff options
Diffstat (limited to 'app/javascript/flavours/glitch/utils')
7 files changed, 0 insertions, 271 deletions
diff --git a/app/javascript/flavours/glitch/utils/fullscreen.js b/app/javascript/flavours/glitch/utils/fullscreen.js deleted file mode 100644 index cf5d0cf98..000000000 --- a/app/javascript/flavours/glitch/utils/fullscreen.js +++ /dev/null @@ -1,46 +0,0 @@ -// APIs for normalizing fullscreen operations. Note that Edge uses -// the WebKit-prefixed APIs currently (as of Edge 16). - -export const isFullscreen = () => document.fullscreenElement || - document.webkitFullscreenElement || - document.mozFullScreenElement; - -export const exitFullscreen = () => { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } -}; - -export const requestFullscreen = el => { - if (el.requestFullscreen) { - el.requestFullscreen(); - } else if (el.webkitRequestFullscreen) { - el.webkitRequestFullscreen(); - } else if (el.mozRequestFullScreen) { - el.mozRequestFullScreen(); - } -}; - -export const attachFullscreenListener = (listener) => { - if ('onfullscreenchange' in document) { - document.addEventListener('fullscreenchange', listener); - } else if ('onwebkitfullscreenchange' in document) { - document.addEventListener('webkitfullscreenchange', listener); - } else if ('onmozfullscreenchange' in document) { - document.addEventListener('mozfullscreenchange', listener); - } -}; - -export const detachFullscreenListener = (listener) => { - if ('onfullscreenchange' in document) { - document.removeEventListener('fullscreenchange', listener); - } else if ('onwebkitfullscreenchange' in document) { - document.removeEventListener('webkitfullscreenchange', listener); - } else if ('onmozfullscreenchange' in document) { - document.removeEventListener('mozfullscreenchange', listener); - } -}; diff --git a/app/javascript/flavours/glitch/utils/get_rect_from_entry.js b/app/javascript/flavours/glitch/utils/get_rect_from_entry.js deleted file mode 100644 index c266cd7dc..000000000 --- a/app/javascript/flavours/glitch/utils/get_rect_from_entry.js +++ /dev/null @@ -1,21 +0,0 @@ - -// Get the bounding client rect from an IntersectionObserver entry. -// This is to work around a bug in Chrome: https://crbug.com/737228 - -let hasBoundingRectBug; - -function getRectFromEntry(entry) { - if (typeof hasBoundingRectBug !== 'boolean') { - const boundingRect = entry.target.getBoundingClientRect(); - const observerRect = entry.boundingClientRect; - hasBoundingRectBug = boundingRect.height !== observerRect.height || - boundingRect.top !== observerRect.top || - boundingRect.width !== observerRect.width || - boundingRect.bottom !== observerRect.bottom || - boundingRect.left !== observerRect.left || - boundingRect.right !== observerRect.right; - } - return hasBoundingRectBug ? entry.target.getBoundingClientRect() : entry.boundingClientRect; -} - -export default getRectFromEntry; diff --git a/app/javascript/flavours/glitch/utils/intersection_observer_wrapper.js b/app/javascript/flavours/glitch/utils/intersection_observer_wrapper.js deleted file mode 100644 index 2b24c6583..000000000 --- a/app/javascript/flavours/glitch/utils/intersection_observer_wrapper.js +++ /dev/null @@ -1,57 +0,0 @@ -// Wrapper for IntersectionObserver in order to make working with it -// a bit easier. We also follow this performance advice: -// "If you need to observe multiple elements, it is both possible and -// advised to observe multiple elements using the same IntersectionObserver -// instance by calling observe() multiple times." -// https://developers.google.com/web/updates/2016/04/intersectionobserver - -class IntersectionObserverWrapper { - - callbacks = {}; - observerBacklog = []; - observer = null; - - connect (options) { - const onIntersection = (entries) => { - entries.forEach(entry => { - const id = entry.target.getAttribute('data-id'); - if (this.callbacks[id]) { - this.callbacks[id](entry); - } - }); - }; - - this.observer = new IntersectionObserver(onIntersection, options); - this.observerBacklog.forEach(([ id, node, callback ]) => { - this.observe(id, node, callback); - }); - this.observerBacklog = null; - } - - observe (id, node, callback) { - if (!this.observer) { - this.observerBacklog.push([ id, node, callback ]); - } else { - this.callbacks[id] = callback; - this.observer.observe(node); - } - } - - unobserve (id, node) { - if (this.observer) { - delete this.callbacks[id]; - this.observer.unobserve(node); - } - } - - disconnect () { - if (this.observer) { - this.callbacks = {}; - this.observer.disconnect(); - this.observer = null; - } - } - -} - -export default IntersectionObserverWrapper; diff --git a/app/javascript/flavours/glitch/utils/optional_motion.js b/app/javascript/flavours/glitch/utils/optional_motion.js deleted file mode 100644 index a7fbe6310..000000000 --- a/app/javascript/flavours/glitch/utils/optional_motion.js +++ /dev/null @@ -1,5 +0,0 @@ -import { reduceMotion } from 'flavours/glitch/initial_state'; -import ReducedMotion from './reduced_motion'; -import Motion from 'react-motion/lib/Motion'; - -export default reduceMotion ? ReducedMotion : Motion; diff --git a/app/javascript/flavours/glitch/utils/react_router_helpers.js b/app/javascript/flavours/glitch/utils/react_router_helpers.js deleted file mode 100644 index e36c512f3..000000000 --- a/app/javascript/flavours/glitch/utils/react_router_helpers.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Switch, Route } from 'react-router-dom'; - -import ColumnLoading from 'flavours/glitch/features/ui/components/column_loading'; -import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; -import BundleContainer from 'flavours/glitch/features/ui/containers/bundle_container'; - -// Small wrapper to pass multiColumn to the route components -export class WrappedSwitch extends React.PureComponent { - - render () { - const { multiColumn, children } = this.props; - - return ( - <Switch> - {React.Children.map(children, child => React.cloneElement(child, { multiColumn }))} - </Switch> - ); - } - -} - -WrappedSwitch.propTypes = { - multiColumn: PropTypes.bool, - children: PropTypes.node, -}; - -// Small Wraper to extract the params from the route and pass -// them to the rendered component, together with the content to -// be rendered inside (the children) -export class WrappedRoute extends React.Component { - - static propTypes = { - component: PropTypes.func.isRequired, - content: PropTypes.node, - multiColumn: PropTypes.bool, - componentParams: PropTypes.object, - } - - static defaultProps = { - componentParams: {}, - }; - - renderComponent = ({ match }) => { - const { component, content, multiColumn, componentParams } = this.props; - - return ( - <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}> - {Component => <Component params={match.params} multiColumn={multiColumn} {...componentParams}>{content}</Component>} - </BundleContainer> - ); - } - - renderLoading = () => { - return <ColumnLoading />; - } - - renderError = (props) => { - return <BundleColumnError {...props} />; - } - - render () { - const { component: Component, content, ...rest } = this.props; - - return <Route {...rest} render={this.renderComponent} />; - } - -} diff --git a/app/javascript/flavours/glitch/utils/reduced_motion.js b/app/javascript/flavours/glitch/utils/reduced_motion.js deleted file mode 100644 index 95519042b..000000000 --- a/app/javascript/flavours/glitch/utils/reduced_motion.js +++ /dev/null @@ -1,44 +0,0 @@ -// Like react-motion's Motion, but reduces all animations to cross-fades -// for the benefit of users with motion sickness. -import React from 'react'; -import Motion from 'react-motion/lib/Motion'; -import PropTypes from 'prop-types'; - -const stylesToKeep = ['opacity', 'backgroundOpacity']; - -const extractValue = (value) => { - // This is either an object with a "val" property or it's a number - return (typeof value === 'object' && value && 'val' in value) ? value.val : value; -}; - -class ReducedMotion extends React.Component { - - static propTypes = { - defaultStyle: PropTypes.object, - style: PropTypes.object, - children: PropTypes.func, - } - - render() { - - const { style, defaultStyle, children } = this.props; - - Object.keys(style).forEach(key => { - if (stylesToKeep.includes(key)) { - return; - } - // If it's setting an x or height or scale or some other value, we need - // to preserve the end-state value without actually animating it - style[key] = defaultStyle[key] = extractValue(style[key]); - }); - - return ( - <Motion style={style} defaultStyle={defaultStyle}> - {children} - </Motion> - ); - } - -} - -export default ReducedMotion; diff --git a/app/javascript/flavours/glitch/utils/schedule_idle_task.js b/app/javascript/flavours/glitch/utils/schedule_idle_task.js deleted file mode 100644 index b04d4a8ee..000000000 --- a/app/javascript/flavours/glitch/utils/schedule_idle_task.js +++ /dev/null @@ -1,29 +0,0 @@ -// Wrapper to call requestIdleCallback() to schedule low-priority work. -// See https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API -// for a good breakdown of the concepts behind this. - -import Queue from 'tiny-queue'; - -const taskQueue = new Queue(); -let runningRequestIdleCallback = false; - -function runTasks(deadline) { - while (taskQueue.length && deadline.timeRemaining() > 0) { - taskQueue.shift()(); - } - if (taskQueue.length) { - requestIdleCallback(runTasks); - } else { - runningRequestIdleCallback = false; - } -} - -function scheduleIdleTask(task) { - taskQueue.push(task); - if (!runningRequestIdleCallback) { - runningRequestIdleCallback = true; - requestIdleCallback(runTasks); - } -} - -export default scheduleIdleTask; |