referat(WT): Implement code copy

4 files changed, 41 insertions, 11 deletions

diff --git a/Year 4/Web technologies/referat/css/style.css b/Year 4/Web technologies/referat/css/style.css
index c7c6db8..4f71017 100644
--- a/Year 4/Web technologies/referat/css/style.css
+++ b/Year 4/Web technologies/referat/css/style.css
@@ -95,8 +95,27 @@ pre > code {
   display: inline-block;
   width: 100%;
   box-sizing: border-box;
+  position: relative;
 }
 
 ol.sources > li::before, sup a, sup a:visited {
   color: var(--level4);
 }
+
+.copy-to-clipboard {
+  position: absolute;
+  right: 0.5em;
+  top: 0.25em;
+  z-index: 50;
+  background-color: white;
+  border-radius: 0.25em;
+  cursor: pointer;
+}
+
+.copy-to-clipboard:hover {
+  background-color: rgb(68, 65, 118, 0.5);
+}
+
+.copy-to-clipboard:active {
+  transform: scale(0.8);
+}
diff --git a/Year 4/Web technologies/referat/img/clipboard.svg b/Year 4/Web technologies/referat/img/clipboard.svg
new file mode 100644
index 0000000..3ba32a4
--- /dev/null
+++ b/Year 4/Web technologies/referat/img/clipboard.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
\ No newline at end of file
diff --git a/Year 4/Web technologies/referat/javascript/code-copy.js b/Year 4/Web technologies/referat/javascript/code-copy.js
new file mode 100644
index 0000000..780f950
--- /dev/null
+++ b/Year 4/Web technologies/referat/javascript/code-copy.js
@@ -0,0 +1,9 @@
+for (codeblock of document.getElementsByTagName('code')) {
+    const copy_btn = codeblock.lastChild;
+    if (copy_btn.tagName !== 'IMG') { continue; }
+
+    const codeText = codeblock.innerText;
+    copy_btn.addEventListener('click', function() {
+        navigator.clipboard.writeText(codeText);
+    });
+}
diff --git a/Year 4/Web technologies/referat/referat.html b/Year 4/Web technologies/referat/referat.html
index b9d96a9..570528b 100644
--- a/Year 4/Web technologies/referat/referat.html
+++ b/Year 4/Web technologies/referat/referat.html
@@ -92,7 +92,7 @@
 							Разбира се, екипът зад нея поддържат и Apache уеб-сървърът.
 							Инсталацията се свежда до една проста команда:<sup><a href="#src8">[8]</a></sup>
 						</p>
-						<pre><code>brew install httpd</code></pre>
+						<pre><code>brew install httpd<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 					</section>
 					<section>
 						<h4>Linux</h4>
@@ -102,13 +102,13 @@
 							Обаче действието е практически същото при всички тях и наподобява този под MacOS: изпълнява се команда, извикваща вградения пакетен мениджър да свръши работата.<sup><a href="#src10">[10]</a></sup>
 						</p>
 						<h5>Ubuntu/Debian</h5>
-						<pre><code>sudo apt install -y apache2</code></pre>
+						<pre><code>sudo apt install -y apache2<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 						<h5>CentOS/Red Hat Enterprise Linux</h5>
-						<pre><code>sudo yum install -y apache2</code></pre>
+						<pre><code>sudo yum install -y apache2<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 						<h5>Gentoo</h5>
-						<pre><code>sudo emerge apache</code></pre>
+						<pre><code>sudo emerge apache<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 						<h5>Arch Linux</h5>
-						<pre><code>sudo pacman -S apache</code></pre>
+						<pre><code>sudo pacman -S apache<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 					</section>
 				</section>
 				<section id="compiling-source">
@@ -142,17 +142,17 @@
 							<li>
 								Изпълняване на конвертиращия инструмент:
 
-								<pre><code>perl srclib\apr\build\lineends.pl</code></pre>
+								<pre><code>perl srclib\apr\build\lineends.pl<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 							</li>
 							<li>
 								Изпълняване на компилиращия скрипт:
 
-								<pre><code>nmake /f Makefile.win _apacher</code></pre>
+								<pre><code>nmake /f Makefile.win _apacher<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 							</li>
 							<li>
 								Изпълняване на инсталиращия скрипт:
 
-								<pre><code>nmake /f Makefile.win installr</code></pre>
+								<pre><code>nmake /f Makefile.win installr<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 							</li>
 						</ol>
 					</section>
@@ -170,17 +170,17 @@
 							<li>
 								Конфигуриране на средата:
 
-								<pre><code>./configure</code></pre>
+								<pre><code>./configure<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 							</li>
 							<li>
 								Компилиране:
 
-								<pre><code>make</code></pre>
+								<pre><code>make<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 							</li>
 							<li>
 								Инсталиране:
 
-								<pre><code>sudo make install</code></pre>
+								<pre><code>sudo make install<img class="copy-to-clipboard" src="./img/clipboard.svg" alt="Copy!"></code></pre>
 							</li>
 						</ol>
 					</section>
@@ -319,5 +319,6 @@
 		</article>
 		<div id="full-screen-backing" class="none"></div>
 		<script src="./javascript/figure-click.js"></script>
+		<script src="./javascript/code-copy.js"></script>
 	</body>
 </html>