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.