Ustawienia okna modalnego Opis wszystkich ustawień modułu
Poniżej umieściłem przykładową instancję ze wszystkimi możliwymi ustawieniami. Można uzależnić je od szerokości ekranu, dzięki czemu moduł będzie inaczej działał na urządzeniach mobilnych. Każda instancja modułu ma indywidualny zestaw ustawień, dzięki czemu możemy na jednej stronie posiadać wiele modułów niezależnych od siebie i z różnymi opcjami.
Tabela z opisem
Poniższa tabela zawiera dokładny opis ustawień modułu wraz z ich przeznaczeniem oraz domyślnymi wartościami. Pierwsza kolumna przedstawia nazwę ustawienia, do którego przypisujemy opcję zgodną z wytycznymi w kolumnie trzeciej. Domyślne wartości dla poszczególnych ustawień zostały przedstawione w kolumnie drugiej. Ostatnia zaś kolumna przedstawia opis danego ustawienia. Istnieje możliwość swobodnej rozbudowy ustawień slidera jak i zmiany ustawień domyślnych, poprzez edycję pliku slider.js. Niektóre z ustawień mają swoje osobne podstrony i są tam szerzej opisane.
| Nazwa właściwości | Domyślna wartość | Dostępne warianty | Opis |
|---|---|---|---|
| id | false | false, string (tekst) | W zależności od ustawień, wartość opcji zostaje dodana jako atrybut id do containera naszego modułu, kiedy modal znajduje się w trybie pracy build. Zmiana ustawień uruchamia alternatywną opcję właściwości. Kiedy tryb build zostaje wyłączony, co wskazuje na boksowe zachowanie modułu, wartość opcji id służy jako selektor CSS, po którym aplikacja szuka containera naszego modalu. |
| class | false | false, string (tekst) | Właściwość powiązana z opcją id. W zależności od ustawień, wartość opcji zostaje dodana jako atrybut class do containera naszego modułu, kiedy modal znajduje się w trybie pracy build. Zmiana ustawień uruchamia alternatywną opcję właściwości. Kiedy tryb build zostaje wyłączony (co wskazuje na boksowe zachowanie modułu) oraz właściwość id zostaje wyłączona, wartość opcji class służy jako selektor CSS, po którym aplikacja szuka containera naszego modalu. |
| build | true | boolean (true, false) | Ustawienie build zmienia sposób dodawania modalu do strony. Jeżeli opcja jest włączona, elementy zostają stworzone po stronie aplikacji i dodane na końcu elementu wskazywanego przez właściwość parent. Domyślnie jest to element body. Wyłącznie opcji powoduje pobranie już istniejących elementów na podstawie wszystkich właściwości z przedrostkiem element. Dokładniejszy opis opcji znajduje się pod tym linkiem. |
| popup | true | boolean (true, false) | Włączona opcja popup służy to wskazania instancji pełnoekranowej. Moduł pozwala jednocześnie uruchomić jeden modal z włączoną opcją popup. Dzięki tej funkcjonalności modale pełnoekranowe nie będą nachodziły na siebie. |
| each | false | false, this | Funkcjonalność służy do przekazywania kontekstu podczas iteracji pętli w momencie tworzenie instancji w jej wnętrzu. Pełen opis funkcjonalności można znaleźć pod tym linkiem. |
| parent | false | selektory CSS, false | Wartość opcji wskazuje element, na którego końcu zostanie dodany modal. Jeżeli wartość opcji parent jest równa false, modal zostanie dodany na końcu elementu body. Opcja działa w momencie kiedy właściwość build jest uruchomiona. |
| ajax | false | false, URL | Uruchomienie funkcjonalności ajax następuje po wskazaniu adresu, z którego ma zostać pobrana treść. Następnie zostaje pobrany element wskazany we właściwości ajaxTarget i umieszczony w treści modalu. Rozbudowany opis funkcjonalności znajduje się na tej podstronie. |
| ajaxTarget | selector | selektory CSS, false | Opcja wskazuje element, który ma zostać pobrany i wyświetlony wewnątrz modalu. Jeżeli element nie został odnaleziony lub opcja została wyłączona, do modalu zostaje wczytana cała zawartość body. |
| dom | false | selektory CSS, false | Opcja dom jako wartość przyjmuje selektory CSS. W momencie odnalezienia zdeklarowanego elementu następuje uruchomienie modalu. |
| clone | false | selektory CSS, false | Uruchomienie funkcji kopiowania elementu. Następuje poprzez zmianę wartości opcji clone na selektor CSS. W momencie uruchomienia modalu, jego treść zostaje zastąpiona przez element zdeklarowany w opcji. |
| ready | false | boolean (true, false) | Włączenie opcji skutkuje uruchomieniem modalu po załadowaniu strony. |
| open | false | selektory CSS, false | Wartością opcji open są selektory CSS wskazujące na elementy, które po wykonaniu na nich odpowiedniej akcji, zdeklarowanej w opcji openEvent, spowodują otwarcie modalu. |
| openEvent | "click" | event | Opcja jako wartość przyjmuje zdarzenie, które zostaje przypisane do elementów zdeklarowanych w opcji open. |
| openDelegation | true | boolean (true, false) | Uruchomienie opcji powoduje przypisanie zdarzenia do elementu body w celu uruchamiania zdarzeń na elementach już istniejących oraz tych dodanych w przyszłości. |
| openPrevent | true | boolean (true, false) | Opcja blokuje wykonywanie domyślnych akcji podczas aktywowania zdarzenia openEvent na elementach zdeklarowanych w opcji open. |
| storage | false | string (tekst) | Aktywowanie opcji storage następuje poprzez uzupełnienie jej wartości nazwą elementu, który następnie dodawany jest do localStorage. W momencie ładowania strony, aplikacja sprawdza czy pojedyncza instancja zawiera w ustawieniach opcje storage i porównuje ją z elementami w localStorage przeglądarki. Jeżeli wartość opcji storage występuje w localStorage przeglądarki, modal nie zostaje uruchomiony. W sytuacji odwrotnej następuje uruchomienie modułu. Dokładny opis funkcjonalności znajduje się pod tym linkiem. |
| storageAgreement | false | selektory CSS, false | Opcja przyjmuje selektor CSS, który wskazuje na elementy, do których zostanie przypisane zdarzenie zdeklarowane w opcji storageEvent. Po wykonaniu zdeklarowanego zdarzenia, do localStorage zostaje przypisany element, który zgodnie z opisem opcji storage nie pozwoli na ponowne uruchomienie modalu. |
| storageEvent | "click" | event | Opcja jako wartość przyjmuje zdarzenie przypisane do elementów zdeklarowanych w opcji storageAgreement. |
| slider | false | selektory CSS, false | Funkcjonalność pozwalająca wczytać kilka elementów za pomocą selektora CSS, umieszczanego we właściwości opcji slider. Wczytane elementy zostają wyświetlone w modalu jako rotator boksów. Więcej o funkcjonalności slider można przeczytać tutaj. |
| sliderLoop | false | boolean (true, false) | Opcja definiuje sposób działania slidera wewnątrz modalu. Jeżeli jest aktywna - slider zapętla się. Dezaktywacja opcji powoduje ukrycie analogicznych strzałek na ostatnim i pierwszym slajdzie. |
| sliderEvent | "click" | event | Zdarzenie odpowiedzialne za uruchamianie kolejnych slajdów, przypisane do elementów zdeklarowanych w opcjach elementPrev i elementNext. |
| sliderDelay | 400 | number (liczby) | Opcja jako wartość przyjmuje czas podany w milisekundach potrzebny na wykonanie animacji przejścia pomiędzy slajdami. |
| hash | true | boolean (true, false) | Włączenie opcji hash uruchamia funkcjonalność aplikacji, która sprawdzi wszystkie elementy odpowiedzialne za uruchomienie slidera. Jeżeli sprawdzany element posiada atrybut data-hash zostanie on porównany ze zmienną dodaną w pasku adresu. Jeżeli porównywane wartości są tożsame następuje uruchomienie modalu. |
| hashLocation | false | false, string (tekst) | Opcja jako wartość przyjmuje ciąg znaków, który jest porównywany ze zmienną z paska adresu. Jeżeli ich wartości są identyczne - modal zostaje uruchomiony. |
| overflow | true | boolean (true, false) | Kiedy opcja overflow jest włączona, w momencie uruchamiania modalu główny pasek przewijania strony zostaje ukryty. |
| close | true | boolean (true, false) | Opcja włączająca lub wyłączający możliwość zamykania już otwartego modalu. |
| closeElement | false | selektory CSS, false | Opcja, dzięki której za pomocą selektora CSS, możemy wskazać dodatkowe elementy, którym zostanie przypisane zdarzenie closeElementEvent, służące do zamykania modalu. |
| closeElementEvent | "click" | event | Zdarzenie przypisywane dodatkowym elementom, wskazanym w opcji closeElement, stosowane do zamknięcia modalu. |
| closeSelf | true | boolean (true, false) | Aktywowanie opcji closeSelf pozwalającej na zamknięcie aktywnego modalu poprzez wykonanie zdarzenia closeEvent na elemencie zdeklarowanym w opcji elementClose. |
| closeEvent | "click" | event | Zdarzenie, po którego wykonaniu nastąpi zamknięcie modalu. |
| closeDelegation | true | boolean (true, false) | Opcja zmieniająca tryb przypisywania zdarzeń do elementów odpowiedzialnych za zamykanie modali. Jeżeli jest aktywna, zdarzenie zostanie przypisane do elementu body, co pozwala dodawać nowe elementy odpowiedzialne za zamykanie, bez potrzeby przeładowywania strony. |
| closeDelay | 400 | number (liczby) | Czas potrzebny do wykonania animacji zamykania modalu. Po wykonaniu następuje usunięcie modalu (o ile został on stworzony za pomocą opcji build). |
| closeAuto | false | boolean (true, false) | Opcja uruchamiająca automatyczne zamykanie okna w momencie wykonania animacji zdeklarowanej w opcji closeAutoEvent. |
| closeAutoEvent | "animationend" | false, string (tekst) | Rodzaj animacji przypisywany do elementu wskazanego w opcji elementTimer. Po wykonaniu animacji następuje zamknięcie modalu. |
| responsive | {} | object (obiekt) | Obiekt przechowujący szereg ustawień, odpowiedzialnych za zmianę zachowania modalu na poszczególnych rozdzielczościach. Więcej informacji w zakładce: RWD |
| Nazwa właściwości | Domyślna wartość | Dostępne warianty | Opis |
|---|---|---|---|
| elementContainer | ".compsoul-modal-container" | selektory CSS, false | Klasa CSS pobierana lub dodawana (w zależności od ustawień) do elementu tworzącego strukturę modułu. |
| elementMain | ".compsoul-modal-main" | selektory CSS, false | Klasa CSS pobierana lub dodawana (w zależności od ustawień) do elementu tworzącego strukturę modułu. |
| elementContent | ".compsoul-modal-content" | selektory CSS, false | Klasa CSS pobierana lub dodawana (w zależności od ustawień) do elementu tworzącego strukturę modułu. |
| elementTimer | ".compsoul-modal-timer" | selektory CSS, false | Klasa CSS pobierana lub dodawana (w zależności od ustawień) do elementu odpowiadającego za czasowe zamknięcie modułu. |
| elementClose | ".compsoul-modal-close" | selektory CSS, false | Klasa CSS pobierana lub dodawana (w zależności od ustawień) do elementu odpowiedzialnego za zamykanie modułu. |
| elementPrev | ".compsoul-modal-prev" | selektory CSS, false | Klasa CSS pobierana lub dodawana (w zależności od ustawień) do elementu odpowiedzialnego za przełączanie slajdów. |
| elementNext | ".compsoul-modal-next" | selektory CSS, false | Klasa CSS pobierana lub dodawana (w zależności od ustawień) do elementu odpowiedzialnego za przełączanie slajdów. |
| Nazwa właściwości | Domyślna wartość | Dostępne warianty | Opis |
|---|---|---|---|
| classActive | "modal-active" | false, string (tekst) | Nazwa klasy CSS używana do aktywowania elementów. |
| classReady | "modal-ready" | false, string (tekst) | Nazwa klasy CSS nadawana na modal tuż po jego uruchomieniu. |
| classClose | "modal-close" | false, string (tekst) | Nazwa klasy CSS używana w procesie zamykania modalu. |
| classClosing | "modal-closing" | false, string (tekst) | Nazwa klasy CSS używana w procesie zamykania modalu. |
| classError | "modal-error" | false, string (tekst) | Nazwa klasy używana w momencie błędnego wczytania treści modalu. |
| classOverflow | "modal-overflow" | false, string (tekst) | Klasa CSS używana do ukrywania paska przewijania strony. |
| classUnset | "modal-unset" | false, string (tekst) | Klasa CSS używana do restartu animacji. |
| classAnimation | "modal-animation" | false, string (tekst) | Klasa CSS używana do restartu animacji. |
| classChange | "modal-change" | false, string (tekst) | Klasa CSS używana podczas zmiany slajdów. |
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
Porozmawiajmy o Twoich odczuciach Co chciałbyś mi powiedzieć?
Wsparcie
Dziękuję za poświęcenie czasu na przeczytanie mojego wpisu! Jeśli masz jakieś pytania, uwagi lub sugestie, chętnie porozmawiam z Tobą. Możesz się ze mną skontaktować za pośrednictwem Facebooka, Telegrama lub e-maila.
Zachęcam również do dodawania komentarzy. Twoje opinie i sugestie są dla mnie bardzo cenne i pomagają mi w tworzeniu treści, które są dla Ciebie interesujące i pomocne. Będę wdzięczny za każdy komentarz, a jeśli wpis Ci się spodobał, będę wdzięczny za ocenę.
Nie wahaj się, napisz do mnie, chętnie porozmawiam i pomogę, jeśli będę mógł!