Interaktive Webkomponenten sind einfacher als Sie denken

In meinem letzten Artikel haben wir gesehen, dass Webkomponenten nicht so beängstigend sind, wie sie scheinen. Wir haben uns ein super einfaches Setup angesehen und ein Zombie-Dating-Serviceprofil mit einem benutzerdefinierten Element erstellt. Wir haben das Element für jedes Profil wiederverwendet und jeweils mit eindeutigen Informationen mithilfe des -Elements besiedelt.

So kam alles zusammen.

Das war cool und viel Spaß (na ja, ich hatte sowieso Spaß ...), aber was ist, wenn wir diese Idee noch einen Schritt weiter machen, indem wir sie interaktiv machen. Unsere Zombie-Profile sind großartig, aber damit dies ein nützliches, postapokalyptisches Dating-Erlebnis ist, das Sie möchten, wissen Sie, wie ein Zombie „wie“ oder sie sogar eine Nachricht. Das werden wir in diesem Artikel tun. Wir werden für einen anderen Artikel wischen lassen. (Wies nach links das für Zombies angemessen?)

Artikelserie

• Webkomponenten sind einfacher als Sie denken
• Interaktive Webkomponenten sind einfacher als Sie denken
  (Sie sind hier)
• Die Verwendung von Webkomponenten in WordPress ist einfacher als Sie denken
• Aufladende integrierte Elemente mit Webkomponenten „ist“ einfacher als Sie denken
• Kontextbewusste Webkomponenten sind einfacher als Sie denken
• Webkomponenten Pseudoklassen und Pseudoelemente sind einfacher als Sie denken

In diesem Artikel wird ein Basisniveau über Webkomponenten übernommen. Wenn Sie neu im Konzept sind, ist das völlig in Ordnung - der vorherige Artikel sollte Ihnen alles geben, was Sie brauchen. Fortfahren. Lies es. Ich werde warten. * Twiddles Daumen* Bereit? Okay.

Erstens ein Update zur Originalversion

Lassen Sie uns eine Sekunde innehalten (okay, vielleicht länger) und schauen wir uns das Pseudoelement :: Slotted () an. Es wurde mir auf mich aufmerksam gemacht, nachdem der letzte Artikel (danke, Rose!) Und es löst einige (wenn auch nicht alle) der Verkapselungsprobleme, denen ich begegnet war. Wenn Sie sich erinnern, hatten wir einige CSS -Stile außerhalb der -Elements innerhalb der . Die Stile innerhalb der wurden eingekapselt, aber die außerhalb der Außenseite waren es nicht.

Aber hier kommt :: Slotted ins Spiel. Wir deklarieren ein Element im Selektor wie SO:

 :: versteckt (img) {
  Breite: 100%;
  Max-Breite: 300px;
  Höhe: Auto;
  Rand: 0 1EM 0 0;
}

Jetzt wird ein in jedem Steckplatz platzierter Element ausgewählt. Das hilft sehr!

Dies löst jedoch nicht alle unsere Verkapselungslebensbeamte. Während wir etwas direkt in einem Steckplatz auswählen können, können wir keinen Nachkommen des Elements im Steckplatz auswählen. Wenn wir also einen Slot mit Kindern haben - wie der Interessenabschnitt der Zombie -Profile - können wir sie nicht aus dem -Element auswählen. Während :: Slotted eine großartige Browser -Unterstützung hat, werden einige Dinge (wie die Auswahl eines Pseudoelements, z. B. :: Slotted (Span) :: After) in einigen Browsern (Hallo, Chrom), aber in anderen nicht funktioniert (Hallo, Safari).

Obwohl es nicht perfekt ist: Hier ist der Dating -Service, der aktualisiert wurde, um das widerzuspiegeln:

Zurück zu interaktiven Webkomponenten!

Das erste, was ich gerne tun würde, ist eine kleine Animation hinzuzufügen, um die Dinge aufzupeppen. Lassen Sie uns unsere Zombie -Profilbilder verblassen und auf Ladung übersetzen.

Als ich dies zum ersten Mal versuchte, habe ich IMG und :: Slotted (IMG) Selektoren verwendet, um das Bild direkt zu animieren. Aber alles, was ich bekam, war Safari -Unterstützung. Chrome und Firefox würden die Animation auf dem geschlitzten Bild nicht ausführen, sondern das Standardbild, das gut animiert ist. Um es zum Laufen zu bringen, habe ich den Slot in eine DIV mit einer .pischen Klasse eingewickelt und die Animation stattdessen auf die DIV angewendet.

 .pic {
  Animation: Picfadein 1s 1s Leichte vorwärts;
  Transformation: Translatey (20px);
  Deckkraft: 0;
}

@keyframes picfadein {
  von {opazität: 0; Transformation: Translatey (20px); }
  zu {Opazität: 1; Transformation: Translatey (0); }
}

"Mögen" Zombies

