Greasmonkey - rmv.de add link button for search query

rmv_query_link.js

// ==UserScript==
// @name     rmv_query_link.js
// @description add button to get a link to the current search query
// @namespace   https://github.com/s-light
// @include     https://www.rmv.de/*
// @version  0.43.0
// require https://s-light.github.io/xyz/script.js
//
// https://wiki.greasespot.net/Metadata_Block#.40require
// ==/UserScript==



// https://stackoverflow.com/a/18234317/574981
String.prototype.formatUnicorn = String.prototype.formatUnicorn ||
function() {
    'use strict';
    var str = this.toString();
    if (arguments.length) {
        var t = typeof arguments[0];
        var key;
        var args = ('string' === t || 'number' === t) ?
            Array.prototype.slice.call(arguments) : arguments[0];

        for (key in args) {
            str = str.replace(new RegExp('\\{' + key + '\\}', 'gi'), args[key]);
        }
    }

    return str;
};



function add_button_link(
    link_text,
    link_href=undefined,
    onclick=undefined,
    parent_el=undefined
) {
    // console.group('add_nav_button:');
    const link_new = document.createElement('a');
    link_new.appendChild(document.createTextNode(link_text));
    if (onclick != undefined) {
        link_new.onclick = onclick;
    }
    if (link_href != undefined) {
        link_new.href = link_href;
    }

    link_new.title = link_text;
    // style
    // li_new.classList.add('pull-right');
    link_new.style.display = 'block';
    link_new.style.float = 'right';
    link_new.style.backgroundColor = 'hsl(22, 100%, 40.6%)';
    link_new.style.backgroundImage = 'none';
    link_new.style.height = '25px';
    link_new.style.lineHeight = '25px';
    link_new.style.padding = '0px 10px';
    link_new.style.border = 'none';
    link_new.style.fontSize = '13px';
    link_new.style.fontWeight = 'bold';
    link_new.style.color = 'hsl(0, 0%, 100%)';
    link_new.style.marginLeft = '0.5em';

    if (parent_el == undefined) {
        parent_el = document.querySelector('#tpRQ_Buttons');
    }
    parent_el.insertBefore(link_new, parent_el.firstChild);

    // console.groupEnd();
    // console.log('');
    return link_new;
}

function generate_search_url() {
    /*
    example url

    https://www.rmv.de/auskunft/bin/jp/query.exe/dn?start=Suchen
    &REQ0JourneyStopsS0ID=A=1@O=Hofheim%20am%20Taunus%20Bahnhof@L=003004199@
    &REQ0JourneyStopsZ0ID=A=1@O=Idstein%20Bahnhof@L=003011318@
    &REQ0JourneyDate=13.04.19
    &REQ0JourneyTime=09:00

    */

    // get values for REQ0JourneyStops*0ID
    const reqex_stop_clean = /[^AOL]=.+?@/g;
    // 'A=1@O=Hofheim Bahnhof@X=8444503@Y=50084263@U=80@L=3004199@p=1554272406@'
    let REQ0JourneyStopsS0ID = document.querySelector('#HFS_fromID')
        .value
        .replace(reqex_stop_clean, '');
    let REQ0JourneyStopsZ0ID = document.querySelector('#HFS_toID')
        .value
        .replace(reqex_stop_clean, '');

    // '13.04.19'
    let REQ0JourneyDate = document.querySelector('#HFS_date_REQ0')
        .value
        .replace(/[Mo|Di|Mi|Do|Fr|Sa|So].*?,\s/, '');
    // '09:00'
    let REQ0JourneyTime = document.querySelector('#HFS_time_REQ0').value;

    const search_link_format = (
        'https://www.rmv.de/auskunft/bin/jp/query.exe/dn?start=Suchen' +
        '&REQ0JourneyStopsS0ID={REQ0JourneyStopsS0ID}' +
        '&REQ0JourneyStopsZ0ID={REQ0JourneyStopsZ0ID}' +
        '&REQ0JourneyDate={REQ0JourneyDate}' +
        '&REQ0JourneyTime={REQ0JourneyTime}' +
        '#HFSResult'
    );

    const search_link = search_link_format.formatUnicorn({
        REQ0JourneyStopsS0ID: REQ0JourneyStopsS0ID,
        REQ0JourneyStopsZ0ID: REQ0JourneyStopsZ0ID,
        REQ0JourneyDate: REQ0JourneyDate,
        REQ0JourneyTime: REQ0JourneyTime,
    });

    // console.log('search_link', search_link);
    return search_link;
}



function update_link(link_button) {
    let link = generate_search_url();
    link_button.href = link;
}

// function callback(mutationList, observer) {
//     console.log('ping');
//     mutationList.forEach((mutation) => {
//         if (mutation.type == 'attributes') {
//             /* An attribute value changed on the element in
//             mutation.target; the attribute name is in
//             mutation.attributeName and its previous value is in
//             mutation.oldValue */
//             if (mutation.attributeName == 'value') {
//                 console.log('value of', mutation.target, 'changed');
//             }
//         }
//     });
// }

function register_update_link(link_button) {

    // var observerOptions = {
    //     childList: false,
    //     attributes: true,
    //     subtree: false,
    // };
    //
    // // var observer = new MutationObserver((mutationList, observer) => {
    // //     callback(mutationList, observer, link_button);
    // // });
    // var observer = new MutationObserver(callback);
    //
    //
    // → MutationObserver does not fire on js 'value' changes.
    //
    // const change_el_list = document.querySelectorAll(
    //     '#HFS_toID, #HFS_fromID, #HFS_date_REQ0, #HFS_time_REQ0');
    // for (const targetNode of change_el_list) {
    //     observer.observe(targetNode, observerOptions);
    //     console.log(
    //         'registered observer', observer, 'for targetNode', targetNode);
    // }

    const change_el_list = document.querySelectorAll(
        '#HFS_to, #HFS_from, ' +
        '#HFS_toID, #HFS_fromID, ' +
        '#HFS_date_REQ0, #HFS_time_REQ0');
    for (const targetNode of change_el_list) {
        // targetNode.addEventListener('input', function(event) {
        //     console.info('input!', event, link_button);
        targetNode.addEventListener('input', function() {
            update_link(link_button);
        });
        targetNode.addEventListener('change', function() {
            update_link(link_button);
        });
        targetNode.addEventListener('keyup', function() {
            update_link(link_button);
        });
    }

    // const click_el_list = document.querySelectorAll(
    //     '#HFS_time_REQ0 ~ span:first-of-type, ' +
    //     '#HFS_date_REQ0 ~ span:first-of-type');
    // for (const targetNode of click_el_list) {
    //     // targetNode.addEventListener('click', function(event) {
    //     //     console.log(event);
    //     targetNode.addEventListener('click', function() {
    //         update_link(link_button);
    //     });
    // }
    document.querySelector('#tpRQ_Content').addEventListener(
        'click',
        function() {
            update_link(link_button);
        }
    );
}





function start_script() {
    console.info('RMV Search Query Link..');

    const link_button = add_button_link('search query link');
    register_update_link(link_button);
    update_link(link_button);

    console.info('all user scripting done.');
}

// console.clear();
console.info('******************************************');
start_script();