italia2024/js/_enchants/_copy-clipBoard.js

Italia 2024 assets

(function () {
//CSS
var insertStyle = document.createElement('style');
insertStyle.insertAdjacentHTML('beforeend', `@charset "utf-8";
/* .copying */
:is(*, magique) .copying[data-copy] {
	cursor: pointer;
	filter: brightness(1);
}

:is(*, magique) .copying[data-copy]>span {
	position: relative;
	padding-left: 0.5em;
	padding-right: 1.5em;
	transition: all .3s ease;
}

:is(*, magique) .copying[data-copy]>span::before {
	position: absolute;
	top: 0px;
	right: 0.1em;
	bottom: 0px;
	margin: auto;
	width: 1em;
	height: 1em;
	border-radius: 999em;
	background-color: transparent;
	color: #FFF;
	font-size: 1.3em;
	line-height: 1;
	/* Material Symbols */
	font-family: 'Material Symbols Sharp';
	font-variation-settings: 'FILL' 0, 'wght' 400;
	transition: all .3s ease;
}

:is(*, magique) .copying[data-copy]>span::before {
	content: "\\e14d";
}

@media (any-hover: hover) {
	:is(*, magique) .copying[data-copy]:is(:hover, :focus) {
		filter: brightness(1.08);
		opacity: 0.85;
	}

	:is(*, magique) .copying[data-copy]:is(:hover, :focus)>span {
		padding-left: 0.4em;
		padding-right: 1.6em;
		filter: brightness(1.08);
		opacity: 1;
	}

	:is(*, magique) .copying[data-copy]:is(:hover, :focus)>span::before {
		right: 0em;
	}
}
`);
document.getElementsByTagName('head')[0].appendChild(insertStyle);

//html読込時（ready）の処理
let arrCopyings = Array.prototype.slice.call(document.querySelectorAll(".copying")); //Arr.NodeList

//クリック時のイベント／登録
let phancForClckNUJA = function () {
  let lngtNUJA = arrCopyings.length;
  for (let n = 0; n < lngtNUJA; n++) {
    arrCopyings[n].addEventListener('click', function (event) {
      //Prevent the default action
      event.preventDefault();

      //Get the text from the data-copy attribute
      var dataCopy = event.currentTarget.getAttribute("data-copy");

      //Copy the text to the clipboard
      navigator.clipboard.writeText(dataCopy).then(function () {
        console.log("Copying to clipboard was successful!");

        //Create a new div element and set its text to 'copied'
        var messageElement = document.createElement("div");
        messageElement.textContent = "copied!";
        messageElement.style.position = "fixed";
        messageElement.style.zIndex = "9999";
        messageElement.style.left = "50%";
        messageElement.style.top = "50%";
        messageElement.style.transform = "translate(-50%, -50%)";
        messageElement.style.padding = "20px";
        messageElement.style.backgroundColor = "white";
        messageElement.style.border = "1px solid black";

        //Add the new element to the DOM
        document.body.appendChild(messageElement);

        //Remove the message element after 2 seconds
        setTimeout(function () {
          document.body.removeChild(messageElement);
        }, 2000);
      }, function (err) {
        console.error("Could not copy text: ", err);
      });
      event.currentTarget.classList.add('copied');
    });
  }
}(); ///.for.addEventListener('click'
})(); ///function