graph-scroll.js

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3')) :
	typeof define === 'function' && define.amd ? define(['exports', 'd3'], factory) :
	(factory((global.d3 = global.d3 || {}),global.d3));
}(this, (function (exports,d3) { 'use strict';

function graphScroll(){
  var windowHeight,
      dispatch$$1 = d3.dispatch("scroll", "active"),
      sections = d3.select('null'),
      i = NaN,
      sectionPos = [],
      n,
      graph = d3.select('null'),
      isFixed = null,
      isBelow = null,
      container = d3.select('body'),
      containerStart = 0,
      belowStart,
      eventId = Math.random(),
      offset = 200;

  function reposition(){
    var i1 = 0;
    sectionPos.forEach(function(d, i){
      if (d < pageYOffset - containerStart + offset) i1 = i;
    });
    i1 = Math.min(n - 1, i1);

    var isBelow1 = pageYOffset > belowStart;
    if (isBelow != isBelow1){
      isBelow = isBelow1;
      container.classed('graph-scroll-below', isBelow);
    }
    var isFixed1 = !isBelow && pageYOffset > containerStart;
    if (isFixed != isFixed1){
      isFixed = isFixed1;
      container.classed('graph-scroll-fixed', isFixed);
    }

    if (isBelow) i1 = n - 1;

    if (i != i1){
      sections.classed('graph-scroll-active', function(d, i){ return i === i1 });

      dispatch$$1.call('active', null, i1);

      i = i1;
    }
  }

  function resize(){
    sectionPos = [];
    var startPos;
    sections.each(function(d, i){
      if (!i) startPos = this.getBoundingClientRect().top;
      sectionPos.push(this.getBoundingClientRect().top -  startPos); });

    var containerBB = container.node().getBoundingClientRect();
    var graphHeight = graph.node() ? graph.node().getBoundingClientRect().height : 0;

    containerStart = containerBB.top + pageYOffset;
    belowStart = containerBB.bottom - graphHeight + pageYOffset;
  }

  function keydown() {
    if (!isFixed) return
    var delta;
    switch (d3.event.keyCode) {
      case 39: // right arrow
      if (d3.event.metaKey) return
      case 40: // down arrow
      case 34: // page down
      delta = d3.event.metaKey ? Infinity : 1 ;break
      case 37: // left arrow
      if (d3.event.metaKey) return
      case 38: // up arrow
      case 33: // page up
      delta = d3.event.metaKey ? -Infinity : -1 ;break
      case 32: // space
      delta = d3.event.shiftKey ? -1 : 1
      ;break
      default: return
    }

    var i1 = Math.max(0, Math.min(i + delta, n - 1));
    if (i1 == i) return // let browser handle scrolling past last section
    d3.select(document.documentElement)
        .interrupt()
      .transition()
        .duration(500)
        .tween("scroll", function() {
          var i = d3.interpolateNumber(pageYOffset, sectionPos[i1] + containerStart);
          return function(t) { scrollTo(0, i(t)); }
        });

    d3.event.preventDefault();
  }


  var rv ={};

  rv.container = function(_x){
    if (!_x) return container

    container = _x;
    return rv
  };

  rv.graph = function(_x){
    if (!_x) return graph

    graph = _x;
    return rv
  };

  rv.eventId = function(_x){
    if (!_x) return eventId

    eventId = _x;
    return rv
  };

  rv.sections = function (_x){
    if (!_x) return sections

    sections = _x;
    n = sections.size();

    d3.select(window)
        .on('scroll.gscroll'  + eventId, reposition)
        .on('resize.gscroll'  + eventId, resize)
        .on('keydown.gscroll' + eventId, keydown);
    
    resize();
    d3.timer(reposition);
    if (window['gscrollTimer' + eventId]) window['gscrollTimer' + eventId].stop();
    window['gscrollTimer' + eventId] = d3.timer(reposition);

    return rv
  };

  rv.on = function() {
    var value = dispatch$$1.on.apply(dispatch$$1, arguments);
    return value === dispatch$$1 ? rv : value;
  };
  
  rv.offset = function(_x) {
    if(!_x) return offset
    
    offset = _x;
    return rv
  };

  return rv
}

exports.graphScroll = graphScroll;

Object.defineProperty(exports, '__esModule', { value: true });

})));