@zootools/waitlist-js
Version:
Viral whitelists / waitlists for nfts and web3 projects
258 lines (257 loc) • 12.8 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
exports.__esModule = true;
var FORM_ENDPOINT = "https://form.waitlistpanda.com/go";
var API_ENDPOINT = "https://api.waitlistpanda.com";
var WRAPPER_ID = "WaitlistPanda-wrapper";
var SPINNER_ID = "WaitlistPanda-spinner";
var IFRAME_ID = "WaitlistPanda-form";
var OVERLAY_ID = "WaitlistPanda-overlay";
var FORM_DATA_KEY = "waitlist-id";
function checkUser(email, listId) {
return __awaiter(this, void 0, void 0, function () {
var hasAccess;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, fetch("".concat(API_ENDPOINT, "/lists/").concat(listId, "/members/").concat(email, "/has_access"))["catch"](function (error) { return console.log(error); })];
case 1:
hasAccess = _a.sent();
return [2 /*return*/, hasAccess];
}
});
});
}
function addGlobalStyles() {
var styles = "\n @-webkit-keyframes hinge {\n 0% {\n opacity: 0;\n -webkit-transform: scale3d(0.8, 0.8, 0.8);\n transform: scale3d(0.8, 0.8, 0.8);\n }\n 75% {\n opacity: 1;\n -webkit-transform: scale3d(1.05, 1.05, 1.05);\n transform: scale3d(1.05, 1.05, 1.05);\n }\n 100% {\n opacity: 1;\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n }\n @keyframes hinge {\n 0% {\n opacity: 0;\n -webkit-transform: scale3d(0.8, 0.8, 0.8);\n transform: scale3d(0.8, 0.8, 0.8);\n }\n 75% {\n opacity: 1;\n -webkit-transform: scale3d(1.05, 1.05, 1.05);\n transform: scale3d(1.05, 1.05, 1.05);\n }\n 100% {\n opacity: 1;\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n }\n\n @-webkit-keyframes load8 {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @keyframes load8 {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n\n @-webkit-keyframes wrapperAnimation {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n\n @keyframes wrapperAnimation {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n #".concat(SPINNER_ID, ",\n #").concat(SPINNER_ID, ":after {\n border-radius: 50%;\n width: 50px;\n height: 50px;\n }\n #").concat(SPINNER_ID, " {\n margin: 60px auto;\n font-size: 10px;\n position: relative;\n z-index: 2;\n text-indent: -9999em;\n border-top: 7px solid rgba(255, 255, 255, 0.6);\n border-right: 7px solid rgba(255, 255, 255, 0.6);\n border-bottom: 7px solid rgba(255, 255, 255, 0.6);\n border-left: 7px solid #ffffff;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n -webkit-animation: load8 1.1s infinite linear;\n animation: load8 1.1s infinite linear;\n }\n ");
var styleSheet = document.createElement("style");
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
}
function showPopup(iframe, options) {
if (options === void 0) { options = { showSpinner: true }; }
var wrapper = document.getElementById(WRAPPER_ID);
var overlay = document.getElementById(OVERLAY_ID);
var spinner = document.getElementById(SPINNER_ID);
iframe.style.opacity = "0";
wrapper.style.display = "flex";
overlay.style.opacity = "1";
wrapper.style.animation = "wrapperAnimation 200ms ease-in-out";
if (options.showSpinner) {
spinner.style.display = "block";
}
}
function showIframe(iframe) {
iframe.style.animation = "hinge 400ms ease-in-out";
iframe.style.opacity = "1";
var spinner = document.getElementById(SPINNER_ID);
setTimeout(function () {
if (spinner) {
spinner.style.display = "none";
}
}, 250);
}
function hideIframe(iframe) {
iframe.style.animation = "";
iframe.style.opacity = "0";
}
function hidePopup(iframe) {
var wrapper = document.getElementById(WRAPPER_ID);
var overlay = document.getElementById(OVERLAY_ID);
var spinner = document.getElementById(SPINNER_ID);
hideIframe(iframe);
wrapper.style.animation = "";
wrapper.style.display = "none";
overlay.style.opacity = "0";
spinner.style.display = "none";
}
function createPopup(url) {
var wrapper = document.createElement("div");
wrapper.style.alignItems = "center";
wrapper.style.backgroundColor = "100%";
wrapper.style.display = "flex";
wrapper.style.height = "100%";
wrapper.style.justifyContent = "center";
wrapper.style.left = "0";
wrapper.style.position = "fixed";
wrapper.style.top = "0";
wrapper.style.width = "100%";
wrapper.style.zIndex = "100";
wrapper.id = WRAPPER_ID;
var overlay = document.createElement("div");
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "#333333c4";
overlay.style.position = "absolute";
overlay.style.inset = "0";
overlay.style.opacity = "0";
overlay.style.animation = "";
overlay.style.zIndex = "1";
overlay.style.transition = "opacity 0.25s ease-in-out";
overlay.id = OVERLAY_ID;
wrapper.appendChild(overlay);
var spinner = buildLoaderIcon();
wrapper.appendChild(spinner);
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", url);
ifrm.allow = "autoplay; clipboard-read; picture-in-picture; clipboard-write";
ifrm.allowFullscreen = true;
ifrm.style.maxWidth = "540px";
ifrm.style.width = "100%";
ifrm.style.height = "520px";
ifrm.style.position = "absolute";
ifrm.style.background = "#fff";
ifrm.style.zIndex = "3";
ifrm.style.border = "none";
ifrm.style.borderRadius = "8px";
ifrm.style.overflow = "hidden";
ifrm.style.opacity = "0";
ifrm.id = IFRAME_ID;
ifrm.onclose = function () {
};
ifrm.onload = function () {
// console.log("iframe onloaded!");
showIframe(ifrm);
};
wrapper.appendChild(ifrm);
// Event listenters for the modal
overlay.onclick = function () {
var isLoading = window.getComputedStyle(spinner, null).display === "block";
if (!isLoading) {
hidePopup(ifrm);
}
};
// Add the whole wrapper into the UI...
document.body.appendChild(wrapper);
showPopup(ifrm);
addGlobalStyles();
}
function updateIframeUrl(iframe, url) {
iframe.setAttribute("src", url);
}
function hasIframeTargetUrl(iframe, url) {
return iframe.src === url;
}
function launchAndCreatePopup(url) {
var popup = document.getElementById(WRAPPER_ID);
if (popup) {
var iframe = document.getElementById(IFRAME_ID);
if (!hasIframeTargetUrl(iframe, url)) {
showPopup(iframe);
updateIframeUrl(iframe, url);
}
else {
showPopup(iframe, { showSpinner: false });
showIframe(iframe);
}
}
else {
createPopup(url);
}
}
function handleClickButton(event, url) {
event.preventDefault();
launchAndCreatePopup(url);
}
var buildLoaderIcon = function () {
// const fillColor = "#fff"
var loaderIcon = document.createElement("div");
loaderIcon.id = SPINNER_ID;
return loaderIcon;
};
function getButtons() {
return document.querySelectorAll("[data-".concat(FORM_DATA_KEY, "]"));
}
function runWaitlistScript() {
var elements = getButtons();
elements.forEach(function (element) {
var waitlistId = element.dataset.waitlistId;
var listId = waitlistId;
var formUrl = "".concat(FORM_ENDPOINT, "/").concat(listId);
element.onclick = function (event) {
handleClickButton(event, formUrl);
};
element.dataset.wlLoaded = "true";
});
}
function loadScript() {
// https://stackoverflow.com/a/807997
// @ts-ignore: Unreachable code error
if (window.attachEvent) {
// @ts-ignore: Unreachable code error
window.attachEvent("onload", runWaitlistScript);
}
else {
if (window.onload) {
var curronload = window.onload;
var newonload = function (evt) {
// @ts-ignore: Unreachable code error
curronload(evt);
// @ts-ignore: Unreachable code error
runWaitlistScript(evt);
};
window.onload = newonload; // @ts-ignore: Unreachable code error
}
else {
window.onload = runWaitlistScript;
}
}
}
function listenEvents() {
document.addEventListener("DOMContentLoaded", runWaitlistScript, false);
if (document.readyState === "interactive" ||
document.readyState === "complete") {
runWaitlistScript();
}
}
function init() {
if (typeof window === "undefined") {
return;
}
loadScript();
// Listen events to re-create the popup actions on page change.
listenEvents();
}
function openPopup(listId) {
var formUrl = "".concat(FORM_ENDPOINT, "/").concat(listId);
launchAndCreatePopup(formUrl);
}
exports["default"] = {
checkUser: checkUser,
init: init,
openPopup: openPopup
};