☰

Neopets: Swift Bar

Swiftly navigate Neopets based on personal preference. Adds customizable links to the bottom of the page.

// ==UserScript==
// @name         Neopets: Swift Bar
// @author       https://greasyfork.org/users/547396
// @namespace    https://greasyfork.org/users/547396
// @description  Swiftly navigate Neopets based on personal preference. Adds customizable links to the bottom of the page.
// @match        *://*.neopets.com/*
// @grant        none
// @version      0.1
// ==/UserScript==

(function() {
    'use strict';

    /* INSTRUCTIONS
    ** Modify the url, icon, and title within swiftObj for your desired links
    ** You may remove / add links by altering swiftObj
    ** Icons use FontAwesome. To find an icon visit this link: https://fontawesome.com/icons
    ** Filter by free as this is the free version of FontAwesome, and copy-paste the title of your chosen icon into swiftObj
    ** Ie. 'heart' will render the heart icon
    */

    /* SETTINGS
    ** Change showTitle to 'true' if you want to display the title next to the icons
    ** Set your username
    */
    const showTitle = false,
          username = 'YOUR-USERNAME';

    /*
    ** Link Object
    */
    let swiftObj = {
        ssw: {
            icon: 'hat-wizard',
            url: 'javascript:void(0)',
            title: 'SSW'
        },
        lookup: {
            icon: 'user-circle',
            url: '/userlookup.phtml?user=' + username,
            title: 'Lookup'
        },
        mail: {
            icon: 'envelope',
            url: '/neomessages.phtml',
            title: 'Neomail'
        },
         sdb: {
            icon: 'archive',
            url: '/safetydeposit.phtml',
            title: 'SDB'
        },
        gallery: {
            icon: 'th',
            url: '/gallery/index.phtml?gu=' + username,
            title: 'Gallery'
        },
        pound: {
            icon: 'heart',
            url: '/pound',
            title: 'Pound'
        },
        beauty_contest: {
            icon: 'palette',
            url: '/beauty',
            title: 'BC'
        },
        quests: {
            icon: 'star',
            url: '/quests.phtml',
            title: 'Quests'
        },
        customization_spotlight: {
            icon: 'medal',
            url: '/spotlights/custompet/index.phtml',
            title: 'CS'
        },
        board1: {
            icon: 'trash-alt',
            url: '/neoboards/boardlist.phtml?board=31',
            title: 'NCC'
        },
        board2: {
            icon: 'dumpster-fire',
            url: '/neoboards/boardlist.phtml?board=34',
            title: 'PC'
        }
    };

    init();

    /*
    ** Initialize, create bar
    */
    function init() {
        let footer = document.getElementById( 'footer__2020' ),
            swift = document.createElement( 'div' );

        swift.id = 'swift';
        footer.appendChild( swift );

        createLinks();
        appendStyles();
        addNeoLogic();
    }

    /*
    ** Loop through obj
    */
    function createLinks() {
        for ( let key in swiftObj ) {
            let icon = swiftObj[key].icon,
                url = swiftObj[key].url,
                title = swiftObj[key].title;

            buildItem( icon, url, title, key );
        }
    }

    /*
    ** Build each item
    */
    function buildItem( icon, url, title, key ) {
        let anchor = document.createElement( 'a' ),
            span = document.createElement( 'span' ),
            titleNode = document.createTextNode( title ),
            ico = document.createElement( 'i' ),
            iconChoice = 'fa-' + icon,
            holster = document.getElementById( 'swift' );

        anchor.href = url;
        ico.classList.add( 'fas', 'far', iconChoice );

        anchor.appendChild( ico );
        span.appendChild( titleNode );
        anchor.appendChild( span );
        anchor.setAttribute( 'id', key );
        holster.appendChild( anchor );

        if ( showTitle ) {
            holster.classList.add( 'showTitle' );
        }
    }

    /*
    ** Append styles
    */
    function appendStyles() {
        let head = document.head,
            fontAwesome = document.createElement('link'),
            garbageCss = `
            #swift { position: fixed; bottom: 0; left: 0; display: flex; justify-content: flex-end; background: #171717; border-top: 2px solid #000; z-index: 99; width: 100%; font-family: arial, sans-serif; font-size: 9px; letter-spacing: .05rem; }
            #swift a { display: flex; align-items: center; padding: .75rem; color: #b4d0cc; background-color: transparent; transition: .25s; }
            #swift a i { padding: 0 .25rem; font-size: 16px; }
            #swift a:hover { color: #fff; background-color: #000; }
            #swift:not(.showTitle) a span { display: none; }
            #ssw__2020 { bottom: 2.55rem; }
            `,
            style = document.createElement( 'style' ),
            cssNode = document.createTextNode( garbageCss );

        fontAwesome.type = 'text/css';
        fontAwesome.rel = 'stylesheet';
        fontAwesome.href = 'https://use.fontawesome.com/releases/v5.10.2/css/all.css';

        style.appendChild( cssNode );
        head.appendChild( fontAwesome );
        head.appendChild( style );
    }

    /*
    ** Add any existing neo events
    */
    function addNeoLogic() {
       let ssw = document.getElementById('ssw');

       ssw.setAttribute('onclick', 'toggleSSW__2020()');
    }

})();