www: responsive layoutkilly-responsive

1 files changed, 71 insertions, 2 deletions

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 6bea2ea3..5c435536 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -30,6 +30,54 @@ Element.prototype.selectText = function () {
     }
 };
 
+function once(el, eventType, callback) {
+    function eventHandler(e) {
+        el.removeEventListener(eventType, eventHandler);
+        callback(e);
+    }
+    el.addEventListener(eventType, eventHandler);
+}
+function nextClick(callback) {
+    setTimeout(() => once(document, 'click', callback), 0);
+}
+function nextClickWithCondition(predicate, callback) {
+    function clickCheck(e) {
+        if (predicate(e)) {
+            callback();
+        } else {
+            nextClick(clickCheck);
+        }
+    }
+    nextClick(clickCheck);
+}
+
+function keyboardClickable(el) {
+    el.addEventListener('keydown', e => {
+        if ((e.which === 13) || (e.which === 32)) { // 13 = Return, 32 = Space
+            e.preventDefault();
+            el.click();
+        }
+    });
+}
+
+function makeMenu(target, dropdown) {
+    target.addEventListener('click', e => {
+        if (!dropdown.contains(e.target)) {
+            target.classList.toggle('expanded');
+        }
+        nextClickWithCondition(
+            e => !target.contains(e.target),
+            () => target.classList.remove('expanded')
+        );
+    });
+    keyboardClickable(target);
+    dropdown.addEventListener('blur', e => {
+        if (!dropdown.contains(e.relatedTarget)) {
+            target.classList.remove('expanded');
+        }
+    }, true);
+}
+
 function autosize(el) {
     let offset = (!window.opera)
         ? (el.offsetHeight - el.clientHeight)
@@ -643,9 +691,30 @@ ready(function () {
         });
     });
 
-    var content = document.getElementById('content');
+    makeMenu(
+        document.querySelector('#user-menu'),
+        document.querySelector('#user-menu-dropdown')
+    );
+
+    let column = document.querySelector('#column');
+    if (column && column.querySelector('#ctitle') && column.querySelector('#column-expander')) {
+        let columnExpander = column.querySelector('#column-expander');
+        keyboardClickable(columnExpander);
+        columnExpander.addEventListener('click', () => {
+            column.classList.toggle('expanded');
+        });
+    } else {
+        column.classList.add('expanded');
+    }
+
+    let tagsColumn = document.querySelector('#column > .tags');
+    if (tagsColumn) {
+        document.querySelector('#column').classList.add('bottom');
+    }
+
+    let content = document.getElementById('content');
     if (content) {
-        var pageMID = content.getAttribute('data-mid');
+        let pageMID = content.getAttribute('data-mid');
         if (pageMID > 0) {
             document.querySelectorAll('li.msg').forEach(li => {
                 let showMoreBtn = li.querySelector('.msg-comments');