Projekt slider

Zlecę wykonanie projektu typu "slider" według poniższego opisu:
https://docs.google.com/document/d/1xS_ztASK5GS5XY3jasMHmXLlY-2nTDKrMY4OTtxndug/edit?usp=sharing

 

Oczywiście zdalnie. Szukam kogoś kto będzie w stanie zrobić to w tym, lub najpóźiej przysżłym tygodniu. W ofercie prosze podać listę technologii/elementów czy komponentów, których oferent zamierza użyć.
Na wszelki wypadek całą treść dokumentu wklejam również dudaj:
 

Projekt slider

Chciałbym stworzyć stronę złożoną z samych sliderów ułożonych jeden pod drugim. Do tego celu potrzebuję komponentu typu slider takiego, który jest do bólu minimalistyczny i wychodzić może poza ekran z każdej strony.
 

Opis ogólny

Potrzebuję komponentu na stronę www typu slider, żeby wyglądało to tak:
Na potrzeby dokumentu opisałem z czego składa się slider:




Mamy więc:
* Slider - czyli cały taki pojedynczy pasek do przewijania

Elementy - Elementem może być dowolny html. Elementy mają stałą wysokość i różną szerokość w zależności od zawartości. Slider sam powinien dobierać szerokości elementów w taki sposób, żeby treść się zmieściła. Slider może mieć od 1 do 20 takich elementów. W razie zapodania mu większej ilości, powinien wyświetlać ikonę wykrzyknika, która oznacza że jest błąd wraz z informacją o błędzie. 

Element aktywny Jest to element, którego lewa krawędź znajduje się w Punkcie zaczepienia. Zawsze jeden i tylko jeden element jest aktywny. To jedyny element w sliderze, który bezpośrednio reaguje na kliknięcia przycisków które może posiadać. Np. kliknięcie gwiazdki spowoduje jakąś interakcję.

Punkt zaczepienia : To miejsce w którym znajduje się zawsze lewa krawędź Elementu Aktywnego. Miejsce to powinno być do konfiguracji jako procent szerokości slidera. Jeśli np. ustawione będzie na 30%, to niezależnie od tego, czy mamy wybrane element “Chiny, Pakistan, czy Kanada”, w momencie, w którym ten element zostaje aktywowany, musi znaleźć się w tym samym miejscu co każdy inny aktywny wcześniej element.

Elementy pasywne. Dookoła elementu aktywnego znajdują się elementy pasywne. W ich przypadku nie ma znaczenia czy klikniemy w gwiazdkę czy coś innego, bo tutaj kliknięcie w jakikolwiek miejsce elementu pasywnego powoduje jego aktywację. Elementy pasywne są takie wyblakłe, co ja w programie graficznym zrobiłem poprzez nałożenie białego elementu z opatique: 80%. Nie wiem czy w html nie można by zrobić tak samo. Elementy nieaktywne mogą wychodzić poza obręb strony, ale nie może to spowodować pojawienia się na stronie rolek do przewijania, ani zmiany punktu zaczepienia elementu aktywnego.

 

Zmiana elementu aktywnego:
 

Jedyne co użytkownik slidera robi, to zmienia element aktywny. Element aktywny można zmienić na kilka sposobów:
 

Strzałkami: lewo / prawo

Pilotem do smart TV: lewo/prawo

Myszką - klik

Palcem na ekranie telefonu: poprzez tapnięcie

Palcem na ekranie telefonu: poprzez przesunięcie (gest)

 

Strzałki: lewo / prawo

Dla przykładowego slidera:

Wciśnięcie strzałki w lewo, spowoduje przesunięcie się slidera takie, żeby teraz USA było w miejscu Chin. Strzałka w prawo to “Pakistan”. Przesunięcie powinno trwać 300 milisekund.
 

Pilotem do smart TV

Tam również są strzałki. Nie mam pojęcia czy zadziała dla tych samych co z klawiatury, ale mogę przetestować u siebie.

 

Myszką - klik

Zwykłe kliknięcie myszką na dowolny element, scrolluje aż do tego elementu. Całość ponownie trwa jedynie 300 milisekund niezależnie od odległości nowo wybranego elementu.

 

Palcem na ekranie telefonu: poprzez tapnięcie

To samo co myszką. Nie mam pojęcia, czy wymaga dodatkowej implementacji.

 

Palcem na ekranie telefonu: poprzez przesunięcie (gest)

Dobrze by było, żeby to też dobrze działało. Krótki szybki ruch w prawo/lewo powinien przesunąć do następnego elementu. Duży, zamaszysty ruch powinien rozkręcić to tak, żeby zajechało gdzieś daleko. Nie wiem, może da się znaleźć jakieś biblioteki, które dobrze to implementują tak, żeby experience był typowy dla właściciela danego urządzenia? Na ile to jednak możliwe, chciałbym, żeby kod pozostał jak najbardziej wspólny dla różnych platform.

 

Dane


Dane o elementach będą wczytane z json. Na potrzeby fazy pierwszej można wziąć statyczne dane z pliku. Html’e podałem w jakiejś pseudo wersji, żeby było wiadomo o co chodzi:
 

{

  "height": 240,

  "typ zaczepienia": "left",

  "miejsce zaczepienia": 45,

  "sliding_time": 300,

  "childs": [

    {

      "id": "canada",

      "html": "Kanada
8615"

    },

    {

      "id": "indie",

      "html": "Indie
1548"

    },

    {

      "id": "usa",

      "html": "USA
12K1K"

    },

    {

      "id": "china",

      "html": "Chiny
15412"

    },

    {

      "id": "pakistan",

      "html": "Pakistan
15412"

    },

    {

      "id": "poland",

      "html": "Polska
15412"

    }

  ]

}


 

Dane te powinny zrenderować się do wspomnianego slidera:


Punkt zaczepienia został zdefiniowany jako “left, 45”, a więc lewa krawędź elementu aktywnego powinna znajdować się zawsze na pozyski “45%” względem szerokości slidera.
Docelowo chciałbym, byśmy mieli 2 dodatkowe punkty zaczepienia: “middle” i “right”. Middle, oznacza, że w tym samym miejscu ma być zawsze środek elementu aktywnego. Right oznacza zaczepienie z prawej strony.

 

Skalowanie na różnych ekranach

Slider powinien być inaczej zeskalowany na różnej wielkości urządzeniach. Na przykład na telefonach slajder mógłby wyglądać np tak:

 


Nic jednak nie stałoby na przeszkodzie, żeby użytkownik mógł palcami to powiększyć lub pomniejszyć. Podobnie na komputerze, można skalować Ctrl+ i Ctrl-. Dla mnie idealnie byłoby, gdyby można było skalować te slidery tak jak każdy inny element na stronie (Ctrl+ i Ctrl-). Przy takim skalowaniu slidery powinny wyglądać tak samo, tylko być coraz mniejsze. Ten punkt zaczepienia też nie może się zmieniać.