Komunikat o plikach cookies

Wyskakujące okienko informujące o plikach cookies z dowolna treścią HTML, linkiem odsyłającym do polityki prywatności i buttonem trwale go zamykającym.

Komunikat o plikach cookies

Mając na uwadze nowelizacje Prawa Telekomunikacyjnego, postanowiłem stworzyć prosty i optymalny skrypt informujący potencjalnego użytkownika strony internetowej o możliwości pobrania i zapisania informacji w plikach cookies. Informacje pobierane i zapisywane przez stronę internetową powinny być uwzględnione i opisane na odrębnej podstronie, najczęściej nazywanej "Polityka prywatności".

Do stworzenia skryptu posłużę się autorską biblioteką COMP, i metodą dołączaną do biblioteki o nazwie storage. Zostanie również stworzona wersja z jednym plikiem, zawierająca minimalną grupę metod w klasie COMP niezbędną do działania skryptu.

Zalety:

  • Łatwość instalacji
  • Niewielki rozmiar plików
  • Treść komunikatu znajdująca się w szablonie strony
  • Przycisk zamknij
  • Animacje CSS3

Demo:

Demo skryptu znajduje się u dołu strony. Jeżeli nie widzisz dema, kliknij przycisk "Wyczyść lokalny magazyn" i odśwież stronę.

HTML:

<div id="compsoul-cookies" class="compsoul-cookies content">
  <p>Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "<a href="https://pl.wikipedia.org/wiki/Polityka_prywatno%C5%9Bci" target="_blank">Polityka prywatności</a>".</p>
  <button>Dobra, dej już spokój!</button>
</div>

CSS:

.compsoul-cookies {
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  bottom: 0;
  opacity: 0;
  padding: 20px 160px 20px 20px;
  position: fixed;
  width: 100%;
  z-index: -1;
}

.compsoul-cookies.active {
  animation: show linear 0.4s;
  opacity: 1;
  z-index: 1;
}

.compsoul-cookies.hidden-click {
  animation: hidden linear 0.4s;
  opacity: 0;
  z-index: -1;
}

.compsoul-cookies.hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: 1px; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  width: 1px; 
}

.compsoul-cookies button {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
  width: 120px;
}

@keyframes hidden {
  0% {
    opacity: 1;
    z-index: 1;
  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
  } 
}

@keyframes show {
  0% {
    opacity: 0;
    z-index: -1;
  }
  1% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 1;
    z-index: 1;
  } 
}

JS

<script>  
(function ($) {
  $("#compsoul-cookies").storage({
    name : "cookies",
    element : "#compsoul-cookies button",
    event : "click"
  });
})(Comp);
</script>

JS (wersja alternatywna)

 <script src="uploads/js/storage.min.js"></script> 

Instalacja (wersja alternatywna)

Przygotowałem wersję dla leniuszków, ma ona jednak pewną wadę, biblioteka zawarta w pliku ma taką samą nazwę jak biblioteka używana przez mnie w innych modułach udostępnionych na tym blogu. Można oczywiście ją zmienić, co bardziej zaawansowani użytkownicy na pewno zrobią, lecz na potrzeby tego wpisu zostaje ona niezmieniona. Opisana niedogodność nie będzie dotyczyła innych popularnych bibliotek.

Instalacja skryptu w wersji alternatywnej odbywa się poprzez dodanie styli CSS (okienko z nagłówkiem CSS) w formie niezmienionej, do głównego katalogu ze stylami na naszej stronie internetowej. Możemy oczywiście edytować aspekty wizualne, kolor tła czy wygląd przycisku zamknij, wszystkie te operacje postaram się opisać w podpunkcie "Instalacja". Kolejnym krokiem jest dodanie kodu HTML (okienko z nagłówkiem HTML) do szablonu naszej strony, tuż przed zamknięciem znacznika </body> . Kolejnym i ostatnim już krokiem jest dodanie skryptu JS znajdującego się w pliku STORAGE (wersja alternatywna) (Kliknij aby otworzyć w nowym oknie, następnie zapisz plik za pomocą komendy zapisz bądź kombinacji klawiszy ctrl + s). Plik powinien zostać dodany do szablonu za pomocą importu zewnętrznego pliku, kod:

 <script src="uploads/js/storage.min.js"></script> 

wklejamy tuż pod wcześniej dodany kod HTML, pamiętając o zmianie ścieżki. Przykład prawidłowej instalacji:

    <div id="compsoul-cookies" class="compsoul-cookies content">
      <p>Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "<a href="https://pl.wikipedia.org/wiki/Polityka_prywatno%C5%9Bci" target="_blank">Polityka prywatności</a>".</p>
      <button>Dobra, dej już spokój!</button>
    </div>
    <script src="uploads/js/storage.min.js"></script>
  </body>
