// ==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);
})();
Wrap
Beautify