crunchit/lib/handleCustomLabeling.js

Autotrack the events from your users

const { handleMessageFromIframe } = require("./utils/handleMessageFromIframe");
const sendMessageToIframe = require("./utils/sendMessageToIframe");
const interactjs = require("interactjs");
const { unhighlightSelectedElement } = require("./activateHighlighter");
let htmlString = `<div
id="CRUNCH_IFRAME_CONTAINER"
style="
position: fixed;
bottom: 16px;
right: 16px;
font-family: 'Inter', sans-serif;
border: 1px solid rgba(229, 231, 235, 1);
border-radius: 8px;
box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.10);
min-width: 400px;
z-index: 99999;
"
>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap"
rel="stylesheet"
/>
<script type="module">
// import interact from "https://cdn.interactjs.io/v1.9.20/interactjs/index.js";
</script>
<div
style="
display: grid;
padding: 8px 16px;
grid-template-columns: 1fr 1fr 1fr;
background: #eee;
border-radius:6px 6px 0 0;
"
id="CRUNCH_IFRAME_CONTAINER_NAV"
>
<span
id="CRUNCH_IFRAME_CONTAINER_NAV_TEXT"
style="
font-size: 12px;
color: rgba(107, 114, 128, 1);
font-weight: 500;
display: flex;
align-items: center;
"
><svg width="16" height="16" style="margin-right:4px;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8128 11.0226C12.1187 12.1424 11.078 13.0049 9.84885 13.4792C8.61975 13.9535 7.26934 14.0135 6.00298 13.6503C4.73658 13.2869 3.62342 12.5201 2.83266 11.4664C2.0419 10.4126 1.61676 9.12949 1.62187 7.81201C1.62698 6.49453 2.06205 5.21478 2.86096 4.16717C3.65987 3.11957 4.77893 2.36142 6.04808 2.00794C7.31729 1.65445 8.66715 1.72497 9.89257 2.20877C11.118 2.69256 12.152 3.56318 12.8374 4.68832L7.67115 7.83546L12.8128 11.0226Z" fill="#8B5CF6"/>
<path d="M12.6266 7.45245L10.9336 6.62988L10.111 8.32284L11.804 9.14541L12.6266 7.45245Z" fill="#8B5CF6"/>
<path d="M14.4882 6.62075L14.4204 5.56445L13.3641 5.63224L13.4319 6.68853L14.4882 6.62075Z" fill="#8B5CF6"/>
<path d="M14.2274 9.84L14.6111 8.85352L13.6246 8.46985L13.2409 9.45634L14.2274 9.84Z" fill="#8B5CF6"/>
</svg>
Magic tag</span
>
<span
id="CRUNCH_IFRAME_CONTAINER_NAV_BACK"
onclick="requestBack()"
style="
font-size: 12px;
color: rgba(107, 114, 128, 1);
font-weight: 500;
display: none;
align-items: center;
cursor: pointer;
"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="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</span
>
<svg
id="CRUNCH_IFRAME_CONTAINER_NAV_DRAG_HANDLE"
style="justify-self: center; align-self: center; cursor: grab"
width="29"
height="16"
viewBox="0 0 29 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3307 10.1668C13.3307 10.4891 13.2168 10.7641 12.9891 10.9918C12.7613 11.2196 12.4863 11.3335 12.1641 11.3335C11.8418 11.3335 11.5668 11.2196 11.3391 10.9918C11.1113 10.7641 10.9974 10.4891 10.9974 10.1668C10.9974 9.84461 11.1113 9.56961 11.3391 9.34183C11.5668 9.11405 11.8418 9.00016 12.1641 9.00016C12.4863 9.00016 12.7613 9.11405 12.9891 9.34183C13.2168 9.56961 13.3307 9.84461 13.3307 10.1668ZM13.3307 5.8335C13.3307 6.15572 13.2168 6.43072 12.9891 6.6585C12.7613 6.88627 12.4863 7.00016 12.1641 7.00016C11.8418 7.00016 11.5668 6.88627 11.3391 6.6585C11.1113 6.43072 10.9974 6.15572 10.9974 5.8335C10.9974 5.51127 11.1113 5.23627 11.3391 5.0085C11.5668 4.78072 11.8418 4.66683 12.1641 4.66683C12.4863 4.66683 12.7613 4.78072 12.9891 5.0085C13.2168 5.23627 13.3307 5.51127 13.3307 5.8335ZM9.16406 10.1668C9.16406 10.4891 9.05017 10.7641 8.8224 10.9918C8.59462 11.2196 8.31962 11.3335 7.9974 11.3335C7.67517 11.3335 7.40017 11.2196 7.1724 10.9918C6.94462 10.7641 6.83073 10.4891 6.83073 10.1668C6.83073 9.84461 6.94462 9.56961 7.1724 9.34183C7.40017 9.11405 7.67517 9.00016 7.9974 9.00016C8.31962 9.00016 8.59462 9.11405 8.8224 9.34183C9.05017 9.56961 9.16406 9.84461 9.16406 10.1668ZM9.16406 5.8335C9.16406 6.15572 9.05017 6.43072 8.8224 6.6585C8.59462 6.88627 8.31962 7.00016 7.9974 7.00016C7.67517 7.00016 7.40017 6.88627 7.1724 6.6585C6.94462 6.43072 6.83073 6.15572 6.83073 5.8335C6.83073 5.51127 6.94462 5.23627 7.1724 5.0085C7.40017 4.78072 7.67517 4.66683 7.9974 4.66683C8.31962 4.66683 8.59462 4.78072 8.8224 5.0085C9.05017 5.23627 9.16406 5.51127 9.16406 5.8335ZM4.9974 10.1668C4.9974 10.4891 4.88351 10.7641 4.65573 10.9918C4.42795 11.2196 4.15295 11.3335 3.83073 11.3335C3.50851 11.3335 3.23351 11.2196 3.00573 10.9918C2.77795 10.7641 2.66406 10.4891 2.66406 10.1668C2.66406 9.84461 2.77795 9.56961 3.00573 9.34183C3.23351 9.11405 3.50851 9.00016 3.83073 9.00016C4.15295 9.00016 4.42795 9.11405 4.65573 9.34183C4.88351 9.56961 4.9974 9.84461 4.9974 10.1668ZM4.9974 5.8335C4.9974 6.15572 4.88351 6.43072 4.65573 6.6585C4.42795 6.88627 4.15295 7.00016 3.83073 7.00016C3.50851 7.00016 3.23351 6.88627 3.00573 6.6585C2.77795 6.43072 2.66406 6.15572 2.66406 5.8335C2.66406 5.51127 2.77795 5.23627 3.00573 5.0085C3.23351 4.78072 3.50851 4.66683 3.83073 4.66683C4.15295 4.66683 4.42795 4.78072 4.65573 5.0085C4.88351 5.23627 4.9974 5.51127 4.9974 5.8335Z"
fill="#9CA3AF"
/>
<path
d="M26.3307 10.1668C26.3307 10.4891 26.2168 10.7641 25.9891 10.9918C25.7613 11.2196 25.4863 11.3335 25.1641 11.3335C24.8418 11.3335 24.5668 11.2196 24.3391 10.9918C24.1113 10.7641 23.9974 10.4891 23.9974 10.1668C23.9974 9.84461 24.1113 9.56961 24.3391 9.34183C24.5668 9.11405 24.8418 9.00016 25.1641 9.00016C25.4863 9.00016 25.7613 9.11405 25.9891 9.34183C26.2168 9.56961 26.3307 9.84461 26.3307 10.1668ZM26.3307 5.8335C26.3307 6.15572 26.2168 6.43072 25.9891 6.6585C25.7613 6.88627 25.4863 7.00016 25.1641 7.00016C24.8418 7.00016 24.5668 6.88627 24.3391 6.6585C24.1113 6.43072 23.9974 6.15572 23.9974 5.8335C23.9974 5.51127 24.1113 5.23627 24.3391 5.0085C24.5668 4.78072 24.8418 4.66683 25.1641 4.66683C25.4863 4.66683 25.7613 4.78072 25.9891 5.0085C26.2168 5.23627 26.3307 5.51127 26.3307 5.8335ZM22.1641 10.1668C22.1641 10.4891 22.0502 10.7641 21.8224 10.9918C21.5946 11.2196 21.3196 11.3335 20.9974 11.3335C20.6752 11.3335 20.4002 11.2196 20.1724 10.9918C19.9446 10.7641 19.8307 10.4891 19.8307 10.1668C19.8307 9.84461 19.9446 9.56961 20.1724 9.34183C20.4002 9.11405 20.6752 9.00016 20.9974 9.00016C21.3196 9.00016 21.5946 9.11405 21.8224 9.34183C22.0502 9.56961 22.1641 9.84461 22.1641 10.1668ZM22.1641 5.8335C22.1641 6.15572 22.0502 6.43072 21.8224 6.6585C21.5946 6.88627 21.3196 7.00016 20.9974 7.00016C20.6752 7.00016 20.4002 6.88627 20.1724 6.6585C19.9446 6.43072 19.8307 6.15572 19.8307 5.8335C19.8307 5.51127 19.9446 5.23627 20.1724 5.0085C20.4002 4.78072 20.6752 4.66683 20.9974 4.66683C21.3196 4.66683 21.5946 4.78072 21.8224 5.0085C22.0502 5.23627 22.1641 5.51127 22.1641 5.8335ZM17.9974 10.1668C17.9974 10.4891 17.8835 10.7641 17.6557 10.9918C17.428 11.2196 17.153 11.3335 16.8307 11.3335C16.5085 11.3335 16.2335 11.2196 16.0057 10.9918C15.778 10.7641 15.6641 10.4891 15.6641 10.1668C15.6641 9.84461 15.778 9.56961 16.0057 9.34183C16.2335 9.11405 16.5085 9.00016 16.8307 9.00016C17.153 9.00016 17.428 9.11405 17.6557 9.34183C17.8835 9.56961 17.9974 9.84461 17.9974 10.1668ZM17.9974 5.8335C17.9974 6.15572 17.8835 6.43072 17.6557 6.6585C17.428 6.88627 17.153 7.00016 16.8307 7.00016C16.5085 7.00016 16.2335 6.88627 16.0057 6.6585C15.778 6.43072 15.6641 6.15572 15.6641 5.8335C15.6641 5.51127 15.778 5.23627 16.0057 5.0085C16.2335 4.78072 16.5085 4.66683 16.8307 4.66683C17.153 4.66683 17.428 4.78072 17.6557 5.0085C17.8835 5.23627 17.9974 5.51127 17.9974 5.8335Z"
fill="#9CA3AF"
/>
</svg>

<svg
id="CRUNCH_IFRAME_CONTAINER_NAV_MINIMIZER"
style="justify-self: end; width: 20px; cursor: pointer"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#9CA3AF"
onclick="var iframe=window.document.getElementById('CRUNCH_IFRAME');if(iframe.style.display=='none'){ iframe.style.display='block'; window.document.getElementById('CRUNCH_IFRAME_CONTAINER_NAV_MINIMIZER').style.transform = 'rotate(0deg)';}else {iframe.style.display='none'; window.document.getElementById('CRUNCH_IFRAME_CONTAINER_NAV_MINIMIZER').style.transform = 'rotate(180deg)';}"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</div>
<iframe
src="%iframe_host%"
width="400"
height="600"
frameborder="0"
title="daolens"
id="CRUNCH_IFRAME"
onload="
const position = { x: 0, y: 0 };
window.interact('#CRUNCH_IFRAME_CONTAINER').draggable({
listeners: {
move(event) {
position.x += event.dx;
position.y += event.dy;
event.target.style.transform =
'translate(' + position.x + 'px, ' + position.y + 'px)';
},
},
});"
></iframe>
<div
id="CRUNCH_IFRAME_CONTAINER_TIP"
style="
position: absolute;
bottom: 190%;
width: 70%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border-radius: 8px;
box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.04),
0px 20px 25px -5px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
align-items: flex-start;
padding: 12px;
color:#333;
"
>
<span
style="
display: block;
width: 40px;
height: 20px;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0 0);
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.04),
0px 20px 25px -5px rgba(0, 0, 0, 0.1);
"
></span>
<div style="display: flex; align-items: center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="rgba(251, 191, 36, 1)"

style="margin-right: 4px;width:24px;height:24px;"
>
<path
d="M12 .75a8.25 8.25 0 00-4.135 15.39c.686.398 1.115 1.008 1.134 1.623a.75.75 0 00.577.706c.352.083.71.148 1.074.195.323.041.6-.218.6-.544v-4.661a6.714 6.714 0 01-.937-.171.75.75 0 11.374-1.453 5.261 5.261 0 002.626 0 .75.75 0 11.374 1.452 6.712 6.712 0 01-.937.172v4.66c0 .327.277.586.6.545.364-.047.722-.112 1.074-.195a.75.75 0 00.577-.706c.02-.615.448-1.225 1.134-1.623A8.25 8.25 0 0012 .75z"
/>
<path
fill-rule="evenodd"
d="M9.013 19.9a.75.75 0 01.877-.597 11.319 11.319 0 004.22 0 .75.75 0 11.28 1.473 12.819 12.819 0 01-4.78 0 .75.75 0 01-.597-.876zM9.754 22.344a.75.75 0 01.824-.668 13.682 13.682 0 002.844 0 .75.75 0 11.156 1.492 15.156 15.156 0 01-3.156 0 .75.75 0 01-.668-.824z"
clip-rule="evenodd"
/></svg
><span>Tip</span>
</div>
<div
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 8px;
width: 100%;
margin: 12px 0;
background-color: rgba(243, 244, 246, 1);
"
>
<div
style="display: grid; grid-template-columns: 1fr 1fr; width: 100%"
>
<span
style="
background-color: #10b981;
display: block;
height: 4px;
width: 100%;
"
></span
><span
style="
background-color: #ef4444;
display: block;
height: 4px;
width: 100%;
"
></span>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
font-size: 12px;
"
>
<div
style="
display: flex;
align-items: center;
flex-direction: column;
padding: 12px 0;
"
>
<div style="display: flex; align-items: center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="rgba(16, 185, 129, 1)"

style="margin-right: 4px;width:24px;height:24px;"
>
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
<span>Do</span>
</div>
<div style="border: 3px solid #8b5cf6; margin-top: 12px">
<div
style="
background-color: white;
padding: 8px 16px;
border-radius: 100px;
"
>
<span>Crunch it</span>
</div>
</div>
</div>
<div
style="
display: flex;
align-items: center;
flex-direction: column;
padding: 12px 0;
"
>
<div style="display: flex; align-items: center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="rgba(239, 68, 68, 1)"

style="margin-right: 4px;width:24px;height:24px;"
>
<path
fill-rule="evenodd"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z"
clip-rule="evenodd"
/>
</svg>

<span>Don’t</span>
</div>
<div style="margin-top: 12px">
<div
style="
background-color: white;
padding: 8px 16px;
border-radius: 100px;
"
>
<span style="border: 3px solid rgba(239, 68, 68, 1)"
>Crunch it</span
>
</div>
</div>
</div>
</div>
</div>
<span
style="font-size: 12px; font-weight: 400; color: rgba(17, 24, 39, 1)"
>While locating the event make sure to select the largest possible
boundry of the target area</span
>
</div>
</div>`;
function handleCustomLabeling(selectorId, xpath = false) {
  let iframeContainer = window.document.getElementById(
    "CRUNCH_IFRAME_CONTAINER"
  );
  if (iframeContainer || !interactjs) return;
  window.interact = interactjs;
  window.requestBack = () => {
    unhighlightSelectedElement();
    handleMessageFromIframe("END_LOCATING", "");
    sendMessageToIframe({
      type: "REQUESTED_BACK",
      message: "",
    });
  };
  const IFRAME_HOST_ORIGIN = `http://localhost:3000`;
  const IFRAME_HOST_ORIGIN_HOSTED = `https://labeler-2.vercel.app`;
  const APP_ID = window.localStorage.getItem("CRUNCH_APP_ID");
  const IFRAME_HOST = `${IFRAME_HOST_ORIGIN}?${
    selectorId ? "selectorId=" + selectorId : ""
  }&${xpath ? "xpath=" + xpath : ""}&host=${
    window.location.origin
  }&appId=${APP_ID}`;

  // ! Attach the controller to the body
  const body = document.querySelector("body");
  body.insertAdjacentHTML(
    "beforeend",
    htmlString.replace("%iframe_host%", IFRAME_HOST)
  );
  // ! Add event listener to listen to messages from the iframe
  window.addEventListener(
    "message",
    function (event) {
      // ! Make sure to check the origin of the data!
      if (event.origin !== IFRAME_HOST_ORIGIN) {
        // ! Something not from your site is trying to send postMessage into the window.
        return;
      }
      // ! The data sent with postMessage is stored in event.data
      const { type, message } = event.data;
      handleMessageFromIframe(type, message);
    },
    false
  );
}
module.exports = handleCustomLabeling;