Interfejsy API komponentów

Galeria 360°

gwd-360gallery

Obiekt galerii, która pokazuje obracający się obiekt.

Właściwości

Nazwa	Opis
images:string	Ciąg znaków zawierający rozdzielone przecinkami ścieżki obrazów używanych w galerii.
autoplay:boolean	Po załadowaniu galeria powinna automatycznie rozpocząć odtwarzanie obrazów.
wrap:boolean	Zamiast zatrzymywać odtwarzanie po osiągnięciu 1 z końców, galeria powinna umożliwiać użytkownikowi przewijanie od pierwszej do ostatniej klatki.

Zdarzenia

Nazwa	Opis
firstinteraction	Wysyłane, gdy użytkownik pierwszy raz wejdzie w interakcję z galerią.
allframesviewed	Wysyłane, gdy wszystkie klatki w galerii wyświetlą się co najmniej raz.
allframesloaded	Wysyłane po wczytaniu wszystkich klatek w galerii.
frameshown	Wysyłane po wyświetleniu nowej klatki.
frameactivated	Wysyłane po rozpoczęciu aktywacji nowej klatki, nawet gdy nie jest ona jeszcze widoczna.
frametap	Wysyłane, gdy użytkownik kliknie klatkę.

Metody

Nazwa	Opis
goToFrame(frame:number, opt_animate:string, opt_direction:string)	Wykonuje animację, przechodząc do wskazanej klatki.
rotateOnce(opt_duration:number, opt_direction:string)	Obraca raz obiekt w galerii.
goForwards()	Przesuwa widok w galerii o klatkę do przodu.
goBackwards()	Przesuwa widok w galerii o klatkę do tyłu.

Element interaktywny 3D

gwd-3d-hotspot

Element do wyświetlania adnotacji w modelu 3D.

Właściwości

Nazwa	Opis
data-position:string	Położenie elementu interaktywnego.
data-normal:string	Norma elementu interaktywnego.
hotspot-name:string	Nazwa elementu interaktywnego.
hotspot-title:string	Tytuł do wyświetlenia na karcie informacyjnej.
hotspot-description:string	Tekst opisu do wyświetlenia na karcie informacyjnej.
hide-infocard:boolean	Określa, czy karta informacyjna ma zostać ukryta.

Kontener elementu interaktywnego 3D

gwd-3d-hotspot-container

Element kontenera na potrzeby adnotacji w modelu 3D.

Właściwości

Nazwa	Opis
up-image:file	URL obrazu elementów interaktywnych 3D bez kliknięcia.
over-image:file	URL obrazu elementu interaktywnego 3D po najechaniu na niego kursorem myszy lub innym.
down-image:file	URL obrazu elementu interaktywnego 3D po kliknięciu.

Model 3D

gwd-3d-model

Komponent przeglądarki 3D.

Właściwości

Nazwa	Opis
id-url:download	Identyfikator lub adres URL modelu 3D.
data-gwd-refresh-assets:string	Atrybut, którego Google Web Designer używa, aby określić, czy zasoby 3D muszą być odświeżane.
glass:boolean	Włącza szklany materiał modelu 3D.
src:string	Model do wyświetlenia.
transparent:boolean	Włącza przezroczyste tło modelu 3D.
gesture-cue-icon:file	Ikona podpowiedzi gestu.
gesture-cue-text:string	Tekst widoczny pod ikoną podpowiedzi gestu.
gesture-cue-duration:number	Czas wyświetlania gestu (w sekundach). Wartość -1 oznacza brak limitu czasu.

Zdarzenia

Nazwa	Opis
scene-rendered	Wysyłane po pierwszym wyrenderowaniu sceny z modelem 3D.
camera-changed	Wysyłane po zmianie dowolnej właściwości kamery 3D. Obiekt event.detail zawiera wszystkie bieżące właściwości kamery.
hotspot-clicked	Wysyłane po kliknięciu elementu interaktywnego. Obiekt event.detail zawiera nazwę klikniętego elementu interaktywnego.
interaction-start	Wysyłane, gdy użytkownik rozpocznie interakcję z modelem 3D.
interaction-end	Wysyłane, gdy użytkownik zakończy interakcję z modelem 3D.

Metody

Nazwa	Opis
setYaw(yaw:number)	Ustawia kąt odchylenia (w stopniach), bez animacji, biorąc pod uwagę ograniczenia kamery.
setTargetYaw(targetYaw:number)	Ustawia docelowy kąt odchylenia (w stopniach) na podstawie limitów kamery lub limitów obrotu w zakresie od -360 do 360 stopni.
setTargetPitch(targetPitch:number)	Ustawia docelowy kąt nachylenia w stopniach.
incrementTargetPitch(pitchDelta:number)	Zwiększa docelowe nachylenie kąta delta (w stopniach).
setTargetZoom(targetZoom:number)	Ustawia docelowe powiększenie (w metrach).
incrementTargetZoom(zoomDelta:number)	Powoduje wzrost docelowego powiększenia (w metrach).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Ustawia docelową oś obrotu (w metrach).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Ustawia docelowe przesunięcie lokalne (w metrach).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Umożliwia określenie koloru materiału.
playAnimation(animationName:string)	Uruchamia odtwarzanie animacji.
pauseAnimation(animationName:string)	Wstrzymuje animację.
setAnimationTime(animationName:string, animationTime:number)	Ustawia czas animacji (w sekundach).
lookAtHotspot(hotspotName:string)	Powoduje przesunięcie i obrót kamery w taki sposób, aby pokazywała element interaktywny.

Przeglądarka modeli 3D

gwd-3d-model-viewer

Komponent opakowujący komponent przeglądarki 3D.

Właściwości

Nazwa	Opis
src:file	Plik źródłowy modelu 3D.
gesture-cue-icon:file	Ikona podpowiedzi gestu.
gesture-cue-text:string	Tekst widoczny pod ikoną podpowiedzi gestu.
gesture-cue-duration:number	Czas wyświetlania gestu (w sekundach). Wartość -1 oznacza brak limitu czasu.
skybox-image:file	Obraz tła sceny modelu 3D.
environment-image:file	Steruje odbiciem modelu 3D w środowisku.

Zdarzenia

Nazwa	Opis
scene-rendered	Wysyłane po pierwszym wyrenderowaniu sceny z modelem 3D.
camera-changed	Wysyłane po zmianie dowolnej właściwości kamery 3D. Obiekt event.detail zawiera wszystkie bieżące właściwości kamery.
hotspot-clicked	Wysyłane po kliknięciu elementu interaktywnego. Obiekt event.detail zawiera nazwę klikniętego elementu interaktywnego.
interaction-start	Wysyłane, gdy użytkownik rozpocznie interakcję z modelem 3D.
interaction-end	Wysyłane, gdy użytkownik zakończy interakcję z modelem 3D.

Metody

Nazwa	Opis
setYaw(yaw:number)	Ustawia kąt odchylenia (w stopniach), bez animacji, biorąc pod uwagę ograniczenia kamery.
setTargetYaw(targetYaw:number)	Ustawia docelowy kąt odchylenia (w stopniach) na podstawie limitów kamery lub limitów obrotu w zakresie od -360 do 360 stopni.
setTargetPitch(targetPitch:number)	Ustawia docelowy kąt nachylenia w stopniach.
incrementTargetPitch(pitchDelta:number)	Zwiększa docelowe nachylenie kąta delta (w stopniach).
setTargetZoom(targetZoom:number)	Ustawia docelowe powiększenie (w metrach).
incrementTargetZoom(zoomDelta:number)	Powoduje wzrost docelowego powiększenia (w metrach).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Ustawia docelową oś obrotu (w metrach).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Ustawia docelowe przesunięcie lokalne (w metrach).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Umożliwia określenie koloru materiału.
playAnimation(animationName:string)	Uruchamia odtwarzanie animacji.
pauseAnimation(animationName:string)	Wstrzymuje animację.
setAnimationTime(animationName:string, animationTime:number)	Ustawia czas animacji (w sekundach).

