logo

Vytvoření komponenty galerie obrázků s polymerem

Webové komponenty se stávají budoucím trendem vývoje webových aplikací. Umožňují nám seskupit HTML značky, skripty a styly do opakovaně použitelné komponenty. Tyto komponenty jsou součástí prohlížeče, a proto nepotřebují externí JavaScriptové knihovny, jako je jQuery, aby poskytovaly svou funkčnost. Jak uvádí Wikipedia,

Web Components je sada standardů, kterou v současnosti vytvářejí inženýři Google jako specifikace W3C, která umožňuje vytvářet opakovaně použitelné widgety nebo komponenty ve webových dokumentech a webových aplikacích. Jejich záměrem je přinést softwarové inženýrství založené na komponentách na World Wide Web. Model komponent umožňuje zapouzdření a interoperabilitu jednotlivých prvků HTML.

Stručně řečeno, webové komponenty řeší složitost prvků na webové stránce a poskytují jednodušší a snadno pochopitelnou strukturu prvků. HTML již poskytuje sady vestavěných značek, jako jsou záhlaví, odstavce, seznamy a tak dále. V některých případech však stávající tagy nedostačují k tomu, aby poskytovaly správnou podporu velkým webovým aplikacím, a zde přichází na pomoc webové komponenty. Některé knihovny, zejména Polymer, umožňují použití webových komponent v nepodporujících prohlížečích pomocí Polyfill Web Components.

V tomto tutoriálu se naučíme, jak vytvořit komponentu Galerie obrázků s Polymerem verze 1.0. Veškerý kód uvedený v tomto článku je dostupný na GitHubu.

Úvod do polymeru

Obrázkové galerie se běžně používají při vývoji webových stránek. Obecně platí, že vývojáři mají tendenci používat existující knihovny galerií a často musí čelit nudnému problému složitosti struktury prvků generované těmito knihovnami. Následující kód zobrazuje náhled struktury velmi základní galerie obrázků.

<div id="gallery-panel" class="gallery-panel">
    <div class="slides">
        <div id="links" name="links">
            <img src="images/thumbnails/img01.jpg" alt="Title 1">
            <img src="images/thumbnails/img02.jpg" alt="Title 2">
            <img src="images/thumbnails/img03.jpg" alt="Title 3">
            <img src="images/thumbnails/img04.jpg" alt="Title 4">
            <img src="images/thumbnails/img05.jpg" alt="Title 5">
        </div>
    </div>
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"> <a class="close"><button type="button" class="close" aria-hidden="true"  >X</button></a>

                     <h4 class="modal-title"></h4>

                </div>
                <div class="modal-body next">
                    <img class='modal-img' />
                </div>
                <div class="modal-footer">
                    <button id="previous" type="button" class="btn btn-default pull-left prev">Previous</button>
                    <button id="next" type="button" class="btn btn-default next">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

I když se jedná o úryvek kódu, který ukazuje, jak vypadá struktura základní galerie obrázků, je jasné, že to není tak jednoduché, jak by mohlo být. Možná budeme muset opakovat stejnou sadu kódů pro každou galerii na webové stránce, takže webová stránka bude velmi velká a bude obtížné ji spravovat.

Zde je uvedeno, kde a jak Polymer poskytuje své řešení pomocí webových komponent. Polymer je knihovna vytvořená pro vytváření vlastních webových komponent. Existuje několik knihoven užitečných pro vytváření webových komponent, ale kompatibilita prohlížečů je problém, který většina knihoven dosud nevyřešila. Polymer poskytuje nejlepší řešení poskytováním polyfillů, které jsou schopny spravovat webové komponenty v nekompatibilních prohlížečích. Více o Polymeru a jeho použití naleznete zde.

Když je Polymer použit k vytvoření galerie jako webové komponenty, náš kód by měl vypadat následovně.

<simple-gallery>
    <img src="images/thumbnails/img01.jpg" alt="Title 1">
    <img src="images/thumbnails/img02.jpg" alt="Title 2">
    <img src="images/thumbnails/img03.jpg" alt="Title 3">
    <img src="images/thumbnails/img04.jpg" alt="Title 4">
    <img src="images/thumbnails/img05.jpg" alt="Title 5">
</simple-gallery>

Jak můžete vidět, náš kód se stal mnohem jednodušším a obsahuje pouze základní značky. Veškeré další složité kódování je uživateli skryto, takže je vysoce znovupoužitelné. V tuto chvíli začněme vytvářet komponentu galerie pomocí Polymeru.

Jak nainstalovat polymer

Polymer lze nainstalovat se všemi jeho závislostmi pomocí Bowera, který spustí následující příkaz:

bower install --save Polymer/polymer#^1.1.0

Tím se nainstaluje knihovna Polymer a polyfilly webové komponenty do složky nazvané bower_components .

