// Elements
const preparatoryTasksElm = document.getElementById('preparatory-tasks');
const folderNavElm = document.getElementById('folderNav');
const theHeadlineElm = document.getElementById('theheadline');
const theNameElm = document.getElementById('thename');
const bricksElm = document.getElementById('bricks');
const resultsElm = document.getElementById('results');
// "Global" variables
let selected = [];
let name = '';
let pages = null;
let storedJSON = {};
let url = '';
// Substitution cipher methods
let chars = [ 'L', 'e', 'K', 'g', 'Q', 'M', 't', 'F', 'W', 'c', 'p', 'Ç', 'J', 'ä', 'ø', 'N', ' ', 'ç', 'Z', 'P', 'q', 'Å', 'Æ', 'j', 'B', 'D', 'm', 'd', 'h', 'Y', 'Ø', 'X', 'å', 'n', '.', 'o', 'H', '-', 'a', 'E', 'R', 'Ä', 's', 'Ö', 'f', 'y', ')', 'i', 'æ', 'v', 'C', 'A', '—', 'T', '+', 'V', '(', '/', ';', 'G', 'u', 'Œ', 'ß', 'r', '–', 'I', 'k', '&', 'ö', 'l', 'U', 'z', 'œ', 'S', 'b', ',', 'x', 'w', 'O' ];
const encodeOffset = (i) => (i + 3) % chars.length;
const decodeOffset = (i) => (i - 3 + chars.length) % chars.length;
const transform = (txt, encode) => {
let transformed = '';
for (let i = 0; i < txt.length; i++) {
let c = txt.charAt(i);
let j = chars.indexOf(c);
j = encode ? encodeOffset(j) : decodeOffset(j);
transformed += chars[j];
}
return transformed;
}
const encode = (clear) => transform(clear, true);
const decode = (cipher) => transform(cipher, false);
// URL updater
const setUrl = () => {
url = 'https://lenekobbernagel.com/custom';
if (name !== '' || selected.length !== 0) {
url += '#' + encodeURIComponent(`${selected.join(',')}|${encode(name)}`);
}
};
// URL parser
const parseHash = () => {
let selectedAndName = decodeURIComponent(location.hash.substr(1)).split('|');
selected = selectedAndName[0].split(',').map(e => parseInt(e, 10));
name = decode(selectedAndName[1]);
}
const activateElements = (elm) => {
window.requestAnimationFrame(() => {
let v = elm.querySelectorAll('.sqs-video-wrapper');
v = Array.from(v);
v.forEach((e, i) => {
if (e.hasAttribute('data-html')) {
e.innerHTML = e.getAttribute('data-html');
}
});
let g = elm.querySelectorAll('.image-block-outer-wrapper .thumb-image');
g = Array.from(g);
g.forEach((e, i) => {
if (e.hasAttribute('data-src')) {
e.src = e.getAttribute('data-src');
}
});
let o = elm.querySelectorAll('.overlay');
o = Array.from(o);
o.forEach((e, i) => {
e.addEventListener('click', brickClickHandler.bind(this, parseInt(e.getAttribute('data-index'), 10) + 1));
});
});
};
// Build source and insert in the resultsElm
const buildSource = () => {
console.log('buildSource');
let html = [];
let promises = [];
selected.forEach((index, i) => {
let p = pages.data[index - 1];
if (storedJSON.hasOwnProperty(p.href)) {
html.push(Promise.resolve(storedJSON[p.href]));
} else {
html.push(getJson(p.href).then((result) => {
result = {'page': p, 'html': result.mainContent};
storedJSON[p.href] = result;
return result;
}));
}
});
return Promise.all(html).then((values) => {
let source = name ? `
${ name }
` : '';
source += values.map(e => ``).join('');
resultsElm.innerHTML = source;
activateElements(resultsElm);
});
};
// Brick click handler
const brickClickHandler = (i) => {
console.log('brickClickHandler', i);
if (selected.indexOf(i) !== -1) {
selected.splice(selected.indexOf(i), 1);
} else {
selected.push(i);
}
let tasks = bricks.getElementsByTagName('div');
tasks.forEach(e => {
let index = parseInt(e.getAttribute('data-index'), 10);
if (selected.indexOf(index) !== -1) {
e.classList.add('picked');
} else {
e.classList.remove('picked');
}
});
setUrl();
buildSource().then(addButton);
};
// Name form change handler
const nameInputHandler = (event) => {
name = event.srcElement.value;
setUrl();
buildSource().then(addButton);
};
// Add the button to open the generated page
const addButton = () => {
resultsElm.appendChild(document.createRange().createContextualFragment(``));
};
// XHR get the JSON content of a squarespace page
const getJson = (path) => {
console.log('getJson path', path);
let url = 'https://lenekobbernagel.com';
url += path;
url += '?format=json';
return fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
}
})
.then(response => response.json())
.catch((error) => {
console.error('Error:', error);
});
};
// Extract data about the subpages
const extractPageData = () => {
let data = folderNavElm.getElementsByTagName('a');
data = Array.from(data);
data = data.filter((a, i) => !a.innerHTML.startsWith('⌦'));
data = data.map((a, i) => {
let typeAndText = a.innerHTML.split('@').map(s => s.trim());
return {
'index': i,
'type': typeAndText[0].toLowerCase(),
'text': typeAndText[1],
'href': a.getAttribute('href')
};
});
let byType = {};
let order = []
data.forEach(e => {
if (order.indexOf(e.type) === -1) {
byType[e.type] = [];
order.push(e.type);
}
byType[e.type].push(e);
});
folderNavElm.remove();
return {
data,
order,
byType
};
};
const titleCase = (str) => {
let sentence = str.toLowerCase().split(' ');
for (let i = 0; i < sentence.length; i++) {
sentence[i] = sentence[i][0].toUpperCase() + sentence[i].slice(1);
}
return sentence;
};
// MAIN
window.addEventListener('DOMContentLoaded', (event) => {
pages = extractPageData();
console.log(pages);
// EDIT
if (window.location.pathname === ('/custom/edit')) {
preparatoryTasksElm.classList.add('preparatory-edit');
theHeadlineElm.innerHTML = 'Select elements to Combine';
theNameElm.style.display = 'block';
theNameElm.addEventListener('input', nameInputHandler);
pages.order.forEach((type) => {
let h = document.createElement('h3');
h.innerHTML = titleCase(type);
bricksElm.appendChild(h);
pages.byType[type].forEach((p, i) => {
let b = document.createElement('div');
b.setAttribute('data-index', p.index + 1);
b.setAttribute('data-type', p.type);
b.setAttribute('data-href', p.href);
b.innerHTML = `${p.text}`;
b.addEventListener('click', brickClickHandler.bind(this, p.index + 1));
bricksElm.appendChild(b);
});
});
// DISPLAY
} else {
preparatoryTasksElm.classList.add('preparatory-display');
parseHash();
buildSource();
}
});