Dodaj do kalendarza

gwd-addtocalendar

Dodaje wydarzenie do kalendarzy.

Właściwości

Nazwa	Opis
event-title:string	Nazwa wydarzenia wyświetlana w kalendarzu użytkownika.
start-date:string	Data rozpoczęcia wydarzenia.
start-time:string	Godzina rozpoczęcia wydarzenia (w formacie 24-godzinnym).
end-date:string	Data zakończenia wydarzenia.
end-time:string	Godzina zakończenia wydarzenia (w formacie 24-godzinnym).
timezone:string	Strefa czasowa wydarzenia. Jeśli ją określisz, godzina wydarzenia jest dostosowywana do strefy czasowej, w której znajduje się użytkownik.
location:string	Lokalizacja wydarzenia.
description:string	Opis wydarzenia.
icalendar:boolean	Określa, czy należy użyć pliku iCalendar.
google:boolean	Określa, czy należy użyć Kalendarza Google.
windows-live:boolean	Określa, czy należy użyć Kalendarza usługi Windows Live.
yahoo:boolean	Określa, czy należy użyć usługi Yahoo Calendar.
bg-color:string	Wartość szesnastkowa koloru tła menu.
font-color:string	Wartość szesnastkowa koloru czcionki w menu.
font-family:string	Nazwa czcionki w menu.
font-size:string	Rozmiar czcionki w menu.
font-weight:string	Grubość czcionki w menu.
highlight-color:string	Wartość szesnastkowa koloru podświetlenia w menu.

Dźwięk

gwd-audio

Komponent opakowujący obiekt HTMLAudioElement.

Właściwości

Nazwa	Opis
autoplay:boolean	Określa, czy po wczytaniu dźwięk ma być autoodtwarzany.
loop:boolean	Określa, czy dźwięk ma być zapętlony.
muted:boolean	Określa, czy dźwięk ma być początkowo wyciszony.
controls:boolean	Określa, czy domyślne natywne elementy sterujące odtwarzacza są włączone.
sources:file	Ciąg znaków zawierający rozdzielone przecinkami źródła dźwięku w różnych formatach.

Zdarzenia

Nazwa	Opis
play	Wysyłane, gdy odtwarzanie multimediów rozpocznie się po wcześniejszym zdarzeniu wstrzymania.
pause	Wysyłane po wstrzymaniu odtwarzania.
playing	Wysyłane, gdy rozpocznie się odtwarzanie multimediów (po raz pierwszy, po wcześniejszym wstrzymaniu lub po zakończeniu i ponownym uruchomieniu).
ended	Wysyłane po zakończeniu odtwarzania.
volumechange	Wysyłane, gdy zmieni się głośność dźwięku (zarówno przy ustawianiu głośności, jak i zmianie atrybutu wyciszenia).
seeked	Wysyłane po zakończeniu operacji wyszukiwania.
waiting	Wysyłane, gdy żądana operacja (np. odtwarzanie) jest opóźniona z powodu oczekiwania na zakończenie innej (np. wyszukiwania).

Metody

Nazwa	Opis
mute()	Włącza lub wyłącza wyciszenie dźwięku.
pause()	Wstrzymuje odtwarzanie dźwięku.
play()	Uruchamia odtwarzanie dźwięku.
replay()	Ponownie uruchamia odtwarzanie dźwięku.
seek(time:number)	Przechodzi do określonego punktu czasowego dźwięku.

Galeria obrotowa

gwd-carouselgallery

Obiekt galerii, która pokazuje klatki w układzie w stylu karuzeli.

Właściwości

Nazwa	Opis
images:string	Ciąg znaków zawierający rozdzielone przecinkami ścieżki obrazów używanych w galerii.
groups:string	Ciąg znaków zawierający rozdzielone przecinkami identyfikatory grup.
transition-duration:number	Szybkość animacji galerii w milisekundach.
start-frame:number	Numer obrazu wyświetlanego na początku.
autoplay:boolean	Określa, czy galeria ma jeden raz autoodtwarzać klatki.
has-navigation:boolean	Określa, czy automatycznie dołączyć elementy nawigacyjne galerii.
navigation-thumbnails:boolean	Określa, czy do nawigacji zamiast kropek mają być używane miniatury.
navigation-highlight:color	Kod koloru CSS używany do podświetlania aktywnej klatki podczas nawigacji.
scaling:string	Określa sposób skalowania zawartości obrazu, by pasowała do klatki.
frame-width:number	Szerokość 1 panelu treści.
frame-height:number	Wysokość 1 panelu treści.
neighbor-rotation-y:number	Obrót wokół osi Y zastosowany do paneli sąsiadujących z obecnie wyśrodkowanym. Umożliwia pochylenie sąsiednich paneli.
neighbor-translation-x:number	Przesunięcie wzdłuż osi X zastosowane do paneli sąsiadujących z obecnie wyśrodkowanym. Umożliwia dostosowanie położenia sąsiednich paneli.
neighbor-translation-y:number	Przesunięcie wzdłuż osi Y zastosowane do paneli sąsiadujących z obecnie wyśrodkowanym.
neighbor-translation-z:number	Przesunięcie wzdłuż osi Z zastosowane do paneli sąsiadujących z obecnie wyśrodkowanym.
exit-urls:string	Ciąg znaków zawierający rozdzielone przecinkami adresy URL wyjścia przypisane do obrazów w galerii.
show-reflection:boolean	Określa, czy ma wyświetlać się odbicie generowane dzięki CSS3.
pause-front-media:boolean	Określa, czy po zmianie klatki wstrzymać odtwarzanie multimediów (np. obrazu lub dźwięku) w poprzedniej klatce.
resume-next-media:boolean	Określa, czy po zmianie klatki wznowić odtwarzanie multimediów (np. obrazu lub dźwięku) w nowej bieżącej klatce.

Zdarzenia

Nazwa	Opis
firstinteraction	Wysyłane, gdy użytkownik pierwszy raz wejdzie w interakcję z galerią.
allframesviewed	Wysyłane, gdy wszystkie klatki w galerii wyświetlą się co najmniej raz.
allframesloaded	Wysyłane po wczytaniu wszystkich klatek w galerii.
autoplayended	Wysyłane, gdy autoodtwarzanie zakończy się z dowolnego powodu. Atrybut event.detail.completed ma wartość true (prawda), jeśli zakończyło się ono normalnie po upływie określonego czasu trwania. W przeciwnym razie ma wartość false (fałsz).
frameshown	Wysyłane po wyświetleniu nowej klatki.
frameactivated	Wysyłane po rozpoczęciu aktywacji nowej klatki, nawet gdy nie jest ona jeszcze widoczna.
frameautoplayed	Wysyłane po aktywacji klatki na potrzeby autoodtwarzania. Może występować częściej niż zdarzenie frameshown, bo jest wywoływane osobno dla każdej z wielu klatek pokazywanych jednocześnie.
frametap	Wysyłane, gdy użytkownik kliknie klatkę.
reachleftend	Wysyłane, gdy galeria osiągnie lewy koniec.
reachrightend	Wysyłane, gdy galeria osiągnie prawy koniec.
trackstart	Wysyłane, gdy rozpoczyna się przeciągnięcie myszą lub palcem.
track	Komponent rejestruje dane o lokalizacji (X i Y) związane z przeciągnięciem myszą lub palcem.
trackend	Wysyłane, gdy kończy się przeciągnięcie myszą lub palcem.

Metody

Nazwa	Opis
goToFrame(index:number, opt_animate:string)	Przechodzi do określonej klatki.
goForwards(opt_animate:string)	Przechodzi do następnej klatki, jeśli jest dostępna.
goBackwards(opt_animate:string)	Przechodzi do poprzedniej klatki.
rotateOnce(opt_duration:number, opt_direction:string)	Jeden raz pokazuje każdą klatkę w galerii.
stopRotation()	Wstrzymuje bieżącą automatyczną rotację kolejnych klatek.

