Add Notification js system

Load full image on first click of full resolution button
Change background image
Change way images load into the view
Add Lazy Loading

gallery/__init__.py

@@ -5,7 +5,7 @@ print("""
 | |_| | | | | | |_| | |__|  __/ (_| \\__ \\
  \\___/|_| |_|_|\\__, |_____\\___|\\__, |___/
                |___/           |___/
-Created by Fluffy Bean  -  Version 130123
+Created by Fluffy Bean  -  Version 140123
 """)
 
 # Import base packages

gallery/api.py

@@ -47,7 +47,7 @@ def upload():
     img_name = f"GWAGWA_{uuid4().__str__()}{img_ext}"
 
     if not img_ext in current_app.config['ALLOWED_EXTENSIONS']:
-        return 'File extension not allowed: '+img_ext
+        abort(403)
     
     # Save to database
     try:

gallery/templates/error.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="display: none;"/>
 {% endblock %}
 
 {% block content %}

gallery/templates/group.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;">
 {% endblock %}
 
 {% block content %}

gallery/templates/image.html

@@ -1,15 +1,15 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-    <img src="/api/uploads/{{ image['file_name'] }}/1000" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="/api/uploads/{{ image['file_name'] }}/1000" alt="leaves" onload="imgFade(this)" style="opacity:0;"/>
 {% endblock %}
 
 {% block content %}
     <div class="image__fullscreen">
         <img
-            src="/api/uploads/{{ image['file_name'] }}/0"
+            src=""
-            onload="imgFade(this)" style="display:none;"
+            onload="imgFade(this)"
-            onerror="this.style.display='none'"
+            style="opacity:0;"
         />
     </div>
 
@@ -18,7 +18,7 @@
             <img
                 class="image__item"
                 src="/api/uploads/{{ image['file_name'] }}/1000"
-                onload="imgFade(this)" style="display:none;"
+                onload="imgFade(this)" style="opacity:0;"
                 onerror="this.src='/static/images/error.png'"
             />
         </div>
@@ -122,16 +122,29 @@
         {% endif %}
     </div>
     <script>
+        /*
+        const url = new URL(window.location);
+        if (url.searchParams.get('i') == 'full') {
+            $('.image__fullscreen').addClass('image__fullscreen--active');
+            $('.image__fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
+        } else {
+            $('.image__fullscreen').removeClass('image__fullscreen--active');
+        }
+        */
+
         $('.image__fullscreen').click(function() {
             $('.image__fullscreen').removeClass('image__fullscreen--active');
+            //window.history.replaceState({}, '', `${url}`);
         });
 
         $('#img-fullscreen').click(function() {
             $('.image__fullscreen').addClass('image__fullscreen--active');
+            $('.image__fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
+            //window.history.replaceState({}, '', url+'?i=full');
         });
         $('#img-share').click(function() {
             //navigator.clipboard.writeText(window.location.href);
-            console.log('Non https debug: Copied to clipboard');
+            addNotification("Copied link!", 4);
         });
         $('#img-info').click(function() {
             
@@ -145,11 +158,15 @@
                     data: {
                         action: 'delete'
                     },
-                    success: function(response) {
+                    
-                        window.location.href = '/';
+                    success: function (response) {
+                        addNotification("Image was all in le head", 1);
+                        setTimeout(function() {
+                            window.location.href = '/';
+                        }, 1000);
                     },
-                    error: function(response) {
+                    error: function (response) {
-                        alert(response);
+                        addNotification(`Image *clings*: ${response}`, 2);
                     }
                 });
             });

gallery/templates/index.html

@@ -1,12 +1,12 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-    <img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
 {% endblock %}
 
 {% block content %}
     <div class="app">
-        <h1>Gallery</h1>
+        <!--<h1>Gallery</h1>-->
         <div id="gallery" class="gallery">
             {% for image in images %}
                 <a class="gallery__item" href="/image/{{ image['id'] }}">
@@ -15,7 +15,13 @@
                         <h2>{{ image['file_name'] }}</h2>
                     </div>
                     <span class="gallery__item-filter"></span>
-                    <img class="gallery__item-image" src="/api/uploads/{{ image['file_name'] }}/400" onload="imgFade(this)" style="display:none;">
+                    <img
+                        class="gallery__item-image"
+                        src="/api/uploads/{{ image['file_name'] }}/400"
+                        onload="imgFade(this)"
+                        style="opacity:0;"
+                        loading="lazy"
+                    />
                 </a>
             {% endfor %}
         </div>

gallery/templates/layout.html

@@ -9,7 +9,7 @@
     </script>
 </head>
 <body>
-    <div class="notification-list"></div>
+    <div class="sniffle"></div>
     <nav id="navRoot">
         <div>
             <a href="{{url_for('gallery.index')}}">
@@ -84,7 +84,72 @@
         }
 
         function imgFade(obj) {
-            $(obj).fadeIn(621);
+            $(obj).animate({opacity: 1}, 500);
+        }
+
+        function addNotification(text='Sample notification', type=4) {
+            var container = document.querySelector('.sniffle');
+
+            // Create notification element
+            var div = document.createElement('div');
+            div.classList.add('sniffle__notification');
+            div.onclick = function() {
+                if (div.parentNode) {
+                    div.style.opacity = 0;
+                    div.style.transform = 'translateX(100%)';
+
+                    setTimeout(function() {
+                        container.removeChild(div);
+                    }, 500);
+                }
+            };
+
+            // Create icon element and append to notification
+            var icon = document.createElement('span');
+            icon.classList.add('sniffle__notification-icon');
+            if (type == 1) {
+                div.classList.add('sniffle__notification--success');
+                icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" fill="currentColor">\
+                    <path d="M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z"></path>\
+                </svg>';
+            } else if (type == 2) {
+                div.classList.add('sniffle__notification--error');
+                icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" fill="currentColor">\
+                    <path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path>\
+                </svg>';
+            } else if (type == 3) {
+                div.classList.add('sniffle__notification--warning');
+                icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -3 24 24" fill="currentColor">\
+                    <path d="M12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.213 3.213 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096zm-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.12 1.12 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1z"></path>\
+                </svg>';
+            } else if (type == 4) {
+                div.classList.add('sniffle__notification--info');
+                icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">\
+                    <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>\
+                </svg>';
+            }
+            div.appendChild(icon);
+
+            // Create text element and append to notification
+            var gwagwa = document.createElement('span');
+            gwagwa.classList.add('sniffle__notification-text');
+            gwagwa.innerHTML = text;
+            div.appendChild(gwagwa);
+
+            // Append notification to container
+            container.appendChild(div);
+
+            // Remove notification after 6.9 seconds
+            setTimeout(function() {
+                if (div.parentNode) {
+                    div.style.opacity = 0;
+                    div.style.transform = 'translateX(100%)';
+
+                    setTimeout(function() {
+                        container.removeChild(div);
+                    }, 500);
+                }
+            }, 2500);
         }
     </script>
 </body>