Wäre es nicht etwas, um diesen süßen Zombie zu „mögen“? Ich meine natürlich aus der Sicht des Benutzers. Das scheint etwas, was ein Online -Dating -Service zumindest haben sollte.

Wir fügen ein Kontrollkästchen "Schaltfläche" hinzu, das eine Herzanimation auf Klick initiiert. Fügen wir diese HTML oben auf dem .Info Div: hinzu:

 <eingabe type="checkBox"> <label f> wie </label></eingabe>

Hier ist ein Herz, das ich zusammengezogen habe. Wir wissen, dass Zombies die Dinge lieben, um schrecklich zu sein, also wird ihr Herz ein schiefes Schatten von Chartreuse sein:

 <svg viewbox="0 0 160 135" xmlns="http://www.w3.org/2000/svg" fill-rule="gireodd" clip-role="BEILEDD" stroke-linejoin="RUND" stroke-mitrimit="2"> <pathd m61></pathd> </svg>

Hier sind die wichtigen Teile der CSS, die dem Vorlage -Element hinzugefügt werden:

 #trigger: checked.
  /* Überprüfter Zustand der. LikeBtn. Schleudert die Vordergrund-/Hintergrundfarbe des ungeprüften Zustands. */
  Hintergrundfarbe: #960b0b;
  Farbe: #fff;
}

#auslösen {
  /* Mit der an die Eingabe mit dem Attribut angeschlossenen Beschriftung klicken Sie auf die Beschriftungsprüfungen/deaktivieren Sie das Kontrollkästchen, damit wir das Kontrollkästchen entfernen können. */
  Anzeige: Keine;
}

.Herz {
  / * Starten Sie das Herz so klein, dass es nahezu unsichtbar ist */
  Transformation: Skala (0,0001);
}

@Keyframes Heartanim {
  / * Herzanimation */
  0% {Transformation: Skala (0,0001); }
  50% {Transformation: Skala (1); }
  85%, 100% {Transformation: Skala (0,4); }
}

#TRIGGER: ~ .heart {
  / * Überprüfen des Kontrollkästchens initiiert die Animation */
  Animation: 1S Heartanim Eventual-In-Out Forwards;
}

So ziemlich Standard -HTML und CSS. Nichts Besonderes oder festes Webkomponenten. Aber hey, es funktioniert! Und da es technisch gesehen ein Kontrollkästchen ist, ist es genauso einfach, einen Zombie zu „anders“ wie ein Zombie zu „mögen“.

Messaging -Zombies

Wenn Sie eine postapokalyptische Single sind, die bereit ist, sich zu mischen und einen Zombie zu sehen, dessen Persönlichkeit und Interessen Ihren übereinstimmen, möchten Sie sie vielleicht eine Nachricht senden. (Und denken Sie daran, Zombies sind nicht besorgt über Looks - sie interessieren sich nur für Ihre Braaains .)

Lassen Sie uns einen Nachrichtenknopf angeben, nachdem ein Zombie „gemocht“ ist. Die Tatsache, dass die Button GASE ein Kontrollkästchen ist, ist wieder praktisch, da wir den geprüften Status verwenden können, um die Meldungsoption mit CSS bedingt anzugeben. Hier ist die HTML, die direkt unter dem Herzen SVG hinzugefügt wurde. Es kann so ziemlich überall hingehen, solange es ein Geschwister ist und nach dem #TRIGGERS -Element kommt.

 <schaltetyp> message </schaltetyp>

Sobald das Kontrollkästchen #Tigger überprüft ist, können wir die Messaging -Schaltfläche in Ansicht bringen:

 #TRIGGER: ~ .MessageBtn {
  Anzeige: Block;
}

Wir haben bisher gute Arbeit geleistet, um Komplexität zu vermeiden, aber wir müssen hier nach einem kleinen JavaScript greifen. Wenn wir auf die Schaltfläche zur Nachricht klicken, würden wir damit rechnen, diesen Zombie eine Nachricht zu senden, oder? Während wir diese HTML zu unserer für Demonstrationszwecke hinzufügen konnten, können Sie ein JavaScript verwenden, um es im laufenden Fliegen zu erstellen.

Meine erste (naive) Annahme war, dass wir der Vorlage nur ein -Element hinzufügen konnten, ein eingekapseltes Skript erstellen und auf dem fröhlichen Weg sein können. Ja, das funktioniert nicht. Alle in der Vorlage instanziierten Variablen werden mehrmals und gut so instanziiert, dass JavaScript über Variablen, die nicht voneinander zu unterscheiden sind. *Schüttelt Faust bei Cranky JavaScript*

Sie hätten wahrscheinlich etwas Klüschteres getan und gesagt: "Hey, wir machen bereits einen JavaScript -Konstruktor für dieses Element. Warum sollten Sie das JavaScript nicht dort einsetzen?" Nun, ich hatte Recht damit, dass du schlauer war als ich.

