warsawjs-workshop-7-webcomponents

Aplikacja stworzona na potrzeby WarsawJS Workshop #7

Wspierane przeglądarki

Prezentacja obrazka w na komputerze

Treść zadania nr. 1

Zaprezentować obrazek z tekstem. 1.1. Tekst musi być inny fontem 1.2. Dodanie styli dla komponentu
Stworzyć markup w <template>.
Zbudować custom element 3.1. Stworzyć klasę dziedziczącą po HTMLElement 3.2. Podłączyć Shadow DOM-a do custom elementu 3.3. Zapisać się na lifecycle hook connectedCallback 3.4. Pobrać zawartość szablonu 3.5. Wyrenderować szablon do Shadow DOM-a - widać obrazek, pomimo tego, że ma ustawionego atrybutu src nie jest wysyłany request po zasób 3.6. Pobrać adres do obrazka 3.7. Wyrenderować obrazek
Dodać kolejny custom element (z innym obrazkiem) 4.1. Rozwiązać problem braku szablonu za pomocą cloneNode(true)
Dodać możliwość ustawiania innego tekstu dla różnych elementów 5.1. Rozwiązać problem z kodowaniem ustawiając odpowiedni meta tag.
Zamknąć komponent w pojedynczy katalog 6.1. Stworzyć główny plik index.html w aplikacji 6.2. Zaimportować komponent za pomocą HTML Imports <link rel="import"/>

Prezentacja danych dowolnego użytkownika portalu GitHub

Treść zadania nr. 2

Stworzenie markupu 1.1. Ustawienie kodowania 1.2. Ustawienie tytułu strony 1.3. Stworzenie template-u w znaczniku <template> 1.4. Dołączenie pliku main.js 1.5. Wykorzystanie znacznika github-profile-card-element do prezentacji danych na temat dowolnego użytkownika GitHub-a.
Ostylować komponent 2.1. Avatar użytkownika 2.2. Imię i nazwisko 2.3. Bio 2.4. Lista popularnych repozytoriów
Zarejestrowanie komponentu 3.1. Stworzenie klasy dziedziczącej po HTMLElement 3.2. Dołączenie Shadow DOM-a w konstruktorze 3.3. W lifecycle hooku connectedCallback 3.3.1. Wyrenderować template 3.3.2. Pobrać login z atrybutów 3.3.3. Wysłać zapytanie po publiczne dane użytkownika, którego login został zdefiniowany w atrybucie 3.4. Wyświetlić dane użytkownika: imię i nazwisko, avatar, bio, lokalizację 3.5. Po wykonaniu pierwszego zapytania wykonać drugie, które pobierze listę wszystkich repozytoriów. 3.6. UWAGA: ze względu na limit zapytań w GitHub API, zapisać sobie odpowiedzi do katalog mocks/ a następnie zamienić URLe na pliki statyczne 3.7. Posortować listę repozytoriów według liczby gwiazdek 3.8. Zredukować listę repozytoriów do kilku, np. 5 3.9. Wyrenderować repozytoria

Prezentacja dowolnych media obiektów (np. obrazków) w stylu rotowalnym.

Treść zadania nr. 3

Stworzenie markupu 1.1. Dodanie 3 zdjęć jako dzieci nowo dodawanego komponentu.
Ostylowanie komponentu 2.1. Na środku prezentować pole na media obiekt 2.2. Na środku nad polem prezentować guzik PLAY
Zarejestrować akcję na kliknięcie w komponent 3.1. Za pamięci od razu wyrejestrować handler na lifecycle hooku disconnectCallback
Stworzyć klasę Slider, która będzie emulowała rotowanie elementu 4.1. Wykorzystać ES5 getter
Po kliknięciu w komponent zainicjować slider przekazując mu dane o dzieciach wraz z definicją funkcji, która zostanie uruchomiona każdorazowo gdy slider chce zaprezentować inną treść 5.1. Stworzyć funkcję, która będzie wlewała do kontenera z ekranem żądany media obiekt
Zmienić kursor myszy, po najechaniu na przycisk PLAY 4.1. Nie pokazywać łapki kiedy prezentowane są media obiekty

Importowanie komponentów

Treść zadania nr. 4

Przystosowanie komponentu do bycia importowanym 1.1. Dwa dokumenty (document.currentScript.ownerDocument i document) 1.2. Przygotowanie pliku HTML, w którym będzie tylko definicja komponentu
Importowanie przy pomocy HTML Import 2.1. Dwa dokumenty (importowany i importujący) 2.2. Dodanie link[rel=import] do pliku 2.3. Wstawienie komponentu na stronę
Importowanie przy pomocy Fetch API 3.1. Utworzenie funkcji fetchComponent 3.2. Parsowanie odpowiedzi przy pomocy DOMParser 3.3. Naprawianie zepsutych relatywnych URL-ów w skryptach i arkuszach stylów 3.4. Dołączanie potrzebnych elementów do strony

Error nr. 1

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "mockup" is not a valid custom element name

⛔ Nie wolno:

customElement.define('mockup', MockupElement);

👍 Trzeba:

customElement.define('mockup-element', MockupElement);

Error nr. 2

Uncaught DOMException: Failed to construct 'CustomElement': The result must not have children (anonymous) @ (index):13

⛔ Nie wolno:

this.textContent = '...';

👍 Trzeba:

shadow.textContent = '...';

Error nr. 3

Uncaught TypeError: Cannot read property 'content' of null
at HTMLElement.connectedCallback (main.js:10)
at main.js:21

wewnątrz dokumentu importowanego przy pomocy link[rel=import].

⛔ Nie wolno:

document.querySelector('...')

👍 Trzeba:

document.currentScript.ownerDocument.querySelector('...')