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

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

  • alexandreelise
    a répondu
    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!

    Laisser un commentaire:


  • cavo789
    a répondu
    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

    Laisser un commentaire:


  • alexandreelise
    a répondu
    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...

    Laisser un commentaire:


  • woluweb
    a répondu
    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 ?

    Laisser un commentaire:


  • alexandreelise
    a répondu
    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

    Laisser un commentaire:


  • alexandreelise
    a répondu
    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

    Laisser un commentaire:


  • woluweb
    a répondu
    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.

    Laisser un commentaire:


  • roland_d_alsace
    a répondu
    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

    Laisser un commentaire:


  • woluweb
    a répondu
    Envoyé par roland_d_alsace Voir le message
    Juste une Petite question ?
    C.est une volonté d.utiliser articles anywhere ?

    Pourquoi ne pas utiliser un module de filtres sur des custom fields ?
    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)

    Laisser un commentaire:


  • roland_d_alsace
    a répondu
    Juste une Petite question ?
    C.est une volonté d.utiliser articles anywhere ?

    Pourquoi ne pas utiliser un module de filtres sur des custom fields ?

    Laisser un commentaire:


  • woluweb
    a répondu
    Merci ghazal pour l'ajout des balises "code" (si c'est bien ça que tu as changé)

    Salut roland_d_alsace
    Oh, si c'est en jquery je prends aussi hein ! j'suis pas difficile

    Mais le but est d'avoir la possibilité de sélections multiples : exemple :
    salle1+salle2 (dans pareil cas, un dropdown ne me paraît pas adéquat)
    vendredi+salle1

    D'où l'idée a priori de garder des boutons (par ailleurs ça fait aussi moins de clics que d'aller dans un dropdown pour choisir une valeur. Ca dépend du cas de figure bien sûr : s'il y avait 100 valeurs parmi lesquelles choisir SANS sélection multiple, alors bien sûr un dropdown serait mieux)

    Laisser un commentaire:


  • roland_d_alsace
    a répondu
    Sinon pour rester dans le fil de ton idée des boutons colorées :

    il faudrait au clic d'un bouton appeler une fonction js qui attribue la classe qui colorie le bouton, puis qui scrute tous les boutons ayant cette classe de couleur pour calculer l'URL, puis seulement appel de l'url ainsi calculée.

    En JQuery cela semble pas trop compliqué...mais tu semble être dans le mouvement anti-JQuery actuel
    Dernière édition par roland_d_alsace à 25/05/2019, 10h44

    Laisser un commentaire:


  • roland_d_alsace
    a répondu
    Hello Marc.

    Je pense que ce serait plus facile avec 3 champs "select list" à choix multiple : rooms, sessions et tags (et du coup tu t'affranchirais d'un js perso) :

    https://docs.joomla.org/J3.x:Adding_.../List_Field/fr

    Et au niveau ergonomie, moi j'aime bien ce champ, plutôt que de multiplier les boutons.

    De plus je rajouterai aussi un bouton "valider" pour éviter de recharger la page à chaque choix tant que l'on a pas fini la sélection de l'ensemble des filtres.

    Rajout :
    Oups, à la réflexion, c'est un peu + compliqué à mettre en œuvre c'est sûr.
    Il faut créer un layout de filtres, et l'appeler dans le code.
    Si la piste te semble intéressante, je veux bien regarder à l'occasion.
    Dernière édition par roland_d_alsace à 25/05/2019, 10h14

    Laisser un commentaire:


  • ghazal
    a répondu
    Je me suis permis de faire du rangement, lol.

    Laisser un commentaire:


  • woluweb
    a répondu
    Pour être précis, voici même le code qui permet d'ajouter la classe si le paramètre est dans l'url :

    Code:
    {source}
    <?php $session = explode(',', JFactory::getApplication()->input->getString('session'));
    // echo (in_array('slot-am-1', $session) ? 'yes' : 'no');
    // print_r ($session);
    echo '<a class="btn btn-default" href="/articlesanywhere">Tous</a> ';
    echo '<a class="btn btn-default' . (in_array('slot-am-1', $session) ? ' btn-primary' : '') . '" href="/articlesanywhere?session=slot-am-1">Session 1</a> ';
    echo '<a class="btn btn-default' . (in_array('slot-am-2', $session) ? ' btn-primary' : '') . '" href="/articlesanywhere?session=slot-am-2">Session 2</a> ';
    echo '<a class="btn btn-default' . (in_array('slot-am-3', $session) ? ' btn-primary' : '') . '" href="/articlesanywhere?session=slot-am-3">Session 3</a> ';
    
    echo '<a class="btn btn-default' . '" href="/articlesanywhere?session=slot-am-1,slot-am-3">Sessions 1 & 3</a> ';
    
    echo '<hr />'; $room= explode(',', JFactory::getApplication()->input->getString('room')); // print_r ($room);
    echo '<h4>Filter by Custom Field of type Articles Field (Room)</h4>';
    echo '<a class="btn btn-default" href="/articlesanywhere">Toutes</a> ';
    echo '<a class="btn btn-default' . (in_array(35, $room) ? ' btn-primary' : '') . '" href="/articlesanywhere?room=35">Amphithéatre PlanetHoster</a> ';
    
    echo '<a class="btn btn-default' . (in_array(199, $room) ? ' btn-primary' : '') . '" href="/articlesanywhere?room=199">Salle Infomaniak</a> ';
    
    echo '<a class="btn btn-default' . (in_array(200, $room) ? ' btn-primary' : '') . '" href="/articlesanywhere?room=200">Salle atelier</a> ';
    
    echo '<hr />'; $jour= explode(',', JFactory::getApplication()->input->getString('jour'));
    // print_r ($jour);
    
    echo '<h4>Filter by Tag</h4>';
    echo '<a class="btn btn-default" href="/articlesanywhere">Tous</a> ';
    echo '<a class="btn btn-default' . (in_array('vendredi', $jour) ? ' btn-primary' : '') . '" href="/articlesanywhere?jour=vendredi">Vendredi</a> ';
    
    echo '<a class="btn btn-default' . (in_array('samedi', $jour) ? ' btn-primary' : '') . '" href="/articlesanywhere?jour=samedi">Samedi</a> ';
    
    echo '<a class="btn btn-default' . (in_array('test', $jour) ? ' btn-primary' : '') . '" href="/articlesanywhere?jour=test">Test</a> ';
    echo '<hr />'; $date= explode(',', JFactory::getApplication()->input->getString('date'));
    echo '<h4>Filter by Creation Date (possible to filter on yyyy-mm-dd or yyyy-mm or yyyy for example. But using >= in the filter is not foreseen</h4>';
    echo '<a class="btn btn-default" href="/articlesanywhere">Tous</a> ';
    echo '<a class="btn btn-default' . (in_array('2019-02-04', $date) ? ' btn-primary' : '') . '" href="/articlesanywhere?date=2019-02-04">2019-02-04</a> ';
    
    echo '<a class="btn btn-default' . (in_array('2019-02', $date) ? ' btn-primary' : '') . '" href="/articlesanywhere?date=2019-02">2019-02</a> ';
    
    echo '<hr />'; $page= explode(',', JFactory::getApplication()->input->getString('page')); // print_r ($page);
    echo '<h4>Example of text based on Pagination</h4>';
    echo '<p>' . 'Is this page 2 or not : ' . (in_array('2', $page) ? 'yes' : 'no') . '</p>'; ?>
    {/source}


    Code:
    {articles category="30" slot="input:session:*" salle="input:room:*" tag="input:jour:*" created="input:date:*" order="slot,salle" per_page="10"}
    
    [link][title][/link]
    [slot]
    [salle]
    
    {/articles}
    Dernière édition par ghazal à 25/05/2019, 09h51

    Laisser un commentaire:

Annonce

Réduire
Aucune annonce pour le moment.

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X