Punkt wstawienia

gwd-cuepoint

Komponent, który jest dołączony do komponentu Wideo w aplikacji Google Web Designer i uruchamia zdarzenie w określonym momencie filmu.

Właściwości

Nazwa	Opis
time:number	Czas wywołania zdarzenia podany w sekundach.

Zdarzenia

Nazwa	Opis
cuepoint	Wysyłane, gdy odtwarzanie multimediów osiągnie czas podany w punkcie wstawienia.

Metody

Nazwa	Opis
seek()	Ustawia czas filmu na punkt wstawienia.
setTime(time:number)	Ustawia czas punktu wstawienia.

Wybór daty

gwd-dateswap

Komponent Wybór daty zmienia widoczność elementu w zależności od tego, czy bieżąca data odpowiada docelowemu zakresowi dat.

Właściwości

Nazwa	Opis
from_date:string	Ciąg reprezentujący datę w formacie RFC 2822 lub ISO 8601.
to_date:string	Ciąg reprezentujący datę w formacie RFC 2822 lub ISO 8601.

Zdarzenia

Nazwa	Opis
before	Wysyłane, gdy bieżąca data przypada przed datą określoną przez wartość from_date (z jej wyłączeniem).
during	Wysyłane, gdy bieżąca data przypada pomiędzy datami określonymi przez wartości from_date i to_date (włącznie).
after	Wysyłane, gdy bieżąca data przypada po dacie określonej przez wartość to_date (z jej wyłączeniem).

Metody

Nazwa	Opis
checkDate()	Porównuje bieżącą datę z zakresem dat.

Nawigacja po galeriach

gwd-gallerynavigation

Element nawigacyjny komponentu Galeria w aplikacji Google Web Designer.

Właściwości

Nazwa	Opis
for:string	Ciąg znaków zawierający rozdzielone przecinkami ścieżki obrazów używanych w galerii.
highlight:color	Kod koloru CSS używany do podświetlania aktywnej klatki podczas nawigacji.
use-thumbnails:boolean	Określa, czy do nawigacji zamiast kropek mają być używane miniatury.

Reklama ogólna

gwd-genericad

Implementuje kontener reklamy ogólnej.

Zdarzenia

Nazwa	Opis
adinitialized	Wysyłane tuż przed wyrenderowaniem zawartości reklamy przez element Ogólna.

Metody

Nazwa	Opis
initAd()	Uruchamia reklamę po odebraniu odpowiednich zdarzeń z komponentu Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Przechodzi do strony odpowiadającej wymiarom rozwiniętej reklamy. Jeśli nie określisz identyfikatora strony, reklama spowoduje przejście na stronę domyślną.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)	Używa wyjścia z reklamy i opcjonalnie ją zwija.

Gest

gwd-gesture

Abstrakcyjny obiekt wielu zdarzeń gestów.

Właściwości

Nazwa	Opis
touch-action:string	Określa sposób interpretacji kliknięcia. Prawidłowe wartości to auto, none, pan-x i pan-y. Działanie domyślne odpowiada wartości none.

Zdarzenia

Nazwa	Opis
hover	Wysyłane, gdy kursor myszy lub palec użytkownika przesuwa się na obszar komponentu.
hoverend	Wysyłane, gdy wskaźnik myszy lub palec użytkownika opuszcza obszar komponentu.
trackstart	Wysyłane, gdy rozpoczyna się przeciągnięcie myszą lub palcem.
track	Komponent rejestruje dane o lokalizacji (X i Y) związane z przeciągnięciem myszą lub palcem.
trackend	Wysyłane, gdy kończy się przeciągnięcie myszą lub palcem.
tap	Wysyłane, gdy zostaje zarejestrowanie kliknięcie lub dotknięcie wykonane przez użytkownika.
swipeleft	Wysyłane, gdy użytkownik przesunie palcem w lewo.
swiperight	Wysyłane, gdy użytkownik przesunie palcem w prawo.
swipeup	Wysyłane, gdy użytkownik przesunie palcem w górę.
swipedown	Wysyłane, gdy użytkownik przesunie palcem w dół.

Reklama Google

gwd-google-ad

Implementuje kontener reklamy Google.

Właściwości

Nazwa	Opis
polite-load:boolean	Określa, czy reklama musi przestrzegać zasad kontroli wczytywania.
fullscreen:boolean	Określa, czy reklama powinna próbować rozwinąć się do pełnego ekranu.

Zdarzenia

Nazwa	Opis
adinitialized	Wysyłane tuż przed wyrenderowaniem zawartości reklamy przez element.
expandstart	Wysyłane, gdy komponent Enabler uruchomi zdarzenie rozpoczęcia rozwijania.
expandfinish	Wysyłane, gdy komponent Enabler uruchomi zdarzenie zakończenia rozwijania.
collapsestart	Wysyłane, gdy komponent Enabler uruchomi zdarzenie rozpoczęcia zwijania.
collapsefinish	Wysyłane, gdy komponent Enabler uruchomi zdarzenie zakończenia zwijania.
fullscreensupport	Wysyłane, jeśli obsługiwane jest rozwinięcie pełnoekranowe.
dynamicelementsready	Wysyłane po zastosowaniu danych dynamicznych do treści reklamy.
hostpagescroll	Wysyłane, gdy komponent Enabler uruchomi zdarzenie przewijania strony hosta.

Metody

Nazwa	Opis
initAd()	Uruchamia reklamę po odebraniu odpowiednich zdarzeń z komponentu Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Przechodzi do strony odpowiadającej wymiarom rozwiniętej reklamy. Jeśli nie określisz identyfikatora strony, reklama spowoduje przejście na stronę domyślną.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Używa wyjścia z reklamy i opcjonalnie ją zwija.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Używa wyjścia z reklamy i otwiera określony URL niezależnie od wartości zdefiniowanej w Studio. Jeśli opt_collapseOnExit ma wartość true (prawda), zwija reklamę.
incrementCounter(metric:string, opt_isCumulative:boolean)	Śledzi zdarzenie licznika.
startTimer(timerId:string)	Uruchamia stoper zdarzenia.
stopTimer(timerId:string)	Zatrzymuje stoper zdarzenia.
reportManualClose()	Rejestruje ręczne zamknięcie reklamy pływającej, wyskakującej, rozwijanej, wyskakującej na stronie lub pływającej na stronie. Jest to pośrednik metody Enabler.reportManualClose.

Obszar interaktywny

gwd-hotspot

Komponent, który wyświetla i ukrywa obszar interaktywny w określonych momentach filmu.

Właściwości

Nazwa	Opis
show-time:number	Czas w sekundach, w którym obszar interaktywny zaczyna być widoczny.
hide-time:number	Czas w sekundach, w którym obszar interaktywny przestaje być widoczny.
left:string	Lewa pozycja obszaru interaktywnego nad filmem względem szerokości klatki filmu (np. '5%').
top:string	Górna pozycja obszaru interaktywnego nad filmem względem wysokości klatki filmu (np. '5%').
width:string	Szerokość obszaru interaktywnego proporcjonalnie do filmu względem szerokości klatki filmu.
height:string	Wysokość obszaru interaktywnego proporcjonalnie do filmu względem wysokości klatki filmu.

Zdarzenia

Nazwa	Opis
hotspotshown	Wysyłane, gdy obszar interaktywny staje się widoczny.
hotspothidden	Wysyłane, gdy obszar interaktywny zostaje ukryty.

Metody

Nazwa	Opis
show(showHide:boolean)	Przełącza widoczność.
seek(showHide:boolean)	Ustawia widoczność obszaru interaktywnego w określonym momencie filmu.
setTimes(showTime:number, hideTime:number)	Ustala czas wyświetlania i ukrywania obszaru interaktywnego.

