');
tblHiderIcon.append(hideIcon);
tblHiderContainer.append(tblHiderIcon);
const tblInstrContainer = $('');
const tblInstrIcons = $('');
const leftClickIcon = $('
');
const plusIcon = $('
');
const scrollIcon = $('
');
const tblInstrText = $('
');
const arText = $('
');
const shareText = $('');
tblInfoItemSharing = $('
');
const tblInfoSharing = $('
');
const tblInfoSharingTitle = $('
Del konfiguration
');
const tblInfoSharingWindow = $('');
infoSharingInput = $('');
tblInfoSharingIco = $('
');
const icoImage = $('
');
tblInfoSharingIco.on('click', function () {
copyToClipboard();
});
tblInfoSharingIco.append(icoImage);
tblInfoSharingWindow.append(infoSharingInput, tblInfoSharingIco);
tblInfoSharing.append(tblInfoSharingTitle, tblInfoSharingWindow);
tblInfoItemSharing.append(tblInfoSharing);
tblInfoItemQr = $('
');
tblInfoSharingIco.on('click', function () {
copyToClipboard();
});
tblInfoSharingIco.append(icoImage);
tblInfoSharingWindow.append(infoSharingInput, tblInfoSharingIco);
tblInfoSharing.append(tblInfoSharingTitle, tblInfoSharingWindow);
tblInfoItemSharing.append(tblInfoSharing);
tblInfoItemQr = $('');
const tblQr = $('
');
const tblQrTitle = $('
Placer dit bord direkte i dit hjem med vores AR-funktion. Scan QR-koden med din telefon. AR-funktionen åbner på din telefon inden for 1-3 sekunder.
');
const tblQrImg = $('');
qrcode = $('');
tblQrImg.append(qrcode);
tblQr.append(tblQrTitle, tblQrImg);
tblInfoItemQr.append(tblQr);
tblInfoClose = $('
');
const closeImage = $('
');
tblInfoClose.append(closeImage);
tblInfoClose.on('click', function () {
tblInfo.removeClass('active');
tblInfoItemQr.removeClass('active');
tblInfoItemSharing.removeClass('active');
});
const tblInfoOverlay = $('');
tblInfoOverlay.on('click', function () {
tblInfo.removeClass('active');
tblInfoItemQr.removeClass('active');
tblInfoItemSharing.removeClass('active');
});
tblInfoBox.append(tblInfoItemSharing, tblInfoItemQr, tblInfoClose);
tblInfo.append(tblInfoBox, tblInfoOverlay);
const productType3DModel = $('.product-type-3dmodel');
productType3DModel.append(tblInfo);
});
// Bottom text with a delivery info
jQuery(document).ready(function ($) {
const shippingNoteElement = document.querySelector('.shipping-note');
const shippingNoteElementText = shippingNoteElement.textContent;
const acceptTextBlock = $('');
const acceptText = $('');
$('.tbl-accept-text').text(shippingNoteElementText);
acceptTextBlock.append(acceptText);
const productContainer = $(".product-type-3dmodel");
const addToCartButton = productContainer.find("button.single_add_to_cart_button");
if (addToCartButton.length > 0) {
acceptTextBlock.insertAfter(addToCartButton);
}
});
}
function ChangeUI() {
}
//#endregion
//#region URL PARAMETERS
// eslint-disable-next-line no-unused-vars
function PrepareURLParameters() {
}
function GetParameterSplitString(array) {
if (array.length == 0) { return; }
var params = [];
for (let index = 0; index < array.length; index++) {
params.push(array[index].splitValue);
}
return new RegExp(`${params.join("|")}`)
}
function ReadURLParameters(callback) {
const queryString = window.location.search;
console.log(queryString);
const urlParams = new URLSearchParams(queryString);
// const keys = urlParams.keys();
// const values = urlParams.values();
const entries = urlParams.entries();
var parseParams = "";
for (const entry of entries) {
if (entry[0] == parametersKey) {
parseParams = entry[1];
break;
}
}
console.log(parseParams);
if (!parseParams?.trim()) {
paramsLoaded = true;
EmptyURLParams();
if (callback != null) { callback(); }
return;
}
const paramArray = parseParams.split(GetParameterSplitString(SharedParameterList));
if (paramArray.length == 0) {
paramsLoaded = true;
EmptyURLParams();
if (callback != null) { callback(); }
return;
}
console.log(paramArray);
for (let index = 0; index < SharedParameterList.length; index++) {
const element = SharedParameterList[index];
let arrayValue;
switch (element.type) {
case 'string':
element.value = paramArray[index + 1]?.toString();
break;
case 'int':
element.value = parseInt(paramArray[index + 1]);
break;
case 'float':
element.value = parseFloat(paramArray[index + 1]);
break;
case 'array-string':
arrayValue = paramArray[index + 1]?.toString();
element.value = GetSharedArrayValues(arrayValue, 'string');
break;
case 'array-int':
arrayValue = paramArray[index + 1]?.toString();
element.value = GetSharedArrayValues(arrayValue, 'int');
break;
case 'array-float':
arrayValue = paramArray[index + 1]?.toString();
element.value = GetSharedArrayValues(arrayValue, 'float');
break;
}
if (element.id == "qr") {
qrScaned = element.value;
}
}
if (callback != null) callback();
CheckQRMobile();
}
function GetSharedArrayValues(arrayValue, type) {
var output = [];
if (arrayValue == undefined || arrayValue == null) { return output; }
if (arrayValue == "") { return output; }
var options = arrayValue.split('-');
for (let i = 0; i < options.length; i++) {
switch (type) {
case 'string':
output.push(options[i]);
break;
case 'int':
output.push(parseInt(options[i]));
break;
case 'float':
output.push(parseFloat(options[i]));
break;
}
}
return output;
}
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
async function ApplyURLParameters(callback = () => { }) {
let ar_order_link;
if (paramsLoaded) {
ar_order_link = jQuery("input[name='ar_order_link']");
if (ar_order_link != null) {
ar_order_link[0].value = GetURLWithParameters();
}
return;
}
for (const target of mainGroups) {
const group = target.group;
for (let i = 0; i < SharedParameterList.length; i++) {
const SharedParameterListItem = SharedParameterList[i];
if (SharedParameterListItem.groupIds == undefined || SharedParameterListItem.groupIds == null) { continue; }
if (!SharedParameterListItem.groupIds.includes(target.id)) { continue; }
if (SharedParameterListItem.applyURLActionReturn) {
if (SharedParameterListItem.applyURLAction != null) {
SharedParameterListItem.applyURLAction();
}
await delay(50);
continue;
}
let option;
switch (target.type) {
case "select":
case "select_no_photo":
if (SharedParameterListItem.value == "") { break; }
option = group.options.find(o => o.component_id == SharedParameterListItem.value);
if (option == null) { break; }
if (option.element.classList.contains("active")) { break; }
for (let i = 0; i < group.options.length; i++) {
const element = group.options[i];
if (element.element.classList.contains("active")) {
element.element.classList.remove("active");
}
}
if (group.element.classList.contains("disabled")) {
option.element.classList.add("active");
break;
}
option.element.click();
break;
case "range":
group.input.value = SharedParameterListItem.value;
group.input.dispatchEvent(new Event('input'));
ChangeRangeOptions(target.id);
break;
case "checkbox":
for (let i = 0; i < SharedParameterListItem.value.length; i++) {
const value = SharedParameterListItem.value[i];
if (value == "1") {
group.options[i].active = true;
group.options[i].element.classList.add("active");
//group.options[i].element.click();
}
}
break;
case "number":
group.input.value = SharedParameterListItem.value;
group.input.dispatchEvent(new Event('input'));
break;
case "dropdown":
if (SharedParameterListItem.value == "") { break; }
group.select.value = SharedParameterListItem.value;
for (let index = 0; index < group.options.length; index++) {
const element = group.options[index];
if (element.component_id == SharedParameterListItem.value) {
if (!element.element.classList.contains("active")) {
element.element.classList.add("active");
}
} else {
if (element.element.classList.contains("active")) {
element.element.classList.remove("active");
}
}
}
if (!group.element.classList.contains("disabled")) {
let additionalGroup = jQuery('#' + target.id);
afterFilterAction(additionalGroup);
}
break;
case "text":
break;
}
if (SharedParameterListItem.applyURLAction != null) {
SharedParameterListItem.applyURLAction();
}
}
await delay(50);
}
ar_order_link = jQuery("input[name='ar_order_link']");
if (ar_order_link != null) {
ar_order_link[0].value = GetURLWithParameters();
}
paramsLoaded = true;
setIsLoaderActive(false);
callback();
}
function WriteURLParameters() {
if (!paramsLoaded) { return; }
qrScaned = 0;
if (!delayForWriteURL) {
delayForWriteURL = true;
promiseDelay(500, function () {
history.pushState(null, 'byMAIN', GetURLWithParameters());
var ar_order_link = jQuery("input[name='ar_order_link']");
if (ar_order_link != null) {
ar_order_link[0].value = GetURLWithParameters();
}
if (formElement != null) {
formElement.action = GetURLWithParameters();
}
delayForWriteURL = false;
});
}
}
function GetParametersString() {
parametersValue = "";
for (let index = 0; index < SharedParameterList.length; index++) {
const element = SharedParameterList[index];
if (element.value == undefined || element.value == null) { continue; }
switch (element.type) {
case 'array-string':
case 'array-int':
case 'array-float':
parametersValue += element.splitValue;
for (var i = 0; i < element.value.length; i++) {
if (i == element.value.length - 1) {
parametersValue += element.value[i];
} else {
parametersValue += element.value[i] + '-';
}
}
break;
default:
parametersValue += element.splitValue + element.value;
break;
}
}
//You can do something here...
return parametersValue;
}
function GetURLWithParameters() {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
// const keys = urlParams.keys();
// const values = urlParams.values();
const entries = urlParams.entries();
var url = location.protocol + '//' + location.host + location.pathname + "?";
var configEmpty = true;
for (const entry of entries) {
if (entry[0] == parametersKey) {
url += parametersKey + "=" + GetParametersString() + "&";
configEmpty = false;
} else {
url += entry[0] + "=" + entry[1] + "&";
}
}
if (configEmpty) {
url += parametersKey + "=" + GetParametersString();
}
if (url.endsWith("&")) {
url = url.substring(0, url.length - 1);
}
return url;
}
//#endregion
//#region CLIPBOARD
const copyToClipboard = function () {
var aux = document.createElement("input");
aux.setAttribute("value", infoSharingInput[0].value);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
//#endregion
//#region QR
// eslint-disable-next-line no-unused-vars
function PrepareQR() {
}
function CreateQR() {
var qr = qrcode[0];
if (qr == null) { return; }
while (qr.hasChildNodes()) {
qr.removeChild(qr.lastChild);
}
qrScaned = 1;
var uri = GetURLWithParameters();
var encoded = encodeURIComponent(uri);
var qrImg = new Image();
//qrImg.src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encoded;
qrImg.src = 'https://quickchart.io/qr?text=' + encoded + "&size=200";
qrImg.addEventListener("load", () => {
qr.appendChild(qrImg);
});
}
async function CheckQRMobile() {
// eslint-disable-next-line no-unused-vars
await waitFor(_ => loaded === true);
if (qrScaned == 1) {
if (GetMobileOperatingSystem() == "Android" || GetMobileOperatingSystem() == "iOS") {
OpenAR();
}
qrScaned = 0;
}
}
//#endregion
//#region AR
function PrepareAR() {
jQuery(document).ready(function ($) {
const body = $("body");
modelViewer = $('');
const arPromt = $('
');
tblInfoClose.append(closeImage);
tblInfoClose.on('click', function () {
tblInfo.removeClass('active');
tblInfoItemQr.removeClass('active');
tblInfoItemSharing.removeClass('active');
});
const tblInfoOverlay = $('');
tblInfoOverlay.on('click', function () {
tblInfo.removeClass('active');
tblInfoItemQr.removeClass('active');
tblInfoItemSharing.removeClass('active');
});
tblInfoBox.append(tblInfoItemSharing, tblInfoItemQr, tblInfoClose);
tblInfo.append(tblInfoBox, tblInfoOverlay);
const productType3DModel = $('.product-type-3dmodel');
productType3DModel.append(tblInfo);
});
// Bottom text with a delivery info
jQuery(document).ready(function ($) {
const shippingNoteElement = document.querySelector('.shipping-note');
const shippingNoteElementText = shippingNoteElement.textContent;
const acceptTextBlock = $('');
const acceptText = $('');
$('.tbl-accept-text').text(shippingNoteElementText);
acceptTextBlock.append(acceptText);
const productContainer = $(".product-type-3dmodel");
const addToCartButton = productContainer.find("button.single_add_to_cart_button");
if (addToCartButton.length > 0) {
acceptTextBlock.insertAfter(addToCartButton);
}
});
}
function ChangeUI() {
}
//#endregion
//#region URL PARAMETERS
// eslint-disable-next-line no-unused-vars
function PrepareURLParameters() {
}
function GetParameterSplitString(array) {
if (array.length == 0) { return; }
var params = [];
for (let index = 0; index < array.length; index++) {
params.push(array[index].splitValue);
}
return new RegExp(`${params.join("|")}`)
}
function ReadURLParameters(callback) {
const queryString = window.location.search;
console.log(queryString);
const urlParams = new URLSearchParams(queryString);
// const keys = urlParams.keys();
// const values = urlParams.values();
const entries = urlParams.entries();
var parseParams = "";
for (const entry of entries) {
if (entry[0] == parametersKey) {
parseParams = entry[1];
break;
}
}
console.log(parseParams);
if (!parseParams?.trim()) {
paramsLoaded = true;
EmptyURLParams();
if (callback != null) { callback(); }
return;
}
const paramArray = parseParams.split(GetParameterSplitString(SharedParameterList));
if (paramArray.length == 0) {
paramsLoaded = true;
EmptyURLParams();
if (callback != null) { callback(); }
return;
}
console.log(paramArray);
for (let index = 0; index < SharedParameterList.length; index++) {
const element = SharedParameterList[index];
let arrayValue;
switch (element.type) {
case 'string':
element.value = paramArray[index + 1]?.toString();
break;
case 'int':
element.value = parseInt(paramArray[index + 1]);
break;
case 'float':
element.value = parseFloat(paramArray[index + 1]);
break;
case 'array-string':
arrayValue = paramArray[index + 1]?.toString();
element.value = GetSharedArrayValues(arrayValue, 'string');
break;
case 'array-int':
arrayValue = paramArray[index + 1]?.toString();
element.value = GetSharedArrayValues(arrayValue, 'int');
break;
case 'array-float':
arrayValue = paramArray[index + 1]?.toString();
element.value = GetSharedArrayValues(arrayValue, 'float');
break;
}
if (element.id == "qr") {
qrScaned = element.value;
}
}
if (callback != null) callback();
CheckQRMobile();
}
function GetSharedArrayValues(arrayValue, type) {
var output = [];
if (arrayValue == undefined || arrayValue == null) { return output; }
if (arrayValue == "") { return output; }
var options = arrayValue.split('-');
for (let i = 0; i < options.length; i++) {
switch (type) {
case 'string':
output.push(options[i]);
break;
case 'int':
output.push(parseInt(options[i]));
break;
case 'float':
output.push(parseFloat(options[i]));
break;
}
}
return output;
}
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
async function ApplyURLParameters(callback = () => { }) {
let ar_order_link;
if (paramsLoaded) {
ar_order_link = jQuery("input[name='ar_order_link']");
if (ar_order_link != null) {
ar_order_link[0].value = GetURLWithParameters();
}
return;
}
for (const target of mainGroups) {
const group = target.group;
for (let i = 0; i < SharedParameterList.length; i++) {
const SharedParameterListItem = SharedParameterList[i];
if (SharedParameterListItem.groupIds == undefined || SharedParameterListItem.groupIds == null) { continue; }
if (!SharedParameterListItem.groupIds.includes(target.id)) { continue; }
if (SharedParameterListItem.applyURLActionReturn) {
if (SharedParameterListItem.applyURLAction != null) {
SharedParameterListItem.applyURLAction();
}
await delay(50);
continue;
}
let option;
switch (target.type) {
case "select":
case "select_no_photo":
if (SharedParameterListItem.value == "") { break; }
option = group.options.find(o => o.component_id == SharedParameterListItem.value);
if (option == null) { break; }
if (option.element.classList.contains("active")) { break; }
for (let i = 0; i < group.options.length; i++) {
const element = group.options[i];
if (element.element.classList.contains("active")) {
element.element.classList.remove("active");
}
}
if (group.element.classList.contains("disabled")) {
option.element.classList.add("active");
break;
}
option.element.click();
break;
case "range":
group.input.value = SharedParameterListItem.value;
group.input.dispatchEvent(new Event('input'));
ChangeRangeOptions(target.id);
break;
case "checkbox":
for (let i = 0; i < SharedParameterListItem.value.length; i++) {
const value = SharedParameterListItem.value[i];
if (value == "1") {
group.options[i].active = true;
group.options[i].element.classList.add("active");
//group.options[i].element.click();
}
}
break;
case "number":
group.input.value = SharedParameterListItem.value;
group.input.dispatchEvent(new Event('input'));
break;
case "dropdown":
if (SharedParameterListItem.value == "") { break; }
group.select.value = SharedParameterListItem.value;
for (let index = 0; index < group.options.length; index++) {
const element = group.options[index];
if (element.component_id == SharedParameterListItem.value) {
if (!element.element.classList.contains("active")) {
element.element.classList.add("active");
}
} else {
if (element.element.classList.contains("active")) {
element.element.classList.remove("active");
}
}
}
if (!group.element.classList.contains("disabled")) {
let additionalGroup = jQuery('#' + target.id);
afterFilterAction(additionalGroup);
}
break;
case "text":
break;
}
if (SharedParameterListItem.applyURLAction != null) {
SharedParameterListItem.applyURLAction();
}
}
await delay(50);
}
ar_order_link = jQuery("input[name='ar_order_link']");
if (ar_order_link != null) {
ar_order_link[0].value = GetURLWithParameters();
}
paramsLoaded = true;
setIsLoaderActive(false);
callback();
}
function WriteURLParameters() {
if (!paramsLoaded) { return; }
qrScaned = 0;
if (!delayForWriteURL) {
delayForWriteURL = true;
promiseDelay(500, function () {
history.pushState(null, 'byMAIN', GetURLWithParameters());
var ar_order_link = jQuery("input[name='ar_order_link']");
if (ar_order_link != null) {
ar_order_link[0].value = GetURLWithParameters();
}
if (formElement != null) {
formElement.action = GetURLWithParameters();
}
delayForWriteURL = false;
});
}
}
function GetParametersString() {
parametersValue = "";
for (let index = 0; index < SharedParameterList.length; index++) {
const element = SharedParameterList[index];
if (element.value == undefined || element.value == null) { continue; }
switch (element.type) {
case 'array-string':
case 'array-int':
case 'array-float':
parametersValue += element.splitValue;
for (var i = 0; i < element.value.length; i++) {
if (i == element.value.length - 1) {
parametersValue += element.value[i];
} else {
parametersValue += element.value[i] + '-';
}
}
break;
default:
parametersValue += element.splitValue + element.value;
break;
}
}
//You can do something here...
return parametersValue;
}
function GetURLWithParameters() {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
// const keys = urlParams.keys();
// const values = urlParams.values();
const entries = urlParams.entries();
var url = location.protocol + '//' + location.host + location.pathname + "?";
var configEmpty = true;
for (const entry of entries) {
if (entry[0] == parametersKey) {
url += parametersKey + "=" + GetParametersString() + "&";
configEmpty = false;
} else {
url += entry[0] + "=" + entry[1] + "&";
}
}
if (configEmpty) {
url += parametersKey + "=" + GetParametersString();
}
if (url.endsWith("&")) {
url = url.substring(0, url.length - 1);
}
return url;
}
//#endregion
//#region CLIPBOARD
const copyToClipboard = function () {
var aux = document.createElement("input");
aux.setAttribute("value", infoSharingInput[0].value);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
//#endregion
//#region QR
// eslint-disable-next-line no-unused-vars
function PrepareQR() {
}
function CreateQR() {
var qr = qrcode[0];
if (qr == null) { return; }
while (qr.hasChildNodes()) {
qr.removeChild(qr.lastChild);
}
qrScaned = 1;
var uri = GetURLWithParameters();
var encoded = encodeURIComponent(uri);
var qrImg = new Image();
//qrImg.src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encoded;
qrImg.src = 'https://quickchart.io/qr?text=' + encoded + "&size=200";
qrImg.addEventListener("load", () => {
qr.appendChild(qrImg);
});
}
async function CheckQRMobile() {
// eslint-disable-next-line no-unused-vars
await waitFor(_ => loaded === true);
if (qrScaned == 1) {
if (GetMobileOperatingSystem() == "Android" || GetMobileOperatingSystem() == "iOS") {
OpenAR();
}
qrScaned = 0;
}
}
//#endregion
//#region AR
function PrepareAR() {
jQuery(document).ready(function ($) {
const body = $("body");
modelViewer = $('');
const icoImage = $('
');
arPromt.append(icoImage);
modelViewer.append(arPromt);
body.append(modelViewer);
modelViewer[0].addEventListener('ar-status', (event) => {
if (event.detail.status == 'session-started') {
arPromt[0].style.display = "block";
} else if (event.detail.status == 'not-presenting') {
arPromt[0].style.display = "none";
modelViewer[0].resetScene();
}
else {
arPromt[0].style.display = "none";
}
});
});
}
async function OpenAR() {
ComputeMorphedAttributes();
ImportScene(scene);
}
function OpenARorQR() {
if (GetMobileOperatingSystem() == "Android" || GetMobileOperatingSystem() == "iOS") {
OpenAR();
return;
}
CreateQR();
tblInfo.toggleClass('active');
tblInfoItemQr.toggleClass('active');
tblInfoItemSharing.removeClass('active');
}
//IMPORT
async function ImportScene(newScene) {
// eslint-disable-next-line no-unused-vars
const value = await modelViewer[0].importScene(newScene);
modelViewer[0].activateAR();
}
//#endregion
//Create your regions with the functions you need. Past projects can be used as an example.
//#region STØRRELSE
function PrepareStorrelse() {
}
function ChangeStorrelse() {
var componentTitleG2 = document.querySelector("#group-34 > div.ar_filter_options_result > div.ar_filter_options_result_list > div > div.ar_filter_options_result_name");
if (componentTitleG2 != null) componentTitleG2.textContent = (componentTitleG2.textContent.replace(' cm', '') + " cm");
jQuery(".ar_summary .ar_summary_list .ar_summary_list_item .ar_summary_list_group").each(function () {
if (jQuery(this).text() == "Størrelse") {
var componentTitle = jQuery(this).parent().find(".ar_summary_list_components .ar_summary_list_components_component_title");
if (componentTitle.text() == "100" || componentTitle.text() == "100 cm") {
componentTitle.text("100 cm (min. 98 cm)");
} else {
componentTitle.text(componentTitle.text().replace(' cm', '') + " cm");
}
}
});
}
function ChangeStorrelseDiameter() {
var value = parseFloat(SharedParameterList[1].value);
//Camara min-max distance position
controls.minDistance = value / 100 / 2.2 * 2 + 0.15;
controls.maxDistance = (value / 100 / 2.2 * 2 + 0.15) * 2;
}
//#endregion
//#region BENTYPE
function PrepareBentype() {
}
function ChangeBentype() {
var groupBentype = mainGroups.find(g => g.id == "group-2");
var groupRange = mainGroups.find(g => g.id == "group-34");
if (groupBentype == null) { return; }
if (groupRange == null) { return; }
for (let index = 0; index < groupBentype.group.options.length; index++) {
const opt = groupBentype.group.options[index];
if (opt.component_id != SharedParameterList[5].value) { continue; }
for (let i = 0; i < opt.componentOptions.length; i++) {
const component = opt.componentOptions[i];
if (component.targetObject == null) { continue; }
if (groupRange.group.input.value >= 161) {
if (component.targetObject.name.includes("3-pin_A-ben_8x4cm_small") || component.targetObject.name.includes("3-pin_A-ben_12x6cm_small")) {
component.targetObject.visible = false;
}
} else {
if (component.targetObject.name.includes("3-pin_A-ben_8x4cm_big") || component.targetObject.name.includes("3-pin_A-ben_12x6cm_big")) {
component.targetObject.visible = false;
}
}
}
}
}
//#endregion
//#region SHADER
function Shader_ChangeVertexToWorldpos(object) {
promiseDelayShaderSettings(500, object, () => {
if (object.isMesh) {
if (isWorldposVertexShaderEnabled) {
if (object.material) {
if (object.material.name.includes("_Z")) {
object.material.onBeforeCompile = (shader) => {
shader.vertexShader = shader.vertexShader.replace('#include \n', '').replace('#include ', 'vec4 worldPosition = vec4( transformed, 1.0 );\n#ifdef USE_INSTANCING\nworldPosition = instanceMatrix * worldPosition;\n#endif\nworldPosition = modelMatrix * worldPosition;\nvUv = (uvTransform * vec3(worldPosition.xz, 1)).xy;');
};
}
else if (object.material.name.includes("_Y")) {
object.material.onBeforeCompile = (shader) => {
shader.vertexShader = shader.vertexShader.replace('#include \n', '').replace('#include ', 'vec4 worldPosition = vec4( transformed, 1.0 );\n#ifdef USE_INSTANCING\nworldPosition = instanceMatrix * worldPosition;\n#endif\nworldPosition = modelMatrix * worldPosition;\nvUv = (uvTransform * vec3(worldPosition.xy, 1)).xy;');
};
}
else if (object.material.name.includes("_X")) {
object.material.onBeforeCompile = (shader) => {
shader.vertexShader = shader.vertexShader.replace('#include \n', '').replace('#include ', 'vec4 worldPosition = vec4( transformed, 1.0 );\n#ifdef USE_INSTANCING\nworldPosition = instanceMatrix * worldPosition;\n#endif\nworldPosition = modelMatrix * worldPosition;\nvUv = (uvTransform * vec3(worldPosition.yz, 1)).xy;');
};
}
object.material.needsUpdate = true;
}
}
}
});
}
function promiseDelayShaderSettings(time, object, callback) {
if (time == null) {
time = 2000;
}
return new Promise((resolve) => {
setTimeout(() => {
resolve('resolved');
if (object.material.map == null) {
promiseDelayShaderSettings(time, object, callback);
} else {
if (callback != null) {
callback();
}
}
}, time);
});
}
//#endregion
//#region MORPHS
function InitMorphModel(model) {
var BufferGeometryUtils_script = document.createElement('script');
BufferGeometryUtils_script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/three@0.147/examples/js/utils/BufferGeometryUtils.js');
document.body.appendChild(BufferGeometryUtils_script);
model.traverse((object) => {
if (object.isMesh) {
Shader_ChangeVertexToWorldpos(object);
if (object.morphTargetDictionary != null) {
for (const [key, value] of Object.entries(object.morphTargetDictionary)) {
var morph = {
name: key,
object: object,
key: value,
value: value
};
if (!morphs.includes(morph)) {
morphs.push(morph);
}
}
}
}
});
PrepareGlobalMorphs();
}
function PrepareGlobalMorphs() {
globalMorphs = [];
for (let index = 0; index < morphs.length; index++) {
const morph = morphs[index];
var hasMorph = false;
for (let m = 0; m < globalMorphs.length; m++) {
const globalMorph = globalMorphs[m];
if (globalMorph.name != morph.name) { continue; }
hasMorph = true;
break;
}
if (!hasMorph) {
globalMorphs.push(morph);
}
}
promiseDelay(1000, () => {
CheckAssign(SharedParameterList[9]);
});
}
// eslint-disable-next-line no-unused-vars
function ChangeObjectMorph(morph, inputvalue) {
if (morph.object == null) { return; }
if (morph.object.isMesh) {
if (morph.object.morphTargetInfluences != null) {
morph.object.morphTargetInfluences[morph.key] = inputvalue;
}
}
}
function ChangeGlobalMorph(morphName, inputvalue) {
for (let index = 0; index < morphs.length; index++) {
const morph = morphs[index];
if (morph.name != morphName) { continue; }
if (morph.object == null) { continue; }
if (!morph.object.isMesh) { continue; }
if (morph.object.morphTargetInfluences == null) { continue; }
morph.object.morphTargetInfluences[morph.key] = inputvalue;
}
}
function ComputeMorphedAttributes() {
for (let index = 0; index < morphs.length; index++) {
const morph = morphs[index];
var computeMorphedAttributes = THREE.BufferGeometryUtils.computeMorphedAttributes(morph.object);
morph.object.geometry.computeMorphedAttributes = computeMorphedAttributes;
}
}
function animateMorph(
morphName,
valueStart,
valueEnd,
timeInterval = 200,
steps = 25,
callback = () => { }
) {
const stepDuration = timeInterval / steps;
const stepValue = (valueEnd - valueStart) / steps;
let currentValue = valueStart;
let completedSteps = 0;
for (let i = 1; i <= steps; i++) {
setTimeout(() => {
ChangeGlobalMorph(morphName, currentValue);
currentValue += stepValue;
completedSteps++;
if (completedSteps === steps) {
ChangeGlobalMorph(morphName, valueEnd);
callback();
}
}, i * stepDuration);
}
}
//#endregion
//#region ANIMATION
// ANIMATION OF MODEL - "SCALING"
function animateScale(
model,
duration = 500,
startScale = 0,
endScale = 1,
timingKeyword = 'ease-in',
callback = () => { }
) {
function timingFunction(progress) {
switch (timingKeyword) {
case 'ease-in':
return progress * progress;
case 'ease-out':
return 1 - Math.pow(1 - progress, 2);
case 'ease-in-out':
return progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
default:
return progress;
}
}
let startTime = null;
function animate(currentTime) {
if (!startTime) {
startTime = currentTime;
}
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const easedProgress = timingFunction(progress);
const interpolatedScale = startScale + (endScale - startScale) * easedProgress;
model.scale.set(interpolatedScale, interpolatedScale, interpolatedScale);
if (progress < 1) {
requestAnimationFrame(animate);
} else {
model.scale.set(endScale, endScale, endScale);
callback();
}
}
requestAnimationFrame(animate);
}
//#endregion
//#region ADDITIONAL PLANK (INSERTING)
function insertPlank(SharedParameterListItem) {
const groupIds = SharedParameterListItem.groupIds;
if (!isPlankInserted) {
ChangeGlobalMorph('falling', 0);
ChangeGlobalMorph('insert', 0);
} else {
for (let i = 0; i < groupIds.length; i++) {
const groupId = groupIds[i];
const parentGroup = mainGroups.find(element => element.id == groupId);
if (!parentGroup) { return; }
const group = parentGroup.group;
if (!group.element.classList.contains("disabled")) {
switch (groupId) {
case 'group-35': //* Round
case 'group-40':
case 'group-36':
case 'group-41':
case 'group-37':
case 'group-42':
case 'group-38':
case 'group-43':
case 'group-39':
console.log("🚀 ~ insertPlank ~ insertedPlankRoundSize:", insertedPlankRoundSize);
console.log("🚀 ~ insertPlank ~ SharedParameterList[9].value:", SharedParameterListItem.value);
if (SharedParameterListItem.value == '0') {
animateRoundOff(groupId);
} else {
animateRoundOn(SharedParameterListItem.value, groupId);
}
break;
default:
break;
}
}
}
shouldAnimate = false;
}
}
function animateRoundOn(plankSize, groupId) {
checkRails();
const selectElement = jQuery(`#${groupId}`).find('select');
const summaryBlock = jQuery('.summary.entry-summary');
let startValue = 0;
if (isPlankRoundInserted) {
// startValue = (plankSize == '2') ? 0.5 : 1;
switch (insertedPlankRoundSize) {
case '1':
startValue = 0.25;
break;
case '2':
startValue = 0.5;
break;
case '3':
startValue = 0.75;
break;
case '4':
startValue = 1;
break;
default:
break;
}
}
// const targetValue = (plankSize == '1') ? 0.5 : 1;
let targetValue = 0;
switch (plankSize) {
case '1':
targetValue = 0.25;
break;
case '2':
targetValue = 0.5;
break;
case '3':
targetValue = 0.75;
break;
case '4':
targetValue = 1;
break;
default:
break;
}
if (shouldAnimate) {
selectElement.prop('disabled', true);
summaryBlock.css('pointer-events', 'none');
isAnimation = true;
checkRails();
ChangeGlobalMorph('falling', 0);
promiseDelay(100, () => {
animateMorph('insert', startValue, targetValue + 0.1 * targetValue, 700, 50); // top, rails, legs
});
promiseDelay(1500, () => {
animateMorph('falling', 0, 1, 500, 30);
});
promiseDelay(2000, () => {
animateMorph('insert', targetValue + 0.1 * targetValue, targetValue, 300, 20); // top, rails, legs
isAnimation = false;
selectElement.prop('disabled', false);
summaryBlock.css('pointer-events', 'auto');
});
}
if (!isAnimation && isPlankInserted) {
checkRails();
ChangeGlobalMorph('falling', 1); // additional plank
ChangeGlobalMorph('insert', targetValue); // top, rails, legs
}
isPlankRoundInserted = true;
insertedPlankRoundSize = plankSize;
isPlankInserted = true;
}
function animateRoundOff(groupId) {
isPlankInserted = false;
isPlankRoundInserted = false;
const selectElement = jQuery(`#${groupId}`).find('select');
const summaryBlock = jQuery('.summary.entry-summary');
const targetValue = 0
// const startValue = (insertedPlankRoundSize == '1') ? 0.5 : 1;
let startValue = 0;
switch (insertedPlankRoundSize) {
case '1':
startValue = 0.25;
break;
case '2':
startValue = 0.5;
break;
case '3':
startValue = 0.75;
break;
case '4':
startValue = 1;
break;
default:
break;
}
insertedPlankRoundSize = 0;
if (shouldAnimate) {
selectElement.prop('disabled', true);
summaryBlock.css('pointer-events', 'none');
isAnimation = true;
ChangeGlobalMorph('falling', 0);
animateMorph('insert', startValue, targetValue, 300, 20, checkRails()); // top, rails, legs
promiseDelay(600, () => {
isAnimation = false;
selectElement.prop('disabled', false);
summaryBlock.css('pointer-events', 'auto');
});
} else {
ChangeGlobalMorph('falling', 0); // additional plank
ChangeGlobalMorph('insert', targetValue); // top, rails, legs
checkRails();
}
}
function checkInsertedPlanks(SharedParameterListItem) {
const groupIds = SharedParameterListItem.groupIds;
for (let i = 0; i < groupIds.length; i++) {
const groupId = groupIds[i];
const parentGroup = mainGroups.find(element => element.id == groupId);
if (!parentGroup) { return; }
const group = parentGroup.group;
if (!group.element.classList.contains("disabled")
&& group.activeOption !== 0
&& !group.options[group.activeOption].element.classList.contains("disabled")
) {
isPlankInserted = true;
return;
}
}
isPlankInserted = false;
CheckAssign(SharedParameterList[9]);
}
function checkInsertedPlanksSummary(SharedParameterListItem) {
const groupIds = SharedParameterListItem.groupIds;
for (let i = 0; i < groupIds.length; i++) {
const group = jQuery(`#${groupIds[i]}`);
if (!group.hasClass('disabled')) {
const selectElement = jQuery(`#${groupIds[i]}`).find('select');
const componentTitle = jQuery(`#${groupIds[i]}`).find('.ar_filter_options_result_name');
const selectedOptionText = selectElement.find('option:selected').text();
componentTitle.text(selectedOptionText);
break;
}
}
}
function checkDiameterForInsertedPlanks(diameter) {
if (diameter < 120 || diameter > 160) {
const groupIds = SharedParameterList[9].groupIds;
for (let i = 0; i < groupIds.length; i++) {
const groupId = groupIds[i];
const parentGroup = mainGroups.find(element => element.id == groupId);
if (!parentGroup) { return; }
const group = parentGroup.group;
const selectElement = group.element.querySelector('select');
selectElement.value = "0";
group.activeOption = 0;
let event = new Event('change');
selectElement.dispatchEvent(event);
isPlankInserted = false;
isPlankRoundInserted = false;
ChangeGlobalMorph('insert', 0); // top, rails, legs
ChangeGlobalMorph('falling', 0); // additional plank
needUpdateInsert = false;
}
}
}
function checkRails() {
// const diameter = SharedParameterList[1].value;
// if (diameter > 115 && diameter < 165 && isPlankInserted) {
for (let i = 0; i < railsNames.length; i++) {
const meshName = railsNames[i];
SetObjectVisibility(meshName, false);
}
// }
}
function checkKantForInserts() {
const diameter = SharedParameterList[1].value;
if (diameter > 115 && diameter < 165 && isPlankInserted) {
console.log("🚀 ~ checkKantForInserts ~ diameter, kant:", diameter, SharedParameterList[2].value);
if (SharedParameterList[2].value == '0') {
insertPlanksNames20.forEach(name => SetObjectVisibility(name, false));
} else if (SharedParameterList[2].value == '1') {
insertPlanksNames90.forEach(name => SetObjectVisibility(name, false));
}
}
}
function roundDefaultCheck() {
if (SharedParameterList[9].value == '1' || SharedParameterList[9].value == '2') {
const parentGroup = mainGroups.find(element => element.id == 'group-39');
if (parentGroup == null) { return; }
const group = parentGroup.group;
for (let o = 0; o < group.options.length; o++) {
const opt = group.options[o];
if (opt.element.classList.contains("active")) {
group.activeOption = o;
}
}
}
checkInsertedPlanks(SharedParameterList[9]);
insertPlank(SharedParameterList[9]);
}
function toggleOptionDisplayForLegs() {
if (SharedParameterList[9].value == '1' || SharedParameterList[9].value == '2') {
const group = jQuery('#group-2');
const options = group.find('.option.disabled');
options.css('display', 'none');
} else {
const group = jQuery('#group-2');
const options = group.find('.option');
options.each(function() {
if (jQuery(this).attr('style') && jQuery(this).css('display') === 'none') {
jQuery(this).removeAttr('style');
}
});
}
}
//#endregion
');
arPromt.append(icoImage);
modelViewer.append(arPromt);
body.append(modelViewer);
modelViewer[0].addEventListener('ar-status', (event) => {
if (event.detail.status == 'session-started') {
arPromt[0].style.display = "block";
} else if (event.detail.status == 'not-presenting') {
arPromt[0].style.display = "none";
modelViewer[0].resetScene();
}
else {
arPromt[0].style.display = "none";
}
});
});
}
async function OpenAR() {
ComputeMorphedAttributes();
ImportScene(scene);
}
function OpenARorQR() {
if (GetMobileOperatingSystem() == "Android" || GetMobileOperatingSystem() == "iOS") {
OpenAR();
return;
}
CreateQR();
tblInfo.toggleClass('active');
tblInfoItemQr.toggleClass('active');
tblInfoItemSharing.removeClass('active');
}
//IMPORT
async function ImportScene(newScene) {
// eslint-disable-next-line no-unused-vars
const value = await modelViewer[0].importScene(newScene);
modelViewer[0].activateAR();
}
//#endregion
//Create your regions with the functions you need. Past projects can be used as an example.
//#region STØRRELSE
function PrepareStorrelse() {
}
function ChangeStorrelse() {
var componentTitleG2 = document.querySelector("#group-34 > div.ar_filter_options_result > div.ar_filter_options_result_list > div > div.ar_filter_options_result_name");
if (componentTitleG2 != null) componentTitleG2.textContent = (componentTitleG2.textContent.replace(' cm', '') + " cm");
jQuery(".ar_summary .ar_summary_list .ar_summary_list_item .ar_summary_list_group").each(function () {
if (jQuery(this).text() == "Størrelse") {
var componentTitle = jQuery(this).parent().find(".ar_summary_list_components .ar_summary_list_components_component_title");
if (componentTitle.text() == "100" || componentTitle.text() == "100 cm") {
componentTitle.text("100 cm (min. 98 cm)");
} else {
componentTitle.text(componentTitle.text().replace(' cm', '') + " cm");
}
}
});
}
function ChangeStorrelseDiameter() {
var value = parseFloat(SharedParameterList[1].value);
//Camara min-max distance position
controls.minDistance = value / 100 / 2.2 * 2 + 0.15;
controls.maxDistance = (value / 100 / 2.2 * 2 + 0.15) * 2;
}
//#endregion
//#region BENTYPE
function PrepareBentype() {
}
function ChangeBentype() {
var groupBentype = mainGroups.find(g => g.id == "group-2");
var groupRange = mainGroups.find(g => g.id == "group-34");
if (groupBentype == null) { return; }
if (groupRange == null) { return; }
for (let index = 0; index < groupBentype.group.options.length; index++) {
const opt = groupBentype.group.options[index];
if (opt.component_id != SharedParameterList[5].value) { continue; }
for (let i = 0; i < opt.componentOptions.length; i++) {
const component = opt.componentOptions[i];
if (component.targetObject == null) { continue; }
if (groupRange.group.input.value >= 161) {
if (component.targetObject.name.includes("3-pin_A-ben_8x4cm_small") || component.targetObject.name.includes("3-pin_A-ben_12x6cm_small")) {
component.targetObject.visible = false;
}
} else {
if (component.targetObject.name.includes("3-pin_A-ben_8x4cm_big") || component.targetObject.name.includes("3-pin_A-ben_12x6cm_big")) {
component.targetObject.visible = false;
}
}
}
}
}
//#endregion
//#region SHADER
function Shader_ChangeVertexToWorldpos(object) {
promiseDelayShaderSettings(500, object, () => {
if (object.isMesh) {
if (isWorldposVertexShaderEnabled) {
if (object.material) {
if (object.material.name.includes("_Z")) {
object.material.onBeforeCompile = (shader) => {
shader.vertexShader = shader.vertexShader.replace('#include