From e9e37061728e9f0d40e048bdf083bc607454944f Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sat, 22 Apr 2023 13:45:29 +0000
Subject: [PATCH] Move JS to layout HTML for faster loading Keep images square
 through JS and not a bug with ::after

---
 onlylegs/__init__.py                         |  2 +-
 onlylegs/config.py                           |  4 +
 onlylegs/static/js/fade.js                   | 11 +++
 onlylegs/static/js/index.js                  | 72 ------------------
 onlylegs/static/js/square.js                 | 11 +++
 onlylegs/static/sass/components/gallery.sass | 23 +-----
 onlylegs/templates/layout.html               | 79 ++++++++++++++++++--
 7 files changed, 103 insertions(+), 99 deletions(-)
 create mode 100644 onlylegs/static/js/fade.js
 delete mode 100644 onlylegs/static/js/index.js
 create mode 100644 onlylegs/static/js/square.js

diff --git a/onlylegs/__init__.py b/onlylegs/__init__.py
index e15e3e1..5c5f33f 100644
--- a/onlylegs/__init__.py
+++ b/onlylegs/__init__.py
@@ -101,7 +101,7 @@ def create_app():  # pylint: disable=R0914
     assets.init_app(app)
 
     scripts = Bundle(
-        "js/*.js", output="gen/js.js", depends="js/*.js"
+        "js/*.js", filters="jsmin", output="gen/js.js", depends="js/*.js"
     )  # filter jsmin is broken :c
     styles = Bundle(
         "sass/style.sass",
diff --git a/onlylegs/config.py b/onlylegs/config.py
index 58e7a80..edcd808 100644
--- a/onlylegs/config.py
+++ b/onlylegs/config.py
@@ -3,6 +3,7 @@ Gallery configuration file
 """
 import os
 import platformdirs
+import importlib.metadata
 from dotenv import load_dotenv
 from yaml import safe_load
 
@@ -41,3 +42,6 @@ MEDIA_FOLDER = os.path.join(user_dir, "media")
 # Database
 INSTANCE_DIR = instance_dir
 MIGRATIONS_DIR = os.path.join(INSTANCE_DIR, "migrations")
+
+# App
+APP_VERSION = importlib.metadata.version("OnlyLegs")
\ No newline at end of file
diff --git a/onlylegs/static/js/fade.js b/onlylegs/static/js/fade.js
new file mode 100644
index 0000000..56749ba
--- /dev/null
+++ b/onlylegs/static/js/fade.js
@@ -0,0 +1,11 @@
+// fade in images
+function imgFade(obj, time = 200) {
+    setTimeout(() => {
+        obj.style.animation = `imgFadeIn ${time}ms`;
+
+        setTimeout(() => {
+            obj.style.opacity = null;
+            obj.style.animation = null;
+        }, time);
+    }, 1);
+}
diff --git a/onlylegs/static/js/index.js b/onlylegs/static/js/index.js
deleted file mode 100644
index 8817bf2..0000000
--- a/onlylegs/static/js/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-// fade in images
-function imgFade(obj, time = 200) {
-    obj.style.opacity = null;
-    obj.style.animation = `imgFadeIn ${time}ms`;
-
-    setTimeout(() => { obj.style.animation = null; }, time);
-}
-
-window.onload = function () {
-    const times = document.querySelectorAll('.time');
-    for (let i = 0; i < times.length; i++) {
-        // Remove milliseconds
-        const raw = times[i].innerHTML.split('.')[0];
-
-        // Parse YYYY-MM-DD HH:MM:SS to Date object
-        const time = raw.split(' ')[1];
-        const date = raw.split(' ')[0].split('-');
-
-        // Format to YYYY/MM/DD HH:MM:SS and convert to UTC Date object
-        const dateTime = new Date(`${date[0]}/${date[1]}/${date[2]} ${time} UTC`);
-
-        // Convert to local time
-        times[i].innerHTML = `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;
-    }
-
-    // Top Of Page button
-    const topOfPage = document.querySelector('.top-of-page');
-    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
-        topOfPage.classList.add('show');
-    } else {
-        topOfPage.classList.remove('show');
-    }
-    topOfPage.onclick = function () {
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
-    }
-
-    // Info button
-    const infoButton = document.querySelector('.info-button');
-    if (infoButton) {
-        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
-            infoButton.classList.remove('show');
-        } else {
-            infoButton.classList.add('show');
-        }
-        infoButton.onclick = function () {
-            popUpShow('OnlyLegs',
-                      '<a href="https://github.com/Fluffy-Bean/onlylegs">v0.1.4</a> ' +
-                      'using <a href="https://phosphoricons.com/">Phosphoricons</a> and Flask.' +
-                      '<br>Made by Fluffy and others with ❤️');
-        }
-    }
-};
-window.onscroll = function () {
-    // Top Of Page button
-    const topOfPage = document.querySelector('.top-of-page');
-    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
-        topOfPage.classList.add('show');
-    } else {
-        topOfPage.classList.remove('show');
-    }
-
-    // Info button
-    const infoButton = document.querySelector('.info-button');
-    if (infoButton) {
-        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
-            infoButton.classList.remove('show');
-        } else {
-            infoButton.classList.add('show');
-        }
-    }
-};
diff --git a/onlylegs/static/js/square.js b/onlylegs/static/js/square.js
new file mode 100644
index 0000000..83e0482
--- /dev/null
+++ b/onlylegs/static/js/square.js
@@ -0,0 +1,11 @@
+function keepSquare() {
+    const images = document.querySelectorAll('.gallery-item');
+    for (let i = 0; i < images.length; i++) {
+        images[i].style.height = images[i].offsetWidth + 'px';
+    }
+
+    const groups = document.querySelectorAll('.group-item');
+    for (let i = 0; i < groups.length; i++) {
+        groups[i].style.height = groups[i].offsetWidth + 'px';
+    }
+}
\ No newline at end of file
diff --git a/onlylegs/static/sass/components/gallery.sass b/onlylegs/static/sass/components/gallery.sass
index cd33fdd..05f2c66 100644
--- a/onlylegs/static/sass/components/gallery.sass
+++ b/onlylegs/static/sass/components/gallery.sass
@@ -24,8 +24,6 @@
     margin: 0.35rem
     padding: 0
 
-    height: auto
-
     position: relative
 
     border-radius: $rad-inner
@@ -44,8 +42,7 @@
         height: auto
 
         position: absolute
-        left: 0
-        bottom: 0
+        inset: 0
 
         display: flex
         flex-direction: column
@@ -88,12 +85,6 @@
         object-position: center
 
         background-color: RGB($bg-bright)
-        transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
-
-    &:after
-        content: ""
-        display: block
-        padding-bottom: 100%
 
     &:hover
         box-shadow: 0 0.2rem 0.4rem 0.1rem RGBA($bg-100, 0.6)
@@ -105,8 +96,6 @@
     margin: 0.35rem
     padding: 0
 
-    height: auto
-
     position: relative
 
     border-radius: $rad-inner
@@ -171,8 +160,7 @@
             height: 100%
 
             position: absolute
-            top: 0
-            left: 0
+            inset: 0
 
             object-fit: cover
             object-position: center
@@ -181,7 +169,7 @@
             border-radius: $rad-inner
             box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1)
 
-            transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
+            transition: transform 0.2s cubic-bezier(.79, .14, .15, .86)
 
         &.size-1
             .data-1
@@ -206,11 +194,6 @@
                 transform: scale(0.6) rotate(-1deg) translate(-15%, -23%)
                 z-index: +1
 
-    &:after
-        content: ""
-        display: block
-        padding-bottom: 100%
-
     &:hover
         .images
             &.size-1
diff --git a/onlylegs/templates/layout.html b/onlylegs/templates/layout.html
index f5f1a36..2cd9ecb 100644
--- a/onlylegs/templates/layout.html
+++ b/onlylegs/templates/layout.html
@@ -66,18 +66,18 @@
         <div class="navigation">
             <!--<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">-->
 
-            <a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}">
+            <a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}" aria-label="Home Page">
                 <i class="ph-fill ph-images-square"></i>
                 <span class="tool-tip">Home<i class="ph-fill ph-caret-left"></i></span>
             </a>
 
-            <a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}">
+            <a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}" aria-label="Photo Groups">
                 <i class="ph-fill ph-package"></i>
                 <span class="tool-tip">Groups<i class="ph-fill ph-caret-left"></i></span>
             </a>
 
             {% if current_user.is_authenticated %}
-                <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()">
+                <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()" aria-label="Upload Photo">
                     <i class="ph-fill ph-upload"></i>
                     <span class="tool-tip">Upload<i class="ph-fill ph-caret-left"></i></span>
                 </button>
@@ -86,7 +86,7 @@
             <span class="navigation-spacer"></span>
 
             {% if current_user.is_authenticated %}
-                <a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}">
+                <a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}" aria-label="Profile Page">
                     {% if current_user.picture %}
                         <span class="nav-pfp">
                             <picture>
@@ -106,12 +106,12 @@
                     <span class="tool-tip">Profile<i class="ph-fill ph-caret-left"></i></span>
                 </a>
             
-                <a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}">
+                <a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}" aria-label="Gallery Settings">
                     <i class="ph-fill ph-gear-fine"></i>
                     <span class="tool-tip">Settings<i class="ph-fill ph-caret-left"></i></span>
                 </a>
             {% else %}
-                <button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()">
+                <button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()" aria-label="Sign up or Login">
                     <i class="ph-fill ph-sign-in"></i>
                     <span class="tool-tip">Login<i class="ph-fill ph-caret-left"></i></span>
                 </button>
@@ -156,5 +156,72 @@
     </script>
 
     {% block script %}{% endblock %}
+
+    <script type="text/javascript">
+        keepSquare();
+
+        const times = document.querySelectorAll('.time');
+        for (let i = 0; i < times.length; i++) {
+            // Remove milliseconds
+            const raw = times[i].innerHTML.split('.')[0];
+    
+            // Parse YYYY-MM-DD HH:MM:SS to Date object
+            const time = raw.split(' ')[1];
+            const date = raw.split(' ')[0].split('-');
+    
+            // Format to YYYY/MM/DD HH:MM:SS and convert to UTC Date object
+            const dateTime = new Date(`${date[0]}/${date[1]}/${date[2]} ${time} UTC`);
+    
+            // Convert to local time
+            times[i].innerHTML = `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;
+        }
+    
+        // Top Of Page button
+        const topOfPage = document.querySelector('.top-of-page');
+        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
+            topOfPage.classList.add('show');
+        } else {
+            topOfPage.classList.remove('show');
+        }
+        topOfPage.onclick = () => {
+            document.body.scrollTop = 0;
+            document.documentElement.scrollTop = 0;
+        }
+    
+        // Info button
+        const infoButton = document.querySelector('.info-button');
+        if (infoButton) {
+            if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
+                infoButton.classList.remove('show');
+            } else {
+                infoButton.classList.add('show');
+            }
+            infoButton.onclick = () => {
+                popUpShow('OnlyLegs',
+                            '<a href="https://github.com/Fluffy-Bean/onlylegs">v{{ config['APP_VERSION'] }}</a> ' +
+                            'using <a href="https://phosphoricons.com/">Phosphoricons</a> and Flask.' +
+                            '<br>Made by Fluffy and others with ❤️');
+            }
+        }
+
+        window.onresize = () => {
+            keepSquare();
+        }
+        window.onscroll = () => {
+            if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
+                topOfPage.classList.add('show');
+            } else {
+                topOfPage.classList.remove('show');
+            }
+        
+            if (infoButton) {
+                if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
+                    infoButton.classList.remove('show');
+                } else {
+                    infoButton.classList.add('show');
+                }
+            }
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file