Skip to content

Commit

Permalink
Support toggle setting for hover vs click, add skeleton loader to pop…
Browse files Browse the repository at this point in the history
…up, update underline and hover styles for matched words
  • Loading branch information
codylawson committed Jan 19, 2022
1 parent e13d26b commit 28ad306
Show file tree
Hide file tree
Showing 8 changed files with 250 additions and 98 deletions.
1 change: 1 addition & 0 deletions extension/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"file-loader": "^6.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-loading-skeleton": "^3.0.2",
"react-popper": "^2.2.5",
"webext-base-css": "^1.3.1",
"webextension-polyfill": "^0.8.0"
Expand Down
96 changes: 54 additions & 42 deletions extension/source/ContentScript/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,56 +33,68 @@ const LocatelyApp = () => {
};
}, [settingsOnChanged]);

const settingsOnChanged = useCallback((e) => {
{
const updatedSettings = {};
Object.entries(e).forEach(
([key, { newValue }]) => (updatedSettings[key] = newValue)
);
const settingsOnChanged = useCallback(
(e) => {
{
const updatedSettings = {};
Object.entries(e).forEach(
([key, { newValue }]) => (updatedSettings[key] = newValue)
);

setSettings(prevSettings => {
return {...prevSettings, ...updatedSettings};
});
if (updatedSettings.dataCollection) {
setDataCollection(dataCollections[updatedSettings.dataCollection]);
}
setSettings((prevSettings) => {
return { ...prevSettings, ...updatedSettings };
});
if (updatedSettings.dataCollection) {
setDataCollection(dataCollections[updatedSettings.dataCollection]);
}

setReferenceElement(null);
setLocationDetails(null);
}
}, [setSettings]);
setReferenceElement(null);
setLocationDetails(null);
}
},
[setSettings]
);

// Set up the locately popover events
useEffect(() => {
document.body.addEventListener("click", itemClicked);
document.body.addEventListener(
settings?.triggerOn || defaultSettings.triggerOn,
itemClicked
);

return () => {
document.body.removeEventListener("click", itemClicked);
document.body.removeEventListener(
settings?.triggerOn || defaultSettings.triggerOn,
itemClicked
);
};
}, [itemClicked, dataCollection]);

const itemClicked = useCallback(
(event) => {
const popoverNode = document.querySelector('.locately-wrapper');

const city =
event.target.attributes.getNamedItem("data-locately-city")?.value;
const state = event.target.attributes.getNamedItem(
"data-locately-state"
)?.value;
if (city && state) {
// Set the reference element to position popper
setReferenceElement(event.target);

// Get location details and call setLocationDetails
getDetailsForLocation({ city, state });
} else if (!popoverNode.contains(event.target)) {
// Prevents popover from closing if you click inside it
setReferenceElement(null);
setLocationDetails(null);
}
},
[dataCollection, settings]
}, [settings?.triggerOn, itemClicked, dataCollection]);

const itemClicked = debounce(
useCallback(
(event) => {
const popoverNode = document.querySelector(".locately-wrapper");

const city =
event.target.attributes.getNamedItem("data-locately-city")?.value;
const state = event.target.attributes.getNamedItem(
"data-locately-state"
)?.value;
if (city && state) {
// Set the reference element to position popper
setReferenceElement(event.target);

// Get location details and call setLocationDetails
getDetailsForLocation({ city, state });
} else if (!popoverNode.contains(event.target)) {
// Prevents popover from closing if you click inside it
setReferenceElement(null);
setLocationDetails(null);
}
},
[dataCollection, settings]
),
50
);

// Detect dom changes so we can search the text
Expand Down
98 changes: 58 additions & 40 deletions extension/source/LocatelyPopover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { abrevCount } from "../utils";
// App components

// Third-party components (buttons, icons, etc.)
import Skeleton from "react-loading-skeleton";

// JSON

Expand All @@ -22,17 +23,20 @@ const LocatelyPopover = ({
referenceElement,
locationDetails,
dataCollection,
userSettings
userSettings,
}) => {
const [popperElement, setPopperElement] = useState(null);
const { styles, attributes, update } = usePopper(referenceElement, popperElement);
const { styles, attributes, update } = usePopper(
referenceElement,
popperElement
);

// Fix position of popper when content loads
useEffect(() => {
if (referenceElement && locationDetails) {
update();
update && update();
}
}, [referenceElement, locationDetails])
}, [referenceElement, locationDetails]);

