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);
}