iFrame

gwd-iframe

Komponent opakowujący obiekt HTMLIframeElement.

Właściwości

Nazwa	Opis
source:string	Źródło elementu iframe. Zastępuje atrybut src w natywnym elemencie image.
scrolling:string	Określa, czy element iframe ma zawierać paski przewijania.

Zdarzenia

Nazwa	Opis
iframeload	Wysyłane, gdy element iframe zostanie wczytany.

Metody

Nazwa	Opis
setUrl(url:string)	Zmienia URL elementu iframe i od razu go wczytuje.

Obraz

gwd-image

Komponent opakowujący obiekt HTMLImageElement, aby umożliwić obsługę odroczonego wczytywania źródła obrazu.

Właściwości

Nazwa	Opis
source:file	Źródło obrazu. Zastępuje atrybut src w natywnym elemencie image.
alt:string	Tekst zastępczy obrazu.
scaling:string	Definiuje sposób skalowania obrazu, aby pasował do ramki.
alignment:string	Sposób wyrównania obrazu w obszarze wyświetlania.
focalpoint:string	Koduje punkt fokalny obrazu jako współrzędne X/Y.
disablefocalpoint:boolean	Wyłącza punkt fokalny ustawiony przez atrybut focalpoint (używany wewnętrznie przez Google Web Designera).

Przycisk Obraz

gwd-imagebutton

Przycisk graficzny z obsługą stanów bez kliknięcia, po najechaniu i po kliknięciu

Właściwości

Nazwa	Opis
up-image:file	URL obrazu przycisku bez kliknięcia.
over-image:file	URL obrazu przycisku po najechaniu na niego kursorem myszy lub innym.
down-image:file	URL obrazu przycisku po kliknięciu.
bgcolor:string	Kolor tła przycisku.
alignment:string	Sposób wyrównania obrazu w obszarze wyświetlania.
scaling:string	Sposób dopasowania obrazu do kontenera nadrzędnego.
disabled:boolean	Określa, czy przycisk ma być wyłączony.

Zdarzenia

Nazwa	Opis
imagebuttonloaded	Wysyłane po wczytaniu wszystkich obrazów.

Metody

Nazwa	Opis
toggleEnable()	Włącza lub wyłącza przycisk.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)	Ustawia źródła obrazów każdego stanu przycisku.

Efekt graficzny

gwd-image-effect

Komponent Efekt graficzny.

Właściwości

Nazwa	Opis
scaling:string	Definiuje sposób skalowania obrazu, aby pasował do ramki.
time-limit:number	Limit czasu animacji. Wartość -1 oznacza brak limitu czasu.
settings:string	Otwiera okno ustawień komponentu.
images:string	Ciąg znaków zawierający rozdzielone przecinkami ścieżki obrazów użytych w efekcie graficznym.

Zdarzenia

Nazwa	Opis
autoplayended	Wysyłane, gdy autoodtwarzanie zakończy się po osiągnięciu limitu czasu.

Metody

Nazwa	Opis
play()	Odtwarza animację.
pause()	Wstrzymuje odtwarzanie animacji.

Efekt graficzny Przed i po

gwd-before-and-after

Efekt graficzny tworzący porównanie typu „przed i po” z połączenia 2 podobnych obrazów.

Efekt graficzny Oddech

gwd-breathe

Efekt graficzny tworzący animację obrazu, który elastycznie rozszerza się i kurczy.

Efekt graficzny Skaner

gwd-reveal

Efekt graficzny polegający na tym, że obraz jest skanowany przez eliptyczny obszar ostrości odsłaniający drugi obraz.

Efekt graficzny Fala

gwd-wave

Efekt graficzny, który powoduje, że obraz kołysze się na wzór fali.

Mapa

gwd-map

Rozszerza element HTMLElement, opakowując wywołania interfejsu API Map Google.

Właściwości

Nazwa	Opis
api-key:string	Klucz interfejsu API Google. Zobacz: https://developers.google.com/maps/documentation/javascript/get-api-key.
query:string	Tekst wyszukiwanego hasła, które powoduje zwrócenie lokalizacji przez interfejs API Miejsc Google.
start-latitude:decimal	Szerokość geograficzna początkowego punktu środkowego. Wartość powinna mieścić się w zakresie od -90 do 90 (stopni).
start-longitude:decimal	Długość geograficzna początkowego punktu środkowego. Wartość powinna być z zakresu od -180 do 180 (stopni).
request-user-location:boolean	Określa, czy należy poprosić użytkownika o podanie lokalizacji. Jeśli wartość to true (prawda), użytkownik zobaczy odpowiedni komunikat.
client-id:string	Identyfikator klienta Premier dla użytkowników Map Google
search-radius:number	Minimalny promień w metrach, w którym wyszukiwane są lokalizacje.
result-limit:number	Maksymalna liczba wyników zwracanych w odpowiedzi na pojedyncze zapytanie.
start-zoom:number	Początkowy poziom powiększenia w jednostkach używanych w interfejsie API Map Google. Domyślny to 16, co odpowiada widokowi okolicy.
marker-src:string	Nazwa pliku graficznego znacznika miejsca, czyli obrazka, który składa się z komponentów w stanie włączonym i wyłączonym oraz cienia.
gps-src:string	Nazwa pliku graficznego z niebieskim punktem lokalizacji GPS.
msg-start-position-prompt:string	Zlokalizowany ciąg znaków wyświetlany jako tekst komunikatu w oknie dialogowym, by użytkownik wybrał położenie początkowe.
msg-gps-button-label:string	Zlokalizowany ciąg znaków etykiety przycisku, który pobiera lokalizację użytkownika z interfejsu API geolokalizacji.
msg-manual-position-button-label:string	Zlokalizowany ciąg znaków etykiety przycisku, który wyświetla pole wyszukiwania lokalizacji.
msg-manual-position-prompt:string	Zlokalizowany ciąg znaków wyświetlany jako tekst komunikatu w oknie dialogowym, by użytkownik wyszukał położenie początkowe na mapie.
msg-manual-position-placeholder:string	Zlokalizowany ciąg znaków wyświetlany jako tekst komunikatu zastępczego w polu wyszukiwania, by użytkownik znalazł położenie początkowe na mapie.
msg-geocode-failure:string	Zlokalizowany ciąg znaków wyświetlany jako tekst komunikatu w oknie dialogowym wtedy, gdy próba użycia interfejsu API geolokalizacji zakończy się niepowodzeniem.
msg-no-results-found:string	Zlokalizowany ciąg znaków wyświetlany jako tekst komunikatu w oknie dialogowym wtedy, gdy w wybranej lokalizacji nie znaleziono wyników na mapie.

Zdarzenia

Nazwa	Opis
pinclick	Użytkownik wybrał pinezkę na mapie.

Metody

Nazwa	Opis
setCenter(latitude:number, longitude:number, opt_accuracy:number)	Wyśrodkowuje mapę na lokalizacji określonej przez współrzędne geograficzne.

Strona

gwd-page

Strona reprezentuje 1 kartę w talii stron.

Właściwości

Nazwa	Opis
expanded:boolean	Określa, czy strona ma być uważana za rozwiniętą (dotyczy reklam).
centered:boolean	Określa, czy zawartość strony ma być wyśrodkowana.
alt-orientation-page:string	Identyfikator strony, która lepiej prezentuje daną zawartość w innej orientacji.

Zdarzenia

Nazwa	Opis
attached	Wysyłane tuż po dołączeniu strony do modelu DOM.
detached	Wysyłane tuż po usunięciu strony z modelu DOM.
pageactivated	Wysyłane, gdy strona jest gotowa do wyświetlenia.
pagedeactivated	Wysyłane, gdy strona nie jest już wyświetlana.
pageload	Wysyłane po wczytaniu zawartości strony.
pagepresenting	Wysyłane tuż przed rozpoczęciem wstępnej animacji na stronie.
shake	Wysyłane po wykryciu gestu wstrząśnięcia urządzeniem.
tilt	Wysyłane po wykryciu pochylenia urządzenia.
rotatetoportrait	Wysyłane po obróceniu urządzenia do orientacji pionowej.
rotatetolandscape	Wysyłane po obróceniu urządzenia do orientacji poziomej.

Talia stron

gwd-pagedeck

Talia stron to kontener ze stronami. Pokazuje jedną stronę naraz i pozwala w wybranej kolejności wyświetlać pozostałe, korzystając z obsługiwanych efektów przejścia między stronami.

Właściwości

Nazwa	Opis
default-page:string	Identyfikator strony domyślnej

Zdarzenia

Nazwa	Opis
pagetransitionstart	Wysyłane, zanim nastąpi przejście między stronami.
pagetransitionend	Wysyłane po zakończeniu przejścia między stronami.

Metody

Nazwa	Opis
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Przechodzi do następnej strony w talii.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Przechodzi do poprzedniej strony w talii.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Przechodzi do określonej strony w talii.
getCurrentPage()	Zwraca bieżącą stronę lub wartość null, jeśli żadna strona nie jest wyświetlona.
getDefaultPage()	Zwraca stronę domyślną (jeśli została określona) lub pierwszą.
getPage(pageId:string)	Zwraca stronę o określonym identyfikatorze.
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean)	Zwraca numer strony, która ma określoną wartość atrybutu, lub -1, jeśli nie znaleziono strony.
getOrientationSpecificPage(orientation:string, pageId:string)	Zwraca stronę przypisaną do określonej orientacji.
getElementById(id:string)	Znajduje element o określonym identyfikatorze na wszystkich stronach w talii. Obiekt gwd-pagedeck przechowuje aktywną stronę tylko w modelu DOM, więc standardowa metoda document.getElementById(id) nie zwraca elementów z nieaktywnych stron. Typowe zastosowanie, szczególnie w reklamach dynamicznych, to odwoływanie się do elementów na nieaktywnych stronach. W takich przypadkach można używać tej metody, aby uzyskać dostęp do elementu według jego identyfikatora.

Paralaksa

gwd-parallax

Komponent Paralaksa.

Właściwości

Nazwa	Opis
settings:string	Otwiera okno ustawień komponentu.
yscroll:decimal	Współczynnik przewijania używany przez animację paralaksy podczas renderowania na scenie.

Zdarzenia

Nazwa	Opis
ready	Wysyłane, gdy wszystkie zasoby z paralaksy zostaną wczytane.

Efekty cząstek

gwd-particleeffects

Komponent składający się z wielu efektów cząstek i obrazów.

Właściwości

Nazwa	Opis
autoplay:boolean	Określa, czy automatycznie odtwarzać animację po załadowaniu komponentu.
time-limit:number	Limit czasu animacji. Wartość -1 oznacza brak limitu czasu.
settings:string	Otwiera okno ustawień komponentu.

Zdarzenia

Nazwa	Opis
timelimitreached	Wysyłane, gdy animacja była odtwarzana do osiągnięcia limitu czasu.

Metody

Nazwa	Opis
play()	Odtwarza animację.
pause()	Wstrzymuje odtwarzanie animacji.
stop()	Wyłącza odtwarzanie animacji.

Cząstki

gwd-particles

Komponent systemu cząstek.

Właściwości

Nazwa	Opis
acceleration-x:number	Komponent X przyspieszenia: piks./kl./kl.
acceleration-y:number	Komponent Y przyspieszenia: piks./kl./kl.
angle-max:number	Maksymalny kąt kierunku szybkości cząstek.
angle-min:number	Minimalny kąt kierunku szybkości cząstek.
autoplay:boolean	Określa, czy automatycznie odtwarzać animację razem z nadrzędnym obiektem gwd-particleeffects.
color1:color	Pierwszy kolor.
color2:color	Drugi kolor.
color-rate:number	Określa szybkość zmiany koloru 1 na kolor 2 w każdej klatce poprzez dodanie wartości z zakresu [0, 1].
emit-interval:number	Liczba klatek do momentu wyemitowania następnej cząstki.
emit-x-max:string	Maksymalna współrzędna X obszaru emitowania cząstek.
emit-x-min:string	Minimalna współrzędna X obszaru emitowania cząstek.
emit-y-max:string	Maksymalna współrzędna Y obszaru emitowania cząstek.
emit-y-min:string	Minimalna współrzędna Y obszaru emitowania cząstek.
loop:boolean	Określa, czy zapętlić animację.
number:number	Liczba cząstek.
opacity-min:number	Minimalne krycie cząstek.
opacity-max:number	Maksymalne krycie cząstek.
opacity-rate:number	Szybkość, z jaką zmienia się krycie na klatkę, dodawana do bieżącego krycia cząstki.
random-colors:boolean	Określa, czy kolor cząstek jest losowy (kolor 1 lub kolor 2). W przypadku wartości false (fałsz) wszystkie inicjowane cząstki mają kolor 1.
shape:string	Kształt obiektu sprite.
size-max:number	Maksymalny rozmiar cząstek w pikselach.
size-min:number	Minimalny rozmiar cząstek w pikselach.
size-rate:number	Szybkość, z jaką zmienia się rozmiar na klatkę, dodawana do bieżącego rozmiaru cząstki.
skip-forward:number	Przeskoczenie do czasu, kiedy określony procent cząstek został wyemitowany do systemu cząstek.
speed-max:number	Maksymalna prędkość cząstek w pikselach na klatkę.
speed-min:number	Minimalna prędkość cząstek w pikselach na klatkę.
sprite-image-src:file	Źródło obrazów używanych jako obiekty sprite.
turbulence-frequency:number	Częstotliwość turbulencji. Wyższe wartości powodują częstsze nieregularności w ruchu. Powinna to być liczba dodatnia.
turbulence-rate:number	Szybkość, z jaką siła zmienia się w czasie.
turbulence-strength:number	Siła turbulencji wywierana na cząstki. Powinna to być liczba dodatnia.
turbulence-trail:number	Określa, ile wcześniejszych i bieżących stanów cząstki należy wyrenderować.

Metody

Nazwa	Opis
play()	Odtwarza animację.
pause()	Wstrzymuje odtwarzanie animacji.
stop()	Wyłącza odtwarzanie animacji.

Arkusz sprite

gwd-spritesheet

Pokazuje pojedynczą klatkę kluczową lub animację z arkusza sprite.

Właściwości

Nazwa	Opis
imagesource:file	URL obrazu arkusza sprite.
offsetx:number	Odsunięcie od lewej strony arkusza sprite aż do jednego z tych punktów (w pikselach): lewa krawędź konkretnego obrazu, którego chcesz użyć z arkusza; lewa krawędź pierwszego obrazu sprite, którego chcesz użyć w animacji.
offsety:number	Odsunięcie od góry arkusza sprite aż do jednego z tych punktów (w pikselach): górna krawędź konkretnego obrazu, którego chcesz użyć z arkusza; górna krawędź pierwszego obrazu sprite, którego chcesz użyć w animacji.
clipwidth:number	Szerokość jednego z tych elementów (w pikselach): konkretny obraz, którego chcesz użyć z arkusza sprite; pierwszy obraz sprite, którego chcesz użyć w animacji.
clipheight:number	Wysokość jednego z tych elementów (w pikselach): konkretny obraz, którego chcesz użyć z arkusza sprite; pierwszy obraz sprite, którego chcesz użyć w animacji.
alignment:string	Określa pozycję obrazu w jego kontenerze.
scaling:string	Określa, jak obrazy o różnych rozmiarach są wyświetlane w komponencie.
totalframecount:number	Liczba klatek tworzących animację.
duration:number	Czas wyświetlania każdej klatki (w milisekundach).
loopcount:number	Liczba powtórzeń animacji. Ustaw wartość 0, aby powtarzać animację w nieskończoność.
autoplay:boolean	Określa, czy animacja ma się odtwarzać automatycznie.
endonstartframe:boolean	Określa, czy animacja ma się zakończyć na klatce początkowej.
reverseplay:boolean	Określa, czy animacja ma się odtwarzać od końca.

