mirror of
https://github.com/lrsjng/pagemap.git
synced 2025-08-20 20:02:21 +02:00
Update.
This commit is contained in:
Lars Jung
188
dist/pagemap.js
vendored
188
dist/pagemap.js
vendored
@@ -1,4 +1,4 @@
|
||||
/*! pagemap v1.1.0 - https://larsjung.de/pagemap/ */
|
||||
/*! pagemap v1.2.0 - https://larsjung.de/pagemap/ */
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
@@ -99,102 +99,100 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
/* 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');
|
||||
/* 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 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 black = function black(pc) {
|
||||
return "rgba(0,0,0,".concat(pc / 100, ")");
|
||||
};
|
||||
};
|
||||
|
||||
var rect_rel_to = function rect_rel_to(rect) {
|
||||
var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
||||
x: 0,
|
||||
y: 0
|
||||
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);
|
||||
});
|
||||
};
|
||||
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 on = function on(el, types, fn) {
|
||||
return _listener(el, 'addEventListener', types, fn);
|
||||
};
|
||||
};
|
||||
|
||||
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;
|
||||
var off = function off(el, types, fn) {
|
||||
return _listener(el, 'removeEventListener', types, fn);
|
||||
};
|
||||
|
||||
return Rect(x, y, el.offsetWidth, el.offsetHeight);
|
||||
};
|
||||
var Rect = function Rect(x, y, w, h) {
|
||||
return {
|
||||
x: x,
|
||||
y: y,
|
||||
w: w,
|
||||
h: h
|
||||
};
|
||||
};
|
||||
|
||||
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;
|
||||
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);
|
||||
};
|
||||
|
||||
return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
|
||||
};
|
||||
var rect_of_doc = function rect_of_doc() {
|
||||
return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
|
||||
};
|
||||
|
||||
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;
|
||||
var rect_of_win = function rect_of_win() {
|
||||
return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
|
||||
};
|
||||
|
||||
return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
|
||||
};
|
||||
var el_get_offset = function el_get_offset(el) {
|
||||
var br = el.getBoundingClientRect();
|
||||
return {
|
||||
x: br.left + WIN.pageXOffset,
|
||||
y: br.top + WIN.pageYOffset
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = function (canvas, options) {
|
||||
var settings = Object.assign({}, defaults, options);
|
||||
var context = canvas.getContext('2d');
|
||||
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;
|
||||
@@ -225,14 +223,12 @@ module.exports = function (canvas, options) {
|
||||
var drag_ry;
|
||||
|
||||
var draw_rect = function draw_rect(rect, col) {
|
||||
if (!col) {
|
||||
return;
|
||||
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();
|
||||
};
|
||||
|
||||
var apply_styles = function apply_styles(styles) {
|
||||
@@ -249,9 +245,9 @@ module.exports = function (canvas, options) {
|
||||
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);
|
||||
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);
|
||||
@@ -276,7 +272,7 @@ module.exports = function (canvas, options) {
|
||||
var on_drag_end = function on_drag_end(ev) {
|
||||
drag = false;
|
||||
canvas.style.cursor = 'pointer';
|
||||
body.style.cursor = 'auto';
|
||||
BODY.style.cursor = 'auto';
|
||||
off(WIN, 'mousemove', on_drag);
|
||||
off(WIN, 'mouseup', on_drag_end);
|
||||
on_drag(ev);
|
||||
@@ -295,7 +291,7 @@ module.exports = function (canvas, options) {
|
||||
}
|
||||
|
||||
canvas.style.cursor = 'crosshair';
|
||||
body.style.cursor = 'crosshair';
|
||||
BODY.style.cursor = 'crosshair';
|
||||
on(WIN, 'mousemove', on_drag);
|
||||
on(WIN, 'mouseup', on_drag_end);
|
||||
on_drag(ev);
|
||||
|
||||
Reference in New Issue
Block a user