Skip to content
Snippets Groups Projects
Verified Commit 85b639d0 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: update the copy component #259

parent 22c1bfaf
No related branches found
No related tags found
No related merge requests found
export const projectRoot = "/home/vs/workspaces/oss/monster/monster";
export const sourcePath = "/home/vs/workspaces/oss/monster/monster/source";
export const developmentPath = "/home/vs/workspaces/oss/monster/monster/development";
export const pnpxBin = "/nix/store/hd8c9fhdqv36nyh5zg4z32ccficlz9n8-pnpm-8.15.5/bin/pnpx";
export const nodeBin = "/nix/store/k5inwzpp6a0295pd3nfckk9hq8wmifhz-nodejs-20.15.1/bin/node";
export const pnpxBin = "/nix/store/2viji2z5i8ifq0ymhir2z8yyk1g29ddz-pnpm-8.15.5/bin/pnpx";
export const nodeBin = "/nix/store/if6aqyl3sl0hz14a12mndj35swb1mcwi-nodejs-20.17.0/bin/node";
export const license = "/**" + "\n" +
" * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved." + "\n" +
" * Node module: @schukai/monster" + "\n" +
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>copy control should close after leave div #259</title>
<script src="./259.mjs" type="module"></script>
</head>
<body>
<h1>copy control should close after leave div #259</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/259">Issue #259</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-copy>
<span> das ist der text 1</span>
</monster-copy>
<br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy> <br>
<br>
<br>
<monster-copy>
das ist der text 2
</monster-copy>
</main>
</body>
</html>
/**
* @file development/issues/open/259.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/259
* @description copy control should close after leave div
* @issue 259
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/content/copy.mjs";
......@@ -5,7 +5,9 @@
"commonFlake": "commonFlake",
"flake-utils": "flake-utils",
"flakeUtils": "flakeUtils",
"nixpkgs": "nixpkgs_2",
"nixpkgs": [
"nixpkgs"
],
"nixpkgsUnstable": "nixpkgsUnstable",
"versionFlake": "versionFlake"
},
......@@ -45,7 +47,9 @@
},
"commonFlake_2": {
"inputs": {
"nixpkgs": "nixpkgs_4"
"nixpkgs": [
"nixpkgs"
]
},
"locked": {
"dir": "common",
......@@ -148,22 +152,6 @@
}
},
"nixpkgs_2": {
"locked": {
"lastModified": 1726447378,
"narHash": "sha256-2yV8nmYE1p9lfmLHhOCbYwQC/W8WYfGQABoGzJOb1JQ=",
"owner": "nixos",
"repo": "nixpkgs",
"rev": "086b448a5d54fd117f4dc2dee55c9f0ff461bdc1",
"type": "github"
},
"original": {
"owner": "nixos",
"ref": "nixos-24.05",
"repo": "nixpkgs",
"type": "github"
}
},
"nixpkgs_3": {
"locked": {
"lastModified": 1704145853,
"narHash": "sha256-G/1AMt9ibpeMlcxvD1vNaC8imGaK+g7zZ99e29BLgWw=",
......@@ -178,28 +166,13 @@
"type": "indirect"
}
},
"nixpkgs_4": {
"locked": {
"lastModified": 1714971268,
"narHash": "sha256-IKwMSwHj9+ec660l+I4tki/1NRoeGpyA2GdtdYpAgEw=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "27c13997bf450a01219899f5a83bd6ffbfc70d3c",
"type": "github"
},
"original": {
"id": "nixpkgs",
"ref": "nixos-23.11",
"type": "indirect"
}
},
"nixpkgs_5": {
"nixpkgs_3": {
"locked": {
"lastModified": 1728193676,
"narHash": "sha256-PbDWAIjKJdlVg+qQRhzdSor04bAPApDqIv2DofTyynk=",
"lastModified": 1731239293,
"narHash": "sha256-q2yjIWFFcTzp5REWQUOU9L6kHdCDmFDpqeix86SOvDc=",
"owner": "nixos",
"repo": "nixpkgs",
"rev": "ecbc1ca8ffd6aea8372ad16be9ebbb39889e55b6",
"rev": "9256f7c71a195ebe7a218043d9f93390d49e6884",
"type": "github"
},
"original": {
......@@ -209,27 +182,12 @@
"type": "github"
}
},
"nixpkgs_6": {
"locked": {
"lastModified": 1704145853,
"narHash": "sha256-G/1AMt9ibpeMlcxvD1vNaC8imGaK+g7zZ99e29BLgWw=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "2d2ea8eab9e400618748ab1a6a108255233b602c",
"type": "github"
},
"original": {
"id": "nixpkgs",
"ref": "nixos-23.11",
"type": "indirect"
}
},
"root": {
"inputs": {
"certificatesFlake": "certificatesFlake",
"commonFlake": "commonFlake_2",
"flake-utils": "flake-utils_2",
"nixpkgs": "nixpkgs_5",
"nixpkgs": "nixpkgs_3",
"versionFlake": "versionFlake_2"
}
},
......@@ -280,7 +238,7 @@
},
"versionFlake": {
"inputs": {
"nixpkgs": "nixpkgs_3"
"nixpkgs": "nixpkgs_2"
},
"locked": {
"lastModified": 1716914109,
......@@ -298,7 +256,9 @@
},
"versionFlake_2": {
"inputs": {
"nixpkgs": "nixpkgs_6"
"nixpkgs": [
"nixpkgs"
]
},
"locked": {
"lastModified": 1716914109,
......
......@@ -8,16 +8,19 @@
commonFlake = {
url = "git+https://gitlab.schukai.com/schukai/entwicklung/nix-flakes.git?dir=common";
flake = true;
inputs.nixpkgs.follows = "nixpkgs";
};
versionFlake = {
url = "git+https://gitlab.schukai.com/oss/utilities/version.git";
flake = true;
inputs.nixpkgs.follows = "nixpkgs";
};
certificatesFlake = {
url = "git+https://gitlab.schukai.com/alvine/certificates.git";
flake = true;
inputs.nixpkgs.follows = "nixpkgs";
};
};
......
This diff is collapsed.
......@@ -8,6 +8,8 @@
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH.
*
* SPDX-License-Identifier: AGPL-3.0
*/
import {instanceSymbol} from "../../constants.mjs";
......@@ -25,6 +27,8 @@ import {
registerCustomElement,
} from "../../dom/customelement.mjs";
import {getDocument} from "../../dom/util.mjs";
import {isString} from "../../types/is.mjs";
import {validateString} from "../../types/validate.mjs";
import {STYLE_DISPLAY_MODE_BLOCK} from "../form/constants.mjs";
import {CopyStyleSheet} from "./stylesheet/copy.mjs";
import {fireCustomEvent} from "../../dom/events.mjs";
......@@ -39,6 +43,12 @@ export { Copy };
*/
const timerCallbackSymbol = Symbol("timerCallback");
/**
* @private
* @type {symbol}
*/
const timerDelaySymbol = Symbol("timerDelay");
/**
* @private
* @type {symbol}
......@@ -170,7 +180,7 @@ class Copy extends CustomElement {
},
popper: {
placement: "top",
middleware: ["autoPlacement", "shift", "offset:15", "arrow"],
middleware: ["autoPlacement", "offset:-1", "arrow"],
},
});
}
......@@ -195,7 +205,17 @@ class Copy extends CustomElement {
* @return {Copy}
*/
showDialog() {
if (this[timerDelaySymbol] instanceof DeadMansSwitch) {
try {
this[timerDelaySymbol].defuse();
} catch (e) {
}
}
this[timerDelaySymbol] = new DeadMansSwitch(500, () => {
show.call(this);
});
return this;
}
......@@ -205,6 +225,13 @@ class Copy extends CustomElement {
* @return {Copy}
*/
hideDialog() {
if (this[timerDelaySymbol] instanceof DeadMansSwitch) {
try {
this[timerDelaySymbol].defuse();
} catch (e) {
}
}
hide.call(this);
return this;
}
......@@ -354,6 +381,13 @@ function initEventHandler() {
this.showDialog();
});
this[controlElementSymbol].addEventListener("mouseleave", (event) => {
if (this.getOption("features.preventOpenEventSent") === true) {
event.preventDefault();
}
this.hideDialog();
});
this[controlElementSymbol].addEventListener("focus", (event) => {
if (this.getOption("features.preventOpenEventSent") === true) {
event.preventDefault();
......@@ -372,16 +406,7 @@ function initEventHandler() {
element: self,
});
const nodes = getSlottedElements.call(self, ":scope");
let text = "";
for (const node of nodes) {
if (self.getOption("features.stripTags")) {
text += node.textContent;
} else {
text += node.outerHTML;
}
}
const text = getSlottedCopyContent.call(self);
navigator.clipboard
.writeText(text)
......@@ -420,6 +445,42 @@ function initEventHandler() {
return this;
}
/**
* @private
* @returns {Set<any>|string}
*/
function getSlottedCopyContent() {
const self = this;
const result = new Set();
if (!(this.shadowRoot instanceof ShadowRoot)) {
return result;
}
const slots = this.shadowRoot.querySelectorAll("slot");
let text = "";
for (const [, slot] of Object.entries(slots)) {
slot.assignedNodes().forEach(function (node) {
if (
node instanceof HTMLElement ||
node instanceof SVGElement ||
node instanceof MathMLElement
) {
if (self.getOption("features.stripTags")) {
text += node.textContent.trim();
} else {
text += node.outerHTML.trim();
}
} else {
text += node.textContent.trim();
}
});
}
return text;
}
/**
* @private
* @return {void}
......@@ -450,7 +511,8 @@ function getTemplate() {
<div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
<div data-monster-role="arrow"></div>
<button data-monster-role="button" part="button">
<svg data-monster-role="icon-map"><defs>
<svg data-monster-role="icon-map">
<defs>
<g id="copy">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
......@@ -471,7 +533,11 @@ function getTemplate() {
</g>
</defs>
</svg><svg data-monster-role="icon" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 16 16"><use href="#copy"></use></svg>
</svg>
<svg data-monster-role="icon" xmlns="http://www.w3.org/2000/svg" width="25" height="25"
viewBox="0 0 16 16">
<use href="#copy"></use>
</svg>
</button>
</div>
</div>`;
......
......@@ -63,11 +63,23 @@ class DeadMansSwitch extends Base {
}
clearTimeout(this[internalSymbol]["timer"]);
initCallback.call(this);
return this;
}
/**
* @throws {Error} has already run
* @returns {DeadMansSwitch}
*/
defuse() {
if (this[internalSymbol]["isAlreadyRun"] === true) {
throw new Error("has already run");
}
clearTimeout(this[internalSymbol]["timer"]);
return this;
}
}
/**
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment