\r\n \r\n scrollToElement(\r\n document.getElementById(\"hvilke-selskaper-er-involvert\")\r\n )\r\n }\r\n >\r\n {english\r\n ? \"Which companies are involved?\"\r\n : \"Hvilke selskaper er involverte?\"}\r\n \r\n \r\n scrollToElement(document.getElementById(\"om_okkupasjonen\"))\r\n }\r\n >\r\n {english ? \"About the occupation\" : \"Om okkupasjonen\"}\r\n \r\n scrollToElement(document.getElementById(\"om_kampanjen\"))}\r\n >\r\n {english ? \"About the campagin\" : \"Om kampanjen\"}\r\n \r\n \r\n scrollToElement(document.getElementById(\"om_oljefondet\"))\r\n }\r\n >\r\n {english ? \"About the oil fund\" : \"Om oljefondet\"}\r\n \r\n \r\n scrollToElement(document.getElementById(\"hva_sier_partiene\"))\r\n }\r\n >\r\n {english ? \"What do Norway's political parties say?\" : \"Hva sier partiene\"}\r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport AppBar from \"@material-ui/core/AppBar\";\r\nimport Toolbar from \"@material-ui/core/Toolbar\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Drawer from \"@material-ui/core/Drawer\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\n// @material-ui/icons\r\nimport Menu from \"@material-ui/icons/Menu\";\r\nimport Close from \"@material-ui/icons/Close\";\r\n// core components\r\nimport styles from \"assets/jss/material-kit-react/components/headerStyle.js\";\r\n\r\nimport { ffLogoHvit, nfLogoHvit } from \"components/Logos.js\";\r\nimport MobileMenuLinks from \"../../components/MobileMenuLinks/MobileMenuLinks\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Header(props) {\r\n const classes = useStyles();\r\n const [mobileOpen, setMobileOpen] = React.useState(false);\r\n React.useEffect(() => {\r\n if (props.changeColorOnScroll) {\r\n window.addEventListener(\"scroll\", headerColorChange);\r\n }\r\n return function cleanup() {\r\n if (props.changeColorOnScroll) {\r\n window.removeEventListener(\"scroll\", headerColorChange);\r\n }\r\n };\r\n });\r\n const handleDrawerToggle = () => {\r\n setMobileOpen(!mobileOpen);\r\n };\r\n const headerColorChange = () => {\r\n const { color, changeColorOnScroll } = props;\r\n const windowsScrollTop = window.pageYOffset;\r\n if (windowsScrollTop > changeColorOnScroll.height) {\r\n document.body\r\n .getElementsByTagName(\"header\")[0]\r\n .classList.remove(classes[color]);\r\n document.body\r\n .getElementsByTagName(\"header\")[0]\r\n .classList.add(classes[changeColorOnScroll.color]);\r\n } else {\r\n document.body\r\n .getElementsByTagName(\"header\")[0]\r\n .classList.add(classes[color]);\r\n document.body\r\n .getElementsByTagName(\"header\")[0]\r\n .classList.remove(classes[changeColorOnScroll.color]);\r\n }\r\n };\r\n const {\r\n color,\r\n rightLinks,\r\n leftLinks,\r\n fixed,\r\n absolute,\r\n forwardedRef,\r\n mobileLanguageButton,\r\n english,\r\n } = props;\r\n const appBarClasses = classNames({\r\n [classes.appBar]: true,\r\n [classes[color]]: color,\r\n [classes.absolute]: absolute,\r\n [classes.fixed]: fixed,\r\n });\r\n\r\n const renderLogos = () => {\r\n return (\r\n \r\n {leftLinks !== undefined ? (\r\n
\r\n {leftLinks}
\r\n ) : (\r\n brandComponent\r\n )}\r\n {rightLinks}
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {mobileLanguageButton}\r\n
\r\n \r\n \r\n {!success && (\r\n \r\n {(captchaError &&\r\n (english\r\n ? \"Confirm that you're not a robot\"\r\n : \"Bekreft at du ikke er en robot\")) ||\r\n \" \"}\r\n \r\n \r\n
\r\n\r\n \r\n {generalError ||\r\n (nameError || emailError\r\n ? english\r\n ? \"Remember to fill out all the fields \"\r\n : \"Husk å fylle ut alle feltene\"\r\n : \" \")}\r\n \r\n {success ? (\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nEmailSection.propTypes = {\r\n english: PropTypes.bool,\r\n};\r\n\r\nexport default EmailSection;\r\n","import * as d3 from 'd3';\r\n// import \"./tooltip.css\";\r\n\r\nfunction floatingTooltip(tooltipId, width) {\r\n const tt = d3\r\n .select('body')\r\n .append('div')\r\n .attr('class', 'tooltip')\r\n .attr('id', tooltipId)\r\n .style('pointer-events', 'none')\r\n .style('position', 'absolute')\r\n .style('top', '100px')\r\n .style('left', '100px')\r\n .style('border', '1px solid #ccc')\r\n .style('background', '#fff')\r\n .style('color', '#485465')\r\n .style('padding', '10px')\r\n .style('width', '300px')\r\n .style('font-size', '14px')\r\n .style('z-index', '10')\r\n .style('max-width', '80px');\r\n\r\n if (width) {\r\n tt.style('width', '130px');\r\n }\r\n\r\n hideTooltip();\r\n function showTooltip(content, event) {\r\n tt.style('opacity', 1.0).html(content);\r\n\r\n updatePosition(event);\r\n }\r\n\r\n function hideTooltip() {\r\n tt.style('opacity', 0.0);\r\n }\r\n\r\n function updatePosition(event) {\r\n const xOffset = 20;\r\n const yOffset = 10;\r\n\r\n const ttw = tt.style('width');\r\n const tth = tt.style('height');\r\n\r\n const wscrY = window.scrollY;\r\n const wscrX = window.scrollX;\r\n\r\n const curX = document.all ? event.clientX + wscrX : event.pageX;\r\n const curY = document.all ? event.clientY + wscrY : event.pageY;\r\n let ttleft =\r\n curX - wscrX + xOffset * 2 + ttw > window.innerWidth\r\n ? curX - ttw - xOffset * 2\r\n : curX + xOffset;\r\n\r\n if (ttleft < wscrX + xOffset) {\r\n ttleft = wscrX + xOffset;\r\n }\r\n\r\n let tttop =\r\n curY - wscrY + yOffset * 2 + tth > window.innerHeight\r\n ? curY - tth - yOffset * 2\r\n : curY + yOffset;\r\n\r\n if (tttop < wscrY + yOffset) {\r\n tttop = curY + yOffset;\r\n }\r\n\r\n tt.style('top', `${tttop}px`).style('left', `${ttleft}px`);\r\n }\r\n\r\n return {\r\n showTooltip,\r\n hideTooltip,\r\n updatePosition\r\n };\r\n}\r\n\r\nconst tooltip = floatingTooltip('gates_tooltip', 240);\r\nexport default tooltip;\r\n","import React from \"react\";\r\nimport * as d3 from \"d3\";\r\nimport tooltip from \"./tooltip\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nexport default class Bubbles extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n const { forceStrength, center } = props;\r\n this.renderBubbles = this.renderBubbles.bind(this);\r\n this.simulation = d3\r\n .forceSimulation()\r\n .velocityDecay(0.2)\r\n .force(\"x\", d3.forceX().strength(forceStrength).x(center.x))\r\n .force(\"y\", d3.forceY().strength(forceStrength).y(center.y))\r\n .force(\"charge\", d3.forceManyBody().strength(this.charge.bind(this)))\r\n .on(\"tick\", this.ticked.bind(this))\r\n .stop();\r\n }\r\n\r\n state = {\r\n g: null,\r\n selected: null,\r\n };\r\n\r\n onRef = (ref) => {\r\n this.setState(\r\n {\r\n g: d3.select(ref),\r\n },\r\n () => this.renderBubbles()\r\n );\r\n };\r\n\r\n ticked = () => {\r\n this.state.g\r\n .selectAll(\".bubble\")\r\n .attr(\"cx\", (d) => d.x)\r\n .attr(\"cy\", (d) => d.y);\r\n this.state.g\r\n .selectAll(\".label\")\r\n .attr(\"transform\", (d) => `translate(${d.x || 0}, ${d.y || 0})`);\r\n };\r\n\r\n charge = (d) => {\r\n let { keepPositionIntactMultiplier } = this.props,\r\n multiplier = Math.random() * (2.2 - 2.1) + 2.1;\r\n if (keepPositionIntactMultiplier) multiplier = keepPositionIntactMultiplier;\r\n\r\n return -this.props.forceStrength * d.radius ** multiplier;\r\n\r\n // return -this.props.forceStrength * d.radius ** 2.06;\r\n };\r\n\r\n onClick = (d) => {\r\n this.setState({ selected: d.index });\r\n showDetailLabelHover(d, d.index, this.state.g);\r\n this.props.onClickCallBack(d);\r\n };\r\n\r\n renderBubbles() {\r\n const bubbles = this.state.g\r\n .selectAll(\".bubble\")\r\n .data(this.props.data, (d) => d.id);\r\n\r\n bubbles.exit().remove();\r\n\r\n const bubblesE = bubbles\r\n .enter()\r\n .append(\"a\")\r\n .attr(\"xlink:href\", (d) => d.link)\r\n .append(\"circle\")\r\n .classed(\"bubble\", true)\r\n .attr(\"r\", 0)\r\n .attr(\"cx\", (d) => d.x)\r\n .attr(\"cy\", (d) => d.y)\r\n .attr(\"fill\", (d) => d.color)\r\n .on(\"mouseover\", showDetail)\r\n .on(\"mouseout\", hideDetail)\r\n .on(\"click\", this.onClick);\r\n\r\n const labels = bubbles\r\n .enter()\r\n .append(\"text\")\r\n .attr(\"dy\", \"-0.5em\")\r\n .on(\"click\", this.onClick)\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"fill\", findColor)\r\n .classed(\"label\", true)\r\n .text((d) => {\r\n if (d.radius > 20) {\r\n if (d.name.length < 25) {\r\n return d.name.split(\" \")[0];\r\n }\r\n }\r\n });\r\n bubbles\r\n .enter()\r\n .append(\"text\")\r\n .on(\"click\", this.onClick)\r\n .attr(\"dy\", \"0.5em\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"fill\", findColor)\r\n .classed(\"label\", true)\r\n .text((d) => {\r\n if (d.radius > 20) {\r\n if (d.name.length < 25) {\r\n const split = d.name.split(\" \");\r\n if (split.length > 1) {\r\n return split[1];\r\n } else {\r\n return \"\";\r\n }\r\n }\r\n }\r\n });\r\n\r\n bubbles\r\n .enter()\r\n .append(\"text\")\r\n .on(\"click\", this.onClick)\r\n .attr(\"dy\", \"1.3em\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"fill\", findColor)\r\n .classed(\"label\", true)\r\n .text((d) => {\r\n if (d.radius > 20) {\r\n if (d.name.length < 25) {\r\n const split = d.name.split(\" \");\r\n if (split.length > 2) {\r\n split.splice(0, 2);\r\n return split.join(\" \");\r\n } else {\r\n return \"\";\r\n }\r\n }\r\n }\r\n });\r\n\r\n labels.transition().duration(0);\r\n bubblesE\r\n .transition()\r\n .duration(0)\r\n .attr(\"r\", (d) => d.radius)\r\n .on(\"end\", () => {\r\n this.simulation.nodes(this.props.data).alpha(1).restart();\r\n });\r\n }\r\n\r\n render() {\r\n return \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {english ? \"Thank you for caring\" : \"Takk for at du bryr deg\"}\r\n {isModal ? (\r\n \r\n
\r\n \r\n {english\r\n ? \"You're sending this message to\"\r\n : \"Du sender denne meldingen til\"}\r\n
\r\n\r\n {english\r\n ? \"The Norwegian minister of finance, the Norwegian oil fund, the fund’s Council on Ethics, and the Norwegian parliament’s standing committee on finance and economic affairs\"\r\n : \"Oljefondet, Finansdepartementet, Etikkrådet og Finanskomiteen.\"}\r\n
\r\n\r\n {english\r\n ? \"Your name and email address\"\r\n : \"Ditt navn og e-postadresse\"}\r\n
\r\n\r\n {english\r\n ? \"Your name and email address will only be visible to the recipients of this email. We'll never share your details with anyone else.\"\r\n : \"Navnet ditt og din e-postadresse vises kun til Oljefondet, Finansdepartementet, Etikkrådet og Finanskomiteen. Vi deler den ikke med noen andre!\"}\r\n
\r\n\r\n {english\r\n ? \"Your letter to the recipients\"\r\n : \"Ditt brev til mottakerene\"}\r\n
\r\n\r\n {english ? \"Dear Sir/Madam,\" : \"Hei,\"}\r\n
\r\n\r\n {english\r\n ? \"I have learnt from the oil fund campaign website of the Norwegian Union of Municipal and General Employees and Norwegian People's Aid that the fund is investing in companies that contribute to violations of international law and human rights in the occupied Palestinian territory.\"\r\n : \"Midlene i Oljefondet er det norske folks sparepenger. Jeg har via kampanjesiden til Fagforbundet og Norsk Folkehjelp fatt vite at dere investerer i selskaper som medvirker til brudd på folkeretten og menneskerettigheter på okkupert palestinsk område.\"}\r\n
\r\n\r\n {english\r\n ? \"I find this disappointing. I have therefore signed up to this petition to show that I care. I do not want the oil fund to invest in these companies. I ask you to work to improve practice in this area.\"\r\n : \"Det syns jeg er skuffende. Jeg har derfor meldt meg på dette oppropet for å vise at jeg bryr meg. Jeg ønsker ikke at Oljefondet skal investerer i slike selskaper. Jeg ber dere arbeide med å forbedre praksis på dette området.\"}\r\n
\r\n\r\n {english ? \"Yours faithfully,\" : \"Med vennlig hilsen\"}\r\n
\r\n {name || (english ? \"[Your name]\" : \"[ditt navn]\")}
\r\n {email || (english ? \"[Your email address]\" : \"[din e-postadresse]\")}\r\n
\r\n
\r\n
\r\n
\r\n ) : (\r\n <>\r\n \r\n {english\r\n ? \"Thanks for participating!\"\r\n : \"Takk for din deltakelse!\"}\r\n
\r\n \r\n {english ? \"Send email\" : \"Send epost\"}\r\n
\r\n\r\n \r\n
\r\n `;\r\n tooltip.showTooltip(content, d3.event);\r\n}\r\n\r\nexport function hideDetail(d) {\r\n d3.select(this).attr(\"fill\", d3.rgb(d.color));\r\n if (!d.tooltip) return;\r\n tooltip.hideTooltip();\r\n}\r\nexport function showDetailLabelHover(d, index, g) {\r\n let elem = g.selectAll(\".bubble\").filter(function (d, i) {\r\n return i === index;\r\n });\r\n elem.attr(\"fill\", d3.rgb(d.color).darker(0.5));\r\n if (!d.tooltip) return;\r\n const content = `${d.tooltip}
`;\r\n tooltip.showTooltip(content, d3.event);\r\n}\r\n\r\nexport function hideDetailLabelHover(d) {\r\n if (!d.tooltip) return;\r\n tooltip.hideTooltip();\r\n}\r\n\r\nBubbles.propTypes = {\r\n forceStrength: PropTypes.number,\r\n center: PropTypes.object,\r\n onClickCallBack: PropTypes.func,\r\n keepPositionIntactMultiplier: PropTypes.number,\r\n data: PropTypes.array,\r\n};\r\n","import React from \"react\";\r\nimport Bubbles from \"./bubbles\";\r\nimport PropTypes from \"prop-types\";\r\nimport \"../../assets/scss/general.scss\";\r\n\r\nclass ReactBubbleChart extends React.Component {\r\n render() {\r\n const {\r\n data,\r\n width,\r\n height,\r\n center,\r\n onClickCallBack,\r\n forceStrength,\r\n keepPositionIntactMultiplier,\r\n } = this.props;\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nReactBubbleChart.defaultProps = {\r\n data: [],\r\n width: 400,\r\n height: 250,\r\n center: { x: 200, y: 125 },\r\n title: \"React Bubble Chart\",\r\n forceStrength: 0.06,\r\n keepPositionIntactMultiplier: 2.09,\r\n};\r\nReactBubbleChart.propTypes = {\r\n width: PropTypes.number.isRequired,\r\n height: PropTypes.number.isRequired,\r\n center: PropTypes.object,\r\n title: PropTypes.string.isRequired,\r\n forceStrength: PropTypes.number.isRequired,\r\n data: PropTypes.array.isRequired,\r\n onClickCallBack: PropTypes.func,\r\n keepPositionIntactMultiplier: PropTypes.number,\r\n};\r\nexport default ReactBubbleChart;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport \"../../../assets/scss/general.scss\";\r\n\r\nconst BubbleInfoSection = ({ title, info, investment }) => {\r\n return (\r\n
\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nBubbleInfoSection.propTypes = {\r\n info: PropTypes.string,\r\n investment: PropTypes.string,\r\n title: PropTypes.string,\r\n};\r\n\r\nexport default BubbleInfoSection;\r\n","import React from \"react\";\r\nimport ReactBubbleChart from \"../../../components/Bubble/index\";\r\nimport PropTypes from \"prop-types\";\r\nimport BubbleInfoSection from \"./BubbleInfoSection\";\r\n\r\nconst BubbleSection = ({\r\n doc,\r\n info,\r\n onClickCallBack,\r\n english,\r\n investment,\r\n title,\r\n}) => {\r\n let largestBubble = 0;\r\n const themes = {\r\n Industri: \"#D2190B\",\r\n Industrials: \"#D2190B\",\r\n Telekommunikasjon: \"#F35037\",\r\n Telecommunications: \"#F35037\",\r\n Technology: \"#F35E37\",\r\n Energy: \"#F26B38\",\r\n \"Consumer services\": \"#F27938\",\r\n Financials: \"#F18639\",\r\n \"Basic materials\": \"#F19439\",\r\n \"Consumer goods\": \"#F0A13A\",\r\n };\r\n\r\n const parseBubbles = (english) => {\r\n var bubblesToReturn = [];\r\n if (doc != null) {\r\n if (english) {\r\n doc.forEach((bubble) => {\r\n if (bubble.investment_size_usd.length) {\r\n const value = bubble.involvement * 6.5;\r\n largestBubble = Math.max(value, largestBubble);\r\n if (!isNaN(value)) {\r\n bubblesToReturn.push({\r\n [bubble.title[0].text]: value,\r\n sector: bubble.sector[0].text,\r\n });\r\n }\r\n }\r\n });\r\n } else {\r\n doc.forEach((bubble) => {\r\n if (bubble.investment_size.length) {\r\n const value = bubble.involvement * 6.5;\r\n largestBubble = Math.max(value, largestBubble);\r\n if (!isNaN(value)) {\r\n bubblesToReturn.push({\r\n [bubble.title[0].text]: value,\r\n sector: bubble.sector[0].text,\r\n });\r\n }\r\n }\r\n });\r\n }\r\n }\r\n return bubblesToReturn;\r\n };\r\n\r\n // const scaleBubbles = (bubbles) => {\r\n // var bubblesToReturn = [];\r\n // if (bubbles.length) {\r\n // bubblesToReturn = bubbles.map((bubble) => {\r\n // const currentBubbleKey = Object.keys(bubble)[0];\r\n // const scaledValue = Math.min(\r\n // 90,\r\n // Math.max(15, (Object.values(bubble)[0] / largestBubble) * 100)\r\n // );\r\n // return { [currentBubbleKey]: scaledValue, sector: bubble.sector };\r\n // });\r\n // return bubblesToReturn;\r\n // }\r\n // };\r\n\r\n const allBubbles = parseBubbles(english);\r\n //const scaledBubbles = scaleBubbles(allBubbles);\r\n return (\r\n {title}
\r\n\r\n {investment}\r\n
\r\n\r\n {info.map((bubble, index) => (\r\n
\r\n \r\n {bubble.text}\r\n
\r\n ))}\r\n\r\n {expandList && (\r\n \r\n setExpandList(false)}>\r\n \r\n \r\n )}\r\n {doc &&\r\n doc.map((item, index) => (\r\n \r\n \r\n \r\n {expandList && (\r\n
\r\n );\r\n};\r\n\r\nListSection.propTypes = {\r\n doc: PropTypes.array,\r\n english: PropTypes.bool,\r\n handleScroll: PropTypes.func,\r\n};\r\n\r\nexport default ListSection;\r\n","import { title, container } from \"assets/jss/material-kit-react.js\";\r\n\r\nconst productStyle = {\r\n rootContainer: {\r\n textAlign: \"center\",\r\n backgroundColor: \"black\",\r\n color: \"white\",\r\n },\r\n section: {\r\n minHeight: \"100vh\",\r\n padding: \"5px 0\",\r\n textAlign: \"center\",\r\n backgroundColor: \"clear\",\r\n color: \"white\",\r\n position: \"relative\",\r\n zIndex: \"2\",\r\n },\r\n imgContainer: {\r\n width: \"100%\",\r\n height: \"100vh\",\r\n backgroundImage:\r\n \"linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(\" +\r\n require(\"assets/img/barn.jpg\") +\r\n \")\",\r\n backgroundSize: \"cover\",\r\n backgroundRepeat: \"no-repeat\",\r\n backgroundPosition: \"center\",\r\n position: \"absolute\",\r\n zIndex: \"1\",\r\n opacity: \"0.2\",\r\n },\r\n bubbleSectionTitle: {\r\n color: \"white\",\r\n fontSize: \"32px\",\r\n fontWeight: \"400\",\r\n textAlign: \"left\",\r\n paddingInline: \"24px\",\r\n fontFamily: `\"Roboto Slab\", \"Times New Roman\", serif`,\r\n \"@media (min-width: 400px)\": {\r\n fontSize: \"34px\",\r\n textAlign: \"left\",\r\n paddingInline: \"52px\",\r\n },\r\n \"@media (min-width: 960px)\": {\r\n fontSize: \"40px\",\r\n textAlign: \"center\",\r\n paddingInline: \"48px\",\r\n },\r\n },\r\n container,\r\n card: {\r\n width: \"500px\",\r\n backgroundColor: \"white\",\r\n borderRadius: \"1em\",\r\n margin: \"30px\",\r\n padding: \"1em\",\r\n textAlign: \"left\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n },\r\n title: {\r\n ...title,\r\n marginBottom: \"1rem\",\r\n marginTop: \"30px\",\r\n minHeight: \"32px\",\r\n textDecoration: \"none\",\r\n },\r\n description: {\r\n color: \"#999\",\r\n },\r\n titleContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n checkboxContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n },\r\n marginRight: {\r\n marginRight: \"7px\",\r\n },\r\n sendButton: {\r\n border: \"1px solid black\",\r\n alignSelf: \"center\",\r\n },\r\n inputContainer: {\r\n display: \"flex\",\r\n },\r\n scrollButton: {\r\n position: \"sticky\",\r\n float: \"right\",\r\n bottom: \"0\",\r\n zIndex: \"999\",\r\n },\r\n};\r\n\r\nexport default productStyle;\r\n","import { Box } from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useCallback, useRef } from \"react\";\r\nimport BubbleSection from \"./BubbleSection\";\r\nimport ListSection from \"./ListSection\";\r\nimport PropTypes from \"prop-types\";\r\nimport { makeStyles } from \"@material-ui/core\";\r\nimport styles from \"assets/jss/material-kit-react/views/landingPageSections/bubbleStyle.js\";\r\nimport classNames from \"classnames\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport useWindowSize from \"useWindowSize\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst BubbleControlSection = ({ doc, english, scrollToElement, id }) => {\r\n const [bubbles, setBubbles] = useState(false);\r\n const [bubbleInfo, setBubbleInfo] = useState(null);\r\n const [bubbleName, setBubbleName] = useState(null);\r\n const [investment, setInvestment] = useState(null);\r\n const [lastBubbleClicked, setLastBubbleClicked] = useState(null);\r\n const classes = useStyles();\r\n const { width } = useWindowSize();\r\n\r\n const findTranslatedBubble = useCallback(() => {\r\n let bobb = [];\r\n doc.forEach((item) => {\r\n if (item.title[0].text === lastBubbleClicked) {\r\n if (english) {\r\n bobb = item.english_text;\r\n } else {\r\n bobb = item.text;\r\n }\r\n }\r\n });\r\n return bobb;\r\n }, [doc, lastBubbleClicked, english]);\r\n\r\n const titleRef = useRef();\r\n\r\n const handleScroll = () => {\r\n scrollToElement(titleRef.current);\r\n };\r\n\r\n const handleBubbleClick = useCallback(\r\n (bubble) => {\r\n let found = false;\r\n doc.forEach((item) => {\r\n if (item.title[0].text === bubble.name) {\r\n found = true;\r\n\r\n setInvestment(\r\n english\r\n ? item.investment_size_usd[0].text\r\n : item.investment_size[0].text\r\n );\r\n setBubbleName(bubble.name);\r\n setLastBubbleClicked(item.title[0].text);\r\n }\r\n });\r\n if (!found) {\r\n setInvestment(null);\r\n setLastBubbleClicked(null);\r\n }\r\n },\r\n [doc, setInvestment, setLastBubbleClicked, english, setBubbleName]\r\n );\r\n\r\n useEffect(() => {\r\n if (doc != null && lastBubbleClicked != null) {\r\n const translatedBubble = findTranslatedBubble();\r\n setBubbleInfo(translatedBubble);\r\n }\r\n }, [doc, lastBubbleClicked, findTranslatedBubble]);\r\n\r\n useEffect(() => {\r\n if (lastBubbleClicked != null) {\r\n handleBubbleClick({ name: lastBubbleClicked });\r\n setBubbleInfo(findTranslatedBubble());\r\n }\r\n }, [english, lastBubbleClicked, findTranslatedBubble, handleBubbleClick]);\r\n\r\n const compact = isMobile || width <= 800;\r\n\r\n return (\r\n \r\n {expandList ? (\r\n
\r\n ))}\r\n \r\n {english ? (\r\n <>\r\n \r\n {item.investment_size_usd[0].text}\r\n \r\n \r\n {item.english_text[0].text}\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n {item.investment_size[0].text}\r\n \r\n \r\n {item.text[0].text}\r\n \r\n \r\n )}\r\n
\r\n ) : (\r\n index < 2 && (\r\n \r\n {item.title[0].text}\r\n
\r\n\r\n {item.title[0].text}\r\n
\r\n\r\n {english ? (\r\n <>\r\n \r\n {item.investment_size_usd[0].text}\r\n \r\n \r\n {item.english_text[0].text}\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n {item.investment_size[0].text}\r\n \r\n \r\n {item.text[0].text}\r\n \r\n \r\n )}\r\n
\r\n )\r\n )}\r\n \r\n {item.title[0].text}\r\n
\r\n\r\n {item.title[0].text}\r\n
\r\n\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nBubbleControlSection.propTypes = {\r\n doc: PropTypes.array,\r\n english: PropTypes.bool,\r\n scrollToElement: PropTypes.func,\r\n};\r\n\r\nexport default BubbleControlSection;\r\n","import { container, title } from \"assets/jss/material-kit-react.js\";\r\n\r\nconst aboutStyle = {\r\n container: {\r\n zIndex: \"12\",\r\n color: \"#FFFFFF\",\r\n ...container,\r\n },\r\n title: {\r\n ...title,\r\n display: \"inline-block\",\r\n position: \"relative\",\r\n marginTop: \"30px\",\r\n minHeight: \"32px\",\r\n color: \"#FFFFFF\",\r\n textDecoration: \"none\",\r\n },\r\n infoTitle: {\r\n ...title,\r\n display: \"inline-block\",\r\n position: \"relative\",\r\n marginTop: \"30px\",\r\n minHeight: \"32px\",\r\n color: \"red\",\r\n textDecoration: \"none\",\r\n margin: \"auto\",\r\n },\r\n title_black: {\r\n ...title,\r\n display: \"inline-block\",\r\n position: \"relative\",\r\n marginTop: \"30px\",\r\n minHeight: \"32px\",\r\n color: \"#000000\",\r\n textDecoration: \"none\",\r\n },\r\n subtitle: {\r\n fontSize: \"1.313rem\",\r\n maxWidth: \"500px\",\r\n margin: \"10px auto 0\",\r\n },\r\n main: {\r\n background: \"#000000\",\r\n position: \"relative\",\r\n zIndex: \"3\",\r\n },\r\n aboutSection: {\r\n height: \"100%\",\r\n color: \"white\",\r\n display: \"inline-grid\",\r\n textAlign: \"center\",\r\n position: \"relative\",\r\n zIndex: \"3\",\r\n },\r\n description: {\r\n textAlign: \"left\",\r\n columnCount: \"1\",\r\n color: \"white\",\r\n },\r\n mobileDescription: {\r\n textAlign: \"left\",\r\n color: \"white\",\r\n },\r\n imgContainer: {\r\n paddingTop: \"3vh\",\r\n backgroundSize: \"cover\",\r\n backgroundAttachment: \"fixed\",\r\n backgroundRepeat: \"no-repeat\",\r\n backgroundPosition: \"center\",\r\n // padding: \"5px\",\r\n zIndex: \"9999\",\r\n \"@media (min-width: 768px)\": {\r\n backgroundImage:\r\n \"linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.99)),url(\" +\r\n require(\"assets/img/barn_gjerde.jpg\") +\r\n \")\",\r\n },\r\n },\r\n item: {\r\n fontSize: \"18px\",\r\n \"@media (min-width: 600px)\": {\r\n fontSize: \"20px\",\r\n },\r\n lineHeight: \"1.75rem\",\r\n pageBreakInside: \"avoid\",\r\n },\r\n mobileItem: {\r\n fontSize: \"18px\",\r\n lineHeight: \"1.75rem\",\r\n },\r\n mobileContainer: {\r\n paddingBottom: \"3vh\",\r\n },\r\n aboutContainer: {\r\n marginLeft: \"auto\",\r\n marginRight: \"auto\",\r\n maxWidth: \"80ch\",\r\n padding: \"0 24px\",\r\n \"@media (min-width: 400px)\": {\r\n padding: \"0 3rem\",\r\n },\r\n },\r\n aboutTitle: {\r\n marginBottom: \"2.5vh\",\r\n textAlign: \"left\",\r\n color: \"white\",\r\n fontSize: \"34px\",\r\n fontWeight: \"400\",\r\n fontFamily: `\"Roboto Slab\", \"Times New Roman\", serif`,\r\n \"@media (min-width: 600px)\": {\r\n fontSize: \"38px\",\r\n },\r\n \"@media (min-width: 960px)\": {\r\n fontSize: \"40px\",\r\n },\r\n \"@media (min-width: 768px)\": {\r\n marginTop: \"3vh\",\r\n },\r\n },\r\n mainRow: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\",\r\n width: \"100%\",\r\n },\r\n\r\n mainColumn: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n flexBasis: \"100%\",\r\n flex: \"1\",\r\n },\r\n readMore: {\r\n textAlign: \"left\",\r\n padding: \"2px\",\r\n margin: \"0px\",\r\n background: \"none\",\r\n border: \"none\",\r\n cursor: \"pointer\",\r\n fontSize: \"1.3rem\",\r\n color: \"#F7776E\",\r\n \"&:hover\": {\r\n color: \"white\",\r\n },\r\n hideItem: {\r\n display: \"none\",\r\n },\r\n },\r\n\r\n aboutImgWrapper: {\r\n width: \"100vw\",\r\n display: \"none\",\r\n \"@media (max-width: 768px)\": {\r\n display: \"block\",\r\n },\r\n margin: \"0px\",\r\n position: \"relative\",\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\",\r\n marginTop: \"3vh\",\r\n },\r\n\r\n aboutImage: {\r\n width: \"100vw\",\r\n maxWidth: \"100vw\",\r\n maxHeight: \"360px\",\r\n objectFit: \"cover\",\r\n },\r\n aboutImgCaption: {\r\n color: \"#ababab\",\r\n textAlign: \"right\",\r\n marginTop: \"4px\",\r\n padding: \"0 24px\",\r\n fontSize: \"14px\",\r\n \"@media (min-width: 400px)\": {\r\n padding: \"0 48px\",\r\n },\r\n },\r\n};\r\n\r\nexport default aboutStyle;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { accessDocument } from \"../../../prismicApi\";\r\nimport styles from \"assets/jss/material-kit-react/views/landingPageSections/aboutStyle.js\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport PropTypes from \"prop-types\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport useWindowSize from \"useWindowSize\";\r\nimport * as Fathom from \"fathom-client\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst AboutText = ({\r\n english,\r\n section,\r\n imageSource,\r\n imageCredit,\r\n imageAlt,\r\n}) => {\r\n const classes = useStyles();\r\n const [doc, setDoc] = useState(null);\r\n const { width } = useWindowSize();\r\n const [expandSection, setExpandSection] = useState(false);\r\n\r\n const handleToggle = async (bool) => {\r\n if (bool) {\r\n Fathom.trackGoal(\"GHMQAK4Q\", 0);\r\n }\r\n setExpandSection(bool);\r\n };\r\n useEffect(() => {\r\n accessDocument(section).then((result) => setDoc(result));\r\n }, [section]);\r\n\r\n return (\r\n \r\n \r\n {bubbles && !compact ? (\r\n
\r\n \r\n \r\n setBubbles(true)}\r\n >\r\n {english ? \"View Bubbles\" : \"Se Bobler\"}\r\n \r\n setBubbles(false)}\r\n >\r\n {english ? \"View List\" : \"Se Liste\"}\r\n \r\n \r\n )}\r\n
\r\n \r\n {english\r\n ? \"Which companies are involved\"\r\n : \"Hvilke selskaper er involverte?\"}\r\n
\r\n {!compact && (\r\n\r\n \r\n 
\r\n \r\n {english ? \"Photo: \" : \"Foto: \"}\r\n {imageCredit}\r\n \r\n \r\n\r\n \r\n 1000\r\n ? classes.description\r\n : classes.mobileDescription\r\n }\r\n >\r\n {english\r\n ? doc &&\r\n doc.length !== 0 &&\r\n doc[0].english_text.map((item, index) => {\r\n if (expandSection) {\r\n return (\r\n \r\n {item.text}\r\n {index === doc[0].english_text.length - 1 && (\r\n handleToggle(!expandSection)}\r\n >\r\n {expandSection\r\n ? english\r\n ? \"\\nMinimize\"\r\n : \"\\nMinimer\"\r\n : english\r\n ? \"\\nRead more\"\r\n : \"\\nLes mer\"}\r\n \r\n )}\r\n \r\n );\r\n } else {\r\n if (index <= 4) {\r\n return (\r\n \r\n {item.text}\r\n {index === 4 && doc[0].english_text.length > 1 && (\r\n handleToggle(!expandSection)}\r\n >\r\n {expandSection\r\n ? english\r\n ? \"\\nMinimize\"\r\n : \"\\nMinimer\"\r\n : english\r\n ? \"\\nRead more\"\r\n : \"\\nLes mer\"}\r\n \r\n )}\r\n \r\n );\r\n }\r\n }\r\n return ;\r\n })\r\n : doc &&\r\n doc.length !== 0 &&\r\n doc[0].text.map((item, index) => {\r\n if (expandSection) {\r\n return (\r\n \r\n {item.text}\r\n {index === doc[0].text.length - 1 && (\r\n handleToggle(!expandSection)}\r\n >\r\n {expandSection\r\n ? english\r\n ? \"\\nMinimize\"\r\n : \"\\nMinimer\"\r\n : english\r\n ? \"\\nRead more\"\r\n : \"\\nLes mer\"}\r\n \r\n )}\r\n \r\n );\r\n } else {\r\n if (index <= 4) {\r\n return (\r\n \r\n {item.text}\r\n {index === 4 && doc[0].text.length > 1 && (\r\n handleToggle(!expandSection)}\r\n >\r\n {expandSection\r\n ? english\r\n ? \"\\nMinimize\"\r\n : \"\\nMinimer\"\r\n : english\r\n ? \"\\nRead more\"\r\n : \"\\nLes mer\"}\r\n \r\n )}\r\n \r\n );\r\n }\r\n }\r\n return ;\r\n })}\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nAboutText.propTypes = {\r\n english: PropTypes.bool,\r\n section: PropTypes.string,\r\n};\r\nexport default AboutText;\r\n","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport PropTypes from \"prop-types\";\r\nimport styles from \"assets/jss/material-kit-react/views/landingPageSections/aboutStyle.js\";\r\nimport AboutText from \"./AboutText\";\r\nimport \"../../../assets/scss/general.scss\";\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst images = [\r\n require(\"assets/img/kvinneOgBarn.png\"),\r\n require(\"assets/img/bulldosingAvHjem.jpg\"),\r\n require(\"assets/img/barn_gjerde.jpg\"),\r\n require(\"assets/img/barn.jpg\"),\r\n];\r\n\r\nconst imageCredits = [\r\n \"Simen Aker Grimsrud\",\r\n \"Mamoun Wazaz/NTB\",\r\n \"Hamde Abu Rahma\",\r\n \"Ingunn Eriksen\",\r\n];\r\n\r\nconst imageAltsNo = [\r\n \"en kvinne med tre barn står i en sliten gang\",\r\n \"en bulldoser river ned et hjem mens folk ser på\",\r\n \"to barn som står mellom et gitter gjerde og smiler til hverandre\",\r\n \"tre barn med ryggsekker går ned et smug\",\r\n];\r\nconst imageAltsEng = [\r\n \"a woman with three children standing in a makeshift hallway\",\r\n \"a bulldoser tearing down a home while people watch\",\r\n \"two children standing between a wired fence, smiling at eachother\",\r\n \"three children with backpacks walking down an alleyway\",\r\n];\r\n\r\nconst AboutSection = ({ english, ids }) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n {english\r\n ? doc && doc.length !== 0 && doc[0].english_title[0].text\r\n : doc && doc.length !== 0 && doc[0].title[0].text}\r\n
\r\n\r\n {ids.map((id, index) => (\r\n
\r\n );\r\n};\r\n\r\nAboutSection.propTypes = {\r\n english: PropTypes.bool,\r\n};\r\n\r\nexport default AboutSection;\r\n","import React, { useEffect, useState, useRef } from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\nimport * as Fathom from \"fathom-client\";\r\nimport { useHistory } from \"react-router-dom\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport {\r\n CircularProgress,\r\n FormHelperText,\r\n FormControl,\r\n} from \"@material-ui/core\";\r\n\r\n// core components\r\nimport Header from \"components/Header/Header.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Parallax from \"components/Parallax/Parallax.js\";\r\n\r\nimport styles from \"assets/jss/material-kit-react/views/landingPage.js\";\r\n\r\n// Sections for this page\r\nimport useCareCounter from \"useCareCounter\";\r\nimport { accessDocument } from \"../../prismicApi.js\";\r\nimport LanguageIcon from \"@material-ui/icons/Language\";\r\nimport MailOutlineIcon from \"@material-ui/icons/MailOutline\";\r\nimport EmailSection from \"./Sections/EmailSection\";\r\nimport BubbleControlSection from \"./Sections/BubbleControlSection\";\r\nimport AboutSection from \"./Sections/AboutSection\";\r\nimport { ShareButtons } from \"components/ShareButtons/ShareButtons.js\";\r\n\r\nconst dashboardRoutes = [];\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nfunction useIsMobile() {\r\n const [isMobile, setIsMobile] = useState(window.innerWidth < 769);\r\n\r\n useEffect(() => {\r\n const handleResize = () => {\r\n setIsMobile(window.innerWidth < 769);\r\n };\r\n\r\n window.addEventListener(\"resize\", handleResize);\r\n return () => window.removeEventListener(\"resize\", handleResize);\r\n }, []);\r\n\r\n return isMobile;\r\n}\r\n\r\nconst LandingPage = ({ ...rest }) => {\r\n const classes = useStyles();\r\n const [doc, setDoc] = useState(null);\r\n const isPathEnglish = window.location.pathname.includes('/en');\r\n const [english, setEnglish] = useState(isPathEnglish === 'en');\r\n const [doCareSpinner, setDoCareSpinner] = useState(false);\r\n const isMobile = useIsMobile();\r\n const [isEmailModalOpen, setEmailModalOpen] = useState(false);\r\n const { careText, cared, doCare, careError } = useCareCounter({ english });\r\n const emailRef = useRef();\r\n const headerRef = useRef();\r\n const history = useHistory();\r\n\r\n //change html lang tag to english\r\n useEffect(() => {\r\n document\r\n .getElementsByTagName(\"html\")[0]\r\n .setAttribute(\"lang\", english ? \"en\" : \"no\");\r\n }, [english]);\r\n\r\n const handleLanguageClick = () => {\r\n Fathom.trackGoal(\"TPWXQVLG\", 0);\r\n if (english) {\r\n history.push(\"/oljefondet\");\r\n } else {\r\n history.push(\"/oljefondet/en\");\r\n }\r\n setEnglish(!english);\r\n };\r\n\r\n const scrollToElement = (element) => {\r\n const headerHeight = 200;\r\n const elementPosition =\r\n element.getBoundingClientRect().top + window.scrollY;\r\n const scrollPosition = elementPosition - headerHeight;\r\n\r\n window.scroll({\r\n left: 0,\r\n top: scrollPosition,\r\n behavior: \"smooth\",\r\n });\r\n };\r\n\r\n const scrollToEmailSection = () => {\r\n scrollToElement(emailRef.current);\r\n };\r\n\r\n useEffect(() => {\r\n Fathom.load(\"ELYFLNBD\");\r\n accessDocument(\"company_article\").then((result) => setDoc(result));\r\n }, []);\r\n\r\n const onClick = async () => {\r\n if (cared) {\r\n if (isMobile) {\r\n setEmailModalOpen(true);\r\n } else {\r\n scrollToEmailSection();\r\n }\r\n } else {\r\n try {\r\n // Track the goal and show the spinner\r\n Fathom.trackGoal(\"BEMVKBGJ\", 0);\r\n setDoCareSpinner(true);\r\n\r\n // Prepare the care action and a timer for a 2-second delay\r\n const carePromise = doCare();\r\n const timerPromise = new Promise((resolve) =>\r\n setTimeout(resolve, 2000)\r\n );\r\n\r\n // Wait for both the care action and the timer to complete\r\n await Promise.all([carePromise, timerPromise]);\r\n\r\n // Open the modal after the actions are complete\r\n setEmailModalOpen(true);\r\n } catch (e) {\r\n console.error(\"Error during care action: \", e);\r\n } finally {\r\n // Hide the spinner after the process is complete\r\n setDoCareSpinner(false);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n }\r\n rightLinks={\r\n \r\n
\r\n }\r\n fixed\r\n {...rest}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n {careError || \" \"}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {english\r\n ? \"The Norwegian oil fund is investing in the occupation of Palestine\"\r\n : \"Oljefondet investerer i okkupasjonen av Palestina\"}\r\n
\r\n{careText}
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {english ? \"Photo: \" : \"Foto:\"} Ingunn Eriksen\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n {careError || \" \"}\r\n \r\n \r\n
\r\n \r\n {english\r\n ? \"The Norwegian oil fund is investing in the occupation of Palestine\"\r\n : \"Oljefondet investerer i okkupasjonen av Palestina\"}\r\n
\r\n{careText}
\r\n\r\n
\r\n \r\n
\r\n \r\n {isMobile ? (\r\n isEmailModalOpen && (\r\n setEmailModalOpen(false)}\r\n />\r\n )\r\n ) : (\r\n
\r\n\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default LandingPage;\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\nimport { Router, Route, Switch } from \"react-router-dom\";\r\n\r\nimport \"assets/scss/material-kit-react.scss?v=1.9.0\";\r\n\r\n// pages for this product\r\nimport LandingPage from \"views/LandingPage/LandingPage.js\";\r\n\r\nvar hist = createBrowserHistory();\r\n\r\nReactDOM.render(\r\n