Untitled
unknown
plain_text
a year ago
10 kB
2
Indexable
Never
.eg-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-bottom: 1px solid #fff;
padding: 28px 0 30px;
}
.egLeft img {
width: 100%;
max-width: 185px;
mix-blend-mode: darken !important;
}
.egFeatures {
display: flex;
align-items: center;
justify-content: flex-start;
padding-bottom: 13px;
}
.egIcon {
margin-right: 15px !important;
}
.egSvg {
display: block;
width: 19px !important;
height: 19px !important;
}
#egEmail::placeholder {
color: #a4a4a4 !important;
}
.egPara {
font-size: 15px;
}
.eg-wrapper h1 {
color: #568FCB;
font-size: 26px;
padding-bottom: 5px;
}
.egLeft {
display: flex;
justify-content: center;
align-items: center;
margin-right: 40px;
}
html body .egIcon svg path {
fill: #4ea982;
}
.egEmail {
font-size: 14px;
line-height: 20px;
color: #fff;
box-sizing: border-box;
background-color: #fff;
padding: 5px;
border-radius: 4px;
display: flex;
-webkit-box-align: stretch;
align-items: stretch;
position: relative;
height: 100%;
-webkit-box-flex: 1;
flex-grow: 1;
}
.egEmailWrapper {
-webkit-tap-highlight-color: #0000;
font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #fff;
box-sizing: border-box;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-align: stretch;
align-items: stretch;
padding: 0 0 0 3px;
margin-right: 15px;
}
#egButton {
box-sizing: border-box;
border: none;
background-color: rgb(86, 143, 203);
color: #fff;
text-transform: uppercase;
width: 180px;
height: 50px;
font: inherit;
font-size: 16px;
font-weight: bold;
line-height: 1;
border-radius: 4px;
transition: background-color 200ms;
cursor: pointer;
}
#egButton:hover {
cursor: pointer;
background-color: #285483;
}
input#egEmail {
-webkit-tap-highlight-color: #0000;
box-sizing: border-box;
background-color: transparent;
border: none;
font: inherit;
font-size: 16px;
outline: none;
-webkit-box-flex: 1;
flex-grow: 1;
padding-left: 14px;
}
.eg-box {
margin-top: 10px;
}
@media screen and (min-width: 1024px) {
div.eg-usps>div>div:nth-child(1) {
min-width: 350px;
width: 100%;
}
}
@media screen and (max-width : 576px) {
#egButton {
width: 110px !important;
height: 45px;
}
html body .eg-wrapper {
padding: 0 0 28px !important;
width: 90%;
}
.egEmailWrapper {
width: 60%;
}
.egSubs {
font-size: 14px !important;
}
html body .eg-wrapper>h1 {
font-size: 20px;
}
input#egEmail{
width: 100%;
}
}
@media screen and (max-width: 767px) {
.eg-container {
display: flex;
flex-direction: column;
padding: 0 !important;
}
}
@media screen and (min-width: 1024px) {
#egButton{
width: 214px;
height: 50px;
}
}
/*newsletter css*/
html body .eg-thanks {
justify-content: center;
background: white;
border-radius: 4px;
display: none;
align-items: center;
margin-top: 10px;
padding: 23px 8px;
}
html body .eg-thanks>p {
display: flex;
font-size: 24px;
font-weight: bold;
align-items: center;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html body .eg-thanks p>svg {
margin-left: 15px;
width: 25px !important;
height: 25px !important;
}
html body .eg-thanks p>svg path {
fill: #4ea982;
}
@media(max-width:576px) {
html body .eg-thanks>p {
font-size: 17px !important;
}
html body .eg-thanks {
padding: 10px !important;
}
}
html body .eg-box.eg-subs .eg-thanks {
display: flex !important;
}
html body .eg-box.eg-subs .egEmail {
display: none !important;
}
/*newsletter css*/
.eg-error{
display: none;
}
.eg-show-error.eg-error{
display: block !important;
}
.eg-error p {
color: red;
margin-top: 0;
}
html body.eg-error-msg .eg-box{
margin-bottom: 15px !important;
}
(function () {
if (!document.querySelector(".eg-container"))
try {
/* main variables */
var debug = 0;
var variation_name = "";
function waitForElement(selector, trigger, delayInterval, delayTimeout) {
var interval = setInterval(function () {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function () {
clearInterval(interval);
}, delayTimeout);
}
function listener() {
window.addEventListener("locationchange", function () {
if (window.location.pathname === "/") {
waitForElement('html body #__next > footer', init, 500, 15000);
} else {
document.querySelector(".eg-container") && document.querySelector(".eg-container").remove();
}
});
history.pushState = ((f) =>
function pushState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("pushstate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.pushState);
history.replaceState = ((f) =>
function replaceState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("replacestate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.replaceState);
window.addEventListener("popstate", () => {
window.dispatchEvent(new Event("locationchange"));
});
}
listener();
let egEmail = `<div class="egEmail">
<div class = "egEmailWrapper">
<input class="egEmailField" type="email" id="egEmail" name="email" placeholder ="Email Address">
</div>
<button id="egButton"><span class ="egSubs">Subscribe</span></button>
</div>`;
let egImg = `<svg viewBox="0 0 24 24" class="jsx-2961120705 egSvg"><path d="M16.9372 7.64276L10.8581 14.0556L8.01184 11.2972C7.59017 10.8931 6.9401 10.9107 6.536 11.3324L6.51843 11.3499C6.1319 11.8243 6.16704 12.492 6.60628 12.9312L10.208 16.3924C10.6121 16.7965 11.2622 16.7965 11.6663 16.3924L18.4482 9.27672C18.8698 8.81992 18.8698 8.11713 18.4482 7.6779C18.0616 7.25623 17.394 7.22109 16.9723 7.60762C16.9723 7.60762 16.9547 7.62519 16.9372 7.64276Z" fill="#568fcb" class="jsx-2961120705"></path><path d="M12 0C5.37628 0 0 5.37628 0 12C0 18.6237 5.37628 24 12 24C18.6237 24 24 18.6237 24 12C23.9824 5.37628 18.6237 0 12 0ZM12 21.9092C6.5183 21.9092 2.09078 17.4641 2.09078 12C2.09078 6.53587 6.53587 2.09078 12 2.09078C17.4641 2.09078 21.9092 6.53587 21.9092 12C21.9092 17.4641 17.4641 21.9092 12 21.9092Z" fill="#568fcb" class="jsx-2961120705"></path></svg>`;
let egthanks = `
<div class="eg-thanks">
<p>Thank you for subscribing! ${egImg}</p>
</div>`;
let egNewHtml = `<div class="container eg-container">
<div class="egLeft">
<img src="//cdn.optimizely.com/img/8453775962/97f756b64e1141f1bd2068d5d2daeae9.png" alt="">
</div>
<div class="eg-wrapper">
<h1>Stay up to date with Octopart!</h1>
<div class="eg-usps">
<div class="egWrapper">
<div class="egFeatures">
<div class="egIcon">${egImg}</div>
<div class="egPara">Be the first to know updates from trusted distribution partners.</div>
</div>
<div class="egFeatures">
<div class="egIcon">${egImg}</div>
<div class="egPara">Get new blog articles delivered to your inbox.</div>
</div>
<div class="egFeatures">
<div class="egIcon">${egImg}</div>
<div class="egPara">Gain access to great Octopart features!</div>
</div>
</div>
</div>
<div class="eg-box">${egEmail}${egthanks}</div>
<div class="eg-error">
<p>Email address must be valid.</p>
</div>
</div>
</div>`;
function init() {
if (!document.querySelector(".eg-container") && (window.location.pathname === "/")) {
document.querySelector("html body #__next > footer").insertAdjacentHTML("beforebegin", egNewHtml);
let submitBtn = document.querySelector("#egButton");
submitBtn.addEventListener("click", function () {
sendData();
});
}
}
const validateEmail = (email) => {
return email.match(
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
};
function sendData() {
let pageData = JSON.parse(document.querySelector("#__NEXT_DATA__").innerText);
let token = pageData.props.pageProps.session._authentication_token;
const email = document.querySelector(".egEmailField").value;
if (validateEmail(email)) {
var form = new FormData();
form.append('email', email);
form.append("_authentication_token",token);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.querySelector(".egEmailField").value = "";
//console.log("Thanks for joining us!");
document.querySelector("html body .eg-box").classList.add("eg-subs");
}
};
xhttp.open("POST", "https://octopart.com/newsletter", true);
xhttp.send(form);
document.querySelector(".eg-error") && document.querySelector(".eg-error").classList.remove("eg-show-error");
} else {
document.body.classList.add("eg-error-msg");
document.querySelector(".eg-error").classList.add("eg-show-error");
}
}
/* Initialize variation */
if (window.location.pathname === "/") {
waitForElement('html body #__next > footer', init, 100, 15000);
}
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();