diff --git a/packages/component-library/package.json b/packages/component-library/package.json index 1aaef8805..ac71a8358 100644 --- a/packages/component-library/package.json +++ b/packages/component-library/package.json @@ -13,7 +13,7 @@ "test:watch": "yarn run test -- -w", "lint": "eslint src stories", "storybook": "node scripts/storybook.js", - "start": "node scripts/start.js" + "start": "node scripts/start.js" }, "author": "David Daniel (http://davidedaniel.github.io)", "license": "MIT", @@ -84,6 +84,7 @@ "d3-shape": "^1.0.6", "d3-time-format": "^2.1.3", "deck.gl": "^6.4.7", + "global": "^4.3.2", "emotion": "^10.0.9", "lodash": "^4.17.11", "mapbox-gl": "^0.53.1", diff --git a/packages/component-library/src/CivicSandboxMap/CivicSandboxTooltip.js b/packages/component-library/src/CivicSandboxMap/CivicSandboxTooltip.js index c22ecbbed..93fe02d7c 100644 --- a/packages/component-library/src/CivicSandboxMap/CivicSandboxTooltip.js +++ b/packages/component-library/src/CivicSandboxMap/CivicSandboxTooltip.js @@ -1,6 +1,8 @@ import React from "react"; import { string, number, arrayOf, oneOfType, shape } from "prop-types"; import { css } from "emotion"; +import { get } from "lodash"; +import window from "global/window"; const tooltip = css` font-family: Helvetica, Arial, sans-serif; @@ -21,14 +23,16 @@ const MapTooltip = props => { const { y } = tooltipData; const xPosition = - x < window.innerWidth * 0.66 ? x : x - window.innerWidth * 0.1; + x < get(window, "innerWidth", 1000) * 0.66 + ? x + : x - get(window, "innerWidth", 1000) * 0.1; const yPostition = y < 375 ? y : y - 50; const tooltipContent = tooltipData.content.map(obj => { const value = obj.value ? obj.value : "No Data Available"; return (
- {obj.name + ": " + value.toLocaleString()} + {`${obj.name}: ${value.toLocaleString()}`}
); }); diff --git a/packages/component-library/src/CivicStoryCard/CivicStoryFooter.js b/packages/component-library/src/CivicStoryCard/CivicStoryFooter.js index 197c0b899..ae0967af7 100644 --- a/packages/component-library/src/CivicStoryCard/CivicStoryFooter.js +++ b/packages/component-library/src/CivicStoryCard/CivicStoryFooter.js @@ -2,6 +2,8 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import copy from "copy-to-clipboard"; import { css } from "emotion"; +import { get } from "lodash"; +import window from "global/window"; import CivicStoryLink from "./CivicStoryLink"; import { ICONS } from "../styleConstants"; @@ -53,7 +55,7 @@ export default class StoryFooter extends Component { handleCopy = () => { const { slug } = this.props; // NOTE: we need to make sure this will work on all browsers - copy(`${window.location.origin}/cards/${slug}`); + copy(`${get(window, "location.origin", "")}/cards/${slug}`); this.switchState(MS_TO_SWITCH_TEXT); this.setState({ copied: true }); }; @@ -66,7 +68,8 @@ export default class StoryFooter extends Component { const shareTxt = copied ? "Copied!" : "Share"; // if copied, show Link copied, otherwise, show Share card const shareIcon = copied ? ICONS.check : ICONS.link; const routeOrUndefined = - `${window.location.origin}/cards/${slug}` === window.location.href + `${get(window, "location.origin", "")}/cards/${slug}` === + get(window, "location.href", "") ? undefined : `/cards/${slug}`; const issue = `https://github.com/hackoregon/civic/issues/new?labels=type%3Astory-card&template=story-card-improve.md&title=[FEEDBACK] ${slug}`; diff --git a/packages/component-library/src/HexOverlay/HexOverlay.js b/packages/component-library/src/HexOverlay/HexOverlay.js index 057990b76..1a8fe9fd1 100644 --- a/packages/component-library/src/HexOverlay/HexOverlay.js +++ b/packages/component-library/src/HexOverlay/HexOverlay.js @@ -4,6 +4,8 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import DeckGL, { HexagonLayer } from "deck.gl"; +import window from "global/window"; +import { has } from "lodash"; const elevationScale = { min: 1, max: 50 }; @@ -38,7 +40,8 @@ class HexOverlay extends Component { this._stopAnimate(); // wait 1.5 secs to start animation so that all data are loaded - this.startAnimationTimer = window.setTimeout(this._startAnimate, 1500); + this.startAnimationTimer = + has(window, "setTimeout") && window.setTimeout(this._startAnimate, 1500); } _animateHeight() { @@ -50,12 +53,14 @@ class HexOverlay extends Component { } _startAnimate() { - this.intervalTimer = window.setInterval(this._animateHeight, 20); + this.intervalTimer = + has(window, "setInterval") && window.setInterval(this._animateHeight, 20); } _stopAnimate() { - window.clearTimeout(this.startAnimationTimer); - window.clearTimeout(this.intervalTimer); + has(window, "clearTimeout") && + window.clearTimeout(this.startAnimationTimer); + has(window, "clearTimeout") && window.clearTimeout(this.intervalTimer); } render() { diff --git a/packages/component-library/src/LandingPage/CanvasParticles.js b/packages/component-library/src/LandingPage/CanvasParticles.js index 5c4dde9df..d108f0c5f 100644 --- a/packages/component-library/src/LandingPage/CanvasParticles.js +++ b/packages/component-library/src/LandingPage/CanvasParticles.js @@ -1,8 +1,9 @@ /* Not currently used, updated and moved to 2018 package */ -/* eslint-disable */ import React from "react"; import { css } from "emotion"; +import window from "global/window"; +import { get, has } from "lodash"; const canvasStyles = css` position: fixed; @@ -12,21 +13,21 @@ class CanvasParticles extends React.Component { componentDidMount() { window.requestAnimFrame = (function() { return ( - window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || + get(window, "requestAnimationFrame") || + get(window, "webkitRequestAnimationFrame") || + get(window, "mozRequestAnimationFrame") || + get(window, "oRequestAnimationFrame") || + get(window, "msRequestAnimationFrame") || function(callback) { - window.setTimeout(callback, 1000 / 60); + has(window, "setTimeout") && window.setTimeout(callback, 1000 / 60); } ); })(); const { canvas } = this.refs; const ctx = canvas.getContext("2d"); const img = this.refs.image; - const W = window.innerWidth; - const H = window.innerHeight; + const W = get(window, "innerWidth", 1000); + const H = get(window, "innerHeight", 1000); canvas.width = W * 1.2; canvas.height = H * 1.2; const particleCount = 40; diff --git a/packages/component-library/src/LandingPage/LandingPage.js b/packages/component-library/src/LandingPage/LandingPage.js index d1826597e..d00df8f24 100644 --- a/packages/component-library/src/LandingPage/LandingPage.js +++ b/packages/component-library/src/LandingPage/LandingPage.js @@ -3,6 +3,7 @@ import React from "react"; import { cx, css } from "emotion"; +import window from "global/window"; import { Header, Footer } from "@hackoregon/component-library"; import CanvasParticles from "./CanvasParticles"; diff --git a/packages/component-library/src/MapTooltip/MapTooltip.js b/packages/component-library/src/MapTooltip/MapTooltip.js index a96ce3ef0..7fc329a9d 100644 --- a/packages/component-library/src/MapTooltip/MapTooltip.js +++ b/packages/component-library/src/MapTooltip/MapTooltip.js @@ -1,6 +1,8 @@ import React from "react"; import PropTypes from "prop-types"; import { css } from "emotion"; +import { get } from "lodash"; +import window from "global/window"; const tooltip = css` font-family: Helvetica, Arial, sans-serif; @@ -28,7 +30,9 @@ const MapTooltip = props => { } = props; const xPosition = - x < window.innerWidth * 0.66 ? x : x - window.innerWidth * 0.1; + x < get(window, "innerWidth", 1000) * 0.66 + ? x + : x - get(window, "innerWidth", 1000) * 0.1; const yPostition = y < 375 ? y : y - 50; return ( diff --git a/packages/component-library/src/PullQuote/PullQuote.js b/packages/component-library/src/PullQuote/PullQuote.js index 21a7040d6..06dbb4938 100644 --- a/packages/component-library/src/PullQuote/PullQuote.js +++ b/packages/component-library/src/PullQuote/PullQuote.js @@ -2,6 +2,8 @@ import PropTypes from "prop-types"; import React from "react"; import { css } from "emotion"; import { TwitterShareButton, TwitterIcon } from "react-share"; +import { get } from "lodash"; +import window from "global/window"; const quoteClass = css` font-family: "Merriweather", serif; @@ -30,7 +32,10 @@ const wrapperClass = css` const PullQuote = ({ quoteText, quoteAttribution, url }) => (
- +
“ {quoteText} diff --git a/packages/component-library/src/Share/ShareCollection.js b/packages/component-library/src/Share/ShareCollection.js index 8932d1ea2..f3754d6b2 100644 --- a/packages/component-library/src/Share/ShareCollection.js +++ b/packages/component-library/src/Share/ShareCollection.js @@ -4,6 +4,9 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import copy from "copy-to-clipboard"; +import { get } from "lodash"; +import window from "global/window"; + import StoryLink from "../StoryCard/StoryLink"; import { ICONS } from "../styleConstants"; @@ -29,7 +32,7 @@ export default class ShareCollection extends Component { handleCopy = () => { // NOTE: we need to make sure this will work on all browsers - copy(`${window.location.href}`); + copy(`${get(window, "location.href", "")}`); this.switchState(MS_TO_SWITCH_TEXT); this.setState({ copied: true }); }; diff --git a/packages/component-library/src/StoryCard/StoryFooter.js b/packages/component-library/src/StoryCard/StoryFooter.js index 492a05902..b3683b31a 100644 --- a/packages/component-library/src/StoryCard/StoryFooter.js +++ b/packages/component-library/src/StoryCard/StoryFooter.js @@ -5,6 +5,9 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import copy from "copy-to-clipboard"; import { css } from "emotion"; +import { get } from "lodash"; +import window from "global/window"; + import StoryLink from "./StoryLink"; import { ICONS } from "../styleConstants"; @@ -43,7 +46,7 @@ export default class StoryFooter extends Component { handleCopy = () => { const { collectionId, cardId } = this.props; // NOTE: we need to make sure this will work on all browsers - copy(`${window.location.origin}/${collectionId}/${cardId}`); + copy(`${get(window, "location.href", "")}/${collectionId}/${cardId}`); this.switchState(MS_TO_SWITCH_TEXT); this.setState({ copied: true }); };