Raw Source Toggle Dropdown

• Minified Source

burn / Dailymotion use keyboard on recent searches

// ==UserScript==
// @name         Dailymotion use keyboard on recent searches
// @namespace    https://openuserjs.org/users/burn
// @version      0.1.5
// @copyright    2019, burn (https://openuserjs.org//users/burn)
// @description  Lets you use arrow keys to navigate recent searches dropdown menu
// @author       Burn
// @updateURL    https://openuserjs.org/meta/burn/Dailymotion_use_keyboard_on_recent_searches.meta.js
// @downloadURL  https://openuserjs.org/install/burn/Dailymotion_use_keyboard_on_recent_searches.user.js
// @include      https://www.dailymotion.com/*
// @match        https://www.dailymotion.com/*
// @license      MIT
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const DBG = true;
    var qS = function(el, scope) {
            scope = (typeof scope == 'object') ? scope : document;
            return scope.querySelector(el) || false;
        },
        qSall = function(els, scope) {
            scope = (typeof scope == 'object') ? scope : document;
            return scope.querySelectorAll(els) || false;
        },
        log = function(s) {
            DBG && console.log(s);
        },
        getKey = function(prop, val, obj) {
            var j = 0,
                jL = obj.length;
            for (; j < jL; j++) {
                if (obj[j][prop] == val) {
                    return j;
                }
            }
            return false;
        },
        targetNode = qS('body'),
        activeListeners = [
            {focus : false},
            {keyup : false}
        ],
        focusAdded = false,
        keyupAdded = false,
        observerConfig = {
            attributes: false,
            childList: true,
            subtree: true
        },
        searchEl = false,
        searchElFound = false,
        callback = function(mutationsList, observer) {
            mutationsList.forEach(function(mutation) {
                var entry = {
                    mutation: mutation,
                    el: mutation.target,
                    value: mutation.target.textContent,
                    oldValue: mutation.oldValue
                };
                searchEl = qS("#search", entry.el);
                if (false != searchEl && false == searchElFound) {
                    searchElFound = true;
                    log("found #search element");
                    var styleEl = document.createElement("style");
                    styleEl.innerText = ".highlight {background:linear-gradient(262deg,#00d2f3,#0af);color:#FFF;}";
                    qS("head").appendChild(styleEl);
                    if (false !== getKey("focus", true, activeListeners)) {log("focus listener already active, exiting");return;}
                    log("adding focus listener");
                    searchEl.addEventListener("focus", function() {
                        activeListeners["focus"] = true;
                        log("focus triggered");
                        var suggestions = qS("[class^='SearchHistory__container___']"),
                            lis = qSall("li", suggestions),
                            currentIdx = 0;
                        if (suggestions == false) {log("suggestions not found, exiting");return;}
                        if (false !== getKey("keyup", true, activeListeners)) {log("keyup listener already active, exiting");return;}
                        log("adding keyup listener");
                        searchEl.addEventListener("keyup", function(e) {
                            activeListeners["keyup"] = true;
                            log("keyup triggered");
                            if (e.keyCode == 13) { // enter
                                var selectedLi = qS("li.highlight", suggestions);
                                if (selectedLi != false) selectedLi.click();
                            }
                            if (e.keyCode == 38) { // up
                                currentIdx--;
                                if (currentIdx < 1) currentIdx = lis.length;
                            }
                            if (e.keyCode == 40) { // down
                                currentIdx++;
                                if (currentIdx > lis.length) currentIdx = 1;
                            }
                            if (e.keyCode == 38 || e.keyCode == 40) {
                                lis.forEach(function(elm, idx) {
                                    elm.classList.remove("highlight");
                                });
                                qS("li:nth-child(" + currentIdx + ")", suggestions).classList.add("highlight");
                                currentIdx > 1 && (searchEl.value = qS("li:nth-child(" + currentIdx + ")", suggestions).innerText);
                            }
                        });
                    });
                    searchEl.focus();
                }
            }) // end forEach
        };
    var observer = new MutationObserver(callback);
    observer.observe(targetNode, observerConfig);
})();