Zdarzenia

Nazwa	Opis
animationend	Wysyłane, gdy animacja się zakończy.
animationpause	Wysyłane, gdy animacja zostanie wstrzymana.
animationplay	Wysyłane, gdy animacja zacznie się odtwarzać.
animationrestart	Wysyłane, gdy odtwarzanie animacji zostanie wznowione.

Metody

Nazwa	Opis
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)	Definiuje nową animację.
play()	Uruchamia odtwarzanie animacji.
pause()	Wstrzymuje animację.
togglePlay()	Odtwarza animację lub wstrzymuje jej odtwarzanie.
restart()	Ponownie uruchamia animację.
previousFrame()	Pokazuje poprzednią klatkę.
nextFrame()	Pokazuje następną klatkę.
goToFrame(id:number)	Pokazuje klatkę o określonym numerze.

Oceny w gwiazdkach

gwd-starratings

Komponent służący do renderowania szeregu gwiazdek wyrażających ocenę.

Właściwości

Nazwa	Opis
ratingvalue:decimal	Wartość oceny.
iconsize:number	Rozmiar ikony gwiazdki.
isemptyshown:boolean	Określa, czy są wyświetlane puste ikony gwiazdek.
isemptycolored:boolean	Określa, czy puste ikony gwiazdek mają kolor.
colorprimary:color	Podstawowy kolor wypełnienia.
colorsecondary:color	Drugorzędny kolor gradientu.
gradienttype:string	Typ gradientu.
ratingmax:number	Maksymalna liczba gwiazdek.
ratingmin:decimal	Minimalna liczba gwiazdek.

Zdarzenia

Nazwa	Opis
complete	Po utworzeniu ikon ocen w gwiazdkach.
validationerror	Gdy wartość oceny w gwiazdkach jest mniejsza niż ocena minimalna.

Street View

gwd-streetview

Komponent Google Street View.

Właściwości

Nazwa	Opis
key:string	Informacje o tym, jak uzyskać unikalny klucz na potrzeby swojej aplikacji, znajdziesz na stronie https://developers.google.com/maps/documentation/javascript/get-api-key.
latitude:decimal	Szerokość geograficzna lokalizacji.
longitude:decimal	Długość geograficzna lokalizacji.
interaction:boolean	Określa, czy widok można przesuwać i obracać.
heading:decimal	Określa na kompasie kierunek, w którym zwrócona jest kamera. Podaj wartość z zakresu od 0 do 360 (obie oznaczają północ, 90 to wschód, a 180 to południe). Jeśli nie określisz kierunku, zostanie obliczona taka wartość, dzięki której kamera znajdzie się w miejscu zrobienia najbliższego zdjęcia, zwrócona w kierunku wybranej lokalizacji.
pitch:decimal	Określa kąt obrotu kamery w górę lub w dół względem standardowego ustawienia pojazdu Street View. Ustawienie domyślne to często (ale nie zawsze) kierunek poziomy. Wartości dodatnie powodują obrót kamery w górę (90 stopni oznacza pionowy widok w górę), a ujemne w dół (-90 stopni oznacza pionowy widok w dół).
zoom:number	Określa powiększenie widoku względem standardowego ustawienia pojazdu Street View.

Galeria przesuwana

gwd-swipegallery

Obiekt galerii, która pokazuje klatki na przesuwanym pasku treści.

Właściwości

Nazwa	Opis
images:string	Ciąg znaków zawierający rozdzielone przecinkami ścieżki obrazów używanych w galerii.
groups:string	Ciąg znaków zawierający rozdzielone przecinkami identyfikatory grup.
transition-duration:number	Szybkość animacji galerii w milisekundach.
start-frame:number	Klatka początkowa (liczona od jedynki).
num-frames-to-display:number	Liczba klatek wyświetlanych jednocześnie.
frame-snap-interval:number	Liczba klatek przewijanych po każdym przesunięciu.
autoplay:boolean	Określa, czy raz automatycznie obrócić całą galerię.
has-navigation:boolean	Określa, czy dołączyć elementy nawigacyjne galerii.
navigation-thumbnails:boolean	Określa, czy do nawigacji zamiast kropek mają być używane miniatury.
navigation-highlight:color	Kod koloru CSS używany do podświetlania aktywnej klatki podczas nawigacji.
scaling:string	Określa sposób skalowania zawartości obrazu, by pasowała do klatki.
swipe-axis:string	Oś, wzdłuż której wykrywane jest przesunięcie.
offset:number	Ilość pustego miejsca między sąsiednimi klatkami treści.
frame-width:number	Szerokość 1 klatki treści. Zastępuje num-frames-to-display.
frame-height:number	Wysokość 1 klatki treści.
autoplay-duration:number	Łączny czas trwania autoodtwarzania klatek.
autoplay-step-interval:number	Odstęp czasowy między poszczególnymi klatkami podczas autoodtwarzania.
exit-urls:string	Ciąg znaków zawierający rozdzielone przecinkami adresy URL wyjścia przypisane do obrazów w galerii.
disable-gesture:boolean	Ukrywa/wyłącza komponent Gest, który umożliwia nawigację dotykową po galerii.
pause-front-media:boolean	Określa, czy po zmianie klatki wstrzymać odtwarzanie multimediów (np. obrazu lub dźwięku) w poprzedniej klatce.
resume-next-media:boolean	Określa, czy po zmianie klatki wznowić odtwarzanie multimediów (np. obrazu lub dźwięku) w nowej bieżącej klatce.

Zdarzenia

Nazwa	Opis
firstinteraction	Wysyłane, gdy użytkownik pierwszy raz wejdzie w interakcję z galerią.
allframesviewed	Wysyłane, gdy wszystkie klatki w galerii wyświetlą się co najmniej raz.
allframesloaded	Wysyłane po wczytaniu wszystkich klatek w galerii.
autoplayended	Wysyłane, gdy autoodtwarzanie zakończy się z dowolnego powodu. Atrybut event.detail.completed ma wartość true (prawda), jeśli zakończyło się ono normalnie po upływie określonego czasu trwania. W przeciwnym razie ma wartość false (fałsz).
frameshown	Wysyłane po wyświetleniu nowej klatki i zakończeniu wszystkich niezbędnych animacji.
frameactivated	Wysyłane po rozpoczęciu aktywacji nowej klatki, nawet gdy nie jest ona jeszcze widoczna.
frameautoplayed	Wysyłane po aktywacji klatki na potrzeby autoodtwarzania. Może występować częściej niż zdarzenie frameshown, bo jest wywoływane osobno dla każdej z wielu klatek pokazywanych jednocześnie.
frametap	Wysyłane, gdy użytkownik kliknie klatkę.
reachleftend	Wysyłane, gdy galeria osiągnie lewy koniec.
reachrightend	Wysyłane, gdy galeria osiągnie prawy koniec.
framemouseover	Wysyłane, gdy użytkownik najedzie kursorem na klatkę.
framemouseout	Wysyłane, gdy użytkownik wyjedzie kursorem poza klatkę.
trackstart	Wysyłane, gdy rozpoczyna się przeciągnięcie myszą lub palcem.
track	Komponent rejestruje dane o lokalizacji (X i Y) związane z przeciągnięciem myszą lub palcem.
trackend	Wysyłane, gdy kończy się przeciągnięcie myszą lub palcem.

Metody