Než uděláme krok vpřed, musíme identifikovat funkce potřebné pro základní galerii obrázků. Plánujeme vytvořit webovou komponentu pro galerii obrázků a budeme muset vytvořit samostatný soubor pro komponentu galerie. Níže naleznete seznam bodů, které musíme vzít v úvahu, abychom naši galerii správně postavili:

  • Značky HTML pro zobrazení obrázků galerie;
  • Značky HTML pro modální vyskakovací okno s velkými obrázky;
  • styly CSS pro komponentu galerie;
  • tlačítka pro další, předchozí a zavřít události;
  • JavaScript pro ovládání otevírání, zavírání a procházení galerie.

Na rozdíl od normálních webových stránek jsou všechny tyto věci definovány uvnitř jednoho dílčího souboru. Veškerý kód galerie je tedy nezávislý na ostatních komponentách a znovu použitelný na více místech. Řekněme, že můžeme začít budovat hlavní webovou stránku a komponentu galerie obrázků.

Nejprve musíme vytvořit hlavní stránku našeho webu, aby obsahovala webové komponenty. Můžeme vytvořit stránku s názvem index.html v kořenové složce projektu. Poté musíme zahrnout potřebné soubory pro Polymer a HTML značky pro galerii obrázků. Následující fragment kódu ukazuje, jak postupovat:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Polymer</title>
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="simple-gallery.html">
    </head>
    <body>
        <simple-gallery>
            <img data-original="images/img01.jpg" data-index='s1' src="images/thumbnails/img01.jpg" alt="Title 1">
            <img data-original="images/img02.jpg" data-index='s2' src="images/thumbnails/img02.jpg" alt="Title 2">
            <img data-original="images/img03.jpg" data-index='s3' src="images/thumbnails/img03.jpg" alt="Title 3">
        </simple-gallery>
    </body>
</html>

Nejprve musíme importovat polymer.html soubor z bower_components/polymer složku pomocí link živel. Potom musíme přidat soubor s názvem webcomponents.js z bower_components/webcomponentsjs složku. Toto je soubor zodpovědný za zpracování vlastních prvků v nekompatibilních prohlížečích. Pokud znáte Polymer 0.5, možná tento soubor znáte jako platform.js . Toto bylo nahrazeno v nejnovější verzi 1.0 a nyní jde o soubor s názvem webcomponents.js zvládá stejnou funkcionalitu. Nakonec musíme importovat naši komponentu vlastní galerie pomocí link živel. V našem příkladu jsme naši vlastní komponentu pojmenovali simple-gallery .

Nyní můžeme začít definovat naši strukturu rozvržení pomocí některých HTML značek a webových komponent. Přidali jsme vlastní komponentu nazvanou simple-gallery se všemi obrázky galerie uvnitř úvodní a závěrečné značky. Možná jste si všimli, že jsme použili několik atributů dat s názvem data-original a data-index . Tyto atributy se používají ke zjednodušení procesu zpracování URL původních obrázků a indexu obrázků v galerii. Samozřejmě je také možné vytvořit galerii i bez těchto dat manipulací s DOM.

Importovali jsme potřebné soubory na naši hlavní stránku a nyní jsme připraveni vytvořit komponentu galerie. Prvním krokem je vytvoření nového souboru ve složce projektu s názvem simple-gallery.html pro komponent galerie. Můžeme přidat následující kód pro definování struktury naší komponenty galerie:

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="simple-gallery" >
   <style>
      /* Styles for the Gallery Component */    
   </style>
   
   <script>
      HTMLImports.whenReady(function () {
          (function () {
              var current_index = 0;
              var image_length = 0;

              Polymer({
                  is: "simple-gallery",
                  ready: function () {},
                  load_popup: function (e, detail, sender) {},
                  next: function () {},
                  prev: function () {},
                  close: function () {},
              });
          })();

      });
   </script>
     
   <template></template>
 </dom-module>

Nejprve musíme zahrnout polymer.html soubor jako obvykle. Poté začneme definovat komponentu galerie. Polymer 1.0 používá dom-module prvek pro definování nových komponent. Název komponenty by měl být použit jako id atributu dom-module prvek.

Používáme style prvek k definování všech stylů potřebných pro naši komponentu. I tento se od verze 0.5, kde jsme používali style, změnil uvnitř template živel. Ve verzi 1.0 je nyní umístěn mimo template prvek jako nezávislý tag. Označení HTML pro komponentu galerie se nachází uvnitř template živel. Nakonec můžeme inicializovat prvek Polymer uvnitř HTMLImports.whenReady funkce zpětného volání. Tato funkce zajišťuje načtení všech importovaných dokumentů před spuštěním kódu.

Musíme použít is atribut s názvem komponenty (simple-gallery ) k registraci polymerní složky. Tento postup se liší od postupu používaného ve verzi 0.5, kde jsme měli následující syntaxi:

