Shop
Zmienna globalna Shop zawiera klasę MooTools rozszerzoną o (implementującą) obsługę zdarzeń.
Klasa zawiera minimalną ilość sztywno określonych selektorów, klas, tagów, etc. Jej funkcjonalność jest w większości abstrakcyjna i musi zostać dookreślona przez skrypt stylu graficznego.
W ramach klasy Shop zamknięte są również pod-klasy do określonej funkcjonalności (np. głosowania na produkt, lub obsługi wariantów), dlatego pełni on także funkcję namespace.
Atrybuty, metody
W deklaracji klasy Shop została umieszczona minimalna ilość niezbędnych atrybutów i funkcji. Pozostałe są przypisane do samej zmiennej (funkcji).
Metody i atrybuty klasy
- version - string, wersja klasy
- urls{}
- skin - adres bezwzględny (zaczynający się od /) do plików stylu graficznego
- base - adres bezwzględny do sklepu
- selectorFunctions{} - mapowania selektor → funkcja
- perBrowserFix{} - mapowania przeglądarka → funkcja
- options{}
- debug - boolean, debugowanie
- profile - boolean, użyj FireBug Profiler
- status{}
- domready - boolean, określa czy wystąpiło już zdarzenie /window.domready/
- load - boolean, określa czy wystąpiło już zdarzenie /window.load/
- url() - funkcja uzupełniająca adresy URL
Pozostałe funkcje są do użycia wewnętrznego. W celu dodania/modyfikacji powyższych należy użyć funkcji implement().
Shop.implement({ perBrowserFix : { chrome : function() { .... } } });
Metody i atrybuty zmiennej (funkcji)
Dla większej przejrzystości deklaracji klasy, większość funkcjonalności została wyciągnięcia poza nią - do osobnych funkcji.
Funkcje:
- urlParser() - nadanie wartości Shop.urls na podstawie tagów <link> w <head>
- runPerBrowserFix() - uruchomienie wybranych funkcji z mapy perBrowserFix{}
- runSelectorFunctions() - uruchomienie wybranych funkcji z mapy selectorFunctions{} dla zdarzenia /window.domready/
- addeventSelectorFunctions - uruchomienie wybranych funkcji z mapy selectorFunctions{} dla zdarzenia /Shop.element.add/
- galleryInit() - inicjalizacja galerii Milkbox
- preinit() - funkcja (domyślnie pusta) do wywołania na początku inicjalizacji klasy Shop
- postinit() - funkcja (domyślnie pusta) do wywołania na końcu inicjalizacji klasy Shop
Atrybuty:
- Shop.lang{} - frazy w języku strony
- values{} - mapa na wartości pochodzące z szablonów (wewnątrz kodu HTML)
- useroptions{} - mapa do przechowywania opcji dla administratora (szybka modyfikacja np. w user.js)
Deklaracja klasy vs funkcji
Do wszystkich atrybutów i funkcji instancja klasy Shop dostaje się poprzez funkcję pomocniczą
get(name)
Najpierw przeszukiwana jest instancja klasy, następnie funkcji. Dzięki temu możliwe jest szybkie przesłonięcie poprzez implement(). Na przykładzie mapy fraz:
Shop.implement({ lang : { basket : { address_request_error : "Błąd podczas pobierania adresu." } } });
Jeżeli argument get() zawiera kropki, jest on rozbijany na części i każda poszukiwana jest oddzielnie.
var s = new Shop(); s.get('lang.basket.address_request_error');
Dzięki temu, poprzez implement() można przesłaniać tylko część atrybutów, a pozostałe zostaną odszukane w atrybutach funkcji, np.
var s = new Shop(); s.get('lang.common.product_select_stock'); // == Shop.lang.common.product_select_stock
Pod-klasy
Większe funkcjonalności Shop pogrupowane zostały w pod-klasy, deklarowane jako atrybuty funkcji, np.
Shop.productVoter = new Class({ .... });
Wszystkie inicjalizowane są wraz z instancją Shop za pomocą funkcji
subclass(_class)
Dostęp do ich instancji można uzyskać przez obiekt classes{}
var s = new Shop(); s.classes.productVoter
Każda sub-klasa ma tylko jedną aktywną instancję w ramach obiektu Shop.
Warunkowa inicjalizacja pod-klas
Każda pod-klasa, o ile ma zostać zainicjalizowana, musi posiadać jako argument funkcję condition(), która zwraca true. Brak tej funkcji, lub inny zwrot spowoduje pominięcie. Przykładowa deklaracja ze skryptu stylu graficznego:
Shop.productVoter.condition = function() { var span = $$('span.votestars')[0]; return !!($chk(span) && span.get('id')); }
Powyższa funkcja sprawdza, czy istnieje przynajmniej jeden <span> z klasą votestarts i niepustym id, który jest niezbędny do działania dla productVoter.
Lista
- basketHandler - obsługa koszyka (dostawy, płatności, adresy)
- fadingText - wypełnienie <input> wartością domyślną, do czasu wpisania treści przez użytkownika
- imageSlider - przewijanie miniatur zdjęć pod głównym zdjęciem produktu
- imageZoom - powiększenie zdjęcia produktu w miejscu
- productVoter - głosowanie na produkt
- skinPreviewBox - zamknięcie podglądu stylu graficznego [wywołanego z Panelu Administracyjnego]
- stockDownloader - pobieranie informacji o wariantach produktów
- stockHandler - obsługa wariantów produktów [dynamiczne pola <select>]
Inicjalizacja
Klasa Shop wymaga, aby wszystkie elementy DOM istniały w momencie utworzenia jej instancji, dlatego należy ją wywołać najwcześniej w trakcie zdarzenia /window.domready/. Domyślnie style aplikacji tworzą tylko jedną instancję i przypisują ją do zmiennej globalnej ShopInstance.
window.addEvent('domready', function() { window.ShopInstance = new Shop(); });
W trakcie inicjalizacji wywoływane są kolejno:
- this.status.domready = true
- urlParser()
- preinit()
- runSelectorFunctions() - zdarzenia domready
- kontrolowane i tworzone są wszystkie podklasy
- galleryInit()
- postinit()
selectorFunctions
Wewnąŧrz selectorFunctions{} klasy należy umieścić obiekty zawierające selektor DOM oraz funkcję do wykonania na obiektach.
Shop.implement({ selectorFunctions : { popup : { selector : '.popup', domready : function(el) { el.removeEvents('click').addEvent('click', function(e) { new Event(e).stop(); $(this).blur(); window.open(this.href); }); }, addelement : 'domready' load : false } } });
W powyższym przykładzie dla każdego obiektu zawierającego klasę „popup” zostanie dodane zdarzenie onClick. W trakcie inicjalizacji Shop dla każdego elementu wywoływana jest funkcja domready(). Ponadto można zadeklarować addelement - wywoływane dla zdarzenia /Shop.element.add/ oraz load - dla /window.load/. Jeżeli zamiast funkcji addelement będzie zawierało string 'domready', wywołana zostanie funkcja domready().
perBrowserFix
Wewnąŧrz perBrowserFix{} klasy należy umieścić mapowanie przeglądarka –> funkcja. Wywołane zostaną tylko odpowiednie funkcje.
Shop.implement({ perBrowserFix : { ie6 : function() { document.body.style.behavior = 'url("' + this.urls.base + 'styles/csshover3.htc")'; }, chrome : function() { $$('.centercol input', '.centercol button').each(function(el) { if(el.get('value').length > 0 && el.get('name').match(/(mail|pass|login)/)) { el.focus(); el.blur(); } }); } } });
Jako atrybutów można używać wszystkich przeglądarek rozpoznawanych przez MooTools oraz ie67 dla IE6 oraz IE7.
Opcje
Obiekt Shop.useroptions{} służy do przechowywania opcji modyfikujących zachowanie Shop. Dostępne opcje:
- milkbox{} - obiekt z opcjami przekazywany do konstruktora Milkbox, można uzupełniać własnymi opcjami zgodnie z dokumentacją. Na przykład:
Shop.useroptions.milkbox.autoSize = false; //wyłączenie dopasowania dużych zdjęć do okna