Update.

.eslintignore

@@ -1,6 +1,6 @@
-build
-coverage
-dist
-es5
-local
-node_modules
+/build/
+/coverage/
+/dist/
+/es5/
+/local/
+/node_modules/

.eslintrc

@@ -5,8 +5,8 @@
     es6: true
     node: true
 
-  ecmaFeatures:
-    ecmaVersion: 6
+  parserOptions:
+    ecmaVersion: 2019
 
   rules:
     array-bracket-spacing: [2, never]
@@ -42,7 +42,7 @@
     max-len: [0, 80, 4]
     max-nested-callbacks: [1, 3]
     max-params: [1, 5] ###
-    max-statements: [1, 32] ###
+    max-statements: [1, 48] ###
     new-cap: 0
     new-parens: 2
     newline-after-var: 0

.gitignore

@@ -1,5 +1,6 @@
-build
-coverage
-local
-node_modules
-npm-debug.log
+/.nyc_output/
+/build/
+/coverage/
+/local/
+/node_modules/
+/npm-debug.log

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+
+sudo: false
+
+node_js:
+  - node
+  - "12"
+  - "11"
+  - "10"
+  - "9"
+  - "8"
+
+branches:
+  only:
+    - master

README.md

@@ -1,7 +1,7 @@
 # pagemap
 
 [![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github] [![npm][npm-img]][npm]  
-[![version][npm-v-img]][npm] [![downloads][npm-dm-img]][npm] [![dependencies status][gemnasium-img]][gemnasium]
+[![version][npm-v-img]][npm] [![downloads][npm-dm-img]][npm] [![build status][travis-img]][travis]
 
 Mini map for web pages.
 
@@ -45,7 +45,7 @@ pagemap(document.querySelector('#map'), {
 ## License
 The MIT License (MIT)
 
-Copyright (c) 2016 Lars Jung (https://larsjung.de)
+Copyright (c) 2020 Lars Jung (https://larsjung.de)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -69,7 +69,7 @@ THE SOFTWARE.
 [web]: https://larsjung.de/pagemap/
 [github]: https://github.com/lrsjng/pagemap
 [npm]: https://www.npmjs.org/package/pagemap
-[gemnasium]: https://gemnasium.com/lrsjng/pagemap
+[travis]: https://travis-ci.org/lrsjng/pagemap
 
 [license-img]: https://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square
 [web-img]: https://img.shields.io/badge/web-larsjung.de/pagemap-a0a060.svg?style=flat-square
@@ -78,4 +78,4 @@ THE SOFTWARE.
 
 [npm-v-img]: https://img.shields.io/npm/v/pagemap.svg?style=flat-square
 [npm-dm-img]: https://img.shields.io/npm/dm/pagemap.svg?style=flat-square
-[gemnasium-img]: https://img.shields.io/gemnasium/lrsjng/pagemap.svg?style=flat-square
+[travis-img]: https://img.shields.io/travis/lrsjng/pagemap.svg?style=flat-square

dist/pagemap.js

@@ -0,0 +1,349 @@
+/*! pagemap v1.3.0 - https://larsjung.de/pagemap/ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("pagemap", [], factory);
+	else if(typeof exports === 'object')
+		exports["pagemap"] = factory();
+	else
+		root["pagemap"] = factory();
+})((typeof self !== 'undefined' ? self : this), function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/* WEBPACK VAR INJECTION */(function(global) {module.exports = function (canvas, options) {
+  var WIN = global.window;
+  var DOC = WIN.document;
+  var DOC_EL = DOC.documentElement;
+  var BODY = DOC.querySelector('body');
+  var CTX = canvas.getContext('2d');
+
+  var black = function black(pc) {
+    return "rgba(0,0,0,".concat(pc / 100, ")");
+  };
+
+  var settings = Object.assign({
+    viewport: null,
+    styles: {
+      'header,footer,section,article': black(8),
+      'h1,a': black(10),
+      'h2,h3,h4': black(8)
+    },
+    back: black(2),
+    view: black(5),
+    drag: black(10),
+    interval: null
+  }, options);
+
+  var _listener = function _listener(el, method, types, fn) {
+    return types.split(/\s+/).forEach(function (type) {
+      return el[method](type, fn);
+    });
+  };
+
+  var on = function on(el, types, fn) {
+    return _listener(el, 'addEventListener', types, fn);
+  };
+
+  var off = function off(el, types, fn) {
+    return _listener(el, 'removeEventListener', types, fn);
+  };
+
+  var Rect = function Rect(x, y, w, h) {
+    return {
+      x: x,
+      y: y,
+      w: w,
+      h: h
+    };
+  };
+
+  var rect_rel_to = function rect_rel_to(rect) {
+    var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      x: 0,
+      y: 0
+    };
+    return Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
+  };
+
+  var rect_of_doc = function rect_of_doc() {
+    return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
+  };
+
+  var rect_of_win = function rect_of_win() {
+    return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
+  };
+
+  var el_get_offset = function el_get_offset(el) {
+    var br = el.getBoundingClientRect();
+    return {
+      x: br.left + WIN.pageXOffset,
+      y: br.top + WIN.pageYOffset
+    };
+  };
+
+  var rect_of_el = function rect_of_el(el) {
+    var _el_get_offset = el_get_offset(el),
+        x = _el_get_offset.x,
+        y = _el_get_offset.y;
+
+    return Rect(x, y, el.offsetWidth, el.offsetHeight);
+  };
+
+  var rect_of_viewport = function rect_of_viewport(el) {
+    var _el_get_offset2 = el_get_offset(el),
+        x = _el_get_offset2.x,
+        y = _el_get_offset2.y;
+
+    return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
+  };
+
+  var rect_of_content = function rect_of_content(el) {
+    var _el_get_offset3 = el_get_offset(el),
+        x = _el_get_offset3.x,
+        y = _el_get_offset3.y;
+
+    return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
+  };
+
+  var calc_scale = function () {
+    var width = canvas.clientWidth;
+    var height = canvas.clientHeight;
+    return function (w, h) {
+      return Math.min(width / w, height / h);
+    };
+  }();
+
+  var resize_canvas = function resize_canvas(w, h) {
+    canvas.width = w;
+    canvas.height = h;
+    canvas.style.width = "".concat(w, "px");
+    canvas.style.height = "".concat(h, "px");
+  };
+
+  var viewport = settings.viewport;
+
+  var find = function find(sel) {
+    return Array.from((viewport || DOC).querySelectorAll(sel));
+  };
+
+  var drag = false;
+  var root_rect;
+  var view_rect;
+  var scale;
+  var drag_rx;
+  var drag_ry;
+
+  var draw_rect = function draw_rect(rect, col) {
+    if (col) {
+      CTX.beginPath();
+      CTX.rect(rect.x, rect.y, rect.w, rect.h);
+      CTX.fillStyle = col;
+      CTX.fill();
+    }
+  };
+
+  var apply_styles = function apply_styles(styles) {
+    Object.keys(styles).forEach(function (sel) {
+      var col = styles[sel];
+      find(sel).forEach(function (el) {
+        draw_rect(rect_rel_to(rect_of_el(el), root_rect), col);
+      });
+    });
+  };
+
+  var draw = function draw() {
+    root_rect = viewport ? rect_of_content(viewport) : rect_of_doc();
+    view_rect = viewport ? rect_of_viewport(viewport) : rect_of_win();
+    scale = calc_scale(root_rect.w, root_rect.h);
+    resize_canvas(root_rect.w * scale, root_rect.h * scale);
+    CTX.setTransform(1, 0, 0, 1, 0, 0);
+    CTX.clearRect(0, 0, canvas.width, canvas.height);
+    CTX.scale(scale, scale);
+    draw_rect(rect_rel_to(root_rect, root_rect), settings.back);
+    apply_styles(settings.styles);
+    draw_rect(rect_rel_to(view_rect, root_rect), drag ? settings.drag : settings.view);
+  };
+
+  var on_drag = function on_drag(ev) {
+    ev.preventDefault();
+    var cr = rect_of_viewport(canvas);
+    var x = (ev.pageX - cr.x) / scale - view_rect.w * drag_rx;
+    var y = (ev.pageY - cr.y) / scale - view_rect.h * drag_ry;
+
+    if (viewport) {
+      viewport.scrollLeft = x;
+      viewport.scrollTop = y;
+    } else {
+      WIN.scrollTo(x, y);
+    }
+
+    draw();
+  };
+
+  var on_drag_end = function on_drag_end(ev) {
+    drag = false;
+    canvas.style.cursor = 'pointer';
+    BODY.style.cursor = 'auto';
+    off(WIN, 'mousemove', on_drag);
+    off(WIN, 'mouseup', on_drag_end);
+    on_drag(ev);
+  };
+
+  var on_drag_start = function on_drag_start(ev) {
+    drag = true;
+    var cr = rect_of_viewport(canvas);
+    var vr = rect_rel_to(view_rect, root_rect);
+    drag_rx = ((ev.pageX - cr.x) / scale - vr.x) / vr.w;
+    drag_ry = ((ev.pageY - cr.y) / scale - vr.y) / vr.h;
+
+    if (drag_rx < 0 || drag_rx > 1 || drag_ry < 0 || drag_ry > 1) {
+      drag_rx = 0.5;
+      drag_ry = 0.5;
+    }
+
+    canvas.style.cursor = 'crosshair';
+    BODY.style.cursor = 'crosshair';
+    on(WIN, 'mousemove', on_drag);
+    on(WIN, 'mouseup', on_drag_end);
+    on_drag(ev);
+  };
+
+  var init = function init() {
+    canvas.style.cursor = 'pointer';
+    on(canvas, 'mousedown', on_drag_start);
+    on(viewport || WIN, 'load resize scroll', draw);
+
+    if (settings.interval > 0) {
+      setInterval(function () {
+        return draw();
+      }, settings.interval);
+    }
+
+    draw();
+  };
+
+  init();
+  return {
+    redraw: draw
+  };
+};
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+var g;
+
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
+
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || new Function("return this")();
+} catch (e) {
+	// This works if the window reference is available
+	if (typeof window === "object") g = window;
+}
+
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
+
+module.exports = g;
+
+
+/***/ })
+/******/ ]);
+});

