Free javascript Hosting


destination.js

Uploaded on Dec 16 2021 00:13 by test

function tsvJSON(tsv) {
const lines = tsv.split("\n");
const result = [];
const headers = lines[0].replace('\r','').split("\t");

for (let i = 1; i < lines.length; i++) {
const obj = {};
const currentline = lines[i].split("\t");
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j].replace('\r','');
}

result.push(obj);
}
return result;
}

async function loadData(destinationID) {
return new Promise(function (resolve, reject) {
var url="https://docs.google.com/spreadsheets/d/1q1YRYi9wWvrERYicPN0YceGWqgOZ3Pb01mBghAmnMMg/export?format=tsv";
const req = new XMLHttpRequest();
req.onload = function() {
if (this.status >= 200 && this.status < 300) {
const thisSheet = this.responseText;
const sheetJSON = tsvJSON(thisSheet);
for (let i = 0; i < sheetJSON.length; i++) {
const item = sheetJSON[i];
if (item.ID === destinationID) {
resolve(JSON.parse(item.VALUE));
}
}
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
}
req.open("GET", url, true);
req.send();
});
}

function buildStatusIcon(status) {
if (status === undefined) {
return;
}

status = parseInt(status);
let reccomendation = '';
if (status === 0) {
reccomendation = 'wait';
} else if (status === 1) {
reccomendation = 'try';
} else if (status === 2) {
reccomendation = 'go';
}

return `
<div class="status-wrapper">
<span class="status-icon ${reccomendation} active">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65">
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="cls-1" d="M32.5,5A27.5,27.5,0,1,1,5,32.5,27.54,27.54,0,0,1,32.5,5m0-5A32.5,32.5,0,1,0,65,32.5,32.5,32.5,0,0,0,32.5,0Z"></path>
<path class="cls-2" d="M32.5,2.5a30,30,0,1,1-30,30,30,30,0,0,1,30-30"></path>
</g>
</g>
</svg>
</span>
</div>
<style type="text/css">.embeddable-destination{max-width:600px;position:relative;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.embeddable-destination a,.embeddable-destination a:visited{color:#fff}.embeddable-destination img{display:block;max-width:100%;width:100%}.embeddable-destination .info{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;flex-direction:column;display:flex;align-items:center;justify-content:center}.embeddable-destination .info .title{flex:1;display:flex;align-items:center;text-shadow:#000 0 0 14px}.embeddable-destination .info .title h3{font-size:1.875rem;line-height:38px;font-weight:700}.embeddable-destination .info .title>*{margin-bottom:0}.embeddable-destination .forecasts{font-size:.8125rem;padding:1em .5em;width:100%;display:flex;flex-direction:row;background-image:linear-gradient(rgba(0,0,0,.6),#000);align-items:center;justify-content:center;text-align:right}@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none){.embeddable-destination .forecasts{background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px)}}.embeddable-destination .circle{margin-left:.1em;transform:scale(.7)}.embeddable-destination .circle:not(:last-child){margin-right:.7em}@media (min-width:460px){.embeddable-destination .forecasts{font-size:.875rem}.embeddable-destination .circle{transform:scale(1);margin-left:.5em}.embeddable-destination .circle:not(:last-child){margin-right:3em}}.status-wrapper.show-outer-ring{border-radius:50%;background-color:rgba(28,28,28,.25);padding:15px;position:relative}.status-icon{z-index:1;position:relative;display:inline-block;vertical-align:middle;width:65px;height:65px;transition:all ease .4s}.status-wrapper.show-outer-ring .status-icon::before{content:'';position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border:10px solid #5ee8ff;border-radius:50%;opacity:.36;box-shadow:0 0 20px 15px rgb(0 0 0)}.status-wrapper.show-outer-ring .status-icon.go::before{border-color:#85e4b4;opacity:.4225}.status-wrapper.show-outer-ring .status-icon.wait::before{border-color:#ffb359;opacity:.3}.status-icon svg{width:65px;height:65px}.status-icon .cls-1{fill:#757575}.status-icon.wait .cls-2{stroke:#ffb458}.status-icon.wait.active .cls-2{stroke-dashoffset:170}.status-icon.try .cls-2{stroke:#5ef0ff}.status-icon.try.active .cls-2{stroke-dashoffset:95}.status-icon.go .cls-2{stroke:#86e4b4}.status-icon.go.active .cls-2{stroke-dashoffset:30}.status-icon .cls-2{fill:none;stroke-miterlimit:10;stroke-width:5px;stroke-dasharray:190;stroke-dashoffset:190;stroke-linecap:round;transition:all ease .4s}.status-icon:after{position:absolute;top:calc(50% + 3px);left:50%;transform:translate(-50%,-10px);font-size:15px;line-height:1;color:#fff}.status-icon.wait:after{content:'WAIT'}.status-icon.try:after{content:'TRY'}.status-icon.go:after{content:'GO'}.status-wrapper:hover .status-icon.wait:after{color:#ffb458;text-shadow:0 0 10px rgba(255,180,88,.7)}.status-wrapper:hover .status-icon.try:after{color:#5ef0ff;text-shadow:0 0 10px rgba(94,240,255,.7)}.status-wrapper:hover .status-icon.go:after{color:#86e4b4;text-shadow:0 0 10px rgba(134,228,180,.7)}</style>
`;
}

function buildWidget(destinationData) {
return `
<a target="_parent" href="${destinationData.link}">
<picture>
<source
src="${destinationData.image}"
media="screen and (min-width: 1025px)"
>
<img
srcset="${destinationData.image}"
alt="{{:image.alt_text_raw}}{{%image.alt_text_raw}}{{?:image.title}}{{%image.title}}{{?:title}}{{%title}}{{/}}"
>
</picture>
<div class="info">
<div class="title">
<h3>${destinationData.title}</h3>
</div>
<div class="forecasts">
<div>
${destinationData.day_1_date}
</div>
<div class="circle">
${buildStatusIcon(destinationData.day_1_recommendation)}
</div>
<div>
${destinationData.day_2_date}
</div>
<div class="circle">
${buildStatusIcon(destinationData.day_2_recommendation)}
</div>
<div>
${destinationData.day_3_date}
</div>
<div class="circle">
${buildStatusIcon(destinationData.day_3_recommendation)}
</div>
</div>
</div>
</a>
`;
}

async function init () {
const widgetFrame = document.getElementById('embeddable-destination');
const destinationID = widgetFrame.getAttribute('data-destination');

const destinationData = await loadData(destinationID);

const widgetHTML = buildWidget(destinationData);

console.log(widgetHTML,'widgetHTML');
// document.querySelector('head').innerHTML += '<link rel="stylesheet" href="https://norwaylights-norway.cms30.localhost:4443/includes/public/managed/v_61d0eb09_ab06df8f/core/plugins/common/virtuals/css/widget_embeddable_norwaylights_destination.css" type="text/css"/>';
// document.querySelector('head').innerHTML += '<link rel="stylesheet" href="https://www.norway-lights.com/includes/public/managed/v_61d0eb09_ab06df8f/core/plugins/nav/virtuals/css/norway_lights.css" type="text/css"/>';

widgetFrame.innerHTML = widgetHTML;
}

window.onload = () => {
init();
};

Back to list