diff --git a/docs/css/styles.css b/docs/css/styles.css index 657c3bfa36a..0b502896674 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -527,3 +527,25 @@ code { pre { font-family: "Source Code Pro", monospace; } + +#notification-box { + background-color: rgb(36, 36, 36); + border-radius: 15px; + box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .2); + text-align: center; + color: rgb(40, 236, 40); + font-weight: bold; + transition: all .2s; + /*transition-delay: .3s;*/ + opacity: 0; + position: fixed; + left: 50%; + top: 92%; + padding: 10px; + transform: translate(-50%, -50%); +} + +.activate-notification { + opacity: 1 !important; + transform: translateY(-20px); +} diff --git a/docs/js/main.js b/docs/js/main.js index 6a2bd593239..6f1b67dad6c 100644 --- a/docs/js/main.js +++ b/docs/js/main.js @@ -39,15 +39,15 @@ if (noLeftPanel != null) // <> Magic Text function getRandomChar() { - chars = "ÂÃÉÊÐÑÙÚÛÜéêëãòóôēĔąĆćŇň1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()-=_+{}["; - return chars.charAt(Math.floor(Math.random() * chars.length) + 1) + chars = "ÂÃÉÊÐÑÙÚÛÜéêëãòóôēĔąĆćŇň1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()-=_+{}["; + return chars.charAt(Math.floor(Math.random() * chars.length) + 1) } function magicTextGen(element) { var msg = element.textContent; - var length = msg.length; + var length = msg.length; - setInterval(() => { + setInterval(() => { var newMsg = ""; for (i = 0; i <= length; i++) { newMsg += getRandomChar(msg.charAt(i)); @@ -58,9 +58,9 @@ function magicTextGen(element) { } function renderMagicText() { - document.querySelectorAll('.magic-text').forEach( (e) => { - magicTextGen(e); - }) + document.querySelectorAll('.magic-text').forEach((e) => { + magicTextGen(e); + }) } renderMagicText(); @@ -68,7 +68,7 @@ renderMagicText(); // <> Mobile anchor correction due to doubled size header) function offsetAnchor(event, element) { - if (window.innerWidth <= 768 ) { + if (window.innerWidth <= 768) { event.preventDefault(); content = document.querySelectorAll("#content")[0]; actualElement = document.getElementById(element.getAttribute("href").replace("#", "")); @@ -82,3 +82,43 @@ document.querySelectorAll("#nav-contents a").forEach((e) => { }); }) // Mobile anchor correction + +// <> Anchor click copy link +function copyToClipboard() { + setTimeout(() => { + var cb = document.body.appendChild(document.createElement("input")); + cb.value = window.location.href; + cb.focus(); + cb.select(); + document.execCommand('copy'); + cb.parentNode.removeChild(cb); + }, 50) +} +function showNotification(text, bgColor, color) { + var noti = document.body.appendChild(document.createElement("span")); + noti.id = "notification-box"; + + setTimeout(() => { + noti.textContent = text; + if (bgColor) + noti.styles.backgroundColor = bgColor; + if (color) + noti.styles.backgroundColor = color; + noti.classList.add("activate-notification"); + setTimeout(() => { + noti.classList.remove("activate-notification"); + setTimeout(() => { + noti.parentNode.removeChild(noti); + }, 200); + }, 1500); + }, 50); +} + +const currentPageLink = window.location.toString().replaceAll(/(.+?.html)(.*)/gi, '$1'); +document.querySelectorAll(".item-title > a").forEach((e) => { + e.addEventListener("click", (event) => { + copyToClipboard(); + showNotification("✅ Link copied successfully.") + }); +}) +// Anchor click copy link