whs.js/examples/assets/js/script.js
2018-05-19 13:25:58 +03:00

130 lines
3.6 KiB
JavaScript

/* eslint-disable */
var iframe = document.querySelector('iframe');
var hash = window.location.hash.slice(1).split('#');
var link = window.location.hash.length > 3 ? hash[0] + '/' : '/Basic/Hello_World/';
console.log(link);
iframe.src = rootPath + link;
iframe.id = 'content';
document.getElementById('panel').appendChild(iframe);
iframe.onload = function () {
var moveChildren = [];
for (var child of iframe.contentWindow.document.querySelector('#explanation').childNodes)
moveChildren.push(child);
for (var child of moveChildren)
document.querySelector('#explanation-holder').appendChild(child);
};
const tutorialOpen = document.getElementById('tutorial-open');
const tutorialLink = '#' + link.slice(0, -1) + '#tutorial';
// tutorialOpen.href = tutorialLink;
tutorialOpen.dataset.tutorialLink = tutorialLink;
for (const link of document.querySelectorAll('[data-updatable]')) {
link.addEventListener('click', function(e) {
var tutorial = window.location.hash.indexOf('tutorial') > 0;
if (link.dataset.tutorialLink) {
e.preventDefault();
window.location.hash = tutorial
? link.dataset.tutorialLink.replace('#tutorial', '')
: link.dataset.tutorialLink;
}
if (link.dataset.tutorialLink && link.dataset.tutorialLink.indexOf(hash[0]) > 0) return;
window.location.reload();
});
}
// setTimeout(function () {
// document.body.dataset.exampleReady = true;
// }, 2000);
if (hash[1] && hash[1] === 'tutorial') {
document.querySelector('#explanation').removeAttribute('hidden');
}
const filter = document.getElementById('filter');
const items = document.querySelectorAll('[data-item]');
// tutorialOpen.addEventListener('click', () => {
// if (tutorialOpen.href.indexOf(''))
// })
filter.addEventListener('keyup', function (e) {
const text = e.target.value;
items.forEach(item => {
// console.log([item]);
if (text === '' || item.innerText.toLowerCase().indexOf(text.toLowerCase()) >= 0) {
item.parentNode.style.display = 'block';
} else {
item.parentNode.style.display = 'none';
}
})
});
// SIDEBAR
// if (isMobile) {
// new Slideout({
// panel: document.getElementById('panel'),
// menu: document.getElementById('sidebar'),
// padding: 320,
// tolerance: 70
// });
// }
// Filter
// const filter = document.getElementById('filter');
// const items = document.querySelectorAll('#sidebar .item .minor');
// const categories = document.querySelectorAll('#sidebar .item.category');
// filter.addEventListener('keyup', function (e) {
// items.forEach(item => {
// if (
// item.innerText.indexOf(e.target.value) > -1
// || e.target.value === ''
// ) item.style.display = 'block';
// else item.style.display = 'none';
// });
//
// categories.forEach(function (cat) {
// const isHidden = [].slice.call(cat.querySelectorAll('.minor')).every(item => item.style.display === 'none');
//
// if (isHidden) cat.style.display = 'none';
// else cat.style.display = 'block';
// });
// });
window.__ExamplesAPI = new class {
constructor() {
this.PREFIX = 'Examples API';
console.log(`${this.PREFIX}: initialized.`);
this.__initTime = Date.now();
this.connected = false;
Object.assign(this, {
ready: () => {
const time = Date.now() - this.__initTime;
setTimeout(() => {
document.body.dataset.exampleReady = true;
}, Math.max(1000 - time, 0));
}
});
setTimeout(() => { // Not connected
if (!this.connected) {
document.body.dataset.exampleReady = true;
}
}, 1000);
}
}