Les composants Web interactifs sont plus faciles que vous ne le pensez

Dans mon dernier article, nous avons vu que les composants Web ne sont pas aussi effrayants qu'ils semblent. Nous avons examiné une configuration super simple et réalisé un profil de service de datation zombie, avec un élément personnalisé. Nous avons réutilisé l'élément pour chaque profil et rempli chacun avec des informations uniques à l'aide de l'élément .

Voici comment tout s'est réuni.

C'était cool et très amusant (eh bien, je me suis amusé quand même…), mais que se passe-t-il si nous allons plus loin de cette idée en la rendant interactive. Nos profils de zombies sont super, mais pour que ce soit une expérience de rencontres post-apocalyptique utile que vous voudriez, vous savez, «comme» un zombie ou même leur envoyer un message. C'est ce que nous allons faire dans cet article. Nous quitterons le balayage pour un autre article. (Le glissement à gauche serait-il la chose appropriée pour les zombies?)

Séries d'articles

• Les composants Web sont plus faciles que vous ne le pensez
• Les composants Web interactifs sont plus faciles que vous ne le pensez
  (Tu es ici)
• L'utilisation de composants Web dans WordPress est plus facile que vous ne le pensez
• Suralimentation des éléments intégrés avec des composants Web «est» plus facile que vous ne le pensez
• Les composants web du contexte sont plus faciles que vous ne le pensez
• Les pseudo-classes et les pseudo-éléments des composants Web sont plus faciles que vous ne le pensez

Cet article suppose un niveau de base de connaissances sur les composants Web. Si vous êtes nouveau dans le concept, c'est tout à fait bien - l'article précédent devrait vous donner tout ce dont vous avez besoin. Poursuivre. Lisez-le. J'attendrai. * Twiddles pouces * prêts? D'accord.

Tout d'abord, une mise à jour de la version originale

Arrêtons-nous une seconde (d'accord, peut-être plus) et regardons l'élément pseudo :: slotted (). Il a été porté à mon attention après que le dernier article soit sorti (merci, Rose!) Et il résout certains (mais pas tous) des problèmes d'encapsulation que j'ai rencontrés. Si vous vous souvenez, nous avions quelques styles CSS en dehors du du composant et de certains à l'intérieur d'un élément dans le . Les styles à l'intérieur du ont été encapsulés mais ceux à l'extérieur ne l'ont pas été.

Mais c'est là que :: Slotted entre en jeu. Nous déclarons un élément dans le sélecteur comme tel:

 :: Slotted (img) {
  Largeur: 100%;
  largeur maximale: 300px;
  Hauteur: Auto;
  marge: 0 1em 0 0;
}

Maintenant, tout élément placé dans n'importe quel emplacement sera sélectionné. Cela aide beaucoup!

Mais cela ne résout pas tous nos problèmes d'encapsulation. Bien que nous puissions sélectionner quoi que ce soit directement dans une fente, nous ne pouvons sélectionner aucun descendant de l'élément dans la fente. Donc, si nous avons une fente avec des enfants - comme la section des intérêts des profils de zombies - nous ne pouvons pas les sélectionner dans l'élément . De plus, tandis que :: Slotted a un excellent support de navigateur, certaines choses (comme sélectionner un élément pseudo, par exemple, :: Slotted (Span) :: After) fonctionnera dans certains navigateurs (bonjour, chrome), mais ne fonctionnera pas dans d'autres (bonjour, Safari).

Ainsi, même si ce n'est pas parfait, :: Slotted offre en effet plus d'encapsulation que ce que nous avions auparavant. Voici le service de rencontres mis à jour pour refléter cela:

Retour aux composants Web interactifs!

La première chose que j'aimerais faire est d'ajouter un peu d'animation pour pimenter les choses. Allons nous faire disparaître nos photos de profil de zombie et traduire en charge.

Lorsque j'ai tenté cela pour la première fois, j'ai utilisé des sélecteurs IMG et :: Slotted (IMG) pour animer directement l'image. Mais tout ce que j'ai obtenu, c'est le soutien de Safari. Chrome et Firefox n'exécuteraient pas l'animation sur l'image à fente, mais l'image par défaut s'est très bien animée. Pour le faire fonctionner, j'ai enveloppé la fente dans une div avec une classe .pic et appliqué l'animation à la div à la place.

 .pic {
  Animation: PICFADEIN 1S 1s Facility in Awards;
  Transform: Translatey (20px);
  Opacité: 0;
}

@keyframes picfadein {
  de {opacité: 0; Transform: Translatey (20px); }
  à {opacité: 1; Transform: Translatey (0); }
}

Zombies «aimer»

Ne serait-ce pas quelque chose pour «aimer» ce mignon zombie? Je veux dire du point de vue de l'utilisateur, bien sûr. Cela semble être quelque chose qu'un service de rencontres en ligne devrait avoir à tout le moins.

Nous allons ajouter une case à cocher «bouton» qui initie une animation cardiaque en clic. Ajoutons ce html en haut de la div .info:

 <input type="checkbox">  comme  labe>

Voici un cœur SVG que j'ai rassemblé. Nous savons que les zombies aiment les choses pour être terribles, donc leur cœur sera une nuance de chartreuse oculaire:

 <svg viewbox="0 0 160 135" xmlns="http://www.w3.org/2000/svg" fill-rule="evenoDd" clip-rule="evenoDd" trad-linejoin="rond" trad-miterlimit="2"> <path d="m61 12V0H25V12H12V13H0V36H12V13H13V12H12V12H12V12H12V13H13V12H12V-2H13V-13H11V98H13V86H-1 13V74H12V61H12V25H-2V12H-2V0H98V12H85V13H74V12H61Z " fill=" # 7AFF00 "></path> </svg>

Voici les bits importants du CSS qui sont ajoutés à l'élément

 #trigger: vérifié .likebtn {
  / * État vérifié du .likebtn. Flips la couleur de premier plan / d'arrière-plan de l'état non contrôlé. * /
  Color en arrière-plan: # 960B0B;
  Couleur: #FFF;
}

