Update.

.editorconfig

@@ -12,7 +12,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 
 
-[{package.json,.eslintrc,.travis.yml}]
+[{*.json,*.yml,.eslintrc}]
 indent_size = 2
 
 

.eslintignore

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

.eslintrc

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

.gitignore

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

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]
 
 Mini map for web pages.
 
@@ -10,7 +10,7 @@ Mini map for web pages.
 
 add a `canvas` tag to your HTML page:
 ```html
-<canvas id='#map'></canvas>
+<canvas id='map'></canvas>
 ```
 
 fix it's position on the screen:
@@ -45,7 +45,7 @@ pagemap(document.querySelector('#map'), {
 ## License
 The MIT License (MIT)
 
-Copyright (c) 2016 Lars Jung (https://larsjung.de)
+Copyright (c) 2019 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,6 @@ 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
 
 [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 +77,3 @@ 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

dist/pagemap.min.js

@@ -1,2 +1,2 @@
-/*! pagemap v0.3.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 L(e){v=!1,t.style.cursor="pointer",c.style.cursor="auto",a(r,"mousemove",O),a(r,"mouseup",L),O(e)},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,(0>x||x>1||0>m||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]?{x:0,y:0}:arguments[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.0.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}])});

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,10 @@ 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]), {showStats: false}))
+        .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.3.0",
+  "version": "1.0.0",
   "description": "Mini map for web pages.",
   "homepage": "https://larsjung.de/pagemap/",
   "bugs": "https://github.com/lrsjng/pagemap/issues",
@@ -17,12 +17,13 @@
     "precommit": "npm run -s lint && npm run -s build"
   },
   "devDependencies": {
-    "babel-loader": "6.2.4",
-    "babel-preset-es2015": "6.9.0",
-    "eslint": "3.0.0",
-    "ghu": "0.6.0"
+    "@babel/core": "7.4.3",
+    "@babel/preset-env": "7.4.3",
+    "babel-loader": "8.0.5",
+    "eslint": "5.16.0",
+    "ghu": "0.17.0"
   },
   "engines": {
-    "node": ">=6.0.0"
+    "node": ">=8.0.0"
   }
 }

src/pagemap.js

@@ -1,7 +1,6 @@
-const Rect = require('./rect');
-
 const win = global.window;
 const doc = win.document;
+const doc_el = doc.documentElement;
 const body = doc.querySelector('body');
 
 const black = pc => `rgba(0,0,0,${pc / 100})`;
@@ -22,18 +21,48 @@ const _listener = (el, method, types, fn) => types.split(/\s+/).forEach(type =>
 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}) => 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);
+};
+
 module.exports = (canvas, options) => {
     const settings = Object.assign({}, defaults, options);
-
     const context = canvas.getContext('2d');
 
-    const calcScale = (() => {
+    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`;
@@ -45,13 +74,13 @@ module.exports = (canvas, options) => {
 
     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) => {
+    const draw_rect = (rect, col) => {
         if (!col) {
             return;
         }
@@ -61,36 +90,36 @@ module.exports = (canvas, options) => {
         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);
 
-        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;
@@ -101,38 +130,37 @@ module.exports = (canvas, options) => {
         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);
+        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);
+        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(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
-    );
-};