chevron-left chevron-right

[JS] Jak zaktualizować licznik elementów w pasku tytułu okna przeglądarki?

Korzystając z różnych aplikacji webowych czy stron internetowych, między innymi z GMaila czy Facebooka można zauważyć, że pasek tytułu jest aktualizowany w zależności od tego czy mamy jakieś nieprzeczytane wiadomości na stronie. W dzisiejszym wpisie, chciałbym Ci pokazać jak można osiągnąć ten efekt.

Przykład licznika nieprzeczytanych maili w GMail

Implementacja licznika w Javascript

Kod aktualizacji licznika nieprzeczytanych wiadomości został napisany za pomocą czystego Javascript. Dzięki temu, można go bezproblemowo wykorzystać w różnych projektach webowych, niezależnie od tego czy korzystamy z jQuery, Backbone.js czy też YUI3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
(function () {
    var Notifier = function () {
        // pobieramy element title
        var titlebar = document.getElementsByTagName('title')[0];
        // pobieramy zawartość elementu title
        var pageTitle = titlebar.innerHTML;
        // domyślna liczba wiadomości
        var total = 0;
        // maksymalna liczba wiadomości
        var totalMax = 99;
        // wskaźnik czy dodajemy końcówkę "+" do liczby elementów
        // nieprzeczytanych
        var withSuffix = false;
        // funkcja aktualizująca licznik
        var updateTotal = function (value) {
            if (value > 0 && value <= totalMax) {
                total = value;
                withSuffix = false;
            } else if (value <= 0) {
                total = 0;
                withSuffix = false;
            } else if (total > totalMax) {
                total = totalMax;
                withSuffix = true;
            }
 
            updateTitle();
        };
        // funkcja aktualizująca zawartość elementu title
        var updateTitle = function () {
            titlebar.innerHTML = '(' + total + (withSuffix ? '+' : '') + ') ' + pageTitle;
        };
 
        // zwracamy obiekt z publicznymi funkcjami
        return {
            set: function (value) {
                if (!isNaN(value)) {
                    updateTotal(parseInt(value, 10));
                }
 
                return this;
            },
            add: function (value) {
                value = (!isNaN(value)) ? total + parseInt(value, 10) : total + 1;
 
                updateTotal(value);
 
                return this;
            },
            sub: function (value) {
                value = (!isNaN(value)) ? total - parseInt(value, 10) : total - 1;
 
                updateTotal(value);
 
                return this;
            },
            reset: function () {
                updateTotal(0);
 
                return this;
            },
            remove: function () {
                titlebar.innerHTML = pageTitle;
            }
        };
    };
 
    window.notifier = new Notifier();
})();

Powyższy kod generuje obiekt przypisany do przestrzeni window okna przeglądarki (jest wykonywany raz i dostępny z każdego miejsca w kodzie). Udostępnia on 5 metod (dostępne za pomocą window.notifier lub notifier - zamiennie):

notifier.set(value);
Ustawia wartość początkową licznika wg parametru value.
notifier.add(value);
Dodaje wartość parametru value do aktualnego stanu licznika lub jeśli parametr nie został określony, to zwiększa licznik o 1.
notifier.sub(value);
Odejmuje wartość parametru value od aktualnego stanu licznika lub jeśli parametr nie został określony, to zmniejsza licznik o 1.
notifier.reset();
Zeruje licznik powiadomień, ustawiając wartość powiadomień na 0.
notifier.remove();
Usuwa licznik z paska tytułu przywracając pierwotny tytuł okna przeglądarki.

Przykład zastosowania

Na początek, należy umieścić powyższy kod (bezpośrednio w kodzie HTML strony lub za pomocą pliku) w stopce strony tuż przed znacznikiem zamykającym kod strony - </body>. Następnie możemy zacząć korzystać z powyższego kodu w następujący sposób:

1
2
3
4
5
6
7
notifier.set(1); // ustawia licznik wiadomości w pasku tytułu z wartością 1
notifier.add(); // licznik = 1
notifier.add(5); // licznik = 6
notifier.sub(); // licznik = 5
notifier.sub(3); // licznik = 2
notifier.reset(); // licznik = 0
notifier.remove(); // usuwa licznik z paska tytułu

Podsumowanie

Kod jest bardzo prosty w swojej budowie i równie prosty w użyciu. Na pewno można jeszcze wprowadzić do niego dodatkowe funkcjonalności, ale w chwili obecnej nie było takiej potrzeby. Z powyższego kodu można korzystać w swoich aplikacjach webowych zgodnie z zasadami licencji MIT.

Powyższy kod został udostępniony w serwisie Github:
kod titlebar-notifier na Githubie
Tam można zgłaszać ewentualne uwagi i sugestie odnośnie wprowadzenia dodatkowych funkcjonalności.

  • Na ForumWeb.pl jest używane bardzo podobne podejście, z tym, że opisana tutaj technika jest fallbackiem 😉 Udało mi się bowiem wpaść na GitHubie na coś fajniejszego (wizualnie, ale za to tragiczniejszego jeśli chodzi o wydajność): tinycon http://blog.tommoor.com/tinycon/

    Tym sposobem wszystkim userom, którzy to obsługują, wyświetlany jest numerek w faviconce (przydaje się zwłaszcza jeśli mamy przypiętą kartę i widać samą ikonkę) a całej reszcie – napis. Oczywiście nic nie stoi na przeszkodzie, żeby obydwie metody połączyć. Tym bardziej, że tinycon nie ma takiego fajnego API, jak Notifier z tego artka 😉

    BTW czemu nie UMD/AMD tylko podpięcie pod globala? Raczej coraz mniej tego typu rozwiązań się widzi.

  • Czemu podpiąłem to pod globala? Chodziło o prostotę. Kod zawsze można ulepszyć/bardziej skomplikować wedle potrzeby.

    Poza tym, uznałem że tą funkcjonalność można bezpiecznie podpiąć pod globalną przestrzeń nazw gdyż jest to funkcjonalność wykorzystywana do aktualizacji tylko jednego elementu jakim jest tag title. Jako inne rozwiązanie, można wprowadzić jakiś rodzaj przestrzeni nazw definiowanej przez developera, dzięki czemu można będzie uniknąć jakichkolwiek kolizji nazewnictwa w przestrzeni globalnej.