Update.

.eslintrc

@@ -5,6 +5,9 @@
     es6: true
     node: true
 
+  parserOptions:
+    ecmaVersion: 2019
+
   rules:
     array-bracket-spacing: [2, never]
     arrow-parens: [2, as-needed]

.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]
+[![version][npm-v-img]][npm] [![downloads][npm-dm-img]][npm] [![build status][travis-img]][travis]
 
 Mini map for web pages.
 
@@ -69,6 +69,7 @@ THE SOFTWARE.
 [web]: https://larsjung.de/pagemap/
 [github]: https://github.com/lrsjng/pagemap
 [npm]: https://www.npmjs.org/package/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
@@ -77,3 +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
+[travis-img]: https://img.shields.io/travis/lrsjng/pagemap.svg?style=flat-square

dist/pagemap.js

@@ -0,0 +1,353 @@
+/*! pagemap v1.1.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) {var WIN = global.window;
+var DOC = WIN.document;
+var DOC_EL = DOC.documentElement;
+var body = DOC.querySelector('body');
+
+var black = function black(pc) {
+  return "rgba(0,0,0,".concat(pc / 100, ")");
+};
+
+var 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
+};
+
+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);
+};
+
+module.exports = function (canvas, options) {
+  var settings = Object.assign({}, defaults, options);
+  var context = canvas.getContext('2d');
+
+  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) {
+      return;
+    }
+
+    context.beginPath();
+    context.rect(rect.x, rect.y, rect.w, rect.h);
+    context.fillStyle = col;
+    context.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);
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.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 v1.0.0 - https://larsjung.de/pagemap/ */
+/*! pagemap v1.1.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 function(n){var r={};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}return o.m=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(n,e,t){(function(e){var b=e.window,w=b.document,j=w.documentElement,O=w.querySelector("body"),t=function(e){return"rgba(0,0,0,".concat(e/100,")")},S={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},r=function(t,n,e,r){return e.split(/\s+/).forEach(function(e){return t[n](e,r)})},T=function(e,t,n){return r(e,"addEventListener",t,n)},E=function(e,t,n){return r(e,"removeEventListener",t,n)},H=function(e,t,n,r){return{x:e,y:t,w:n,h:r}},L=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{x:0,y:0};return H(e.x-t.x,e.y-t.y,e.w,e.h)},P=function(e){var t=e.getBoundingClientRect();return{x:t.left+b.pageXOffset,y:t.top+b.pageYOffset}},W=function(e){var t=P(e),n=t.x,r=t.y;return H(n+e.clientLeft,r+e.clientTop,e.clientWidth,e.clientHeight)};n.exports=function(o,e){var n,r,i,c,u,l,f,t=Object.assign({},S,e),a=o.getContext("2d"),s=(n=o.clientWidth,r=o.clientHeight,function(e,t){return Math.min(n/e,r/t)}),p=t.viewport,d=!1,h=function(e,t){t&&(a.beginPath(),a.rect(e.x,e.y,e.w,e.h),a.fillStyle=t,a.fill())},y=function(n){Object.keys(n).forEach(function(e){var t=n[e];(function(e){return Array.from((p||w).querySelectorAll(e))})(e).forEach(function(e){h(L(function(e){var t=P(e),n=t.x,r=t.y;return H(n,r,e.offsetWidth,e.offsetHeight)}(e),i),t)})})},g=function(){i=p?function(e){var t=P(e),n=t.x,r=t.y;return H(n+e.clientLeft-e.scrollLeft,r+e.clientTop-e.scrollTop,e.scrollWidth,e.scrollHeight)}(p):H(0,0,j.scrollWidth,j.scrollHeight),c=p?W(p):H(b.pageXOffset,b.pageYOffset,j.clientWidth,j.clientHeight),u=s(i.w,i.h),function(e,t){o.width=e,o.height=t,o.style.width="".concat(e,"px"),o.style.height="".concat(t,"px")}(i.w*u,i.h*u),a.setTransform(1,0,0,1,0,0),a.clearRect(0,0,o.width,o.height),a.scale(u,u),h(L(i,i),t.back),y(t.styles),h(L(c,i),d?t.drag:t.view)},v=function(e){e.preventDefault();var t=W(o),n=(e.pageX-t.x)/u-c.w*l,r=(e.pageY-t.y)/u-c.h*f;p?(p.scrollLeft=n,p.scrollTop=r):b.scrollTo(n,r),g()},m=function e(t){d=!1,o.style.cursor="pointer",O.style.cursor="auto",E(b,"mousemove",v),E(b,"mouseup",e),v(t)},x=function(e){d=!0;var t=W(o),n=L(c,i);l=((e.pageX-t.x)/u-n.x)/n.w,f=((e.pageY-t.y)/u-n.y)/n.h,(l<0||1<l||f<0||1<f)&&(f=l=.5),o.style.cursor="crosshair",O.style.cursor="crosshair",T(b,"mousemove",v),T(b,"mouseup",m),v(e)};return o.style.cursor="pointer",T(o,"mousedown",x),T(p||b,"load resize scroll",g),0<t.interval&&setInterval(function(){return g()},t.interval),g(),{redraw:g}}}).call(this,t(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}])});
+!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 function(n){var r={};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}return o.m=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(n,e,t){(function(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 b(e,t,n){return r(e,"addEventListener",t,n)}function w(e,t,n){return r(e,"removeEventListener",t,n)}function j(e,t,n,r){return{x:e,y:t,w:n,h:r}}function O(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{x:0,y:0};return j(e.x-t.x,e.y-t.y,e.w,e.h)}function S(e){var t=e.getBoundingClientRect();return{x:t.left+E.pageXOffset,y:t.top+E.pageYOffset}}function T(e){var t=S(e),n=t.x,r=t.y;return j(n+e.clientLeft,r+e.clientTop,e.clientWidth,e.clientHeight)}var E=e.window,H=E.document,L=H.documentElement,P=H.querySelector("body"),W={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};n.exports=function(o,e){function r(e,t){t&&(g.beginPath(),g.rect(e.x,e.y,e.w,e.h),g.fillStyle=t,g.fill())}function t(n){Object.keys(n).forEach(function(e){var t=n[e];(function(e){return Array.from((m||H).querySelectorAll(e))})(e).forEach(function(e){r(O(function(e){var t=S(e),n=t.x,r=t.y;return j(n,r,e.offsetWidth,e.offsetHeight)}(e),a),t)})})}function i(){a=m?function(e){var t=S(e),n=t.x,r=t.y;return j(n+e.clientLeft-e.scrollLeft,r+e.clientTop-e.scrollTop,e.scrollWidth,e.scrollHeight)}(m):j(0,0,L.scrollWidth,L.scrollHeight),s=m?T(m):j(E.pageXOffset,E.pageYOffset,L.clientWidth,L.clientHeight),p=v(a.w,a.h),function(e,t){o.width=e,o.height=t,o.style.width="".concat(e,"px"),o.style.height="".concat(t,"px")}(a.w*p,a.h*p),g.setTransform(1,0,0,1,0,0),g.clearRect(0,0,o.width,o.height),g.scale(p,p),r(O(a,a),y.back),t(y.styles),r(O(s,a),x?y.drag:y.view)}function c(e){e.preventDefault();var t=T(o),n=(e.pageX-t.x)/p-s.w*d,r=(e.pageY-t.y)/p-s.h*h;m?(m.scrollLeft=n,m.scrollTop=r):E.scrollTo(n,r),i()}function u(e){x=!1,o.style.cursor="pointer",P.style.cursor="auto",w(E,"mousemove",c),w(E,"mouseup",u),c(e)}function n(e){x=!0;var t=T(o),n=O(s,a);d=((e.pageX-t.x)/p-n.x)/n.w,h=((e.pageY-t.y)/p-n.y)/n.h,(d<0||1<d||h<0||1<h)&&(h=d=.5),o.style.cursor="crosshair",P.style.cursor="crosshair",b(E,"mousemove",c),b(E,"mouseup",u),c(e)}var l,f,a,s,p,d,h,y=Object.assign({},W,e),g=o.getContext("2d"),v=(l=o.clientWidth,f=o.clientHeight,function(e,t){return Math.min(l/e,f/t)}),m=y.viewport,x=!1;return o.style.cursor="pointer",b(o,"mousedown",n),b(m||E,"load resize scroll",i),0<y.interval&&setInterval(function(){return i()},y.interval),i(),{redraw:i}}}).call(this,t(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}])});

ghu.js

@@ -24,7 +24,10 @@ ghu.task('clean', () => {
 
 ghu.task('build:script', runtime => {
     return read(`${SRC}/${NAME}.js`)
-        .then(webpack(webpack.cfg_umd(NAME, [SRC]), {showStats: 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}))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pagemap",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Mini map for web pages.",
   "homepage": "https://larsjung.de/pagemap/",
   "bugs": "https://github.com/lrsjng/pagemap/issues",
@@ -13,15 +13,18 @@
   "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/core": "7.4.3",
+    "@babel/core": "7.4.4",
-    "@babel/preset-env": "7.4.3",
+    "@babel/preset-env": "7.4.4",
-    "babel-loader": "8.0.5",
     "eslint": "5.16.0",
-    "ghu": "0.17.0"
+    "ghu": "0.19.0",
+    "jsdom": "15.0.0",
+    "scar": "1.7.0"
   },
   "engines": {
     "node": ">=8.0.0"

src/demo/boxes.html

@@ -2,10 +2,15 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>pagemap boxes demo</title>
+    <title>pagemap demo - boxes</title>
-    <link rel="stylesheet" href="boxes.css">
+    <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: {
+            styles: { div: 'rgba(0,0,0,0.1)' },
-                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>
+    <title>pagemap demo - text</title>
-    <link rel="stylesheet" href="text.css">
+    <link rel="stylesheet" href="styles.css">
 </head>
-<body>
+<body id="text-demo">
-    <canvas id="map"></canvas>
+    <div id="banner">
-
+        <div><a href="https://larsjung.de/pagemap/">pagemap</a> demo</div>
-    <script src="pagemap.min.js"></script>
+        <div><strong>text</strong> - <a href="boxes.html">boxes</a></div>
-    <script>
+    </div>
-        pagemap(document.querySelector('#map'));
-    </script>
 
     <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,7 +1,7 @@
-const win = global.window;
+const WIN = global.window;
-const doc = win.document;
+const DOC = WIN.document;
-const doc_el = doc.documentElement;
+const DOC_EL = DOC.documentElement;
-const body = doc.querySelector('body');
+const body = DOC.querySelector('body');
 
 const black = pc => `rgba(0,0,0,${pc / 100})`;
 const defaults = {
@@ -25,16 +25,16 @@ const Rect = (x, y, w, h) => { return {x, y, w, h}; };
 const rect_rel_to = (rect, pos = {x: 0, y: 0}) => 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);
+    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);
+    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};
+    return {x: br.left + WIN.pageXOffset, y: br.top + WIN.pageYOffset};
 };
 
 const rect_of_el = el => {
@@ -70,7 +70,7 @@ 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;
 
@@ -125,7 +125,7 @@ module.exports = (canvas, options) => {
             viewport.scrollLeft = x;
             viewport.scrollTop = y;
         } else {
-            win.scrollTo(x, y);
+            WIN.scrollTo(x, y);
         }
         draw();
     };
@@ -134,8 +134,8 @@ module.exports = (canvas, options) => {
         drag = false;
         canvas.style.cursor = 'pointer';
         body.style.cursor = 'auto';
-        off(win, 'mousemove', on_drag);
+        off(WIN, 'mousemove', on_drag);
-        off(win, 'mouseup', on_drag_end);
+        off(WIN, 'mouseup', on_drag_end);
         on_drag(ev);
     };
 
@@ -153,15 +153,15 @@ module.exports = (canvas, options) => {
 
         canvas.style.cursor = 'crosshair';
         body.style.cursor = 'crosshair';
-        on(win, 'mousemove', on_drag);
+        on(WIN, 'mousemove', on_drag);
-        on(win, 'mouseup', on_drag_end);
+        on(WIN, 'mouseup', on_drag_end);
         on_drag(ev);
     };
 
     const init = () => {
         canvas.style.cursor = 'pointer';
         on(canvas, 'mousedown', on_drag_start);
-        on(viewport || win, 'load resize scroll', draw);
+        on(viewport || WIN, 'load resize scroll', draw);
         if (settings.interval > 0) {
             setInterval(() => draw(), settings.interval);
         }

test/index.js

@@ -0,0 +1,12 @@
+if (!global.window) {
+    global.window = new (require('jsdom')).JSDOM().window;
+}
+
+const {test, assert} = require('scar');
+const pagemap = require('../src/pagemap');
+
+test('access', () => {
+    assert.equal(typeof pagemap, 'function');
+});
+
+test.cli();