luna-dom-highlighter
Version:
Highlighter for html elements
234 lines (233 loc) • 8.47 kB
JavaScript
"use strict";
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.adoptStyleSheet = exports.constrainNumber = exports.ellipsify = exports.createElement = exports.createTextChild = exports.createChild = exports.log = exports.Overlay = void 0;
var Overlay = (function () {
function Overlay(window, style) {
if (style === void 0) { style = []; }
this.viewportSize = { width: 800, height: 600 };
this.deviceScaleFactor = 1;
this.emulationScaleFactor = 1;
this.pageScaleFactor = 1;
this.pageZoomFactor = 1;
this.scrollX = 0;
this.scrollY = 0;
this.canvasWidth = 0;
this.canvasHeight = 0;
this._installed = false;
this._window = window;
this._document = window.document;
if (!Array.isArray(style)) {
style = [style];
}
this.style = style;
}
Overlay.prototype.setCanvas = function (canvas) {
this.canvas = canvas;
this._context = canvas.getContext('2d');
};
Overlay.prototype.install = function () {
var e_1, _a;
try {
for (var _b = __values(this.style), _c = _b.next(); !_c.done; _c = _b.next()) {
var style = _c.value;
adoptStyleSheet(style);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
this._installed = true;
};
Overlay.prototype.uninstall = function () {
var e_2, _a;
var _loop_1 = function (style) {
document.adoptedStyleSheets = document.adoptedStyleSheets.filter(function (s) { return s !== style; });
};
try {
for (var _b = __values(this.style), _c = _b.next(); !_c.done; _c = _b.next()) {
var style = _c.value;
_loop_1(style);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
this._installed = false;
};
Overlay.prototype.reset = function (resetData) {
if (resetData) {
this.viewportSize = resetData.viewportSize;
this.visualViewportSize = resetData.visualViewportSize;
this.deviceScaleFactor = resetData.deviceScaleFactor;
this.pageScaleFactor = resetData.pageScaleFactor;
this.pageZoomFactor = resetData.pageZoomFactor;
this.emulationScaleFactor = resetData.emulationScaleFactor;
this.scrollX = Math.round(resetData.scrollX);
this.scrollY = Math.round(resetData.scrollY);
}
this.resetCanvas();
};
Overlay.prototype.resetCanvas = function () {
if (!this.canvas || !this._context) {
return;
}
this.canvas.width = this.deviceScaleFactor * this.viewportSize.width;
this.canvas.height = this.deviceScaleFactor * this.viewportSize.height;
this.canvas.style.width = this.viewportSize.width + 'px';
this.canvas.style.height = this.viewportSize.height + 'px';
this._context.scale(this.deviceScaleFactor, this.deviceScaleFactor);
this.canvasWidth = this.viewportSize.width;
this.canvasHeight = this.viewportSize.height;
};
Overlay.prototype.setPlatform = function (platform) {
this.platform = platform;
if (!this._installed) {
this.install();
}
};
Overlay.prototype.dispatch = function (message) {
var functionName = message.shift();
this[functionName].apply(this, message);
};
Overlay.prototype.eventHasCtrlOrMeta = function (event) {
return this.platform === 'mac' ? (event.metaKey && !event.ctrlKey) : (event.ctrlKey && !event.metaKey);
};
Object.defineProperty(Overlay.prototype, "context", {
get: function () {
if (!this._context) {
throw new Error('Context object is missing');
}
return this._context;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Overlay.prototype, "document", {
get: function () {
if (!this._document) {
throw new Error('Document object is missing');
}
return this._document;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Overlay.prototype, "window", {
get: function () {
if (!this._window) {
throw new Error('Window object is missing');
}
return this._window;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Overlay.prototype, "installed", {
get: function () {
return this._installed;
},
enumerable: false,
configurable: true
});
return Overlay;
}());
exports.Overlay = Overlay;
function log(text) {
var element = document.getElementById('log');
if (!element) {
element = createChild(document.body, 'div');
element.id = 'log';
}
createChild(element, 'div').textContent = text;
}
exports.log = log;
function createChild(parent, tagName, className) {
var element = createElement(tagName, className);
element.addEventListener('click', function (e) {
e.stopPropagation();
}, false);
parent.appendChild(element);
return element;
}
exports.createChild = createChild;
function createTextChild(parent, text) {
var element = document.createTextNode(text);
parent.appendChild(element);
return element;
}
exports.createTextChild = createTextChild;
function createElement(tagName, className) {
var element = document.createElement(tagName);
if (className) {
var classNames = className.split(/\s+/);
classNames = classNames.map(function (className) { return 'luna-dom-highlighter-' + className; });
element.className = classNames.join(' ');
}
return element;
}
exports.createElement = createElement;
function ellipsify(str, maxLength) {
if (str.length <= maxLength) {
return String(str);
}
return str.substr(0, maxLength - 1) + '\u2026';
}
exports.ellipsify = ellipsify;
function constrainNumber(num, min, max) {
if (num < min) {
num = min;
}
else if (num > max) {
num = max;
}
return num;
}
exports.constrainNumber = constrainNumber;
function adoptStyleSheet(styleSheet) {
document.adoptedStyleSheets = __spreadArray(__spreadArray([], __read(document.adoptedStyleSheets), false), [styleSheet], false);
}
exports.adoptStyleSheet = adoptStyleSheet;