Gab Social. All are welcome.

app/javascript/gabsocial/features/ui/util/async-components.js

@@ -0,0 +1,143 @@
+export function EmojiPicker () {
+  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/emoji_picker');
+}
+
+export function Compose () {
+  return import(/* webpackChunkName: "features/compose" */'../../compose');
+}
+
+export function Notifications () {
+  return import(/* webpackChunkName: "features/notifications" */'../../notifications');
+}
+
+export function HomeTimeline () {
+  return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline');
+}
+
+export function PublicTimeline () {
+  return import(/* webpackChunkName: "features/public_timeline" */'../../public_timeline');
+}
+
+export function CommunityTimeline () {
+  return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline');
+}
+
+export function HashtagTimeline () {
+  return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline');
+}
+
+export function DirectTimeline() {
+  return import(/* webpackChunkName: "features/direct_timeline" */'../../direct_timeline');
+}
+
+export function ListTimeline () {
+  return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline');
+}
+
+export function GroupTimeline () {
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline');
+}
+
+export function Groups () {
+  return import(/* webpackChunkName: "features/groups/index" */'../../groups/index');
+}
+
+export function Lists () {
+  return import(/* webpackChunkName: "features/lists" */'../../lists');
+}
+
+export function Status () {
+  return import(/* webpackChunkName: "features/status" */'../../status');
+}
+
+export function GettingStarted () {
+  return import(/* webpackChunkName: "features/getting_started" */'../../getting_started');
+}
+
+export function PinnedStatuses () {
+  return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses');
+}
+
+export function AccountTimeline () {
+  return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline');
+}
+
+export function AccountGallery () {
+  return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery');
+}
+
+export function Followers () {
+  return import(/* webpackChunkName: "features/followers" */'../../followers');
+}
+
+export function Following () {
+  return import(/* webpackChunkName: "features/following" */'../../following');
+}
+
+export function Reblogs () {
+  return import(/* webpackChunkName: "features/reblogs" */'../../reblogs');
+}
+
+export function Favourites () {
+  return import(/* webpackChunkName: "features/favourites" */'../../favourites');
+}
+
+export function FollowRequests () {
+  return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests');
+}
+
+export function GenericNotFound () {
+  return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found');
+}
+
+export function FavouritedStatuses () {
+  return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses');
+}
+
+export function Blocks () {
+  return import(/* webpackChunkName: "features/blocks" */'../../blocks');
+}
+
+export function DomainBlocks () {
+  return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks');
+}
+
+export function Mutes () {
+  return import(/* webpackChunkName: "features/mutes" */'../../mutes');
+}
+
+export function MuteModal () {
+  return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal');
+}
+
+export function ReportModal () {
+  return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal');
+}
+
+export function MediaGallery () {
+  return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery');
+}
+
+export function Video () {
+  return import(/* webpackChunkName: "features/video" */'../../video');
+}
+
+export function EmbedModal () {
+  return import(/* webpackChunkName: "modals/embed_modal" */'../components/embed_modal');
+}
+
+export function ListEditor () {
+  return import(/* webpackChunkName: "features/list_editor" */'../../list_editor');
+}
+
+export function ListAdder () {
+  return import(/*webpackChunkName: "features/list_adder" */'../../list_adder');
+}
+
+export function Search () {
+  return import(/*webpackChunkName: "features/search" */'../../search');
+}
+
+export function Explore () {
+  return import(/* webpackChunkName: "features/explore" */'../../explore');
+}

app/javascript/gabsocial/features/ui/util/fullscreen.js

@@ -0,0 +1,46 @@
+// 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);
+  }
+};

app/javascript/gabsocial/features/ui/util/get_rect_from_entry.js

@@ -0,0 +1,21 @@
+
+// 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;

app/javascript/gabsocial/features/ui/util/intersection_observer_wrapper.js

@@ -0,0 +1,57 @@
+// 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;

app/javascript/gabsocial/features/ui/util/optional_motion.js

@@ -0,0 +1,5 @@
+import { reduceMotion } from '../../../initial_state';
+import ReducedMotion from './reduced_motion';
+import Motion from 'react-motion/lib/Motion';
+
+export default reduceMotion ? ReducedMotion : Motion;

app/javascript/gabsocial/features/ui/util/react_router_helpers.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Redirect, Route } from 'react-router-dom';
+import ColumnsAreaContainer from '../containers/columns_area_container';
+import ColumnLoading from '../components/column_loading';
+import BundleColumnError from '../components/bundle_column_error';
+import BundleContainer from '../containers/bundle_container';
+import { me } from 'gabsocial/initial_state';
+
+export class WrappedRoute extends React.Component {
+  static propTypes = {
+    component: PropTypes.func.isRequired,
+    page: PropTypes.func,
+    content: PropTypes.node,
+    componentParams: PropTypes.object,
+    layout: PropTypes.object,
+    publicRoute: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    componentParams: {},
+  };
+
+  renderComponent = ({ match }) => {
+    const { component, content, componentParams, layout, page: Page } = this.props;
+
+    if (Page) {
+      return (
+        <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
+          {Component =>
+            (
+                <Page params={match.params} {...componentParams}>
+                  <Component params={match.params} {...componentParams}>
+                    {content}
+                  </Component>
+                </Page>
+            )
+          }
+        </BundleContainer>
+      );
+    }
+
+    return (
+      <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
+        {Component =>
+          (
+            <ColumnsAreaContainer layout={layout}>
+              <Component params={match.params} {...componentParams}>
+                {content}
+              </Component>
+            </ColumnsAreaContainer>
+          )
+        }
+      </BundleContainer>
+    );
+  }
+
+  renderLoading = () => {
+    return <ColumnLoading />;
+  }
+
+  renderError = (props) => {
+    return <BundleColumnError {...props} />;
+  }
+
+  render () {
+    const { component: Component, content, publicRoute, ...rest } = this.props;
+
+    if (!publicRoute && !me) {
+      const actualUrl = encodeURIComponent(this.props.computedMatch.url);
+      return <Route path={this.props.path} component={() => {
+         window.location.href = `/auth/sign_in?redirect_uri=${actualUrl}`;
+         return null;
+       }}/>
+    }
+
+    return <Route {...rest} render={this.renderComponent} />;
+  }
+}

app/javascript/gabsocial/features/ui/util/reduced_motion.js

@@ -0,0 +1,44 @@
+// 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;

app/javascript/gabsocial/features/ui/util/schedule_idle_task.js

@@ -0,0 +1,29 @@
+// 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;