Merge branch 'master' into unix-sockets

1 files changed, 88 insertions, 84 deletions

diff --git a/assets/js/handlers.js b/assets/js/handlers.js
index 1498f39a..539974fb 100644
--- a/assets/js/handlers.js
+++ b/assets/js/handlers.js
@@ -1,8 +1,6 @@
 'use strict';
 
 (function () {
-    var n2a = function (n) { return Array.prototype.slice.call(n); };
-
     var video_player = document.getElementById('player_html5_api');
     if (video_player) {
         video_player.onmouseenter = function () { video_player['data-title'] = video_player['title']; video_player['title'] = ''; };
@@ -11,135 +9,141 @@
     }
 
     // For dynamically inserted elements
-    document.addEventListener('click', function (e) {
-        if (!e || !e.target) { return; }
-        e = e.target;
-        var handler_name = e.getAttribute('data-onclick');
+    addEventListener('click', function (e) {
+        if (!e || !e.target) return;
+
+        var t = e.target;
+        var handler_name = t.getAttribute('data-onclick');
+
         switch (handler_name) {
             case 'jump_to_time':
-                var time = e.getAttribute('data-jump-time');
+                e.preventDefault();
+                var time = t.getAttribute('data-jump-time');
                 player.currentTime(time);
                 break;
             case 'get_youtube_replies':
-                var load_more = e.getAttribute('data-load-more') !== null;
-                var load_replies = e.getAttribute('data-load-replies') !== null;
-                get_youtube_replies(e, load_more, load_replies);
+                var load_more = t.getAttribute('data-load-more') !== null;
+                var load_replies = t.getAttribute('data-load-replies') !== null;
+                get_youtube_replies(t, load_more, load_replies);
                 break;
             case 'toggle_parent':
-                toggle_parent(e);
+                e.preventDefault();
+                toggle_parent(t);
                 break;
             default:
                 break;
         }
     });
 
-    n2a(document.querySelectorAll('[data-mouse="switch_classes"]')).forEach(function (e) {
-        var classes = e.getAttribute('data-switch-classes').split(',');
-        var ec = classes[0];
-        var lc = classes[1];
-        var onoff = function (on, off) {
-            var cs = e.getAttribute('class');
-            cs = cs.split(off).join(on);
-            e.setAttribute('class', cs);
-        };
-        e.onmouseenter = function () { onoff(ec, lc); };
-        e.onmouseleave = function () { onoff(lc, ec); };
+    document.querySelectorAll('[data-mouse="switch_classes"]').forEach(function (el) {
+        var classes = el.getAttribute('data-switch-classes').split(',');
+        var classOnEnter = classes[0];
+        var classOnLeave = classes[1];
+        function toggle_classes(toAdd, toRemove) {
+            el.classList.add(toAdd);
+            el.classList.remove(toRemove);
+        }
+        el.onmouseenter = function () { toggle_classes(classOnEnter, classOnLeave); };
+        el.onmouseleave = function () { toggle_classes(classOnLeave, classOnEnter); };
     });
 
-    n2a(document.querySelectorAll('[data-onsubmit="return_false"]')).forEach(function (e) {
-        e.onsubmit = function () { return false; };
+    document.querySelectorAll('[data-onsubmit="return_false"]').forEach(function (el) {
+        el.onsubmit = function () { return false; };
     });
 
-    n2a(document.querySelectorAll('[data-onclick="mark_watched"]')).forEach(function (e) {
-        e.onclick = function () { mark_watched(e); };
+    document.querySelectorAll('[data-onclick="mark_watched"]').forEach(function (el) {
+        el.onclick = function () { mark_watched(el); };
     });
-    n2a(document.querySelectorAll('[data-onclick="mark_unwatched"]')).forEach(function (e) {
-        e.onclick = function () { mark_unwatched(e); };
+    document.querySelectorAll('[data-onclick="mark_unwatched"]').forEach(function (el) {
+        el.onclick = function () { mark_unwatched(el); };
     });
-    n2a(document.querySelectorAll('[data-onclick="add_playlist_video"]')).forEach(function (e) {
-        e.onclick = function () { add_playlist_video(e); };
+    document.querySelectorAll('[data-onclick="add_playlist_video"]').forEach(function (el) {
+        el.onclick = function () { add_playlist_video(el); };
     });
-    n2a(document.querySelectorAll('[data-onclick="add_playlist_item"]')).forEach(function (e) {
-        e.onclick = function () { add_playlist_item(e); };
+    document.querySelectorAll('[data-onclick="add_playlist_item"]').forEach(function (el) {
+        el.onclick = function () { add_playlist_item(el); };
     });
-    n2a(document.querySelectorAll('[data-onclick="remove_playlist_item"]')).forEach(function (e) {
-        e.onclick = function () { remove_playlist_item(e); };
+    document.querySelectorAll('[data-onclick="remove_playlist_item"]').forEach(function (el) {
+        el.onclick = function () { remove_playlist_item(el); };
     });
-    n2a(document.querySelectorAll('[data-onclick="revoke_token"]')).forEach(function (e) {
-        e.onclick = function () { revoke_token(e); };
+    document.querySelectorAll('[data-onclick="revoke_token"]').forEach(function (el) {
+        el.onclick = function () { revoke_token(el); };
     });
-    n2a(document.querySelectorAll('[data-onclick="remove_subscription"]')).forEach(function (e) {
-        e.onclick = function () { remove_subscription(e); };
+    document.querySelectorAll('[data-onclick="remove_subscription"]').forEach(function (el) {
+        el.onclick = function () { remove_subscription(el); };
     });
-    n2a(document.querySelectorAll('[data-onclick="notification_requestPermission"]')).forEach(function (e) {
-        e.onclick = function () { Notification.requestPermission(); };
+    document.querySelectorAll('[data-onclick="notification_requestPermission"]').forEach(function (el) {
+        el.onclick = function () { Notification.requestPermission(); };
     });
 
-    n2a(document.querySelectorAll('[data-onrange="update_volume_value"]')).forEach(function (e) {
-        var cb = function () { update_volume_value(e); }
-        e.oninput = cb;
-        e.onchange = cb;
+    document.querySelectorAll('[data-onrange="update_volume_value"]').forEach(function (el) {
+        function update_volume_value() {
+            document.getElementById('volume-value').textContent = el.value;
+        }
+        el.oninput = update_volume_value;
+        el.onchange = update_volume_value;
     });
 
-    function update_volume_value(element) {
-        document.getElementById('volume-value').innerText = element.value;
-    }
 
     function revoke_token(target) {
         var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
         row.style.display = 'none';
         var count = document.getElementById('count');
-        count.innerText = count.innerText - 1;
+        count.textContent--;
 
-        var referer = window.encodeURIComponent(document.location.href);
         var url = '/token_ajax?action_revoke_token=1&redirect=false' +
-            '&referer=' + referer +
+            '&referer=' + encodeURIComponent(location.href) +
             '&session=' + target.getAttribute('data-session');
-        var xhr = new XMLHttpRequest();
-        xhr.responseType = 'json';
-        xhr.timeout = 10000;
-        xhr.open('POST', url, true);
-        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState == 4) {
-                if (xhr.status != 200) {
-                    count.innerText = parseInt(count.innerText) + 1;
-                    row.style.display = '';
-                }
-            }
-        }
 
-        var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
-        xhr.send('csrf_token=' + csrf_token);
+        var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
+
+        helpers.xhr('POST', url, {payload: payload}, {
+            onNon200: function (xhr) {
+                count.textContent++;
+                row.style.display = '';
+            }
+        });
     }
 
     function remove_subscription(target) {
         var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
         row.style.display = 'none';
         var count = document.getElementById('count');
-        count.innerText = count.innerText - 1;
+        count.textContent--;
 
-        var referer = window.encodeURIComponent(document.location.href);
         var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
-            '&referer=' + referer +
+            '&referer=' + encodeURIComponent(location.href) +
             '&c=' + target.getAttribute('data-ucid');
-        var xhr = new XMLHttpRequest();
-        xhr.responseType = 'json';
-        xhr.timeout = 10000;
-        xhr.open('POST', url, true);
-        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState == 4) {
-                if (xhr.status != 200) {
-                    count.innerText = parseInt(count.innerText) + 1;
-                    row.style.display = '';
-                }
+
+        var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
+
+        helpers.xhr('POST', url, {payload: payload}, {
+            onNon200: function (xhr) {
+                count.textContent++;
+                row.style.display = '';
             }
+        });
+    }
+
+    // Handle keypresses
+    addEventListener('keydown', function (event) {
+        // Ignore modifier keys
+        if (event.ctrlKey || event.metaKey) return;
+
+        // Ignore shortcuts if any text input is focused
+        let focused_tag = document.activeElement.tagName.toLowerCase();
+        const allowed = /^(button|checkbox|file|radio|submit)$/;
+
+        if (focused_tag === 'textarea') return;
+        if (focused_tag === 'input') {
+            let focused_type = document.activeElement.type.toLowerCase();
+            if (!allowed.test(focused_type)) return;
         }
 
-        var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
-        xhr.send('csrf_token=' + csrf_token);
-    }
+        // Focus search bar on '/'
+        if (event.key === '/') {
+            document.getElementById('searchbox').focus();
+            event.preventDefault();
+        }
+    });
 })();