JavaScript Title-Animation for inactive Tab

Question

I found a script here to query the browser tab activity and wanted to combine that with a function that plays a small title animation when inactive.

Apart from the fact that i can still optimize the performance somewho, one error symbols are displayed on each side when the train has passed through once.

At first I thought it was the emoji (two combined emoji), but it happens to others too. Anyone have an idea?

var vis = (function () {
    var stateKey, eventKey, keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function (c) {
        if (c) {
            document.addEventListener(eventKey, c);
            //document.addEventListener("blur", c);
            //document.addEventListener("focus", c);
        }
        return !document[stateKey];
    };
})();

var storeTitle = document.title,
    myAnimation;

function getLokTitle() {

    let title = "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _  ",
        //let title = "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _  ",
        i = 0;

    myAnimation = setTimeout(function () {
        setInterval(function () {
            document.title = title.substr(i, title.length) + title.substr(0, i);
            i = (i + 1) % title.length;

            if (vis() === true) {
                clearTimeout(myAnimation);
                document.title = storeTitle;
                return storeTitle;
            }
        }, 250);
    }, 1000);

    return title;
}

function getStoreTitle() {

    if (typeof myAnimation !== "undefined") {
        clearTimeout(myAnimation);
    }
    return storeTitle;
}

vis(function () {
    document.title = vis() ? getStoreTitle() : getLokTitle();
    //console.log(new Date, 'visible ?', vis());
});

// to set the initial state
document.title = vis() ? getStoreTitle() : getLokTitle();

`let title = Array.from("_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ ")` and then `document.title = title.slice(i).concat(title.slice(0,i)).join("")`. Your code assumes that the string is single-byte characters but it clearly isn't. `Array.from("some string")` will split the string by characters instead of by bytes. — Niet the Dark Absol, Nov 02 '21 at 20:23

score 0 · Accepted Answer · answered Nov 02 '21 at 20:34

Thanks to Niet the Dark Absol,

here is the final code:

// Source: https://stackoverflow.com/questions/19519535/detect-if-browser-tab-is-active-or-user-has-switched-away/19519701#19519701
//  var visible = vis();
//  vis(function(){});
var vis = (function () {
    var stateKey, eventKey, keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function (c) {
        if (c) {
            document.addEventListener(eventKey, c);
            //document.addEventListener("blur", c);
            //document.addEventListener("focus", c);
        }
        return !document[stateKey];
    };
})();

var storeTitle = document.title,
    myAnimation;

function getLokTitle() {

    var title = "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _  ",
        //let title = "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _  ",
        i = 0;

    document.title = title;

    myAnimation = setTimeout(function () {
        let title = Array.from("_ _ _ _ _ _ _ _ _ _ _ _ _ _ _  ");
        setInterval(function () {
            //document.title = title.substr(i, title.length) + title.substr(0, i);
            document.title = title.slice(i).concat(title.slice(0, i)).join("");
            i = (i + 1) % title.length;

            if (vis() === true) {
                clearTimeout(myAnimation);
                document.title = storeTitle;
                return storeTitle;
            }
        }, 250);
    }, 1000);

    return title;
}

function getStoreTitle() {

    if (typeof myAnimation !== "undefined") {
        clearTimeout(myAnimation);
    }
    return storeTitle;
}

vis(function () {
    document.title = vis() ? getStoreTitle() : getLokTitle();
    //console.log(new Date, 'visible ?', vis());
});

// to set the initial state
document.title = vis() ? getStoreTitle() : getLokTitle();

JavaScript Title-Animation for inactive Tab

1 Answers1