Clean up JavaScript code and make it more reliable

Update version

gallery/templates/image.html

@@ -16,15 +16,13 @@
             }, 200);
         }
         function imageFullscreenOn() {
-            document.querySelector("html").style.overflow = "hidden";
             let fullscreen = document.querySelector('.image-fullscreen')
 
             fullscreen.querySelector('img').src = '{{ url_for('api.file', file_name=image.file_name) }}';
-            fullscreen.style.display = 'flex';
 
-            setTimeout(function() {
-                fullscreen.classList.add('active');
-            }, 10);
+            document.querySelector("html").style.overflow = "hidden";
+            fullscreen.style.display = 'flex';
+            setTimeout(function() { fullscreen.classList.add('active'); }, 5);
         }
         function imageShare() {
             try {
@@ -36,12 +34,23 @@
         }
 
         {% if g.user['id'] == image['author_id'] %}
+            cancelBtn = document.createElement('button');
+            cancelBtn.classList.add('btn-block');
+            cancelBtn.innerHTML = 'nuuuuuuuu';
+            cancelBtn.onclick = popupDissmiss;
+
+            deleteBtn = document.createElement('button');
+            deleteBtn.classList.add('btn-block');
+            deleteBtn.classList.add('critical');
+            deleteBtn.innerHTML = 'Dewww eeeet!';
+            deleteBtn.onclick = deleteConfirm;
+
             function imageDelete() {
                 popUpShow(
                     'DESTRUCTION!!!!!!',
                     'Do you want to delete this image along with all of its data??? This action is irreversible!',
-                    '<button class="btn-block" onclick="popupDissmiss()">Nuuu</button>' +
-                    '<button class="btn-block critical" onclick="deleteConfirm()">Dewww eeeet!</button>'
+                    null,
+                    [cancelBtn, deleteBtn]
                     );
             }
             function deleteConfirm() {

gallery/templates/index.html

@@ -34,7 +34,7 @@
     {% endif %}
 {% endblock %}
 {% block script %}
-    <script>
+    <script type="text/javascript">
         if (document.referrer.includes('image')) {
             try {
                 let referrerId = document.referrer.split('/').pop();

gallery/templates/layout.html

@@ -41,20 +41,17 @@
     <button class="top-of-page">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M184,216a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,216Zm45.66-101.66-96-96a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,32,128H72v24a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V128h40a8,8,0,0,0,5.66-13.66ZM176,176H80a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"></path></svg>
     </button>
-    <button class="info-button">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z"></path></svg>
-    </button>
+    {% if request.path == "/" %}
+        <button class="info-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z"></path></svg>
+        </button>
+    {% endif %}
 
     <div class="pop-up">
         <span class="pop-up__click-off" onclick="popupDissmiss()"></span>
         <div class="pop-up-wrapper">
-            <div class="pop-up-content">
-                <h3>Title</h3>
-                <p>Very very very drawn out example description</p>
-            </div>
-            <div class="pop-up-controlls">
-                <button class="pop-up__btn" onclick="popupDissmiss()">Cancel</button>
-            </div>
+            <div class="pop-up-header"></div>
+            <div class="pop-up-controlls"></div>
         </div>
     </div>
 
@@ -125,10 +122,10 @@
                     <h3>Upload stuffs</h3>
                     <p>May the world see your stuff 👀</p>
                     <form id="uploadForm">
-                        <button class="fileDrop-block">
+                        <button class="fileDrop-block" type="button">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H80a8,8,0,0,1,0,16H32v64H224V136H176a8,8,0,0,1,0-16h48A16,16,0,0,1,240,136ZM85.66,77.66,120,43.31V128a8,8,0,0,0,16,0V43.31l34.34,34.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,77.66ZM200,168a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z"></path></svg>
                             <span class="status">Choose or Drop file</span>
-                            <input type="file" id="file" onchange="fileChanged(this)" onclick="this.value=null; fileChanged(this)" tab-index="-1"/>
+                            <input type="file" id="file" tab-index="-1"/>
                         </button>
 
                         <input class="input-block" type="text" placeholder="alt" id="alt"/>
@@ -147,12 +144,13 @@
         </div>
     </div>
 
-    <script>
+    <script type="text/javascript">
+        // Show notifications on page load
         {% for message in get_flashed_messages() %}
-            // Show notifications on page load
             addNotification('{{ message[0] }}', {{ message[1] }});
         {% endfor %}
     </script>
+
     {% block script %}{% endblock %}
 </body>
 </html>