language selector refactroring and optimization

2026-01-06 18:46:33 +02:00
parent b2018f1df0
commit 62746818af
3 changed files with 35 additions and 40 deletions
@@ -1,47 +1,42 @@
-/*  LANGUAGE DROPDOWN  */
-
-function dropdown_show(obj)
-{
-    var x = y = 0;
-    
-    while(obj)
-    {
-        x += obj.offsetLeft;
-        y += obj.offsetTop;
-        obj = obj.offsetParent;
+function dropdown_show(el) {
+    let x = 0;
+    let y = 0;
+    while (el) {
+        x += el.offsetLeft;
+        y += el.offsetTop;
+        el = el.offsetParent;
    }
-
-    ddown = document.getElementById("lang-dropdown");
+    const ddown = document.getElementById("lang-dropdown");
    ddown.style.display = "block";
-    ddown.style.left    = (x - 72) + "px";
-
-    if (ddown.offsetLeft + ddown.offsetWidth +10 > document.body.offsetWidth) 
-    {
-        ddown.style.left = document.body.offsetWidth - ddown.offsetWidth - 82 + "px";
+    ddown.style.left = (x - 72) + "px";
+    if (ddown.offsetLeft + ddown.offsetWidth + 10 > document.body.offsetWidth) {
+        ddown.style.left = (document.body.offsetWidth - ddown.offsetWidth - 82) + "px";
    }
-
    ddown.style.top = (y + 48) + "px";
-    op = 0;
-    appear(1);
+    fade_to(ddown, 1);
 }

-function dropdown_hide()
-{
-    ddown = document.getElementById("lang-dropdown");
-    ddown.style.display="none";
-}
-
-function appear(x)
-{
-    if(op < x)
-    {
-        op += 0.2;
-        ddown.style.opacity = op;
-        ddown.style.filter  = 'alpha(opacity=' + op * 100 + ')';
+function dropdown_hide(e) {
+    for (let t = e && e.target; t; t = t.parentElement) {
+        if (t.id === "lang-dropdown" || t.id === "lang-butt") return;
    }
+    const ddown = document.getElementById("lang-dropdown");
+    fade_to(ddown, 0, function() {
+        ddown.style.display = "none";
+    });
 }

-function checkkey(e) {
-    var keycode = window.event ? e.keyCode : e.which;
-    if (keycode == 27) { dropdown_hide(); }
+function fade_to(el, target, done) {
+    const from = parseFloat(el.style.opacity) || 0;
+    const delta = target - from;
+    let start;
+    function step(ts) {
+        if (!start) start = ts;
+        const t = Math.min((ts - start) / 200, 1);
+        el.style.opacity = from + delta * t;
+        if (t < 1) requestAnimationFrame(step);
+        else if (done) done();
+    }
+    requestAnimationFrame(step);
 }
+
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ lang }}" onmouseup="dropdown_hide()">
+<html lang="{{ lang }}" onmouseup="dropdown_hide(event)">

 {% include 'tmpl/_header.htm' %}

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ lang }}" onmouseup="dropdown_hide()">
+<html lang="{{ lang }}" onmouseup="dropdown_hide(event)">

 {% include 'tmpl/_header.htm' %}

@@ -20,4 +20,4 @@
    {% include 'tmpl/_footer.htm' %}
 </body>

-</html>
+</html>