Add anchor click link copy + Notification

Author: AyhamAl-Ali

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);
+}

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,17 +58,17 @@ function magicTextGen(element) {
 }
 
 function renderMagicText() {
-	document.querySelectorAll('.magic-text').forEach( (e) => {
-		magicTextGen(e);
-	})
+  document.querySelectorAll('.magic-text').forEach((e) => {
+    magicTextGen(e);
+  })
 }
 renderMagicText();
 
 // Magic Text </>
 
 // <> 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 </>