viewof Horizon = { var id = DOM.uid().id; var viewport_height = default_viewport_height; //default value, will change only on fullscreen var viewport_width = 954; //default value, will change on resizes var h_scale = viewport_height / scrollable_height; var w_scaled = (viewport_width * 1) / h_scale; var dom = html`

`; dom.value = dom.querySelector(".scrollable"); yield dom; var main = dom.querySelector(".main"); var width = w_scaled; var scrollbar = dom.querySelector(".scrollbar"); var scrollthumb = dom.querySelector(".scrollthumb"); var scrollcontainer = dom.querySelector(".scrollcontainer"); var hold_offset = 0; var scroll_bar_width = 0; var thumb = d3.select(scrollthumb); function dragstart(event, d) { var parent_bb = scrollbar.getBoundingClientRect(); var bb = scrollthumb.getBoundingClientRect(); var st = bb.x - parent_bb.x; var ed = st + bb.width; var off = event.x - st; hold_offset = off; scroll_bar_width = parent_bb.width; } function dragged(event, d) { var corrected = event.x - hold_offset; var p = (corrected / scroll_bar_width) * 100; scrollcontainer.scrollLeft = (scrollable_width * p) / 100; } thumb.call( d3 .drag() .on("start", dragstart) .on("drag", dragged) ); var on_mouse_wheel = function(event) { if (scrollcontainer.doScroll) scrollcontainer.doScroll(event.wheelDelta > 0 ? "left" : "right"); else if ((event.wheelDelta || event.detail) > 0) scrollcontainer.scrollLeft -= event.wheelDelta; else scrollcontainer.scrollLeft += -event.wheelDelta; event.preventDefault(); return false; }; var any_scroll = function() { var p = (scrollcontainer.scrollLeft / scrollable_width) * 100; mutable scroll_percentage = p; scrollthumb.style.marginLeft = p + "%"; return false; }; var on_resize = function() { console.log(viewport_height); viewport_width = (dom.parentElement && dom.parentElement.getBoundingClientRect().width) || 0; h_scale = viewport_height / scrollable_height; w_scaled = (viewport_width * 1) / h_scale; main.style.width = w_scaled + "px"; dom.style.height = viewport_height + "px"; dom.style.transform = `scale(${h_scale})`; scrollthumb.style.width = (w_scaled / scrollable_width) * 100 + "%"; }; var is_fullscreen = false; var on_fullscreen = function() { is_fullscreen = !is_fullscreen; if (is_fullscreen) { viewport_height = screen.height; } else { viewport_height = default_viewport_height; } on_resize(); }; dom.parentElement && dom.parentElement.addEventListener("fullscreenchange", on_fullscreen); window.addEventListener("resize", on_resize); scrollcontainer.addEventListener("scroll", any_scroll); scrollcontainer.addEventListener("mousewheel", on_mouse_wheel); invalidation.then(() => { dom.parentElement && dom.parentElement.removeEventListener("fullscreenchange", on_fullscreen); window.removeEventListener("resize", on_resize); scrollcontainer.removeEventListener("mousewheel", on_mouse_wheel); scrollcontainer.removeEventListener("scroll", any_scroll); }); on_resize(); scrollcontainer.scrollLeft = (scrollable_width * mutable scroll_percentage) / 100; //milestones d3.select(scrollbar) .selectAll('.milestones') .data(milestones) .join('div') .classed("milestones", true) .style('left', d => d.percentage + "%") .style('background', d => d.color) .attr('title', d => d.title) .on('click', (e, d) => { scrollcontainer.scrollLeft = (scrollable_width * d.percentage) / 100; }); }