/** === LINKS === * Simple add your links into the MENU_LINKS array following the example format * It will be added to the menu in the same order as you defined it */ /** === SEPARATOR === * Like our example, use {name: "separator"} to add a separator to the menu */ /** === ICONS === * You can use https://css.gg, icons are automatically imported if start with gg-*** (Ex: gg-game). * Else, you can use https://fontawesome.com/icons/ or any other custom icon library. * Just import the CSS manually. **/ // EDIT HERE var MENU_LINKS = [ { name: "Gaming", url: "/videos/recently-added?languageOneOf=fr&categoryOneOf=7&c=true&s=2", icon: "gg-games", }, { name: "Kid's", url: "/videos/recently-added?languageOneOf=fr&categoryOneOf=17&c=true&s=2", icon: "gg-girl", }, { name: "separator" }, { name: "Pewtix - Dicutez de l\'actualité", url: "https://pewtix.com/", target: "_blank", icon: "gg-twitter" }, { name: "Pixel - Partagez vos photos", url: "https://pixel.orion-hub.fr/", target: "_blank", icon: "gg-instagram" }, { name: "separator" }, { name: "Liberapay - Faire un Don", url: "https://liberapay.com/bthommy/", target: "_blank", icon: "gg-coffee" } ] // END EDIT -- DO NOT TOUCH AFTER /** * Wait for the DOM to be loaded * Then, init the custom menu */ window.addEventListener("DOMContentLoaded", (event) => { const wait__menuCustomInterval = setInterval(() => { let firstLink = document.querySelectorAll( '.menu-block a[href="/videos/overview"]' ); if (firstLink.length > 0) { clearInterval(wait__menuCustomInterval); initCustomMenu(firstLink[0]); } }, 500); }); /** * Init the custom menu * @param {HTMLElement} firstLink The first link of the menu * @returns {void} */ function initCustomMenu(linkTemplate) { //Parent node which contains 'Videos' title and the 3 links ('Découvrir', 'Tendances', 'Récemment ajoutées') const menuContainer = linkTemplate.parentNode; // Define head element const head = document.head; // Define and ADD custom CSS const customCSS = ` hr { background-color: #ccc !important; } a.menu-link i { margin-right: 16px; } `; const style = document.createElement("style"); style.type = "text/css"; style.appendChild(document.createTextNode(customCSS)); head.appendChild(style); // Define separator const separator = document.createElement("hr"); separator.setAttribute("width", "80%"); separator.setAttribute("color", "white"); separator.setAttribute("background-color", "white"); separator.setAttribute("height", "1px"); separator.setAttribute("visible", "true"); //Adding links MENU_LINKS.forEach((link) => { if (link.name === "separator") { // Adding separator menuContainer.appendChild(separator.cloneNode()); } else { // Adding link // Manage icon (automatically import if start with gg-*** from https://css.gg) let icon = ""; if (link.icon.startsWith("gg-")) { icon = `<i class="${link.icon}"></i>`; const ggName = link.icon.replace("gg-", ""); // Inject css in the head const cssLink = document.createElement("link"); cssLink.type = "text/css"; cssLink.rel = "stylesheet"; cssLink.href = `https://css.gg/${ggName}.css`; head.appendChild(cssLink); } else { icon = `<i class="${link.icon}"></i>`; } // Create link const linkNode = linkTemplate.cloneNode(); linkNode.setAttribute("href", link.url); linkNode.setAttribute("routerLink", link.url); linkNode.setAttribute("target", (link.target || "_self")); linkNode.innerHTML = icon + " " + link.name; // Add link to the menu menuContainer.appendChild(linkNode); } }); }