This is
THE
CONNECTED
POLICE CAR
ADD TECH TO YOUR CART & POWER UP TO 100%
MXP600 Portable Two-Way Radio
Android Auto Integration (concept)
Thank you for completing your
Connected Police Car solutions
Your brochure is on its way
Thank you for completing your
Connected Police Car solution
Your brochure has been downloaded
console.log("loaded script.js");
var products = {
1: {
id: 1,
// name: "M500 In‑Car Video System",
name: "M500 In-Car Video System",
subTitle: "",
desc: "The M500 in-car video system is a leap forward in real time awareness. It’s not just an eye observing, it’s a brain analyzing, alerting you in real time to threats and objectives.",
shortDesc: "M500",
img: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B6baa329d-986f-4cac-ab9f-76ab943fe5e9%7D_M500.png",
icon: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Bdc0dda45-8610-4f81-8bb2-4531664770fa%7D_Asset_21.png",
iconBlue: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Bef9a3bcb-9c1c-48ec-b438-e80945f3ebf6%7D_Asset_14.png",
addedToCart: false,
owned: false,
powerUps: [3, 5, 2],
pdfs: []
},
2: {
id: 2,
name: "MXM7000 Mobile Radio",
subTitle: "",
desc: "The MXM7000 TETRA/LTE Mobile Radio serves as a hub for all your in-vehicle critical voice and broadband data communication requirements. With a range of installation options, the MXM7000 is ready for action.",
shortDesc: "MXM7000",
img: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Beb901584-a792-47fb-9c48-01c938437440%7D_MXM7000.png",
icon: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B694e5251-b78f-4815-8af6-96cf07ff6938%7D_Asset_15.png",
iconBlue: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Bd10ef749-26da-4bbc-9726-93b27c11655f%7D_Asset_8.png",
addedToCart: false,
owned: false,
powerUps: [4, 6, 1],
pdfs: []
},
3: {
id: 3,
name: "VideoManager",
subTitle: "",
desc: "VideoManager is a fully customisable digital evidence management solution. It lets you prepare, process and share high-quality video evidence from your suite of body-worn cameras and in-car video systems.",
shortDesc: "VideoManager",
img: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B63faaccb-84c4-4d03-8403-4fa22bfd49e0%7D_VideoManager.png",
icon: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Bbb7fb535-80bf-4da2-a359-7e8e5f875ec7%7D_Asset_20.png",
iconBlue: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B8e8eccaa-28ea-4cd2-a00d-117e3c2b8adf%7D_Asset_13.png",
addedToCart: false,
owned: false,
powerUps: [1],
pdfs: []
},
4: {
id: 4,
name: "VB400 Body-Worn Camera",
subTitle: "",
desc: "The VB400 is the next generation of body-worn camera technology. With rugged build quality, high performance, and multiple ways to connect, you’ll be ready to take control of every situation.",
shortDesc: "VB400",
img: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Bc51f1f05-5e10-41a3-83b8-995c318354e0%7D_VB400.png",
icon: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B56bf43d0-cbd3-428e-9036-8eb0eff4d16c%7D_Asset_17.png",
iconBlue: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Bdebe6dc3-51a0-4a3c-a866-d949c32df323%7D_Asset_10.png",
addedToCart: false,
owned: false,
powerUps: [2],
pdfs: []
},
5: {
id: 5,
name: "L5M Mobile ANPR",
subTitle: "",
desc: "The L5M mobile license plate recognition system is a high-performance solution for those who want to maximize detections and data collection to ensure their officers are the safest and most productive on the road.",
shortDesc: "L5M",
img: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B6436f426-0a24-4490-acb5-dba430fb14f1%7D_L5M.png",
icon: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Be445ecc5-94c9-4448-8fa8-f71fe894eee9%7D_Asset_19.png",
iconBlue: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B79bf4c42-6f91-454b-af30-ac4d6d9b21ed%7D_Asset_12.png",
addedToCart: false,
owned: false,
powerUps: [1],
pdfs: []
},
6: {
id: 6,
name: "MXP600 Portable Two-Way Radio",
subTitle: "",
desc: "The MXP600 is a fully capable TETRA device that is future-ready for the support of 3GPP MCX services over broadband.",
shortDesc: "MXP600",
img: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Bc7754c24-66ae-44b2-9619-d4d3412d4373%7D_MXP600.png",
icon: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B814d9502-0af7-42d8-bf05-06e4a832630a%7D_Asset_18.png",
iconBlue: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B35982231-288d-45bd-a85c-ec03e3666d95%7D_Asset_11.png",
addedToCart: false,
owned: false,
powerUps: [2],
pdfs: []
},
7: {
id: 7,
name: "Android Auto Integration (concept)",
subTitle: "",
desc: "Android Auto integration with MXM7000 enables hands-free operation and uninterrupted two-way radio communication while on the move. This integration lets you harness your vehicle’s existing controls and audio system to simplify installation of the MXM7000.",
shortDesc: "",
img: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B38805185-6a1a-4df4-b047-d4ab8a090b83%7D_Asset_28.png",
videoImage: "https://images.campaignresources.motorolasolutions.com/Web/MotorolaSolutionsInc/{d4b48f8f-362a-4a7f-82ff-f5c52f330caa}_Android_Auto_Integration_Animation_V2.mp4",
icon: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Ba365ceae-b8a9-492e-8c97-c284af9945a2%7D_Asset_16.png",
iconBlue: "https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7Bdd1c2f1d-a72a-410b-bea3-e53c3a3a1f17%7D_Asset_9.png",
addedToCart: false,
owned: false,
powerUps: [2],
pdfs: []
}
};
function getProductCount() {
return Object.keys(products).length;
}
function setCustomScrollers() {
$(".custom-scroller").mCustomScrollbar({
scrollbarPosition: "inside",
theme: "inset-2",
scrollInertia: 500,
advanced: { autoScrollOnFocus: true },
});
}
function renderPowerUps(productDetails) {
var powerupsBlocks = "";
productDetails.powerUps.forEach(function (powerUpId) {
var powerupDetails = products[powerUpId];
powerupsBlocks += `
<div class="powerup powerup-${powerupDetails.id}">
<hr />
<div class="current-product">
<div class="icon-container">
<img src="${productDetails.icon}" alt="product icon" />
</div>
<!-- /.icon-container -->
<p class="product-name">${productDetails.name}</p>
<!-- /.product-name -->
</div>
<!-- /.current-product -->
<div class="powerup-product">
<div class="icon-container">
<img src="${powerupDetails.iconBlue}" alt="product icon" />
</div>
<!-- /.icon-container -->
<p class="product-name">${powerupDetails.shortDesc}</p>
<!-- /.product-name -->
</div>
<!-- /.powerup-product -->
<div class="powerup-add-btn">
<div class="add-btn ${powerupDetails.addedToCart ? "d-none" : ""}" onclick="addToCart(${powerupDetails.id},this)">
<button data-uet='{"link-type":"button","link-label":"${powerupDetails.name.replace("‑", "-")} - add","link-url":"@add product","link-place":"1","restriction":"public","cname":"add product","page-area":"12"}'>
<div class="add-icon-container">
<img src="https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B45b99068-7df8-46d3-aa1a-7a7bc8dfc2cd%7D_circleStar.png" alt="add to cart" />
</div>
<!-- /.add-icon-container -->
<p>Add</p>
</button>
</div>
<!-- /.add-btn -->
<div class="remove-btn ${powerupDetails.addedToCart ? "" : "d-none"}">
<button>
<div class="remove-icon-container">
<img src="https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B45b99068-7df8-46d3-aa1a-7a7bc8dfc2cd%7D_circleStar.png" alt="diable add to cart" />
</div>
<!-- /.remove-icon-container -->
<p>Add</p>
</button>
</div>
<!-- /.remove-btn-->
</div>
<!-- /.powerup-add-btn -->
</div>
<!-- /.powerup powerup-${productDetails.id} -->
`;
});
return powerupsBlocks;
}
function renderProduct(productId) {
var productDetails = products[productId];
var topBlock = `
<div class="product-img product-img-${productId}">
<img src="${productDetails.img}" alt="product image" />
</div>
`;
if (typeof productDetails.videoImage !== "undefined") {
topBlock = `
<div class="product-img">
<video src="${productDetails.videoImage}" autoplay loop muted alt="product video" playsinline/>
</div>
`;
}
var productBlock = `
${topBlock}
<!-- /.product-img -->
<div class="product-details">
<div class="top">
<div class="product-icon">
<img src="${productDetails.icon}" alt="product icon" />
</div>
<!-- /.product-icon -->
<div class="product-title ${typeof productDetails.extraClass != "undefined" ? productDetails.extraClass : ""}">
<h1>${productDetails.name}</h1>
<p>${productDetails.subTitle}</p>
</div>
<!-- /.product-title -->
</div>
<!-- /.top -->
<div class="bottom">
<div class="product-desc">
<p>
${productDetails.desc}
</p>
</div>
<!-- /.product-desc -->
</div>
<!-- /.bottom -->
</div>
<!-- /.product-details -->
<div class="add-btn ${productDetails.addedToCart ? "d-none" : ""}" onclick="addToCart(${productDetails.id},this)">
<button data-uet='{"link-type":"button","link-label":"${productDetails.name.replace("‑", "-")} - add","link-url":"@add product","link-place":"1","restriction":"public","cname":"add product","page-area":"12"}'>
<img src="https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B45b99068-7df8-46d3-aa1a-7a7bc8dfc2cd%7D_circleStar.png" alt="add to cart" />
Add
</button>
</div>
<div class="remove-btn ${productDetails.addedToCart ? "" : "d-none"}">
<button>
<img src="https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B45b99068-7df8-46d3-aa1a-7a7bc8dfc2cd%7D_circleStar.png" alt="disable add to cart" />
Add
</button>
</div>
<!-- /.add-btn -->
<hr />
<div class="product-powerups">
<div class="powerup-title">
<h3>power up</h3>
<h4>With Connected Patrol Car Integrations</h4>
</div>
<!-- /.powerup-title -->
${renderPowerUps(productDetails)}
</div>
<!-- /.product-powerups -->
`;
return productBlock;
}
function distanceBetweenElements(elementOne, elementTwo) {
let distance = -1;
const x1 = elementOne.offset().top;
const y1 = elementOne.offset().left;
const x2 = elementTwo.offset().top;
const y2 = elementTwo.offset().left;
const xDistance = x1 - x2;
const yDistance = y1 - y2;
distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
return distance;
}
function renderConnection(productId) {
var productDetails = products[productId];
var powerupsConnection = ``;
console.log("productId", productId);
productDetails.powerUps.forEach(function (powerupId) {
var distance = distanceBetweenElements($(`.product-${productId}`), $(`.product-${powerupId}`));
var dx = $(`.product-${powerupId}`).offset().left - $(`.product-${productId}`).offset().left;
var dy = $(`.product-${powerupId}`).offset().top - $(`.product-${productId}`).offset().top;
var ang = (Math.atan2(dy, dx) * 180) / Math.PI;
powerupsConnection += `
<hr style="transform: rotate(${ang}deg); width: ${distance}px;"/>
`;
});
$(`.products-dots-container .product-${productId} .powerups-connections`).html(powerupsConnection);
}
function loadProductDetails(productId) {
$(`.products-dots-container .powerups-connections`).html("");
var $productBlock = $(".desc-blocks-container .product-block");
var renderProductBlock = renderProduct(productId);
renderConnection(productId);
$productBlock.html(renderProductBlock);
}
function activateGoldenAnimation(flag) {
$('#goldenVideo').removeClass('d-none');
$('#goldenVideoMobile').removeClass('d-none');
var goldenAnimationCar = document.getElementById("goldenVideo");
var goldenAnimationCarMobile = document.getElementById("goldenVideoMobile");
if (flag) {
$(".desc-blocks-container .close-btn").trigger("click");
$("#blocks-containter").addClass("golden-animation-activate");
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
console.log("Safari");
$("#blocks-containter").addClass('safari');
} else {
console.log("not Safari");
}
goldenAnimationCar.play();
goldenAnimationCarMobile.play();
playSounds('golden-sound');
setTimeout(() => {
$('#goldenVideo').addClass('d-none');
$('#goldenVideoMobile').addClass('d-none');
}, 5000);
return;
}
$("#blocks-containter").removeClass("golden-animation-activate").removeClass("safari");
document.documentElement.style.setProperty("--color-from", "#6096d7");
document.documentElement.style.setProperty("--color-to", "#435cb6");
}
var cartCounter = 0;
function addToCart(productId, elem) {
var productDetails = products[productId];
if (!productDetails.addedToCart) {
productDetails.addedToCart = true;
cartCounter++;
$(".menu-container .num-cart-items p").text(cartCounter);
playSounds('add-to-cart');
}
if (elem != undefined) {
$(elem).addClass("d-none").parent().find("> .remove-btn").removeClass("d-none");
}
$(`.products-dots-container .product-${productId}`).addClass("inCart");
var currectPercentage = $(".percentage-container .percentage .num").text();
currectPercentage = parseFloat(currectPercentage) + 15;
currectPercentage = currectPercentage > 100 ? 100 : currectPercentage;
$(".percentage-container .percentage .num").text(currectPercentage);
console.log("cartCounter", cartCounter);
if (cartCounter == getProductCount()) {
activateGoldenAnimation(true);
}
// fixStartLocation();
updateFormInputs();
}
function updateFormInputs(){
var productsSelected = "";
for(i in products){
if(products[i].addedToCart){
productsSelected += products[i].name + ";";
}
}
var productsSelectedEdited = productsSelected.slice(0, -1)
$('[name="Product_Information"]').val(productsSelectedEdited);
$("[name=brochureUrl]").val(generateBrochureUrl());
}
function generateBrochureUrl() {
items = [];
itemsName = [];
for (product in products) {
product = products[product];
if (product.addedToCart) {
items.push(product.id);
itemsName.push(product.name);
}
}
$('[name="Product_Information"]').val(itemsName.join(";"));
var brochureUrl = items.join("X");
return "https://eumeainfo.motorolasolutions.com/connected_police_car_brochure?brochure=" + brochureUrl;
}
function removeFromCart(productId, elem) {
var productDetails = products[productId];
if (elem != undefined) {
$(elem).addClass("d-none").parent().find("> .add-btn").removeClass("d-none");
}
$(`.cart-block .selected-product.selected-${productId}`).fadeOut(500);
$(`.products-dots-container .product-${productId}`).removeClass("inCart");
if (productDetails.addedToCart) {
productDetails.addedToCart = false;
cartCounter--;
$(".menu-container .num-cart-items p").text(cartCounter);
var currectPercentage = $(".percentage-container .percentage .num").text();
currectPercentage = parseFloat(currectPercentage) - 15;
currectPercentage = currectPercentage < 0 ? 0 : currectPercentage;
$(".percentage-container .percentage .num").text(currectPercentage);
}
if (cartCounter == 6) {
activateGoldenAnimation(false);
}
updateCartStars();
updateBrochureUET();
$("[name=brochureUrl]").val(generateBrochureUrl());
}
function setScrollerToTop() {
$(".custom-scroller").mCustomScrollbar("scrollTo", "top", {
scrollInertia: 0,
scrollEasing: "linear",
});
}
function updateProductOwned(elem, productId) {
var productDetails = products[productId];
if ($(elem).find("input").prop("checked")) {
productDetails.owned = true;
} else {
productDetails.owned = false;
}
updateBrochureUET();
}
function constructCartProduct(productId) {
var productDetails = products[productId];
var cartProduct = `
<div class="selected selected-${productId} selected-product">
<hr />
<div class="part left-part">
<div class="product-img">
<img src="${productDetails.img}" alt="product image" />
</div>
<!-- /.product-img -->
<div class="product-details">
<div class="product-icon">
<img src="${productDetails.icon}" alt="product icon" />
</div>
<!-- /.product-icon -->
<div class="product-title">
<h1>${productDetails.name}</h1>
<p>${productDetails.subTitle}</p>
</div>
<!-- /.product-title -->
</div>
<!-- /.product-details -->
</div>
<!-- /.part left-part -->
<div class="part right-part">
<div class="remove-product-btn" onclick="removeFromCart(${productId})" data-uet='{"link-type":"button","link-label":"${productDetails.name.replace("‑", "-")} - remove","link-url":"@remove product","link-place":"1","restriction":"public","cname":"remove product","page-area":"12"}'>
<img src="https://images.campaignresources.motorolasolutions.com/EloquaImages/clients/MotorolaSolutionsInc/%7B7f1fa90d-19d1-4c89-9b13-80a1a7eded88%7D_MSWD02-close-btn.png" alt="remove product img" />
<p>
Remove
</p>
</div><!-- /.remove-product-btn -->
<div class="owned-checkbox-container">
<label class="control control-checkbox" onclick="updateProductOwned(this,${productId})">
<span>Select if you have this</span>
<input type="checkbox" ${productDetails.owned ? "checked" : ""}/>
<div class="control_indicator" data-uet='{"link-type":"button","link-label":"${productDetails.name.replace("‑", "-")} - toggle have this product","link-url":"@toggle have this product","link-place":"1","restriction":"public","cname":"toggle have this product","page-area":"12"}'></div>
</label>
</div><!-- /.owned-checkbox-container -->
</div>
<!-- /.part right-part -->
</div>
<!-- /.selected selected-product -->
`;
return cartProduct;
}
function updateCartStars() {
var starsContainer = $(".stars-container .star");
for (var i = 0; i < starsContainer.length; i++) {
var star = starsContainer[i];
if (i + 1 <= cartCounter) {
$(star).addClass("selected");
} else {
$(star).removeClass("selected");
}
}
if (!cartCounter) {
$(".cart-block .products-cart-container").html("<p>Your cart is empty</p>");
}
}
function createBrochure() {
var confs = [];
for (product in products) {
product = products[product];
if (product.addedToCart) {
confs.push(product);
}
}
generatePdf(confs);
displayThankYouPage(confs);
}
var linkX = 35;
var linkY = 435;
var linkWidth = 160;
var linkHeight = 20;
function loadCartProducts() {
var cartProductsContainer = "";
for (var productId in products) {
if (products[productId].addedToCart) {
cartProductsContainer += constructCartProduct(productId);
}
}
cartProductsContainer += `
<div class="create-brochure-container">
<hr>
<button class="brochure-btn" onclick="openForm()">
<span>
Create Your Brochure
</span>
</button>
</div>
`;
$(".cart-block .products-cart-container").html(cartProductsContainer);
updateCartStars(cartProductsContainer);
}
var pdfLoading = false;
function displayThankYouPage(confs) {
const Cconfs = confs;
activateGoldenAnimation(false);
$('#blocks-containter').addClass('thank-you-page-on');
$('.desc-blocks-container .close-btn').trigger('click');
$('.products-progress').addClass('no-animation');
cartCounter = 0;
updatePercentageUi();
pdfLoading = true;
loadingLoop(Cconfs);
}
function resetPage() {
return;
$('.thank-you-page').removeClass('done');
for (i = 1; i <= getProductCount(); i++) {
products[i].owned = false;
}
$('.remove-product-btn').trigger('click');
cartCounter = 0;
$('.num-cart-items p').text('0');
$('#blocks-containter').removeClass('thank-you-page-on');
}
function openBlock(blockName, moreDetails = "", elem = "") {
if ($(elem).hasClass("selected")) {
return;
}
var $descBlocksClose = $(".desc-blocks-container .close-btn");
var backgroundColor = "rgba(122, 122, 122, 0.95)"; //cart block color
var descClass = "";
if (blockName == ".product-block") {
loadProductDetails(moreDetails);
backgroundColor = `rgba(0, 163, 224, 0.95)`;
var productDetails = products[moreDetails];
$descBlocksClose.attr('data-uet', `{"link-type":"button","link-label":"${productDetails.name.replace("‑", "-")} - close","link-url":"@close product","link-place":"1","restriction":"public","cname":"close product","page-area":"12"}`);
}
if (blockName == ".info-block") {
if ($(blockName)[0].offsetHeight > 0) {
return;
}
backgroundColor = "rgba(40, 40, 40, 0.95)";
$descBlocksClose.attr('data-uet', `{"link-type":"button","link-label":"Close info","link-url":"@close info","link-place":"1","restriction":"public","cname":"close info","page-area":"1"}`);
}
if (blockName == ".cart-block") {
if ($(blockName)[0].offsetHeight > 0) {
return;
}
loadCartProducts();
descClass = 'desc-cart';
$descBlocksClose.attr('data-uet', `{"link-type":"button","link-label":"Close cart","link-url":"@close cart","link-place":"1","restriction":"public","cname":"close cart","page-area":"1"}`);
$(".brochure-btn").attr('data-uet', updateBrochureUET());
}
var $blocksContainer = $(".desc-blocks-container")
.removeClass('desc-product')
.removeClass('desc-info')
.removeClass('desc-cart')
.addClass(descClass);
$blocksContainer.attr("style", `background-color: ${backgroundColor}`);
$blocksContainer.hide();
$blocksContainer.find(".block").hide();
$blocksContainer.trigger("hide");
$blocksContainer.find(blockName).show();
if (elem != "") {
$(elem).addClass("selected");
$(elem).closest(".product").addClass("selected");
}
//this will make scroller reset to top
setTimeout(function () {
$blocksContainer.show();
}, 100);
}
function updateBrochureUET() {
var productsStr = "";
for (var productId in products) {
if (products[productId].addedToCart) {
productsStr += `${products[productId].name.replace("‑", "-")}`;
if (products[productId].owned) {
productsStr += " - owned";
}
productsStr += ", ";
}
}
if (productsStr.length > 2) {
productsStr = productsStr.substring(0, productsStr.length - 2);
}
var uat = `{"link-type":"button","link-label":"create your brochure - ${productsStr}","link-url":"@create your brochure","link-place":"1","restriction":"public","cname":"create your brochure","page-area":"12"}`;
$(".brochure-btn").attr('data-uet', uat);
}
function closeBlock() {
$(`.products-dots-container .powerups-connections`).html("");
var $blocksContainer = $(".desc-blocks-container");
$blocksContainer.hide();
$blocksContainer.trigger("hide");
}
// var myPlayer;
// videojs.getPlayer("video-player").ready(function () {
// myPlayer = this;
// });
// +++ Get, load and play video +++
function changeVideoOld(videoId) {
// Get the video object via the catalot
myPlayer.catalog.getVideo(videoId, function (error, video) {
// Load the video object into the player
myPlayer.catalog.load(video);
});
}
function changeVideo(videoId) {
$(".video-popup iframe").remove();
var videoIframe = `
<iframe width="960" height="540" src="https://www.youtube.com/embed/${videoId}"
title="YouTube video player"></iframe>
`;
$(".video-popup .video-container").append(videoIframe);
}
function openCloseVideoBlock(state, videoId = "", event = false) {
if (state == "open") {
changeVideo(videoId);
$(".video-popup").removeClass("d-none");
return;
}
$(".video-popup").addClass("d-none");
$(".video-popup iframe").remove();
}
function animateText(animationType) {
switch (animationType) {
case 'text1Show':
setTimeout(function () {
$(".car-animation-container .texts-container").addClass("animate-text-1");
}, 50);
break;
case 'text2Show':
$(".car-animation-container .texts-container").removeClass("animate-text-1");
setTimeout(function () {
$(".car-animation-container .texts-container .text-2").css("opacity", "1");
}, 1500);
break;
default:
// code block
}
}
function fixStartLocation() {
$(".star-icon").each(function () {
var star = $(this);
var icon = star.siblings(".icon");
star.css("transform", ``);
if (star.closest(".product-reverse").length == 0) {
var diff = star.offset().top - icon.offset().top + 23;
diff = diff * -1;
star.css("transform", `translateY(${diff}px)`);
}
else {
var diff = star.offset().top - icon.offset().top + icon.outerHeight() - 39;
star.css("transform", `translateY(${diff}px)`);
}
});
}
var lastInteraction = new Date();
$(document)
.ready(function () {
$('body').trigger('click');
setCustomScrollers();
$(".desc-blocks-container").on("hide", function () {
$(".circle.selected").removeClass("selected");
$(".product.selected").removeClass("selected");
});
animateText('text1Show');
// fixStartLocation();
lastInteractionUpdate();
})
.keyup(function (e) {
if (e.key === "Escape") {
openCloseVideoBlock("close");
}
lastInteractionUpdate();
}).scroll(lastInteractionUpdate).mousemove(lastInteractionUpdate).click(lastInteractionUpdate);
function lastInteractionUpdate() {
lastInteraction = new Date();
lastInteraction.setSeconds(lastInteraction.getSeconds() + 15);
}
const registerVideo = (bound, video) => {
bound = document.querySelector(bound);
video = document.querySelector(video);
const scrollVideo = () => {
if (video.duration) {
const distanceFromTop = window.scrollY + bound.getBoundingClientRect().top;
const rawPercentScrolled = (window.scrollY - distanceFromTop) / (bound.scrollHeight - window.innerHeight);
const percentScrolled = Math.min(Math.max(rawPercentScrolled, 0), 1);
var step = 0.01;
if (Math.abs(video.currentTime - video.duration * percentScrolled) > step) {
// video.play();
video.currentTime = video.currentTime > video.duration * percentScrolled ? video.currentTime - step : video.currentTime + step;
} else {
// video.pause();
}
// video.currentTime = video.duration * percentScrolled;
// console.log('video duration', video.duration);
// console.log('video duration* percentScrolled', video.duration* percentScrolled);
}
// requestAnimationFrame(scrollVideo);
};
setInterval(scrollVideo, 1);
// requestAnimationFrame(scrollVideo);
};
// registerVideo("#bound-one", "#bound-one video");
function playVideo(video, part) {
var vid = document.getElementById(video);
if (part == 1) {
vid.play();
setTimeout(function () {
vid.pause();
}, 2000);
} else {
if (vid.paused && !vid.ended) {
vid.play();
setTimeout(function () {
$(vid).parent().fadeOut(500);
}, 2000);
}
// $(vid).fadeOut(3000);
}
}
var part = 1;
function playCarVideo(carId, mobileContidion = true) {
const CcarId = carId;
var vid = document.getElementById(carId);
if (mobileContidion) {
vid.play();
}
if (mobileContidion && mobileCheck()) {
setTimeout(function () {
playCarVideo(CcarId, false);
}, 1500);
return;
}
setTimeout(function () {
// $(vid).parent().css("z-index", "0");
$(".products-dots-container").addClass("top-layer").addClass("show");
}, 2500);
setTimeout(function () {
$(".car-animation-container .grey-bg").addClass("active");
setTimeout(function () {
$(".menu-container,.percentage-container").css("opacity", "1");
}, 500);
$(".car-animation-container .texts-container").addClass("hide");
}, 3000);
setTimeout(function () {
$(vid).parent().css("z-index", "0");
$(".products-dots-container").removeClass("top-layer");
$(".car-animation-container .texts-container").remove();
$(".speedometer-container-mobile").addClass("show");
$(".speedometer-container").addClass("show");
}, 3500);
requestAnimationFrame(function infoBlock() {
if (vid.currentTime > vid.duration - 0.1) {
console.log("openBlock");
if (CcarId == "carVideo" && $(window).width() > 767) {
openBlock('.info-block');
}
else if (CcarId == "carVideoMobile" && $(window).width() <= 767) {
openBlock('.info-block');
}
return;
}
requestAnimationFrame(infoBlock);
});
}
var lastSound = undefined;
function playSounds(sound) {
// $('body').trigger('click');
var newSound;
console.log('play', sound);
var restart = false;
switch (sound) {
case 'car-animation-sound':
newSound = document.getElementById("carAnimationAudio");
break;
case 'golden-sound':
newSound = document.getElementById("goldenAnimationAudio");
break;
case 'car-rev':
newSound = document.getElementById("carRevAudio");
break;
case 'add-to-cart':
restart = true;
newSound = document.getElementById("addToCartAudio");
break;
default:
break;
}
if (lastSound != newSound || newSound.duration == newSound.currentTime || restart) {
if (lastSound) {
if (lastSound.duration != lastSound.currentTime) {
lastSound.pause();
}
lastSound.currentTime = 0;
}
newSound.play();
}
lastSound = newSound;
}
var initiallAnimationStarted = false;
$(".car-animation-container").on("wheel swipe", function (e) {
// playVideo(carVideo,part);
// part++;
// if(part == 50){
// $('body').off('wheel swipe');
// }
playStartAnimations();
$('.arrow-container .arrow').parent().fadeOut(50);
});
$(document).on("touchend", function (e) {
playStartAnimations();
$('.arrow-container .arrow').parent().fadeOut(50);
});
function isIOSDevice() {
return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
}
window.mobileCheck = function () {
var check = false;
(function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
check = check || isIOSDevice();
return check;
};
function playStartAnimations() {
if (initiallAnimationStarted) {
return;
}
initiallAnimationStarted = true;
playCarVideo("carVideo");
playCarVideo("carVideoMobile");
playSounds('car-animation-sound');
setTimeout(function () {
animateText('text2Show');
}, 550);
setTimeout(() => {
$('.carVideoImgFrame').addClass('show');
$('.carVideoMobileImgFrame').addClass('show');
$('.carVideoImgFramePlaceHolder').remove();
}, 3000);
setTimeout(() => {
$('#carVideo').remove();
$('#carVideoMobile').remove();
}, 10000);
}
$(window).on("resize", function () {
var productId = $(".products-dots-container").find(".product.selected").find(".circle").data("id");
oldPercent = -1;
if (productId != undefined) {
renderConnection(productId);
}
});
$('.car-animation-container .arrow-container').on('click', function () {
$(this).fadeOut(50);
playStartAnimations();
});
function addSpeedotmeter(speedomenterContainer, barCount) {
// $(".car-animation-container").hide();
var container = $(speedomenterContainer);
container.append(`<div class="products-progress products-progress-1"></div>`);
var wrapper = container.find(".products-progress-1")[0];
for (let index = 0; index < barCount; index++) {
wrapper.innerHTML += `<i style="--i: ${index};"></i>`;
}
container.append(`<div class="products-progress products-progress-2"></div>`);
var wrapper = container.find(".products-progress-2")[0];
for (let index = 0; index < barCount; index++) {
wrapper.innerHTML += `<i style="--i: ${index};"></i>`;
}
container.append(`<span class="speedometerBotLeft">0%</span>`);
container.append(`<span class="speedometerBotRight">100%</span>`);
}
function updatePercentageUi() {
var percentage = (cartCounter / getProductCount()) * 100;
if (percentage != oldPercent) {
if ($(window).width() > 767) {
setSpeedometerPercentage(oldPercent, percentage, ".speedometer-container", 61);
} else {
setSpeedometerPercentage(oldPercent, percentage, ".speedometer-container-mobile", 25);
}
oldPercent = percentage;
}
};
function optInCustomChanged(elem) {
elem = $(elem);
if (elem.prop("checked")) {
$("[name=emailoptout]").val("on");
$("[name=emailoptin]").val("");
}
else {
$("[name=emailoptout]").val("");
$("[name=emailoptin]").val("on");
}
}
function optInCustomChanged2(elem) {
elem = $(elem);
if (elem.val() == 'Opt In') {
$("[name=emailoptout]").val("");
$("[name=emailoptin]").val("on");
}
else {
$("[name=emailoptout]").val("on");
$("[name=emailoptin]").val("");
}
}
function renderConsent() {
var country = $("form [name=country]").val();
if (!['DE', 'CH', 'AT', 'PL', 'IT', 'CY'].includes(country)) {
$("[name=emailoptout]").val("");
$("[name=emailoptin]").val("on");
return `
<div class="forceFullWidth row custom-checkbox consentContainer">
<input type="checkbox" name="OptInCustom" id="OptInCustom" onChange="optInCustomChanged(this)">
<label class="elq-label" for="OptInCustom">
If you would NOT like to receive Marketing Communications from us then please CHECK THE BOX.
By submitting your personal data using this form, Motorola Solutions may contact you by EMAIL or CALL you to provide UPDATES, PRODUCT NEWS AND PROMOTIONAL MATERIALS.
To understand how Motorola Solutions uses your personal data see the Motorola Solutions <a href="https://www.motorolasolutions.com/en_xu/about/privacy-policy.html" target="_blank" data-uet="{'link-type':'link','link-label':'privacy policy','link-url':'https://www.motorolasolutions.com/en_us/about/privacy-policy.html','link-place':'1','restriction':'public','cname':'wrap-form cta','page-area':'2'}">Privacy Policy</a>.</label>
</div>
`;
}
else {
$("[name=emailoptout]").val("on");
$("[name=emailoptin]").val("");
return `
<div class="forceFullWidth row custom-checkbox consentContainer excludes">
<label class="elq-label">
<div class="field-control-wrapper">
<input type="checkbox" name="OptInCustom" id="OptInCustom">
<select class="form-control" style="width:125px" required="" onChange="optInCustomChanged2(this)">
<option selected="selected" value="">Please Select</option>
<option value="Opt In">Opt In</option>
<option value="Opt Out">Opt Out</option>
</select>
</div>
<span class="spanLabel">
By selecting "Opt-in" and submitting your personal data, you agree that Motorola Solutions may contact you by EMAIL or CALL you to provide UPDATES, PRODUCT NEWS AND PROMOTIONAL MATERIALS.
Select "Opt-out" if you do not wish to be contacted by us. To understand how Motorola Solutions uses your personal data see the Motorola Solutions <a href="https://www.motorolasolutions.com/en_us/about/privacy-policy.html" target="_blank" data-uet="{'link-type':'link','link-label':'privacy policy','link-url':'https://www.motorolasolutions.com/en_xu/about/privacy-policy.html','link-place':'1','restriction':'public','cname':'wrap-form cta','page-area':'2'}">Privacy Policy</a>.</label>
</span>
</div>
`;
}
}
function initForm() {
var hiddenFields = ["source", "medium", "channel", "activity-id", "ga-client-id", "redirect-url", "emailoptout", "emailoptin"]
for (var i = 0; i < hiddenFields.length; i++) {
var field = $('.formContainer [name="' + hiddenFields[i] + '"]');
field.closest('.formContainer .grid-layout-col').closest('.row').hide();
}
$(".formContainer [name=country] option").first().html("Country*");
var butonContainer = $(".formContainer [type='Submit']").closest('.formContainer .grid-layout-col').closest('.row');
butonContainer.addClass("forceFullWidth");
$(renderConsent()).insertBefore(butonContainer);
$("form [name=country]").change(function () {
consentContainer = $(".consentContainer");
$(renderConsent()).insertAfter(consentContainer);
consentContainer.remove();
});
$(".formContainer [type='Submit']").val("REGISTER");
const $formWrapper = $(".formContainer form");
if ($("[name=brochureUrl]").length == 0) {
$formWrapper.prepend(`<input name='brochureUrl' type="hidden"/>`);
}
else{
$formWrapper.prepend($("[name=brochureUrl]"));
}
// Remove default submit event
$formWrapper.removeAttr("onSubmit");
// Change default type of inputs
$('[name="emailAddress"]').attr("type", "email");
$('[name="phone_number"]').parsley({
pattern: "^[0-9]+$",
});
function utagLink() {
if (typeof utag == "undefined") return;
utag.link({
tealium_event: "eloqua form submit",
customer_email: document.getElementsByName("emailAddress")[0].value,
});
}
$formWrapper
.parsley({
required: true,
trigger: "focusout",
errorsWrapper: "<span></span>",
errorTemplate: '<span class="msg-is-invalid"></span>',
excluded: "#honeypotFieldId, input[type=submit], input[type=reset], input[type=checkbox], input[type=hidden], input[name=firstName],input[name=lastName],input[name=company],input[name=busPhone],input[name=emailoptout],input[name=emailoptin], [disabled], :hidden",
})
.on("form:submit", function (e) {
return false;
});
$(".submit-button-style").on("click", function () {
setTimeout(function () {
$('[name="aPACfreetext171"]').val('Completed Cart');
var errors = $(".parsley-error").length;
if(errors == 0){
console.log('Completed Cart');
$('[name="aPACfreetext171"]').val('Completed Cart');
closeForm();
utagLink();
generateBrochure();
$.post($("#form2388").attr("action"), $("#form2388").serialize())
.done(function(data) {
});
}
}, 500);
});
$("[name='redirect-url']").val("https://eumeainfo.motorolasolutions.com/connected_police_car");
}
$(document).ready(function () {
initForm();
if (findGetParameter("openForm") === "true") {
openForm();
}
$("#OptInCustom").trigger("change");
addSpeedotmeter(".speedometer-container", 61);
addSpeedotmeter(".speedometer-container-mobile", 25);
requestAnimationFrame(function animate() {
// console.log('animate');
updatePercentageUi();
if (lastInteraction < new Date()) {
playSounds('car-rev');
// console.log("car - rev");
lastInteractionUpdate()
}
requestAnimationFrame(animate);
});
});
function openForm() {
updateFormInputs();
$(".desc-blocks-container").hide();
$(".formContainerOverlay").fadeIn(500);
$(".formContainer").fadeIn(500);
$('.formContainer input:visible').not("[type='Submit']").val("");
$('.formContainer select:visible').val("");
}
function closeForm() {
$(".formContainerOverlay").fadeOut(500);
$(".formContainer").fadeOut(500);
}
function setSpeedometerPercentage(oldPercent, percent, speedomenterContainer, barCount) {
var r = document.querySelector(":root");
var oldBars = (oldPercent / 100) * barCount;
r.style.setProperty("--base", oldBars);
var percentDemo = (barCount * percent) / 100;
var icons = $(speedomenterContainer).find(".products-progress-1 i");
if (oldPercent > percent) {
icons = $(icons.get().reverse());
}
icons.each(function (index) {
if (oldPercent > percent) {
flag = icons.length - index - 1 < percentDemo;
} else {
flag = index < percentDemo;
}
if (flag) {
$(this).addClass("selected");
$(this).removeClass("selectedRemoved");
} else if ($(this).hasClass("selected")) {
$(this).addClass("selectedRemoved");
$(this).removeClass("selected");
} else {
$(this).removeClass("selected");
$(this).removeClass("selectedRemoved");
}
});
var icons = $(speedomenterContainer).find(".products-progress-2 i");
if (oldPercent > percent) {
icons = $(icons.get().reverse());
}
icons.each(function (index) {
if (oldPercent > percent) {
flag = icons.length - index - 1 < percentDemo;
} else {
flag = index < percentDemo;
}
if (flag) {
$(this).addClass("selected");
$(this).removeClass("selectedRemoved");
} else if ($(this).hasClass("selected")) {
$(this).addClass("selectedRemoved");
$(this).removeClass("selected");
} else {
$(this).removeClass("selected");
$(this).removeClass("selectedRemoved");
}
});
oldPercent = percent;
}
// brochure codes
var productsBrochure = {
1: {
id: 1,
firstIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/f-1.html",
firstIconE: "6240",
secondIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/s-1.html",
secondIconE: "6247",
x: 138,
y: 178,
powerUps: [3, 5, 2],
},
2: {
id: 2,
firstIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/f-2.html",
firstIconE: "6241",
secondIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/s-2.html",
secondIconE: "6248",
x: 235,
y: 200,
powerUps: [4, 6, 1],
},
3: {
id: 3,
firstIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/f-3.html",
firstIconE: "6242",
secondIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/s-3.html",
secondIconE: "6249",
x: 276,
y: 177,
powerUps: [1],
},
4: {
id: 4,
firstIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/f-4.html",
firstIconE: "6243",
secondIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/s-4.html",
secondIconE: "6250",
x: 276,
y: 67,
powerUps: [2],
},
5: {
id: 5,
firstIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/f-5.html",
firstIconE: "6244",
secondIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/s-5.html",
secondIconE: "6251",
x: 210,
y: 38,
powerUps: [1],
},
6: {
id: 6,
firstIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/f-6.html",
firstIconE: "6245",
secondIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/s-6.html",
secondIconE: "6252",
x: 138,
y: 67,
powerUps: [2],
},
7: {
id: 7,
firstIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/f-7.html",
firstIconE: "6246",
secondIcon: "../UK_CPC_PDF_Brochure/PDF/images/base64/s-7.html",
secondIconE: "6253",
x: 180,
y: 200,
powerUps: [2],
},
};
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
}
function generateBrochure() {
console.log("Generating brochure...");
confs = [];
for (var product in products) {
product = products[product];
if (product.addedToCart) {
confs.push(productsBrochure[product.id]);
}
}
console.log(confs);
generatePdf(confs);
displayThankYouPage(confs);
}
var brochureCounter = 0;
function getImageData(url) {
const Curl = url;
return new Promise((resolve, reject) => {
$.get(Curl, function (data) {
data = $(data).filter("pre")[0].innerHTML;
if (window.location.href.includes("stronde")) {
setTimeout(function () {
brochureCounter++;
console.log(brochureCounter);
resolve(data);
}, Math.floor(Math.random() * 5000));
}
else {
brochureCounter++;
console.log(brochureCounter);
resolve(data);
}
});
});
}
function getImageDataFromUrl(url) {
const Curl = url;
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var reader = new FileReader();
reader.onloadend = function () {
brochureCounter++;
resolve(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open("GET", Curl);
xhr.responseType = "blob";
xhr.send();
});
}
function loadingLoop(confs) {
const Cconfs = confs;
if (!pdfLoading) {
$('.products-progress').addClass('no-animation');
// resetPage();
setTimeout(function () {
location.reload(true);
}, 20000);
$('.products-progress').removeClass('no-animation');
cartCounter = getProductCount();
return;
}
if (brochureCounter != 0) {
$('.products-progress').removeClass('no-animation');
}
var total = getProductCount();
var totalImgs = 4;
for (i in Cconfs) {
totalImgs += 2;
}
cartCounter = (brochureCounter / totalImgs) * total;
requestAnimationFrame(function () {
loadingLoop(Cconfs);
});
}
const { jsPDF } = window.jspdf;
async function generatePdf(confs) {
console.log('brochure confs',confs);
var pageMapping = {
1: "6236",
2: "6237",
3: "6238",
4: "6239",
};
for (i in pageMapping) {
pageMapping[i] = "https://eumeainfo.motorolasolutions.com/LP=" + pageMapping[i];
}
if (window.location.href.includes("stronde")) {
pageMapping = {
1: "../UK_CPC_PDF_Brochure/PDF/images/base64/1.html",
2: "../UK_CPC_PDF_Brochure/PDF/images/base64/2.html",
3: "../UK_CPC_PDF_Brochure/PDF/images/base64/3.html",
4: "../UK_CPC_PDF_Brochure/PDF/images/base64/4.html",
};
}
// console.log(confs);
var W = (612 * 2.777777777777778) / 4;
var H = (858 * 2.777777777777778) / 4;
var Imagescale = 4.2;
var Xoffset = 20;
var Yoffset = 215;
var XoffsetS = 20;
var YoffsetS = 365;
var imageW = 200 / Imagescale;
var imageH = 600 / Imagescale;
var actualW = imageW * 1.2;
brochureCounter = 0;
var pages = [];
var firstImages = [];
var secondImages = [];
pages.push(getImageData(pageMapping["1"]));
pages.push(getImageData(pageMapping["2"]));
pages.push(getImageData(pageMapping["3"]));
pages.push(getImageData(pageMapping["4"]));
for (var i = 0; i < confs.length; i++) {
if (window.location.href.includes("stronde")) {
firstImages.push(getImageData(confs[i].firstIcon));
secondImages.push(getImageData(confs[i].secondIcon));
} else {
firstImages.push(getImageData("https://eumeainfo.motorolasolutions.com/LP=" + confs[i].firstIconE));
secondImages.push(getImageData("https://eumeainfo.motorolasolutions.com/LP=" + confs[i].secondIconE));
}
}
var doc = new jsPDF({
orientation: "portrait",
unit: "px",
format: [W, H],
});
doc.setLineWidth(0.5);
doc.setDrawColor(0, 163, 224);
for (var i = 0; i < pages.length; i++) {
doc.addImage(await pages[i], "PNG", 0, 0, W, H);
if (i == 1) {
Xoffset = Xoffset + ((7 - firstImages.length) * actualW) / 2;
for (var j = 0; j < firstImages.length; j++) {
var tImg = await firstImages[j];
doc.addImage(tImg, "PNG", Xoffset + actualW * j, Yoffset, imageW, imageH);
}
}
if (i == 2) {
XoffsetS = XoffsetS + ((7 - firstImages.length) * actualW) / 2;
for (var j = 0; j < secondImages.length; j++) {
var tImgObj = confs[j];
var tImg = await secondImages[j];
for (k in tImgObj.powerUps) {
k = tImgObj.powerUps[k];
if (confs.filter((e) => e.id == k).length > 0) {
doc.line(productsBrochure[k].x, productsBrochure[k].y, tImgObj.x, tImgObj.y);
}
}
doc.addImage(tImg, "PNG", XoffsetS + actualW * j, YoffsetS, imageW, imageH);
}
}
if (i == 3) {
var linkX = 160;
var linkY = 407;
var linkWidth = 105;
var linkHeight = 15;
doc.link(linkX, linkY, linkWidth, linkHeight, { url: "https://www.motorolasolutions.com/en_xu/solutions/public-safety/connected-police-officer/the-connected-car-consultation.html?utm_medium=print&utm_source=brochure&utm_campaign=ea_q222_vsa_dc_law_cm_brochure_edm_connected_car" });
// doc.setFillColor(255,255,200);
// doc.rect(linkX, linkY, linkWidth, linkHeight, 'F');
}
if (i != pages.length - 1) {
doc.addPage();
}
}
var documentBlobURL = doc.output("blob");
const a = document.createElement("a");
a.style.display = "none";
document.body.appendChild(a);
var url = window.URL.createObjectURL(documentBlobURL);
a.href=url;
a.setAttribute("download", "Motorola_Solutions_Connected_Police_Car_Brochure.pdf");
setTimeout(function () {
a.click();
document.body.removeChild(a);
}, 500);
pdfLoading = false;
console.log("Brochure created!");
}
//speedometer
const barCount = 61;
var oldPercent = 0;
