site JoomlaDay > javascript 'onclick' pour ajouter/retirer des paramètres à l'url

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • #16
    Envoyé par woluweb Voir le message

    euh, quel "module de filtres" ?
    (et le but est de pouvoir faire des sélections multiples, pas de réinitialiser chaque filtre quand on clique sur un autre)
    En fait hier soir, en surfant sur ma tablette, j'ai trouvé une réponse qui à priori traite de filtres sur les customs-fields (avec des check-box par exemple), mais je n'ai pas testé.
    Tu reconnaitra peut-être un participant à cette discussion
    https://forum.joomla.fr/forum/joomla...32#post1968532

    C'est une alternative possible.
    Dernière édition par roland_d_alsace à 26/05/2019, 07h44
    A tous les utilisateurs de Joomla du très Grand Est de la France et du Jura suisse
    Rejoignez le Joomla Users Groupe Alsace...
    roland_d_alsace va-t-il devenir roland_du_grand_est ?

    Commentaire


    • #17
      Merci roland_d_alsace
      Joomla CFS (Custom field search) est sympa, mais ça fait sortir une vue "search" (pas ta propre vue).
      Ici, l'idée était d'avoir sa propre mise en page (avec Articles Anywhere) et d'exploiter les possibilités de filtre et de pagination.
      Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

      Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

      Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

      Commentaire


      • #18
        Salut tout le monde et bon dimanche!

        Ce projet Javascript pur m'intéresse. J'ai déjà commencé à travailler dessus grâce à vos liens et discussions. Je pense que j'aurai fini aujourd'hui. En Martinique c'est UTC -4 .
        Il est 14h chez nous. Donnez moi encore un peu de temps et vous aurez ce code fait maison. Même peut etre avec les test fonctionnels avec Cypress si possible.
        A tout à l'heure! woluweb

        Alexandre (A.E)
        Dernière édition par alexandreelise à 26/05/2019, 19h11
        woluweb aime ceci.
        Salut Super Joomleurs-euses! C'est Alex le fana des webservices
        Vous pouvez en savoir plus sur https://alexandre-elise.fr

        Commentaire


        • #19
          Salut à tous!
          Voici le code que j'ai pondu après avoir bien réfléchit sur ce cas d'utilisation. Il y a de légers bug mais dans l'ensemble cela devrait donner une bonne base de départ.
          J'ai mis des commentaires au cas où.
          la partie utile légèrement modifiée de la page html reprise de l'exemple de woluweb sur le site jdf
          Code:
          <!DOCTYPE html>
          <html lang="en">
          
             <head>
          
                <meta charset="UTF-8">
          
                <title>Title</title>
          
                <base href="https://local.test/application2000/apps/jdf/">
             </head>
             <body>
                <input id="site_url" name="site_url" type="text" value="" placeholder="https://example.com" size="150"> <br> <input id="generated_url" name="generated_url" type="text" value="" placeholder="https://example.com/?generated=1" size="150">
                <h3>Demo for Filter via url ("input:") and for Pagination</h3>
                <h4>Filter by Custom Field of type List (Session), not adapting styling</h4>
                <p><a class="btn btn-default js_dynamic_filter" href="#">Tous</a>     <a class="btn btn-success js_dynamic_filter" href="?session=slot-am-1" >Session 1</a>     <a class="btn btn-warning js_dynamic_filter" href="?session=slot-am-2" >Session 2</a>     <a class="btn btn-danger js_dynamic_filter" href="?session=slot-am-3" >Session 3</a></p>
                <hr>
                <h4>Filter by Custom Field of type List (Session),&nbsp;adapting styling</h4>
                <p></p>
                <a class="btn btn-default js_dynamic_filter" href="#">Tous</a> <a class="btn btn-default btn-primary js_dynamic_filter" href="?session=slot-am-1" >Session 1</a> <a class="btn btn-default js_dynamic_filter" href="?session=slot-am-2" >Session 2</a> <a class="btn btn-default btn-primary js_dynamic_filter" href="?session=slot-am-3" >Session 3</a> <a class="btn btn-default js_dynamic_filter" href="?session=slot-am-1,slot-am-3" >Sessions 1 &amp; 3</a>
                <hr>
                <h4>Filter by Custom Field of type Articles Field (Room)</h4>
                <a class="btn btn-default js_dynamic_filter" href="#" >Toutes</a> <a class="btn btn-default js_dynamic_filter" href="?room=35" >Amphithéatre PlanetHoster</a> <a class="btn btn-default js_dynamic_filter" href="?room=199" >Salle Infomaniak</a> <a class="btn btn-default js_dynamic_filter" href="?room=200" >Salle atelier</a>
                <hr>
                <h4>Filter by Tag</h4>
                <a class="btn btn-default" href="#" >Tous</a> <a class="btn btn-default js_dynamic_filter" href="?jour=vendredi" >Vendredi</a> <a class="btn btn-default js_dynamic_filter" href="?jour=samedi">Samedi</a> <a class="btn btn-default js_dynamic_filter" href="?jour=test" >Test</a>
                <hr>
                <h4>Filter by Creation Date (possible to filter on yyyy-mm-dd or yyyy-mm or yyyy for example. But using &gt;= in the filter is not foreseen</h4>
                <a class="btn btn-default js_dynamic_filter" href="#" >Tous</a> <a class="btn btn-default js_dynamic_filter" href="?date=2019-02-04" >2019-02-04</a> <a class="btn btn-default js_dynamic_filter" href="?date=2019-02" >2019-02</a>
                <hr>
                <h4>Example of text based on Pagination</h4>
                <p>Is this page 2 or not : no</p>
                <p></p>
                <hr>
                <script src="app.js"></script>
             </body>
          </html>
          et le code javascript pur (ES5) pas de ES2015 pour que ce soit plus simple.

          Code:
          // based on the code from this post: https://usefulangle.com/post/81/javascript-change-url-parameters (function () {     "use strict";   document.addEventListener('DOMContentLoaded', function () {     var siteUrl = document.getElementById('site_url');     var generatedUrl = document.getElementById('generated_url');     var jsDynamicFilters = document.querySelectorAll('a.js_dynamic_filter');     var clickHandler;     var processUrlHandler;     var allowedParams = ['session', 'room', 'jour', 'date'];     var filterClicks = {};     var old = {};     var counter = {};      // fonction de traitement de l'url en fonction des filtres recus         processUrlHandler = function processUrlHandler(currentSiteUrl, doAfter) {             var url;             var searchParams;             var newUrl;             var k;             var allParamValues;             var newParam;             var paramIndex;             url = new URL(currentSiteUrl);             searchParams = new URLSearchParams(url.search);             // trier les paires cle/valeurs             searchParams.sort();             for (k of allowedParams) {                 if (false === searchParams.has(k)) {                    continue;                 }                 allParamValues = searchParams.getAll(k);                  if (counter[k] === undefined) {                     counter[k] = 0;                     if ((allParamValues !== null) && (allParamValues !== undefined)) {                         counter[k] = allParamValues.length;                         old[k] = allParamValues;                     }                 } else {                     paramIndex = old[k].indexOf(searchParams.get(k));                     newParam = old[k];                     counter[k] = newParam.length;                     // nouveau parametre donc ajouter                     if (-1 === paramIndex) {                         newParam.push(searchParams.get(k));                         counter[k] = newParam.length;                         searchParams.set(k, newParam.join());                     } else { // existant dans la liste des parametres donc retirer de la liste                         if (counter[k] > 1) {                             newParam.splice(paramIndex, 1);                             counter[k] = newParam.length;                             searchParams.set(k, newParam.join());                         } else if ((counter[k] === 1) && (filterClicks[currentSiteUrl] > 1)) {                             searchParams.delete(k);                             filterClicks[currentSiteUrl] = 0;                             counter[k] = 0;                             old[k] = [];                         }                     }                     old[k] = newParam;                 }             }             console.table(counter);             console.table(old);             console.table(filterClicks);             url.search = searchParams.toString();             newUrl = url.toString();             if (typeof doAfter === 'function') {                 doAfter(newUrl);             }         };         // a chaque changement de l'url du site         clickHandler = function (evt) {             evt.preventDefault();             evt.stopPropagation();             siteUrl.value = (evt.currentTarget.href || '');             if (filterClicks[evt.currentTarget.href] === undefined) {                 filterClicks[evt.currentTarget.href] = 0;             }             filterClicks[evt.currentTarget.href]++;             // traiter les filtres et modifier l'url generée             processUrlHandler(siteUrl.value, function (result) {                 generatedUrl.value = result;             });         };         jsDynamicFilters.forEach(function (element) {             element.addEventListener('click', clickHandler);         });     }); }());
          Normalement ça devrait fonctionner. Bon courage pour la suite.
          PS: Vous pouvez enlever les console.table() c'etait juste pour avoir un retour dans la console. J'ai mis les fichiers joints parce que c'est pas pratique de mettre tout le code dans la page.

          Happy coding! Laissez-moi un café et 2 croissants. Et suivez-moi sur Twitter si c'est pas déjà fait alexandreelise. Salut les amis!
          Fichiers joints
          Dernière édition par cavo789 à 27/05/2019, 06h54
          Salut Super Joomleurs-euses! C'est Alex le fana des webservices
          Vous pouvez en savoir plus sur https://alexandre-elise.fr

          Commentaire


          • #20
            Bonjour Alexandre / alexandreelise
            Un tout grand merci pour tout le travail

            Je viens d'essayer de mettre en place le html et le js adaptés sur une nouvelle url :
            Demo for Filter via url ("input:") and for Pagination Filter by Custom Field of type List (Session), not adapting styling Tous Session 1 Session 2 Session 3 Filter by Custom Field of type List (Sessi...


            Peux-tu me confirmer que c'est correctement mis en place ?

            Juste encore deux choses :
            - comment faire pour que le clic déclenche le refresh de la page ?
            - quand on clique sur un bouton de la même "ligne", le paramètre s'ajoute s'il n'y est pas encore et se retire sinon. Super Mais l'idée était qu'on puisse aussi "mélanger" sessions, lieux, tags etc. Bref, ne pas réinitialiser l'url mais toujours garder l'existant

            C'est possible, chef ?
            Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

            Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

            Commentaire


            • #21
              Salut woluweb ,

              Je n'avais donc pas tout à fait compris l'idée générale.
              Comme les filtres étaient séparés visuellement,
              je pensais qu'ils devaient fonctionner pour chaque "ligne".
              En ce qui concerne le rechargement de la page. Pour que ça fonctionne, il faut précéder chaque lien de articlesanywhere-js si le tag html5 base est défini dans la page avec l'adresse du site jdf.
              Sinon il faut utiliser une url absolue dans chaque lien. ex: /articlesanywhere-js?date=2019

              Pour la fonctionnalité multi-filtres je vais m'y atteler dès que possible.
              En semaine, c'est plus compliqué, je travaille pour mes clients.
              Mais je ferai de mon mieux.
              Joomla! un jour, Joomla! toujours...
              woluweb aime ceci.
              Salut Super Joomleurs-euses! C'est Alex le fana des webservices
              Vous pouvez en savoir plus sur https://alexandre-elise.fr

              Commentaire


              • #22
                Bonsoir

                Tiens, j'ai testé la notion de Snippets sous Chrome DevTools (appuyer sur la touche F12 sous Chrome Windows pour afficher la console).

                Dans la console; il est possible de créer un snippet qui permet, en javascript, d'interagir avec la page HTML sans avoir à la recharger à chaque correction du code javascript.

                L'idée : écrire le code JS qui va capturer le clic sur les boutons (en réalité des <a href=""> avec une classe "btn") pour ajouter les paramètres dans le querystring.

                L'ajout d'un snippet : depuis la console DevTools, appuyez sur CTRL-MAJ-P puis, dans la liste déroulante, introduire "snippets" pour permettre d'accéder au panneau de création d'un snippet (voir ci-dessous)



                Une fois rédigé, il suffit alors de faire un "Run snippet" pour exécuter le code JS et donc, dans le cas présent, attacher un alert à chaque bouton qui est affiché sur la page.
                Le code JS pour trouver les boutons peut être remanié bien évidemment pour bien "capturer" les bons éléments du DOM.

                Le code du snippet peut être adapté en temps réel; il suffit de faire un nouveau "run" pour charger le nouveau code sur la page.

                Cela permet donc, in fine, de développer son code JS en situation réelle, sans devoir recharger toute la page.

                Voici le code JS qui se trouve sur la capture d'écran ci-dessus

                Code:
                var buttons = document.getElementsByClassName("btn");
                
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].addEventListener('click', function (e) {
                      e.stopImmediatePropagation();
                      e.preventDefault();
                
                      alert(this.href);
                   });
                }

                Reste, donc, à modifier la ligne "alert(this.href);" pour ajouter le code JS nécessaire à gérer les boutons correctement.

                (pour le fun et la curiosité, d'autres astuces DevTools : https://dev.to/yashints/chrome-devto...n-do-that-4a8l)

                Bonne soirée
                Dernière édition par cavo789 à 27/05/2019, 22h33
                ghazal et woluweb aiment ceci.
                Christophe (cavo789)
                Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
                Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

                Commentaire


                • #23
                  Salut Marc woluweb ,

                  J'ai finalement eu un petit créneau de libre ce weekend ça m'a permis de bosser sur ton fameux script en javascript pur ES5 (ancien mais bon). La nouvelle version que je te propose est bien commentée et fonctionne comme tu l'avait souhaité. Seul bémol, il faudrait une légère touche d'AJAX pour que l'url générée soit interprétée par le PHP et renvoie les nouveaux résultats en fonction des filtres. J'aurais pu t'aider sur cette partie, mais je n'ai pas accès à ton code source. Ce qu'il me faudrait pour t'aider ce sont des articles de test avec la même config d'article anywhere que toi pour reproduire la même chose en local par exemple ou sur un site uniquement accessible par toi et ton équipe. Pour l'instant je t'envoie ci-joint le code source revisité et ainsi que le code directement dans ce message avec les balises appropriées.

                  Voici l'html:
                  Code HTML:
                    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <base href="https://jdf.test/"> </head> <body> <h3>Demo for Filter via url ("input:") and for Pagination</h3> <h4>Filter by Custom Field of type List (Session), not adapting styling</h4> <p><a class="btn btn-default js_dynamic_filter_session_0" href="#">Tous</a>     <a class="btn btn-success js_dynamic_filter_session_1" href="?session=slot-am-1">Session 1</a>     <a class="btn btn-warning js_dynamic_filter_session_2" href="?session=slot-am-2">Session 2</a>     <a class="btn btn-danger js_dynamic_filter_session_3" href="?session=slot-am-3">Session 3</a></p> <hr> <h4>Filter by Custom Field of type Articles Field (Room)</h4> <a class="btn btn-default js_dynamic_filter_room_0" href="#">Toutes</a> <a class="btn btn-default js_dynamic_filter_room_1" href="?room=35">Amphithéatre PlanetHoster</a> <a class="btn btn-default js_dynamic_filter_room_2" href="?room=199">Salle Infomaniak</a> <a class="btn btn-default js_dynamic_filter_room_3" href="?room=200">Salle atelier</a> <hr> <h4>Filter by Tag</h4><a class="btn btn-default js_dynamic_filter_tag_0" href="#">Tous</a> <a class="btn btn-default js_dynamic_filter_tag_1" href="?tag=vendredi">Vendredi</a> <a class="btn btn-default js_dynamic_filter_tag_2" href="?tag=samedi">Samedi</a> <a class="btn btn-default js_dynamic_filter_tag_3" href="?tag=test">Test</a> <hr> <h4>Filter by Creation Date (possible to filter on yyyy-mm-dd or yyyy-mm or yyyy for example. But using &gt;= in the     filter is not foreseen</h4> <a class="btn btn-default js_dynamic_filter_date_0" href="#">Tous</a> <a class="btn btn-default js_dynamic_filter_date_1" href="?date=2019-02-04">2019-02-04</a> <a class="btn btn-default js_dynamic_filter_date_2" href="?date=2019-02">2019-02</a> <hr> <h4>Example of text based on Pagination</h4> <p>Is this page 2 or not : no</p> <p></p> <hr> <script src="app.js"></script> </body> </html>
                  Voici le javascript (app.js)

                  Code:
                   
                   // using some information from this post: https://usefulangle.com/post/81/javascript-change-url-parameters /**  * Chaque "categorie" de filtre écoute les clics sur les "elements" de filtre  * Ex: Categorie Session ecoute les clics sur les liens session 1 session 2 et session 3  * Lorsque on clique une seule fois, le filtre associé est rajouté à la categorie correspondante  * grâce à son alias (ici: 'session').  * Lorsque les catégories sont "notifiée" par les élements filtrés, ces élements récupèrent la valeur de retour de la categorie qui sont les filtres actifs.  * Ensuite ils groupent les filtres actifs grace à l'alias de la categorie correspondante et modifie l'url si des filtres actifs existent.  * Ce système utilise le patron de conception Observateur où les categories sont les Observateurs et les elements les Sujets observés.  *  * convention:  * classe css ajoutees pour activer les filtres:  *  * js_dynamic_filter_session_0 : aucun filtre pour les sessions afficher tout  * (tout ce qui se termine par _0 est associé à resetFilters() qui reinitialise les filtres)  *  * js_dynamic_filter_session_1 : FilterItemSession1 (1er element de filtre pour les sessions de conferences)  * js_dynamic_filter_session_2 : FilterItemSession2 (2e element de filtre pour les sessions de conferences)  * js_dynamic_filter_session_3 : FilterItemSession3 (3e element de filtre pour les sessions de conferences)  *  * js_dynamic_filter_room_1 : FilterItemRoom1 (1er element de filtre pour les salles de conferences)  * js_dynamic_filter_room_2 : FilterItemRoom2 (2e element de filtre pour les salles de conferences)  * js_dynamic_filter_room_3 : FilterItemRoom3 (3e element de filtre pour les salles de conferences)  *  * @author Alexandre ELISÉ <developpeur@alexandre-elise.fr>  * @license GNU GPL-2.0-or-later  * @copyright 2019  * @link https://alexandre-elise.fr  */ (function (global) {     "use strict";     if (!('URL' in global)) {         throw 'Votre navigateur ne supporte pas la fonctionnalité URL()';     }      if (!('URLSearchParams' in global)) {         throw 'Votre navigateur ne supporte pas la fonctionnalité URLSearchParams()';     }     var selecteurs = {         filtrer_par_session: 'a[class*="js_dynamic_filter_session_"]',         filtrer_par_salle: 'a[class*="js_dynamic_filter_room_"]',         filtrer_par_tag: 'a[class*="js_dynamic_filter_tag_"]',         filtrer_par_date: 'a[class*="js_dynamic_filter_date_"]'     };     var siteBaseUrl = 'https://jdf.test/';     var allowedCategories = ['session', 'room', 'tag', 'date'];     var mergedObserverFilters = {};     var previousCategoryCollection = [];     var jsDynamicFilterSession;     var jsDynamicFilterRoom;     var jsDynamicFilterTag;     var jsDynamicFilterDate;     var filterClickCollection = {};     var FilterCategory;     var FilterItem;     var FilterCategorySession;     var FilterCategoryRoom;     var FilterCategoryTag;     var FilterCategoryDate;     var FilterItemSessionCollection = [];     var FilterItemRoomCollection = [];     var FilterItemTagCollection = [];     var FilterItemDateCollection = [];     var resetFilters;     var processUrlHandler;      /**      * reinitiliaser les filtres      */     resetFilters = function () {         // reinitialiser les filtres agrégés         mergedObserverFilters = '';         // reinitialiser la pile des categories precedentes         previousCategoryCollection = [];         // reinitialiser les compteurs de clics         filterClickCollection = {};     };      /**      * fonction de traitement de l'url en fonction des filtres recus      */     processUrlHandler = function processUrlHandler(currentUrl, category) {         var url;         var searchParams;         url = new global.URL(currentUrl);         searchParams = new global.URLSearchParams(url.search);         searchParams.sort();         return searchParams.getAll(category);     };      // DEBUT code des prototypes     FilterCategory = function (title, alias) {         this.title = title || 'MyFilterCategory';         this.alias = alias || 'my-filter-category';         this.filterItemCounter = {};         this.filterItemCollection = [];          global.console.info('Title: ', this.title, 'Alias: ', this.alias);     };      FilterCategory.prototype.update = function (evt) {         if (!evt || !evt.click.data || !evt.click.data.filters || (evt.click.data.filters.length < 1)) {             return;         }         var self = this;          evt.click.data.filters.forEach(function (currentClickedFilter) {             var separator = encodeURI(',');             var idxFilter = currentClickedFilter.indexOf(separator);             if (idxFilter === -1) {                 if (self.filterItemCounter[currentClickedFilter] === undefined) {                     self.filterItemCounter[currentClickedFilter] = 1;                     self.filterItemCollection.push(currentClickedFilter);                 } else {                     self.filterItemCounter[currentClickedFilter]++;                 }                  if (self.filterItemCounter[currentClickedFilter] === 2) {                     var idx = self.filterItemCollection.indexOf(currentClickedFilter);                     if (idx !== -1) {                         self.filterItemCollection.splice(idx, 1);                         self.filterItemCounter[currentClickedFilter] = undefined;                     }                 }             } else { // plusieurs filters dans un meme groupe ex: session=session1,session2,session3                 currentClickedFilter.split(separator).forEach(function (currentFilterItem) {                     if (self.filterItemCounter[currentFilterItem] === undefined) {                         self.filterItemCounter[currentFilterItem] = 1;                         self.filterItemCollection.push(currentFilterItem);                     } else {                         self.filterItemCounter[currentFilterItem]++;                     }                      if (self.filterItemCounter[currentFilterItem] === 2) {                         var idx = self.filterItemCollection.indexOf(currentFilterItem);                         if (idx !== -1) {                             self.filterItemCollection.splice(idx, 1);                             self.filterItemCounter[currentFilterItem] = undefined;                         }                     }                 });             }         });         return this.filterItemCollection;     };      FilterItem = function (title, alias) {         this.title = title || 'MyFilterItem';         this.alias = alias || 'my-filter-item';         this.observerCollection = [];         global.console.info('Title: ', this.title, 'Alias: ', this.alias);     };      FilterItem.prototype.registerObserver = function (observer) {         this.observerCollection.push(observer);     };      FilterItem.prototype.unregisterObserver = function (observer) {         var index = this.observerCollection.indexOf(observer);         if (index !== -1) {             this.observerCollection.splice(observer);         }     };      FilterItem.prototype.notifyObservers = function (evt) {         var currentBaseUrl = new global.URL(siteBaseUrl);         var currentUrlParams = new global.URLSearchParams(currentBaseUrl.search);         var newUrl;         this.observerCollection.forEach(function (observer) {             var currentObserverFilters;             currentObserverFilters = observer.update.call(observer, evt);             if (currentObserverFilters) {                 currentUrlParams.set(observer.alias, currentObserverFilters.join(','));                     mergedObserverFilters[observer.alias] = currentObserverFilters.join(',');              }         });          var mergedResult = [];         for (var currentMergedFilterKey in mergedObserverFilters) {             if (!mergedObserverFilters.hasOwnProperty(currentMergedFilterKey)) {                 continue;             }             if (allowedCategories.indexOf(currentMergedFilterKey) !== -1) {                 mergedResult.push(currentMergedFilterKey + '=' + mergedObserverFilters[currentMergedFilterKey]);             }         }          currentBaseUrl.search = mergedResult.join('&');         newUrl = currentBaseUrl.toString();         global.history.pushState({}, '', newUrl);         global.console.log(newUrl);     };      FilterItem.prototype.onClick = function (evt) {         this.notifyObservers(evt);     };     // FIN code des prototypes       // Au chargement de la page     global.document.addEventListener('DOMContentLoaded', function () {         // Filter par session         FilterCategorySession = new FilterCategory('MyFilterCategorySession', 'session');         jsDynamicFilterSession = global.document.querySelectorAll(selecteurs.filtrer_par_session);         jsDynamicFilterSession.forEach(function (element, index) {             if (index === 0) {                 element.addEventListener('click', resetFilters);             } else {                 var ItemSession = new FilterItem('MyFilterItemSession' + (index + 1), 'my-filter-item-session-' + (index + 1));                 ItemSession.registerObserver(FilterCategorySession);                 FilterItemSessionCollection.push(ItemSession);                 element.addEventListener('click', function (evt) {                     evt.preventDefault();                     evt.stopPropagation();                     ItemSession.onClick.call(ItemSession, {                         click: {                             data: {                                 filters: processUrlHandler(evt.currentTarget.href, 'session')                             }                         }                     });                 });             }         });          // Filtrer par salle         FilterCategoryRoom = new FilterCategory('MyFilterCategoryRoom', 'room');         jsDynamicFilterRoom = global.document.querySelectorAll(selecteurs.filtrer_par_salle);         jsDynamicFilterRoom.forEach(function (element, index) {             if (index === 0) {                 element.addEventListener('click', resetFilters);             } else {                 var ItemRoom = new FilterItem('MyFilterItemRoom' + (index + 1), 'my-filter-item-room-' + (index + 1));                 ItemRoom.registerObserver(FilterCategoryRoom);                 FilterItemRoomCollection.push(ItemRoom);                 element.addEventListener('click', function (evt) {                     evt.preventDefault();                     evt.stopPropagation();                     if (filterClickCollection[evt.currentTarget.href] === undefined) {                         filterClickCollection[evt.currentTarget.href] = 1;                     } else {                         filterClickCollection[evt.currentTarget.href]++;                     }                     ItemRoom.onClick.call(ItemRoom, {                         click: {                             data: {                                 filters: processUrlHandler(evt.currentTarget.href, 'room')                             }                         }                     });                 });             }         });          // Filtrer par tag         FilterCategoryTag = new FilterCategory('MyFilterCategoryTag', 'tag');         jsDynamicFilterTag = global.document.querySelectorAll(selecteurs.filtrer_par_tag);         jsDynamicFilterTag.forEach(function (element, index) {             if (index === 0) {                 element.addEventListener('click', resetFilters);             } else {                 var ItemTag = new FilterItem('MyFilterItemTag' + (index + 1), 'my-filter-item-tag-' + (index + 1));                 ItemTag.registerObserver(FilterCategoryTag);                 FilterItemTagCollection.push(ItemTag);                 element.addEventListener('click', function (evt) {                     evt.preventDefault();                     evt.stopPropagation();                     ItemTag.onClick.call(ItemTag, {                         click: {                             data: {                                 filters: processUrlHandler(evt.currentTarget.href, 'tag')                             }                         }                     });                 });             }         });          // Filtrer par date         FilterCategoryDate = new FilterCategory('MyFilterCategoryDate', 'date');         jsDynamicFilterDate = global.document.querySelectorAll(selecteurs.filtrer_par_date);         jsDynamicFilterDate.forEach(function (element, index) {             if (index === 0) {                 element.addEventListener('click', resetFilters);             } else {                  var ItemDate = new FilterItem('MyFilterItemDate' + (index + 1), 'my-filter-item-date-' + (index + 1));                 ItemDate.registerObserver(FilterCategoryDate);                 FilterItemDateCollection.push(ItemDate);                 element.addEventListener('click', function (evt) {                     evt.preventDefault();                     evt.stopPropagation();                     ItemDate.onClick.call(ItemDate, {                         click: {                             data: {                                 filters: processUrlHandler(evt.currentTarget.href, 'date')                             }                         }                     });                 });             }         });     }); }(window));
                  Voici amuse toi bien et à la prochaine! Bonne semaine à toutes et à tous amis Joomlers!
                  woluweb aime ceci.
                  Salut Super Joomleurs-euses! C'est Alex le fana des webservices
                  Vous pouvez en savoir plus sur https://alexandre-elise.fr

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X