Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

anleitungen:software:peertube:peertube_-_menu_enhancer [2024/01/09 22:25] – angelegt mikeanleitungen:software:peertube:peertube_-_menu_enhancer [Unbekanntes Datum] (aktuell) – Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1
Zeile 1: Zeile 1:
 +====== PeerTube - Menu Enhancer ======
  
 +<code>
 +/** === 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);
 +        }
 +    });
 +}
 +</code>

Zuletzt angesehen:

Navigation

★ Alternative Startseite
★ Helpdesk
★ Links
★ Maps
★ Radio
★ Suchmaschine

Drucken/exportieren