Lassen Sie uns genau das tun und dem Konstruktor JavaScript hinzufügen. Wir fügen einen Listener hinzu, der nach dem Klicken ein Formular zum Senden einer Nachricht erstellt und anzeigt. So sieht der Konstruktor jetzt aus, Smarty Hosen:

 CustomElements.define ('Zombie-Profil',,
Die Klasse erweitert Htmlelement {
  constructor () {
    super();
    let profil = document.getElementById ('ZProfiletemplate');
    lass myProfile = profil.content;
    const Shadowroot = this.attachShadow ({{
      Modus: 'Öffnen'
    }). appendChild (myProfile.clonenode (true));

    // der "neue" Code
    // Die Meldungstaste und das DIV das Profil für die spätere Verwendung abwickeln
    msgbtn = this.shadowroot.querySelector ('. MessageBtn'),
        profileel = this.shadowroot.querySelector ('. Profil-Wrapper');
    
    // Hinzufügen des Ereignishörers
    msgbtn.addeventListener ('klick', function (e) {

      // Erstellen Sie alle Elemente, die wir benötigen, um unser Formular zu erstellen
      Sei formel = document.createelement ('Form'),
          Subjekt = document.createelement ('Eingabe'),
          Subjektlabel = document.createelement ('label'),
          contentel = document.createelement ('textarea'),
          contentLabel = document.createelement ('label'),
          subjektel = document.createelement ('Eingabe'),
          closeBtn = document.createelement ('button');
        
      // Einrichten des Formularelements. Die Aktion geht nur zu einer Seite, die ich erstellt habe, die das ausspuckt, was Sie bei Ihnen wieder eingereicht haben
      formel.setattribute ('methode', 'post');
      formel.setattribute ('action', 'https://johnrhea.com/undead-form-practice.php');
      formel.classlist.add ('Hallo');

      // Einrichten einer Schließschaltfläche, damit wir die Nachricht schließen können, wenn wir schüchtern werden
      CLEDBTN.INNERHTML = "X";
      CLEDBTN.ADDEVENTLISTENER ('Click', Function () {
        formel.remove ();
      });

      // Formularfelder und Etiketten einrichten
      Prob.
      STOPULEL.SETATTRIBUTE ('Name', 'SubJ');
      Subjektlabel.SetAttribute ('for', 'subJ');
      Subjektlabel.innerHtml = "Subjekt:";
      contentel.setattribute ('name', 'cntnt');
      contentLabel.setAttribute ('for', 'cntnt');
      contentLabel.innerhtml = "message:";
      setheTattribute ('type', 'subled');
      setartattribute ('Wert', 'meldung senden');

      // alle Elemente in die Form legen
      Formel.AppendChild (CloseBtn);
      Formel.AppendChild (Subjektlabel);
      Formel.AppendChild (Subjekte);
      Formel.AppendChild (contentLabel);
      Formel.AppendChild (Contentel);
      Formel.AppendChild (Subjekt);

      // das Formular auf die Seite setzen
      ProfileL.AppendChild (Formel);
    });
  }
});

So weit, ist es gut!

Bevor wir es einen Tag nennen, müssen wir uns zuletzt ansprechen. Es gibt nichts Schlimmeres als diese erste unangenehme Einführung. Lassen Sie diese postapokalyptischen Dating-Räder also fetten, indem Sie den Namen des Zombies dem Standard-Meldungstext hinzufügen. Das ist eine nette kleine Bequemlichkeit für den Benutzer.

Da wir wissen, dass die erste Zeitspanne im Element immer der Name des Zombies ist, können wir ihn greifen und seinen Inhalt in eine Variable stecken. (Wenn Ihre Implementierung unterschiedlich ist und die Bestellung der Elemente herumspringt, möchten Sie möglicherweise eine Klasse verwenden, um sicherzustellen, dass Sie immer das richtige erhalten.)

 lass zname = this.getElementsByTagName ("span") [0] .innerhtml;

Und fügen Sie dies dann in den Ereignishörer hinzu:

 contentel.innerhtml = "hi" zname ", \ ni wie deine braaains ...";

Das war nicht so schlimm, oder? Jetzt wissen wir, dass interaktive Webkomponenten genauso nicht st in die Zombie-Dating-Szene sind ... nun, Sie wissen, was ich meine. Sobald Sie die anfängliche Hürde zum Verständnis der Struktur einer Webkomponente überwunden haben, macht dies viel sinnvoller. Jetzt, da Sie mit interaktiven Fähigkeiten im Webkomponenten ausgestattet sind, lassen Sie uns sehen, was Sie sich einfallen lassen können! Welche anderen Arten von Komponenten oder Interaktionen würden unseren Zombie -Dating -Service noch besser machen? Machen Sie es und teilen Sie es in den Kommentaren.

Das obige ist der detaillierte Inhalt vonInteraktive Webkomponenten sind einfacher als Sie denken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!