\n\t\t\t
\n\t);\n}\n\nexport default LoadingPage;\n","export function createMarkup(textTran){\n return {__html: textTran};\n}\n\nexport default createMarkup;\n","import axios from \"axios\";\n\nconst landingRequest = {\n landingdFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/landing-page`,{\n method:'GET',\n })\n },\n landingFindLocal: async()=>{\n return await axios( 'http://localhost:1337/api/landing-page',{\n method:'GET',\n })\n }\n\n}\nexport default landingRequest","import React, {useEffect, useState} from 'react';\nimport ReactPlayer from 'react-player';\nimport {Row,Col} from 'react-bootstrap';\nimport { Link } from 'react-router-dom';\nimport NoFeedBackIcon from 'src/components/constant/NoFeedBackIcon';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport createMarkup from 'src/utils/Markup.js';\nimport landingRequest from 'src/api/landing';\n\nfunction ImageIcon(props){\n return(\n \n \n
\n )\n}\n\nfunction LandingPage() {\n const [isLoading, setIsLoading] = useState(true);\n const [landingData, setLandingData] = useState([])\n\n useEffect(() => {\n async function fectchData(){\n const result = await landingRequest.landingdFind()\n setLandingData(result.data.data.attributes)\n setIsLoading(false)\n }\n fectchData()\n },[]);\n\n if (isLoading)return (\n
\n \n \n {props.text}\n
\n \n \n \n {landingData.image_icons.map((icon)=>{\n return(\n \n \n )\n })}\n
\n \n
\n
{landingData.title}
\n\n
\n \n );\n}\n\nexport default LandingPage;\n","import axios from \"axios\";\n\nconst aboutUsRequest = {\n aboutUsFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/about-us`,{\n method:'GET',\n })\n },\n aboutUsFindLocal: async()=>{\n return await axios( 'http://localhost:1337/api/about-us',{\n method:'GET',\n })\n }\n}\n\nexport default aboutUsRequest","import React, { useState, useEffect } from 'react';\nimport {Row, Col} from 'react-bootstrap';\nimport aboutUsRequest from 'src/api/about-us';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage';\nfunction createMarkup(textTran){\n return {__html: textTran};\n}\n\nconst About = () => {\n const [isLoading, setIsLoading] = useState(true);\n const [aboutUsData, setAboutUsdata] = useState([])\n const [currentTab, setCurrentTab] = useState(\"Student Leads\")\n\n const tableTab = [\n \"Student Leads\",\n \"Student Collaborators\",\n \"Humanities Advisors\",\n \"Grants & Funding\",\n \"Museums & Organizations\",\n \"Partner\"\n ]\n useEffect(() => {\n async function fetchData (){\n const result = await aboutUsRequest.aboutUsFind()\n const data = result.data.data.attributes\n setAboutUsdata(data)\n setIsLoading(false)\n }\n fetchData().catch(console.error);\n },[]);\n\n\tif (isLoading)return (\n
About Us
\n\n\n
\n );\n}\n\nexport default About;\n","export const nameRegExp = /^[A-Za-z\\s]*$/;\nexport const phoneRegExp = /^[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}$/;\nexport const emailRegExp = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n","import React, {useState} from 'react';\nimport { useForm } from 'react-hook-form'\nimport axios from 'axios';\nimport { phoneRegExp, emailRegExp, nameRegExp } from 'src/utils/RegExpRules';\n\nfunction ContactUsForm (){\n const [show, setShow] = useState(false)\n const {register, handleSubmit, \n // watch,\n formState: { errors }} = useForm({\n defaultValues:{\n name:\"\",\n email:\"\",\n phone:\"\",\n message:\"\"\n }\n })\n const onSubmit = (data) => {\n axios.post(`${process.env.REACT_APP_strapiURL}/api/user-contact-us`, {data:data})\n .then(setShow(true))\n .catch(err =>{console.error(err)})\n }\n return(\n \n
\n \n
\n\n \n \n \n \n
\n )\n })}\n
\n\n Project Directors
\n {aboutUsData?.project_directors?.map((director)=>{\n return(\n{director.name}
\n {director.role}\n \n \nAcknowledgments
\n\n
\n \n {tableTab.map((t,index)=>{\n return(\n
\n setCurrentTab(t)}>\n
\n )\n })}\n {t}
\n\n {\n currentTab === \"Student Leads\" ? (\n aboutUsData?.student_lead?.map(s=>{\n return(\n \n 
\n \n\n
\n )\n })\n ):(<>)\n }\n\n {\n currentTab === \"Student Collaborators\" ? (\n \n { \n aboutUsData?.student_collaborators?.map(s=>{\n return(\n
\n ):(<>)\n }\n {currentTab === \"Humanities Advisors\" ? ():(<>)}\n {currentTab === \"Grants & Funding\" ? ():(<>)}\n {currentTab === \"Museums & Organizations\" ? ():(<>)}\n {currentTab === \"Partner\" ? ():(<>)}\n
\n {s.name}
\n \n{s.role}
\n \n{s.caption}
\n {s.subcaption}\n \n \n )\n })}\n\n \n
\n )\n}\nexport default ContactUsForm","import React from 'react';\nimport { Row, Col} from 'react-bootstrap';\nimport NoFeedBackicon from 'src/components/constant/NoFeedBackIcon';\nimport ContactUsForm from './ContactUsForm';\n\nfunction ContactUs(){\n return(\n <>\n \n \n 
\n \n
\n
\n \n );\n}\n\nexport default ContactUs;\n","import axios from \"axios\";\n// import qs from \"qs\";\nconst storyRequest = {\n storyHomeFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/story-home`,{\n method:'GET',\n })\n },\n storyFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/stories?env=${process.env.REACT_APP_environment}`,{\n method:'GET',\n })\n },\n\n storyFindOne: (id)=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/stories/${id}`,{\n method:'GET',\n })\n },\n // storyCoinsOfDays: ()=>{\n // let query = qs.stringify({\n // fields: [\n // 'id',\n // 'name','image','image_caption','abstract',\n // ],\n // filters:{\n // abstract:{\n // $notNull: true\n // }\n // },\n // populate: [\n // 'image',\n // ],\n // },{encodeValuesOnly: true});\n // return axios(`${process.env.REACT_APP_API_URL}/stories?${query}`,{\n // method:'GET',\n // })\n // },\n\n}\nexport default storyRequest","export default __webpack_public_path__ + \"static/media/NEH-Preferred-Seal-White.ccceac1e.svg\";","import React, {useState} from 'react'\nimport { useForm } from 'react-hook-form'\nimport axios from 'axios';\nimport { emailRegExp } from 'src/utils/RegExpRules';\nfunction SubscriptionButton(){\n const [show, setShow] = useState(false)\n\tconst {register, handleSubmit, formState: { errors }} = useForm({defaultValues:{email:\"\"}})\n\tconst onSubmit = (data) => {\n axios.post(`${process.env.REACT_APP_strapiURL}/api/user-subscription`, {data:data})\n .then(setShow(true))\n .catch(err =>{console.error(err)})\n }\n return(\n <>\n {show \n ? \n :\n }\n {errors.email && \n \n Contact Us
\n{errors.email.message}
}\n \n )\n}\nexport default SubscriptionButton\n","import React from \"react\";\nimport NEH from 'src/assets/NEH-Preferred-Seal-White.svg';\nimport { Link } from 'react-router-dom';\nimport SubscriptionButton from './subscriptionButton'\n\nfunction Footer2(){\n return(\n \n )\n}\nexport default Footer2","import createMarkup from \"src/utils/Markup\"\nfunction PageTitleComponent(props){\n return(\n \n \n \n \t
{props.title}{props.icon}
\n\t\t\t\n \t\n \n \n )\n}\nexport default PageTitleComponent","/* eslint-disable no-unused-vars */\nimport React, {useEffect, useState} from 'react';\nimport { Container, Row, Col} from 'react-bootstrap';\nimport { Link } from 'react-router-dom';\nimport storyRequest from 'src/api/story';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\n// import Footer from 'src/components/footer/Footer';\nimport Footer from 'src/components/footerv2/Footer2';\nimport createMarkup from 'src/utils/Markup';\nimport PageTitleComponent from 'src/components/constant/pageTitleText';\n\nconst Stories = () => {\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [stories, setStories] = useState(undefined)\n\tconst [storyContent, setStoryContent] = useState([])\n\n\tuseEffect(() => {\n\t\tconst fetchData = async ()=>{\n\t\t\tconst result = await storyRequest.storyFind()\n\t\t\tconst textresult = await storyRequest.storyHomeFind()\n\t\t\tsetStoryContent(textresult.data.data.attributes)\n\t\t\tfunction filterOutZotero(item){\n\t\t\t\tif (item.id !== 1){\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tsetStories(result.data.data.filter(filterOutZotero))\n\t\t\tsetIsLoading(false)\n\t\t}\n\t\tfetchData().catch(console.error);\n\t},[]);\n\n\tif (isLoading)return (<>\n\t\t\t\t\n\t\t\t\t\t{stories.map((story)=>{\n\t\t\t\t\t\treturn(\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t{story.attributes.name}
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t
\n\t\t \n\t)\n}\n\nexport default Stories;\n","import React from 'react';\nimport Drawer from 'react-modern-drawer'\nimport 'react-modern-drawer/dist/index.css'\nimport createMarkup from 'src/utils/Markup.js';\n\n\nconst Footer = ({references,imageReference,isBottomOpen,toggleBottom}) => {\n // let eleheight = document.getElementById(\"credits-and-references\")?.clientHeight\n // let footerheight = document.getElementById(\"footer\")?.clientHeight\n return (\n <>\n \n {(imageReference || references) &&( imageReference.length!==0 ||references.length!==0) ? (<>\n \n \n\n \n\n \n Coin Images Courtesy of:\n \n {imageReference.map((ref,index)=>{\n return(\n \n {ref.right_holder}\n \n )})}\n \n \n \n To read more, check these out:\n \n {references.map((ref,index)=>{\n return(\n \n [{index+1}]\n {ref.split(\"http\")[1] \n ? \n :}\n \n )})}\n \n \n\n \n \n ):(<>)}\n \n )\n}\n\nexport default Footer;\n","import { Container, Row,Col } from \"react-bootstrap\"\nimport createMarkup from 'src/utils/Markup.js';\n\nconst Title = (props) => {\n let zone = props.zone\n return (\n \n \n \n
\n \n {zone.title}
\n {zone.subtitle}
\n \n \n \n {props.index === 0 ? (<>):( )}\n \n );\n }\n\n export default Title\n","/* eslint-disable eqeqeq */\nimport { Container, Col } from \"react-bootstrap\"\nimport { Link } from 'react-router-dom';\n\nfunction createMarkup(textTran){\n return {__html: textTran};\n}\nconst End_Frame = (props) => {\n let zone = props.zone\n return (\n \n Are you ready to learn more?
\n Tell Me a Story\n Explore Coins\n \n {props.index === 0 ? (<>):( )}\n \n );\n }\nexport default End_Frame","/* eslint-disable eqeqeq */\nimport { Container, Row, Col } from \"react-bootstrap\"\n// import { Link } from 'react-router-dom';\n\nfunction createMarkup(textTran){\n return {__html: textTran};\n}\n\nexport function IsEmptyOrWhiteSpace(str) {\n return str=== null ? true : (str.match(/^\\s*$/) || []).length > 0;\n}\n\nexport const HeadComponent = (props)=>{\n return(\n \n |
\n \n )\n }\n else if (text.caption == \"\" || text.caption == null){\n return(\n \n |
\n \n )\n }\n else{\n return (\n \n |
\n |
\n \n )\n }\n}\n\n\nexport const ImageComponent =(props)=>{\n // console.log(props.imageWidth)\n let image = props.image\n // let image_size = {\n // \"Smallest\":\"12.5%\",\n // \"Smaller\":\"25%\",\n // \"Small\":\"37.5%\",\n // \"Regular\":\"50%\",\n // \"Big\":\"62.5%\",\n // \"Bigger\":\"75%\",\n // \"Biggest\":\"87.5%\",\n // \"Full\":\"100%\"\n // }\n let component_background = {\"null\":'',\"light-blue-background\":\"light-blue-background\",\"light-yellow-background\":\"light-yellow-background\",};\n // Coin Data\n if((image.image.data === null)){\n return(\n \n \n
\n \n \n
\n \n )\n }\n// Image Data\n else{ \n return(\n \n {image.additional_link === null ? (\n 
\n ):(\n \n \n )}\n
\n \n \n
\n \n )\n }\n}\n\n\nexport const ImagesComponent = (props)=>{\n let imageJsx = []\n if(props.images.length === 6 || props.images.length === 5){\n props.images.forEach((image)=>{\n imageJsx.push();\n return;\n })\n }\n else if (props.images.length === 1){\n props.images.forEach((image)=>{\n imageJsx.push();\n return;\n })\n }\n else{\n props.images.forEach((image)=>{\n imageJsx.push({imageJsx}
);\n}\n","import { Container, Row} from \"react-bootstrap\"\nimport { HeadComponent, ImagesComponent } from \"../ComponentFunction/index\";\nconst Images = (props) =>{\n let zone = props.zone\n return(\n \n {zone.head?.updown_switch ?(\n \n |
\n |
\n \n ):(\n \n |
\n |
\n \n )}\n {props.index === 0 ? (<>):( )}\n \n )\n }\n export default Images\n","import { Container, Row, Col } from \"react-bootstrap\"\nimport { HeadComponent, TextComponent } from \"../ComponentFunction/index\";\n\nconst TextText = (props) => {\n let zone = props.zone\n const TextTxtBody = ()=>{\n if ((zone.tt_text_left.text === '' || zone.tt_text_left.text === null) && (zone.tt_text_left.caption === '' || zone.tt_text_left.caption === null)){\n return(\n \n \n
\n )\n }\n else if((zone.tt_text_right.text === '' || zone.tt_text_right.text === null) && (zone.tt_text_right.caption === '' || zone.tt_text_right.caption === null)){\n return(\n \n \n
\n )\n }\n else{\n return(\n \n \n \n
\n )\n }\n }\n return(\n \n {zone.head.updown_switch ?(\n \n \n \n
\n \n ):(\n \n \n \n
\n \n )}\n {props.index === 0 ? (<>):( )}\n \n )\n\n }\n export default TextText\n","import { Container, Row, Col } from \"react-bootstrap\"\nimport { HeadComponent, TextComponent, ImageComponent } from \"../ComponentFunction/index\";\n\nconst ImageText = (props) =>{\n let zone= props.zone\n return(\n \n {zone.head?.updown_switch ?\n \n \n {zone.left_right_switch ?(<>\n \n \n ):(<>\n \n )}\n
\n |
\n : \n \n |
\n \n {zone.left_right_switch ?(<>\n \n \n ):(<>\n \n \n )}\n
\n }\n {props.index === 0 ? (<>):( )}\n \n )\n\n }\n export default ImageText\n","import { Container, Row, Col } from \"react-bootstrap\"\nimport {TextComponent, HeadComponent, ImageComponent } from \"../ComponentFunction/index\";\n\nconst ImageTextImage = (props) =>{\n let zone = props.zone\n return(\n \n {zone.head.updown_switch ? (\n \n \n \n \n \n
\n |
\n \n ):(\n \n |
\n \n \n \n \n
\n \n )}\n {props.index === 0 ? (<>):( )}\n \n )\n // }\n }\n\n export default ImageTextImage\n","import { Container, Row, Col } from \"react-bootstrap\"\nimport { HeadComponent, ImageComponent, TextComponent } from \"../ComponentFunction/index\";\nimport createMarkup from 'src/utils/Markup.js';\n\nconst ImageTextText = (props) =>{\n let zone = props.zone\n return(\n \n {zone.head.updown_switch ? (\n \n \n {zone.left_right_switch? (\n \n |
\n |
\n \n \n \n ):(\n \n \n |
\n |
\n \n \n )}\n
\n |
\n \n ):(\n \n |
\n {zone.left_right_switch? (\n \n |
\n |
\n \n \n
\n ):(\n \n \n |
\n |
\n \n
\n )}\n \n )}\n {props.index === 0 ? (<>):( )}\n \n )\n}\nexport default ImageTextText\n","import { Container, Row, Col} from \"react-bootstrap\"\nimport { HeadComponent, } from \"../ComponentFunction/index\";\nimport createMarkup from 'src/utils/Markup.js';\n\nconst ScaleCoinImg = (props)=>{\n let coin_obverse_url = props.coin.coin.data.attributes.obverse_file.data.attributes.url\n let coin_obverse_alt = props.coin.coin.data.attributes.obverse_file.data.attributes.alternativeText\n\n let coin_reverse_url = props.coin.coin.data.attributes.reverse_file.data.attributes.url\n let coin_reverse_alt = props.coin.coin.data.attributes.reverse_file.data.attributes.alternativeText\n\n return(\n <>\n \n |
\n \n \n \n
\n \n \n Compare Scale\n
\n \n Reset Scale\n
\n \n \n
\n |
\n \n ):(\n \n |
\n |
\n \n \n \n
\n \n \n Compare Scale\n
\n \n Reset Scale\n
\n \n \n
\n \n )}\n {props.index === 0 ? (<>):( )}\n \n )\n // }\n\n }\n\n export default ScaleFrame\n","import { Container, Row, Col} from \"react-bootstrap\"\nimport { HeadComponent, } from \"../ComponentFunction/index\";\nimport createMarkup from 'src/utils/Markup.js';\n\nconst FlipCoinImage = (props)=>{\n let sourUrl = props.coin.coin.data.attributes.source_image\n let coin_obverse_url = props.coin.coin.data.attributes.obverse_file.data.attributes.url\n let coin_obverse_alt = props.coin.coin.data.attributes.obverse_file.data.attributes.alternativeText\n let coin_reverse_url = props.coin.coin.data.attributes.reverse_file.data.attributes.url\n let coin_reverse_alt = props.coin.coin.data.attributes.reverse_file.data.attributes.alternativeText\n\n return(\n <>\n \n \n )\n}\nfunction FlipCoin (dom){\n while (dom.className !== 'flip-box-inner') {dom = dom.nextSibling}\n if (dom.style.transform === 'rotateY(180deg)') {dom.style.transform = 'rotateY(0deg)'} \n else {dom.style.transform = 'rotateY(180deg)'}\n}\n\nconst FlipFrame = (props) =>{\n let zone = props.zone\n return(\n \n {zone.head.updown_switch ? (\n \n \n \n |
\n \n
\n |
\n \n \n
\n |
\n \n ):(\n \n |
\n \n \n \n \n
\n |
\n \n \n
\n
\n )}\n {props.index === 0 ? (<>):( )}\n \n )\n }\n\n export default FlipFrame\n","/* eslint-disable eqeqeq */\nimport { Container, Row, Col} from \"react-bootstrap\"\n\nimport { HeadComponent} from \"../ComponentFunction/index\";\nimport createMarkup from 'src/utils/Markup.js';\n\nconst FadeButton = (props)=>{\n let buttonOptin = []\n\n buttonOptin.push(\n \n \n \n )\n }\n if(props.options.length == 2){return({buttonOptin}
)} \n else{return({buttonOptin}
)}\n} \n\nconst FadeBody = (props)=>{\n let coin_left = props.coin.coin_left.data.attributes\n let sourUrl_left = coin_left.source_image\n let coin_left_url, coin_left_alt = undefined\n // let coin_left_alt = undefined\n if(props.coin.left_coin_obverse_or_reverse){\n coin_left_url = coin_left.reverse_file.data.attributes?.url\n coin_left_alt = coin_left.reverse_file.data.attributes?.alternativeText\n }\n else{\n coin_left_url = coin_left.obverse_file.data.attributes?.url\n coin_left_alt = coin_left.obverse_file.data.attributes?.alternativeText\n }\n\n let coin_right = props.coin.coin_right.data.attributes\n let sourUrl_right = coin_right.source_image\n let coin_right_url , coin_right_alt = undefined\n // let coin_right_alt = undefined\n if(props.coin.right_coin_obverse_or_reverse){\n coin_right_url = coin_right.reverse_file.data.attributes?.url\n coin_right_alt = coin_right.reverse_file.data.attributes?.alternativeText\n }\n else{\n coin_right_url = coin_right.obverse_file.data.attributes?.url\n coin_right_alt = coin_right.obverse_file.data.attributes?.alternativeText\n }\n return(\n <> \n \n \n 
\n \n
\n \n \n
\n \n \n \n 
\n \n
\n \n \n
\n \n \n )\n}\n\nconst FadeBack = (props)=>{\n let fadeBack = []\n for(let body = 1; body\n \n \n )\n }\n return(<>{fadeBack})\n}\nfunction handleBtns (dom,index, length){for(let i = 0; i{\n try{\n Option1.style.display ='none';\n Option0.style.display = 'block'\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option0.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n case 1:\n Option0.style.opacity = '0.0'\n setTimeout(()=>{\n try{\n Option0.style.display ='none';\n Option1.style.display = 'block';\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option1.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n \n default:\n console.log('Only take 2 or 4 options')\n }\n }\n if (length == 3){\n let Option0 = dom.childNodes[0]\n let Option1 = dom.childNodes[1]\n let Option2 = dom.childNodes[2]\n\n switch(index){\n case 0:\n Option1.style.opacity = '0.0'\n Option2.style.opacity = '0.0'\n setTimeout(()=>{\n try{\n Option0.style.display = 'block'\n Option1.style.display ='none';\n Option2.style.display ='none';\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option0.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n case 1:\n Option0.style.opacity = '0.0'\n Option2.style.opacity = '0.0'\n setTimeout(()=>{\n try{\n Option0.style.display ='none';\n Option1.style.display = 'block';\n Option2.style.display ='none';\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option1.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n case 2:\n Option0.style.opacity = '0.0'\n Option1.style.opacity = '0.0'\n setTimeout(()=>{\n try{\n Option0.style.display ='none';\n Option1.style.display = 'none';\n Option2.style.display ='block';\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option2.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n \n default:\n console.log('Only take 2 or 4 options')\n }\n }\n if (length == 4 ){\n let Option0 = dom.childNodes[0]\n let Option1 = dom.childNodes[1]\n let Option2 = dom.childNodes[2]\n let Option3 = dom.childNodes[3]\n\n switch(index){\n case 0:\n Option1.style.opacity = '0.0'\n Option2.style.opacity = '0.0'\n Option3.style.opacity = '0.0'\n setTimeout(()=>{\n try{\n Option0.style.display = 'block';\n Option1.style.display = 'none';\n Option2.style.display = 'none';\n Option3.style.display = 'none';\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option0.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n case 1:\n Option0.style.opacity = '0.0'\n Option2.style.opacity = '0.0'\n Option3.style.opacity = '0.0'\n setTimeout(()=>{\n try{\n Option0.style.display = 'none';\n Option1.style.display = 'block';\n Option2.style.display = 'none';\n Option3.style.display = 'none';\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option1.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n case 2:\n Option0.style.opacity = '0.0'\n Option1.style.opacity = '0.0'\n Option3.style.opacity = '0.0'\n setTimeout(()=>{\n try{\n Option0.style.display = 'none';\n Option1.style.display = 'none';\n Option2.style.display = 'block';\n Option3.style.display = 'none';\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option2.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n case 3:\n Option0.style.opacity = '0.0'\n Option1.style.opacity = '0.0'\n Option2.style.opacity = '0.0'\n setTimeout(()=>{\n try{\n Option0.style.display = 'none';\n Option1.style.display = 'none';\n Option2.style.display = 'none';\n Option3.style.display = 'block';\n }catch(error){\n console.error(error)\n }\n setTimeout(() => {\n try {\n Option3.style.opacity = '1.0';\n } catch (error) {\n console.error(error);\n }\n });\n },400);\n break;\n \n default:\n console.log('Only take 2 or 4 options')\n }\n }\n \n}\n\nconst FadeFrame = (props) =>{\n let zone = props.zone\n return(\n \n {zone.head?.updown_switch?(\n \n \n \n \n \n \n \n \n \n |
\n \n ):(\n \n |
\n \n \n \n \n \n \n \n \n \n )}\n {props.index === 0 ? (<>):( )}\n \n )\n }\n\n export default FadeFrame\n","import { Container, Row, Col} from \"react-bootstrap\"\nimport { HeadComponent, TextComponent } from \"../ComponentFunction/index\";\nimport { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';\nimport createMarkup from 'src/utils/Markup';\n\nconst CompareCoin = (props)=>{\n let coin_obverse_url = props.coin.coin.data.attributes.obverse_file.data.attributes.url\n let coin_obverse_alt = props.coin.coin.data.attributes.obverse_file.data.attributes.alternativeText\n \n let coin_reverse_url = props.coin.coin.data.attributes.reverse_file.data.attributes.url\n let coin_reverse_alt = props.coin.coin.data.attributes.reverse_file.data.attributes.alternativeText\n\n return(\n \n
\n \n \n
\n\n \n )\n }\n\nconst CompareFrame = (props)=>{\n let zone = props.zone\n return(\n \n {zone.head.updown_switch?(\n \n {zone.cc_text.text === '' && zone.cc_text.caption === '' ?(\n |
\n ):(\n \n {zone.left_right_switch ? (<>\n \n \n ):(<>\n \n \n )}\n
)} \n |
\n \n ):(\n \n |
\n {zone.cc_text.text === '' && zone.cc_text.caption === '' ?(\n \n \n
\n ):(\n \n {zone.left_right_switch ? (<>\n \n ):(<>\n \n \n )}\n
)}\n \n )}\n {props.index === 0 ? (<>):( )}\n \n )\n}\n\nexport default CompareFrame\n","import Title from 'src/components/StoryComponents/StoryFrames/Title';\nimport EndFrame from 'src/components/StoryComponents/StoryFrames/EndFrame';\nimport Images from 'src/components/StoryComponents/StoryFrames/Images'\nimport TextText from 'src/components/StoryComponents/StoryFrames/TextText'\nimport ImageText from 'src/components/StoryComponents/StoryFrames/ImageText'\nimport ImageTextImage from 'src/components/StoryComponents/StoryFrames/ImageTextImage'\nimport ImageTextText from 'src/components/StoryComponents/StoryFrames/ImageTextText'\nimport ScaleFrame from 'src/components/StoryComponents/StoryFrames/ScaleFrame'\nimport FlipFrame from 'src/components/StoryComponents/StoryFrames/FlipFrame'\nimport FadeFrame from 'src/components/StoryComponents/StoryFrames/FadeFrame'\nimport CompareFrame from 'src/components/StoryComponents/StoryFrames/CompareFrame'\n\n\nconst StoryComponent = (zone, index,fullpageApi, state,toggleBottom) => {\n switch (zone.__component) {\n case 'frame.title':\n return \n case 'frame.end':\n return <EndFrame zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.images':\n return <Images zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.text-text':\n return <TextText zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.image-text':\n return <ImageText zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.image-text-image':\n return <ImageTextImage zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.image-text-text':\n return <ImageTextText zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.scale-frame':\n return <ScaleFrame zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.flip-frame':\n return <FlipFrame zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.values-frame':\n return <FadeFrame zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n case 'frame.coin-compare':\n return <CompareFrame zone={zone} key={`story_comp_${index}`} index={index} fullpageApi={fullpageApi} state={state} toggleBottom={toggleBottom}/>\n default:\n console.error(`Error: Unrecognized component '${zone.__component}'`);\n }\n }\n \nexport default StoryComponent\n","import axios from \"axios\";\n\nconst baseURL = 'https://api.zotero.org'\n\nconst zoteroRequest = {\n getAllitems: async()=>{\n return await axios(`${baseURL}/groups/4740395/items`,{\n method:'GET',\n headers: {\n 'Zotero-API-Version': '3',\n 'Zotero-API-Key':'QtlUSBKdwlVRuIJzNaCbi9VD'\n },\n params:{\n \"include\":\"bib\",\n \"sort\":\"creator\",\n \"limit\":\"1000\"\n }\n })\n },\n getItemsTop: async()=>{\n return await axios(`${baseURL}/groups/4740395/items/top`,{\n method:'GET',\n headers: {\n 'Zotero-API-Version': '3',\n 'Zotero-API-Key':'QtlUSBKdwlVRuIJzNaCbi9VD'\n\n },\n })\n },\n getOneItem: async(itemKey)=>{\n return await axios(`${baseURL}/groups/4740395/items/${itemKey}`,{\n method:'GET',\n headers: {\n 'Zotero-API-Version': '3',\n 'Zotero-API-Key':'QtlUSBKdwlVRuIJzNaCbi9VD'\n },\n })\n },\n getOneItemBib: async(itemKey)=>{\n return await axios(`${baseURL}/groups/4740395/items/${itemKey}`,{\n method:'GET',\n headers: {\n 'Zotero-API-Version': '3',\n 'Zotero-API-Key':'QtlUSBKdwlVRuIJzNaCbi9VD'\n },\n params:{\n format:\"bib\"\n }\n })\n },\n getOneItemChildren: async(itemKey)=>{\n return await axios(`${baseURL}/groups/4740395/items/${itemKey}/children`,{\n method:'GET',\n headers: {\n 'Zotero-API-Version': '3',\n 'Zotero-API-Key':'QtlUSBKdwlVRuIJzNaCbi9VD'\n },\n params:{\n format:'json'\n }\n })\n },\n}\nexport default zoteroRequest","import React, { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nimport Footer from 'src/components/footer/Footer.js';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport ReactFullpage from '@fullpage/react-fullpage';\nimport StoryComponent from './StoryComponents';\n\nimport storyRequest from 'src/api/story';\nimport zoteroRequest from 'src/api/zotero';\n\nconst StoryReader = () => {\n\n const Get_id = () => {\n return new URLSearchParams(useLocation().search).get('id');\n }\n let storyId = Get_id();\n const [isLoading, setIsLoading] = useState(true);\n const [storyFrame, setStoryFrame] = useState([])\n const [storyAnchors, setStoryAnchors]=useState([])\n const [storyReference, setStoryReference] = useState([])\n const [storyImageSouce, setStoryImageSouce]= useState([])\n const [isBottomOpen, setIsBottomOpen] = useState(false)\n\n\n useEffect(()=>{\n async function fetchData(){\n // if(isLoading === false) setIsLoading(true);\n const result = await storyRequest.storyFindOne(storyId)\n createImageReference(result.data.data.attributes)\n createZoteroReference(result.data.data.attributes)\n createAnchors(result.data.data.attributes)\n setStoryFrame(result.data.data.attributes.zone)\n setIsLoading(false)\n }\n fetchData().catch(console.error);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n },[])\n\n const toggleBottom = (e) => {\n const el = e.target.closest(\"button.reference-tag\");\n if (el && e.currentTarget.contains(el)) {\n setIsBottomOpen((prev) => !prev)\n }\n\n }\n\n async function createImageReference(resultData){\n let imgRef=[]\n resultData.zone.forEach((frame)=>{\n //coin-compare\n if(frame.cc_coin){\n let ref = {}\n ref['right_holder']=frame.cc_coin.coin.data.attributes.right_holder\n ref['source_image']=frame.cc_coin.coin.data.attributes.source_image\n imgRef.push(ref)\n }\n //scale-frame\n else if(frame.scale_coin_left && frame.scale_coin_right){\n let ref1 = {}\n let ref2 = {}\n ref1['right_holder']=frame.scale_coin_left.coin.data.attributes.right_holder\n ref1['source_image']=frame.scale_coin_left.coin.data.attributes.source_image\n ref2['right_holder']=frame.scale_coin_right.coin.data.attributes.right_holder\n ref2['source_image']=frame.scale_coin_right.coin.data.attributes.source_image\n imgRef.push(ref1,ref2)\n }\n //fades-frame\n else if(frame.fades){\n frame.fades.forEach((fade)=>{\n let ref1 = {}\n let ref2 = {}\n ref1['right_holder']=fade.coin_left.data.attributes.right_holder\n ref1['source_image']=fade.coin_left.data.attributes.source_image\n ref2['right_holder']=fade.coin_right.data.attributes.right_holder\n ref2['source_image']=fade.coin_right.data.attributes.source_image\n imgRef.push(ref1,ref2)\n })\n }\n //flip-frame\n else if(frame.flip_coin_left && frame.flip_coin_right){\n let ref1 = {}\n let ref2 = {}\n ref1['right_holder']=frame.flip_coin_left.coin.data.attributes.right_holder\n ref1['source_image']=frame.flip_coin_left.coin.data.attributes.source_image\n ref2['right_holder']=frame.flip_coin_right.coin.data.attributes.right_holder\n ref2['source_image']=frame.flip_coin_right.coin.data.attributes.source_image\n imgRef.push(ref1,ref2)\n }\n else if(frame.images){\n frame.images.forEach((image)=>{\n let ref = {}\n if(image.coin.data){\n ref['right_holder']=image.coin.data.attributes.right_holder\n ref['source_image']=image.coin.data.attributes.source_image\n imgRef.push(ref)\n }\n })\n }\n else if(frame.it_image){\n let ref = {}\n if(frame.it_image.coin.data){\n ref['right_holder']=frame.it_image.coin.data.attributes.right_holder\n ref['source_image']=frame.it_image.coin.data.attributes.source_image\n imgRef.push(ref)\n }\n }\n else if(frame.iti_image_left && frame.iti_image_right){\n let ref1 = {}\n if(frame.iti_image_left.coin.data){\n ref1['right_holder']=frame.iti_image_left.coin.data.attributes.right_holder\n ref1['source_image']=frame.iti_image_left.coin.data.attributes.source_image\n }\n let ref2 = {}\n if(frame.iti_image_right.coin.data){\n ref2['right_holder']=frame.iti_image_right.coin.data.attributes.right_holder\n ref2['source_image']=frame.iti_image_right.coin.data.attributes.source_image\n }\n imgRef.push(ref1,ref2)\n }\n })\n //sort the array\n function compare(a,b){\n if ( a.right_holder < b.right_holder ){return -1;}\n if ( a.right_holder > b.right_holder ){return 1;}\n return 0;\n }\n\n imgRef = imgRef.sort(compare)\n imgRef = [...new Map(imgRef.map(item =>[item['right_holder'], item])).values()];// Deduplication\n imgRef = imgRef.filter(function(obj){return obj.right_holder!=='NA'}) //delete NA value\n setStoryImageSouce(imgRef)\n }\n\n async function createZoteroReference(resultData){\n let itemkeys = []\n resultData.references.data.forEach((reference)=>{itemkeys.push(reference.attributes.item_key)})\n let bibArr = []\n for (const itemkey of itemkeys){\n const data = await zoteroRequest.getOneItemBib(itemkey)\n bibArr.push(data.data)\n }\n bibArr = bibArr.sort()\n setStoryReference(bibArr)\n }\n\n async function createAnchors(resultData){\n let arrAnchros = []\n for (let i=0; i<resultData.zone.length;i++){\n let title = resultData.name.replace(/\\s/g, '')\n arrAnchros.push(title+'-slides-' +i)\n }\n setStoryAnchors(arrAnchros)\n }\n\n // Render\n if (isLoading) return (<><LoadingPage /><Footer /></>);\n return (\n <>\n <ReactFullpage\n licenseKey = {'K3HO6-208O9-6QK0J-JZ1VH-RRWIO'}\n navigation = {true}\n navigationPosition={`right`}\n anchors={storyAnchors}\n autoScrolling = {true}\n padding='5em 0'\n\n // onLeave={(origin, destination, direction) => {\n // console.log(\"onLeave event\", { origin, destination, direction });\n // }}\n render={({state, fullpageApi}) => {\n // console.log(\"render prop change\", state, fullpageApi);\n fullpageApi?.setAllowScrolling(!isBottomOpen, 'down')\n\n let storyJSX = [];\n storyFrame.forEach((story,i)=>{storyJSX.push(StoryComponent(story,i,fullpageApi, state,toggleBottom))})\n return (\n <ReactFullpage.Wrapper>\n {storyJSX}\n </ReactFullpage.Wrapper>\n );\n }}\n />\t\n <Footer\n references={storyReference}\n imageReference={storyImageSouce}\n toggleBottom={toggleBottom}\n isBottomOpen={isBottomOpen}\n />\n </>\n );\n}\n\nexport default StoryReader;\n","import axios from \"axios\";\nimport qs from \"qs\";\nconst evidenceRequest = {\n evidenceFind: ()=>{\n let query = qs.stringify({\n populate: [\n 'image_icon',\n 'image_icon.image',\n ],\n })\n return axios(`${process.env.REACT_APP_strapiURL}/api/explore-the-evidence?${query}`,{\n method:'GET',\n })\n },\n evidenceFindLocal: async()=>{\n return await axios( 'http://localhost:1337/api/explore-the-evidence',{\n method:'GET',\n })\n }\n}\n\nexport default evidenceRequest","import { Link } from \"react-router-dom\"\nimport createMarkup from \"src/utils/Markup\"\n\nexport const WhiteBGDesign = (props)=>{\n return(\n <center>\n <Link to={props.link}>\n <img\n alt={'missing alt'}\n src={`${process.env.REACT_APP_strapiURL}${props.imageSrc}`}\n style={{\n height:props.height??\"auto\",\n width:props.width??\"auto\"\n }}\n className=\"bg-white p-3\"\n />\n </Link>\n <h4 className='mt-5'>{props.title}</h4>\n <p className='story-caption' dangerouslySetInnerHTML={createMarkup(props.subtext)} />\n </center>\n )\n}","import React, {useEffect, useState} from 'react';\nimport {Container,Row,Col} from 'react-bootstrap';\nimport evidenceRequest from 'src/api/evidence';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport { WhiteBGDesign } from 'src/components/constant/WhiteBGDesign';\nimport PageTitleComponent from 'src/components/constant/pageTitleText';\nconst ExploreTheEvidence = () => {\n const [isLoading, setIsLoading] = useState(true);\n const [evidenceData, setEvidenceData] = useState([])\n useEffect(() => {\n async function fetchData(){\n const result = await evidenceRequest.evidenceFind()\n setEvidenceData(result.data.data.attributes)\n setIsLoading(false)\n }\n fetchData()\n },[]);\n\n if (isLoading)return (<LoadingPage />);\n return (\n <div id='explore-the-evidence' className='d-flex align-items-center'>\n <Container>\n <PageTitleComponent\n title={evidenceData.title}\n text={evidenceData.text}\n subtext={evidenceData.subtext}\n />\n <Row className='my-5 d-flex py-5 justify-content-around'>\n\n {/* I need to figured out how to deal with the <hr/> later*/}\n\n {/* {evidenceData.image_icon.map((ctx)=>{\n return(\n <Col xs={4}>\n <WhiteBGDesign\n link={ctx.url_path}\n imageSrc={ctx.image.data.attributes.url}\n title={ctx.title}\n subtext={ctx.subtext}\n height=\"12vmax\"\n width=\"20vmax\"\n />\n </Col>\n )\n })} */}\n <Col xs={3}>\n <WhiteBGDesign\n link={evidenceData.image_icon[0].url_path}\n imageSrc={evidenceData.image_icon[0].image.data.attributes.url}\n title={evidenceData.image_icon[0].title}\n subtext={evidenceData.image_icon[0].subtext}\n height=\"12vmax\"\n width=\"20vmax\"\n />\n </Col>\n <Col xs={3}>\n <WhiteBGDesign\n link={evidenceData.image_icon[1].url_path}\n imageSrc={evidenceData.image_icon[1].image.data.attributes.url}\n title={evidenceData.image_icon[1].title}\n subtext={evidenceData.image_icon[1].subtext}\n height=\"12vmax\"\n width=\"20vmax\"\n />\n </Col>\n <Col xs={3}>\n <WhiteBGDesign\n link={evidenceData.image_icon[2].url_path}\n imageSrc={evidenceData.image_icon[2].image.data.attributes.url}\n title={evidenceData.image_icon[2].title}\n subtext={evidenceData.image_icon[2].subtext}\n height=\"12vmax\"\n width=\"20vmax\"\n />\n </Col>\n </Row>\n <hr />\n <Row className='d-flex justify-content-around my-5 py-5'>\n <Col xs={3}>\n <WhiteBGDesign\n link={evidenceData.image_icon[3].url_path}\n imageSrc={evidenceData.image_icon[3].image.data.attributes.url}\n title={evidenceData.image_icon[3].title}\n subtext={evidenceData.image_icon[3].subtext}\n height=\"12vmax\"\n width=\"20vmax\"\n />\n </Col>\n <Col xs={3}>\n <WhiteBGDesign\n link={evidenceData.image_icon[4].url_path}\n imageSrc={evidenceData.image_icon[4].image.data.attributes.url}\n title={evidenceData.image_icon[4].title}\n subtext={evidenceData.image_icon[4].subtext}\n height=\"12vmax\"\n width=\"20vmax\"\n />\n </Col>\n </Row>\n </Container>\n </div>\n );\n}\n\nexport default ExploreTheEvidence;\n","import { useEffect, useRef } from 'react';\n\nconst OutsideClickHandler = (props) => {\n const ref = useRef(null);\n const { onOutsideClick } = props;\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (ref.current && !ref.current.contains(event.target)) {\n onOutsideClick && onOutsideClick();\n }\n };\n document.addEventListener('click', handleClickOutside, true);\n return () => {\n document.removeEventListener('click', handleClickOutside, true);\n };\n }, [ onOutsideClick ]);\n\n return (\n <div ref={ref} style={{ opacity: 1 }}>\n {props.children}\n </div> \n );\n}\n\nexport default OutsideClickHandler;\n","import React, { useState, useEffect } from \"react\";\nimport OutsideClickHandler from 'src/utils/OutsideClickHandler.js';\n\n// WhitePopUp is a class that wraps information with a white popup and a translucent white background that covers everything but the navbar and footer.\n// Has an X-icon prebuilt and closes on out side click.\n\nconst WhitePopUp = (props) => {\n const [show, set_show] = useState(false);\n\n const CloseHandler = (e) => { \n set_show(false);\n props.onClose(false);\n };\n\n useEffect(() => {\n set_show(props.show);\n }, [props.show]);\n\n let display_style = {\n opacity: show ? 1 : 0,\n zIndex: show ? 1000 : -1000\n };\n\n return (\n <>\n <div className='translucent-white-background' style={display_style}/>\n <OutsideClickHandler onOutsideClick={CloseHandler}>\n <div className='snow-white-background' style={display_style}> \n <div\n className='demo-icon icon-x-medium white-pop-up-x-icon'\n onClick={CloseHandler}>\n </div>\n <div className='white-pop-up-inner-padding'>\n {props.children}\n </div>\n </div>\n </OutsideClickHandler>\n </>\n );\n}\n\nexport default WhitePopUp;\n","import React, { useState, useEffect } from 'react';\n\nimport WhitePopUp from 'src/utils/WhitePopUp.js';\n\nexport function StringifyTypeCategory(type_category) {\n if (type_category?.length === 0)\n return;\n let stringified_list = `${type_category[0].type_category}`;\n for (let i = 1; i < type_category.length; i++) {\n stringified_list += `, ${type_category[i].type_category}`;\n }\n\n return stringified_list;\n};\n\nexport function CoinIdIntoTitle(coin_id) {\n function ConvertToRoman(num) {\n var roman = {\n M: 1000,\n CM: 900,\n D: 500,\n CD: 400,\n C: 100,\n XC: 90,\n L: 50,\n XL: 40,\n X: 10,\n IX: 9,\n V: 5,\n IV: 4,\n I: 1\n };\n var str = '';\n\n for (var i of Object.keys(roman)) {\n var q = Math.floor(num / roman[i]);\n num -= q * roman[i];\n str += i.repeat(q);\n }\n\n return str;\n }\n\n let coin_title = Object.assign([], coin_id);\n\n let coin_title_length = coin_title.length;\n\n if (coin_title_length === 0) return coin_id;\n coin_title[0] = coin_title[0].toUpperCase();\n for (let i = 0; i < coin_title_length; i++) {\n if (coin_title[i] === '(') break; // For bibliography numbers shouldn't get romanized\n if (coin_title[i] === '_') {\n coin_title[i] = ' ';\n if (i < coin_title_length)\n coin_title[i + 1] = coin_title[i + 1].toUpperCase();\n } else if (!isNaN(coin_title[i])) {\n let num_of_digits = 1;\n let num_str = [];\n num_str.push(coin_title[i]);\n for (let j = i + 1; j < coin_title_length && !isNaN(coin_title[j]); j++) {\n num_of_digits++;\n num_str.push(coin_title[j]);\n }\n let roman_numeral = ConvertToRoman(parseInt(num_str));\n coin_title.splice(i, 1, roman_numeral);\n\n coin_title.splice(i, 0, ' ');\n coin_title_length = coin_title.length;\n i += num_of_digits;\n }\n }\n\n return coin_title.join(\"\");\n}\n\nexport function IfEmptyReturnNotApplicable(str) {\n return (str?.length === 0) ? \"N/A\" : str;\n}\n\nexport function IfEmptyReturnNone(str) {\n return (str?.length === 0) ? \"N/A\" : str;\n}\n\nexport function IfUrlHrefElseString(str) {\n function isUrl(string) {\n let url;\n\n try {\n url = new URL(string);\n } catch (_) {\n return false;\n }\n\n return url.protocol === \"http:\" || url.protocol === \"https:\";\n }\n\n if (isUrl(str))\n return (\n <a className='coin-info-url' href={str}>{str}</a>\n );\n else \n return (\n IfEmptyReturnNotApplicable(str)\n );\n}\n\nexport function CoinAlt(coin) {\n return (coin.alternativeText == null || coin.alternativeText.length === 0) ? \"coin_image\" : coin.alternativeText;\n}\n\n// const References = (props) => {\n// if ((props.coinMetaData.ref1 == null || props.coinMetaData.ref1.length === 0) && \n// (props.coinMetaData.ref2 == null || props.coinMetaData.ref1.length === 0)) \n// return <div></div>;\n\n// if (props.coinMetaData.ref1 == null || props.coinMetaData.ref1.length === 0)\n// return (\n// <div className='coin-info-ref-1'>\n// <span className='coin-info-small-gray-text'>REFERENCE:<br /></span>\n// <span className='coin-info-dark-text'>{IfUrlHrefElseString(props.coinMetaData.ref2)}</span>\n// </div>\n// );\n// else if (props.coinMetaData.ref2 == null || props.coinMetaData.ref2.length === 0)\n// return (\n// <div className='coin-info-ref-1'>\n// <span className='coin-info-small-gray-text'>REFERENCE:<br /></span>\n// <span className='coin-info-dark-text'>{IfUrlHrefElseString(props.coinMetaData.ref1)}</span>\n// </div>\n// );\n// else \n// return (\n// <>\n// <div className='coin-info-ref-1'>\n// <span className='coin-info-small-gray-text'>REFERENCE:<br /></span>\n// <span className='coin-info-dark-text'>{IfUrlHrefElseString(props.coinMetaData.ref1)}</span>\n// </div>\n// <div className='coin-info-ref-2'>\n// <span className='coin-info-small-gray-text'>REFERENCE:<br /></span>\n// <span className='coin-info-dark-text'>{IfUrlHrefElseString(props.coinMetaData.ref2)}</span>\n// </div>\n// </>\n// );\n// }\n\nfunction CoinScaleAndFlip(props) {\n const [coin_rotation, set_coin_rotation] = useState('rotateY(0deg)');\n const [dotted_circle_height, set_dotted_circle_height] = useState('0%');\n const [is_img_scaled, set_is_img_scaled] = useState(false);\n const [size_diameter_jsx, set_size_diameter_jsx] = useState('0');\n\n const ResetCoin = () => {\n set_coin_rotation('rotateY(0deg)');\n set_dotted_circle_height('0%');\n set_is_img_scaled(false);\n };\n\n useEffect(() => {\n ResetCoin();\n }, [props.coinMetaData]);\n\n useEffect(() => {\n if (is_img_scaled)\n set_size_diameter_jsx('1em');\n else\n set_size_diameter_jsx('0');\n }, [is_img_scaled, props.coinMetaData.diameter]);\n\n const ScaleCoin = () => {\n if (is_img_scaled) {\n set_dotted_circle_height('0%');\n } else {\n set_dotted_circle_height('80%');\n\n // I did some tricky math to get these numbers. \n // jk it's just proportionalities with the dotted circle's height and the \n // fact that the dotted circle is 50mm\n const box_percent = 100;\n const box_height_mm = 62.5;\n let height_of_coin_percent = (box_percent / box_height_mm) * props.coinMetaData.diameter;\n\n if (height_of_coin_percent == null || height_of_coin_percent === 0) {\n height_of_coin_percent = 5;\n }\n }\n \n set_is_img_scaled(!is_img_scaled);\n };\n\n const RotateCoin = () => {\n if (coin_rotation.includes('(0deg)')) {\n set_coin_rotation('rotateY(180deg)');\n } else {\n set_coin_rotation('rotateY(0deg)');\n }\n };\n\n if (props.coinMetaData.obverse_file.data == null || props.coinMetaData.reverse_file.data == null)\n return (\n <div className='coin-image-box'>\n <div className='coin-info-no-image coin-info-dark-text'>\n No image\n </div>\n </div>\n );\n\n return (\n <div className='coin-image-box'>\n <div className='coin-info-dotted-circle' style={{height: dotted_circle_height}}/>\n <div className='coin-info-image-diameter-box coin-info-dark-text' style={{fontSize: size_diameter_jsx}}>\n DIAMETER: {props.coinMetaData.diameter == null ? 'N/A' : `${props.coinMetaData.diameter}mm`}\n </div>\n <div className='flip-box'>\n <div className='flip-box-inner' style={{ transform: coin_rotation }}>\n <div className='flip-box-front'>\n <img\n alt={CoinAlt(props.coinMetaData.obverse_file.data.attributes)}\n className='coin-info-image-flip coin-info-image-flip-front'\n src={process.env.REACT_APP_strapiURL + props.coinMetaData.obverse_file.data.attributes.url}\n />\n </div>\n <div className='flip-box-back'>\n <img\n alt={CoinAlt(props.coinMetaData.obverse_file.data.attributes)}\n className='coin-info-image-flip coin-info-image-flip-back'\n src={process.env.REACT_APP_strapiURL + props.coinMetaData.reverse_file.data.attributes.url}\n />\n </div>\n </div>\n </div>\n {/*** Scale and Rotate button. MUST be rendered after coin image ***/}\n <div\n className='demo-icon coin-info-icon-rotate'\n onClick={RotateCoin}>\n \n </div> \n <div\n className='demo-icon coin-info-scale-icon'\n onClick={ScaleCoin}>\n \n </div>\n </div>\n );\n}\n\n\nconst CoinInfo = (props) => {\n props.coinMetaData.coin_title = CoinIdIntoTitle(props.coinMetaData.coin_id);\n const CloseHandler = (e) => { \n props.onClose(false);\n };\n \n return (\n <WhitePopUp show={props.show} onClose={CloseHandler}>\n <div className='coin-info'>\n {/*** coin image ***/}\n <div className='coin-info-title text-center mb-5'>{props.coinMetaData.issuing_authority} {props.coinMetaData.mint} {props.coinMetaData.material}</div>\n <div className=\"coin-info-subtitle text-center my-3 mb-5\">{props.coinMetaData.date_range}</div>\n\n <div className='coin-info-basic mb-3'>\n <div className='coin-info-basic-left'>\n <div className='coin-info-basic-text text-center mb-3'>OBVERSE TYPE:</div>\n <div className='coin-info-basic-content text-center mb-5'>{IfEmptyReturnNone(props.coinMetaData.obverse_type)}</div>\n <div className='coin-info-basic-text text-center mb-3'>OBVERSE LEGEND:</div>\n <div className='coin-info-basic-content text-center mb-5'>{IfEmptyReturnNone(props.coinMetaData.obverse_legend)}</div>\n </div>\n <div className='coin-info-basic-right'>\n <div className='coin-info-basic-text text-center mb-3'>REVERSE TYPE:</div>\n <div className='coin-info-basic-content text-center mb-5'>{IfEmptyReturnNone(props.coinMetaData.reverse_type)}</div>\n <div className='coin-info-basic-text text-center mb-3'>REVERSE LEGEND:</div>\n <div className='coin-info-basic-content text-center mb-5'>{IfEmptyReturnNone(props.coinMetaData.reverse_legend)}</div>\n </div>\n </div>\n <hr />\n <div className='coin-info-detail my-5'>\n <div className='coin-info-detail-left'>\n <div className='coin-info-image'>\n <CoinScaleAndFlip coinMetaData={props.coinMetaData} />\n </div>\n </div>\n <div className='coin-info-detail-right'>\n <div className='coin-info-detail-text text-left mb-5'>ANCIENT TERRITORY:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{IfEmptyReturnNone(props.coinMetaData.ancient_territory)}</span></div>\n <div className='coin-info-detail-text text-left mb-5'>MODERN COUNTRY:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{IfEmptyReturnNone(props.coinMetaData.modern_country)}</span></div>\n <div className='coin-info-detail-text text-left mb-5'>MINT:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{IfEmptyReturnNone(props.coinMetaData.mint)}</span></div>\n <div className='coin-info-detail-text text-left mb-5'>MODERN NAME:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{IfEmptyReturnNone(props.coinMetaData.mint_modern_name)}</span></div>\n <div className='coin-info-detail-text text-left mb-5'>GOVERNING POWER:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{props.coinMetaData.governing_power.data?.attributes.governing_power ?? 'N/A'}</span></div>\n <div className='coin-info-detail-text text-left mb-5'>ISSUING AUTHORITY:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{IfEmptyReturnNone(props.coinMetaData.issuing_authority)}</span></div>\n <div className='coin-info-detail-text text-left mb-5'>LANGUAGE:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{IfEmptyReturnNone(props.coinMetaData.language)}</span></div>\n <div className='coin-info-detail-text text-left mb-5'>MATERIAL:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{IfEmptyReturnNone(props.coinMetaData.material)}</span></div>\n <div className='coin-info-detail-text text-left mb-5'>DENOMINATION:<span style={{marginLeft:\"0.5em\"}} className='coin-info-detail-content'>{IfEmptyReturnNone(props.coinMetaData.denomination)}</span></div>\n </div>\n </div>\n\n <div className='coin-info-reference '>\n <div className='coin-info-reference-text text-center'>SOURCE IMAGE: \n <span style={{marginLeft:\"0.25em\"}} className='coin-info-reference-content'>\n {props.coinMetaData.source_image ?(<>\n <a href={props.coinMetaData.source_image} target=\"_blank\" rel=\"noopener noreferrer\">{props.coinMetaData.source_image} </a>\n </>) : (<></>)}\n </span>\n </div>\n <div className='coin-info-reference-text text-center'>RIGHTS HOLDER: <span style={{marginLeft:\"0.25em\"}} className='coin-info-reference-content'>{IfUrlHrefElseString(props.coinMetaData.right_holder) ?? 'N/A'}</span></div>\n {props.coinMetaData.coin_id.split(\"(\")[1]?.split(\")\")[0] ? (<div className='coin-info-reference-text text-center'>REFERENCE: \n <span style={{marginLeft:\"0.25em\"}} className='coin-info-reference-content'>{props.coinMetaData.coin_id.split(\"(\")[1]?.split(\")\")[0]}</span></div>):(<></>)}\n </div>\n </div>\n </WhitePopUp>\n );\n}\nexport default CoinInfo;\n","import React, { useEffect, useState } from 'react';\nimport qs from 'qs';\nimport axios from 'axios';\n\nimport CoinInfo, { CoinAlt } from 'src/components/coin/CoinInfo.js';\nimport { Tooltip, OverlayTrigger } from 'react-bootstrap';\n// This is JUST the coin scale and flip you see when you put more coins onto the grid.\nexport const CoinScaleAndFlip = (props) => {\n const [coin_rotation, set_coin_rotation] = useState('rotateY(0deg)');\n const [img_height, set_img_height] = useState('100%');\n const [dotted_circle_height, set_dotted_circle_height] = useState('0%');\n const [is_img_scaled, set_is_img_scaled] = useState(false);\n const [size_diameter_jsx, set_size_diameter_jsx] = useState('0');\n\n const [show_coin_info, set_show_coin_info] = useState(false);\n const CoinInfoPopupCloseHandler = (e) => { // This is used to show / remove popup on certain conditions\n set_show_coin_info(e);\n };\n\n // Reset coin back to unscaled and unrotated\n const ResetCoin = () => {\n set_coin_rotation('rotateY(0deg)');\n set_img_height('100%');\n set_dotted_circle_height('0%');\n set_is_img_scaled(false);\n };\n\n // If new data appears, reset the coin\n useEffect(() => {\n ResetCoin();\n }, [props.coinMetaData]);\n\n useEffect(() => {\n if (is_img_scaled)\n set_size_diameter_jsx('.8em');\n else\n set_size_diameter_jsx('0');\n }, [is_img_scaled, props.coinMetaData.diameter]);\n\n const ScaleCoin = () => {\n if (is_img_scaled) {\n set_dotted_circle_height('0%');\n set_img_height('100%');\n } else {\n set_dotted_circle_height('80%');\n\n // I did some tricky math to get these numbers. \n // jk it's just proportionalities with the dotted circle's height and the \n // fact that the dotted circle is 50mm\n const box_percent = 100;\n const box_height_mm = 62.5;\n let height_of_coin_percent = (box_percent / box_height_mm) * props.coinMetaData.diameter;\n\n if (height_of_coin_percent == null || height_of_coin_percent === 0) {\n height_of_coin_percent = 5;\n }\n\n set_img_height(`${height_of_coin_percent}%`);\n }\n\n set_is_img_scaled(!is_img_scaled);\n };\n\n const RotateCoin = () => {\n if (coin_rotation.includes('(0deg)')) {\n set_coin_rotation('rotateY(180deg)');\n } else {\n set_coin_rotation('rotateY(0deg)');\n }\n };\n\n // Set rotatation\n useEffect(() => {\n if (props.rotate) {\n set_coin_rotation('rotateY(180deg)');\n } else {\n set_coin_rotation('rotateY(0deg)');\n }\n }, [props.rotate]);\n\n useEffect(() => {\n if ((props.scale && !is_img_scaled) || (!props.scale && is_img_scaled)) {\n ScaleCoin();\n }\n }, [props.scale]); // IGNORE the warning. This is so that scale all can unscale just 1 or 2 coins if needed.\n\n const renderTooltipScale = (props) => (\n <Tooltip id=\"button-tooltip\" {...props}>\n scale to size\n </Tooltip>\n );\n const renderTooltipFlip = (props) => (\n <Tooltip id=\"button-tooltip\" {...props}>\n flip the coin\n </Tooltip>\n );\n // Edge case where no image is present.\n if (props.coinMetaData.obverse_file.data == null || props.coinMetaData.reverse_file.data == null)\n return (\n <div className='coin-image-box'>\n <div className='coin-info-no-image coin-info-dark-text'>\n No image\n </div>\n </div>\n );\n\n return (\n <div id={props.id} className={props.className}>\n <div className='coin-image-box coin-sort-grid-cell-image-box'>\n <div className='coin-info-dotted-circle' style={{height: dotted_circle_height}}/>\n <div className='coin-info-image-diameter-box coin-info-dark-text' style={{fontSize: size_diameter_jsx}}>\n {props.coinMetaData.diameter == null ? 'N/A' : `${props.coinMetaData.diameter}mm`}\n </div>\n <div className='flip-box coin-sort-grid-cell-flip-box' onClick={() => {set_show_coin_info(true)}}>\n <div className='flip-box-inner' style={{ transform: coin_rotation }}>\n <div className='flip-box-front'>\n <img\n alt={CoinAlt(props.coinMetaData.obverse_file.data.attributes)}\n className='coin-info-image-flip coin-info-image-flip-front'\n src={process.env.REACT_APP_strapiURL + props.coinMetaData.obverse_file.data.attributes.url}\n height={img_height}\n />\n </div>\n <div className='flip-box-back'>\n <img\n alt={CoinAlt(props.coinMetaData.obverse_file.data.attributes)}\n className='coin-info-image-flip coin-info-image-flip-back'\n src={process.env.REACT_APP_strapiURL + props.coinMetaData.reverse_file.data.attributes.url}\n height={img_height}\n />\n </div>\n </div>\n </div>\n {/*** Scale and Rotate button. MUST be rendered after coin image ***/}\n <div className='coin-sort-grid-cell-icons-div'>\n <i \n className='demo-icon icon-x-thin coin-info-icon-x'\n onClick={() => {\n props.removeCoin(props.coinId)\n }}\n >\n \n </i>\n <OverlayTrigger\n placement=\"bottom\"\n delay={{ show: 250, hide: 400 }}\n overlay={renderTooltipFlip}\n >\n <i className='demo-icon coin-info-icon-rotate' onClick={RotateCoin}></i> \n </OverlayTrigger>\n <OverlayTrigger\n placement=\"bottom\"\n delay={{ show: 250, hide: 400 }}\n overlay={renderTooltipScale}\n >\n <i className='demo-icon coin-info-scale-icon' onClick={ScaleCoin}></i>\n </OverlayTrigger>\n </div>\n <CoinInfo onClose={CoinInfoPopupCloseHandler} show={show_coin_info} coinMetaData={props.coinMetaData} />\n </div>\n </div>\n );\n}\n\n// This is the drag and drop box. It listens for onDragEnter and calls the passed in (through props) onDragEnter function.\nconst DropBox = (props) => {\n const [on_drag_style, set_on_drag_style] = useState(undefined);\n return (\n <div \n className='coin-sort-drag-coin-box' \n style={on_drag_style}\n >\n <p className='coin-sort-drag-coin-box-text'>\n DRAG COIN HERE\n </p>\n <div className='coin-sort-drag-coin-box-hover-element'\n onDragEnter={() => {\n props.onDragEnter();\n set_on_drag_style({\n backgroundColor: 'rgba(119, 153, 168, 0.74)',\n color: 'white',\n });\n }}\n onDragLeave={() => {\n set_on_drag_style({});\n }}\n />\n </div>\n );\n}\n\n// This will have 6 different layout options\n// 1 x 1\n// 2 x 1\n// 3 x 1\n// 2 x 2\n// 3 x 2\n// 6 x 3\nexport const CoinGrid = (props) => {\n const [coin_ids, set_coin_ids] = useState([]);\n const AddCoin = () => {\n if (props.coinToAdd != null && !coin_ids.includes(props.coinToAdd)) \n set_coin_ids([...coin_ids, props.coinToAdd]);\n };\n\n const RemoveCoin = (coin_id) => {\n let new_coin_ids = JSON.parse(JSON.stringify(coin_ids));\n let remove_value_at_index = new_coin_ids.findIndex((e) => e === coin_id);\n new_coin_ids.splice(remove_value_at_index, 1);\n if (remove_value_at_index !== -1)\n set_coin_ids(new_coin_ids);\n };\n\n const [coins, set_coins] = useState([]);\n\n useEffect(() => {\n props.showScaleAndRotate(coin_ids.length !== 0);\n }, [props, coin_ids]);\n\n useEffect(() => {\n if (coin_ids.length !== 0) {\n axios.get(process.env.REACT_APP_strapiURL + `/api/coins?${qs.stringify({\n filters: {\n id: {\n $in: coin_ids,\n }\n }\n })}`).then((res, err) => {\n if (err) {\n console.error(err);\n } else {\n set_coins(res.data.data);\n }\n });\n }\n }, [coin_ids]);\n\n return (\n <div id='coin-sort-drag-coin-box-outer-div'>\n {(() => {\n if (coin_ids.length === 0) { // Draw the big drag box\n return (\n <div id='coin-sort-drag-box-full'>\n <DropBox onDragEnter={AddCoin}/>\n </div>\n );\n } else { // Draw the coin(s) and one drag box in one of the cells\n const FetchCoinsJSXarr = (css_id) => { \n let jsx = coins.map((coin, index) => (\n <CoinScaleAndFlip \n id={`${css_id}${index+1}`} \n className={`${css_id}styling`} \n key={index}\n coinMetaData={coin.attributes}\n coinId={coin.id}\n rotate={props.rotateAll}\n scale={props.scaleAll}\n removeCoin={RemoveCoin}\n />\n ));\n\n // Edge case. We shouldn't draw DropBox if the 6x3 grid array is full of coins\n if (coins.length < 18) {\n jsx.push(\n <div id={`${css_id}${jsx.length+1}`} className={`${css_id}styling`} key={jsx.length+1}>\n <div className='coin-sort-drag-box-in-coin-grid'>\n <DropBox onDragEnter={AddCoin}/>\n </div>\n </div>\n );\n }\n return jsx;\n }\n\n // Set arrangement\n const { length } = coins;\n let size = '';\n\n if (length === 1)\n size = '2x1';\n else if (length === 2)\n size = '3x1';\n else if (length === 3)\n size = '2x2';\n else if (length === 4 || length === 5)\n size = '3x2';\n else if (length < 19)\n size = '6x3';\n else\n console.error('No Coin arrangment with', length, 'coins');\n\n if (size === '')\n return;\n\n // Display grid and coins + DropBox if applicable\n return (\n <div id='coin-sort-grid-arrangement-wrapper'>\n <div id={`coin-sort-grid-${size}-arrangement`}>\n {FetchCoinsJSXarr(`coin-sort-grid-${size}-cell-`)}\n </div>\n </div>\n );\n }\n })()}\n </div>\n );\n}\n","import React from 'react';\n\nimport WhitePopUp from 'src/utils/WhitePopUp.js';\nimport Markup from 'src/utils/Markup.js';\n\nexport const ToolTipsBoxJSX = (props) => {\n if (props?.toolTips?.title == null) return <div></div>;\n let jsx = undefined;\n const toolTips = props.toolTips;\n // Three tooltip types possible. Need to be prepared to parse all three\n if (toolTips?.grid_1x1 != null && \n toolTips?.grid_2x1 != null && \n toolTips?.grid_3x1 != null && \n toolTips?.grid_2x2 != null && \n toolTips?.grid_3x2 != null && \n toolTips?.grid_6x3 != null) { // Arrangment\n jsx = (\n <div className='coin-sort-tool-tips'>\n <div className='coin-sort-tool-tips-title'>\n {toolTips.title}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>1 x 1 Grid:</strong> {toolTips.grid_1x1}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>2 x 1 Grid:</strong> {toolTips.grid_2x1}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>3 x 1 Grid:</strong> {toolTips.grid_3x1}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>2 x 2 Grid:</strong> {toolTips.grid_2x2}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>3 x 2 Grid:</strong> {toolTips.grid_3x2}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>6 x 3 Grid:</strong> {toolTips.grid_6x3}\n </div>\n </div>\n );\n } else if (toolTips?.sub_title != null &&\n toolTips?.minting_date != null &&\n toolTips?.material != null &&\n toolTips?.issuing_authority != null &&\n toolTips?.governing_power != null &&\n toolTips?.size != null) { // Sorting\n jsx = (\n <div className='coin-sort-tool-tips'>\n <div className='coin-sort-tool-tips-title'>\n {toolTips.title}\n </div>\n <div className='coin-sort-tool-tips-text'>\n {toolTips.sub_title}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Minting Date:</strong> {toolTips.minting_date}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Material:</strong> {toolTips.material}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Issuing Authority:</strong> {toolTips.issuing_authority}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Governing Power:</strong> {toolTips.governing_power}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Size:</strong> {toolTips.size}\n </div>\n </div>\n );\n } else if (toolTips?.sub_title != null &&\n toolTips?.minting_date != null &&\n toolTips?.material != null &&\n toolTips?.issuing_authority != null &&\n toolTips?.governing_power != null &&\n toolTips?.type != null) { // Filtering\n jsx = (\n <div className='coin-sort-tool-tips'>\n <div className='coin-sort-tool-tips-title'>\n {toolTips.title}\n </div>\n <div className='coin-sort-tool-tips-text'>\n {toolTips.sub_title}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Minting Date:</strong> {toolTips.minting_date}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Material:</strong> {toolTips.material}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Issuing Authority:</strong> {toolTips.issuing_authority}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Governing Power:</strong> {toolTips.governing_power}\n </div>\n <div className='coin-sort-tool-tips-text'>\n <strong style={{color: '#183848'}}>Type:</strong> {toolTips.type}\n </div>\n </div>\n );\n } else {\n console.err('Tool tip with this set of objects is not setup:', toolTips);\n }\n const CloseHandler = () => {\n props.onClose(false);\n };\n\n return (\n <WhitePopUp show={props.show} onClose={CloseHandler}>\n {jsx}\n </WhitePopUp>\n );\n}\n\nexport const MainText = (props) => {\n return (\n <div id='coin-sort-main-text-wrapper'>\n <div id='coin-sort-main-text'>\n <div id='coin-sort-main-text-title'>\n {props.content?.title}\n </div>\n <div id='coin-sort-main-text' dangerouslySetInnerHTML={Markup(props.content?.text)}/>\n </div>\n </div>\n );\n}\n","import React, { useState } from 'react';\nimport OutsideClickHandler from 'src/utils/OutsideClickHandler.js';\nimport { ToolTipsBoxJSX } from './CoinSortExtraFunctions.js';\n\nexport default function CoinSortDropDown(props){\n const [show, set_show] = useState(false);\n const [show_tool_tips, set_show_tool_tips] = useState(false);\n \n const CloseHandler = () => {\n set_show(false);\n }\n \n const OpenHandler = () => {\n set_show(true);\n }\n \n const Select = (e) => {\n set_show(false);\n props.setState(e.target.dataset.selection);\n }\n \n let display_styling = {\n opacity: show ? 1 : 0,\n zIndex: show ? 1000 : -1000,\n };\n \n // This is the list of items available.\n let selection_jsx = props.selections.map((e, index) => (\n <div \n key={`coin_sort_dropdown_${e + index}`} \n className='coin-sort-dropdown-item' \n onClick={Select} \n data-selection={e}>\n <p data-selection={e} className='coin-sort-dropdown-item-text'>\n {e} { index === 0 &&\n <i className='coin-sort-dropdown-arrow' style={{position: 'absolute', right: '0', marginRight: '20px'}}/>\n }\n </p>\n <hr data-selection={e} className='coin-sort-dropdown-item-line-spacer' />\n </div>\n ));\n \n return (\n <div className='coin-sort-option mx-3'>\n <p className='coin-sort-dropdown-title-text'>\n {props.title}{(() => {\n if (props.toolTips != null) { \n return (<i \n className='demo-icon icon-info coin-sort-info-icon'\n onClick={() => {\n set_show_tool_tips(!show_tool_tips);\n }}></i>\n );\n } else {\n return <></>;\n }\n })()}\n </p>\n <div className='coin-sort-dropdown-outermost-div'>\n <div className='coin-sort-dropdown-bar' onClick={OpenHandler}>\n <p className='coin-sort-dropdow-bar-text blue-text'>\n {props.state}\n </p>\n <i className='coin-sort-dropdown-arrow'/>\n </div>\n <OutsideClickHandler show={show} onOutsideClick={CloseHandler}>\n <div className='coin-sort-dropdown' style={display_styling}>\n <div className='coin-sort-dropdown-items'>\n {selection_jsx}\n </div>\n </div>\n </OutsideClickHandler>\n {(() => {\n if (props.clearTitle != null && props.showClear) {\n return (\n <div \n className='coin-sort-clear-button' \n onClick={props.clear}>\n <i className=\"demo-icon icon-warning\"></i>{props.clearTitle}\n </div>\n );\n } else {\n return <></>;\n }\n })()}\n </div>\n {(() => {\n if (props.toolTips) { \n return <ToolTipsBoxJSX\n show={show_tool_tips}\n onClose={(e) => {set_show_tool_tips(e);}} \n toolTips={props.toolTips}\n />;\n } else {\n return <></>;\n }\n })()}\n </div>\n );\n }","// Default coin pile strategy gets a random y, and plots it with a random x as long as the x is within the integral of and non-negative:\n// -4 * (x - 0.5)^4 + 1.5 * (x - 0.5)^2 + .2\n// You can plot that in desmos.\nexport function DefaultCoinPileGraphingStategy(coin) {\n let y = Math.random();\n const CoinSortGraphingFormula = (x) => {\n return -4 * Math.pow(x - 0.5, 4) + 1.5 * Math.pow(x - 0.5, 2) + .2;\n };\n let x = Math.random() * CoinSortGraphingFormula(y);\n \n if (coin.id % 2 === 0) {\n x = 1 - x;\n } \n return {\n x: x,\n y: y,\n };\n }\n\n\n // Randomly selects numbers from a Gaussian distribution between (0, 1)\n export function RandnBm() {\n let u = 0, v = 0;\n while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)\n while(v === 0) v = Math.random();\n let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );\n num = num / 10.0 + 0.5; // Translate to 0 -> 1\n if (num > 1 || num < 0) return RandnBm() // resample between 0 and 1\n return num\n }\n \n // This function adds Gaussian deviation to make the original value a little messier\n export function GaussianDeviationOnValue(val, deviation) {\n let min = val - deviation;\n let max = val + deviation;\n return RandnBm() * (max - min) + min;\n }\n\n // This function converts the data we recieve from strapi into a more easily parsed data format\nexport function SimplyMappedCoin(coin, index) {\n return {\n props_index: index,\n id: coin.id,\n from_date: coin.attributes.from_date,\n material: coin.attributes.material,\n issuing_authority: coin.attributes.issuing_authority,\n governing_power: coin.attributes.governing_power?.data?.attributes?.governing_power, // for some reason, it be bugging with governing_power. The ?. operator fixes it\n size: coin.attributes.diameter\n };\n }\n\n \n// This evenly distrubutes the pile locations along the left, bottom, and right side of the CoinPile div.\nexport function CoinPileLocations(arr_length) {\n const deviation = .1;\n const bottom_start_point = .1;\n const bottom_end_point = 1;\n const side_start_point = .1;\n const side_end_point = .8;\n \n // Get the number of piles we need per side.\n // Left and Right side must have the same number of piles.\n let num_piles_bottom = 0, num_piles_on_sides = 0;\n if (arr_length % 3 === 0) {\n num_piles_on_sides = arr_length / 3;\n num_piles_bottom = arr_length / 3;\n } else if (arr_length % 3 === 1) {\n num_piles_on_sides = Math.floor(arr_length / 3);\n num_piles_bottom = Math.ceil(arr_length / 3);\n } else {\n num_piles_bottom = Math.ceil(arr_length / 3) + 1;\n num_piles_on_sides = Math.floor(arr_length / 3);\n }\n \n if (arr_length === 2) {\n num_piles_bottom = 0;\n num_piles_on_sides = 1;\n } else if (arr_length === 1) {\n num_piles_bottom = 1;\n num_piles_on_sides = 0;\n }\n \n // This goes left to right plotting evenly spaced points\n let bottom_points = [];\n for (let i = bottom_start_point; i < bottom_end_point && num_piles_bottom !== 0; i += (bottom_end_point - bottom_start_point) / num_piles_bottom) {\n bottom_points.push({x: i, y: GaussianDeviationOnValue(.8, deviation)});\n }\n \n // This goes top to bottom plotting evenly spaced points\n let left_side_points = [];\n let right_side_points = [];\n for (let i = side_start_point; i < side_end_point && num_piles_on_sides !== 0; i += (side_end_point - side_start_point) / num_piles_on_sides) {\n left_side_points.push({ x: GaussianDeviationOnValue(.15, deviation), y: i });\n right_side_points.push({ x: GaussianDeviationOnValue(.95, deviation), y: i });\n }\n right_side_points = right_side_points.reverse();\n \n return left_side_points.concat(bottom_points).concat(right_side_points);\n }\n ","import axios from \"axios\";\nimport qs from 'qs';\nconst coinSortRequest = {\n\n coinFectAll: ()=>{\n let query = qs.stringify({\n filters:{\n catalog_coinsort_set:true\n },\n populate: [\n 'obverse_file',\n 'governing_power',\n 'type_category',\n ],\n pagination: {\n page: 1,\n pageSize: 2147483647,\n }\n });\n\n return axios(`${process.env.REACT_APP_strapiURL}/api/coins?${query}`,{\n method:'GET',\n })\n },\n coinStotlight: ()=>{\n let query = qs.stringify({\n filters:{\n spotlight_on:true\n },\n populate: [\n 'obverse_file',\n 'reverse_file',\n 'governing_power',\n 'type_category',\n ],\n pagination: {\n page: 1,\n pageSize: 2147483647,\n }\n });\n\n return axios(`${process.env.REACT_APP_strapiURL}/api/coins?${query}`,{\n method:'GET',\n })\n },\n\n coinSortFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/coin-sort`,{\n method:'GET',\n })\n },\n\n}\nexport default coinSortRequest","import React, { useRef, useEffect, useState } from 'react';\nimport axios from 'axios';\n\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport NoFeedBackIcon from 'src/components/constant/NoFeedBackIcon.js';\nimport { CoinGrid } from './CoinSortCoinGrid.js';\nimport CoinSortDropDown from './CoinSortDropDown.js';\n\nimport {\n DefaultCoinPileGraphingStategy, \n GaussianDeviationOnValue, \n SimplyMappedCoin,\n CoinPileLocations\n} from './CoinUtils.js';\nimport { Tooltip, OverlayTrigger } from 'react-bootstrap';\nimport coinSortRequest from 'src/api/coin-sort'\n// Praise be god to the next maintaner. \n// You have been blessed\n\n// This is a set of constant values that relate to enumerations and data inside of strapi.\n// You can't fetch enumerations so you must do it this way.\n// Keep in mind, if you change the coins enumeration, it will also break this\n// const arrangement_selections = ['None', '1 x 1 Grid', '2 x 1 Grid', '3 x 1 Grid', '2 x 2 Grid', '3 x 2 Grid', '6 x 3 Grid'];\n// const arrangement_selections_query_relation = [0, 1, 2, 3, 4, 6, 18];\nconst sort_selections = ['None', 'Minting Date', 'Material', 'Issuing Authority', 'Governing Power', 'Size'];\n// const sort_selections_query_relation = ['', 'from_date', 'material', 'issuing_authority', 'governing_power.data.attributes.governing_power', 'diameter'];\nconst then_by_selections = ['None', 'Minting Date', 'Material', 'Issuing Authority', 'Governing Power', 'Size'];\n// const then_by_selections_query_relation = ['', 'from_date', 'material', 'issuing_authority', 'governing_power.data.attributes.governing_power', 'diameter'];\nconst filter_selections = ['None', 'Including', 'Excluding'];\nconst filter_selections_query_relation = [null, true, false];\nconst with_selections = ['None', 'Minting Date', 'Material', 'Issuing Authority', 'Governing Power', 'Size'];\n// const with_selections_query_relation = ['', 'from_date', 'material', 'issuing_authority', 'governing_power.data.attributes.governing_power', 'diameter'];\nconst of_kind_no_selections = ['None'];\n\n// const of_kind_from_date_selections = [\n// 'None',\n// 'past - 450 B.C.E',\n// '450 B.C.E - 350 B.C.E',\n// '350 B.C.E - 250 B.C.E',\n// '250 B.C.E - 150 B.C.E',\n// '150 B.C.E - 50 B.C.E',\n// '50 B.C.E - 50 C.E.',\n// '50 C.E - 150 C.E',\n// '150 C.E - 250 C.E',\n// '250 C.E - 350 C.E',\n// '350 C.E - 450 C.E',\n// '450 C.E - present',\n// ];\n\nconst of_kind_from_date_selections = [\n 'None',\n 'before - 500 B.C.E',\n '500 B.C.E - 401 B.C.E',\n '400 B.C.E - 301 B.C.E',\n '300 B.C.E - 201 B.C.E',\n '200 B.C.E - 101 B.C.E',\n '100 B.C.E - 1 B.C.E',\n '1 C.E - 99 C.E',\n '100 C.E - 199 C.E',\n '200 C.E - 299 C.E',\n '300 C.E - 399 C.E',\n '400 C.E - present',\n ];\n\n// const of_kind_from_date_query_relation = [\n// {gte: -2147483648, lte: 2147483647},\n// {gte: -2147483648, lte: -450},\n// {gte: -450, lte: -350},\n// {gte: -350, lte: -250},\n// {gte: -250, lte: -150},\n// {gte: -150, lte: -50},\n// {gte: -50, lte: 50},\n// {gte: 50, lte: 150},\n// {gte: 150, lte: 250},\n// {gte: 250, lte: 350},\n// {gte: 350, lte: 450},\n// {gte: 450, lte: 2147483647},\n// ];\n\nconst of_kind_from_date_query_relation = [\n {gte: -2147483648, lte: 2147483647},\n {gte: -2147483648, lte: -500},\n {gte: -500, lte: -401},\n {gte: -400, lte: -301},\n {gte: -300, lte: -201},\n {gte: -200, lte: -101},\n {gte: 1, lte: 99},\n {gte: 100, lte: 199},\n {gte: 200, lte: 299},\n {gte: 300, lte: 399},\n {gte: 400, lte: 2147483647},\n];\nconst of_kind_material_selections = ['None','Gold','Silver','Bronze','Orichalcum','Uncertain'];\nconst of_kind_issuing_authority_selections = ['None','Royal','Imperial','Provincial','Civic','Uncertain',];\nconst of_kind_governing_power_selections = [];\n(async () => {\n const { data } = await axios.get(`${process.env.REACT_APP_strapiURL}/api/governing-powers`);\n let arr = data.data.map(({ attributes }) => attributes.governing_power);\n of_kind_governing_power_selections.push('None', ...arr);\n})();\nconst of_kind_size_selections = [\n 'None',\n '1mm - 10mm',\n '10mm - 15mm',\n '15mm - 20mm',\n '20mm - 25mm',\n '25mm - 30mm',\n '30mm - 35mm',\n '35mm - 40mm',\n '40mm - 50mm',\n 'Uncertain',\n];\nconst of_kind_size_query_relation = [\n {gte: -2147483648, lte: 2147483647},\n {gte: 1, lte: 10},\n {gte: 10, lte: 15},\n {gte: 15, lte: 20},\n {gte: 20, lte: 25},\n {gte: 25, lte: 30},\n {gte: 30, lte: 35},\n {gte: 35, lte: 40},\n {gte: 40, lte: 50},\n {gte: null, lte: null},\n];\n\n// This displays the individual coins on the screen.\nconst Coin = (props) => {\n const thumbnail_scale = 2;\n let x = props.x * props.dimensions.width;\n let y = props.y * props.dimensions.height;\n let width = props.coinMetaData.attributes.diameter * thumbnail_scale; // This is how we get the differently sized coins showing up properly\n if ((x + width) > props.dimensions.width) x = props.dimensions.width - width;\n if ((y + width) > props.dimensions.height) y = props.dimensions.height - width;\n if (x < 0) x = 0;\n if (y < 0) y = 0;\n\n if (!props.display) { // If display is false, send to shadow realm\n x = -10000;\n y = -10000;\n }\n\n // const handleClick = () => {\n // console.log(\"This coin is CLicked\")\n // props.setDraggedCoinId(props.id);\n // };\n\n const Drag = () => {\n // console.log(\"This coin is Gragged\")\n props.setDraggedCoinId(props.id);\n };\n\n return (\n <div \n className='coin-sort-pile-coin' \n style={{top: `${y}px`, left: `${x}px`}} \n onDrag={Drag}\n >\n <img\n id={`coin-sort-${props.id}`}\n className='coin-sort-pile-coin-image'\n src={process.env.REACT_APP_strapiURL+props.coinMetaData.attributes.obverse_file.data.attributes.formats.thumbnail.url} \n alt={props.coinMetaData.attributes.obverse_file.data.attributes.alternativeText}\n width={width}\n />\n </div>\n );\n}; \n\n\n// This is the function the plots EVERY coin and sticks together all the pile logic. \n// The first this it does is setup default positioning. This is so coins_pos is insured to be defined for filtration.\n// The next thing done is sorting the coins into different piles. \n// The last thing done is filtering the coins based on the coin sort options\nfunction ComputeCoinPos(coins, sort_selection, then_by_selection, filter_selection, with_selection, of_kind_selection) {\n if (!Array.isArray(coins)) return null;\n\n // perform default positioning\n let coins_pos = new Map(coins.map((coin, index) => [coin.id, {\n index: index,\n ...DefaultCoinPileGraphingStategy(coin),\n display: true,\n }]));\n\n // peform sorting\n if (sort_selection !== sort_selections[0]) {\n let tmp_coins = coins.map((coin, index) => (SimplyMappedCoin(coin, index)));\n\n // ********* SORT BY ********** //\n // Setup what kind of query we are using. \n // It'll be either Minting date, material, governing_power, issuing_authority, or size.\n // minting date, and size are bracket types. the other are match types.\n let key = undefined;\n let query_selection = undefined;\n let is_match_type = true;\n switch (sort_selection) {\n case sort_selections[1]: // Minting Date\n key = 'from_date';\n query_selection = of_kind_from_date_query_relation;\n is_match_type = false;\n break;\n case sort_selections[2]: // Material\n key = 'material';\n query_selection = of_kind_material_selections;\n is_match_type = true;\n break;\n case sort_selections[3]: // Issuing Authority\n key = 'issuing_authority';\n query_selection = of_kind_issuing_authority_selections;\n is_match_type = true;\n break;\n case sort_selections[4]: // Governing Power\n key = 'governing_power';\n query_selection = of_kind_governing_power_selections;\n is_match_type = true;\n break;\n case sort_selections[5]: // Size\n key = 'size';\n query_selection = of_kind_size_query_relation;\n is_match_type = false;\n break;\n default:\n console.error(\"No sort selection option\", sort_selection);\n }\n\n // Make the coin piles.\n let coin_piles = [];\n for (let index = 0; index < query_selection.length; index++) {\n let query = query_selection[index];\n if (index === 0) continue; // Skip piling default case\n\n let coin_pile = [];\n for (let i = 0; i < tmp_coins.length; i++) { // Find the correct pile to put the coin in\n if (is_match_type && tmp_coins[i][key]?.toLowerCase().includes(query.toLowerCase())) {\n coin_pile.push(tmp_coins[i]);\n } else if (tmp_coins[i][key] >= query.gte && \n tmp_coins[i][key] <= query.lte) {\n coin_pile.push(tmp_coins[i]);\n }\n }\n coin_piles.push(coin_pile);\n };\n coin_piles = coin_piles.filter((arr) => (arr.length !== 0)); // We have our coins per coin pile\n let pile_locations = CoinPileLocations(coin_piles.length); // We have our coin pile locations \n \n // ********** THEN BY SORTING ********** //\n if (then_by_selection !== then_by_selections[0]) {\n key = undefined;\n query_selection = undefined;\n is_match_type = true;\n switch (then_by_selection) {\n case then_by_selections[1]: // Minting Date\n key = 'from_date';\n query_selection = of_kind_from_date_query_relation;\n is_match_type = false;\n break;\n case then_by_selections[2]: // Material\n key = 'material';\n query_selection = of_kind_material_selections;\n is_match_type = true;\n break;\n case then_by_selections[3]: // Issuing Authority\n key = 'issuing_authority';\n query_selection = of_kind_issuing_authority_selections;\n is_match_type = true;\n break;\n case then_by_selections[4]: // Governing Power\n key = 'governing_power';\n query_selection = of_kind_governing_power_selections;\n is_match_type = true;\n break;\n case then_by_selections[5]: // Size\n key = 'size';\n query_selection = of_kind_size_query_relation;\n is_match_type = false;\n break;\n default:\n console.error(\"No sort selection option\", sort_selection);\n }\n\n let new_pile_locations = [];\n let new_coin_piles = [];\n for (let i = 0; i < pile_locations.length; i++) {\n let sort_by_coin_pile = coin_piles[i];\n let then_by_new_coin_piles = [];\n for (let j = 0; j < query_selection.length; j++) {\n if (j === 0) continue; // skip default case.\n let query = query_selection[j];\n let new_coin_pile = [];\n for (let k = 0; k < sort_by_coin_pile.length; k++) {\n let coin = sort_by_coin_pile[k];\n if (is_match_type && coin[key]?.toLowerCase().includes(query.toLowerCase())) {\n new_coin_pile.push(coin);\n } else if (coin[key] >= query.gte && \n coin[key] <= query.lte) {\n new_coin_pile.push(coin);\n }\n }\n then_by_new_coin_piles.push(new_coin_pile);\n }\n\n const distance_from_center = .040;\n let center = pile_locations[i];\n let degrees_between_pile = 360 / then_by_new_coin_piles.length;\n for (let j = 0; j < then_by_new_coin_piles.length; j++) {\n new_pile_locations.push({\n x: distance_from_center * Math.cos(degrees_between_pile * j) + center.x,\n y: distance_from_center * Math.sin(degrees_between_pile * j) + center.y,\n });\n }\n\n new_coin_piles.push(then_by_new_coin_piles);\n }\n\n coin_piles = new_coin_piles.flat();\n pile_locations = new_pile_locations.flat();\n }\n\n // set the sorted coins.\n let new_coin_pos = new Map();\n const coin_deviation_in_pile = then_by_selection === then_by_selections[0] ? .15 : .075; // If then by is selected, make the deviation smaller\n for (let i = 0; i < pile_locations.length; i++) {\n let more_mapped_coins = coin_piles[i].map((coin) => ([\n coin.id,\n {\n index: coin.props_index,\n x: GaussianDeviationOnValue(pile_locations[i].x, coin_deviation_in_pile),\n y: GaussianDeviationOnValue(pile_locations[i].y, coin_deviation_in_pile),\n display: true,\n }\n ]));\n new_coin_pos = new Map([...new_coin_pos, ...more_mapped_coins]);\n }\n\n coins_pos = new_coin_pos;\n } \n\n // perform filtering\n if (filter_selection !== filter_selections[0] && with_selection !== with_selections[0]) { // Selected none, do nothing\n let filter_include = filter_selections_query_relation[filter_selections.findIndex((str) => str === filter_selection)];\n // Setup what kind of query we are using. \n // It'll be either Minting date, material, governing_power, issuing_authority, or size.\n // minting date, and size are bracket types. the other are match types.\n let coin_key = undefined;\n let query = undefined;\n switch (with_selection) {\n case with_selections[1]: // Minting Date\n coin_key = 'from_date';\n query = of_kind_from_date_query_relation[of_kind_from_date_selections.findIndex((e) => e === of_kind_selection)];\n break;\n case with_selections[2]: // Material\n coin_key = 'material';\n break;\n case with_selections[3]: // Issuing Authority\n coin_key = 'issuing_authority';\n break;\n case with_selections[4]: // Governing Power\n coin_key = 'governing_power';\n break;\n case with_selections[5]: // Size\n coin_key = 'size';\n query = of_kind_size_query_relation[of_kind_size_selections.findIndex((e) => e === of_kind_selection)];\n break;\n default:\n console.error(\"No sort selection option\", with_selection);\n }\n\n // We will get the coins that we want to filter out and set their display to false\n let new_coins_pos = (\n coins_pos == null ? null : new Map(Array.from(coins_pos).map((coin_pos) => {\n let coin = SimplyMappedCoin(coins[coin_pos[1].index], coin_pos[1].index);\n let does_include = filter_include;\n // If it crashes, don't include them to be shown\n try {\n if (query == null) {\n does_include = coin[coin_key]?.toLowerCase()?.includes(of_kind_selection.toLowerCase()) ?? filter_include;\n } else {\n does_include = coin[coin_key] >= query.gte && coin[coin_key] <= query.gte;\n }\n } catch (err) {}\n\n if ((filter_include && !does_include) || (!filter_include && does_include)) {\n coin_pos[1].display = false;\n } else { \n coin_pos[1].display = true;\n }\n return coin_pos;\n }))\n );\n\n coins_pos = new_coins_pos;\n }\n \n return coins_pos;\n}\n\n// This is the coins scattering techniques.\nconst CoinPile = (props) => {\n const coin_wrapper_ref = useRef();\n\n // Update coins_pos with ComputeCoinPos\n const [coins_pos, set_coins_pos] = useState(undefined);\n useEffect(() => {\n set_coins_pos(\n ComputeCoinPos(\n props.coins, \n props.sortSelection, \n props.thenBySelection, \n props.filterSelection, \n props.withSelection, \n props.ofKindSelection\n )\n );\n }, [props.coins, props.sortSelection, props.thenBySelection, props.filterSelection, props.withSelection, props.ofKindSelection]);\n\n // Update dimensions on screen resize. Very expensive, so setting dimensions only once is better\n const [dimensions, set_dimensions] = useState({width: 0, height: 0});\n useEffect(() => {\n const HandleResize = () => {\n set_dimensions({width: coin_wrapper_ref?.current?.clientWidth ?? 0, height: coin_wrapper_ref?.current?.clientHeight ?? 0});\n }\n window.addEventListener(\"resize\", HandleResize);\n }, []);\n\n // This sets the dimensions to be the same as the ref\n useEffect(() => {\n set_dimensions({width: coin_wrapper_ref?.current?.clientWidth ?? 0, height: coin_wrapper_ref?.current?.clientHeight ?? 0});\n }, [coin_wrapper_ref]);\n\n return (\n <div className='coin-sort-pile-wrapper' ref={coin_wrapper_ref}>\n <div className='coin-sort-pile'>\n {props.coins?.map((coin) => (\n <Coin \n id={coin.id}\n key={coin.id} \n coinMetaData={coin}\n dimensions={dimensions} \n display={coins_pos?.get(coin.id)?.display ?? true}\n x={coins_pos?.get(coin.id)?.x} \n y={coins_pos?.get(coin.id)?.y} \n setDraggedCoinId={props.setDraggedCoinId}\n />))\n }\n </div>\n </div>\n );\n}\n\n// This holds the title, help icon, and the dropdown inside the coin sort options toolbox\n\nconst CoinSort = () => {\n const [is_loading, set_is_loading] = useState(true);\n\n // coins are all of the coins with their type_category, obverse_file, and governing_power relations\n const [coins, set_coins] = useState(undefined);\n const [has_fetched_coins, set_has_fetched_coins] = useState(false);\n\n // This is for the coin grid. Need to put the logic here because the scale all and rotate all buttons are in the coin sort options.\n const [scale_all, set_scale_all] = useState(false);\n const [rotate_all, set_rotate_all] = useState(false);\n // Need to make the buttons dissappear and reappear if coin grid is active\n const [show_scale_and_rotate, set_show_scale_and_rotate] = useState(false);\n const ShowScaleAndRotate = (is_show) => { set_show_scale_and_rotate(is_show); }\n\n // gets the currently dragged coin id\n const [dragged_coin_id, set_dragged_coin_id] = useState(undefined);\n const SetDraggedCoinId = (coin_id) => { set_dragged_coin_id(coin_id) };\n\n // const [sortCoinID, setSortCoinID] = useState(\"\")\n\n const [sort_selection, set_sort_selection] = useState(sort_selections[0]);\n const [then_by_selection, set_then_by_selection] = useState(then_by_selections[0]);\n const [filter_selection, set_filter_selection] = useState(filter_selections[0]);\n const [with_selection, set_with_selection] = useState(with_selections[0]);\n const [of_kind_selection, set_of_kind_selection] = useState(of_kind_no_selections[0]);\n \n const [of_kind_selections, set_of_kind_selections] = useState(of_kind_no_selections);\n\n // Fetch ALL the coins and ALL their data.\n useEffect(() => {\n const FetchCoins = async () => {\n let res = await coinSortRequest.coinFectAll()\n if (Array.isArray(res?.data?.data)) {\n let data = res.data.data.filter((coin) => {return coin?.attributes?.obverse_file?.data?.attributes?.formats?.thumbnail?.url != null;});\n set_coins(data);\n set_has_fetched_coins(true);} \n else {console.error(\"Cannot parse result!\\n\", res);}\n }\n if (!has_fetched_coins) {\n FetchCoins();\n }\n }, [has_fetched_coins]);\n\n\n // different with_selections have different of_kind_selections. Need to choose the correct one based on the string.\n useEffect(() => {\n set_of_kind_selections(() => {\n switch(with_selection) {\n case 'None':\n set_of_kind_selection(of_kind_no_selections[0]);\n return of_kind_no_selections;\n case 'Minting Date':\n set_of_kind_selection(of_kind_from_date_selections[0]);\n return of_kind_from_date_selections;\n case 'Material':\n set_of_kind_selection(of_kind_material_selections[0]);\n return of_kind_material_selections;\n case 'Issuing Authority':\n set_of_kind_selection(of_kind_issuing_authority_selections[0]);\n return of_kind_issuing_authority_selections;\n case 'Governing Power':\n set_of_kind_selection(of_kind_governing_power_selections[0]);\n return of_kind_governing_power_selections;\n case 'Size':\n set_of_kind_selection(of_kind_size_selections[0]);\n return of_kind_size_selections;\n default:\n set_of_kind_selection(of_kind_no_selections[0]);\n return of_kind_no_selections;\n };\n });\n }, [with_selection]);\n\n const [coinSortData, setCoinSortData] = useState([])\n useEffect(() => {\n async function fectCoinSortData(){\n let result = await coinSortRequest.coinSortFind()\n setCoinSortData(result.data.data.attributes)\n set_is_loading(false);\n }\n\n fectCoinSortData()\n });\n\n // Useeffect that listens to changes on then_by_selection, and sort_selection, and displays the clear button if either then_by or sort_by have non-default content \n const [show_sort_clear_button, set_show_sort_clear_button] = useState(false);\n useEffect(() => {\n if (sort_selection !== sort_selections[0] || then_by_selection !== then_by_selections[0]) {\n set_show_sort_clear_button(true);\n } else {\n set_show_sort_clear_button(false);\n }\n }, [sort_selection, then_by_selection]);\n\n // Useeffect that listens to changes on of_kind_selection, filter_selection, and with_selection, and displays the clear button if either of_kind_selection, filter_selection, or with_selection have non-default content \n const [show_filter_clear_button, set_show_filter_clear_button] = useState(false);\n useEffect(() => {\n if (filter_selection !== filter_selections[0] || with_selection !== with_selections[0] || of_kind_selection !== of_kind_selections[0]) {\n set_show_filter_clear_button(true);\n } else {\n set_show_filter_clear_button(false);\n }\n }, [filter_selection, with_selection, of_kind_selection, of_kind_selections]);\n\n\n // useEffect(() => {\n // let x = 0;\n // let y = 0;\n // const mouseDownHandler = function (e) {\n // if(e.path[0].className === \"coin-sort-pile-coin-image\" || e.path[0].className ===\"test-draggable\"){\n // // Get the current mouse position\n // x = e.clientX;\n // y = e.clientY;\n // // Attach the listeners to `document`\n // document.addEventListener('mousemove', mouseMoveHandler);\n // document.addEventListener('mouseup', mouseUpHandler);\n // }\n // };\n // const mouseMoveHandler = function (e) {\n // // How far the mouse has been moved\n // const dx = e.clientX - x;\n // const dy = e.clientY - y;\n // // Set the position of element\n // e.target.style.top = `${e.target.offsetTop + dy}px`;\n // e.target.style.left = `${e.target.offsetLeft + dx}px`;\n // e.target.style.zIndex = `2`;\n // // Reassign the position of mouse\n // x = e.clientX;\n // y = e.clientY;\n // };\n // const mouseUpHandler = function () {\n // // Remove the handlers of `mousemove` and `mouseup`\n // document.removeEventListener('mousemove', mouseMoveHandler);\n // document.removeEventListener('mouseup', mouseUpHandler);\n // };\n // window.addEventListener('mousedown', mouseDownHandler);\n // }, []);\n\n\n// console.log(dragged_coin_id)\n if (is_loading) {return (<LoadingPage />);}\n\n return (\n <>\n <NoFeedBackIcon formfor='coinpile'/>\n <div id='coin-pile-page'>\n <center>\n <h1>Coins in a Pile</h1>\n <h3 className='mb-5 pb-5'>Explore the SYRIOS Collection</h3>\n </center>\n <div style={{width:\"50%\", marginLeft:\"25%\"}}>\n <ol>\n <li className='story-text mb-5'>Drag coins from the pile on the edges into this center area to study them more closely.</li>\n <li className='story-text mb-5'>Click on a coin to see complete details.</li>\n <li className='story-text mb-5'>Use the tools, below, to arrange, sort, and filter the coins to identify the patterns and discover the hidden stories that connect them to each other and to us.</li>\n </ol>\n </div>\n <div id='coin-sort-wrapper'>\n <div className='navbar-spacer' />\n {/* <div id='coin-sort-spacer' /> */}\n {/* CoinPile (fixed position) */}\n <CoinPile \n coins={coins} \n setDraggedCoinId={SetDraggedCoinId} \n sortSelection={sort_selection}\n thenBySelection={then_by_selection}\n filterSelection={filter_selection}\n withSelection={with_selection}\n ofKindSelection={of_kind_selection}\n />\n {/* <div id='coin-sort-title' className='story-h1 text-center'>\n Coins in a Pile\n </div> */}\n {/* Coin sort options */}\n <div id='coin-sort-options-wrapper'>\n <div id='coin-sort-options'>\n <CoinSortDropDown\n title='Sort:'\n selections={sort_selections}\n state={sort_selection}\n setState={set_sort_selection}\n toolTips={coinSortData.sort_tool_tips}\n showClear={show_sort_clear_button}\n clearTitle='Clear Sort'\n clear={() => {\n set_sort_selection(sort_selections[0]);\n set_then_by_selection(then_by_selections[0]);\n set_show_sort_clear_button(false);\n }}\n />\n <CoinSortDropDown\n title='Then by:'\n selections={then_by_selections}\n state={then_by_selection}\n setState={set_then_by_selection}\n />\n <div className='coin-sort-menu-vr'>\n <div className='coin-sort-menu-vr-content'/>\n </div>\n <CoinSortDropDown\n title='Filter:'\n selections={filter_selections}\n state={filter_selection}\n setState={set_filter_selection}\n toolTips={coinSortData.filter_tool_tips}\n showClear={show_filter_clear_button}\n clearTitle='Clear Filter'\n clear={() => {\n set_filter_selection(filter_selections[0]);\n set_with_selection(with_selections[0]);\n set_of_kind_selection(of_kind_selections[0]);\n set_show_filter_clear_button(false);\n }}\n />\n <CoinSortDropDown\n title='With:'\n selections={with_selections}\n state={with_selection}\n setState={set_with_selection}\n />\n <CoinSortDropDown\n title='Of Kind:'\n selections={of_kind_selections}\n state={of_kind_selection}\n setState={set_of_kind_selection}\n />\n {/* {(() => {\n if (show_scale_and_rotate) {\n const renderTooltipScale = (props) => (\n <Tooltip id=\"button-tooltip\" {...props}>\n scale to size\n </Tooltip>\n );\n const renderTooltipFlip = (props) => (\n <Tooltip id=\"button-tooltip\" {...props}>\n flip the coin\n </Tooltip>\n );\n return (\n <>\n <div className='coin-sort-menu-vr'>\n <div className='coin-sort-menu-vr-content'/>\n </div>\n <div className='coin-sort-options-icons-div' onClick={() => {set_scale_all(!scale_all);}}>\n <OverlayTrigger\n placement=\"bottom\"\n delay={{ show: 250, hide: 400 }}\n overlay={renderTooltipScale}\n >\n <div className=' coin-sort-options-icon'>\n scale<span className='icon-syrios-coin-scale'/>\n </div>\n </OverlayTrigger>\n </div>\n <div className='coin-sort-options-icons-div' onClick={() => {set_rotate_all(!rotate_all);}}>\n <OverlayTrigger\n placement=\"bottom\"\n delay={{ show: 250, hide: 400 }}\n overlay={renderTooltipFlip}\n >\n <div className=' coin-sort-options-icon'>\n flip<span className='icon-syrios-coin-rotate'/>\n </div>\n </OverlayTrigger>\n </div>\n </>\n );}\n })\n ()} */}\n </div>\n </div>\n <CoinGrid\n coinToAdd={dragged_coin_id}\n rotateAll={rotate_all}\n scaleAll={scale_all}\n showScaleAndRotate={ShowScaleAndRotate}\n />\n {/* This is to prevent invisible things from being clickable. Yes I should change the display, but animations are easier wriiten with this */}\n <div style={{zIndex: -100, position: 'fixed', width: '100vw', height: '100vh', top: '0px', left: '0px'}} /> \n </div>\n </div>\n </>\n );\n}\n\nexport default CoinSort;\n","import React from 'react';\n\nconst MapCoins = ()=>{\n return(\n <div id='map-coins' >\n <h1 className='text-center'>Coins on a Map</h1>\n <h2 className='text-center mt-5 pt-5'>Coming Soon ...</h2>\n </div>\n )\n}\nexport default MapCoins\n","import axios from \"axios\";\nimport qs from 'qs';\n\nconst coinCollections = {\n coinCollectionPage:()=>{\n let query = qs.stringify({\n populate: [\n 'contents',\n 'coin_of_the_day',\n 'coin_of_the_day.image',\n 'spotlight',\n 'spotlight.obverse_image',\n 'spotlight.reverse_image',\n 'spotlight.denomination',\n 'spotlight.ancient_territory',\n 'spotlight.mint.modern_name',\n 'spotlight.mint.modern_country',\n 'spotlight.governing_power',\n 'spotlight.issuing_authority',\n ],\n pagination: {page: 1,pageSize: 2147483647}\n },{encodeValuesOnly: true});\n return axios(`${process.env.REACT_APP_API_URL}/coin-collection-page?${query}`,{\n method:'GET',\n })\n },\n\n coinCollection:()=>{\n let query = qs.stringify({\n filters:{\n appear_catalog_pile:true,\n },\n populate: [\n 'obverse_image','reverse_image',\n 'denomination',\n 'ancient_territory',\n 'mint.modern_name',\n 'mint.modern_country',\n 'governing_power',\n 'issuing_authority',\n 'material',\n 'language'\n ],\n pagination: {page: 1,pageSize: 2147483647}\n // pagination: {page: 1,pageSize: 96}\n\n },{encodeValuesOnly: true});\n return axios(`${process.env.REACT_APP_API_URL}/coin-collections?${query}`,{\n method:'GET',\n })\n },\n coinSearch:()=>{\n let query = qs.stringify({\n filters:{\n appear_catalog_pile:true,\n },\n populate: [\n 'obverse_image','reverse_image','denomination',\n 'ancient_territory',\n 'mint.modern_name',\n 'mint.modern_country',\n 'governing_power',\n 'issuing_authority',\n 'material',\n 'language'\n ],\n pagination: {page: 1,pageSize: 2147483647}\n },{encodeValuesOnly: true});\n return axios(`${process.env.REACT_APP_API_URL}/coin-collections?${query}`,{\n method:'GET',\n })\n },\n\n}\nexport default coinCollections","import { createContext, useEffect, useState } from \"react\";\nimport coinCollections from \"src/api/coin-collections\";\nexport const CoinContext = createContext();\n\nfunction getDeepFilterOptions(arr, filter){\n let options = [];\n arr?.forEach((coin)=>{\n if (!options.includes(coin?.attributes[filter]?.data?.attributes[filter]) && \n coin?.attributes[filter]?.data?.attributes[filter] !== undefined &&\n coin?.attributes[filter]?.data?.attributes[filter] !== 'Uncertain'\n ){\n options.push(coin?.attributes?.[filter]?.data?.attributes[filter])\n }\n })\n return options\n}\n\nexport const CoinContextProvider = ({ children }) => {\n const [coinsData, setCoinsData] = useState(\n JSON.parse(sessionStorage.getItem(\"coins\")) || null\n );\n const [coinsKeyTerms, setCoinKeyTerms] = useState(\n JSON.parse(sessionStorage.getItem(\"coinskeyTerms\")) || null\n );\n\n const fetchCoinData = async () => {\n const res = await coinCollections.coinCollection();\n setCoinsData(res.data.data);\n\n let options = {\n material:getDeepFilterOptions(res.data.data, 'material'),\n mint:getDeepFilterOptions(res.data.data,'mint'),\n issuing_authority: getDeepFilterOptions(res.data.data,'issuing_authority'),\n governing_power: getDeepFilterOptions(res.data.data,'governing_power'),\n language: getDeepFilterOptions(res.data.data,'language'),\n ancient_territory: getDeepFilterOptions(res.data.data,'ancient_territory'),\n }\n setCoinKeyTerms(options)\n }\n\n useEffect(() => {\n sessionStorage.setItem(\"coins\", JSON.stringify(coinsData));\n sessionStorage.setItem(\"coinskeyTerms\", JSON.stringify(coinsKeyTerms));\n }, [coinsData, coinsKeyTerms]);\n\n return (\n <CoinContext.Provider value={{ coinsData, coinsKeyTerms, fetchCoinData }}>\n {children}\n </CoinContext.Provider>\n );\n};\n","import React, { useState, useEffect, useContext } from \"react\";\nimport \"./SearchBar.scss\";\nimport { Link } from \"react-router-dom\";\nimport qs from \"qs\";\n\nimport { CoinContext } from \"src/context/coinContext\";\n\nconst SearchBar = () => {\n\tconst { coinsKeyTerms, fetchCoinData } = useContext(CoinContext);\n\tcoinsKeyTerms ?? fetchCoinData();\n\tconst [tags, setTages] = useState({\n\t\tmaterial: [],\n\t\tmint: [],\n\t\tissuing_authority: [],\n\t\tgoverning_power: [],\n\t\tlanguage: [],\n\t\tdenomination: [],\n\t\tancient_territory: [],\n\t});\n\tconst [tagOptions, setTageOptions] = useState({});\n\tconst [pattern, setPattern] = useState(\"\");\n\tconst [searchUrl, setSearchUrl] = useState(\"\");\n\tconst [tagBox, setTagBox] = useState(false);\n\n\tuseEffect(() => {\n\t setTageOptions(coinsKeyTerms)\n\t},[coinsKeyTerms])\n\n\tuseEffect(() => {\n\t\tlet newURL = qs.stringify({\n\t\t\tpattern: pattern,\n\t\t\ttags: tags,\n\t\t});\n\t\tsetSearchUrl(newURL);\n\t}, [tags, pattern]);\n\n\tfunction addTags(obj, tag) {\n\t\tlet newTagsObj = { ...tags };\n\t\tlet newTagOptionsObj = { ...tagOptions };\n\t\tnewTagOptionsObj[obj] = newTagOptionsObj[obj].filter((i) => i !== tag);\n\t\tif (!newTagsObj[obj].includes(tag)) {\n\t\t\tnewTagsObj[obj].push(tag);\n\t\t}\n\t\tsetTages(newTagsObj);\n\t\tsetTageOptions(newTagOptionsObj);\n\t\tsetTagBox(false);\n\t}\n\tfunction deleteTags(obj, tag) {\n\t\tlet newTagsObj = { ...tags };\n\t\tlet newTagOptionsObj = { ...tagOptions };\n\t\tnewTagsObj[obj] = newTagsObj[obj].filter((i) => i !== tag);\n\t\tif (!newTagOptionsObj[obj].includes(tag)) {\n\t\t\tnewTagOptionsObj[obj].push(tag);\n\t\t}\n\t\tsetTages(newTagsObj);\n\t\tsetTageOptions(newTagOptionsObj);\n\t}\n\n\tfunction GetOptionLi() {\n\t\tlet li = [];\n\t\tfor (let key in tagOptions) {\n\t\t\ttagOptions[key]?.forEach((tag) => {\n\t\t\t\tli.push(\n\t\t\t\t\t<li onClick={() => addTags(key, `${tag}`)} value={tag}>\n\t\t\t\t\t\t{tag}\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t\treturn li;\n\t}\n\tfunction GetTagLi() {\n\t\tlet li = [];\n\t\tfor (let key in tags) {\n\t\t\ttags[key]?.forEach((tag, index) => {\n\t\t\t\tli.push(\n\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t{tag}{\" \"}\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"icon-syrios-x-thin\"\n\t\t\t\t\t\t\tonClick={() => deleteTags(key, `${tag}`)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t\treturn li;\n\t}\n\treturn (\n\t\t<div className=\"search\">\n\t\t\t<div className=\"tag-content\">\n\t\t\t\t<ul>\n\t\t\t\t\t<Link\n\t\t\t\t\t\tclassName=\"link icon-entypo-search\"\n\t\t\t\t\t\tto={`/Coins/${searchUrl}`}\n\t\t\t\t\t/>\n\t\t\t\t\t<GetTagLi />\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclassName=\"search-bar__input\"\n\t\t\t\t\t\tid=\"coin-collection-search\"\n\t\t\t\t\t\tplaceholder=\"Search by coin name, type, date, and more.\"\n\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\tsetPattern(e.target.value);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\tif (!tagBox) {\n\t\t\t\t\t\t\t\tsetTagBox(true);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// TODO something is wrong here\n\t\t\t\t\t\t\t// e.target.addEventListener('keypress', function (e){\n\t\t\t\t\t\t\t// if(e.key === 'Enter'){\n\t\t\t\t\t\t\t// setPattern(e.target.value)\n\t\t\t\t\t\t\t// console.log(searchUrl);\n\t\t\t\t\t\t\t// }\n\t\t\t\t\t\t\t// })\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t{tagBox ? (\n\t\t\t\t<div className=\"tag-options\">\n\t\t\t\t\t<p>Common Search Key words</p>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<GetOptionLi />\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t</div>\n\t);\n};\nexport default SearchBar;\n","import React from \"react\";\nimport \"./Card.scss\";\nimport { Link } from \"react-router-dom\";\n\nexport const Card = (props) => {\n\treturn (\n\t\t<div className=\"coin-card\">\n\t\t\t<Link className=\"link\" to={`/Coin/${props?.id}`}>\n\t\t\t\t<div className=\"image\">\n\t\t\t\t\t{props?.coin?.obverse_image?.data ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\tprocess.env.REACT_APP_UPLOAD_URL +\n\t\t\t\t\t\t\t\tprops?.coin?.obverse_image?.data?.attributes\n\t\t\t\t\t\t\t\t\t?.url\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\tprocess.env.REACT_APP_UPLOAD_URL +\n\t\t\t\t\t\t\t\tprops?.coin?.reverse_image?.data?.attributes\n\t\t\t\t\t\t\t\t\t?.url\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<h1>\n\t\t\t\t\t{props?.coin?.mint?.data?.attributes?.mint}{\" \"}\n\t\t\t\t\t{props?.coin?.material?.data?.attributes?.material}{\" \"}\n\t\t\t\t\t{props?.coin?.obverse_type.length === 0\n\t\t\t\t\t\t? props?.coin?.reverse_type\n\t\t\t\t\t\t: props?.coin?.obverse_type}\n\t\t\t\t</h1>\n\t\t\t\t<h2>\n\t\t\t\t\tOrigin:{\" \"}\n\t\t\t\t\t{props?.coin?.ancient_territory?.data?.attributes\n\t\t\t\t\t\t?.ancient_territory.length === 0\n\t\t\t\t\t\t? \"None\"\n\t\t\t\t\t\t: props?.coin?.ancient_territory?.data?.attributes\n\t\t\t\t\t\t\t\t?.ancient_territory}\n\t\t\t\t</h2>\n\t\t\t\t<h2>\n\t\t\t\t\tDate:\n\t\t\t\t\t{props?.coin?.from_year < 0 ? (\n\t\t\t\t\t\t<>{String(props?.coin?.from_year).substring(1)} BCE</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>{props?.coin?.from_year} CE</>\n\t\t\t\t\t)}{\" \"}\n\t\t\t\t\t-{\" \"}\n\t\t\t\t\t{props?.coin?.to_year < 0 ? (\n\t\t\t\t\t\t<>{String(props?.coin?.to_year).substring(1)} BCE</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>{props?.coin?.to_year} CE</>\n\t\t\t\t\t)}\n\t\t\t\t</h2>\n\t\t\t</Link>\n\t\t</div>\n\t);\n};\n\nexport const SpotlightCard = (props) => {\n\tconst coin = props.coin;\n\treturn (\n\t\t<div className=\"sportlight-card\">\n\t\t\t<Link className=\"link\" to={`/Coin/${coin?.id}`}>\n\t\t\t\t<div className=\"image\">\n\t\t\t\t\t{coin.obverse_image?.data ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\tprocess.env.REACT_APP_UPLOAD_URL +\n\t\t\t\t\t\t\t\tcoin?.attributes?.obverse_image?.data\n\t\t\t\t\t\t\t\t\t?.attributes?.url\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\tprocess.env.REACT_APP_UPLOAD_URL +\n\t\t\t\t\t\t\t\tcoin?.attributes?.reverse_image?.data\n\t\t\t\t\t\t\t\t\t?.attributes?.url\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<h1>\n\t\t\t\t\t{coin?.attributes?.mint?.data?.attributes?.mint}{\" \"}\n\t\t\t\t\t{coin?.attributes?.material?.data?.attributes?.material}{\" \"}\n\t\t\t\t\t{coin?.attributes?.obverse_type.length === 0\n\t\t\t\t\t\t? coin?.attributes?.reverse_type\n\t\t\t\t\t\t: coin?.attributes?.obverse_type}{\" \"}\n\t\t\t\t</h1>\n\t\t\t\t<h2>\n\t\t\t\t\t{\" \"}\n\t\t\t\t\tOrigin:{\" \"}\n\t\t\t\t\t{coin?.attributes?.ancient_territory?.data?.attributes\n\t\t\t\t\t\t?.ancient_territory.length === 0\n\t\t\t\t\t\t? \"None\"\n\t\t\t\t\t\t: coin?.attributes?.ancient_territory?.data?.attributes\n\t\t\t\t\t\t\t\t?.ancient_territory}\n\t\t\t\t</h2>\n\t\t\t\t<h2>\n\t\t\t\t\tDate:\n\t\t\t\t\t{coin?.attributes?.from_year < 0 ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{String(coin?.attributes?.from_year).substring(1)}{\" \"}\n\t\t\t\t\t\t\tBCE\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>{coin?.attributes?.from_year} CE</>\n\t\t\t\t\t)}{\" \"}\n\t\t\t\t\t-{\" \"}\n\t\t\t\t\t{coin?.attributes?.to_year < 0 ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{String(coin?.attributes?.to_year).substring(1)} BCE\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>{coin?.attributes?.to_year} CE</>\n\t\t\t\t\t)}\n\t\t\t\t</h2>\n\t\t\t</Link>\n\t\t</div>\n\t);\n};\n","import React from 'react';\nimport Slider from 'react-slick';\nimport { SpotlightCard } from '../CoinList/Card';\n\nconst SpotLight = (props) => {\n const { data } = props;\n\n function NextArrow(props){\n const { className, style, onClick } = props;\n return (\n <div\n className={className}\n style={{ ...style, display: \"block\", background: \"\" }}\n onClick={onClick}\n />\n );\n }\n function PrevArrow(props) {\n const { className, style, onClick } = props;\n return (\n <div\n className={className}\n style={{ ...style, display: \"block\", background: \"\", zIndex:'1'}}\n onClick={onClick}\n />\n );\n }\n const Slicksettings = {\n dots: true,\n infinite: true,\n slidesToShow: 4,\n slidesToScroll: 1,\n // centerMode: true,\n pauseOnHover: true,\n lazyLoad: true,\n nextArrow: <NextArrow />,\n prevArrow: <PrevArrow />\n };\n return (\n <Slider {...Slicksettings} className=\"spotLight\">\n { data.length > 0 && data.map((coin)=> <SpotlightCard coin={coin} key={coin.id}/>)}\n </Slider>\n )\n};\nexport default SpotLight;\n","export default __webpack_public_path__ + \"static/media/ans_large.649d78d5.png\";","export default __webpack_public_path__ + \"static/media/berlin_logo.21c97fb0.svg\";","export default __webpack_public_path__ + \"static/media/french_logo.5a340e25.svg\";","export default __webpack_public_path__ + \"static/media/rpc_logo.786a680d.png\";","import React, { useState, useEffect } from \"react\";\nimport NoFeedBackicon from \"src/components/constant/NoFeedBackIcon\";\nimport SearchBar from \"./component/SearchBar\";\nimport SpotLight from \"./component/SpotLight\";\nimport ReactPlayer from \"react-player\";\nimport coinCollections from \"src/api/coin-collections\";\nimport LoadingPage from \"src/components/loadingPage/LoadingPage\";\nimport { Link } from \"react-router-dom\";\nimport ans_logo from \"./res/ans_large.png\";\nimport berlin_logo from \"./res/berlin_logo.svg\";\nimport french_logo from \"./res/french_logo.svg\";\nimport rpc_logo from \"./res/rpc_logo.png\";\n\nconst CoinCatalog = () => {\n\tconst [data, setData] = useState([]);\n\tconst [loading, setLoading] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst fetchData = async () => {\n\t\t\tconst response = await coinCollections.coinCollectionPage();\n\t\t\tsetData(response.data.data.attributes);\n\t\t\tsetLoading(false);\n\t\t};\n\t\tfetchData();\n\t}, []);\n\treturn (\n\t\t<>\n\t\t\t<NoFeedBackicon url=\"default\" />\n\t\t\t{loading ? (\n\t\t\t\t<LoadingPage />\n\t\t\t) : (\n\t\t\t\t<div id=\"coin-catalog\">\n\t\t\t\t\t<div className=\"catalog-section\">\n\t\t\t\t\t\t<h1>{data.title}</h1>\n\t\t\t\t\t\t<h3>{data.subtitle}</h3>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"catalog-section\">\n\t\t\t\t\t\t<SearchBar />\n\n\t\t\t\t\t\t<div className=\"catalog-buttons\">\n\t\t\t\t\t\t\t{data.contents.map((content, index) => {\n\t\t\t\t\t\t\t\tif (index === 0) return null;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<a href={`#anchor-${index}`} key={index}>\n\t\t\t\t\t\t\t\t\t\t{content.anchor ?? content.title}\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"catalog-section\">\n\t\t\t\t\t\t<h2>{data.contents[0].title}</h2>\n\t\t\t\t\t\t<SpotLight data={data.spotlight.data} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"catalog-section\">\n\t\t\t\t\t\t<span className=\"anchor\" id=\"anchor-1\"></span>\n\n\t\t\t\t\t\t<h2>{data.contents[1].title}</h2>\n <p>{data.contents[1].body}</p>\n\n {data.coin_of_the_day.data && \n\t\t\t\t\t\t<div className=\"coins-of-the-day\">\n\t\t\t\t\t\t\t<div className=\"left\">\n\t\t\t\t\t\t\t\t<h1>{data.coin_of_the_day.data.attributes.name}</h1>\n\t\t\t\t\t\t\t\t<h2>\n\t\t\t\t\t\t\t\t\t{data.coin_of_the_day.data.attributes\n\t\t\t\t\t\t\t\t\t\t.image_caption ??\n\t\t\t\t\t\t\t\t\t\tdata.coin_of_the_day.data.attributes.image.data\n\t\t\t\t\t\t\t\t\t\t\t.attributes.caption}\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t<p>{data.coin_of_the_day.data.attributes.abstract}</p>\n\t\t\t\t\t\t\t\t<button>\n\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\tto={`/StoryReader?id=${data.coin_of_the_day.data.id}`}>\n\t\t\t\t\t\t\t\t\t\tLearn more\n\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"right\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={`${process.env.REACT_APP_UPLOAD_URL}${data.coin_of_the_day.data.attributes.image.data.attributes.url}`}\n\t\t\t\t\t\t\t\t\talt=\"test_image\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n }\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"catalog-section\">\n\t\t\t\t\t\t<span className=\"anchor\" id=\"anchor-2\"></span>\n\t\t\t\t\t\t<h2>{data.contents[2].title}</h2>\n\t\t\t\t\t\t<p>{data.contents[2].body}</p>\n\t\t\t\t\t</div>\n\n\n\t\t\t\t\t<div className=\"catalog-section\">\n\t\t\t\t\t\t<span className=\"anchor\" id=\"anchor-3\"></span>\n\t\t\t\t\t\t<h2>{data.contents[3].title}</h2>\n\t\t\t\t\t\t<p>{data.contents[3].body}</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"catalog-section\">\n\t\t\t\t\t\t<span className=\"anchor\" id=\"anchor-4\"></span>\n\t\t\t\t\t\t<h2>{data.contents[4].title}</h2>\n\t\t\t\t\t\t<div className=\"logos\">\n\t\t\t\t\t\t\t<a href=\"https://numismatics.org/search/\" rel=\"noreferrer\" target=\"_blank\">\n\t\t\t\t\t\t\t\t<img src={ans_logo} alt=\"ans_logo\" style={{\n\t\t\t\t\t\t\t\t\twidth: \"100px\",\n\t\t\t\t\t\t\t\t}} />\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<a href=\"https://www.smb.museum/museen-einrichtungen/muenzkabinett/home/\" rel=\"noreferrer\" target=\"_blank\">\n\t\t\t\t\t\t\t<img src={berlin_logo} alt=\"berlin_logo\" style={{\n\t\t\t\t\t\t\t\twidth: \"300px\",\n\t\t\t\t\t\t\t\tpaddingTop: \"20px\",\t\t\t\t\t\n\t\t\t\t\t\t\t}} />\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<a href=\"https://www.bnf.fr/fr/departement-monnaies-medailles-antiques\" rel=\"noreferrer\" target=\"_blank\">\n\t\t\t\t\t\t\t<img src={french_logo} alt=\"french_logo\" style={{\n\t\t\t\t\t\t\t\twidth: \"100px\",\n\t\t\t\t\t\t\t\tpaddingBottom: \"20px\",\t\t\t\t\t\n\n\t\t\t\t\t\t\t}}/>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<a href=\"https://rpc.ashmus.ox.ac.uk/\" rel=\"noreferrer\" target=\"_blank\">\n\t\t\t\t\t\t\t<img src={rpc_logo} alt=\"rpc_logo\" style={{\n\t\t\t\t\t\t\t\twidth: \"200px\",\n\t\t\t\t\t\t\t}} />\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<p>{data.contents[4].body}</p>\n\t\t\t\t\t\t<div className=\"catalog-VideoBox\">\n {data.video_url &&\n\t\t\t\t\t\t\t<ReactPlayer\n\t\t\t\t\t\t\t\turl={data.video_url}\n\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\tcontrols={true}\n\t\t\t\t\t\t\t\tplaying={false}\n\t\t\t\t\t\t\t/>\n }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\nexport default CoinCatalog;\n\n","import React from \"react\";\nimport \"./List.scss\";\nimport { Card } from \"./Card\";\n\n\nconst List = (props) => {\n return (\n <div className=\"list\">\n {props.coins?.map((coin) =>{\n return <Card coin={coin?.attributes} id={coin?.id} key={coin?.id}/>\n })}\n </div>\n );\n};\n\nexport default List;\n","import React,{useState} from \"react\";\nimport List from \"./List\";\nimport ReactPaginate from \"react-paginate\";\nimport \"./CoinPaginate.scss\"\nconst CoinPaginate = (props) => {\n const [itemOffset, setItemOffset] = useState(0);\n\n const endOffset = itemOffset + props.coinsPerPage;\n const currentCoins = props.coins?.slice(itemOffset, endOffset);\n const pageCount = Math.ceil(props.coins?.length / props.coinsPerPage);\n\n const handlePageClick = (event) => {\n const newOffset = (event.selected * props.coinsPerPage) % props.coins?.length;\n setItemOffset(newOffset);\n };\n\n return (\n <div className=\"CoinPaginate\">\n <List coins = {currentCoins}/>\n <ReactPaginate\n containerClassName=\"pagination\"\n nextLabel=\"\"\n previousLabel=\"\"\n previousLinkClassName={\" icon-entypo-arrow-thick-left\"}\n nextLinkClassName={\" icon-entypo-arrow-thick-right\"}\n disabledClassName={\"disabled\"}\n activeClassName={\"active\"}\n pageCount={pageCount}\n marginPagesDisplayed={2}\n pageRangeDisplayed={5}\n onPageChange={handlePageClick}\n renderOnZeroPageCount={null}\n />\n </div>\n );\n};\n\nexport default CoinPaginate;\n","import React, {useState, useContext} from 'react'\nimport { useParams } from \"react-router-dom\";\nimport qs from 'qs';\nimport { CoinContext } from 'src/context/coinContext';\n\nconst CoinsFiter = (props) =>{\n\n const [collapse, setCollapse] = useState(true)\n const params = qs.parse(useParams().params) \n const { coinsKeyTerms } = useContext(CoinContext)\n\n function handleAddFilters(e, filter){\n let newFilters= {...props.filters}\n let newOptions= {...props.options}\n \n if(!newFilters[filter].includes(e.target.innerText)){\n newFilters[filter].push(e.target.innerText)\n }\n newOptions[filter] = newOptions[filter].filter(i =>i !== e.target.innerText)\n props.setFilters(newFilters)\n props.setOptions(newOptions)\n }\n \n function handleDeleteTag(e, filter){\n let newFilters= {...props.filters}\n let newOptions= {...props.options}\n \n newFilters[filter] = newFilters[filter].filter(i =>i !== e.target.innerText)\n if(!newOptions[filter].includes(e.target.innerText)){\n newOptions[filter].push(e.target.innerText)\n }\n props.setFilters(newFilters)\n props.setOptions(newOptions)\n }\n function getFilter(title,value,filterType){\n return(\n <div className='filter'>\n <div className='filter-trigger'>\n {title}\n <span className='icon-entypo-arrow-thick-down'/>\n <div className='filter-content'>\n {value?.map((item, index)=>{ \n return <div className='filter-content-item' onClick={(e)=>{handleAddFilters(e,filterType)}} key={item + index}>{item}</div>\n })}\n </div>\n </div>\n <div className='filterList'>\n {\n props.filters[filterType][0] === undefined ? <></> :(\n props.filters[filterType].map((item, index)=>{\n return <span className='icon-syrios-x-thin filterList-item' onClick={(e)=>{handleDeleteTag(e, filterType)}} key={item + index}>{item}</span>\n }))\n }\n </div>\n </div>\n )\n }\n\n return(\n <div className=\"coins-filters\">\n <div className='filters'>\n <div className='filter-head'>\n <h1>Filter by</h1>\n <button onClick={()=>{\n props.setFilters({\n material:[],\n mint:[],\n issuing_authority:[],\n governing_power:[],\n language:[],\n ancient_territory:[],\n from_year:-450,\n to_year:450,\n ...params.tags\n })\n props.setOptions({...coinsKeyTerms})\n }}> Refine results</button>\n </div>\n <div className='filter-body'>\n {getFilter('Material', props.options?.material, 'material')}\n {getFilter('Mint', props.options?.mint, 'mint')}\n </div>\n </div>\n <div className='filters'>\n <div className='filter-head'>\n <h1>Advanced Filters</h1>\n <button onClick={()=>setCollapse(prev => !prev)}> {collapse ? 'Expand' : 'Collapse'}</button>\n </div>\n {collapse ? <></> :\n <>\n <div className='filter-body'>\n {getFilter('Authority', props.options?.issuing_authority, 'issuing_authority')}\n {getFilter('Governing Power', props.options?.governing_power, 'governing_power')}\n {getFilter('Language', props.options?.language, 'language')}\n {getFilter('Ancient Territory', props.options?.ancient_territory, 'ancient_territory')}\n </div>\n <div className='filter-second-body'>\n <div className='filter-year'>\n <div style={{width:\"\"}}>\n Date Range: \n </div>\n <div className='filter-from-year'>\n <label data-unit={props.filters.from_year >= 0 ? 'CE' : 'BCE'}>\n <input type=\"number\" name=\"from-year\" placeholder=\"From\" step=\"50\" value={props.filters.from_year} min=\"-450\" max=\"450\" onChange={ e =>{\n let newFilters= {...props.filters}\n newFilters.from_year = e.target.value\n props.setFilters(newFilters)\n }} /> \n </label>\n </div>\n\n <div className='filter-to-year'>\n <label data-unit={props.filters.to_year >= 0 ? 'CE' : 'BCE'}>\n <input type=\"number\" name=\"to-year\" placeholder=\"To\" step=\"50\" value={props.filters.to_year} min=\"-450\" max=\"450\" onChange={ e =>{\n let newFilters= {...props.filters}\n newFilters.to_year = e.target.value\n props.setFilters(newFilters)\n }}/> \n </label>\n </div>\n\n </div>\n\n <div className='filter-search'>\n {/* <div className='filter-input'>\n <input type={'text'} name={'types'} onChange={e=>setInputText(e.target.value)} placeholder=\"Search by Coin types\"/>\n {inputText.length === 0 ? <></> :\n <div className='filter-content'>\n {typesList?.obverse_type?.map((item, index)=>{ \n return <div className='filter-content-item' onClick={(e)=>{handleAddFilters(e,'obverse_type')}} key={item + index}>{item}</div>\n })}\n {typesList?.reverse_type?.map((item, index)=>{ \n return <div className='filter-content-item' onClick={(e)=>{handleAddFilters(e,'reverse_type')}} key={item + index}>{item}</div>\n })}\n </div>\n }\n </div> */}\n {/* <div className='filterList'>\n {filters.obverse_type[0] === undefined ? <></> :(\n filters.obverse_type.map((item, index)=>{\n return <span className='icon-syrios-x-thin filterList-item' onClick={(e)=>{handleDeleteTag(e, 'obverse_type')}} key={item + index}>{item}</span>\n }))\n }\n {filters.obverse_type[0] === undefined ? <></> :(\n filters.reverse_type.map((item, index)=>{\n return <span className='icon-syrios-x-thin filterList-item' onClick={(e)=>{handleDeleteTag(e, 'reverse_type')}} key={item + index}>{item}</span>\n }))\n }\n </div> */}\n </div>\n \n\n </div>\n\n </>\n\n }\n </div>\n </div>\n )\n\n}\nexport default CoinsFiter","import React from \"react\";\nimport './search.scss'\n\nfunction Search(props) {\n\n const handleClick = (e) => {\n e.preventDefault();\n // console.log(e.target.nextSibling.value);\n props.setSearchText(e.target.nextSibling.value)\n }\n\n return (\n <div className='info'>\n {props.searchText ? <h2>Search results for '{props.searchText}'</h2> : <></>}\n <div className='sub-info'>\n\n <span>Similar in catalog: {props.coinsLength}</span>\n\n <div className='search'>\n <span className=\"icon-entypo-search\" onClick={handleClick}/>\n <input\n type='text'\n name='search'\n placeholder=\"Search by coin name, type, date, and more.\"\n onFocus={(e)=>{\n e.target.addEventListener('keypress', e => {\n if (e.key === 'Enter') {\n props.setSearchText(e.target.value)\n }\n })\n }}\n />\n </div>\n </div>\n </div> \n )\n }\n\nexport default Search;\n","import React, {useState, useEffect, useContext} from 'react'\nimport \"./Coins.scss\"\n// import coinCollections from 'src/api/coin-collections'\nimport CoinPaginate from './CoinPaginate'\nimport { useParams } from \"react-router-dom\";\n\nimport Fuse from 'fuse.js'\nimport CoinsFiter from './CoinsFilters';\nimport Search from './Search';\nimport qs from 'qs';\n\nimport { CoinContext } from 'src/context/coinContext';\n\nfunction getDeepFilterOptions(arr, filter){\n let options = []\n arr.forEach((coin)=>{\n if (!options.includes(coin?.attributes[filter]?.data?.attributes[filter]) && coin?.attributes[filter]?.data?.attributes[filter] !== undefined){\n options.push(coin?.attributes?.[filter]?.data?.attributes[filter])\n }\n })\n return options\n}\n\nconst Coins = () => {\n const { coinsData, fetchCoinData } = useContext(CoinContext)\n coinsData ?? fetchCoinData()\n const params = qs.parse(useParams().params) \n const [searchedData, setSearchedData] = useState([])\n const [coinList, setCoinList] = useState([])\n const [coinsPerPage, setCoinsPerPage] = useState(12)\n\n const [options,setOptions] = useState({})\n\n const [filters,setFilters] = useState({\n material:[],\n mint:[],\n issuing_authority:[],\n governing_power:[],\n language:[],\n ancient_territory:[],\n from_year:-450,\n to_year:450,\n ...params.tags\n })\n\n const [searchText, setSearchText] = useState(\n params.pattern || \"\"\n);\n const coinsPerPages = [12,24,48,96]\n\n useEffect(()=>{\n const searchData = async ()=>{\n const fuseOptions = {\n includeScore: true,\n shouldSort: true,\n includeMatches: true,\n minMatchCharLength: searchText.length,\n threshold: 0.25, //At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match (of both letters and location), a threshold of 1.0 would match anything\n keys: [\n \"attributes\",\n \"attributes.obverse_type\",\n \"attributes.reverse_type\",\n \"attributes.reference\",\n \"attributes.reverse_legend\",\n \"attributes.obverse_legend\",\n \"attributes.material.data.attributes.material\",\n \"attributes.mint.data.attributes.mint\",\n \"attributes.issuing_authority.data.attributes.issuing_authority\",\n \"attributes.governing_power.data.attributes.governing_power\",\n \"attributes.language.data.attributes.language\",\n \"attributes.ancient_territory.data.attributes.ancient_territory\",\n ]\n };\n const fuse = new Fuse(coinsData, fuseOptions);\n let Searchresults = fuse.search(searchText) \n let searchedData = searchText ? Searchresults.map(Searchresult => Searchresult.item) : coinsData;\n setSearchedData(searchedData)\n\n let options = {\n material:getDeepFilterOptions(searchedData, 'material'),\n mint:getDeepFilterOptions(searchedData,'mint'),\n issuing_authority: getDeepFilterOptions(searchedData,'issuing_authority'),\n governing_power: getDeepFilterOptions(searchedData,'governing_power'),\n language: getDeepFilterOptions(searchedData,'language'),\n ancient_territory: getDeepFilterOptions(searchedData,'ancient_territory'),\n }\n setOptions(options)\n }\n searchData().catch(console.error);\n },[searchText, coinsData])\n\n\n\n useEffect(()=>{\n const getCoinList = async ()=>{\n const filteredCoins = searchedData?.filter( coin =>{\n if( \n (filters?.material.length === 0 ? true : filters?.material.includes(coin?.attributes?.material?.data?.attributes?.material)) &&\n (filters?.mint.length === 0 ? true : filters?.mint.includes(coin?.attributes?.mint?.data?.attributes?.mint)) &&\n (filters?.issuing_authority.length === 0 ? true : filters?.issuing_authority.includes(coin?.attributes?.issuing_authority?.data?.attributes?.issuing_authority)) &&\n (filters?.governing_power.length === 0 ? true : filters?.governing_power.includes(coin?.attributes?.governing_power?.data?.attributes?.governing_power)) &&\n (filters?.language.length === 0 ? true : filters?.language.includes(coin?.attributes?.language?.data?.attributes?.language)) &&\n (filters?.ancient_territory.length === 0 ? true : filters?.ancient_territory.includes(coin?.attributes?.ancient_territory?.data?.attributes?.ancient_territory)) &&\n (filters?.from_year <= coin?.attributes?.from_year) &&\n (filters?.to_year >= coin?.attributes?.to_year)\n ){return true}\n return false;\n })\n setCoinList(filteredCoins)\n }\n getCoinList(); \n\n },[searchedData, filters])\n\n return (\n <div className='Coins'>\n\n <Search coinsLength = {coinList.length} searchText = {searchText} setSearchText={setSearchText}/>\n\n <CoinsFiter \n filters = {filters}\n options = {options}\n setFilters = {setFilters}\n setOptions = {setOptions}\n />\n\n <div className='results'>\n Results per page \n <div className='filter'>\n <div className='filter-trigger'>\n {coinsPerPage} <span className='icon-entypo-arrow-thick-down'/>\n </div>\n <div className='filter-content'>\n {coinsPerPages.map((item)=>{\n return <div className='filter-content-item' onClick={(e)=>{setCoinsPerPage(e.target.innerText)}} key={item}>{item}</div>\n })}\n </div>\n </div>\n </div>\n \n <CoinPaginate coinsPerPage={coinsPerPage} coins ={coinList}/>\n\n </div>\n )\n}\n\nexport default Coins","import axios from \"axios\";\n\nexport const makeRequest = axios.create({\n baseURL: process.env.REACT_APP_API_URL,\n // baseURL: process.env.REACT_APP_API_URL_LOCAL,\n// headers: {\n// Authorization: \"bearer \" + process.env.REACT_APP_API_TOKEN,\n// },\n});","import { useEffect, useState } from \"react\";\nimport { makeRequest } from \"../utils/makeRequest\";\n\nconst useFetch = (url) => {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(false);\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n setLoading(true);\n const res = await makeRequest.get(url);\n setData(res.data.data);\n } catch (err) {\n setError(true);\n }\n setLoading(false);\n };\n fetchData();\n }, [url]);\n\n return { data, loading, error };\n};\n\nexport default useFetch;","import React, {useState, useEffect} from \"react\";\n\nfunction CoinScaleAndFlip(props) {\n const [coin_rotation, set_coin_rotation] = useState('rotateY(0deg)');\n const [dotted_circle_height, set_dotted_circle_height] = useState('0%');\n const [is_img_scaled, set_is_img_scaled] = useState(false);\n const [size_diameter_jsx, set_size_diameter_jsx] = useState('0');\n \n const ResetCoin = () => {\n set_coin_rotation('rotateY(0deg)');\n set_dotted_circle_height('0%');\n set_is_img_scaled(false);\n };\n \n useEffect(() => {\n ResetCoin();\n }, [props?.coinMetaData]);\n \n useEffect(() => {\n if (is_img_scaled)\n set_size_diameter_jsx('3em');\n else\n set_size_diameter_jsx('0');\n }, [is_img_scaled, props?.diameter]);\n \n const ScaleCoin = () => {\n if (is_img_scaled) {\n set_dotted_circle_height('0%');\n } else {\n set_dotted_circle_height('80%');\n \n const box_percent = 100;\n const box_height_mm = 62.5;\n let height_of_coin_percent = (box_percent / box_height_mm) * props?.diameter;\n \n if (height_of_coin_percent == null || height_of_coin_percent === 0) {\n height_of_coin_percent = 5;\n }\n }\n \n set_is_img_scaled(!is_img_scaled);\n };\n \n const RotateCoin = () => {\n if (coin_rotation.includes('(0deg)')) {\n set_coin_rotation('rotateY(180deg)');\n } else {\n set_coin_rotation('rotateY(0deg)');\n }\n };\n\n \n return (\n <div className='coin-image-box'>\n <div className='coin-info-dotted-circle' style={{height: dotted_circle_height}}/>\n <div className='coin-info-image-diameter-box coin-info-dark-text' style={{fontSize: size_diameter_jsx}}>\n DIAMETER: {props?.diameter == null ? 'N/A' : `${props?.diameter}mm`}\n </div>\n <div className='flip-box'>\n <div className='flip-box-inner' style={{ transform: coin_rotation }}>\n <div className='flip-box-front'>\n <img\n alt={props.obverseImg?.data?.attributes}\n className='coin-info-image-flip coin-info-image-flip-front'\n src={process.env.REACT_APP_UPLOAD_URL + props?.obverseImg?.data?.attributes?.url}\n />\n </div>\n <div className='flip-box-back'>\n <img\n alt={props.reverseImg?.data?.attributes}\n className='coin-info-image-flip coin-info-image-flip-back'\n src={process.env.REACT_APP_UPLOAD_URL + props?.reverseImg?.data?.attributes?.url}\n />\n </div>\n </div>\n </div>\n {/*** Scale and Rotate button. MUST be rendered after coin image ***/}\n <div\n className='demo-icon coin-info-icon-rotate'\n onClick={RotateCoin}>\n \n </div> \n <div\n className='demo-icon coin-info-scale-icon'\n onClick={ScaleCoin}>\n \n </div>\n </div>\n );\n }\n export default CoinScaleAndFlip","import React from 'react';\nimport { useParams, useNavigate } from \"react-router-dom\";\nimport useFetch from 'src/hooks/useFetch';\nimport \"./CoinInfoPage.scss\"\nimport qs from 'qs';\nimport CoinScaleAndFlip from './CoinAnimations';\n\nfunction CoinInfoPage (){\n const id = useParams().id;\n const navigate = useNavigate();\n\n let query = qs.stringify({\n populate: [\n 'obverse_image','reverse_image','denomination',\n 'ancient_territory',\n 'mint.modern_name',\n 'mint.modern_country',\n 'governing_power',\n 'issuing_authority',\n 'material',\n 'language'\n ],\n })\n const coin = useFetch(`/coin-collections/${id}?${query}`);\n\n return(\n <div id='CoinInfoPage'>\n <div className='section1'>\n <div className='title'>\n {coin?.data?.attributes?.issuing_authority?.data?.attributes?.issuing_authority} {coin?.data?.attributes?.mint?.data?.attributes?.mint} {coin?.data?.attributes?.material?.data?.attributes?.material}\n </div>\n <div className='year'>\n {coin?.data?.attributes?.from_year < 0 ? <>{String(coin?.data?.attributes?.from_year).substring(1)} BCE</>:<>{coin?.data?.attributes?.from_year} CE</>} - {coin?.data?.attributes?.to_year < 0 ? <>{String(coin?.data?.attributes?.to_year).substring(1)} BCE</>:<>{coin?.data?.attributes?.to_year} CE</>}\n </div>\n <div className='basic-info'>\n <div className='item'>\n <h1>OBVERSE TYPE:</h1>\n <h2>{coin?.data?.attributes?.obverse_type?.length === 0 ? \"None\" :coin?.data?.attributes?.obverse_type}</h2>\n </div>\n <div className='item'>\n <h1>OBVERSE LEGEND:</h1>\n <h2>{coin?.data?.attributes?.obverse_legend?.length === 0 ? \"None\" :coin?.data?.attributes?.obverse_legend}</h2>\n </div>\n <div className='item'>\n <h1>REVERSE TYPE:</h1>\n <h2>{coin?.data?.attributes?.reverse_type?.length === 0 ? \"None\" :coin?.data?.attributes?.reverse_type}</h2>\n </div>\n <div className='item'>\n <h1 >REVERSE LEGEND:</h1>\n <h2>{coin?.data?.attributes?.reverse_legend?.length === 0 ? \"None\" :coin?.data?.attributes?.reverse_legend}</h2>\n </div>\n </div>\n </div>\n <hr/>\n <div className='section2'>\n <div className='left'>\n <CoinScaleAndFlip obverseImg = {coin?.data?.attributes?.obverse_image} reverseImg = {coin?.data?.attributes?.reverse_image} diameter = {coin?.data?.attributes?.diameter}/>\n {/* <img\n className='CoinImg'\n src={ process.env.REACT_APP_UPLOAD_URL + data?.attributes?.obverse_image?.data?.attributes?.url}\n alt=\"\"\n /> */}\n </div>\n <div className='right'>\n <div className='item'>\n <h1>Ancient Territory:</h1>\n <p>{coin?.data?.attributes?.ancient_territory?.data?.attributes?.ancient_territory.length === 0 ? \"None\" :coin?.data?.attributes?.ancient_territory?.data?.attributes?.ancient_territory}</p>\n </div>\n <div className='item'>\n <h1>Modern Country:</h1>\n <p></p>\n <p>{coin?.data?.attributes?.mint?.data?.attributes?.modern_country?.data?.attributes?.modern_country.length === 0 ? \"None\" :coin?.data?.attributes?.mint?.data?.attributes?.modern_country?.data?.attributes?.modern_country}</p>\n </div>\n <div className='item'>\n <h1>Mint:</h1>\n <p>{coin?.data?.attributes?.mint?.data?.attributes?.mint.length === 0 ? \"None\" :coin?.data?.attributes?.mint?.data?.attributes?.mint}</p>\n </div>\n <div className='item'>\n <h1>Modern Name:</h1>\n <p></p>\n <p>{coin?.data?.attributes?.mint?.data?.attributes?.modern_name?.data?.attributes?.modern_name.length === 0 ? \"None\" :coin?.data?.attributes?.mint?.data?.attributes?.modern_name?.data?.attributes?.modern_name}</p>\n </div>\n <div className='item'>\n <h1>Governing Power:</h1>\n <p>{coin?.data?.attributes?.governing_power?.data?.attributes?.governing_power.length === 0 ? \"None\" :coin?.data?.attributes?.governing_power?.data?.attributes?.governing_power}</p>\n </div>\n <div className='item'>\n <h1>Issuing Authority:</h1>\n <p>{coin?.data?.attributes?.issuing_authority?.data?.attributes?.issuing_authority.length === 0 ? \"None\" :coin?.data?.attributes?.issuing_authority?.data?.attributes?.issuing_authority}</p>\n </div>\n <div className='item'>\n <h1>Material:</h1>\n <p>{coin?.data?.attributes?.material?.data?.attributes?.material.length === 0 ? \"None\" :coin?.data?.attributes?.material?.data?.attributes?.material}</p>\n </div>\n <div className='item'>\n <h1>Denomination:</h1>\n <p>{coin?.data?.attributes?.denomination?.data?.attributes?.denomination.length === 0 ? \"None\" :coin?.data?.attributes?.denomination?.data?.attributes?.denomination}</p>\n </div>\n <div className='item'>\n <h1>Language:</h1>\n <p>{coin?.data?.attributes?.language?.data?.attributes?.language.length === 0 ? \"None\" :coin?.data?.attributes?.language?.data?.attributes?.language}</p>\n </div>\n </div>\n </div>\n <div className='section2-bottom'>\n <div className='item'>\n Source Image: {coin?.data?.attributes?.souce_image.length === 0 ? \" None\" :coin?.data?.attributes?.souce_image}\n </div>\n <div className='item'>\n Rights holder: {coin?.data?.attributes?.right_holder.length === 0 ? \" None\" :coin?.data?.attributes?.right_holder}\n </div>\n <div className='item'>\n Bibliography: {coin?.data?.attributes?.reference.length === 0 ? \" None\" :coin?.data?.attributes?.reference}\n </div>\n <div className='BackButton' onClick={()=>navigate(-1)}>\n Back to the Catalog\n </div>\n\n </div>\n <div className='section3'></div>\n <div className='section4'></div>\n </div>\n )\n}\n\nexport default CoinInfoPage\n","import axios from \"axios\";\n\nconst downloadRequest = {\n downloadFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/download`,{\n method:'GET',\n })\n },\n downloadFindLocal: async()=>{\n return await axios( 'http://localhost:1337/api/download',{\n method:'GET',\n })\n }\n}\n\nexport default downloadRequest","import React, {useState} from 'react';\nimport { useForm } from 'react-hook-form'\nimport axios from 'axios';\nimport { saveAs } from 'file-saver';\nimport { emailRegExp, nameRegExp } from 'src/utils/RegExpRules';\n\nfunction DownloadForm (props){\n const [show, setShow] = useState(false)\n const {register, handleSubmit, formState: { errors }} = useForm({\n defaultValues:{\n name:\"\",\n email:\"\"\n }\n })\n const onSubmit = (data) => {\n axios.post(`${process.env.REACT_APP_strapiURL}/api/user-download`, {data:data})\n .then(saveAs(`${process.env.REACT_APP_strapiURL}${props.url}`,'AntiochCoins.zip'))\n .then(setShow(true))\n .catch(err =>{console.error(err)})\n }\n return(\n <>\n <div id='downloadNotes'>Please provide your your name and email address in the form below to start the download.</div>\n <div id='downloadForm'>\n <form onSubmit={handleSubmit(onSubmit)} >\n <div className='formItem'>\n <label>Full Name</label>\n {show? <input type=\"text\" {...register('name')} disabled/>: <input type=\"text\" {...register('name',{\n required:\"* Name is required\",\n minLength:{value:3, message:\"* Names must have at least 3 characters\"},\n maxLength:{value:30, message:\"* Names can't be longer than 30 characters\"},\n pattern: {value: nameRegExp, message:\"* Names can only be letters\"}\n })}/>}\n { errors.name && <p className='error-message'>{errors.name.message}</p>}\n </div>\n <div className='formItem'>\n <label>Email Address</label>\n {show? <input type=\"email\" {...register('email')} disabled/>: <input type=\"email\" {...register('email',{\n required:\"* Email is required\",\n pattern: {value: emailRegExp, message:\"* Must be a valid email address\"}\n })} />}\n {errors.email && <p className='error-message'>{errors.email.message}</p>}\n </div>\n <div className='formItem'>\n {show? \n <input type=\"checkbox\" placeholder=\"Subscription us?\" {...register(\"isSubscription?\", {value: true })} disabled/>: \n <input type=\"checkbox\" placeholder=\"Subscription us?\" {...register(\"isSubscription?\", {value: true })} />}\n <span> Subscrip us to get the latest update!</span>\n\n </div>\n {show\n ? <p className='downloading'>Data is downloading!</p>\n :<input type=\"submit\" />\n }\n </form>\n </div>\n </>\n )\n}\nexport default DownloadForm","import React, {useEffect, useState} from 'react';\nimport { Row, Col} from 'react-bootstrap';\n\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport createMarkup from 'src/utils/Markup.js';\n\nimport downloadRequest from 'src/api/download';\nimport DownloadForm from './DownloadForm';\n\nfunction Download(){\n const [isLoading, setIsLoading] = useState(true);\n const [downloadPageData, setDownloadPageData] = useState([])\n\n useEffect(() => {\n async function fetchData(){\n const result = await downloadRequest.downloadFind();\n setDownloadPageData(result.data.data.attributes)\n setIsLoading(false)\n }\n fetchData()\n },[]);\n\n\n if (isLoading) {return(<LoadingPage />);}\n\n return(\n <div id='download-page'>\n <h1>Download the Data</h1>\n <Row className='d-flex justify-content-between align-items-center'>\n <Col sm={12} md={8}>\n <Row className='d-flex justify-content-around'>\n <Col xs={3} className='text-center story-icon download-icon'></Col>\n <Col xs={9} className='story-text' dangerouslySetInnerHTML={createMarkup(downloadPageData.text) } />\n </Row>\n <Row>\n <img alt={'Download'} src={`${process.env.REACT_APP_strapiURL}/uploads/Image_47_89dc6433d0.png?updated_at=2022-04-14T13:41:55.091Z`}/>\n </Row>\n </Col>\n <Col sm={12} md={3} >\n <DownloadForm url={downloadPageData.coinData.data.attributes.url}/>\n </Col>\n </Row>\n </div>\n );\n}\n\nexport default Download;\n","import axios from \"axios\";\n\nconst toolboxRequest = {\n toolboxFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/tool-box`,{\n method:'GET',\n })\n },\n toolboxFindLocal: async()=>{\n return await axios( 'http://localhost:1337/api/tool-box',{\n method:'GET',\n })\n }\n}\n\nexport default toolboxRequest","import React, {useState, useEffect} from 'react';\nimport toolboxRequest from 'src/api/toolbox';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage';\nimport { Container, Row, Col} from 'react-bootstrap';\nimport { WhiteBGDesign } from 'src/components/constant/WhiteBGDesign';\nimport PageTitleComponent from 'src/components/constant/pageTitleText';\nconst Toolbox = ()=>{\n\n const [isLoading, setIsLoading] = useState(true)\n const [toolboxData, setToolboxData] = useState([])\n\n useEffect(()=>{\n async function fetchData(){\n const result = await toolboxRequest.toolboxFind()\n setToolboxData(result.data.data.attributes)\n setIsLoading(false)\n }\n fetchData()\n },[])\n if (isLoading){return(<LoadingPage/>)}\n return(\n <div id='tool-box' >\n <Container>\n <PageTitleComponent\n title={toolboxData.title}\n text={toolboxData.text}\n subtext={toolboxData.subtext}\n />\n <Row className='my-5 d-flex py-5 justify-content-around'>\n <Col xs={3}>\n <WhiteBGDesign\n link={toolboxData.image_icons[0].url_path}\n imageSrc={toolboxData.image_icons[0].image.data.attributes.url}\n title={toolboxData.image_icons[0].title}\n subtext={toolboxData.image_icons[0].subtext}\n height=\"15vmax\"\n width=\"15vmax\"\n />\n </Col>\n <Col xs={3}>\n <WhiteBGDesign\n link={toolboxData.image_icons[1].url_path}\n imageSrc={toolboxData.image_icons[1].image.data.attributes.url}\n title={toolboxData.image_icons[1].title}\n subtext={toolboxData.image_icons[1].subtext}\n height=\"15vmax\"\n width=\"15vmax\"\n />\n </Col>\n <Col xs={3}>\n <WhiteBGDesign\n link={toolboxData.image_icons[2].url_path}\n imageSrc={toolboxData.image_icons[2].image.data.attributes.url}\n title={toolboxData.image_icons[2].title}\n subtext={toolboxData.image_icons[2].subtext}\n height=\"15vmax\"\n width=\"15vmax\"\n />\n </Col>\n </Row>\n <hr />\n <Row className='d-flex align-items-center justify-content-around my-5 py-5'>\n <Col xs={3}>\n <WhiteBGDesign\n link={toolboxData.image_icons[3].url_path}\n imageSrc={toolboxData.image_icons[3].image.data.attributes.url}\n title={toolboxData.image_icons[3].title}\n subtext={toolboxData.image_icons[3].subtext}\n height=\"15vmax\"\n width=\"15vmax\"\n />\n </Col>\n <Col xs={3}>\n <WhiteBGDesign\n link={toolboxData.image_icons[4].url_path}\n imageSrc={toolboxData.image_icons[4].image.data.attributes.url}\n title={toolboxData.image_icons[4].title}\n subtext={toolboxData.image_icons[4].subtext}\n height=\"15vmax\"\n width=\"15vmax\"\n />\n </Col>\n </Row>\n </Container>\n </div>\n )\n}\nexport default Toolbox","import { useEffect, useState } from 'react';\n\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport ReactFullpage from '@fullpage/react-fullpage';\nimport StoryComponent from 'src/pages/Stories/StoryComponents.js';\nimport storyRequest from 'src/api/story';\nimport zoteroRequest from 'src/api/zotero';\nimport Footer from 'src/components/footer/Footer.js';\n\nconst HowToReadACoin = () => {\n const [isLoading, setIsLoading] = useState(true);\n const [storyFrame, setStoryFrame] = useState([])\n const [storyAnchors, setStoryAnchors]=useState([])\n const [storyReference, setStoryReference] = useState([])\n const [storyImageSouce, setStoryImageSouce]= useState([])\n const [isBottomOpen, setIsBottomOpen] = useState(false)\n\n\n useEffect(()=>{\n async function fetchData(){\n // if(isLoading === false) setIsLoading(true);\n const result = await storyRequest.storyFindOne('1')\n createImageReference(result.data.data.attributes)\n createZoteroReference(result.data.data.attributes)\n createAnchors(result.data.data.attributes)\n setStoryFrame(result.data.data.attributes.zone)\n setIsLoading(false)\n }\n fetchData().catch(console.error);\n },[])\n\n const toggleBottom = (e) => {\n const el = e.target.closest(\"button.reference-tag\");\n if (el && e.currentTarget.contains(el)) {\n setIsBottomOpen((prev) => !prev)\n }\n }\n\n async function createImageReference(resultData){\n let imgRef=[]\n resultData.zone.forEach((frame)=>{\n //coin-compare\n if(frame.cc_coin){\n let ref = {}\n ref['right_holder']=frame.cc_coin.coin.data.attributes.right_holder\n ref['source_image']=frame.cc_coin.coin.data.attributes.source_image\n imgRef.push(ref)\n }\n //scale-frame\n else if(frame.scale_coin_left && frame.scale_coin_right){\n let ref1 = {}\n let ref2 = {}\n ref1['right_holder']=frame.scale_coin_left.coin.data.attributes.right_holder\n ref1['source_image']=frame.scale_coin_left.coin.data.attributes.source_image\n ref2['right_holder']=frame.scale_coin_right.coin.data.attributes.right_holder\n ref2['source_image']=frame.scale_coin_right.coin.data.attributes.source_image\n imgRef.push(ref1,ref2)\n }\n //fades-frame\n else if(frame.fades){\n frame.fades.forEach((fade)=>{\n let ref1 = {}\n let ref2 = {}\n ref1['right_holder']=fade.coin_left.data.attributes.right_holder\n ref1['source_image']=fade.coin_left.data.attributes.source_image\n ref2['right_holder']=fade.coin_right.data.attributes.right_holder\n ref2['source_image']=fade.coin_right.data.attributes.source_image\n imgRef.push(ref1,ref2)\n })\n }\n //flip-frame\n else if(frame.flip_coin_left && frame.flip_coin_right){\n let ref1 = {}\n let ref2 = {}\n ref1['right_holder']=frame.flip_coin_left.coin.data.attributes.right_holder\n ref1['source_image']=frame.flip_coin_left.coin.data.attributes.source_image\n ref2['right_holder']=frame.flip_coin_right.coin.data.attributes.right_holder\n ref2['source_image']=frame.flip_coin_right.coin.data.attributes.source_image\n imgRef.push(ref1,ref2)\n }\n else if(frame.images){\n frame.images.forEach((image)=>{\n let ref = {}\n if(image.coin.data){\n ref['right_holder']=image.coin.data.attributes.right_holder\n ref['source_image']=image.coin.data.attributes.source_image\n imgRef.push(ref)\n }\n })\n }\n else if(frame.it_image){\n let ref = {}\n if(frame.it_image.coin.data){\n ref['right_holder']=frame.it_image.coin.data.attributes.right_holder\n ref['source_image']=frame.it_image.coin.data.attributes.source_image\n imgRef.push(ref)\n }\n }\n else if(frame.iti_image_left && frame.iti_image_right){\n let ref1 = {}\n if(frame.iti_image_left.coin.data){\n ref1['right_holder']=frame.iti_image_left.coin.data.attributes.right_holder\n ref1['source_image']=frame.iti_image_left.coin.data.attributes.source_image\n }\n let ref2 = {}\n if(frame.iti_image_right.coin.data){\n ref2['right_holder']=frame.iti_image_right.coin.data.attributes.right_holder\n ref2['source_image']=frame.iti_image_right.coin.data.attributes.source_image\n }\n imgRef.push(ref1,ref2)\n }\n })\n //sort the array\n function compare(a,b){\n if ( a.right_holder < b.right_holder ){return -1;}\n if ( a.right_holder > b.right_holder ){return 1;}\n return 0;\n }\n\n imgRef = imgRef.sort(compare)\n imgRef = [...new Map(imgRef.map(item =>[item['right_holder'], item])).values()];// Deduplication\n imgRef = imgRef.filter(function(obj){return obj.right_holder!=='NA'}) //delete NA value\n setStoryImageSouce(imgRef)\n }\n\n async function createZoteroReference(resultData){\n let itemkeys = []\n resultData.references.data.forEach((reference)=>{itemkeys.push(reference.attributes.item_key)})\n let bibArr = []\n for (const itemkey of itemkeys){\n const data = await zoteroRequest.getOneItemBib(itemkey)\n bibArr.push(data.data)\n }\n bibArr = bibArr.sort()\n setStoryReference(bibArr)\n\n // let itemkeys = []\n // resultData.references.data.forEach((reference)=>{itemkeys.push(reference.attributes.item_key)})\n // let zoteroReference = []\n // for (const itemkey of itemkeys){\n // const data = await zoteroRequest.getOneItem(itemkey)\n // zoteroReference.push(data.data)\n // }\n // //order Bib by last name\n // function compare(a,b){\n // if ( a.data.creators[0].lastName < b.data.creators[0].lastName ){return -1;}\n // if ( a.data.creators[0].lastName > b.data.creators[0].lastName ){return 1;}\n // return 0;\n // }\n // zoteroReference = zoteroReference.sort(compare)\n // setStoryReference(zoteroReference)\n }\n\n async function createAnchors(resultData){\n let arrAnchros = []\n for (let i=0; i<resultData.zone.length;i++){\n let title = resultData.name.replace(/\\s/g, '')\n arrAnchros.push(title+'-slides-' +i)\n }\n setStoryAnchors(arrAnchros)\n }\n\n // Render\n if (isLoading) return (<LoadingPage />);\n return (\n <>\n <ReactFullpage\n licenseKey = {'K3HO6-208O9-6QK0J-JZ1VH-RRWIO'}\n navigation = {true}\n navigationPosition={`right`}\n anchors={storyAnchors}\n autoScrolling = {true}\n // onLeave={(origin, destination, direction) => {\n // console.log(\"onLeave event\", { origin, destination, direction });\n // }}\n render={({state, fullpageApi}) => {\n let storyJSX = [];\n storyFrame.forEach((story,i)=>{storyJSX.push(StoryComponent(story,i,fullpageApi, state,toggleBottom))})\n return (\n <ReactFullpage.Wrapper>\n {storyJSX}\n </ReactFullpage.Wrapper>\n );\n }}\n />\t\n <Footer\n references={storyReference}\n imageReference={storyImageSouce}\n toggleBottom={toggleBottom}\n isBottomOpen={isBottomOpen}\n />\n </>\n\n );\n \n}\n\nexport default HowToReadACoin;\n","import axios from \"axios\";\n\nconst VideoLibraryRequest = {\n videoFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/videos`,{\n method:'GET',\n })\n },\n videoFindLocal: async()=>{\n return await axios( 'http://localhost:1337/api/videos',{\n method:'GET',\n })\n }\n\n}\nexport default VideoLibraryRequest","import React, {useState, useEffect} from 'react';\n\nimport { Row,Col} from 'react-bootstrap';\nimport ReactPlayer from 'react-player';\nimport VideoLibraryRequest from 'src/api/video-library';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage';\nimport createMarkup from 'src/utils/Markup';\n\nimport Modal from \"react-responsive-modal\";\nimport 'react-responsive-modal/styles.css';\n\nfunction Player(props){\n const { open, toggleModal, url } = props;\n return (\n <Modal\n open={open}\n onClose={toggleModal}\n styles={{\n modal: {maxWidth: \"unset\",width: \"80%\",},\n overlay: {background: \"rgba(0, 0, 0, 0.5)\"},\n closeButton: {background: \"white\"},\n }}\n center>\n <ReactPlayer \n url={url}\n width=\"100%\"\n height=\"calc(100vh - 350px)\"\n controls={true}\n playing={true}\n />\n </Modal>\n );\n}\n\nconst VideoLibrary = ()=>{\n\n const [isLoading, setIsLoading] = useState(true)\n const [isOpen, setIsOpen] = useState(false)\n\n const [videoData, setVideoData] = useState([])\n const [url, setUrl] = useState(\"\")\n\n useEffect(()=>{\n async function fetchData(){\n const result = await VideoLibraryRequest.videoFind()\n console.log(result.data.data)\n setVideoData(result.data.data)\n setIsLoading(false)\n }\n fetchData()\n },[])\n\n async function handleOpenModal(url){\n setUrl(url)\n setIsOpen((prev) => !prev)\n }\n \n if(isLoading) return(<LoadingPage />)\n return(\n <div id='video-library' >\n <h1 className='text-center mb-5 pb-5'>Video Library</h1>\n <h3 className='text-center'>Watch short informational videos on a wide range of topics related to the study of coins, the ethics of coin collecting, Syrian cultural heritage, and more.</h3>\n <Player open={isOpen} toggleModal={handleOpenModal} url={url} />\n <Row className='d-flex justify-content-around '>\n {videoData.length === 0? (<></>):(<>\n {videoData.map((video)=>{\n return(\n <Col key={video.id} xs={3} className=\"mt-5 pt-5 text-center\">\n {video.attributes.video_thumbnail.data\n ? <img \n src={`${process.env.REACT_APP_strapiURL}${video.attributes.video_thumbnail.data.attributes.url}`} \n alt={video.attributes.video_thumbnail.data.attributes.alternativeText} \n onClick={()=>handleOpenModal(video.attributes.video_url)}\n style={{cursor:\"pointer\", width:\"20vmax\",height:\"15vmax\"}}\n className=\"bg-white p-3\"/>\n :<b className='image-icon text-center' style={{cursor:\"pointer\", fontSize:\"10vmax\"}} onClick={()=>handleOpenModal(video.attributes.video_url)}></b>}\n <h4 className='mt-4'>{video.attributes.video_title || \"\"}</h4>\n <p className='story-caption' dangerouslySetInnerHTML={createMarkup(video.attributes.video_description || \"\")}/>\n </Col>\n )})}\n </>)}\n </Row>\n </div>\n )\n}\nexport default VideoLibrary","import React from 'react';\nimport { createMarkup } from 'src/utils/Markup.js';\nimport WhitePopUp from 'src/utils/WhitePopUp.js';\n\nfunction tag(text) {\n // console.log(text);\n return (\n <div key={Math.random()} className='event-tag' style={{ backgroundColor: text.color}}>\n <p className='tag-text'>\n {text?.topic?.length > 0 ? text?.topic : \"\"}\n {text?.governing_power?.length > 0 ? text?.governing_power : \"\"}\n\n </p>\n </div>\n );\n};\n\nfunction loadtags(tag1,tag2) { // Split every tag into individual components with delimiter ',' and push the resultant jsx to array\n let jsxArr = [];\n\n if (tag1 && tag1.data.length > 0) {\n tag1.data.forEach((e)=>{\n if(e.subcategory1 !== null){\n // jsxArr.push(tag(e.subcategory1));\n jsxArr.push(tag(e.attributes));\n\n }\n })\n }\n if (tag2 && tag2.data.length > 0){\n tag2.data.forEach((e)=>{\n // jsxArr.push(tag(e.subcategory2));\n jsxArr.push(tag(e.attributes));\n\n })\n }\n return jsxArr;\n}\n\nconst EventInfo = (props) => {\n const CloseHandler = (e) => {\n props.onClose(false);\n };\n // console.log(props);\n return (\n\n <WhitePopUp show={props.show} onClose={CloseHandler}>\n <div id='event-info'>\n <div id='event-info-inner-div'>\n {/* title */}\n <div id='event-title'>\n <p>\n {props.eventMetaData.title}\n </p>\n </div>\n\n <div id='event-description' dangerouslySetInnerHTML={createMarkup(props.eventMetaData.text)} />\n\n <div className='light-green-background'>\n <div id='event-connections'>\n <p id='event-connections-text' className='gray-text'>\n TAGS\n </p>\n <div id='event-tags' className='my-3'>\n {loadtags(props.eventMetaData.governing_powers,props.eventMetaData.topics)}\n </div>\n </div>\n </div>\n \n </div>\n </div>\n </WhitePopUp>\n );\n};\n\nexport default EventInfo;\n","export function colors(text){\n text = text.toLowerCase();\n // ColorB85828:'#B85828',\n let ColorB85828 = ['roman republic','reman principate','start_roman_x'];\n // Color78a878:'#78a878',\n let Color78a878=['persina','parthian','hasmonean','armenian','sasanian','herodian','nabataean'];\n // Colord8b848:'#d8b848',\n let Colord8b848=['greek', 'seleucid', 'ptolemaic' , 'alexander the great', 'attalid','start_greek_hellenistic_x'];\n // Color737271:'#737271',\n let Color737271=['emesene' , 'commagenian','syrian' , 'palmyrene'];\n // Color486678:'#486678',\n let Color486678=['political'];\n // Color313029:'#313029',\n let Color313029=['military'];\n // Colord88858:'#d88858',\n let Colord88858=['economic'];\n // Colord8a048:'#d8a048',\n let Colord8a048=['eastern'];\n let Color7FA87F=['start_eastern_states_x'];\n if(ColorB85828.includes(text))\n return '#b85828';\n else if(Color78a878.includes(text))\n return '#78a878';\n else if(Colord8b848.includes(text))\n return '#d8b848';\n else if(Color737271.includes(text))\n return '#737271';\n else if(Color486678.includes(text))\n return '#486678';\n else if(Color313029.includes(text))\n return '#313029';\n else if(Colord88858.includes(text))\n return '#88858';\n else if(Colord8a048.includes(text)){\n return '#8a048';\n }\n else if(Color7FA87F.includes(text)){\n return '#7FA87F';\n }\n else{\n return '#71797E'\n }\n\n}\n\n// export function find_color(text) {\n// text = text.toLowerCase();\n// // console.log(text)\n// if (text.includes('roman'))\n// return '#B85828'; //b85828\n// if (text.includes('greek', 'seleucid', 'ptolemaic' , 'alexander the great', 'attalid'))\n// return '#d8b848';\n// if (text.includes('persina' , \"parthian\" , \"hasmonean\" , \"armenian\" , \"sasanian\" , \"herodian\" , \"nabataean\"))\n// return '#78a878';\n// if (text.includes('emesene' , 'commagenian','syrian' , 'palmyrene'))\n// return '#737271';\n// if (text.includes('political'))\n// return '#486678';\n// if (text.includes('military'))\n// return '#313029';\n// if (text.includes('cultural'))\n// return '#d88858';\n// if (text.includes('economic'))\n// return '#d8a048';\n// if (text.includes('eastern'))\n// return '#7FA87F';\n// return this.default;\n// }\n// export const mintColor = {\n// find_color:function(text){\n// text = text.toLowerCase();\n// if(text.includes(\"antioch\"))\n// return \"#f4f2f0\";\n// if(text.includes(\"syria\"))\n// return \"#737271\";\n// if(text.includes(\"roman\"))\n// return \"#b85828\";\n// if(text.includes(\"greek\" , \"Hellenistic\"))\n// return \"#987818\";\n// if(text.includes(\"eastern\"))\n// return \"#184818\";\n// }\n","export default __webpack_public_path__ + \"static/media/timelinekey.e2fe29cc.png\";","import React, {useState, useEffect} from 'react';\nimport Svg from 'react-native-svg';\nimport axios from 'axios';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport CoinInfo from 'src/components/coin/CoinInfo.js';\nimport EventInfo from 'src/pages/Toolbox/Timeline/event/Event.js';\n\nimport { SetupTimelineBackground } from './TimeLineBackground';\nimport { LoadTimelineInfo } from './TimeLineInfo';\nimport timelinekey from './res/timelinekey.png'\nimport NoFeedBackIcon from 'src/components/constant/NoFeedBackIcon';\nimport PageTitleComponent from 'src/components/constant/pageTitleText';\nimport qs from 'qs'\nvar coins = undefined; // idk why I can't use useState, but I can't. useState becomes undefined for whatever reason, but a pure JS object doesn't.\nvar events = undefined; // idk why I can't use useState, but I can't. useState becomes undefined for whatever reason, but a pure JS object doesn't.\nconst default_coin_data = {\n \"reverse_type\": \"Tyche holding sceptre and cornucopia\",\n \"mint\": \"Antioch\",\n \"to_date\": -150,\n \"material\": \"Silver\",\n \"denomination\": \"Tetradrachm\",\n \"obverse_legend\": \"None\",\n \"reverse_legend\": \"ΒΑΣΙΛΕΩΣ ΔΗΜΗΤΡΙΟΥ\",\n \"obverse_type\": \"Demetrius I\",\n \"issuing_authority\": \"Royal\",\n \"diameter\": 29,\n \"createdAt\": \"2022-05-09T19:17:41.794Z\",\n \"updatedAt\": \"2022-05-09T19:48:01.929Z\",\n \"coin_id\": \"antioch_silver_demetrius1_tyche\",\n \"modern_country\": \"Syria\",\n \"ancient_territory\": \"Syria\",\n \"mint_nomisma_uri\": \"http://nomisma.org/id/antiocheia_syria\",\n \"mint_modern_name\": \"Antakya\",\n \"longitude\": 36.2,\n \"latitude\": 36.16,\n \"date_range\": \"c. 162 BCE-150 BCE\",\n \"from_date\": -162,\n \"governing_power\": {\n \"data\": {\n \"id\": 3,\n \"attributes\": {\n \"governing_power\": \"Seleucid\",\n \"color\": \"#d8b8f8\"\n }\n }\n },\n \"nomisma_obverse_uri\": \"http://nomisma.org/id/demetrius_i_soter\",\n \"nomisma_reverse_uri\": \"http://nomisma.org/id/tyche\",\n \"language\": \"Greek\",\n \"source_image\": \"http://numismatics.org/collection/1950.84.7?lang=en\",\n \"stable_id\": null,\n \"wikidata\": null,\n \"right_holder\": \"American Numsimatic Society - 1950.84.7\",\n \"ref1\": \"Seleucid Coins 1.1, no. 1633-4\",\n \"ref2\": null,\n \"has_image\": true,\n \"obverse_file\": {\n \"data\": {\n \"id\": 816,\n \"attributes\": {\n \"name\": \"7b9d83483f17c053bdd9226b607154e1.png\",\n \"alternativeText\": \"7b9d83483f17c053bdd9226b607154e1.png\",\n \"caption\": \"7b9d83483f17c053bdd9226b607154e1.png\",\n \"width\": 600,\n \"height\": 601,\n \"formats\": {\n \"small\": {\n \"ext\": \".png\",\n \"url\": \"/uploads/small_7b9d83483f17c053bdd9226b607154e1_452122071f.png\",\n \"hash\": \"small_7b9d83483f17c053bdd9226b607154e1_452122071f\",\n \"mime\": \"image/png\",\n \"name\": \"small_7b9d83483f17c053bdd9226b607154e1.png\",\n \"path\": null,\n \"size\": 489.31,\n \"width\": 499,\n \"height\": 500\n },\n \"thumbnail\": {\n \"ext\": \".png\",\n \"url\": \"/uploads/thumbnail_7b9d83483f17c053bdd9226b607154e1_452122071f.png\",\n \"hash\": \"thumbnail_7b9d83483f17c053bdd9226b607154e1_452122071f\",\n \"mime\": \"image/png\",\n \"name\": \"thumbnail_7b9d83483f17c053bdd9226b607154e1.png\",\n \"path\": null,\n \"size\": 53.76,\n \"width\": 156,\n \"height\": 156\n }\n },\n \"hash\": \"7b9d83483f17c053bdd9226b607154e1_452122071f\",\n \"ext\": \".png\",\n \"mime\": \"image/png\",\n \"size\": 214.82,\n \"url\": \"/uploads/7b9d83483f17c053bdd9226b607154e1_452122071f.png\",\n \"previewUrl\": null,\n \"provider\": \"local\",\n \"provider_metadata\": null,\n \"createdAt\": \"2022-04-14T13:47:45.853Z\",\n \"updatedAt\": \"2022-04-14T13:47:45.853Z\"\n }\n }\n },\n \"reverse_file\": {\n \"data\": {\n \"id\": 1510,\n \"attributes\": {\n \"name\": \"eecaa68a86a7d889cba45f21ba821a9a.png\",\n \"alternativeText\": \"eecaa68a86a7d889cba45f21ba821a9a.png\",\n \"caption\": \"eecaa68a86a7d889cba45f21ba821a9a.png\",\n \"width\": 600,\n \"height\": 596,\n \"formats\": {\n \"small\": {\n \"ext\": \".png\",\n \"url\": \"/uploads/small_eecaa68a86a7d889cba45f21ba821a9a_4cf4dcbc1c.png\",\n \"hash\": \"small_eecaa68a86a7d889cba45f21ba821a9a_4cf4dcbc1c\",\n \"mime\": \"image/png\",\n \"name\": \"small_eecaa68a86a7d889cba45f21ba821a9a.png\",\n \"path\": null,\n \"size\": 526.33,\n \"width\": 500,\n \"height\": 497\n },\n \"thumbnail\": {\n \"ext\": \".png\",\n \"url\": \"/uploads/thumbnail_eecaa68a86a7d889cba45f21ba821a9a_4cf4dcbc1c.png\",\n \"hash\": \"thumbnail_eecaa68a86a7d889cba45f21ba821a9a_4cf4dcbc1c\",\n \"mime\": \"image/png\",\n \"name\": \"thumbnail_eecaa68a86a7d889cba45f21ba821a9a.png\",\n \"path\": null,\n \"size\": 58.31,\n \"width\": 157,\n \"height\": 156\n }\n },\n \"hash\": \"eecaa68a86a7d889cba45f21ba821a9a_4cf4dcbc1c\",\n \"ext\": \".png\",\n \"mime\": \"image/png\",\n \"size\": 235.95,\n \"url\": \"/uploads/eecaa68a86a7d889cba45f21ba821a9a_4cf4dcbc1c.png\",\n \"previewUrl\": null,\n \"provider\": \"local\",\n \"provider_metadata\": null,\n \"createdAt\": \"2022-04-14T13:57:53.247Z\",\n \"updatedAt\": \"2022-04-14T13:57:53.247Z\"\n }\n }\n },\n \"type_category\": [\n {\n \"id\": 1,\n \"type_category\": \"Ruler\"\n },\n {\n \"id\": 3,\n \"type_category\": \"God\"\n },\n {\n \"id\": 2,\n \"type_category\": \"Object\"\n }\n ]\n};\n\nconst default_event_data = {\n \"title\": \"Alexander the Great Dies\",\n \"tags\": \"Greek, Political\",\n \"text\": \"<p>In 323 BCE, Alexander the Great died from an illness while in the city of Babylon. </p>\\n<p><em>[Alexander's soldiers] longed to see him...most from grief and longing for their King pressed in to see Alexander. They say that he was already speechless as the army filed past; yet he greeted one and all, raising his head, though with difficulty, and signing to them with his eyes... Alexander shortly afterwards breathed his last... Some have recorded that his friends asked him to whom he left his kingdom; and replied, \\\"to the best.\\\"</em> -Arrian, <em>Anabsis of Alexander</em> 7.26 </p>\",\n \"TypeCategory\": null,\n \"color\": \"#987818\",\n \"createdAt\": \"2022-04-18T17:11:02.281Z\",\n \"updatedAt\": \"2022-04-18T17:11:02.281Z\"\n};\n\nconst Timeline = () => {\n const [timeline_background_is_loading, set_timeline_background_is_loading] = useState(true);\n const [timeline_info_is_loading, set_timeline_info_is_loading] = useState(true);\n const [view_box_min_height, set_view_box_min_height] = useState(0);\n const [view_box_total_height, set_view_box_total_height] = useState(0);\n const [timeline_background, set_timeline_background] = useState(undefined); // This is just the background colors, with the dotted lines and numbering on the right hand side\n // const [timeline_description, set_timeline_description] = useState(undefined); // This is the description at the top of the page\n const [timeline_events_and_coins, set_timeline_events_and_coins] = useState(undefined); // This is the event and coins pop ups you see that you can interact with\n // These are the view box dimensions\n const [timeLineText, setTimelineText] = useState({text:'', subtext:''})\n \n const params = window.location.href\n const contentID = params.split('#')[1]\n if(contentID){\n const element = document.getElementById(contentID)\n // console.log(element) // this called 53 times...\n if(element){\n element.scrollIntoView({\n behavior:'auto',\n block: 'center'});\n }\n }\n\n\n const y_offset = 5;\n // Coin info setup here. \n const [show_coin_info, set_show_coin_info] = useState(false);\n const CoinInfoPopupCloseHandler = (e) => { // This is used to show / remove popup on certain conditions\n set_show_coin_info(e);\n };\n const [coin_meta_data, set_coin_meta_data] = useState(default_coin_data);\n const update_coin_info = (img_dom_obj) => { // This is a function that is passed to the image comp per coin image and is called each time to update coin info if on click\n let id = parseInt(img_dom_obj.target.id);\n\n // Run update through here\n set_coin_meta_data(coins.filter(e => {\n return e.id === id;\n })[0]);\n set_show_coin_info(true);\n };\n\n\n // Event info setup here.\n const [show_event_info, set_show_event_info] = useState(false);\n const EventInfoPopupCloseHandler = (e) => {\n set_show_event_info(e);\n };\n const [event_meta_data, set_event_meta_data] = useState(default_event_data);\n const update_event_info = (event_dom_obj) => {\n // console.log(\"event_dom_obj:\",event_dom_obj)\n let id = parseInt(event_dom_obj.target.id);\n\n // update event meta data\n // console.log(\"Events\",events)\n set_event_meta_data(events.filter(e => {\n return e.data.id === id;\n })[0].data.attributes);\n set_show_event_info(true);\n };\n\n useEffect(() => {\n // This is the background\n if (timeline_background_is_loading) {\n axios.get(process.env.REACT_APP_API_URL + `/timelines`)\n .then((res, err) => {\n if (err) {\n console.error(err);\n return;\n }\n // console.log(res);\n let result_from_setup_timeline_background = SetupTimelineBackground({res,err, y_offset, });\n // console.log(result_from_setup_timeline_background)\n set_view_box_total_height(result_from_setup_timeline_background.view_box_total_height);\n set_view_box_min_height(result_from_setup_timeline_background.view_box_min_height);\n set_timeline_background(result_from_setup_timeline_background.jsx_arr);\n\n set_timeline_background_is_loading(false);\n });\n }\n\n // This is the coins and events and connecting stuff **********************\n if (timeline_info_is_loading) {\n let query = qs.stringify({\n populate: [\n 'zone',\n 'zone.event',\n 'zone.event.governing_powers',\n 'zone.event.topics',\n\n 'zone.coin',\n 'zone.coin.reverse_file',\n 'zone.coin.obverse_file',\n 'zone.coin.type_category',\n 'zone.coin.governing_power',\n 'zone.coin_a',\n 'zone.coin_a.reverse_file',\n 'zone.coin_a.obverse_file',\n 'zone.coin_a.type_category',\n 'zone.coin_a.governing_power',\n 'zone.coin_b',\n 'zone.coin_b.reverse_file',\n 'zone.coin_b.obverse_file',\n 'zone.coin_b.type_category',\n 'zone.coin_b.governing_power',\n ],\n });\n axios.get(process.env.REACT_APP_API_URL + `/timeline-info?${query}`)\n .then((res, err) => {\n if (err) {\n console.error(err);\n } \n else {\n // console.log(res.data.data);\n setTimelineText({text:res.data.data.attributes.text,subtext:res.data.data.attributes.subtext})\n var timeline_info_interval = setInterval(function() {\n if (!timeline_background_is_loading) {\n clearInterval(timeline_info_interval); // WHT IS THIS???\n // console.log(view_box_min_height)\n let tmp = LoadTimelineInfo({res, y_offset, view_box_min_height, coins, events, update_coin_info, update_event_info});\n set_timeline_events_and_coins(tmp.jsx_arr);\n coins = tmp.coin_info_arr;\n events = tmp.event_info_arr;\n\n set_timeline_info_is_loading(false);\n }\n }, 200);\n }\n });\n }\n });\n\n if (timeline_info_is_loading && timeline_background_is_loading) {\n return (<LoadingPage />);\n }\n\n return (\n <>\n <NoFeedBackIcon formfor='timeline' color='#487848'/>\n <div id='Timeline-page'>\n <PageTitleComponent\n title='Coins in Time'\n text={timeLineText.text}\n subtext={timeLineText.subtext}\n addContanter='true'\n />\n <div>\n <img src={timelinekey} alt=\"\" style={{width:\"70%\", marginLeft:\"15%\"}}/>\n </div>\n <div className='sticky-sections'>\n <div id='time-west'>WEST</div>\n <div id='time-antioch'>ANTIOCH</div>\n <div id='time-east'>EAST</div>\n </div>\n <Svg\n height='100%'\n width='100%'\n viewBox={`0 0 100 ${view_box_total_height}`}\n style={{position: 'relative',}}>\n {timeline_background}\n {timeline_events_and_coins}\n </Svg>\n <CoinInfo \n onClose={CoinInfoPopupCloseHandler}\n show={show_coin_info}\n coinMetaData={coin_meta_data}\n />\n <EventInfo\n onClose={EventInfoPopupCloseHandler}\n show={show_event_info}\n eventMetaData={event_meta_data}\n />\n </div>\n </>\n );\n}\n\nexport default Timeline;\n","import {\n Path,\n Text,\n Line,\n Rect,\n } from 'react-native-svg';\nimport { colors } from 'src/pages/Toolbox/Timeline/constants.js';\n\nexport function SetupTimelineBackground(obj) {\n let res = obj.res.data;\n let y_offset = obj.y_offset;\n // Push background backdrop react-native-svg elements onto render array for react to load\n let jsx_arr = [];\n let view_box_min_height = 0;\n let view_box_total_height = 0;\n \n // We are parsing object keys to get start and end dates to match\n // The XXX part of start_XXX_x and end_XXX_x must match case insensitive\n let keys = Object.keys(res.data[0].attributes);\n let start_end_key_pairs = [];\n \n // We need to get our keys and put then in a start end key pairs so we can process the data\n keys.forEach((e) => {\n if (e.toLowerCase().includes('end') || e.toLowerCase().includes('start')) {\n let identifier = e.substring(e.indexOf('_')+1, e.lastIndexOf('_')).toLowerCase();\n let pushed = false;\n // push it to a double array of Nx2 size.\n start_end_key_pairs.forEach((ee) => {\n ee.forEach((eee) => { // Lol eee. I was about to add another e for fun.\n if (eee.toLowerCase().includes(identifier)) {\n ee.push(e);\n pushed=true;\n }\n });\n });\n // For new end or start x dates\n if (!pushed) {\n start_end_key_pairs.push([e]);\n }\n }\n });\n \n // By here, the object keys for start and end date should be ordered. Yes this is a O(n^3) algorithm, but idc. data set should be relatively small\n \n /* Objective: format data into react-native-svg freindly path for automatic interpolation with bezier curves.\n *\n * Wiki:\n * https://github.com/react-native-svg/react-native-svg#path \n *\n * Basically we are building the d element in the pathing for react-native-svg \n * example d element:\n * d=\"M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25\"\n * M means move to 25, 10 (x,y). Then L98 65 means line to (98,65), etc...\n * I'm just building that string up.\n *\n *\n * Curve styles:\n *\n * M = moveto\n * L = lineto\n * H = horizontal lineto\n * V = vertical lineto\n * C = curveto\n * S = smooth curveto\n * Q = quadratic Bézier curve\n * T = smooth quadratic Bézier curveto\n * A = elliptical Arc\n * Z = closepath\n *\n * Noticed that Q works the best. Some of the other options tend to have \"problems\"\n */\n let curve_style = 'Q';\n \n \n // Min and Maxheight are useful to let us offset negative dates and move it downwards because react-native-svg doesn't like using negative numbers\n // This makes it easy for react-native-svg to start at 0 for y value\n let min_height = (res.data[0].attributes.y_date); // We can assume index 0 is the smallest because it is ordered by ascending\n let max_height = (res.data[res.data.length-1].attributes.y_date); // We can assume index last is the biggest because it is ordered by ascending\n let view_box_height = (Math.abs(min_height-max_height)); // The size of the viewbox\n view_box_min_height = min_height;\n view_box_total_height = view_box_height;\n // Setup X and Y containers for render\n let start_end_key_pair_svg_values = JSON.parse(JSON.stringify(start_end_key_pairs));\n for (let i = 0; i < start_end_key_pair_svg_values.length; i++) {\n start_end_key_pair_svg_values[i][0] = [];\n start_end_key_pair_svg_values[i][1] = [];\n }\n \n // This is where the magic happens for setting up the background curves\n res.data.forEach((e, index) => {\n e = e.attributes; // This is to make querying the value e easier since all the important information is in the attrubutes\n for (let i = 0; i < start_end_key_pairs.length; i++) {\n if (e[start_end_key_pairs[i][0]] === null || e[start_end_key_pairs[i][1]] === null || isNaN(e[start_end_key_pairs[i][0]]) || isNaN(e[start_end_key_pairs[i][1]])) { // Avoid null points. These get ugly if we aren't careful\n continue;\n }\n \n if (start_end_key_pair_svg_values[i][0] === undefined || start_end_key_pair_svg_values[i][0].length === 0) { // If this is a \"new\" timeline object (meaning everything else for it was undefined up until this point), move to.\n start_end_key_pair_svg_values[i][0].push(`M${e[start_end_key_pairs[i][0]]} ${e.y_date + Math.abs(min_height)+y_offset} `);\n start_end_key_pair_svg_values[i][1].push(`${e[start_end_key_pairs[i][1]]} ${e.y_date + Math.abs(min_height)+y_offset} `);\n } else if (start_end_key_pair_svg_values[i][0].length === 1) { // If this timeline object was \"recently\" made (the above statement), make it have the proper curve style\n start_end_key_pair_svg_values[i][0].push(`${curve_style}${e[start_end_key_pairs[i][0]]} ${e.y_date + Math.abs(min_height)+y_offset} `);\n start_end_key_pair_svg_values[i][1].push(`${curve_style}${e[start_end_key_pairs[i][1]]} ${e.y_date + Math.abs(min_height)+y_offset} `);\n } else { // If this timeline object is done being made and just needs to continue output dates, do that\n start_end_key_pair_svg_values[i][0].push(`${e[start_end_key_pairs[i][0]]} ${e.y_date + Math.abs(min_height)+y_offset} `);\n start_end_key_pair_svg_values[i][1].push(`${e[start_end_key_pairs[i][1]]} ${e.y_date + Math.abs(min_height)+y_offset} `);\n }\n }\n });\n \n // This fix is to FORCE svg-react-native to draw lines at the very top of the timeline for those timeline objects that start at the top of the timeline\n // Without this, there is a slanted line at the top of the timeline for timeline objects. Other objects face this problem, but it isn't as bad of a problem unless it is at the top\n for (let i = 0; i < start_end_key_pair_svg_values.length; i++) { \n if (parseInt(start_end_key_pair_svg_values[i][0][0].substring(start_end_key_pair_svg_values[i][0][0].indexOf(' ')))+min_height-6 > min_height) {\n continue;\n }\n start_end_key_pair_svg_values[i][0][1] = start_end_key_pair_svg_values[i][0][1].replace(curve_style, 'L');\n start_end_key_pair_svg_values[i][0][4] = curve_style + start_end_key_pair_svg_values[i][0][4];\n \n start_end_key_pair_svg_values[i][1][3] = 'L'+start_end_key_pair_svg_values[i][1][3];\n }\n for (let i = 0; i < start_end_key_pairs.length; i++) {\n jsx_arr.push(\n <Path\n d={start_end_key_pair_svg_values[i][0].join(\"\") + start_end_key_pair_svg_values[i][1].reverse().join(\"\")}\n stroke='none'\n fill={colors(start_end_key_pairs[i][0])}\n key={`timeline_${jsx_arr.length}`}\n style={{\n opacity: '0.6'\n }}/>\n );\n }\n \n \n \n /* ********************************************************************************************** *\n * The next part is just prettyfier code *\n * This isn't 100% necessary, but good to have *\n * ********************************************************************************************** */\n \n // This is that slightly white background you see in the middle of the screen\n jsx_arr.push( \n <Rect\n key='timeline_white'\n x='33'\n y={`${y_offset}`}\n width='33'\n height={view_box_height}\n stroke='none'\n fill='rgba(255,255,255,0.3)'/>\n );\n // This is how I get the bottom half of that slightly white background to be more opaque, by putting another one on top of it at the appropriate y level\n jsx_arr.push(\n <Rect\n key='timeline_double_white'\n x='33'\n y={`${y_offset+150}`}\n width='33'\n height={view_box_height}\n stroke='black'\n strokeWidth='0.06'\n fill='rgba(255,255,255,0.3)'/>\n );\n // End of Timeline big background color filler mapper\n \n \n // Need to setup lines at every 50 years with text. Need each 50 year point\n let y_dates_mod_50 = [];\n res.data.forEach((e) => {\n e = e.attributes;\n if (e.y_date % 50 === 0) {\n y_dates_mod_50.push(e.y_date);\n }\n });\n \n y_dates_mod_50.forEach((e) => { // build jsx_arr for y_date lines at every 50 years\n \n // Dotted lines\n jsx_arr.push(\n <Line\n key={`dottedLine_${jsx_arr.length}`}\n stroke='black'\n strokeDasharray='0.1, 0.2'\n strokeWidth='0.1'\n x1={0}\n x2={94}\n y1={e+Math.abs(min_height)+y_offset}\n y2={e+Math.abs(min_height)+y_offset}\n />\n );\n \n // The text you see every 50 years and the one hyphen at the end of the screen\n jsx_arr.push(\n <Text\n id={(() => {\n if (e < 0) {\n return `${Math.abs(e)}BCE`;\n } else {\n return `${Math.abs(e)}CE`;\n }\n })()}\n x='98%'\n textAnchor='end'\n fontWeight='thin'\n y={`${e+Math.abs(min_height)+y_offset+0.4}`}\n className='story-h3'\n key={`text_${jsx_arr.length}`}\n style={{fontSize: '1px'}}>\n {(() => {\n // BCE vs CE or BC vs AD. Whatever you like.\n if (e < 0) {\n return `${Math.abs(e)} BCE`;\n } else {\n return `${Math.abs(e)} CE`;\n }\n })()}\n </Text>\n );\n jsx_arr.push(\n <Line\n stroke='#282828'\n strokeWidth='0.1'\n key={`dash_${jsx_arr.length}`}\n x1='100%'\n x2='98.5%'\n y1={`${e+Math.abs(min_height)+y_offset}`}\n y2={`${e+Math.abs(min_height)+y_offset}`}\n />\n );\n });\n \n return { jsx_arr, view_box_min_height, view_box_total_height };\n }","import {\n Path,\n Rect,\n Image,\n Circle\n } from 'react-native-svg';\n import OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nexport function LoadTimelineInfo(obj) {\n let res = obj.res.data.data.attributes;\n let y_offset = obj.y_offset;\n let view_box_min_height = obj.view_box_min_height;\n let update_coin_info = obj.update_coin_info;\n let update_event_info = obj.update_event_info;\n const coin_size = 8; // Size of coins on timeline\n const coin_stroke_width = .5; // Stroke width of coins on timeline\n let jsx_arr = [];\n let coin_info_arr = [];\n let event_info_arr = [];\n \n const SetupCoin = (e) => {\n const coin_pair = e.coin_pair == null ? undefined : e.coin_pair;\n let coin_info = e.coin.data.attributes;\n coin_info_arr.push({\n ...coin_info,\n id: e.id,\n });\n \n if (coin_info.obverse_file.data == null && coin_info.reverse_file.data == null) \n return (\n <Circle\n id={e.id}\n key={`coin_image${e.id}${coin_pair}`}\n className='coin-image'\n fill='white'\n stroke='#173847'\n strokeWidth='.5'\n cx={e.x - coin_size / 5}\n cy={e.y + Math.abs(view_box_min_height) + y_offset * 1.7 - coin_size / 2}\n onClick={update_coin_info}\n r={coin_size / 2.5}\n />\n );\n \n return (\n <Image\n id={e.id}\n key={`coin_image_${e.id}_${coin_pair}_${Math.random()}`}\n className='coin-image'\n x={e.x - coin_size / 2}\n y={e.y + Math.abs(view_box_min_height) + y_offset - coin_size / 2}\n width={coin_size}\n height={coin_size}\n href={`${process.env.REACT_APP_strapiURL}${coin_info.obverse_file.data.attributes.url}`}\n onClick={update_coin_info}/>\n );\n };\n \n res.zone.forEach((e) => {\n switch (e.__component) {\n case 'timeline-objects.single-coin':\n jsx_arr.push(SetupCoin(e));\n break;\n case 'timeline-objects.connected-coins':\n jsx_arr.push(\n <Path\n d={`M${e.coin_a_x} ${e.coin_a_y+Math.abs(view_box_min_height)+y_offset} \n S${e.coin_a_x} ${e.coin_b_y+Math.abs(view_box_min_height)+y_offset} ${e.coin_b_x} ${e.coin_b_y+Math.abs(view_box_min_height)+y_offset}`}\n key={`path_${e.id}`}\n stroke='#173847'\n strokeDasharray={e.strokeline === 'dash' ? \"2\":\"\"}\n fill='none'\n strokeWidth={coin_stroke_width*2}\n />\n );\n \n jsx_arr.push(SetupCoin({\n ...e,\n x: e.coin_b_x,\n y: e.coin_b_y,\n id: e.coin_b.data.id,\n coin_pair: 0,\n coin: e.coin_b\n }));\n jsx_arr.push(SetupCoin({\n ...e,\n x: e.coin_a_x,\n y: e.coin_a_y,\n id: e.coin_a.data.id,\n coin_pair: 1,\n coin: e.coin_a\n }));\n break;\n case 'timeline-objects.event':\n event_info_arr.push(e.event);\n let size_of_event = 2.3;\n \n const renderTooltip = (props) => (\n <Tooltip className=\"event-tooltip\" {...props}>\n {e.event.data.attributes.title}\n </Tooltip>\n );\n \n jsx_arr.push(\n <OverlayTrigger\n placement=\"right\"\n delay={{ show: 0, hide: 200 }}\n overlay={renderTooltip}\n key={`event-${e.event.data.id}`}\n >\n <Rect\n id={e.event.data.id}\n className='event'\n x={e.x - size_of_event / 2}\n y={e.y + Math.abs(view_box_min_height) + y_offset - size_of_event / 2}\n width={size_of_event}\n height={size_of_event}\n fill={e.event.data.attributes.color}\n stroke='black'\n strokeWidth='0.1'\n onClick={update_event_info}/>\n </OverlayTrigger>\n );\n break;\n default:\n console.error(`Error: Unrecognized component '${e.__component}'`);\n }\n });\n \n return { jsx_arr, coin_info_arr, event_info_arr };\n }","import axios from \"axios\";\nimport qs from \"qs\";\nconst glossaryRequest = {\n glossaryFindLocal: async()=>{\n let query = qs.stringify({\n pagination: {\n page: 1,\n pageSize: 2147483647,\n }\n });\n return await axios( `http://localhost:1337/api/glossaries?${query}`,{\n method:'GET',\n })\n },\n glossaryHomeFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/glossary-home`,{\n method:'GET',\n })\n },\n glossaryFind: ()=>{\n const query = qs.stringify({\n fields: [\"term\"],\n });\n return axios(`${process.env.REACT_APP_strapiURL}/api/glossaries?${query}`,{\n method:'GET',\n })\n },\n glossarySearch: (text)=>{\n const query = qs.stringify({\n fields: [\"term\"],\n filters: {\n term: {\n $startsWithi: text,\n },\n }\n });\n return axios(`${process.env.REACT_APP_strapiURL}/api/glossaries?${query}`,{\n method:'GET',\n })\n },\n glossaryFindByTerm: (term)=>{\n const query = qs.stringify({\n filters:{\n term:{\n $eqi:term\n }\n }\n });\n return axios(`${process.env.REACT_APP_strapiURL}/api/glossaries?${query}`,{\n method:'GET',\n })\n },\n glossaryFindByTermLocal: (term)=>{\n return axios(`${process.env.REACT_APP_strapiURLLocal}/api/glossry/by-term/${term}`,{\n method:'GET',\n })\n },\n}\n\nexport default glossaryRequest","/* eslint-disable no-unused-vars */\nimport React, {useState, useEffect} from 'react';\nimport glossaryRequest from 'src/api/glossary';\nimport { Row, Col, ListGroup} from 'react-bootstrap';\nimport { Link } from 'react-router-dom';\nimport { useParams } from \"react-router-dom\";\n\nfunction groupByFL(arr) {\n return arr.reduce((store, word) => {\n const letter = word.charAt(0).toUpperCase()\n const keyStore = (\n store[letter] || (store[letter] = []) \n ); \n keyStore.push(word)\n \n return store\n }, {})\n }\n\nconst Glossary = () =>{\n const [isLoading, setIsLoading] = useState(true)\n const [glossaryData, setGlossaryData]=useState({})\n\n const {group} = useParams()\n\n useEffect(()=>{\n async function fetchData(){\n if(group === 'all'){\n const {data:{data}} = await glossaryRequest.glossaryFind()\n const contentList= data.map((glossary)=>{\n return glossary.attributes.term\n })\n const grouped = groupByFL(contentList)\n const sorted = Object.keys(grouped)\n .sort()\n .reduce((obj, key) => {\n obj[key] = grouped[key];\n return obj;\n },{})\n setGlossaryData(sorted)\n setIsLoading(false)\n }\n else{\n const alphabetsArray = group.split(\"\")\n const {data:{data}} = await glossaryRequest.glossarySearch(alphabetsArray)\n const contentList= data.map((glossary)=>{\n return glossary.attributes.term\n })\n const grouped = groupByFL(contentList)\n const sorted = Object.keys(grouped)\n .sort()\n .reduce((obj, key) => {\n obj[key] = grouped[key];\n return obj;\n },{})\n setGlossaryData(sorted)\n setIsLoading(false)\n }\n }\n fetchData()\n },[group])\n\n\n if(isLoading)return(\n\t\t<div id=\"glossary-loading\">\n\t\t\t<div className=\"loader\"/>\n\t\t</div>\n )\n return(\n <div id='glossary-group' className=''>\n <ListGroup as='ul'>\n {\n Object.entries(glossaryData).map(([key, value]) => {\n return(\n <div className='li-wrapper' key={key}>\n <ListGroup.Item key={key}>\n <Row className='py-4'>\n <Col xs={2} className=\"glossary-alphabet d-flex justify-content-center align-items-center\">{key}</Col>\n <Col xs={8}>\n <Row className='glossary-term'>\n {value.map((item)=>{\n return(\n <Col xs={3} key={`${item}`}>\n <Link className='glossary-term-a' to={`/Toolbox/Glossary/term/${item}`}>{item}</Link>\n </Col>\n )\n })}\n </Row>\n </Col>\n\n </Row>\n </ListGroup.Item>\n </div>\n )\n })\n }\n </ListGroup>\n </div>\n )\n}\n\nexport default Glossary;\n","import axios from \"axios\";\n\nconst coin3DRequest = {\n coin3DFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/coin-3d`,{\n method:'GET',\n })\n },\n coin3DFindLocal: async()=>{\n return await axios( 'http://localhost:1337/api/coin-3d',{\n method:'GET',\n })\n }\n}\n\nexport default coin3DRequest","import React from 'react';\n// import Footer from 'src/components/footer/Footer';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport coin3DRequest from 'src/api/coin-3d';\nimport { useEffect, useState } from 'react';\nimport PageTitleComponent from 'src/components/constant/pageTitleText';\nconst Coin3D = ()=>{\n const [isLoading, setIsLoading] = useState(true);\n const [coin3D, setCoin3D] = useState([])\n\n useEffect(()=>{\n\t\tconst fetchData = async ()=>{\n\t\t\tconst result = await coin3DRequest.coin3DFind()\n\t\t\tsetCoin3D(result.data.data.attributes)\n\t\t\tsetIsLoading(false)\n\t\t}\n\t\tfetchData().catch(console.error);\n },[])\n if (isLoading)return (<LoadingPage />);\n return(\n <div id='coin3d-page'>\n <PageTitleComponent\n title={coin3D.title}\n text={coin3D.text}\n subtext={coin3D.sub_text}\n />\n <center>\n <div className='sketchfab-embed-wrapper my-5 py-5'>\n <iframe \n title=\"Eastern King's Coin\" \n width=\"720\"\n height=\"540\"\n frameBorder=\"0\" \n allowFullScreen \n mozallowfullscreen=\"true\" \n webkitallowfullscreen=\"true\" \n allow=\"autoplay; fullscreen; xr-spatial-tracking\" \n xr-spatial-tracking=\"true\" \n execution-while-out-of-viewport=\"true\" \n execution-while-not-rendered=\"true\" \n web-share=\"true\" \n src=\"https://sketchfab.com/models/033a5ed32de347e1be254042555ad0c4/embed\"\n /> \n </div>\n </center>\n </div>\n )\n}\nexport default Coin3D","import axios from \"axios\";\n\nconst researchRequest = {\n researchFind: ()=>{\n return axios(`${process.env.REACT_APP_strapiURL}/api/research-home`,{\n method:'GET',\n })\n },\n researchFindLocal: async()=>{\n return await axios( 'http://localhost:1337/api/research-home',{\n method:'GET',\n })\n }\n}\n\nexport default researchRequest","import React, {useState, useEffect} from 'react';\nimport LoadingPage from 'src/components/loadingPage/LoadingPage.js';\nimport { Container, Row, Col} from 'react-bootstrap';\nimport zoteroRequest from 'src/api/zotero';\nimport researchRequest from 'src/api/research';\nimport createMarkup from 'src/utils/Markup';\nimport PageTitleComponent from 'src/components/constant/pageTitleText';\nconst Research = ()=>{\n const [isLoading, setIsLoading] = useState(true)\n const [referencesData, setReferencesData] = useState([])\n const [research, setResearch] = useState([])\n\n useEffect(()=>{\n async function fetchData (){\n const result = await zoteroRequest.getAllitems()\n setReferencesData(result.data)\n const researchData = await researchRequest.researchFind()\n setResearch(researchData.data.data.attributes)\n setIsLoading(false)\n }\n fetchData()\n },[])\n\n\tif (isLoading)return (<LoadingPage />);\n return(\n <div id='research' >\n <PageTitleComponent\n title={research.title}\n text={research.text}\n />\n <Row className=\"d-flex justify-content-around align-items-center my-5 py-5\">\n <Col xs={3}>\n <a \n href=\"https://www.cambridge.org/core/books/abs/antioch-in-syria/antioch-in-syria/CC6531DFF053A8BA29E42CFFC2C2EA68\"\n target=\"_blank\" rel=\"noopener noreferrer\">\n <img\n alt={'missing alt'}\n src={`${process.env.REACT_APP_strapiURL}${research.bookcover.data.attributes.url}`}\n style={{borderStyle:'double', borderColor:'#737271', width:\"100%\"}}\n className=\"bg-white p-2\"\n />\n </a>\n </Col>\n <Col xs={8} className=\"story-text\" dangerouslySetInnerHTML={createMarkup(research.book_description)}/>\n </Row>\n\n <h2 className='text-center'>Bibliography</h2>\n <Container>\n {referencesData.length===0?(<></>):(\n referencesData.map((bib)=>{\n return(\n <Row key={bib.version} className='story-text-bigger my-5 justify-content-center'>\n {bib.bib.split(\"http\")[1] ? (\n <Col xs={10} >\n <a \n href={`http${bib.bib.split(\"http\")[1].split(\".</div>\")[0]}`} \n dangerouslySetInnerHTML={createMarkup(bib.bib.split(\"http\")[0])}\n target=\"_blank\" rel=\"noopener noreferrer\"/>\n </Col>\n ):(<Col xs={10} dangerouslySetInnerHTML={createMarkup(bib.bib.split(\"http\")[0])}/>)}\n </Row >\n )})\n \n )}\n </Container>\n </div>\n )\n}\nexport default Research\n","import React, { useState, useEffect } from \"react\";\nimport { ListGroup } from \"react-bootstrap\";\nimport { Link } from \"react-router-dom\";\nimport glossaryRequest from \"src/api/glossary\";\n\nfunction SearchBar() {\n\tconst [inputText, setInputText] = useState(\"\");\n\tconst [data, setData] = useState([]);\n\n\tuseEffect(() => {\n\t\tasync function fetchData() {\n\t\t\tif (inputText.length > 0) {\n const {\n data: { data },\n } = await glossaryRequest.glossarySearch(inputText);\n setData(data);\n\t\t\t} else {\n\t\t\t\tsetData([]);\n\t\t\t}\n\t\t}\n\t\tfetchData();\n\t}, [inputText]);\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"search-box\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclassName=\"search-box__input\"\n\t\t\t\t\tlabel=\"Search glossary\"\n\t\t\t\t\tplaceholder=\"Search glosssary\"\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetInputText(e.target.value);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{data.length > 0 && (\n\t\t\t\t<ListGroup className=\"result-list\">\n\t\t\t\t\t{data.map((item, index) => {\n console.log(item);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ListGroup.Item\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\tclassName=\"result-list-item\">\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\tclassName=\"glossary-term-a\"\n\t\t\t\t\t\t\t\t\tto={`/Toolbox/Glossary/term/${item.attributes.term}`}\n onClick={() => {\n setInputText(\"\");\n }}\n >\n\t\t\t\t\t\t\t\t\t{item.attributes.term}\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ListGroup>\n\t\t\t)}\n\t\t</>\n\t);\n}\nexport default SearchBar;\n","import React from \"react\";\nimport { Outlet } from \"react-router\";\nimport { Container, Nav } from \"react-bootstrap\";\nimport { useParams } from \"react-router-dom\";\nimport { Link } from \"react-router-dom\";\nimport SearchBar from \"./GlossarySearchBox\";\nimport { useState, useEffect } from \"react\";\nimport glossaryRequest from \"src/api/glossary\";\nimport LoadingPage from \"src/components/loadingPage/LoadingPage\";\nimport PageTitleComponent from \"src/components/constant/pageTitleText\";\n\nfunction GlossaryWrapper() {\n\tconst alphabetGroup = [\n\t\t\"ABC\",\n\t\t\"DEF\",\n\t\t\"GHI\",\n\t\t\"JKL\",\n\t\t\"MNO\",\n\t\t\"PQRS\",\n\t\t\"TUV\",\n\t\t\"WXYZ\",\n\t];\n\tconst { group, term } = useParams();\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [glossary, setGlossary] = useState([]);\n\n\tuseEffect(() => {\n\t\tconst fetchData = async () => {\n\t\t\tconst result = await glossaryRequest.glossaryHomeFind();\n\t\t\tsetGlossary(result.data.data.attributes);\n\t\t\tsetIsLoading(false);\n\t\t};\n\t\tfetchData().catch(console.error);\n\t}, []);\n\tif (isLoading) return <LoadingPage />;\n\treturn (\n\t\t<div id=\"glossary-page\">\n\t\t\t<Container>\n\t\t\t\t<PageTitleComponent\n\t\t\t\t\ttitle={glossary.title}\n\t\t\t\t\ttext={glossary.text}\n\t\t\t\t\tsubtext={glossary.subtext}\n\t\t\t\t\ticon={<sup className=\"story-icon\"></sup>}\n\t\t\t\t/>\n\t\t\t\t<SearchBar />\n\t\t\t\t<Nav\n\t\t\t\t\tvariant=\"tabs\"\n\t\t\t\t\tdefaultActiveKey=\"/All\"\n\t\t\t\t\tclassName=\"d-flex justify-content-center\"\n\t\t\t\t\tstyle={{ marginTop: \"3.5vmax\" }}>\n\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\tto=\"/Toolbox/Glossary/all\"\n\t\t\t\t\t\t\teventkey=\"All\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: group === \"all\" ? \"white\" : \"\",\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\tAll\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t{group ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{alphabetGroup.map((alphabet) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Nav.Item key={alphabet}>\n\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\tto={`/Toolbox/Glossary/${alphabet}`}\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t\t\t\t\tgroup === alphabet\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"white\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\teventkey={alphabet}>\n\t\t\t\t\t\t\t\t\t\t\t{alphabet}\n\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{term ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{alphabetGroup.map((alphabet) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Nav.Item key={alphabet}>\n\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\tto={`/Toolbox/Glossary/${alphabet}`}\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t\t\t\t\talphabet.indexOf(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tterm\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.charAt(0)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.toUpperCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t) !== -1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"white\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\teventkey={alphabet}>\n\t\t\t\t\t\t\t\t\t\t\t{alphabet}\n\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</Nav>\n\t\t\t\t<Outlet />\n\t\t\t</Container>\n\t\t</div>\n\t);\n}\nexport default GlossaryWrapper;\n","import React, { useState, useEffect } from \"react\";\nimport glossaryRequest from \"src/api/glossary\";\nimport createMarkup from \"src/utils/Markup\";\nimport { Link, useParams } from \"react-router-dom\";\n\nconst GlossaryTerm = () => {\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [termData, setTermData] = useState([]);\n\tconst { term } = useParams();\n\n\tuseEffect(() => {\n\t\tasync function fetchData() {\n\t\t\tif (term) {\n\t\t\t\tconst results = await glossaryRequest.glossaryFindByTerm(term);\n\t\t\t\tsetTermData(results.data.data[0].attributes);\n\t\t\t\tsetIsLoading(false);\n\t\t\t}\n\t\t}\n\t\tfetchData();\n\t}, [term]);\n\n\tif (isLoading)\n\t\treturn (\n\t\t\t<div id=\"glossary-loading\">\n\t\t\t\t<div className=\"loader\" />\n\t\t\t</div>\n\t\t);\n\treturn (\n\t\t<div id=\"glossary-term\">\n\t\t\t<div className=\"glossary-item\">\n\t\t\t\t<div className=\"glossary-term\">{termData.term}</div>\n\t\t\t\t<p className=\"glossary-basic\">\n\t\t\t\t\t<span> {termData.type} </span>\n\t\t\t\t\t{termData.syllabication && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<span> | </span>\n\t\t\t\t\t\t\t<span> {termData.syllabication} </span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{termData.sounds_like && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<span> | </span>\n\t\t\t\t\t\t\t<span> {termData.sounds_like} </span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t{termData.definition.length > 0 && (\n\t\t\t\t<div className=\"glossary-item\">\n\t\t\t\t\t<div className=\"glossary-title\">DEFINITION</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"glossary-body\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={createMarkup(\n\t\t\t\t\t\t\ttermData.definition\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{termData.glossaries.length > 0 && (\n\t\t\t\t<div className=\"glossary-item\">\n\t\t\t\t\t<div className=\"glossary-title\">Related Words</div>\n\t\t\t\t\t<div className=\"glossary-related-word\">\n\t\t\t\t\t\t{termData.glossaries.map((word) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<span key={word.term}>\n\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\tto={`/Toolbox/Glossary/term/${word.term}`}>\n\t\t\t\t\t\t\t\t\t\t{word.term}\n\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{termData.context && (\n\t\t\t\t<div className=\"glossary-item\">\n\t\t\t\t\t<div className=\"glossary-title\">See Word in Context</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"glossary-body\"\n\t\t\t\t\t\tstyle={{ fontSize: \"5em\" }}\n\t\t\t\t\t\tdangerouslySetInnerHTML={createMarkup(termData.context)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default GlossaryTerm;\n","import React from 'react';\nconst ErrorPage = ()=>{\n return(\n <div id='error-page'>\n <center>\n <h1>404</h1>\n <h2>Sorry, the page you visited does not exist.</h2>\n </center>\n\n </div>\n )\n}\nexport default ErrorPage\n","import { Outlet } from \"react-router-dom\";\nimport Footer2 from \"./Footer2\";\nfunction FooterWrapper(){\n return(\n <>\n <Outlet />\n <Footer2 />\n </>\n\n )\n}\nexport default FooterWrapper","export default __webpack_public_path__ + \"static/media/logoWhiteText.9b8ea228.svg\";","import { useLayoutEffect } from \"react\";\nimport { useLocation } from \"react-router-dom\";\n\nconst AutoScrollToTop = ({children}) => {\n const location = useLocation();\n useLayoutEffect(() => {\n document.documentElement.scrollTo(0, 0);\n },[location.pathname])\n return children\n}\n\nexport default AutoScrollToTop;\n\n","import React from 'react';\nimport {BrowserRouter,Route,Routes} from 'react-router-dom';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport \"./style/styles.scss\";\nimport background from 'src/assets/background.jpg';\nimport LandingPage from 'src/pages/LandingPage.js';\nimport AboutUs from 'src/pages/AboutUs/AboutUs.js';\nimport ContactUs from './pages/ContactUs/ContactUs';\nimport Stories from 'src/pages/Stories/Stories.js';\nimport StoryReader from 'src/pages/Stories/StoryReader.js';\nimport ExploreTheEvidence from 'src/pages/Evidence/ExploreTheEvidence.js';\nimport CoinSort from 'src/pages/Evidence/CoinSort/CoinSort.js';\nimport MapCoins from './pages/Evidence/MapCoins/MapCoins';\nimport CoinCatalog from './pages/Evidence/CoinCatalogy/CoinCatalog';\nimport Coins from './pages/Evidence/CoinCatalogy/CoinList/Coins';\nimport CoinInfoPage from './pages/Evidence/CoinCatalogy/coin-info/CoinInfoPage';\nimport Download from 'src/pages/Evidence/Download/Download.js';\nimport Toolbox from './pages/Toolbox/Toolbox';\nimport HowToReadACoin from 'src/pages/Stories/HowToReadACoin.js';\nimport VideoLibrary from './pages/Toolbox/VideoLibrary/VideoLibrary';\nimport Timeline from 'src/pages/Toolbox/Timeline/Timeline.js';\nimport Glossary from './pages/Toolbox/Glossary/Glossary.js';\nimport Coin3D from './pages/Toolbox/Coin3D/Coin3D';\nimport Research from './pages/Toolbox/Research/Research';\nimport GlossaryWrapper from './pages/Toolbox/Glossary/glossary-wrapper';\nimport GlossaryTerm from './pages/Toolbox/Glossary/GlossaryTerm';\n\nimport ErrorPage from './components/error/404';\nimport FooterWrapper from './components/footerv2/Footer2Wrapper';\n\nimport { Navbar,Nav,NavDropdown,} from 'react-bootstrap';\nimport {Link} from \"react-router-dom\";\nimport logo from 'src/assets/logoWhiteText.svg';\nimport AutoScrollToTop from './utils/ScrollToTop';\n\nfunction App() {\n\treturn (\n\t\t<div id='App' style={{ backgroundImage: `url(${background})`}}>\n { /* Change line below: <BrowserRouter basename='/dev'> to deploy on syrios.uh.edu/dev */ }\n\t\t\t<BrowserRouter>\n\t\t\t\t<AutoScrollToTop>\n\t\t\t\t{/* <Navbar /> */}\n\t\t\t\t<Navbar id='navbar' collapseOnSelect expand='md' sticky='top' className='navbar-dark'>\n\t\t\t\t\t<Nav.Link as={Link} to='/'>\n\t\t\t\t\t<img src={logo} alt='SyriosLogoLight'style={{width:'50%'}}/>\n\t\t\t\t\t</Nav.Link>\n\t\t\t\t<Navbar.Collapse id='responsive-navbar-nav'>\n\t\t\t\t\t<Nav className='ms-auto' style={{marginRight:'5.2vmax'}}>\n\t\t\t\t\t\t<Nav.Link as={Link} to='/' className='navbar-text d-flex align-items-center'>HOME</Nav.Link>\n\t\t\t\t\t\t<Nav.Link as={Link} to='/Stories' className='navbar-text d-flex align-items-center'>STORIES</Nav.Link>\n\t\t\t\t\t<NavDropdown title='EVIDENCE' className='navbar-text'>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Evidence' className='navbar-text '>Overview</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Divider />\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Evidence/CoinSort' className='navbar-text'>Coins in a Pile</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Evidence/MapCoins' className='navbar-text'>Coins on a Map</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Evidence/Timeline' className='navbar-text'>Coins in Time</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Evidence/CoinCatalog' className='navbar-text'>Coins in a Catalog</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Evidence/Download' className='navbar-text'>Coins as Data</NavDropdown.Item>\n\t\t\t\t\t</NavDropdown>\n\t\t\t\t\t<NavDropdown title='TOOL BOX' className='navbar-text'>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Toolbox' className='navbar-text '>Overview</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Divider />\t\t\t\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/HowToReadACoin' className='navbar-text'>How to Read a Coin</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Toolbox/Coin3D' className='navbar-text'>Coin in 3D</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Toolbox/Glossary/all' className='navbar-text'>Glossary</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Evidence/Download' className='navbar-text'>Download Data</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Toolbox/Research' className='navbar-text'>Research</NavDropdown.Item>\n\t\t\t\t\t\t<NavDropdown.Item as={Link} to='/Toolbox/VideoLibrary' className='navbar-text'>Video Library</NavDropdown.Item>\n\t\t\t\t\t</NavDropdown>\n\t\t\t\t\t</Nav>\n\t\t\t\t</Navbar.Collapse>\n\t\t\t\t</Navbar>\n\n\t\t\t\t<Routes>\n\t\t\t\t\t<Route element={<FooterWrapper/>}>\n\t\t\t\t\t\t<Route exact path='/' element={<LandingPage />} />\n\t\t\t\t\t\t<Route path='/Stories' element={<Stories />} />\n\t\t\t\t\t\t<Route path='/Evidence' element={<ExploreTheEvidence />} /> \n\t\t\t\t\t\t<Route path='/Toolbox' element={<Toolbox />} />\n\t\t\t\t\t\t<Route path='/Evidence/CoinSort' element={<CoinSort />} />\n\t\t\t\t\t\t<Route path='/Evidence/MapCoins' element={<MapCoins />} />\n\t\t\t\t\t\t<Route path='/Evidence/Timeline' element={<Timeline />} />\n\t\t\t\t\t\t<Route path='/Evidence/CoinCatalog' element={<CoinCatalog />} />\n\t\t\t\t\t\t<Route path='/Coins/:params' element={<Coins />} />\n\t\t\t\t\t\t<Route path='/Coin/:id' element={<CoinInfoPage />} />\n\n\t\t\t\t\t\t<Route path='/Evidence/Download' element={<Download />} />\n\t\t\t\t\t\t<Route path='/Toolbox/VideoLibrary' element={<VideoLibrary />} />\n\t\t\t\t\t\t<Route path='/Toolbox/Research' element={<Research />} />\n\t\t\t\t\t\t<Route path='/Toolbox/Coin3D' element={<Coin3D />} />\n\t\t\t\t\t\t<Route element={<GlossaryWrapper/>}>\n\t\t\t\t\t\t\t<Route path='/Toolbox/Glossary/:group' element={<Glossary />} />\n\t\t\t\t\t\t\t<Route path='/Toolbox/Glossary/term/:term' element={<GlossaryTerm />} />\n\t\t\t\t\t\t</Route>\n\t\t\t\t\t\t{/* <Route path='/Resources/TeachingResources' element={<TeachingResources />} /> */}\n\t\t\t\t\t\t<Route path='/ContactUs' element={<ContactUs />} />\n\t\t\t\t\t\t<Route path='/About' element={<AboutUs />} />\n\t\t\t\t\t\t<Route path='/*' element={<ErrorPage />} />\n\t\t\t\t\t</Route>\n\t\t\t\t\t<Route path='/HowToReadACoin' element={<HowToReadACoin />} />\n\t\t\t\t\t<Route path='/StoryReader' element={<StoryReader />} />\n\n\t\t\t\t</Routes>\n\t\t\t\t</AutoScrollToTop>\n\t\t\t</BrowserRouter>\n\t\t</div>\n\t);\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nimport { CoinContextProvider } from './context/coinContext';\nReactDOM.render(\n <CoinContextProvider>\n <App />\n </CoinContextProvider>\n ,\n document.getElementById('root')\n);\n"],"sourceRoot":""}
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{story.attributes.name}
\n\t\t\t\t\t\t\t\t\t\n\n \n |
\n \n )\n }\n else if (text.caption == \"\" || text.caption == null){\n return(\n \n |
\n \n )\n }\n else{\n return (\n \n |
\n |
\n \n )\n }\n}\n\n\nexport const ImageComponent =(props)=>{\n // console.log(props.imageWidth)\n let image = props.image\n // let image_size = {\n // \"Smallest\":\"12.5%\",\n // \"Smaller\":\"25%\",\n // \"Small\":\"37.5%\",\n // \"Regular\":\"50%\",\n // \"Big\":\"62.5%\",\n // \"Bigger\":\"75%\",\n // \"Biggest\":\"87.5%\",\n // \"Full\":\"100%\"\n // }\n let component_background = {\"null\":'',\"light-blue-background\":\"light-blue-background\",\"light-yellow-background\":\"light-yellow-background\",};\n // Coin Data\n if((image.image.data === null)){\n return(\n \n \n
\n \n \n
\n \n )\n }\n// Image Data\n else{ \n return(\n \n {image.additional_link === null ? (\n \n ):(\n \n \n )}\n
\n \n \n
\n \n )\n }\n}\n\n\nexport const ImagesComponent = (props)=>{\n let imageJsx = []\n if(props.images.length === 6 || props.images.length === 5){\n props.images.forEach((image)=>{\n imageJsx.push();\n return;\n })\n }\n else if (props.images.length === 1){\n props.images.forEach((image)=>{\n imageJsx.push();\n return;\n })\n }\n else{\n props.images.forEach((image)=>{\n imageJsx.push({imageJsx}
);\n}\n","import { Container, Row} from \"react-bootstrap\"\nimport { HeadComponent, ImagesComponent } from \"../ComponentFunction/index\";\nconst Images = (props) =>{\n let zone = props.zone\n return(\n \n \n
\n )\n }\n else if((zone.tt_text_right.text === '' || zone.tt_text_right.text === null) && (zone.tt_text_right.caption === '' || zone.tt_text_right.caption === null)){\n return(\n \n \n
\n )\n }\n else{\n return(\n \n \n \n
\n )\n }\n }\n return(\n \n \n \n )\n }\n if(props.options.length == 2){return({buttonOptin}
)} \n else{return({buttonOptin}
)}\n} \n\nconst FadeBody = (props)=>{\n let coin_left = props.coin.coin_left.data.attributes\n let sourUrl_left = coin_left.source_image\n let coin_left_url, coin_left_alt = undefined\n // let coin_left_alt = undefined\n if(props.coin.left_coin_obverse_or_reverse){\n coin_left_url = coin_left.reverse_file.data.attributes?.url\n coin_left_alt = coin_left.reverse_file.data.attributes?.alternativeText\n }\n else{\n coin_left_url = coin_left.obverse_file.data.attributes?.url\n coin_left_alt = coin_left.obverse_file.data.attributes?.alternativeText\n }\n\n let coin_right = props.coin.coin_right.data.attributes\n let sourUrl_right = coin_right.source_image\n let coin_right_url , coin_right_alt = undefined\n // let coin_right_alt = undefined\n if(props.coin.right_coin_obverse_or_reverse){\n coin_right_url = coin_right.reverse_file.data.attributes?.url\n coin_right_alt = coin_right.reverse_file.data.attributes?.alternativeText\n }\n else{\n coin_right_url = coin_right.obverse_file.data.attributes?.url\n coin_right_alt = coin_right.obverse_file.data.attributes?.alternativeText\n }\n return(\n <> \n \n \n \n \n
\n \n \n
\n \n \n \n \n \n
\n \n \n
\n \n \n )\n}\n\nconst FadeBack = (props)=>{\n let fadeBack = []\n for(let body = 1; body\n
\n )\n }\n return(<>{fadeBack})\n}\nfunction handleBtns (dom,index, length){for(let i = 0; i\n
\n Coin Images Courtesy of:
\n \n {imageReference.map((ref,index)=>{\n return(\n
\n \n {ref.right_holder}\n
\n )})}\n \n
\n \n ):(<>)}\n \n )\n}\n\nexport default Footer;\n","import { Container, Row,Col } from \"react-bootstrap\"\nimport createMarkup from 'src/utils/Markup.js';\n\nconst Title = (props) => {\n let zone = props.zone\n return (\n To read more, check these out:
\n \n {references.map((ref,index)=>{\n return(\n
\n\n \n [{index+1}]\n {ref.split(\"http\")[1] \n ? \n :
\n }\n
\n )})}\n \n \n \n
\n \n \n \n {props.index === 0 ? (<>):( )}\n
\n );\n }\n\n export default Title\n","/* eslint-disable eqeqeq */\nimport { Container, Col } from \"react-bootstrap\"\nimport { Link } from 'react-router-dom';\n\nfunction createMarkup(textTran){\n return {__html: textTran};\n}\nconst End_Frame = (props) => {\n let zone = props.zone\n return (\n {zone.title}
\n{zone.subtitle}
\n \n\n \n Tell Me a Story\n Explore Coins\n \n {props.index === 0 ? (<>):( )}\n
\n );\n }\nexport default End_Frame","/* eslint-disable eqeqeq */\nimport { Container, Row, Col } from \"react-bootstrap\"\n// import { Link } from 'react-router-dom';\n\nfunction createMarkup(textTran){\n return {__html: textTran};\n}\n\nexport function IsEmptyOrWhiteSpace(str) {\n return str=== null ? true : (str.match(/^\\s*$/) || []).length > 0;\n}\n\nexport const HeadComponent = (props)=>{\n return(\n Are you ready to learn more?
\n ):(\n \n \n )}\n \n {zone.head?.updown_switch ?(\n \n |
\n |
\n \n ):(\n \n |
\n |
\n \n )}\n {props.index === 0 ? (<>):( )}\n
\n )\n }\n export default Images\n","import { Container, Row, Col } from \"react-bootstrap\"\nimport { HeadComponent, TextComponent } from \"../ComponentFunction/index\";\n\nconst TextText = (props) => {\n let zone = props.zone\n const TextTxtBody = ()=>{\n if ((zone.tt_text_left.text === '' || zone.tt_text_left.text === null) && (zone.tt_text_left.caption === '' || zone.tt_text_left.caption === null)){\n return(\n \n {zone.head.updown_switch ?(\n \n \n \n
\n \n ):(\n \n \n \n
\n \n )}\n {props.index === 0 ? (<>):( )}\n
\n )\n\n }\n export default TextText\n","import { Container, Row, Col } from \"react-bootstrap\"\nimport { HeadComponent, TextComponent, ImageComponent } from \"../ComponentFunction/index\";\n\nconst ImageText = (props) =>{\n let zone= props.zone\n return(\n \n {zone.head?.updown_switch ?\n \n \n {zone.left_right_switch ?(<>\n \n \n ):(<>\n \n )}\n
\n |
\n : \n \n |
\n \n {zone.left_right_switch ?(<>\n \n \n ):(<>\n \n \n )}\n
\n }\n {props.index === 0 ? (<>):( )}\n
\n )\n\n }\n export default ImageText\n","import { Container, Row, Col } from \"react-bootstrap\"\nimport {TextComponent, HeadComponent, ImageComponent } from \"../ComponentFunction/index\";\n\nconst ImageTextImage = (props) =>{\n let zone = props.zone\n return(\n \n {zone.head.updown_switch ? (\n \n \n \n \n \n
\n |
\n \n ):(\n \n |
\n \n \n \n \n
\n \n )}\n {props.index === 0 ? (<>):( )}\n
\n )\n // }\n }\n\n export default ImageTextImage\n","import { Container, Row, Col } from \"react-bootstrap\"\nimport { HeadComponent, ImageComponent, TextComponent } from \"../ComponentFunction/index\";\nimport createMarkup from 'src/utils/Markup.js';\n\nconst ImageTextText = (props) =>{\n let zone = props.zone\n return(\n \n {zone.head.updown_switch ? (\n \n \n {zone.left_right_switch? (\n \n |
\n |
\n \n \n \n ):(\n \n \n |
\n |
\n \n \n )}\n
\n |
\n \n ):(\n \n |
\n {zone.left_right_switch? (\n \n |
\n |
\n \n \n
\n ):(\n \n \n |
\n |
\n \n
\n )}\n \n )}\n {props.index === 0 ? (<>):( )}\n
\n )\n}\nexport default ImageTextText\n","import { Container, Row, Col} from \"react-bootstrap\"\nimport { HeadComponent, } from \"../ComponentFunction/index\";\nimport createMarkup from 'src/utils/Markup.js';\n\nconst ScaleCoinImg = (props)=>{\n let coin_obverse_url = props.coin.coin.data.attributes.obverse_file.data.attributes.url\n let coin_obverse_alt = props.coin.coin.data.attributes.obverse_file.data.attributes.alternativeText\n\n let coin_reverse_url = props.coin.coin.data.attributes.reverse_file.data.attributes.url\n let coin_reverse_alt = props.coin.coin.data.attributes.reverse_file.data.attributes.alternativeText\n\n return(\n <>\n \n {zone.head.updown_switch?(\n \n |
\n \n \n \n
\n \n
\n |
\n \n ):(\n \n |
\n |
\n \n \n \n
\n \n
\n \n )}\n {props.index === 0 ? (<>):( )}\n
\n )\n // }\n\n }\n\n export default ScaleFrame\n","import { Container, Row, Col} from \"react-bootstrap\"\nimport { HeadComponent, } from \"../ComponentFunction/index\";\nimport createMarkup from 'src/utils/Markup.js';\n\nconst FlipCoinImage = (props)=>{\n let sourUrl = props.coin.coin.data.attributes.source_image\n let coin_obverse_url = props.coin.coin.data.attributes.obverse_file.data.attributes.url\n let coin_obverse_alt = props.coin.coin.data.attributes.obverse_file.data.attributes.alternativeText\n let coin_reverse_url = props.coin.coin.data.attributes.reverse_file.data.attributes.url\n let coin_reverse_alt = props.coin.coin.data.attributes.reverse_file.data.attributes.alternativeText\n\n return(\n <>\n \n \n )\n}\nfunction FlipCoin (dom){\n while (dom.className !== 'flip-box-inner') {dom = dom.nextSibling}\n if (dom.style.transform === 'rotateY(180deg)') {dom.style.transform = 'rotateY(0deg)'} \n else {dom.style.transform = 'rotateY(180deg)'}\n}\n\nconst FlipFrame = (props) =>{\n let zone = props.zone\n return(\n \n
\n \n \n Compare Scale\n
\n\n Reset Scale\n
\n\n
\n \n \n Compare Scale\n
\n\n Reset Scale\n
\n\n {zone.head.updown_switch ? (\n \n \n \n |
\n \n
\n |
\n \n \n
\n |
\n \n ):(\n \n |
\n \n \n \n \n
\n |
\n \n \n
\n
\n )}\n {props.index === 0 ? (<>):( )}\n
\n )\n }\n\n export default FlipFrame\n","/* eslint-disable eqeqeq */\nimport { Container, Row, Col} from \"react-bootstrap\"\n\nimport { HeadComponent} from \"../ComponentFunction/index\";\nimport createMarkup from 'src/utils/Markup.js';\n\nconst FadeButton = (props)=>{\n let buttonOptin = []\n\n buttonOptin.push(\n \n
\n \n {zone.head?.updown_switch?(\n \n \n \n \n |
\n \n ):(\n \n |
\n \n \n \n \n )}\n {props.index === 0 ? (<>):( )}\n
\n )\n }\n\n export default FadeFrame\n","import { Container, Row, Col} from \"react-bootstrap\"\nimport { HeadComponent, TextComponent } from \"../ComponentFunction/index\";\nimport { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';\nimport createMarkup from 'src/utils/Markup';\n\nconst CompareCoin = (props)=>{\n let coin_obverse_url = props.coin.coin.data.attributes.obverse_file.data.attributes.url\n let coin_obverse_alt = props.coin.coin.data.attributes.obverse_file.data.attributes.alternativeText\n \n let coin_reverse_url = props.coin.coin.data.attributes.reverse_file.data.attributes.url\n let coin_reverse_alt = props.coin.coin.data.attributes.reverse_file.data.attributes.alternativeText\n\n return(\n \n
\n \n \n
\n \n
\n \n \n
\n \n {zone.head.updown_switch?(\n \n {zone.cc_text.text === '' && zone.cc_text.caption === '' ?(\n |
\n ):(\n \n {zone.left_right_switch ? (<>\n \n \n ):(<>\n \n \n )}\n
)} \n |
\n \n ):(\n \n |
\n {zone.cc_text.text === '' && zone.cc_text.caption === '' ?(\n \n \n
\n ):(\n \n {zone.left_right_switch ? (<>\n \n ):(<>\n \n \n )}\n
)}\n \n )}\n {props.index === 0 ? (<>):( )}\n
\n )\n}\n\nexport default CompareFrame\n","import Title from 'src/components/StoryComponents/StoryFrames/Title';\nimport EndFrame from 'src/components/StoryComponents/StoryFrames/EndFrame';\nimport Images from 'src/components/StoryComponents/StoryFrames/Images'\nimport TextText from 'src/components/StoryComponents/StoryFrames/TextText'\nimport ImageText from 'src/components/StoryComponents/StoryFrames/ImageText'\nimport ImageTextImage from 'src/components/StoryComponents/StoryFrames/ImageTextImage'\nimport ImageTextText from 'src/components/StoryComponents/StoryFrames/ImageTextText'\nimport ScaleFrame from 'src/components/StoryComponents/StoryFrames/ScaleFrame'\nimport FlipFrame from 'src/components/StoryComponents/StoryFrames/FlipFrame'\nimport FadeFrame from 'src/components/StoryComponents/StoryFrames/FadeFrame'\nimport CompareFrame from 'src/components/StoryComponents/StoryFrames/CompareFrame'\n\n\nconst StoryComponent = (zone, index,fullpageApi, state,toggleBottom) => {\n switch (zone.__component) {\n case 'frame.title':\n return