Packet zoom

packet/static/js/pfp-zoom.js

@@ -0,0 +1,36 @@
+$(document).ready(function () {
+    let photos = Array.from(document.querySelectorAll('.eval-user-img'))
+
+    top.onclick = function (e) {
+        let tsib = e.target.previousElementSibling
+        if (tsib != null) {
+            if (tsib.classList.contains('eval-user-img')) {
+                return;
+            }
+        }
+        if (e.target.classList.contains('eval-user-img')) {
+            return;
+        }
+        document.querySelector('#zoom-photo').remove()
+    }
+
+    photos.forEach((photo) => {
+        photo.addEventListener('click', (e) => {
+            let other = document.querySelector('#zoom-photo')
+            if (other != null) {
+                other.remove()
+            }
+            photo.insertAdjacentHTML('afterend', `
+                <div id="zoom-photo" style="position: fixed; z-index: 1050; display: block">
+                    <img class="eval-user-img"
+                        alt=${photo.alt}
+                        src=${photo.src}
+                        style="max-width: 200px; max-height: 200px; border: 1px solid #666"
+                        >
+                </div>
+                `)
+            e.preventDefault();
+        })
+    })
+
+})

packet/templates/active_packets.html

@@ -111,6 +111,7 @@ <h4 class="page-title">Active Packets</h4>
 
 {% block scripts %}
     {{ super() }}
+    <script src="{{ url_for('static', filename='js/pfp-zoom.min.js') }}"></script>
     {% if info.realm == "csh" %}
         <script src="{{ url_for('static', filename='js/tables.min.js') }}"></script>
     {% endif %}

packet/templates/packet.html

@@ -192,3 +192,7 @@ <h5>Upperclassmen Score - {{ '%0.2f' % upper_score }}%</h5>
         </div>
     </div>
 {% endblock %}
+{% block scripts %}
+    {{ super() }}
+    <script src="{{ url_for('static', filename='js/pfp-zoom.min.js') }}"></script>
+{% endblock %}