referat(WT): Implement image clicking

3 files changed, 67 insertions, 0 deletions

diff --git a/Year 4/Web technologies/referat/css/effects.css b/Year 4/Web technologies/referat/css/effects.css
new file mode 100644
index 0000000..9ac3088
--- /dev/null
+++ b/Year 4/Web technologies/referat/css/effects.css
@@ -0,0 +1,45 @@
+figure {
+  cursor: pointer;
+}
+
+.none {
+  display: none;
+}
+.no-overflow {
+  overflow: hidden;
+}
+.no-selection {
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
+
+.full-screen {
+  position: absolute;
+  max-width: 100vw;
+  max-height: 100vh;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  margin: 0;
+  z-index: 100;
+}
+
+.full-screen > img {
+  max-width: inherit;
+  max-height: inherit;
+  display: block;
+  margin: auto;
+  padding: 0.5em;
+  box-sizing: border-box;
+}
+
+#full-screen-backing {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(0, 0, 0, 0.85);
+  left: 0;
+  z-index: 99;
+}
diff --git a/Year 4/Web technologies/referat/javascript/figure-click.js b/Year 4/Web technologies/referat/javascript/figure-click.js
new file mode 100644
index 0000000..a525787
--- /dev/null
+++ b/Year 4/Web technologies/referat/javascript/figure-click.js
@@ -0,0 +1,19 @@
+const full_screen_backing = document.getElementById('full-screen-backing');
+
+for (figure of document.getElementsByTagName('figure')) {
+    figure.addEventListener('click', function(event) {
+        if (document.getSelection().type === 'Range') {
+            return;
+        }
+
+        event.currentTarget.classList.toggle('full-screen');
+
+        document.body.classList.toggle('no-overflow');
+        document.documentElement.classList.toggle('no-overflow');
+        document.body.classList.toggle('no-selection');
+
+        event.currentTarget.style.top = 'calc(' + window.scrollY + 'px + 50%)';
+        full_screen_backing.style.top = window.scrollY + 'px';
+        full_screen_backing.classList.toggle('none');
+    });
+}
diff --git a/Year 4/Web technologies/referat/referat.html b/Year 4/Web technologies/referat/referat.html
index d7529bb..b9d96a9 100644
--- a/Year 4/Web technologies/referat/referat.html
+++ b/Year 4/Web technologies/referat/referat.html
@@ -5,6 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="./css/layout.css">
 		<link rel="stylesheet" href="./css/style.css">
+		<link rel="stylesheet" href="./css/effects.css">
 		<title>
 			Apache: архитектура, инсталиране, конфигуриране, виртуални хостове
 		</title>
@@ -316,5 +317,7 @@
 				</ol>
 			</section>
 		</article>
+		<div id="full-screen-backing" class="none"></div>
+		<script src="./javascript/figure-click.js"></script>
 	</body>
 </html>