#déclenchement {
  / * Avec l'étiquette attachée à l'entrée avec l'attribut FOR, en cliquant sur l'étiquette Checks / Décochez la case, afin que nous puissions supprimer la case à cocher. * /
  Affichage: aucun;
}

.cœur {
  / * Démarrez le cœur si petit qu'il est presque invisible * /
  transformée: échelle (0,0001);
}

@KeyFrames Heartanim {
  / * Animation coeur * /
  0% {transform: échelle (0,0001); }
  50% {transform: échelle (1); }
  85%, 100% {transformée: échelle (0,4); }
}

#trigger: vérifié ~ .heart {
  / * La vérification de la boîte à cocher initie l'animation * /
  Animation: 1s Heartanim Facitage-Out Forward;
}

À peu près standard HTML et CSS là-bas. Rien d'extraordinaire ou fermement du Web-composant-ish. Mais, hé, ça marche! Et comme il s'agit techniquement d'une case à cocher, il est tout aussi facile de «contrairement» à un zombie que de «comme».

Zombies de messagerie

Si vous êtes un single post-apocalyptique qui est prêt à se mêler et à voir un zombie dont la personnalité et les intérêts correspondent au vôtre, vous voudrez peut-être leur envoyer un message. (Et, rappelez-vous, les zombies ne sont pas préoccupés par les looks - ils ne sont intéressés que par vos braaains .)

Revarons un bouton de message après qu'un zombie soit «aimé». Le fait que le bouton Like est une case à cocher est à nouveau utile, car nous pouvons utiliser son état coché pour révéler conditionnellement l'option de message avec CSS. Voici le HTML ajouté juste en dessous du cœur SVG. Il peut à peu près aller n'importe où tant que c'est un frère et est venu après l'élément #Trigger.

 <button type="Button"> Message </button>

Une fois la case à cocher #trigger cochée, nous pouvons afficher le bouton de messagerie:

 #Trigger: vérifié ~ .MessageBtn {
  Affichage: bloc;
}

Nous avons fait du bon travail en évitant la complexité jusqu'à présent, mais nous devrons atteindre un petit javascript ici. Si nous cliquons sur le bouton du message, nous nous attendons à pouvoir envoyer un message à ce zombie, non? Bien que nous puissions ajouter que HTML à notre , à des fins de démonstration, permet d'utiliser un javascript pour le construire à la volée.

Ma première hypothèse (naïve) était que nous pouvions simplement ajouter un élément au modèle, créer un script encapsulé et être sur notre joyeux chemin. Ouais, ça ne marche pas. Toutes les variables instanciées dans le modèle sont instanciées plusieurs fois et bien, grincheux de JavaScript sur les variables qui ne se distinguent pas les unes des autres. * Secoue le poing à JavaScript grincheux *

Vous auriez probablement fait quelque chose de plus intelligent et a dit: "Hé, nous faisons déjà un constructeur JavaScript pour cet élément, alors pourquoi ne mettons-vous pas le javascript là-dedans?" Eh bien, j'avais raison de dire que tu es plus intelligent que moi.