</html>

Instalacja

W pierwszej kolejności musimy stworzyć szkielet naszego komunikatu, aby tego dokonać wystarczy skopiować wcześniej przygotowany przez mnie kod HTML:

<div id="compsoul-cookies" class="compsoul-cookies content">
  <p>Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "<a href="https://pl.wikipedia.org/wiki/Polityka_prywatno%C5%9Bci" target="_blank">Polityka prywatności</a>".</p>
  <button>Dobra, dej już spokój!</button>
</div>

... i wkleić go tuż przed zamknięciem tag-u </body>

Zmiana treści komunikatu:

Aby zmienić treść komunikatu w wyskakującym okienku wystarczy edytować zawartość <div> z klasą compsoul-cookies. Przykład komunikatu ze zmienioną treścią będzie wyglądał następująco:

<div id="compsoul-cookies" class="compsoul-cookies content">
  <p>To jest komunikat!</p>
  <button>Dobra, dej już spokój!</button>
</div>

Zmiana tekstu w button-ie: (IE :()

Zmiana wartości przycisku odbywa się w analogiczny sposób:

<div id="compsoul-cookies" class="compsoul-cookies content">
  <p>To jest komunikat!</p>
  <button>Kliknij mnie siłaczu!</button>
</div>

Warto zauważyć że komunikat może zawierać dowolną treść, zdjęcie, film a do zamknięcia okienka nie musimy używać <button>.

Nadajemy wygląd naszemu modułowi:

Kolejnym krokiem instalacyjnym jest dodanie styli CSS. Myślę że nie ma potrzeby opisywania po kolei każdego selektora i właściwości, warto jedynie nadmienić że proces pojawiania i znikania został zaprojektowany przy użyciu animacji CSS3. Poniższy kod wklejamy do naszego głównego arkusza styli:

.compsoul-cookies {
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  bottom: 0;
  opacity: 0;
  padding: 20px 160px 20px 20px;
  position: fixed;
  width: 100%;
  z-index: -1;
}

.compsoul-cookies.active {
  animation: show linear 0.4s;
  opacity: 1;
  z-index: 1;
}

.compsoul-cookies.hidden-click {
  animation: hidden linear 0.4s;
  opacity: 0;
  z-index: -1;
}

.compsoul-cookies.hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: 1px; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  width: 1px; 
}

.compsoul-cookies button {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
  width: 120px;
}

@keyframes hidden {
  0% {
    opacity: 1;
    z-index: 1;
  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
  } 
}

@keyframes show {
  0% {
    opacity: 0;
    z-index: -1;
  }
  1% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 1;
    z-index: 1;
  } 
}

Instalacja skryptów JS:

Ostatnim krokiem w procesie instalacyjnym, tak jak w przypadku większości dodawanych modułów, jest implementacja skryptów JS. Aby tego dokonać musimy pobrać pliki z biblioteką oraz jej rozszerzeniem. Lista niezbędnych plików:

  • COMP (Kliknij aby otworzyć w nowym oknie, następnie zapisz plik za pomocą komendy "zapisz" bądź kombinacji klawiszy ctrl + s) - Biblioteka. W tym przypadku może zostać całowiecie zastąpiona przez jQuery (dowolna wersja), jeżeli będzie taka potrzeba opiszę co nalezy zrobić aby moduł był kompatybilny z jQ (dosłownie zmiana kilku zmiennych).
  • STORAGE (Pobieramy w identyczny sposób) - Plik zawierający skrypt z komunikatem o plikach cookies.

Instancja:

<script>
  (function ($) {
    $("#compsoul-cookies").storage({
      name : "cookies",
      element : "#compsoul-cookies button",
      event : "click"
    });
  })(Comp);
</script>

Pliki wraz z wywołaniem skryptu umieszczamy tuż pod, dodanym wcześniej szkieletem naszego komunikatu, czyli zaraz przed zamknięciem znacznika </body>. Przykładowa instalacja: Pamiętaj o zmianie ścieżek do plików!!!

    <script src="uploads/js/comp.js"></script>
    <script src="uploads/js/storage.js"></script>
    <script>
      (function ($) {
        $("#compsoul-cookies").storage({
          name : "cookies",
          element : "#compsoul-cookies button",
          event : "click"
        });
      })(Comp);
    </script>
  </body>
</html>

I to wszystko. Poniżej znajdują się informacje na temat "ustawień" metody. Znajomość poniższego podpunktu nie jest wymagana do poprawnego działania skryptu.

