inject container to the root of a page
This commit is contained in:
parent
60930c4f1a
commit
6d61a34503
1 changed files with 196 additions and 153 deletions
349
lib/index.js
349
lib/index.js
|
|
@ -12,197 +12,240 @@ TODO:
|
||||||
- readme how to use and debug
|
- readme how to use and debug
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const createPricesContainer = () => {
|
const isInLibrary = () =>
|
||||||
const pricingActionContainers = document.querySelectorAll(".pricing-details");
|
// Old layout
|
||||||
|
document.querySelectorAll(".read-now").length > 0 ||
|
||||||
l("all pricing containers", pricingActionContainers);
|
// New layout
|
||||||
|
document.querySelectorAll('[data-testid="buypad-readnow"]').length > 0;
|
||||||
let visible;
|
|
||||||
for (const node of pricingActionContainers) {
|
|
||||||
if (node.checkVisibility()) {
|
|
||||||
l("found visible pricing container", node);
|
|
||||||
visible = node;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return visible.parentNode.insertBefore(
|
|
||||||
document.createElement("div"),
|
|
||||||
visible,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const isInLibrary = () => document.querySelectorAll(".read-now").length;
|
|
||||||
|
|
||||||
const formatPrice = (countryPrice, convertedPrice, isSelected) => {
|
const formatPrice = (countryPrice, convertedPrice, isSelected) => {
|
||||||
if (!isSelected) return "SKIP";
|
if (!isSelected) return "SKIP";
|
||||||
|
|
||||||
if (countryPrice == undefined) {
|
if (countryPrice == undefined) {
|
||||||
return "NOT LOADED";
|
return "NOT LOADED";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (convertedPrice) {
|
if (convertedPrice) {
|
||||||
return `${countryPrice} => ${convertedPrice?.formatted}`;
|
return `${countryPrice} => ${convertedPrice?.formatted}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return "NOT FOUND";
|
return "NOT FOUND";
|
||||||
};
|
};
|
||||||
|
|
||||||
const Price = ({ price, toggleCountry, isSelected }) => {
|
const Price = ({ price, toggleCountry, isSelected }) => {
|
||||||
const { convertedPrice, countryCode, countryPrice } = price;
|
const { convertedPrice, countryCode, countryPrice } = price;
|
||||||
const [isHovered, setHover] = useState(false);
|
const [isHovered, setHover] = useState(false);
|
||||||
|
|
||||||
const hover = useCallback(() => setHover(true));
|
const hover = useCallback(() => setHover(true));
|
||||||
const leave = useCallback(() => setHover(false));
|
const leave = useCallback(() => setHover(false));
|
||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
backgroundColor: isHovered ? "#d7d7d7" : "",
|
backgroundColor: isHovered ? "#d7d7d7" : "",
|
||||||
padding: "0 10px",
|
padding: "0 10px",
|
||||||
};
|
};
|
||||||
|
|
||||||
const link = h(
|
const link = h(
|
||||||
"a",
|
"a",
|
||||||
{
|
{
|
||||||
style: { textDecoration: "underline" },
|
style: { textDecoration: "underline" },
|
||||||
href: bookUrl(countryCode),
|
href: bookUrl(countryCode),
|
||||||
target: "_blank",
|
target: "_blank",
|
||||||
},
|
},
|
||||||
countryCode.toUpperCase(),
|
countryCode.toUpperCase(),
|
||||||
);
|
);
|
||||||
|
|
||||||
const checkbox = h("input", {
|
const checkbox = h("input", {
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
checked: isSelected,
|
checked: isSelected,
|
||||||
onChange: () => toggleCountry(),
|
onChange: () => toggleCountry(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const priceLabel = h(
|
const priceLabel = h(
|
||||||
"p",
|
"p",
|
||||||
{ style: { fontWeight: "bold" } },
|
{ style: { fontWeight: "bold" } },
|
||||||
formatPrice(countryPrice, convertedPrice, isSelected),
|
formatPrice(countryPrice, convertedPrice, isSelected),
|
||||||
);
|
);
|
||||||
|
|
||||||
return h(
|
return h(
|
||||||
"label",
|
"label",
|
||||||
{ style, onMouseEnter: hover, onMouseLeave: leave },
|
{ style, onMouseEnter: hover, onMouseLeave: leave },
|
||||||
h("div", { style: { display: "flex" } }, checkbox, link),
|
h("div", { style: { display: "flex" } }, checkbox, link),
|
||||||
priceLabel,
|
priceLabel,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const InLibrary = () =>
|
const InLibrary = () =>
|
||||||
h(
|
h(
|
||||||
"div",
|
"div",
|
||||||
{
|
{
|
||||||
style: {
|
style: {
|
||||||
display: "flex",
|
padding: "10px",
|
||||||
flexDirection: "column",
|
textAlign: "center",
|
||||||
border: "1px solid black",
|
},
|
||||||
textAlign: "center",
|
},
|
||||||
},
|
h("h2", null, "Already in Library!"),
|
||||||
},
|
);
|
||||||
h("h2", null, "Already in Library!"),
|
|
||||||
);
|
|
||||||
|
|
||||||
const Percent = (percent) => {
|
const Percent = (percent) => {
|
||||||
const spinner = useRef();
|
const spinner = useRef();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
spinner.current.animate(
|
spinner.current.animate(
|
||||||
[{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
|
[{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
|
||||||
{ iterations: Infinity, duration: 1000 },
|
{ iterations: Infinity, duration: 1000 },
|
||||||
);
|
);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const style = { padding: "10px 10px 0 10px", textAlign: "center" };
|
const style = { padding: "10px 10px 0 10px", textAlign: "center" };
|
||||||
|
|
||||||
if (percent == 100) return h("h2", { style }, "all prices are loaded!");
|
if (percent == 100) return h("h2", { style }, "all prices are loaded!");
|
||||||
|
|
||||||
return h(
|
return h(
|
||||||
"h2",
|
"h2",
|
||||||
{ style },
|
{ style },
|
||||||
`${percent}%`,
|
`${percent}%`,
|
||||||
h("span", {
|
h("span", {
|
||||||
ref: spinner,
|
ref: spinner,
|
||||||
style: {
|
style: {
|
||||||
width: "16px",
|
width: "16px",
|
||||||
height: "16px",
|
height: "16px",
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
borderTop: "3px solid black",
|
borderTop: "3px solid black",
|
||||||
borderRight: "3px solid transparent",
|
borderRight: "3px solid transparent",
|
||||||
boxSizing: "border-box",
|
boxSizing: "border-box",
|
||||||
marginLeft: "15px",
|
marginLeft: "15px",
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Header = (state, percentChecked) => {
|
const Header = (state, percentChecked) => {
|
||||||
if (state === "loading") return Percent(percentChecked);
|
if (state === "loading") return Percent(percentChecked);
|
||||||
|
|
||||||
if (state === "done")
|
if (state === "done")
|
||||||
return h(
|
return h(
|
||||||
"h2",
|
"h2",
|
||||||
{ style: { textAlign: "center" } },
|
{ style: { textAlign: "center" } },
|
||||||
"All prices are loaded!",
|
"All prices are loaded!",
|
||||||
);
|
);
|
||||||
|
|
||||||
return h(
|
return h(
|
||||||
"h2",
|
"h2",
|
||||||
{ style: { textAlign: "center" } },
|
{ style: { textAlign: "center" } },
|
||||||
'Select countries or leave as is and press "load"',
|
'Select countries or leave as is and press "Load prices"',
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Load = (state, load) => {
|
const Load = (state, load) => {
|
||||||
return h(
|
return h(
|
||||||
"button",
|
"button",
|
||||||
{
|
{
|
||||||
disabled: state === "loading",
|
disabled: state === "loading",
|
||||||
onClick: load,
|
onClick: load,
|
||||||
type: "button",
|
type: "button",
|
||||||
style: { backgroundColor: "#91ff91" },
|
style: { backgroundColor: "#91ff91" },
|
||||||
},
|
},
|
||||||
state === "loading" ? "Loading..." : "Load prices",
|
state === "loading" ? "Loading..." : "Load prices",
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const { isSelected, toggleCountry, selected } = useSelectedCountries();
|
const { isSelected, toggleCountry, selected } = useSelectedCountries();
|
||||||
const { prices, percentChecked, state, load } = usePrices(selected);
|
const { prices, percentChecked, state, load } = usePrices(selected);
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
|
||||||
l(selected);
|
l(selected);
|
||||||
const style = {
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
border: "1px solid black",
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isInLibrary()) {
|
const toggle = useCallback(() => setExpanded((v) => !v));
|
||||||
return InLibrary();
|
|
||||||
}
|
|
||||||
|
|
||||||
return h(
|
if (isInLibrary()) {
|
||||||
"div",
|
return h(
|
||||||
{ style },
|
"div",
|
||||||
Header(state, percentChecked),
|
{
|
||||||
...prices.map((price) =>
|
style: {
|
||||||
h(Price, {
|
position: "fixed",
|
||||||
price,
|
top: "10px",
|
||||||
toggleCountry: () => toggleCountry(price.countryCode),
|
left: "10px",
|
||||||
isSelected: isSelected(price.countryCode),
|
zIndex: 99999,
|
||||||
isLoading: state,
|
background: "white",
|
||||||
}),
|
border: "1px solid black",
|
||||||
),
|
fontFamily: "sans-serif",
|
||||||
Load(state, load),
|
fontSize: "14px",
|
||||||
);
|
},
|
||||||
|
},
|
||||||
|
InLibrary(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const panelStyle = {
|
||||||
|
position: "fixed",
|
||||||
|
bottom: "0",
|
||||||
|
left: "0",
|
||||||
|
zIndex: 99999,
|
||||||
|
background: "white",
|
||||||
|
border: "1px solid black",
|
||||||
|
fontFamily: "sans-serif",
|
||||||
|
fontSize: "14px",
|
||||||
|
maxHeight: expanded ? "100vh" : "auto",
|
||||||
|
overflowY: expanded ? "auto" : "hidden",
|
||||||
|
minWidth: "100%",
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonStyle = {
|
||||||
|
height: "2.25rem",
|
||||||
|
background: "white",
|
||||||
|
border: "1px solid black",
|
||||||
|
// padding: "6px 12px",
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: "14px",
|
||||||
|
fontWeight: "bold",
|
||||||
|
width: "100%",
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!expanded) {
|
||||||
|
return h(
|
||||||
|
"div",
|
||||||
|
{ style: panelStyle },
|
||||||
|
h("button", { style: buttonStyle, onClick: toggle }, "PRICES"),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const listStyle = {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
};
|
||||||
|
|
||||||
|
return h(
|
||||||
|
"div",
|
||||||
|
{ style: panelStyle },
|
||||||
|
h("button", { style: buttonStyle, onClick: toggle }, "CLOSE"),
|
||||||
|
h(
|
||||||
|
"div",
|
||||||
|
{ style: listStyle },
|
||||||
|
...[
|
||||||
|
Header(state, percentChecked),
|
||||||
|
Load(state, load),
|
||||||
|
...prices.map((price) =>
|
||||||
|
h(Price, {
|
||||||
|
price,
|
||||||
|
toggleCountry: () => toggleCountry(price.countryCode),
|
||||||
|
isSelected: isSelected(price.countryCode),
|
||||||
|
isLoading: state,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
l("starting...");
|
l("starting...");
|
||||||
initCache();
|
initCache();
|
||||||
render(createElement(App), createPricesContainer());
|
|
||||||
|
const container = document.createElement("div");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
render(createElement(App), container);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue