storybook-addon-measure-viewport
Version:
Measures the height and width of the current viewport
95 lines (70 loc) • 9.53 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.withMeasureViewport = void 0;
var _addons = require("@storybook/addons");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var style = "#measureViewport {\n position: fixed;\n padding: 0;\n margin: 0;\n border-radius: 3px;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n pointer-events: none;\n user-select: none;\n mix-blend-mode: multiply;\n}\n.measure {\n position: absolute;\n text-align: right;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: monospace;\n letter-spacing: 0.05ch;\n font-weight: bold;\n color: var(--color);\n font-size: 1rem;\n block-size: 12px;\n margin-block: 10px;\n}\n.measure--width {\n left: 0;\n right: 0;\n background-image: \n repeating-linear-gradient(\n transparent, \n transparent 6px, \n currentColor 6px, \n currentColor 7px, \n transparent 7px\n ),\n repeating-linear-gradient(\n 90deg,\n transparent, \n transparent 16px, \n currentColor 17px, \n transparent 17px,\n transparent 20px\n );\n}\n.measure--width.measure--top {\n top: 0;\n}\n.measure--width.measure--middle {\n top: calc(50vh - 1rem);\n z-index: -1;\n}\n.measure--width.measure--bottom {\n bottom: 0;\n}\n.measure--width.measure--none {\n display: none;\n}\n.measure--height {\n top: 0;\n bottom: 0;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n background-image: \n repeating-linear-gradient(\n 90deg,\n transparent, \n transparent 6px, \n currentColor 6px, \n currentColor 7px, \n transparent 7px\n ),\n repeating-linear-gradient(\n transparent, \n transparent 16px, \n currentColor 17px, \n transparent 17px,\n transparent 20px\n );\n}\n.measure--height.measure--left {\n left: 0;\n}\n.measure--height.measure--middle {\n left: calc(50vw - 1rem);\n}\n.measure--height.measure--right {\n right: 0;\n}\n.measure--height.measure--none {\n display: none;\n}\n.measure-text {\n flex: 0 0 auto;\n padding-inline: 0.25rem;\n padding-block: 0.125rem 0.25rem;\n background: #fff;\n}\n.measure--prevent-overlap {\n justify-content: flex-start;\n}\n.measure--prevent-overlap .measure-text {\n margin-inline-start: calc(30%);\n}\n";
var withMeasureViewport = function withMeasureViewport(StoryFn) {
var _useGlobals = (0, _addons.useGlobals)(),
_useGlobals2 = _slicedToArray(_useGlobals, 1),
measureViewportActive = _useGlobals2[0].measureViewportActive;
var params = (0, _addons.useParameter)("measureViewport");
var measureViewportEl = document.createElement("div");
measureViewportEl.id = "measureViewport";
measureViewportEl.style.setProperty("--color", (params === null || params === void 0 ? void 0 : params.color) || "#e9004e");
(0, _addons.useEffect)(function () {
function measureWindow() {
var _params$height, _params$width, _params$height2, _params$height3, _params$height4, _params$height5, _params$height6, _params$width2, _params$width3, _params$height7, _params$width4, _params$width5, _params$width6, _params$width7;
var _document$documentEle = document.documentElement,
clientHeight = _document$documentEle.clientHeight,
clientWidth = _document$documentEle.clientWidth;
var _window = window,
innerHeight = _window.innerHeight,
innerWidth = _window.innerWidth;
function getMeasurement(measure) {
var measurement;
switch (measure) {
case "clientHeight":
measurement = clientHeight;
break;
case "clientWidth":
measurement = clientWidth;
break;
case "innerHeight":
measurement = innerHeight;
break;
case "innerWidth":
measurement = innerWidth;
break;
default:
measurement = 0;
break;
}
return measurement;
}
measureViewportEl.innerHTML = "\n <style>".concat(style, "</style>\n \n <div \n class=\"measure measure--height measure--").concat((params === null || params === void 0 ? void 0 : (_params$height = params.height) === null || _params$height === void 0 ? void 0 : _params$height.display) || "left", " measure--").concat((params === null || params === void 0 ? void 0 : (_params$width = params.width) === null || _params$width === void 0 ? void 0 : _params$width.display) === "middle" && (params === null || params === void 0 ? void 0 : (_params$height2 = params.height) === null || _params$height2 === void 0 ? void 0 : _params$height2.display) === "middle" && "prevent-overlap", "\"\n ").concat((params === null || params === void 0 ? void 0 : (_params$height3 = params.height) === null || _params$height3 === void 0 ? void 0 : _params$height3.color) && "style=\"--color: ".concat(params === null || params === void 0 ? void 0 : (_params$height4 = params.height) === null || _params$height4 === void 0 ? void 0 : _params$height4.color, "\""), "\n >\n <span \n class=\"measure-text \n aria-label=\"height: ").concat(getMeasurement(params === null || params === void 0 ? void 0 : (_params$height5 = params.height) === null || _params$height5 === void 0 ? void 0 : _params$height5.measure) || innerHeight, "px\">\n ").concat(getMeasurement(params === null || params === void 0 ? void 0 : (_params$height6 = params.height) === null || _params$height6 === void 0 ? void 0 : _params$height6.measure) || innerHeight, "px\n </span>\n </div>\n \n <div \n class=\"measure measure--width measure--").concat((params === null || params === void 0 ? void 0 : (_params$width2 = params.width) === null || _params$width2 === void 0 ? void 0 : _params$width2.display) || "top", " measure--").concat((params === null || params === void 0 ? void 0 : (_params$width3 = params.width) === null || _params$width3 === void 0 ? void 0 : _params$width3.display) === "middle" && (params === null || params === void 0 ? void 0 : (_params$height7 = params.height) === null || _params$height7 === void 0 ? void 0 : _params$height7.display) === "middle" && "prevent-overlap", "\"\n ").concat((params === null || params === void 0 ? void 0 : (_params$width4 = params.width) === null || _params$width4 === void 0 ? void 0 : _params$width4.color) && "style=\"--color: ".concat(params === null || params === void 0 ? void 0 : (_params$width5 = params.width) === null || _params$width5 === void 0 ? void 0 : _params$width5.color, "\""), "\n \n >\n <span \n class=\"measure-text\" \n aria-label=\"width: ").concat(getMeasurement(params === null || params === void 0 ? void 0 : (_params$width6 = params.width) === null || _params$width6 === void 0 ? void 0 : _params$width6.measure) || innerWidth, "px\">\n ").concat(getMeasurement(params === null || params === void 0 ? void 0 : (_params$width7 = params.width) === null || _params$width7 === void 0 ? void 0 : _params$width7.measure) || innerWidth, "px\n\n </span>\n </div>\n ");
}
if (measureViewportActive) {
measureWindow();
document.querySelector("body").insertAdjacentElement("beforeend", measureViewportEl);
} else {
var _document$querySelect;
(_document$querySelect = document.querySelector("#measureViewport")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.remove();
}
window.addEventListener("resize", measureWindow);
return function () {
var _document$querySelect2;
(_document$querySelect2 = document.querySelector("#measureViewport")) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.remove();
window.removeEventListener("resize", measureWindow);
};
}, [measureViewportActive]);
return StoryFn();
};
exports.withMeasureViewport = withMeasureViewport;