Storage Modal w magazynie
Funkcjonalność storage służy do wyświetlenia okna popup jeżeli magazyn przeglądarki nie zawiera wpisu na temat otworzonego popupu. Funkcja wykorzystywana głównie do tworzenia okien: akceptacji regulaminu, informacji o plikach cookies czy pytania o pełnoletność użytkownika. Otwarty modal lub element strony www powinien zawierać przycisk akcji, który pozwoli dodać wpis w magazynie przeglądarki, który uniemożliwi ponowne otwarcie okna. Dodane poniżej przyciski pozwolą lepiej zrozumieć działanie funkcjonalności:
Powyższym przyciskom zostały dodane następujące funkcjonalności:
- Sprzątanie magazynu - przycisk służący do usuwania wszystkich danych znajdujących się w magazynie przeglądarki.
- Akceptuje modal o nazwie compsoul - po kliknięciu w przycisk następuje umowna akceptacja komunikatu, co skutkuje dodaniem do magazynu przeglądarki zmiennej zdefiniowanej w ustawieniach.
- Wyświetl magazyn - przypisane do przycisku zdarzenie wyświetla zawartość magazynu.
Jak możemy zauważyć, podczas wczytywania strony zostaje uruchomiony testowy modal zdefiniowany za pomocą poniższej instancji:
.compsoul-modal-container {
background: #000000BF;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
transition: opacity 0.4s;
will-change: opacity;
z-index: 6;
}
.compsoul-modal-container.modal-active {
opacity: 1;
pointer-events: auto;
}
.compsoul-modal-container.modal-close {
pointer-events: auto;
}
.modal-unset, .modal-unset:before, .modal-unset:after, .compsoul-modal-container.modal-unset, .compsoul-modal-main.modal-unset {
animation: unset !important;
transition: none !important;
}
.compsoul-modal-container:before {
animation: compsoul-modal-loading 1s infinite;
border-bottom: 0.5em solid #ffffff00;
border-left: 0.5em solid #ffffff;
border-right: 0.5em solid #ffffff;
border-top: 0.5em solid #ffffff00;
border-radius: 100%;
box-sizing: content-box;
content: "";
font-size: 4px;
height: 6em;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.4s;
will-change: opacity;
width: 6em;
}
.compsoul-modal-container.modal-ready:before, .compsoul-modal-container.modal-error:before {
animation-play-state: paused;
opacity: 0;
}
@keyframes compsoul-modal-loading {
from {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
to {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
}
.compsoul-modal-container:after {
color: #ffffff;
content: "\26A0";
font-size: 42px;
font-weight: 200;
left: 50%;
margin: -6px 0 0 0;
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.4s;
will-change: opacity;
}
.compsoul-modal-container.modal-error:after {
opacity: 1;
}
.compsoul-modal-main {
left: 50%;
max-height: calc(2 * 40vh);
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(-50%, calc(-50% - 100px), 0);
transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
width: 800px;
z-index: 1;
will-change: transform, opacity;
}
.modal-ready.modal-active .compsoul-modal-main {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
}
.modal-change .compsoul-modal-main {
transition: transform 0.4s, opacity 0.4s;
}
.compsoul-modal-main:before {
background: #fff;
border-radius: 8px;
bottom: -32px;
box-shadow: 0 5px 26px 0 rgba(0, 0, 0, 0.22), 0 20px 28px 0 rgba(0, 0, 0, 0.30);
content: "";
left: -32px;
position: absolute;
right: -32px;
top: -32px;
z-index: -1;
}
.compsoul-modal-content {
background: #fff;
line-height: 1.2;
overflow-y: auto;
max-height: calc(2 * 40vh);
padding: 0 32px 0 0;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.compsoul-modal-content:after {
content: "";
display: table;
clear: both;
}
.compsoul-modal-close {
right: 8em;
position: absolute;
top: 8em;
z-index: 2;
}
.compsoul-modal-next {
right: 8em;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
.compsoul-modal-prev {
left: 8em;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
background: #000000;
border: none;
cursor: default;
font-size: 2.6px;
height: 16em;
opacity: 0;
outline: 1px solid #e7a14f00;
padding: 0;
text-align: center;
transition: opacity 0.4s, outline 0.4s;
width: 16em;
}
.compsoul-modal-close:focus, .compsoul-modal-close:focus-within, .compsoul-modal-next:focus, .compsoul-modal-next:focus-within, .compsoul-modal-prev:focus, .compsoul-modal-prev:focus-within {
outline: 1px solid #e7a14fff;
}
.compsoul-modal-close, .compsoul-modal-next.modal-active, .compsoul-modal-prev.modal-active {
cursor: pointer;
opacity: 1;
}
.compsoul-modal-close:before, .compsoul-modal-close:after, .compsoul-modal-next:before, .compsoul-modal-prev:before {
border-top: 1em solid #ffffff;
border-right: 1em solid #ffffff;
box-sizing: content-box;
content: "";
cursor: pointer;
display: inline-block;
height: 4em;
padding: 0 0 1em 1em;
transform: rotate(45deg) translate3d(-25%, 25%, 0);
transition: opacity 0.4s, border 0.4s;
width: 4em;
}
.compsoul-modal-close:before, .compsoul-modal-close:after {
height: 3em;
width: 3em;
}
.compsoul-modal-close:hover:before, .compsoul-modal-close:hover:after, .compsoul-modal-next:hover:before, .compsoul-modal-prev:hover:before {
border-top: 1em solid #e7a14f;
border-right: 1em solid #e7a14f;
}
.compsoul-modal-close:after, .compsoul-modal-prev:before {
transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}
.compsoul-modal-close:before {
transform: rotate(45deg) translate3d(-7%, 7%, 0);
}
.compsoul-modal-close:after {
transform: rotate(-135deg) translate3d(-7%, 7%, 0);
}
.compsoul-modal-timer {
height: 3px;
left: 0;
position: absolute;
top: 0;
z-index: 5;
width: 100%;
}
.compsoul-modal-timer:before {
animation: compsoul-slide-timeline 8s linear forwards;
animation-play-state: paused;
background: #e7a14f;
content: "";
display: block;
height: 100%;
transform: translate3d(-100%, 0, 0);
width: 100%;
}
.modal-ready .compsoul-modal-timer:before {
animation-play-state: running;
}
.compsoul-modal-container:hover .compsoul-modal-timer:before {
animation-play-state: paused;
}
@keyframes compsoul-slide-timeline {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@media only screen and (max-width: 1060px) {
.compsoul-modal-main {
width: calc(100% - 94px);
}
.compsoul-modal-main:before {
bottom: -12px;
left: -12px;
right: -12px;
top: -12px;
}
.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
font-size: 2px;
}
.compsoul-modal-close {
right: 0;
top: 0;
}
.compsoul-modal-next {
right: 0;
}
.compsoul-modal-prev {
left: 0;
}
}
.modal-box {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: block;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
height: 0;
margin: 32px auto;
overflow: hidden;
transition: height 0.4s;
width: 264px;
}
.modal-box.modal-active {
height: 180px;
}
.modal-box-content {
padding: 24px 32px;
}
.modal-box-open {
margin: 21px auto;
}<script src="https://compsoul.pl/uploads/js/compsoul.js"></script><script src="https://compsoul.pl/uploads/js/modal.js"></script><script>
new Compsoul("#local-storage-clear").on("click", () => {
window.localStorage.clear();
});
new Compsoul("#local-storage-show").on("click", () => {
new Compsoul("#local-storage").html(JSON.stringify(window.localStorage));
});
new Modal("#modal").options({
storage: "compsoul",
storageAgreement: "#local-storage-accept",
clone: "#modal-content"
}).init();
</script>Dzięki tak zdeklarowanej instancji możemy stworzyć moduł, który podczas wczytywania strony będzie sprawdzał czy w magazynie przeglądarki znajduje się zmienna zdeklarowana we właściwości storage. W przypadku powyższej instancji jest to zmienna compsoul. Aplikacja, podczas wczytywania strony, sprawdza czy w magazynie przeglądarki znajduje się nazwa podana jako wartość właściwości storage. Moduł zostaje uruchomiony jeżeli wcześniej zdeklarowana zmienna nie zostanie odnaleziona. Automatyczne uruchamianie popupu zostanie wyłączone po dodaniu do magazynu zdeklarowanej zmiennej.
Dziękuję za przeczytanie
Jeżeli spodobał Ci się mój wpis, zachęcam do obserwowania mojego profilu w serwisie facebook. Dodatkowo będzie mi bardzo miło jeżeli zechcesz podzielić się swoimi uwagami w komentarzach i zostawisz łapkę w górę. Jeżeli pilnie potrzebujesz pomocy lub chcesz o coś zapytać, skorzystaj z formularza kontaktowego lub napisz na daniel@compsoul.pl. Jeżeli Twoja sprawa jest naprawdę pilna, możesz zadzwonić na numer: +48 732 846 416