gallery/templates/profile.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
 {% endblock %}
 
 {% block content %}

gallery/templates/settings.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
 {% endblock %}
 
 {% block content %}

gallery/templates/upload.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
 {% endblock %}
 
 {% block content %}
@@ -40,7 +40,7 @@
 
             // Check for empty upload
 			if ($("#file").val() === "") {
-				alert('Gwha! Pls provide image');
+				addNotification("Please select a file to upload", 2);
             } else {
                 // Make form
                 var formData = new FormData();
@@ -58,7 +58,16 @@
                     contentType: false,
                     processData: false,
                     success: function (response) {
-                        alert(response)
+                        addNotification("File uploaded successfully!", 1);
+                    },
+                    error: function (response) {
+                        if (response.status === 500) {
+                            addNotification('Error uploading file, blame the server', 2);
+                        } else if (response.status === 400 || response.status === 404 || response.status === 403) {
+                            addNotification('Error uploading file, blame yourself', 2);
+                        } else {
+                            addNotification('Error uploading file, blame someone', 2);
+                        }
                     }
                 });
 

gallery/user/themes/default/style.scss

@@ -9,6 +9,97 @@
 @import 'buttons/btn';
 @import 'buttons/up';
 
+.sniffle {
+    margin: 0;
+    padding: 0;
+
+    width: 450px;
+    height: auto;
+
+    position: fixed;
+    top: 0.3rem;
+    right: 0.3rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+
+    z-index: 6969;
+}
+.sniffle__notification {
+    margin: 0;
+    padding: 0;
+
+    width: 450px;
+    height: auto;
+
+    display: flex;
+    flex-direction: row;
+
+    position: relative;
+
+    background-color: $black300;
+    border-radius: $rad;
+    color: $white100;
+
+    box-sizing: border-box;
+    overflow: hidden;
+
+    transition: all 0.5s ease-in-out;
+}
+.sniffle__notification--success {
+    background-color: $green;
+}
+.sniffle__notification--error {
+    background-color: $red;
+}
+.sniffle__notification--warning {
+    background-color: $yellow;
+}
+.sniffle__notification--info {
+    background-color: $blue;
+}
+.sniffle__notification-icon {
+    margin: 0;
+    padding: 1rem;
+
+    width: auto;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: rgba($black100, 0.2);
+
+    svg {
+        width: 1.25rem;
+        height: 1.25rem;
+
+        fill: $white100;
+    }
+}
+.sniffle__notification-text {
+    margin: 0;
+    padding: 1rem;
+
+    width: auto;
+    height: auto;
+
+    display: flex;
+    flex-direction: column;
+    justify-self: center;
+    align-self: center;
+
+    font-family: $font-body;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1;
+    text-align: left;
+
+    color: $white100;
+}
+
 .app {
     margin: 0 0 0 3.5rem;
     padding: 0.5rem;

setup.py

@@ -2,7 +2,7 @@ from setuptools import find_packages, setup
 
 setup(
     name='onlylegs',
-    version='130123',
+    version='140123',
     packages=find_packages(),
     include_package_data=True,
     install_requires=[