Nazwa	Opis
goToFrame(frame:number, opt_animate:string)	Przechodzi do określonej klatki.
rotateOnce(opt_duration:number, opt_direction:string)	Pokazuje raz każdą klatkę w galerii.
stopRotation()	Wstrzymuje bieżącą automatyczną rotację kolejnych klatek.
goForwards()	Przesuwa widok w galerii o klatkę do przodu.
goBackwards()	Przesuwa widok w galerii o klatkę do tyłu.

Wir

gwd-swirl

Komponent Wir.

Właściwości

Nazwa	Opis
yscroll:decimal	Współczynnik przewijania używany przez animację wiru podczas renderowania na scenie.
settings:string	Otwiera okno ustawień komponentu.

Zdarzenia

Nazwa	Opis
ready	Wysyłane po wczytaniu wszystkich zasobów podrzędnych.

Obszar kliknięcia

gwd-taparea

Abstrakcyjny obiekt zdarzenia kliknięcia.

Właściwości

Nazwa	Opis
exit-override-url:string	URL, który otworzy się po kliknięciu obszaru kliknięcia.

Zdarzenia

Nazwa	Opis
action	Wysyłane, gdy użytkownik dotknie przycisku (urządzenie mobilne) lub go kliknie (komputer).

Kliknij, aby zadzwonić/wysłać SMS-a

gwd-taptocall

Komponent, który po kliknięciu nawiązuje połączenie telefoniczne ze wskazanym numerem lub wysyła pod niego SMS-a.

Właściwości

Nazwa	Opis
number:string	Docelowy numer połączenia lub SMS-a.
action:string	Określa, czy komponent ma wysłać SMS-a czy nawiązać połączenie telefoniczne.

Zdarzenia

Nazwa	Opis
action	Wysyłane, gdy użytkownik dotknie przycisku (urządzenie mobilne) lub go kliknie (komputer).
taptocall	Wysyłane podczas wysyłania SMS-a lub nawiązywania połączenia telefonicznego.

Metody

Nazwa	Opis
dial()	Nawiązuje połączenie telefoniczne ze wskazanym numerem lub wysyła pod niego SMS-a.

Galeria przejść

gwd-transitiongallery

Komponent Galeria przejść.

Właściwości

Nazwa	Opis
settings:string	Otwiera okno ustawień komponentu.
images:string	Ciąg znaków zawierający rozdzielone przecinkami ścieżki obrazów używanych w galerii.
scaling:string	Definiuje sposób skalowania obrazu, aby pasował do ramki.
exit-urls:string	Ciąg znaków zawierający rozdzielone przecinkami adresy URL wyjścia przypisane do obrazów w galerii.

Zdarzenia

Nazwa	Opis
autoplayended	Wysyłane, gdy autoodtwarzanie zakończy się z dowolnego powodu. event.detail.completed ma wartość true (prawda), jeśli zakończyło się naturalnie po osiągnięciu określonej liczby pętli. W przeciwnym razie ma wartość false (fałsz).
frameactivated	Wysyłane po rozpoczęciu aktywacji nowej klatki, nawet gdy nie jest ona jeszcze widoczna.
frameshown	Wysyłane po wyświetleniu nowej klatki.
frametap	Wysyłane, gdy użytkownik kliknie klatkę.
rotateonceended	Wysyłane, gdy obrót zakończy się z dowolnego powodu. event.detail.completed ma wartość true (prawda), jeśli zakończy się naturalnie. W przeciwnym razie ma wartość false (fałsz).
reachleftend	Wysyłane, gdy galeria osiągnie lewy koniec.
reachrightend	Wysyłane, gdy galeria osiągnie prawy koniec.

Metody

Nazwa	Opis
goToFrame(frame:number, with_animation:boolean)	Przechodzi do określonej klatki.
rotateOnce(startFromCurrentFrame:boolean)	Pokazuje klatkę w galerii, zaczynając od klatki początkowej, jeśli parametr startFromCurrentFrame ma wartość false (fałsz) lub nie jest określony. W przeciwnym razie rozpoczyna od bieżącej klatki. Obrót zatrzymuje się, zanim osiągnie klatkę początkową.
startAutoplay(startFromCurrentFrame:boolean)	Rozpoczyna autoodtwarzanie, zaczynając od klatki początkowej, jeśli parametr startFromCurrentFrame ma wartość false (fałsz) lub nie jest określony. W przeciwnym razie rozpoczyna od bieżącej klatki. Autoodtwarzanie zatrzymuje się po osiągnięciu określonej liczby pętli.
stop()	Jeśli trwa animacja, wyłącza ją.
goForwards()	Przesuwa widok w galerii o klatkę do przodu.
goBackwards()	Przesuwa widok w galerii o klatkę do tyłu.

Przejście z efektem żaluzji

gwd-blinds

Komponent efektu żaluzji, który ukazuje nowy obraz, tak jakby był on widziany zza żaluzji, odsłaniając kolejno poszczególne listewki od jednego brzegu do drugiego.

Właściwości

Nazwa	Opis
direction:dropdown	Kierunek efektu.
blinds:number	Liczba żaluzji.
transparentbackground:boolean	Określa, czy odsłonić przezroczyste tło przed wyrenderowaniem żaluzji nowego obrazu. W przypadku wartości false (fałsz) żaluzje nakładają się na poprzedni obraz.

Przejście z efektem drzwi

gwd-door-wipe

Komponent efektu drzwi to odmiana efektu wyczyszczenia dostępna w 2 wariantach o różnych kierunkach czyszczenia. Wyczyszczenie z efektem otwieranych drzwi odsłania nowy obraz, począwszy od środka starego obrazu, tak jakby otwierały się dwuskrzydłowe drzwi. Wyczyszczenie z efektem zamykanych drzwi odsłania nowy obraz, począwszy od brzegów starego obrazu, tak jakby dwuskrzydłowe drzwi się zamykały.

Właściwości

Nazwa	Opis
orientation:dropdown	Orientacja animacji.
direction:dropdown	Kierunek czyszczenia z efektem drzwi.

Przejście z efektem zanikania

gwd-fade

Komponent przejścia z efektem zanikania.

Przejście z efektem przesłony

gwd-iris-wipe

Komponent efektu przesłony, który ukazuje nowy obraz w coraz większym kręgu pojawiającym się domyślnie na środku klatki.

Właściwości

Nazwa	Opis
originpercentx:number	Początek rosnącego kręgu na osi X względem szerokości klatki.
originpercenty:number	Początek rosnącego kręgu na osi Y względem wysokości klatki.

Przejście z efektem wysunięcia

gwd-push

Komponent przejścia z efektem wysunięcia, który powoduje, że nowy obraz pojawia się, wypychając poprzedni.

Właściwości

Nazwa	Opis
direction:dropdown	Kierunek efektu wysunięcia.

Przejście z efektem okrążenia

gwd-radial-wipe

Komponent efektu okrążenia to odmiana efektu wyczyszczenia, w której nowy obraz pojawia się po zatoczeniu kręgu przez promień (na przykład wskazówki zegara) wokół określonego punktu.

Właściwości

Nazwa	Opis
direction:dropdown	Kierunek efektu.
originpercentx:number	Punkt początkowy na osi X względem szerokości klatki, na którym pojawia się promień odsłaniający nowy obraz.
originpercenty:number	Punkt początkowy na osi Y względem wysokości klatki, na którym pojawia się promień odsłaniający nowy obraz.

Przejście z efektem obrotu

gwd-rotate

Komponent efektu obrotu, w którym poprzedni obraz zaczyna się obracać i powiększać, a potem następuje pomniejszenie ukazujące nowy obraz wraz z końcem obracania.

Właściwości

Nazwa	Opis
direction:dropdown	Kierunek efektu.

Przejście z efektem wycinka

gwd-slice

Komponent efektu wycinka, w którym nowy obraz pojawia się w formie wysuwających się po kolei pasków.

Właściwości

