Differences

This shows you the differences between two versions of the page.

--- sidebar [2022/12/23 00:27] – created - external edit 127.0.0.1
+++ sidebar [2023/01/27 17:41] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 <html>
-    <a class="mdl-navigation__link" href="/wiki">
+  <a class="mdl-navigation__link" href="/wiki">
-        <i class="material-icons" role="presentation">home</i>
+    <i class="material-icons" role="presentation">home</i>
-        Start
+    Start
-    </a>
+  </a>
-    <a class="mdl-navigation__link" href="/">
+  <a class="mdl-navigation__link" href="/">
-        <i class="material-icons" role="presentation">arrow_back</i>
+    <i class="material-icons" role="presentation">arrow_back</i>
-        somepi.ddns.net
+    somepi.ddns.net
-    </a>
+  </a>
-    <hr style="width: 230px; margin: 15px; margin-top: 0;">
+  <hr style="margin: 15px; margin-top: 0" />
-    <a class="mdl-navigation__link" href="/wiki/doku.php?id=android:start">
+  <a class="mdl-navigation__link" href="/wiki/doku.php?id=android:start">
-        <i class="material-icons" role="presentation">smartphone</i>
+    <i class="material-icons" role="presentation">smartphone</i>
-        Mobile
+    Mobile
-    </a>
+  </a>
-    <a class="mdl-navigation__link" href="/wiki/doku.php?id=linux:start">
+  <a class="mdl-navigation__link" href="/wiki/doku.php?id=linux:start">
-        <i class="material-icons" role="presentation">computer</i>
+    <i class="material-icons" role="presentation">computer</i>
-        Linux
+    Linux
-    </a>
+  </a>
-    <a class="mdl-navigation__link" href="/wiki/doku.php?id=windows:start">
+  <a class="mdl-navigation__link" href="/wiki/doku.php?id=windows:start">
-        <i class="material-icons" role="presentation">desktop_windows</i>
+    <i class="material-icons" role="presentation">desktop_windows</i>
-        Windows
+    Windows
-    </a>
+  </a>
-    <hr style="width: 230px; margin: 15px">
+  <hr style="margin: 15px" />
-    <a class="mdl-navigation__link" href="/wiki/doku.php?id=python:start">
+  <a class="mdl-navigation__link" href="/wiki/doku.php?id=python:start">
-        <i class="material-icons" role="presentation">code</i>
+    <i class="material-icons" role="presentation">code</i>
-        Python
+    Python
-    </a>
+  </a>
-    <a class="mdl-navigation__link" href="/wiki/doku.php?id=java:start">
+  <a class="mdl-navigation__link" href="/wiki/doku.php?id=java:start">
-        <i class="material-icons" role="presentation">local_cafe</i>
+    <i class="material-icons" role="presentation">local_cafe</i>
-        Java
+    Java
-    </a>
+  </a>
-    <a class="mdl-navigation__link" href="/wiki/doku.php?id=c++:start">
+  <a class="mdl-navigation__link" href="/wiki/doku.php?id=c++:start">
-        <i class="material-icons" role="presentation">developer_board</i>
+    <i class="material-icons" role="presentation">developer_board</i>
-        C++
+    C++
-    </a>
+  </a>
-    <hr style="width: 230px; margin: 15px">
+  <hr style="margin: 15px" />
-    <div class="mdl-layout-spacer"></div>
+  <div class="mdl-layout-spacer"></div>
-    <a class="mdl-navigation__link" href="/wiki/about">
+  <a class="mdl-navigation__link" href="/wiki/about">
-        <i class="material-icons" role="presentation">info_outline</i>
+    <i class="material-icons" role="presentation">info_outline</i>
-        About
+    About
-    </a>
+  </a>
-    <a class="mdl-navigation__link" href="/wiki/help/">
+  <a class="mdl-navigation__link" href="/wiki/help/">
-        <i class="material-icons" role="presentation">help_outline</i>
+    <i class="material-icons" role="presentation">help_outline</i>
-        Help
+    Help
-    </a>
+  </a>
-    <script defer>
+  <script defer>
-        let copytext = (event) => {
+    let add_clipboard = (event) => {
-            let range, selection;
+      let duration = 2000;
-            event.currentTarget !== event.target?element = event.target.parentNode:element = event.target
+      let range, selection;
-            selection = window.getSelection();
+      event.currentTarget !== event.target
-            range = document.createRange();
+        ? (element = event.target.parentNode)
-            range.selectNodeContents(element);
+        : (element = event.target);
-            selection.removeAllRanges();
+      selection = window.getSelection();
-            selection.addRange(range);
+      range = document.createRange();
-            document.execCommand('copy');
+      range.selectNodeContents(element.previousSibling);
-        }
+      selection.removeAllRanges();
-        window.onload = () => {
+      selection.addRange(range);
-            document.querySelectorAll('pre').forEach(element => {
+      document.execCommand("copy");
-            element.addEventListener('click', copytext)
+      selection.removeAllRanges();
-        })}
+      element.style.animation = `${
-    </script>
+        duration / 1000
+      }s ease-in-out 0s 1 normal none running copied`;
+      setTimeout(function () {
+        element.style.animation = "";
+      }, duration);
+    };
+    window.onload = () => {
+      document.querySelectorAll(".code").forEach((element) => {
+        button = document.createElement("button");
+        text_field = document.createElement("i");
+        text_field.classList.add("material-icons");
+        text_field.appendChild(document.createTextNode("content_copy"));
+        button.appendChild(text_field);
+        button.classList.add("copy_button");
+        wrapper = document.createElement("div");
+        element.parentElement.appendChild(wrapper);
+        wrapper.appendChild(element);
+        wrapper.classList.add("code_wrapper");
+        element.parentNode.insertBefore(button, element.nextSibling);
+        button.addEventListener("click", add_clipboard);
+        button.addEventListener("contextmenu", (e) => {
+          e.preventDefault();
+          if (e.target.nodeName == "I") {
+            e.target.classList.toggle("minimized");
+          } else {
+            e.target.children[0].classList.toggle("minimized");
+          }
+        });
+      });
+    };
+  </script>
 </html>