Lage Gjenbrukbare HTML-Maler

0
12

I vår forrige artikkel, har vi diskutert Web Components spesifikasjoner (tilpassede elementer, skygge DOM, og HTML-maler) på et høyt nivå. I denne artikkelen, og tre til følge, vil vi sette disse teknologiene til test og undersøke dem i større detalj, og se hvordan vi kan bruke dem i produksjon i dag. For å gjøre dette, vil vi bygge en tilpasset sperrende dialogboks fra grunnen av for å se hvordan de ulike teknologiene som passer sammen.

Artikkel-Serien:

  1. En Introduksjon til Web Components
  2. Lage Gjenbrukbare HTML-Maler (Dette innlegget)
  3. Opprette en Egendefinert Element fra Scratch (Kommer snart!)
  4. Omfatter Stil og Struktur med Skygge DOM (Kommer snart!)
  5. Avanserte Verktøy for Web Components (Kommer snart!)

HTML-maler

En av de minst anerkjent, men mest kraftfulle funksjoner av Web Components spesifikasjon er <mal> – element. I den første artikkelen i denne serien, har vi definert mal element som “bruker-definerte maler i HTML som ikke gjengis til tilkalt.” Med andre ord, en mal for HTML-at nettleseren ignorerer før du får beskjed om å gjøre noe annet.

Disse malene kan deretter bli sendt rundt og om igjen i en rekke interessante måter. For formålene i denne artikkelen vil vi se på hvordan de kan lage en mal for en dialog som til slutt vil bli brukt i et tilpasset element.

Å definere vår mal

Så enkelt som det kan høres, er en <mal> er et HTML-element, slik at de mest grunnleggende form av en mal med innhold vil være:

<mal>
<h1>Hello world</h1>
</template>

Kjører denne i en nettleser vil resultere i en tom skjerm som leseren ikke gjengi mal element innholdet. Dette blir utrolig kraftig, fordi det gir oss muligheten til å definere innhold (eller et innhold struktur) og lagre det for senere — i stedet for å skrive HTML-kode i JavaScript.

For å bruke malen, vi må JavaScript

const mal = – dokument.querySelector(‘mal’);
const node = – dokument.importNode(mal.innhold, true);
dokumentet.kroppen.appendChild(node);

Den virkelige magien skjer i dokumentet.importNode metode. Denne funksjonen vil skape en kopi av malen innhold og forberede den til å bli satt inn i et annet dokument (eller dokument fragment). Det første argumentet til funksjonen griper malens innhold og det andre argumentet forteller leseren til å gjøre en dyp kopi av elementet er DOM undertreet (dvs. alle sine barn).

Vi kunne ha brukt malen.innhold direkte, men i så gjør vi ville ha fjernet innholdet fra elementet og lagt til dokumentet kropp senere. Noen DOM node kan bare være tilkoblet ett sted, slik etterfølgende bruker av malens innhold ville resultere i et tomt dokument fragment (egentlig en null-verdi) på grunn av innhold som tidligere hadde blitt flyttet. Ved hjelp av dokumentet.importNode tillater oss å bruke forekomster av den samme malen innhold på flere steder.

Den noden er deretter lagt inn i dokumentet.kroppen og gjengis for brukeren. Dette til syvende og sist gir oss mulighet til å gjøre interessante ting, som å gi brukerne (eller konsumentene av våre programmer) maler for å opprette innhold, som ligner på følgende demo, som vi dekket i den første artikkelen:

Se Penn
Eksempel på en mal av Caleb Williams (@calebdwilliams)
på CodePen.

I dette eksemplet, vi har gitt to maler for å gjøre det samme innhold — forfattere og bøker de har skrevet. Som form endringer, velger vi å gjengi den mal som er forbundet med denne verdien. Ved å bruke den samme teknikken vil tillate oss til slutt opprette en egendefinert element som vil spise opp en mal for å bli definert på et senere tidspunkt.

Allsidigheten av mal

En av de interessante tingene om maler er at de kan inneholde alle HTML. Som inneholder skript og stil elementer. Et veldig enkelt eksempel vil være en mal som legger inn en knapp som varsler oss når det er klikket på.

<- knappen id=”klikk meg” – >Logg klikk hendelse</button>

La oss style det opp:

knappen {
alle: unset;
bakgrunn: tomat;
border: 0;
border-radius: 4px;
color: white;
font-family: Helvetica;
font-størrelse: 1,5 rem;
polstring: .5rem 1rem;
}