Nazwa	Opis
direction:dropdown	Kierunek efektu wycinka.
slices:number	Liczba wycinków lub pasków składających się na cały widok.
transparentbackground:boolean	Określa, czy odsłonić przezroczyste tło, zanim pojawią się wycinki nowego obrazu. W przypadku wartości false (fałsz) wycinki nakładają się na poprzedni obraz.

Przejście z efektem podziału

gwd-split-push

Komponent efektu podziału to odmiana efektu wysunięcia, w której poprzedni obraz jest dzielony na 2 części w pionie lub poziomie. Odpowiadające im części nowego obrazu wypychają stary obraz w przeciwnych kierunkach.

Właściwości

Nazwa	Opis
orientation:dropdown	Orientacja animacji.

Przejście z efektem pasków

gwd-stripe-wipe

Komponent efektu pasków to odmiana efektu wyczyszczenia, w której na ekranie pojawiają się jednocześnie coraz większe kolorowe paski w naprzemiennych kolorach, zakrywając poprzedni obraz. Następnie paski kurczą się, aby odsłonić nowy obraz.

Właściwości

Nazwa	Opis
direction:dropdown	Kierunek efektu.
stripes:number	Liczba pasków w każdym kolorze.
color1:color	Wartość szesnastkowa 1 z 2 naprzemiennych kolorów pasków.
color2:color	Wartość szesnastkowa drugiego z naprzemiennych kolorów pasków.

Przejście z efektem rolety weneckiej

gwd-venetian-blinds

Komponent efektu rolety weneckiej, w którym nowy obraz pojawia się jakby zza żaluzji weneckich otwierających się jednocześnie lub osobno.

Właściwości

Nazwa	Opis
orientation:dropdown	Orientacja animacji.
blinds:number	Liczba żaluzji.
staggered:boolean	Określa, czy listewki otwierają się z opóźnieniem. W przypadku wartości false (fałsz) wszystkie listewki otwierają się jednocześnie.

Przejście z efektem wyczyszczenia

gwd-wipe

Komponent przejścia z efektem wyczyszczenia. W standardowym efekcie wyczyszczenia nowy obraz stopniowo zastępuje poprzedni, pojawiając się za linią, która biegnie od jednej krawędzi do drugiej.

Właściwości

Nazwa	Opis
direction:dropdown	Kierunek efektu.
angle:number	Kąt nachylenia linii, za którą nowy obraz zastępuje poprzedni.

Przejście z efektem zygzaka

gwd-zigzag

Komponent efektu zygzaka, w którym nowy obraz pojawia się w sposób przypominający zygzakujący ruch węża. Efekt poziomego zygzaka odsłania kolejne płytki nowego obrazu w rzędach naprzemiennie od lewej do prawej i od prawej do lewej. Efekt pionowego zygzaka odsłania kolejne płytki nowego obrazu w kolumnach naprzemiennie od góry do dołu i od dołu do góry.

Właściwości

Nazwa	Opis
orientation:dropdown	Orientacja animacji.
rows:number	Liczba wierszy efektu zygzaka.
columns:number	Liczba kolumn efektu zygzaka.

Wideo

gwd-video

Komponent opakowujący obiekt HTMLVideoElement.

Właściwości

Nazwa	Opis
autoplay:boolean	Określa, czy po wczytaniu film ma być autoodtwarzany.
loop:boolean	Określa, czy film ma być zapętlony.
muted:boolean	Określa, czy film ma być początkowo wyciszony.
controls:boolean	Określa, czy domyślne natywne elementy sterujące odtwarzacza są włączone.
sources:file	Ciąg znaków zawierający rozdzielone przecinkami źródła filmów w różnych formatach.
poster:string	URL wskazujący klatkę z plakatem, która jest wyświetlana, dopóki użytkownik nie rozpocznie odtwarzania lub przewijania.

Zdarzenia

Nazwa	Opis
play	Wysyłane, gdy odtwarzanie multimediów rozpocznie się po wstrzymaniu. Oznacza, że odtwarzanie zostało wznowione po wcześniejszym zdarzeniu wstrzymania.
pause	Wysyłane po wstrzymaniu odtwarzania.
playing	Wysyłane, gdy rozpocznie się odtwarzanie multimediów (po raz pierwszy, po wcześniejszym wstrzymaniu lub po zakończeniu i ponownym uruchomieniu).
ended	Wysyłane po zakończeniu odtwarzania.
volumechange	Wysyłane, gdy zmieni się głośność dźwięku (zarówno przy ustawianiu głośności, jak i zmianie atrybutu wyciszenia).
seeked	Wysyłane po zakończeniu operacji wyszukiwania.
waiting	Wysyłane, gdy żądana operacja (np. odtwarzanie) jest opóźniona z powodu oczekiwania na zakończenie innej (np. wyszukiwania).

Metody

Nazwa	Opis
mute()	Włącza lub wyłącza wyciszenie filmu.
pause()	Wstrzymuje odtwarzanie filmu.
play()	Uruchamia odtwarzanie filmu.
replay()	Ponownie uruchamia odtwarzanie filmu.
seek(time:number)	Przechodzi do określonego punktu czasowego filmu.
setVolume(volume:number)	Ustawia głośność filmu.
setSources(sources:string)	Ustawia źródła filmu.

YouTube

gwd-youtube

Rozszerza element HTMLElement, opakowując wywołania interfejsu API YouTube.

Właściwości

Nazwa	Opis
video-url:string	URL filmu w YouTube.
autoplay:string	W obsługiwanych środowiskach film w YouTube będzie po wczytaniu autoodtwarzany.
preview-duration:number	Określa czas trwania podglądu filmu. Właściwość używana tylko wtedy, gdy atrybut autoodtwarzania ma wartość preview.
controls:string	Wyświetla elementy sterujące odtwarzaniem filmu (none, autohide).
color:string	Motyw kolorystyczny paska postępu odtwarzacza (czerwony lub biały).
muted:boolean	Określa, czy film ma być początkowo wyciszony.
loop:boolean	Określa, czy film ma być zapętlony.
pause-on-end:boolean	Wstrzymuje film na sekundę przed końcem.
start-position:number	Rozpoczyna odtwarzanie filmu od określonego punktu czasowego (w sekundach).
allowfullscreen:boolean	Zezwala na tryb pełnoekranowy na komputerze.
extra-player-args:string	Dodatkowe parametry odtwarzacza YouTube opisane na stronie https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters.

Zdarzenia

Nazwa	Opis
buffering	Odtwarzacz YouTube wykonuje buforowanie.
ended	Osiągnięto koniec odtwarzanego filmu w YouTube.
paused	Wstrzymano odtwarzanie filmu w YouTube.
playing	Rozpoczęło się odtwarzanie filmu w YouTube.
replayed	Rozpoczęło się ponowne odtwarzanie filmu w YouTube.
viewed0percent	Wysyłane po wyświetleniu 0% filmu.
viewed25percent	Wysyłane po wyświetleniu 25% filmu.
viewed50percent	Wysyłane po wyświetleniu 50% filmu.
viewed75percent	Wysyłane po wyświetleniu 75% filmu.
viewed100percent	Wysyłane po wyświetleniu 100% filmu.
previewed0percent	Wysyłane po wyświetleniu 0% podglądu.
previewed25percent	Wysyłane po wyświetleniu 25% podglądu.
previewed50percent	Wysyłane po wyświetleniu 50% podglądu.
previewed75percent	Wysyłane po wyświetleniu 75% podglądu.
previewed100percent	Wysyłane po wyświetleniu 100% podglądu.

Metody

Nazwa	Opis
toggleMute()	Włącza lub wyłącza wyciszenie filmu.
pause()	Wstrzymuje odtwarzanie filmu.
play()	Uruchamia odtwarzanie filmu.
replay()	Ponownie uruchamia odtwarzanie filmu.
seek(time:number)	Przechodzi do określonego punktu czasowego filmu.
setYouTubeId(id:string, cueOnly:boolean)	Zmienia źródło filmu w YouTube na określony identyfikator.