Opcje:

Metoda storage posiada następujące ustawienia (pogrubione nagłówki zawierają domyślne wartości):

<script>
  (function ($) {
    $("#compsoul-cookies").storage({
      name : "compsoul",
      value : "active",
      element : false,
      event : false,
      change : "hidden"
    });
  })(Comp);
</script>

name : "compsoul"

<script>
  (function ($) {
    $("#compsoul-cookies").storage({
      name : "compsoul"
    });
  })(Comp);
</script>

Pole o tej właściwości dodaje do lokalnego obiektu Storage, należącego do obecnej domeny, właściwość o "nazwie" compsoul. Jeżeli z jakiegoś powodu nie odpowiada nam ta nazwa możemy wprowadzić inną.

value : "active"

<script>
  (function ($) {
    $("#compsoul-cookies").storage({
      value : "active"
    });
  })(Comp);
</script>

Powyższy przykład pokazuje sposób w jaki ustawiamy wartość wcześniej dodanej właściwości. Wartość jest później wykorzystywana jako klasa CSS, nadawana na obiekt który wywołamy. Jeżeli chcemy zmienić tę wartość, musimy pamiętać o analogicznej zmianie w stylach CSS.

element : false

<script>
  (function ($) {
    $("#compsoul-cookies").storage({
      element : false
    });
  })(Comp);
</script>

Właściwość obiektu która powinna wskazywać na element z drzewa DOM. Zostanie wykorzystana do zmiany klasy CSS, po wykonaniu określonego zdarzenia. Przykładowo, jeżeli posiadamy przycisk o klasie ".test" nasza właściwość powinna wyglądać w następujący sposób: element : ".test" . Po takiej deklaracji każdy element posiadający klasę ".test" zarejestruje obsługę odpowiednio zdeklarowanego zdarzenia. W uproszczeniu i odniesieniu do naszego skryptu działa to w następujący sposób: klikamy w zdeklarowany element drzewa DOM (element : "#compsoul-cookies button"), skrypt zmienia nam klasę elementu #compsoul-cookies, zmiana klasy powoduje wykonanie animacji i ukrycie komunikatu o plikach cookies.

event : false

<script>
  (function ($) {
    $("#compsoul-cookies").storage({
      event : false
    });
  })(Comp);
</script>

W tym punkcie deklarujemy rodzaj zdarzenia po którym nastąpi wywołanie funkcji, która usunie klasę o wartości "active" (value : "active"), doda klasę o wartości "hidden" (change : "hidden") i "click" (event : "click") oraz zmieni wartość lokalnego obiektu Storage o nazwie "compsoul" (name : "compsoul") z "active ("value : "active") na "hidden" (change : "hidden").

change : "hidden"

<script>
  (function ($) {
    $("#compsoul-cookies").storage({
      change : "hidden"
    });
  })(Comp);
</script>

Właściwość która uczestniczy w procesie tworzenia klasy CSS nadawanej na wywołany obiekt. Dodatkowo właściwość zastępuje wartość lokalnego obiektu Storage o nazwie "compsoul" (name : "compsoul") z "active ("value : "active") na "hidden" (change : "hidden").

C'est fini!

Zapraszam do zapoznania się z moimi pozostałymi wpisami. Jeżeli nie radzisz sobie z instalacją, masz uwagi co do skryptu bądź chcesz się skontaktować: napisz komentarz!

Jakie skrypty chciałbyś zobaczyć na tej stronie?

Gotowe szablony stron www z wdrożeniem!

Komentarze:

Irena

13.07.2018
Dziękuję serdecznie za radę. Pomogło:)

Admin

13.07.2018
Pani Ireno, poradziła sobie Pani bardzo dobrze! Jedynym mankamentem zdaje się być "wchodzenie" zdjęć z treści na komunikat. Aby rozwiązać problem należy zwiększyć wartość z-index w przypadku komunikatu, lub zmniejszyć w przypadku zdjęć. Czas ponownego pojawienia się komunikatu nie jest dokładnie określony i zależy od ustawień przeglądarki bądź jej samej, raz kliknięty komunikat nie powinien się już pokazać, chyba że przeglądarka sama wyczyści Local storage bądź zrobi to użytkownik. Zachęcam do wystawienia oceny na: https://www.facebook.com/compsoulpl/

Irena

13.07.2018
Proszę zerknąć na moją chyba udaną próbę zastosowania kodu na stronie https://e-serve.pl Proszę o info na jaki czas ustawiony jest komunikat? Tzn. kiedy info wyświetli się ponownie.

Dodaj komentarz:

Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "Polityka prywatności".