Polymer('simple-gallery', {});

Musíme definovat potřebné funkce pro naši vlastní komponentu. Máme pět funkcí:ready , load_popup_ , prev , next a close . Pojďme identifikovat jejich funkce jednu po druhé:

  • ready :Toto je funkce Polymer, která se spustí, jakmile je objekt Polymer připraven. Tuto funkci používáme k inicializaci jakýchkoli funkcí v naší komponentě.
  • load_popup :Tato funkce se používá k načtení původního obrázku v modálním vyskakovacím okně.
  • prev :Tato funkce se používá k procházení obrázků galerie zpět
  • next :Tato funkce se používá k procházení obrázků galerie vpřed
  • close :Tato funkce se používá k uzavření modálního vyskakovacího okna

V další části můžeme začít s implementací naší komponenty galerie na základě struktury, kterou jsme v této části vytvořili.

Šablony patří mezi nejdůležitější součásti webové komponenty. V této části uvidíme, které označení se zobrazí koncovému uživateli. Obsah uvnitř template není viditelný pro koncového uživatele, protože uživatelé uvidí pouze simple-gallery tag ve zdrojovém kódu a další vnitřní prvky budou viditelné pouze pomocí speciálních nástrojů prohlížeče.

V tuto chvíli musíme implementovat jak HTML pro zobrazení obrázků, tak HTML pro modální vyskakovací okno uvnitř tohoto template štítek. Podívejme se na kód naší šablony součásti galerie:

<div id="gallery-panel" class="gallery-panel">
    <!-- The container for the modal slides -->
    <div class="slides">
        <div id="links" name="links"></div>
    </div>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"> <a class="close"><button type="button" class="close" aria-hidden="true" on-click="close" >X</button></a>

                     <h4 class="modal-title"></h4>

                </div>
                <div class="modal-body next">
                    <img class='modal-img' />
                </div>
                <div class="modal-footer">
                    <button id="previous" type="button" class="btn btn-default pull-left prev" on-click="prev">Previous</button>
                    <button id="next" type="button" class="btn btn-default next" on-click="next">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

Šablona součásti obsahuje dvě části. První je definován pomocí div prvek s třídou slides . Tento kontejner bude naplněn obrázky, které poskytujeme z komponenty simple-galerie. Tato část šablony je ve výchozím nastavení viditelná pro uživatele. Druhá část začíná div s class="modal fade" . Toto bude použito pro modální vyskakovací okno, a proto je před uživatelem ve výchozím nastavení skryté. Máme také nezbytná tlačítka pro předchozí, další a zavřít pomocí Polymer on-click volání. Polymer používá on-event syntaxe k definování událostí na prvcích.

Nyní, když máme všechny potřebné značky pro naši šablonu, bude naším dalším úkolem stylovat naše prvky uvnitř style štítek. V případě potřeby můžete také importovat externí šablony stylů do komponent. Nebudeme zde zahrnovat všechny styly. Všechny styly pro naši komponentu najdete ve složce zdrojového kódu. Následující kód obsahuje některé ukázkové styly pro naši komponentu.


    .modal {
        display: none;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
        overflow: hidden;
        position: fixed;
        z-index: 999999;
        top:0;
    }

Použili jsme normální CSS třídy a selektory. Tyto selektory se tedy stanou následnými selektory prvku galerie. Například .modal třída bude zapsána jako .modal.simple-gallery . Můžete použít Polymer :host zaměřit se na konkrétní prvky součásti a její předky. Více informací o stylování komponent naleznete zde.

V předchozí části jsme definovali pět funkcí pro naši komponentu galerie. Začněme implementovat tyto funkce jednu po druhé.

Funkce připravenosti

Používáme ready funkci získat obrázky definované uvnitř elementu simple-gallery a přidat je do #links kontejner uvnitř naší šablony. Následující kód obsahuje implementaci této první funkce.

ready: function () {
    var images = Polymer.dom(this).querySelectorAll('img');
    var container = this.$.links;

    for (var img in images) {
        images[img].addEventListener('click', this.load_popup);
        container.appendChild(images[img]);
    }
}

Všechny obrázky uvnitř komponenty vybereme pomocí querySelectorAll funkce na Polymer.dom(this) objekt. Poté projdeme každým prvkem a přidáme jej do #links kontejneru při definování vlastní události kliknutí pro volání load_popup funkce.

Funkce load_popup

Tato funkce se používá k otevření modálního vyskakovacího okna a zobrazení původního obrázku po kliknutí na obrázek z galerie. Následující kód ukazuje, jak jej implementovat:

