Modal

Ustawienia modułu

Modal - Ustawienia

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

Struktura HTML modułu

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.

Nomenklatura modułu

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