dist/pagemap.min.js

@@ -1,2 +1,2 @@
-/*! pagemap v0.4.0 - https://larsjung.de/pagemap/ */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.pagemap=e():t.pagemap=e()}(this,function(){return function(t){function e(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){(function(e){"use strict";var n=o(1),r=e.window,i=r.document,c=i.querySelector("body"),u=function(t){return"rgba(0,0,0,"+t/100+")"},f={viewport:null,styles:{"header,footer,section,article":u(8),"h1,a":u(10),"h2,h3,h4":u(8)},back:u(2),view:u(5),drag:u(10),interval:null},l=function(t,e,o,n){return o.split(/\s+/).forEach(function(o){return t[e](o,n)})},s=function(t,e,o){return l(t,"addEventListener",e,o)},a=function(t,e,o){return l(t,"removeEventListener",e,o)};t.exports=function(t,e){var o=Object.assign({},f,e),u=t.getContext("2d"),l=function(){var e=t.clientWidth,o=t.clientHeight;return function(t,n){return Math.min(e/t,o/n)}}(),p=function(e,o){t.width=e,t.height=o,t.style.width=e+"px",t.style.height=o+"px"},h=o.viewport,d=function(t){return Array.from((h||i).querySelectorAll(t))},v=!1,y=void 0,g=void 0,w=void 0,x=void 0,m=void 0,b=function(t,e){e&&(u.beginPath(),u.rect(t.x,t.y,t.w,t.h),u.fillStyle=e,u.fill())},T=function(t){Object.keys(t).forEach(function(e){var o=t[e];d(e).forEach(function(t){b(n.ofElement(t).relativeTo(y),o)})})},E=function(){y=h?n.ofContent(h):n.ofDocument(),g=h?n.ofViewport(h):n.ofWindow(),w=l(y.w,y.h),p(y.w*w,y.h*w),u.setTransform(1,0,0,1,0,0),u.clearRect(0,0,t.width,t.height),u.scale(w,w),b(y.relativeTo(y),o.back),T(o.styles),b(g.relativeTo(y),v?o.drag:o.view)},O=function(e){e.preventDefault();var o=n.ofViewport(t),i=(e.pageX-o.x)/w-g.w*x,c=(e.pageY-o.y)/w-g.h*m;h?(h.scrollLeft=i,h.scrollTop=c):r.scrollTo(i,c),E()},W=function e(o){v=!1,t.style.cursor="pointer",c.style.cursor="auto",a(r,"mousemove",O),a(r,"mouseup",e),O(o)},j=function(e){v=!0;var o=n.ofViewport(t),i=g.relativeTo(y);x=((e.pageX-o.x)/w-i.x)/i.w,m=((e.pageY-o.y)/w-i.y)/i.h,(x<0||x>1||m<0||m>1)&&(x=.5,m=.5),t.style.cursor="crosshair",c.style.cursor="crosshair",s(r,"mousemove",O),s(r,"mouseup",W),O(e)},H=function(){t.style.cursor="pointer",s(t,"mousedown",j),s(h||r,"load resize scroll",E),o.interval>0&&setInterval(function(){return E()},o.interval),E()};return H(),{redraw:E}}}).call(e,function(){return this}())},function(t,e){(function(e){"use strict";var o=e.window,n=o.document.documentElement,r=t.exports=function(t,e,o,n){return Object.assign(Object.create(r.prototype),{x:t,y:e,w:o,h:n})};r.prototype={constructor:r,relativeTo:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{x:0,y:0};return r(this.x-t.x,this.y-t.y,this.w,this.h)}},r.ofDocument=function(){return r(0,0,n.scrollWidth,n.scrollHeight)},r.ofWindow=function(){return r(o.pageXOffset,o.pageYOffset,n.clientWidth,n.clientHeight)};var i=function(t){var e=t.getBoundingClientRect();return{x:e.left+o.pageXOffset,y:e.top+o.pageYOffset}};r.ofElement=function(t){var e=i(t),o=e.x,n=e.y;return r(o,n,t.offsetWidth,t.offsetHeight)},r.ofViewport=function(t){var e=i(t),o=e.x,n=e.y;return r(o+t.clientLeft,n+t.clientTop,t.clientWidth,t.clientHeight)},r.ofContent=function(t){var e=i(t),o=e.x,n=e.y;return r(o+t.clientLeft-t.scrollLeft,n+t.clientTop-t.scrollTop,t.scrollWidth,t.scrollHeight)}}).call(e,function(){return this}())}])});
+/*! pagemap v1.3.0 - https://larsjung.de/pagemap/ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("pagemap",[],t):"object"==typeof exports?exports.pagemap=t():e.pagemap=t()}("undefined"!=typeof self?self:this,function(){return r={},o.m=n=[function(e,t,n){(function(M){e.exports=function(c,e){function t(e){return"rgba(0,0,0,".concat(e/100,")")}function r(t,n,e,r){return e.split(/\s+/).forEach(function(e){return t[n](e,r)})}function o(e,t,n){return r(e,"addEventListener",t,n)}function n(e,t,n){return r(e,"removeEventListener",t,n)}function u(e,t,n,r){return{x:e,y:t,w:n,h:r}}function l(e,t){var n=1<arguments.length&&void 0!==t?t:{x:0,y:0};return u(e.x-n.x,e.y-n.y,e.w,e.h)}function f(e){var t=e.getBoundingClientRect();return{x:t.left+O.pageXOffset,y:t.top+O.pageYOffset}}function a(e){var t=f(e),n=t.x,r=t.y;return u(n+e.clientLeft,r+e.clientTop,e.clientWidth,e.clientHeight)}function s(e,t){t&&(H.beginPath(),H.rect(e.x,e.y,e.w,e.h),H.fillStyle=t,H.fill())}function p(n){Object.keys(n).forEach(function(e){var t,i=n[e];t=e,Array.from((W||S).querySelectorAll(t)).forEach(function(e){var t,n,r,o;s(l((n=f(t=e),r=n.x,o=n.y,u(r,o,t.offsetWidth,t.offsetHeight)),m),i)})})}function i(){var e,t,n,r,o,i;m=W?(t=f(e=W),n=t.x,r=t.y,u(n+e.clientLeft-e.scrollLeft,r+e.clientTop-e.scrollTop,e.scrollWidth,e.scrollHeight)):u(0,0,T.scrollWidth,T.scrollHeight),x=W?a(W):u(O.pageXOffset,O.pageYOffset,T.clientWidth,T.clientHeight),b=P(m.w,m.h),o=m.w*b,i=m.h*b,c.width=o,c.height=i,c.style.width="".concat(o,"px"),c.style.height="".concat(i,"px"),H.setTransform(1,0,0,1,0,0),H.clearRect(0,0,c.width,c.height),H.scale(b,b),s(l(m,m),L.back),p(L.styles),s(l(x,m),_?L.drag:L.view)}function d(e){e.preventDefault();var t=a(c),n=(e.pageX-t.x)/b-x.w*w,r=(e.pageY-t.y)/b-x.h*j;W?(W.scrollLeft=n,W.scrollTop=r):O.scrollTo(n,r),i()}function h(e){_=!1,c.style.cursor="pointer",E.style.cursor="auto",n(O,"mousemove",d),n(O,"mouseup",h),d(e)}function y(e){_=!0;var t=a(c),n=l(x,m);w=((e.pageX-t.x)/b-n.x)/n.w,j=((e.pageY-t.y)/b-n.y)/n.h,(w<0||1<w||j<0||1<j)&&(j=w=.5),c.style.cursor="crosshair",E.style.cursor="crosshair",o(O,"mousemove",d),o(O,"mouseup",h),d(e)}var g,v,m,x,b,w,j,O=M.window,S=O.document,T=S.documentElement,E=S.querySelector("body"),H=c.getContext("2d"),L=Object.assign({viewport:null,styles:{"header,footer,section,article":t(8),"h1,a":t(10),"h2,h3,h4":t(8)},back:t(2),view:t(5),drag:t(10),interval:null},e),P=(g=c.clientWidth,v=c.clientHeight,function(e,t){return Math.min(g/e,v/t)}),W=L.viewport,_=!1;return c.style.cursor="pointer",o(c,"mousedown",y),o(W||O,"load resize scroll",i),0<L.interval&&setInterval(function(){return i()},L.interval),i(),{redraw:i}}}).call(this,n(1))},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n}],o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0);function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}var n,r});

ghu.js

@@ -1,5 +1,5 @@
 const {resolve, join} = require('path');
-const {ghu, jszip, mapfn, read, remove, run, uglify, webpack, wrap, write} = require('ghu');
+const {ghu, jszip, mapfn, read, remove, uglify, webpack, wrap, write} = require('ghu');
 
 const NAME = 'pagemap';
 
@@ -22,33 +22,13 @@ ghu.task('clean', () => {
     return remove(`${BUILD}, ${DIST}`);
 });
 
-ghu.task('lint', () => {
-    return run('eslint .', {stdio: 'inherit'});
-});
-
 ghu.task('build:script', runtime => {
-    const webpackConfig = {
-        output: {
-            library: NAME,
-            libraryTarget: 'umd'
-        },
-        module: {
-            loaders: [
-                {
-                    include: [SRC],
-                    loader: 'babel-loader',
-                    query: {
-                        cacheDirectory: true,
-                        presets: ['es2015']
-                    }
-                }
-            ]
-        }
-    };
-
     return read(`${SRC}/${NAME}.js`)
-        .then(webpack(webpackConfig, {showStats: false}))
-        .then(uglify({compressor: {warnings: false}}))
+        .then(webpack(webpack.cfg_umd(NAME, [SRC])))
+        .then(wrap(runtime.commentJs))
+        .then(write(`${DIST}/${NAME}.js`, {overwrite: true}))
+        .then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.js`, {overwrite: true}))
+        .then(uglify())
         .then(wrap(runtime.commentJs))
         .then(write(`${DIST}/${NAME}.min.js`, {overwrite: true}))
         .then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.min.js`, {overwrite: true}));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pagemap",
-  "version": "0.4.0",
+  "version": "1.3.0",
   "description": "Mini map for web pages.",
   "homepage": "https://larsjung.de/pagemap/",
   "bugs": "https://github.com/lrsjng/pagemap/issues",
@@ -13,16 +13,20 @@
   "main": "dist/pagemap",
   "scripts": {
     "lint": "eslint .",
+    "test": "node test",
+    "check": "npm run -s lint && npm run -s test",
     "build": "node ghu release",
-    "precommit": "npm run -s lint && npm run -s build"
+    "precommit": "npm run -s check && npm run -s build"
   },
   "devDependencies": {
-    "babel-loader": "6.2.9",
-    "babel-preset-es2015": "6.18.0",
-    "eslint": "3.12.0",
-    "ghu": "0.12.0"
+    "@babel/core": "7.8.4",
+    "@babel/preset-env": "7.8.4",
+    "eslint": "6.8.0",
+    "ghu": "0.25.0",
+    "jsdom": "16.2.0",
+    "scar": "2.2.0"
   },
   "engines": {
-    "node": ">=6.0.0"
+    "node": ">=8.0.0"
   }
 }

src/demo/boxes.html

@@ -2,10 +2,15 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>pagemap boxes demo</title>
-    <link rel="stylesheet" href="boxes.css">
+    <title>pagemap demo - boxes</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
-<body class="checkers">
+<body id="boxes-demo" class="checkers">
+    <div id="banner">
+        <div><a href="https://larsjung.de/pagemap/">pagemap</a> demo</div>
+        <div><a href="text.html">text</a> - <strong>boxes</strong></div>
+    </div>
+
     <div id="container">
         <div id="content" class="checkers">
             <div id="container2">
@@ -21,9 +26,7 @@
         pagemap(document.querySelector('#map'), {
             // viewport: document.querySelector('#container'),
             interval: 50,
-            styles: {
-                div: 'rgba(0,0,0,0.1)'
-            },
+            styles: { div: 'rgba(0,0,0,0.1)' },
             back: 'rgba(255,255,255,1)'
         });
     </script>

src/demo/styles.css

@@ -4,16 +4,68 @@
 }
 
 body {
+    font-family: Ubuntu, sans;
+    font-size: 16px;
+    color: #555;
+}
+
+body#boxes-demo {
     width: 2000px;
     height: 2000px;
     background-color: #eee;
 }
 
+a, a:visited, a:active {
+    color: #1d77c2;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #555;
+}
+
+main {
+    margin: 3em auto 6em auto;
+    max-width: 800px;
+    line-height: 1.6em;
+}
+
+h1 {
+    font-size: 3em;
+    font-weight: normal;
+    margin: 0 0 1em;
+}
+
+h2 {
+    font-size: 1.8em;
+    font-weight: normal;
+    margin: 3em 0 1em;
+}
+
+h3 {
+    font-size: 1.2em;
+    font-weight: bold;
+    margin: 2em 0 1em;
+}
+
+#banner {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 16px;
+    margin: 4px;
+    padding: 4px 12px;
+    text-align: center;
+    line-height: 24px;
+    background: rgba(255,255,255,0.8);
+    border: 1px solid rgba(0,0,0,0.5);
+}
+
 #map {
     position: fixed;
     top: 0;
     right: 0;
-    width: 120px;
+    width: 160px;
     height: 100%;
     z-index: 100;
 }

src/demo/text.css

@@ -1,47 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-}
-
-#map {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 200px;
-    height: 100%;
-    z-index: 100;
-}
-
-body {
-    font-family: Bitter, Ubuntu, Arial, sans;
-    font-size: 16px;
-    color: #555;
-}
-
-main {
-    margin: 3em auto 6em auto;
-    max-width: 800px;
-    line-height: 1.6em;
-}
-
-h1 {
-    font-size: 3em;
-    font-weight: normal;
-    margin: 0 0 1em;
-}
-
-h2 {
-    font-size: 1.8em;
-    font-weight: normal;
-    margin: 3em 0 1em;
-}
-
-h3 {
-    font-size: 1.2em;
-    font-weight: bold;
-    margin: 2em 0 1em;
-}
-
-a {
-    color: #1E88E5;
-}

src/demo/text.html

@@ -2,16 +2,14 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>pagemap text demo</title>
-    <link rel="stylesheet" href="text.css">
+    <title>pagemap demo - text</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
-<body>
-    <canvas id="map"></canvas>
-
-    <script src="pagemap.min.js"></script>
-    <script>
-        pagemap(document.querySelector('#map'));
-    </script>
+<body id="text-demo">
+    <div id="banner">
+        <div><a href="https://larsjung.de/pagemap/">pagemap</a> demo</div>
+        <div><strong>text</strong> - <a href="boxes.html">boxes</a></div>
+    </div>
 
     <main>
         <header>
@@ -43,5 +41,12 @@
             <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, <a href="?">eaque veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
         </section>
     </main>
+
+    <canvas id="map"></canvas>
+
+    <script src="pagemap.min.js"></script>
+    <script>
+        pagemap(document.querySelector('#map'));
+    </script>
 </body>
 </html>

src/pagemap.js

@@ -1,39 +1,69 @@
-const Rect = require('./rect');
-
-const win = global.window;
-const doc = win.document;
-const body = doc.querySelector('body');
-
-const black = pc => `rgba(0,0,0,${pc / 100})`;
-const defaults = {
-    viewport: null,
-    styles: {
-        'header,footer,section,article': black(8),
-        'h1,a': black(10),
-        'h2,h3,h4': black(8)
-    },
-    back: black(2),
-    view: black(5),
-    drag: black(10),
-    interval: null
-};
-
-const _listener = (el, method, types, fn) => types.split(/\s+/).forEach(type => el[method](type, fn));
-const on = (el, types, fn) => _listener(el, 'addEventListener', types, fn);
-const off = (el, types, fn) => _listener(el, 'removeEventListener', types, fn);
-
 module.exports = (canvas, options) => {
-    const settings = Object.assign({}, defaults, options);
+    const WIN = global.window;
+    const DOC = WIN.document;
+    const DOC_EL = DOC.documentElement;
+    const BODY = DOC.querySelector('body');
+    const CTX = canvas.getContext('2d');
 
-    const context = canvas.getContext('2d');
+    const black = pc => `rgba(0,0,0,${pc / 100})`;
+    const settings = Object.assign({
+        viewport: null,
+        styles: {
+            'header,footer,section,article': black(8),
+            'h1,a': black(10),
+            'h2,h3,h4': black(8)
+        },
+        back: black(2),
+        view: black(5),
+        drag: black(10),
+        interval: null
+    }, options);
 
-    const calcScale = (() => {
+    const _listener = (el, method, types, fn) => types.split(/\s+/).forEach(type => el[method](type, fn));
+    const on = (el, types, fn) => _listener(el, 'addEventListener', types, fn);
+    const off = (el, types, fn) => _listener(el, 'removeEventListener', types, fn);
+
+    const Rect = (x, y, w, h) => { return {x, y, w, h}; };
+
+    const rect_rel_to = (rect, pos = {x: 0, y: 0}) => {
+        return Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
+    };
+
+    const rect_of_doc = () => {
+        return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
+    };
+
+    const rect_of_win = () => {
+        return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
+    };
+
+    const el_get_offset = el => {
+        const br = el.getBoundingClientRect();
+        return {x: br.left + WIN.pageXOffset, y: br.top + WIN.pageYOffset};
+    };
+
+    const rect_of_el = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x, y, el.offsetWidth, el.offsetHeight);
+    };
+
+    const rect_of_viewport = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
+    };
+
+    const rect_of_content = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
+    };
+
+    const calc_scale = (() => {
         const width = canvas.clientWidth;
         const height = canvas.clientHeight;
         return (w, h) => Math.min(width / w, height / h);
     })();
 
-    const resizeCanvas = (w, h) => {
+    const resize_canvas = (w, h) => {
         canvas.width = w;
         canvas.height = h;
         canvas.style.width = `${w}px`;
@@ -41,99 +71,97 @@ module.exports = (canvas, options) => {
     };
 
     const viewport = settings.viewport;
-    const find = sel => Array.from((viewport || doc).querySelectorAll(sel));
+    const find = sel => Array.from((viewport || DOC).querySelectorAll(sel));
 
     let drag = false;
 
-    let rootRect;
-    let viewRect;
+    let root_rect;
+    let view_rect;
     let scale;
-    let dragRx;
-    let dragRy;
+    let drag_rx;
+    let drag_ry;
 
-    const drawRect = (rect, col) => {
-        if (!col) {
-            return;
+    const draw_rect = (rect, col) => {
+        if (col) {
+            CTX.beginPath();
+            CTX.rect(rect.x, rect.y, rect.w, rect.h);
+            CTX.fillStyle = col;
+            CTX.fill();
         }
-        context.beginPath();
-        context.rect(rect.x, rect.y, rect.w, rect.h);
-        context.fillStyle = col;
-        context.fill();
     };
 
-    const applyStyles = styles => {
+    const apply_styles = styles => {
         Object.keys(styles).forEach(sel => {
             const col = styles[sel];
             find(sel).forEach(el => {
-                drawRect(Rect.ofElement(el).relativeTo(rootRect), col);
+                draw_rect(rect_rel_to(rect_of_el(el), root_rect), col);
             });
         });
     };
 
     const draw = () => {
-        rootRect = viewport ? Rect.ofContent(viewport) : Rect.ofDocument();
-        viewRect = viewport ? Rect.ofViewport(viewport) : Rect.ofWindow();
-        scale = calcScale(rootRect.w, rootRect.h);
+        root_rect = viewport ? rect_of_content(viewport) : rect_of_doc();
+        view_rect = viewport ? rect_of_viewport(viewport) : rect_of_win();
+        scale = calc_scale(root_rect.w, root_rect.h);
 
-        resizeCanvas(rootRect.w * scale, rootRect.h * scale);
+        resize_canvas(root_rect.w * scale, root_rect.h * scale);
 
-        context.setTransform(1, 0, 0, 1, 0, 0);
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.scale(scale, scale);
+        CTX.setTransform(1, 0, 0, 1, 0, 0);
+        CTX.clearRect(0, 0, canvas.width, canvas.height);
+        CTX.scale(scale, scale);
 
-        drawRect(rootRect.relativeTo(rootRect), settings.back);
-        applyStyles(settings.styles);
-        drawRect(viewRect.relativeTo(rootRect), drag ? settings.drag : settings.view);
+        draw_rect(rect_rel_to(root_rect, root_rect), settings.back);
+        apply_styles(settings.styles);
+        draw_rect(rect_rel_to(view_rect, root_rect), drag ? settings.drag : settings.view);
     };
 
-    const onDrag = ev => {
+    const on_drag = ev => {
         ev.preventDefault();
-        const cr = Rect.ofViewport(canvas);
-        const x = (ev.pageX - cr.x) / scale - viewRect.w * dragRx;
-        const y = (ev.pageY - cr.y) / scale - viewRect.h * dragRy;
+        const cr = rect_of_viewport(canvas);
+        const x = (ev.pageX - cr.x) / scale - view_rect.w * drag_rx;
+        const y = (ev.pageY - cr.y) / scale - view_rect.h * drag_ry;
 
         if (viewport) {
             viewport.scrollLeft = x;
             viewport.scrollTop = y;
         } else {
-            win.scrollTo(x, y);
+            WIN.scrollTo(x, y);
         }
         draw();
     };
 
-    const onDragEnd = ev => {
+    const on_drag_end = ev => {
         drag = false;
-
         canvas.style.cursor = 'pointer';
-        body.style.cursor = 'auto';
-        off(win, 'mousemove', onDrag);
-        off(win, 'mouseup', onDragEnd);
-        onDrag(ev);
+        BODY.style.cursor = 'auto';
+        off(WIN, 'mousemove', on_drag);
+        off(WIN, 'mouseup', on_drag_end);
+        on_drag(ev);
     };
 
-    const onDragStart = ev => {
+    const on_drag_start = ev => {
         drag = true;
 
-        const cr = Rect.ofViewport(canvas);
-        const vr = viewRect.relativeTo(rootRect);
-        dragRx = ((ev.pageX - cr.x) / scale - vr.x) / vr.w;
-        dragRy = ((ev.pageY - cr.y) / scale - vr.y) / vr.h;
-        if (dragRx < 0 || dragRx > 1 || dragRy < 0 || dragRy > 1) {
-            dragRx = 0.5;
-            dragRy = 0.5;
+        const cr = rect_of_viewport(canvas);
+        const vr = rect_rel_to(view_rect, root_rect);
+        drag_rx = ((ev.pageX - cr.x) / scale - vr.x) / vr.w;
+        drag_ry = ((ev.pageY - cr.y) / scale - vr.y) / vr.h;
+        if (drag_rx < 0 || drag_rx > 1 || drag_ry < 0 || drag_ry > 1) {
+            drag_rx = 0.5;
+            drag_ry = 0.5;
         }
 
         canvas.style.cursor = 'crosshair';
-        body.style.cursor = 'crosshair';
-        on(win, 'mousemove', onDrag);
-        on(win, 'mouseup', onDragEnd);
-        onDrag(ev);
+        BODY.style.cursor = 'crosshair';
+        on(WIN, 'mousemove', on_drag);
+        on(WIN, 'mouseup', on_drag_end);
+        on_drag(ev);
     };
 
     const init = () => {
         canvas.style.cursor = 'pointer';
-        on(canvas, 'mousedown', onDragStart);
-        on(viewport || win, 'load resize scroll', draw);
+        on(canvas, 'mousedown', on_drag_start);
+        on(viewport || WIN, 'load resize scroll', draw);
         if (settings.interval > 0) {
             setInterval(() => draw(), settings.interval);
         }

src/rect.js

@@ -1,67 +0,0 @@
-const win = global.window;
-const docEl = win.document.documentElement;
-
-const Rect = module.exports = (x, y, w, h) => {
-    return Object.assign(Object.create(Rect.prototype), {
-        x, y, w, h
-    });
-};
-
-Rect.prototype = {
-    constructor: Rect,
-
-    relativeTo(pos = {x: 0, y: 0}) {
-        return Rect(this.x - pos.x, this.y - pos.y, this.w, this.h);
-    }
-};
-
-Rect.ofDocument = () => {
-    return Rect(0, 0, docEl.scrollWidth, docEl.scrollHeight);
-};
-
-Rect.ofWindow = () => {
-    return Rect(
-        win.pageXOffset,
-        win.pageYOffset,
-        docEl.clientWidth,
-        docEl.clientHeight
-    );
-};
-
-const getOffset = el => {
-    const br = el.getBoundingClientRect();
-    return {
-        x: br.left + win.pageXOffset,
-        y: br.top + win.pageYOffset
-    };
-};
-
-Rect.ofElement = el => {
-    const {x, y} = getOffset(el);
-    return Rect(
-        x,
-        y,
-        el.offsetWidth,
-        el.offsetHeight
-    );
-};
-
-Rect.ofViewport = el => {
-    const {x, y} = getOffset(el);
-    return Rect(
-        x + el.clientLeft,
-        y + el.clientTop,
-        el.clientWidth,
-        el.clientHeight
-    );
-};
-
-Rect.ofContent = el => {
-    const {x, y} = getOffset(el);
-    return Rect(
-        x + el.clientLeft - el.scrollLeft,
-        y + el.clientTop - el.scrollTop,
-        el.scrollWidth,
-        el.scrollHeight
-    );
-};

test/index.js

@@ -0,0 +1,24 @@
+const {test, assert} = require('scar');
+const pagemap = require('../src/pagemap');
+
+if (!global.window) {
+    global.window = new (require('jsdom')).JSDOM().window;
+}
+
+test('access', () => {
+    assert.equal(typeof pagemap, 'function');
+});
+
+test('no canvas throws', () => {
+    assert.throws(() => pagemap(), /getContext/);
+    assert.throws(() => pagemap(true), /getContext/);
+    assert.throws(() => pagemap({}, {}), /getContext/);
+});
+
+// test('basic canvas', () => {
+//     const canvas = global.window.document.createElement('canvas');
+//     const res = pagemap(canvas);
+//     assert.equal(typeof res, 'object');
+// });
+
+test.cli();