wj-elements
Version:
WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.
132 lines (131 loc) • 5.99 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import WJElement from "./wje-element.js";
import { I as Icon } from "./icon-DY5AZ6xM.js";
function drag(container, options) {
function move(pointerEvent) {
const dims = container.getBoundingClientRect();
const defaultView = container.ownerDocument.defaultView;
const offsetX = dims.left + defaultView.pageXOffset;
const offsetY = dims.top + defaultView.pageYOffset;
const x = pointerEvent.pageX - offsetX;
const y = pointerEvent.pageY - offsetY;
if (options == null ? void 0 : options.onMove) {
options.onMove(x, y);
}
}
function stop() {
document.removeEventListener("pointermove", move);
document.removeEventListener("pointerup", stop);
if (options == null ? void 0 : options.onStop) {
options.onStop();
}
}
document.addEventListener("pointermove", move, { passive: true });
document.addEventListener("pointerup", stop);
if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
move(options.initialEvent);
}
}
const styles = "/*\n[ WJ Image Compare ]\n*/\n\n:host {\n display: inline-block;\n position: relative;\n width: 100%;\n border-color: var(--wje-border-color);\n border-style: solid;\n border-width: 1px;\n}\n\n.wje-before,\n.wje-after {\n display: block;\n}\n\n.wje-after {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n clip-path: var(--wje-img-compare-clip-path);\n}\n\n.native-split-view {\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.wje-divider {\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n z-index: 1;\n background-color: var(--wje-img-compare-divider-background);\n height: 100%;\n width: var(--wje-img-compare-divider-size);\n cursor: col-resize;\n top: 0;\n left: var(--wje-img-compare-divider-left);\n &:after {\n display: flex;\n content: '';\n position: absolute;\n height: 100%;\n left: calc(var(--wje-img-compare-divider-area) / -2 + var(--wje-img-compare-divider-size) / 2);\n width: var(---wje-img-compare-divider-area);\n }\n wje-icon {\n position: absolute;\n background-color: white;\n padding: 0.5rem;\n color: var(--wje-color-dark);\n border-radius: var(--wje-border-radius-circle);\n box-shadow: rgba(82, 63, 105, 0.2) 0 0 30px 10px;\n background: var(--wje-color-white) !important;\n }\n}\n";
class ImgComparer extends WJElement {
/**
* Creates an instance of ImgComparer.
* @class
*/
constructor() {
super();
/**
* Dependencies of the ImgComparer component.
* @property {object} dependencies
*/
__publicField(this, "dependencies", {
"wje-icon": Icon
});
__publicField(this, "className", "ImgComparer");
/**
* Handles the drag event.
* @param {Event} e The event.
*/
__publicField(this, "handleDrag", (e) => {
const { width } = this.native.getBoundingClientRect();
drag(this, {
onMove: (x) => {
let value = x / width * 100;
this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));
this.native.style.setProperty("--wje-img-compare-divider-left", this.position + "%");
this.native.style.setProperty("--wje-img-compare-clip-path", `inset(0 ${100 - this.position}% 0 0)`);
},
initialEvent: e
});
});
/**
* Clamps a number between a minimum and maximum value.
* @param {number} num The number to clamp.
* @param {number} min The minimum value.
* @param {number} max The maximum value.
* @returns {number} The clamped number.
*/
__publicField(this, "clamp", (num, min, max) => Math.min(Math.max(num, min), max));
}
/**
* Returns the CSS styles for the component.
* @static
* @returns {CSSStyleSheet}
*/
static get cssStyleSheet() {
return styles;
}
/**
* Returns the list of attributes to observe for changes.
* @static
* @returns {Array<string>}
*/
static get observedAttributes() {
return [];
}
/**
* Sets up the attributes for the component.
*/
setupAttributes() {
this.isShadowRoot = "open";
}
/**
* Draws the component.
* @returns {DocumentFragment}
*/
draw() {
let fragment = document.createDocumentFragment();
let native = document.createElement("div");
native.classList.add("native-split-view");
let beforeElement = document.createElement("div");
beforeElement.classList.add("wje-before");
let before = document.createElement("slot");
before.setAttribute("name", "before");
let afterElement = document.createElement("div");
afterElement.classList.add("wje-after");
let after = document.createElement("slot");
after.setAttribute("name", "after");
let icon = document.createElement("wje-icon");
icon.setAttribute("name", "arrow-bar-both");
let dividerElement = document.createElement("div");
dividerElement.classList.add("wje-divider");
dividerElement.setAttribute("part", "divider");
dividerElement.addEventListener("mousedown", this.handleDrag, false);
beforeElement.appendChild(before);
afterElement.appendChild(after);
dividerElement.appendChild(icon);
native.appendChild(beforeElement);
native.appendChild(afterElement);
native.appendChild(dividerElement);
fragment.appendChild(native);
this.native = native;
return fragment;
}
}
ImgComparer.define("wje-img-comparer", ImgComparer);
export {
ImgComparer as default
};
//# sourceMappingURL=wje-img-comparer.js.map