Faisons exactement cela et ajoutons JavaScript au constructeur. Nous allons ajouter un écouteur qui, une fois cliqué, crée et affiche un formulaire pour envoyer un message. Voici à quoi ressemble le constructeur maintenant, smarty pantalon:

 CustomElements.define («zombie-profile»,
La classe étend htmlelement {
  constructeur () {
    super();
    LET Profil = Document.getElementById («ZProfileTemplate»);
    Laissez myProfile = Profil.Content;
    const shadrooot = this.attacheshadow ({{
      Mode: «Ouvrir»
    }). APPENDCHILD (myprofile.clonenode (true));

    // le "nouveau" code
    // saisir le bouton du message et le div enroulant le profil pour une utilisation ultérieure
    Laissez msgBtn = this.shadowroot.QuerySelector ('. MessageBtn'),
        ProfilEl = this.shadowroot.QuerySelector ('. Profil-W-Wrapper');
    
    // Ajout de l'auditeur d'événements
    msgbtn.addeventListener ('click', fonction (e) {

      // Création de tous les éléments dont nous avons besoin pour construire notre formulaire
      Soit Formel = document.CreateElement ('Form'),
          sujettel = document.CreateElement ('entrée'),
          SubjectLabel = Document.CreateElement ('Label'),
          contentel = document.CreateElement ('TextArea'),
          contentLabel = document.CreateElement ('Label'),
          soumisel = document.CreateElement ('entrée'),
          closeBtn = document.CreateElement ('bouton');
        
      // Configuration de l'élément de formulaire. L'action va simplement à une page que j'ai construite qui crache ce que vous avez soumis à vous
      formEL.setAttribute («méthode», «post»);
      formel.setAttribute ('Action', 'https://johnrhea.com/undead-forme-practice.php');
      formel.classList.add ('Hello');

      // Configuration d'un bouton de fermeture afin que nous puissions fermer le message si nous devenons timides
      closebtn.innerhtml = "x";
      closebtn.addeventListener ('click', function () {
        formel.remove ();
      });

      // Configuration des champs de formulaire et des étiquettes
      subditel.setAttribute ('type', 'text');
      subditel.setAttribute ('name', 'subj');
      SubjectLabel.SetAttribute ('for', 'subj');
      SubjectLabel.InnerHtml = "Sujet:";
      Contentel.setAttribute ('name', 'cntnt');
      contentLabel.setAttribute ('for', 'cntnt');
      contentLabel.innerhtml = "Message:";
      soumisel.setAttribute («type», «soumettre»);
      soumisel.setAttribute ('Value', 'Send Message');

      // Mettre tous les elments sous la forme
      FORMEL.APPENDCHILD (CLOSTBTN);
      FORMEL.APPENDCHILD (SubjectLabel);
      FORMEL.APPENDCHILD (Subjectel);
      FORMEL.APPENDCHILD (ContentLabel);
      FORMEL.APPENDCHILD (Contentel);
      FORMEL.APPENDCHILD (SMEDEREL);

      // mettre le formulaire sur la page
      ProfilEl.ApendChild (Formel);
    });
  }
});

Jusqu'ici, tout va bien!

Avant de l'appeler un jour, il y a une dernière chose que nous devons aborder. Il n'y a rien de pire que cette première introduction maladroite, donc graisser ces roues de rencontres post-apocalyptiques en ajoutant le nom du zombie au texte du message par défaut. C'est une belle petite commodité pour l'utilisateur.

Puisque nous savons que la première portée de l'élément est toujours le nom du zombie, nous pouvons le saisir et coller son contenu dans une variable. (Si votre implémentation est différente et que la commande des éléments saute, vous voudrez peut-être utiliser une classe pour vous assurer d'obtenir toujours la bonne.)

 Soit Zname = this.getElementsByTAGName ("Span") [0] .InnerHtml;

Puis ajoutez-le à l'intérieur de l'écouteur de l'événement:

 contenul.innerhtml = "hi" zname ", \ ni like tes braaains ...";

Ce n'était pas si mal, n'est-ce pas? Maintenant, nous savons que les composants Web interactifs sont tout aussi inégalés que la scène de rencontres zombies… eh bien vous savez ce que je veux dire. Une fois que vous avez surmonté l'obstacle initial à comprendre la structure d'un composant Web, cela commence à avoir beaucoup plus de sens. Maintenant que vous êtes armé de compétences en composants Web interactifs, voyons ce que vous pouvez trouver! Quelles autres sortes de composants ou d'interactions rendraient notre service de rencontres zombies encore mieux? Faites-le et partagez-le dans les commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!