crunchit
Version:
Autotrack the events from your users
321 lines (307 loc) • 11.5 kB
JavaScript
const {
activateHighlighter,
unhighlightSelectedElement,
deactivateHighlighter,
successfulSelection,
} = require("../activateHighlighter");
const getElementByXPath = require("../getElementByXPath");
const sendMessageToIframe = require("./sendMessageToIframe");
function showCrunchLocatingTip() {
let isShown = window.localStorage.getItem("CRUNCH_LOCATING_TIP");
if (!isShown) {
window.localStorage.setItem("CRUNCH_LOCATING_TIP", true);
let crunchLocatingTip = window.document.getElementById(
"CRUNCH_IFRAME_CONTAINER_TIP"
);
crunchLocatingTip.style.display = "flex";
setTimeout(() => {
crunchLocatingTip.style.display = "none";
}, 5000);
}
}
function highlightTag(target) {
target.crunchPreviousBorder = target.style.border;
target.style.border = "2.5px solid purple";
}
function unhighlightTag(target) {
target.style.border = target.crunchPreviousBorder || "";
target.crunchPreviousBorder = "";
}
function handleMessageFromIframe(type, message) {
// ! Element references
let iframe = window.document.getElementById("CRUNCH_IFRAME");
let iframeTopText = window.document.getElementById(
"CRUNCH_IFRAME_CONTAINER_NAV_TEXT"
);
let iframeTopBack = window.document.getElementById(
"CRUNCH_IFRAME_CONTAINER_NAV_BACK"
);
let iframeMinimizer = window.document.getElementById(
"CRUNCH_IFRAME_CONTAINER_NAV_MINIMIZER"
);
// ! Get tag from xpath
let element = message.includes("crunch-xpath")
? getElementByXPath(message.split("||")[1])
: null;
// ! Switch case
switch (type) {
case "INITIALIZE":
window.localStorage.setItem("CRUNCH_SELECTOR_CONNECTED", message);
let CRUNCH_APP_ID = window.localStorage.getItem("CRUNCH_APP_ID");
sendMessageToIframe({
type: "INITIALIZE",
message: {
CRUNCH_HOST: window.location.origin,
CRUNCH_APP_ID,
},
});
break;
case "START_LOCATING":
window.localStorage.setItem("CRUNCH_LOCATING", true);
showCrunchLocatingTip();
activateHighlighter();
break;
case "END_LOCATING":
// unhighlightSelectedElement();
break;
case "LABELING_SUCCESS":
let details = JSON.parse(message);
successfulSelection(details);
break;
case "LOCATOR_MODE_GENERIC":
let body = document.querySelector("body");
window.localStorage.setItem("LOCATOR_MODE", "LOCATOR_MODE_GENERIC");
const tipContainer = document.getElementById(
"CRUNCH_IFRAME_CONTAINER_TIP"
);
tipContainer.style.display = "none";
// ! Add helper functions
window.handleContainerMinimize = () => {
const minimizeHandler = document.getElementById(
"CRUNCH_NAVBAR_CONTAINER_MINIMIZE_HANDLER"
);
const minimizeHandlerSvg = document.getElementById(
"CRUNCH_NAVBAR_CONTAINER_MINIMIZE_HANDLER_SVG"
);
const crunchLabelerContainer = document.getElementById(
"CRUNCH_NAVBAR_CONTAINER"
);
const crunchBack = document.getElementById(
"CRUNCH_NAVBAR_CONTAINER_BACK"
);
const crunchToggle = document.getElementById(
"CRUNCH_NAVBAR_CONTAINER_TOGGLE"
);
if (crunchLabelerContainer.style.height == "48px") {
crunchLabelerContainer.style.height = "0px";
minimizeHandlerSvg.style.transform = "rotate(180deg)";
crunchBack.style.display = "none";
crunchToggle.style.display = "none";
body.style.paddingTop = "0px";
minimizeHandler.style.transform = "translate(-50%, 0px)";
} else {
crunchLabelerContainer.style.height = "48px";
minimizeHandlerSvg.style.transform = "rotate(0deg)";
crunchBack.style.display = "flex";
crunchToggle.style.display = "block";
body.style.paddingTop = "48px";
minimizeHandler.style.transform = "translate(-50%, -5px)";
}
};
window.crunchHandleBack = () => {
let redirect = window.localStorage.getItem("CRUNCH_REDIRECT_URL");
window.open(redirect);
};
window.crunchBrowseSite = () => {
const browseBtn = document.getElementById("CRUNCH_NAVBAR_BROWSE_BTN");
const defineBtn = document.getElementById("CRUNCH_NAVBAR_DEFINE_BTN");
const crunchContainer = document.getElementById(
"CRUNCH_IFRAME_CONTAINER"
);
handleMessageFromIframe("END_LOCATING", "");
deactivateHighlighter();
document.addEventListener("click", window.crunchit.autocapture(), true); // ! The third argument set to true means that the event is captured, not bubbled
// ! remove localstorage data
window.localStorage.removeItem("CRUNCH_LOCATING");
// ! Remove event listeners
crunchContainer.style.display = "none";
browseBtn.style.backgroundColor = "rgba(55, 65, 81, 1)";
browseBtn.style.borderRadius = "4px";
browseBtn.style.color = "rgba(243, 244, 246, 1)";
defineBtn.style.backgroundColor = "transparent";
defineBtn.style.color = "rgba(156, 163, 175, 1)";
};
window.crunchDefineEvent = () => {
const browseBtn = document.getElementById("CRUNCH_NAVBAR_BROWSE_BTN");
const defineBtn = document.getElementById("CRUNCH_NAVBAR_DEFINE_BTN");
const crunchContainer = document.getElementById(
"CRUNCH_IFRAME_CONTAINER"
);
if (window.localStorage.getItem("CRUNCH_LOCATING")) return;
handleMessageFromIframe("START_LOCATING", "");
crunchContainer.style.display = "block";
defineBtn.style.backgroundColor = "rgba(55, 65, 81, 1)";
defineBtn.style.borderRadius = "4px";
defineBtn.style.color = "rgba(243, 244, 246, 1)";
browseBtn.style.backgroundColor = "transparent";
browseBtn.style.color = "rgba(156, 163, 175, 1)";
};
// ! Find body and attach the html
body.style.paddingTop = "48px";
if (!document.getElementById("CRUNCH_NAVBAR_CONTAINER"))
body.insertAdjacentHTML(
"afterBegin",
`<div
id="CRUNCH_NAVBAR_CONTAINER"
style="
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
justify-content: space-between;
position: fixed;
width: 100vw;
left: 0px;
top: 0px;
height: 48px;
background-color: rgba(17, 24, 39, 1);
z-index: 9999999;
"
>
<div style=" margin-left: 12px " id="CRUNCH_NAVBAR_CONTAINER_BACK">
<span
style="
font-size: 12px;
color: rgba(209, 213, 219, 1);
font-weight: 500;
display: flex;
align-items: center;
cursor: pointer;
"
onclick="crunchHandleBack()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
view-box="0 0 20 20"
fill="currentColor"
style="height: 20px; width: 20px; margin-right: 8px"
>
<path
fill-rule="evenodd"
d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z"
clip-rule="evenodd"
/>
</svg>
Back to Crunch
</span>
</div>
<div
id="CRUNCH_NAVBAR_CONTAINER_TOGGLE"
style="
background-color: rgba(31, 41, 55, 0.5);
padding: 4px;
border-radius: 8px;
font-size: 12px;
justify-self: center;
"
>
<span
style="
color: rgba(156, 163, 175, 1);
padding: 4px 8px;
cursor: pointer;
"
onclick="crunchBrowseSite()"
id="CRUNCH_NAVBAR_BROWSE_BTN"
>Browse site</span>
<span
style="
background-color: rgba(55, 65, 81, 1);
border-radius: 4px;
color: rgba(243, 244, 246, 1);
padding: 4px 8px;
cursor: pointer;
"
onclick="crunchDefineEvent()"
id="CRUNCH_NAVBAR_DEFINE_BTN"
>Define events</span>
</div>
<div></div>
<div
id="CRUNCH_NAVBAR_CONTAINER_MINIMIZE_HANDLER"
onclick="handleContainerMinimize()"
style="background-color: rgba(17, 24, 39, 1);
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%,-5px);
padding: 4px;
border-radius: 0 0 200px 200px;
width: 28px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer"
>
<svg
id="CRUNCH_NAVBAR_CONTAINER_MINIMIZE_HANDLER_SVG"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="#fff"
style=" height: 12px; width: 12px "
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 15.75l7.5-7.5 7.5 7.5"
/>
</svg>
</div>
</div>`
);
handleMessageFromIframe("START_LOCATING", "");
break;
case "LOCATOR_MODE_TEMPLATE":
window.localStorage.setItem("LOCATOR_MODE", "LOCATOR_MODE_TEMPLATE");
break;
case "LOCATOR_MODE_SINGLE":
window.localStorage.setItem("LOCATOR_MODE", "LOCATOR_MODE_SINGLE");
break;
case "LOCATOR_MAIN_PAGE":
iframeTopText.style.display = "flex";
iframeTopBack.style.display = "none";
break;
case "LOCATOR_EVENT_PAGE":
iframeTopText.style.display = "none";
iframeTopBack.style.display = "flex";
break;
case "MINIMIZE_LOCATOR":
iframe.style.display = "none";
iframeMinimizer.style.transform = "rotate(180deg)";
iframeTopText.style.display = "flex";
iframeTopBack.style.display = "none";
break;
case "MAXIMIZE_LOCATOR":
iframe.style.display = "block";
iframeMinimizer.style.transform = "rotate(0deg)";
break;
case "CRUNCH_HIGHLIGHT_TAG":
highlightTag(element);
break;
case "CRUNCH_UNHIGHLIGHT_TAG":
unhighlightTag(element);
break;
case "CLOSE_WINDOW":
window.close();
break;
case "TEST_MESSAGE":
break;
default:
break;
}
}
module.exports = {
handleMessageFromIframe,
};