load_popup: function (e, detail, sender) {
    e.preventDefault();
    var links = document.getElementById('links');
    image_length = links.getElementsByTagName('img').length;

    var image_url = e.target.getAttribute('data-original');
    var modalbody = document.getElementsByClassName("modal-body")[0];
    var modal_img = modalbody.getElementsByTagName('img')[0];
    modal_img.setAttribute("src", image_url);
    var modal = document.getElementsByClassName("modal")[0];
    modal.style.display = 'block';

    current_index = parseInt(e.target.getAttribute('data-index').replace("s", ""));
    return false;
}

Kliknutím na obrázek získáme pomocí e.target . Poté vezmeme původní adresu URL obrázku pomocí data-original atribut a použít nějakou manipulaci DOM k přidání obrázku do modálního okna a otevření modálního okna pro uživatele. Můžeme také uložit index vybraného obrázku pomocí data-index atribut. Obecně máme pro tento typ manipulace s DOM tendenci používat knihovny, jako je jQuery. V tomto příkladu jsme však použili jednoduché funkce JavaScriptu a důvody, které mě přivedly k tomu, abych se vyhnul použití jQuery, vysvětlím v další části.

Další funkce

Tato funkce se používá k procházení obrázků galerie ve vyskakovacím okně. Jakmile se vyskakovací okno otevře, můžeme použít tlačítka Další a Předchozí k procházení galerií namísto klikání na jednotlivé miniatury z galerie. Podívejme se na implementaci next funkce.

next: function () {
    current_index = current_index + 1;
    if (current_index == (image_length + 1)) {
        current_index = 1;
    }
    var current_image = document.querySelectorAll("[data-index='s" + current_index + "']");
    image_url = current_image[0].getAttribute('data-original');
    var modalbody = document.getElementsByClassName("modal-body")[0];
    var modal_img = modalbody.getElementsByTagName('img')[0];
    modal_img.setAttribute("src", image_url);
}

Používáme aktuální index vygenerovaný z load_poup funkce pro získání dalšího obrázku z galerie. Obrázek je identifikován data-original atribut a nahrazen do existujícího obrazu modálního okna. Tento proces pokračuje a jakmile se dostaneme na konec, index se nastaví na 1 a začne od začátku. Implementace prev funkce je také podobná této, a proto zde nebude zahrnuta. Najdete jej ve složce zdrojového kódu.

Tímto posledním úryvkem jsme dokončili základní komponentu galerie obrázků pomocí Polymeru. Můžete použít soubory zdrojového kódu, abyste viděli, jak to funguje. Jsou k dispozici zde.

Galerie obrázků je běžnou součástí většiny webových stránek. Existuje tedy velké množství čistého JavaScriptu a knihoven jQuery, které můžete použít k vytvoření svých galerií obrázků. Možná se divíte, proč bychom měli vytvořit galerii obrázků místo převodu galerie obrázků jQuery na webovou komponentu. Byla by to jednodušší a lepší volba. Problém je však v tom, že mnoho pluginů jQuery nefunguje s Polymerem jako webovými komponentami. Tyto pluginy často generují konflikty, a proto je musíme vytvořit od začátku.

Je důležité identifikovat důvod, proč nedoporučujeme pluginy jQuery nebo kód jQuery ve webových komponentách Polymer. Existují dva typy prvků DOM nazývané Local DOM a Shadow DOM:

  • Místní DOM :tyto prvky jsou viditelné pro uživatele. V tomto scénáři jsou všechny obrázky v naší součásti galerie součástí místního DOM;
  • Shadow DOM :tyto prvky nejsou viditelné pro uživatele a jsou generované webovou komponentou. V tomto scénáři je kontejner galerie obrázků a vyskakovací okno stínovým DOM.

Většina zásuvných modulů jQuery funguje na místním DOM a očekává, že prvky budou v místním DOM. Ale prvky generované z webové komponenty jsou umístěny v Shadow DOM, takže pluginy jQuery nemohou tyto prvky identifikovat. Z tohoto důvodu se nedoporučuje používat jQuery pluginy nebo jQuery kód uvnitř webových komponent. Navrhuji, abyste místo toho nahradili funkci jQuery pomocí jednoduché funkce JavaScript. Vzhledem k počtu dostupných pluginů jQuery se to může zdát jako omezení, ale webové komponenty se vytvářejí rychlým tempem a brzy uvidíme, že nahradí většinu pluginů jQuery.

Závěry

Očekáváme, že webové komponenty budou budoucností vývoje aplikací díky jejich výkonnému způsobu vytváření a správy webových stránek se zbytečnou složitostí. Jejich implementace je však stále v rané fázi a teprve se stane přísným standardem. I když knihovny jako Polymer umožňují použití těchto komponent v nekompatibilních prohlížečích, stále můžete narazit na problémy, zejména v mobilních prohlížečích.

Je na vás a vašem konkrétním případě, zda se rozhodnete je použít ve skutečné aplikaci, nebo ne. Osobně doufám, že webové komponenty budou velmi brzy široce používány.