const renderHtml = (snippet) => {
return { __html: snippet || "lorem ipsum..." };
Expand Down Expand Up @@ -69,50 +73,64 @@ const LocatelyPopover = ({
}}
{...attributes.popper}
>
{locationDetails && referenceElement && (
{referenceElement && (
<>
<div className="locately-visual-row">
<div className="locately-map">
<Map
place={locationDetails}
userSettings={userSettings}
/>
{locationDetails ? (
<Map place={locationDetails} userSettings={userSettings} />
) : (
<Skeleton height="150px" />
)}
</div>
<a
href={`https://www.google.com/search?q=${locationDetails.features[0].attributes.AreaName},%20${locationDetails.features[0].attributes.MajorSubdivisionAbbr}&tbm=isch`}
target="_blank"
className="locately-img"
>
<img src={locationDetails.wpInfo.imageUrl} />
</a>
{locationDetails ? (
<a
href={`https://www.google.com/search?q=${locationDetails.features[0].attributes.AreaName},%20${locationDetails.features[0].attributes.MajorSubdivisionAbbr}&tbm=isch`}
target="_blank"
className="locately-img"
>
<img src={locationDetails.wpInfo.imageUrl} />
</a>
) : (
<Skeleton height="150px" />
)}
</div>
<div className="locately-description">
<span
dangerouslySetInnerHTML={renderHtml(
locationDetails.wpInfo.snippet
)}
/>
<span>
...{" "}
<span className="locately-attribution">
{" "}
<a href={locationDetails.wpInfo.pageUrl} target="_blank">
Wikipedia
</a>
</span>
</span>
{locationDetails ? (
<>
<span
dangerouslySetInnerHTML={renderHtml(
locationDetails.wpInfo.snippet
)}
/>
<span>
...{" "}
<span className="locately-attribution">
{" "}
<a href={locationDetails.wpInfo.pageUrl} target="_blank">
Wikipedia
</a>
</span>
</span>
</>
) : (
<Skeleton count={7} />
)}
</div>
<div className="locately-stats-row">
{dataCollection.attributes.map((attrConfig) => {
const value = getAttrValue(attrConfig);
if (!value) return;
return (
<div className="locately-stat" key={attrConfig.name}>
<div className="locately-stat-label">{attrConfig.label}</div>
<div className="locately-stat-value">{value}</div>
</div>
);
})}
{locationDetails &&
dataCollection.attributes.map((attrConfig) => {
const value = getAttrValue(attrConfig);
if (!value) return;
return (
<div className="locately-stat" key={attrConfig.name}>
<div className="locately-stat-label">
{attrConfig.label}
</div>
<div className="locately-stat-value">{value}</div>
</div>
);
})}
</div>
</>
)}
Expand Down
29 changes: 27 additions & 2 deletions extension/source/LocatelyPopover/styles.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
@import "react-loading-skeleton/dist/skeleton.css";

.locately-wrapper {
z-index: 999;
border-radius: 5px;
box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1),
0 4px 12px -2px rgba(0, 0, 0, 0.08);
width: 400px;
min-height: 300px;
background: #fafafa;
color: #1c2229;
overflow: hidden;
Expand Down Expand Up @@ -82,6 +85,28 @@
}

*[data-locately-city] {
border-bottom: 3px ridge #6dcca5;
cursor: context-menu;
position: relative;
border-bottom: 2px solid rgba(109, 204, 165, 0.8);
border-radius: 2px;
transition: border-bottom 150ms ease-in-out;

&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 100%;
border-radius: 2px;
background-color: rgba(109, 204, 165, 0.2);
transition: top 100ms ease-out;
}

&:hover {
border-bottom-color: rgba(109, 204, 165, 1);

&::before {
top: 0;
}
}
}
33 changes: 29 additions & 4 deletions extension/source/SettingsPopup/Popup.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,21 @@ const Popup = () => {
setSettings({ ...settings, basemap: value });
};

const triggerOnChanged = (value) => {
console.log(value);
chrome.storage.sync.set(
{
triggerOn: value,
} // object
);
setSettings({ ...settings, triggerOn: value });
};

return (
<section id="SettingsPopup">
<h2>Locately Settings</h2>
<form>
<p>
<div className="input-container">
<h3 htmlFor="dataCollection">I'm interested in...</h3>
<br />
<label
Expand Down Expand Up @@ -96,9 +106,9 @@ const Popup = () => {
/>
<i>📈</i>Economy
</label>
</p>
</div>

<p>
<div className="input-container">
<h3 htmlFor="basemap">Basemap</h3>
<br />
<label
Expand Down Expand Up @@ -166,7 +176,22 @@ const Popup = () => {
Satellite
</span>
</label>
</p>
</div>

<div className="input-container">
<h3 htmlFor="triggerOn">Trigger On...</h3>
<div className="checkboxContainer">
<span onClick={() => triggerOnChanged("click")}>Click</span>
<input
type="checkbox"
checked={settings?.triggerOn === "mouseover"}
onChange={(e) =>
triggerOnChanged(e.target.checked ? "mouseover" : "click")
}
/>
<span onClick={() => triggerOnChanged("mouseover")}>Hover</span>
</div>
</div>
</form>
</section>
);
Expand Down
Loading

0 comments on commit 28ad306

Please sign in to comment.