…og kall det med en veldig enkel skriptet:

const-knappen = – dokument.bürgerliches(‘click-me’);
knappen.addEventListener(‘click’, event => alert(hendelse));

Selvfølgelig, kan vi sette alt dette sammen ved hjelp av HTML <style> og <script> – tag-er direkte i malen snarere enn i separate filer:

<mal id=”mal”>
<script>
const-knappen = – dokument.bürgerliches(‘click-me’);
knappen.addEventListener(‘click’, event => alert(hendelse));
</script>
<style>
#klikk-me {
alle: unset;
bakgrunn: tomat;
border: 0;
border-radius: 4px;
color: white;
font-family: Helvetica;
font-størrelse: 1,5 rem;
polstring: .5rem 1rem;
}
</style>
<- knappen id=”klikk meg” – >Logg klikk hendelse</button>
</template>

Når dette elementet er lagt til DOM, vil vi ha en ny knapp med ID #klikk for meg, en global CSS selector målrettet knappen ID, og en enkel hendelse lytteren som vil varsle element klikk event.

For vår script, vi legger du innhold ved hjelp av dokumentet.importNode og vi har det meste-som finnes mal med HTML-kode som kan flyttes rundt fra side til side.

Se Penn
Mal med manus og stiler demo av Caleb Williams (@calebdwilliams)
på CodePen.

Lage mal for vår dialog

Å komme tilbake til vår oppgave å lage en dialog element, vi ønsker å definere vår malens innhold og stiler.

<mal id=”en-dialog”>
<script>
dokumentet.bürgerliches (“start-dialogboksen’).addEventListener(‘click’, () => {
const wrapper = – dokument.querySelector(‘.wrapper’);
const closeButton = – dokument.querySelector (‘- knappen.lukk’);
const wasFocused = – dokument.activeElement;
wrapper.classList.legg til(‘åpne’);
closeButton.fokus();
closeButton.addEventListener(‘click’, () => {
wrapper.classList.fjern(‘åpne’);
wasFocused.fokus();
});
});
</script>
<style>
.wrapper {
dekkevne: 0;
overgang: synlighet 0s, tetthet 0.25 s letthet-i;
}
.pakker:ikke(.åpne) {
visibility: hidden;
}
.wrapper.åpne {
juster-elementer: center;
skjerm: flex;
rettferdiggjøre-innhold: center;
høyde: 100vh;
stilling: fast;
øverst: 0;
venstre: 0;
høyre: 0;
nederst: 0;
dekkevne: 1;
visibility: visible;
}
.overlegg {
bakgrunn: rgba(0, 0, 0, 0.8);
høyde: 100%;
stilling: fast;
øverst: 0;
høyre: 0;
nederst: 0;
venstre: 0;
bredde: 100%;
}
.dialogboksen {
bakgrunn: #ffffff;
max-width: 600px;
polstring: 1rem;
stilling: fast;
}
knappen {
alle: unset;
cursor: pointer;
font-size: 1.25 rem;
position: absolute;
øverst: 1rem;
høyre: 1rem;
}
knappen:fokus {
border: 2px solid blå;
}
</style>
<div class=”wrapper”>
<div class=”overlay”></div>
<div class=”dialog” role=”dialog” aria-labelledby=”title” aria-describedby=”innhold”>
<- knappen class=”lukk” aria-label=”Lukk”>&#x2716;&#xfe0f;</button>
<h1 id=”title”>Hello world</h1>
<div id=”innhold” class=”content”>
<p>Dette er innholdet i kroppen vår modal</p>
</div>
</div>
</div>
</template>

Denne koden vil tjene som grunnlag for vår dialog. Bryte det ned litt, vi har en global lukk-knapp, overskrift og innhold. Vi har også lagt ut i litt av problemet til visuelt å veksle vår dialog (selv om det ennå ikke er tilgjengelig). I vår neste artikkel vil vi sette tilpassede elementer å bruke og skape en av våre egne som bruker denne malen i real-time.

Se Penn
Dialogen med mal med manus av Caleb Williams (@calebdwilliams)
på CodePen.

Artikkel-Serien:

  1. En Introduksjon til Web Components
  2. Lage Gjenbrukbare HTML-Maler (Dette innlegget)
  3. Opprette en Egendefinert Element fra Scratch (Kommer snart!)
  4. Omfatter Stil og Struktur med Skygge DOM (Kommer snart!)
  5. Avanserte Verktøy for Web Components (Kommer snart!)