Study planner
const appRoot = document.querySelector(‘#app-root’);
const app = document.querySelector(‘#course-planner-app’);
const isolatedRoot = appRoot.attachShadow({
mode: ‘open’
});
isolatedRoot.appendChild(document.querySelector(‘#app-style’));
isolatedRoot.appendChild(document.querySelector(‘#students-style’));
isolatedRoot.appendChild(app);
(function() {
function rethrow(eventType, filter) {
isolatedRoot.addEventListener(eventType, function(e) {
if (filter && !filter(e)) return;
let clone = new Event(e.type, e);
Object.entries(Object.getOwnPropertyDescriptors(e)).filter(p => p[1].writable && p[1].configurable).forEach(p => Object.defineProperty(clone, p[0], p[1]));
appRoot.parentElement.dispatchEvent(clone);
});
}
let docElementFromPoint = document.elementFromPoint;
document.elementFromPoint = function() {
return isolatedRoot.elementFromPoint.apply(isolatedRoot, arguments) || docElementFromPoint.apply(document, arguments);
}
rethrow(‘drag:start’, e => e.detail && e.detail.data && e.detail.data.target);
rethrow(‘drag:stop’, e => e.detail && e.detail.data && e.detail.data.target);
rethrow(‘drag:pressure’, e => e.detail && e.detail.data && e.detail.data.target);
rethrow(‘drag:move’, e => e.detail && e.detail.data && e.detail.data.target instanceof HTMLElement && !e.detail.data.target.querySelector(‘.is-draggable’));
})();
new Vue({
el: app,
components: {
‘course-planner’: CoursePlanner
}
});
window.onload = function() {
window.scroll(0, app.getBoundingClientRect().top + window.scrollY – 40);
}