mirror of
https://github.com/lrsjng/pagemap.git
synced 2025-09-25 19:58:59 +02:00
Compare commits
4 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
294813ff26 | ||
|
341bf3e960 | ||
|
84118a0463 | ||
|
407c6617db |
@@ -12,7 +12,7 @@ insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
|
||||
[{package.json,.eslintrc,.travis.yml}]
|
||||
[{*.json,*.yml,.eslintrc}]
|
||||
indent_size = 2
|
||||
|
||||
|
||||
|
@@ -1,6 +1,6 @@
|
||||
build
|
||||
coverage
|
||||
dist
|
||||
es5
|
||||
local
|
||||
node_modules
|
||||
/build/
|
||||
/coverage/
|
||||
/dist/
|
||||
/es5/
|
||||
/local/
|
||||
/node_modules/
|
||||
|
@@ -5,9 +5,6 @@
|
||||
es6: true
|
||||
node: true
|
||||
|
||||
ecmaFeatures:
|
||||
ecmaVersion: 6
|
||||
|
||||
rules:
|
||||
array-bracket-spacing: [2, never]
|
||||
arrow-parens: [2, as-needed]
|
||||
|
10
.gitignore
vendored
10
.gitignore
vendored
@@ -1,5 +1,5 @@
|
||||
build
|
||||
coverage
|
||||
local
|
||||
node_modules
|
||||
npm-debug.log
|
||||
/build/
|
||||
/coverage/
|
||||
/local/
|
||||
/node_modules/
|
||||
/npm-debug.log
|
||||
|
@@ -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
|
||||
|
4
dist/pagemap.min.js
vendored
4
dist/pagemap.min.js
vendored
@@ -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 v0.5.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(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e){(function(e){"use strict";var n=e.window,r=n.document,o=r.documentElement,i=r.querySelector("body"),c=function(t){return"rgba(0,0,0,"+t/100+")"},u={viewport:null,styles:{"header,footer,section,article":c(8),"h1,a":c(10),"h2,h3,h4":c(8)},back:c(2),view:c(5),drag:c(10),interval:null},l=function(t,e,n,r){return n.split(/\s+/).forEach(function(n){return t[e](n,r)})},f=function(t,e,n){return l(t,"addEventListener",e,n)},s=function(t,e,n){return l(t,"removeEventListener",e,n)},a=function(t,e,n,r){return{x:t,y:e,w:n,h:r}},h=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{x:0,y:0};return a(t.x-e.x,t.y-e.y,t.w,t.h)},p=function(){return a(0,0,o.scrollWidth,o.scrollHeight)},d=function(){return a(n.pageXOffset,n.pageYOffset,o.clientWidth,o.clientHeight)},v=function(t){var e=t.getBoundingClientRect();return{x:e.left+n.pageXOffset,y:e.top+n.pageYOffset}},y=function(t){var e=v(t),n=e.x,r=e.y;return a(n,r,t.offsetWidth,t.offsetHeight)},g=function(t){var e=v(t),n=e.x,r=e.y;return a(n+t.clientLeft,r+t.clientTop,t.clientWidth,t.clientHeight)},x=function(t){var e=v(t),n=e.x,r=e.y;return a(n+t.clientLeft-t.scrollLeft,r+t.clientTop-t.scrollTop,t.scrollWidth,t.scrollHeight)};t.exports=function(t,e){var o=Object.assign({},u,e),c=t.getContext("2d"),l=function(){var e=t.clientWidth,n=t.clientHeight;return function(t,r){return Math.min(e/t,n/r)}}(),a=function(e,n){t.width=e,t.height=n,t.style.width=e+"px",t.style.height=n+"px"},v=o.viewport,m=function(t){return Array.from((v||r).querySelectorAll(t))},w=!1,b=void 0,E=void 0,H=void 0,L=void 0,O=void 0,T=function(t,e){e&&(c.beginPath(),c.rect(t.x,t.y,t.w,t.h),c.fillStyle=e,c.fill())},W=function(t){Object.keys(t).forEach(function(e){var n=t[e];m(e).forEach(function(t){T(h(y(t),b),n)})})},j=function(){b=v?x(v):p(),E=v?g(v):d(),H=l(b.w,b.h),a(b.w*H,b.h*H),c.setTransform(1,0,0,1,0,0),c.clearRect(0,0,t.width,t.height),c.scale(H,H),T(h(b,b),o.back),W(o.styles),T(h(E,b),w?o.drag:o.view)},X=function(e){e.preventDefault();var r=g(t),o=(e.pageX-r.x)/H-E.w*L,i=(e.pageY-r.y)/H-E.h*O;v?(v.scrollLeft=o,v.scrollTop=i):n.scrollTo(o,i),j()},Y=function e(r){w=!1,t.style.cursor="pointer",i.style.cursor="auto",s(n,"mousemove",X),s(n,"mouseup",e),X(r)},k=function(e){w=!0;var r=g(t),o=h(E,b);L=((e.pageX-r.x)/H-o.x)/o.w,O=((e.pageY-r.y)/H-o.y)/o.h,(L<0||L>1||O<0||O>1)&&(L=.5,O=.5),t.style.cursor="crosshair",i.style.cursor="crosshair",f(n,"mousemove",X),f(n,"mouseup",Y),X(e)},S=function(){t.style.cursor="pointer",f(t,"mousedown",k),f(v||n,"load resize scroll",j),o.interval>0&&setInterval(function(){return j()},o.interval),j()};return S(),{redraw:j}}}).call(e,function(){return this}())}])});
|
2
ghu.js
2
ghu.js
@@ -39,7 +39,7 @@ ghu.task('build:script', runtime => {
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
cacheDirectory: true,
|
||||
presets: ['es2015']
|
||||
presets: ['env']
|
||||
}
|
||||
}
|
||||
]
|
||||
|
6687
package-lock.json
generated
Normal file
6687
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pagemap",
|
||||
"version": "0.3.0",
|
||||
"version": "0.5.0",
|
||||
"description": "Mini map for web pages.",
|
||||
"homepage": "https://larsjung.de/pagemap/",
|
||||
"bugs": "https://github.com/lrsjng/pagemap/issues",
|
||||
@@ -17,12 +17,12 @@
|
||||
"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-loader": "7.0.0",
|
||||
"babel-preset-env": "1.7.0",
|
||||
"eslint": "5.15.1",
|
||||
"ghu": "0.13.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
"node": ">=8.0.0"
|
||||
}
|
||||
}
|
||||
|
108
src/pagemap.js
108
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);
|
||||
|
67
src/rect.js
67
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
|
||||
);
|
||||
};
|
Reference in New Issue
Block a user