Changeset 106804 in spip-zone


Ignore:
Timestamp:
Oct 12, 2017, 9:30:57 PM (2 years ago)
Author:
marcimat@…
Message:

Un début de glossaire amélioré, avec onglets et filtres de recherche.

Location:
_galaxie_/galactic/galactic_spip_net
Files:
2 added
3 edited

Legend:

Unmodified
Added
Removed
  • _galaxie_/galactic/galactic_spip_net/content/mot.html

    r105794 r106804  
    1 
    2 <div class="cartouche">
    3         <h1><:galactic_spip_net:glossaire:></h1>
    4 </div>
    51
    62[(#REM)
     
    2117]
    2218
     19<div class="cartouche">
     20        <h1><:galactic_spip_net:glossaire:></h1>
     21</div>
     22
     23<B_groupes_mots_onglets>
     24        <div class="onglets onglets--glossaire">
     25                <div class="onglets__groupe onglets__groupe--principal">
     26                        <a href="#" class="on">Tout</a>
     27                        <BOUCLE_groupes_mots_onglets(GROUPES_MOTS) {titre==^[0-9]}{par num titre, titre}>
     28                        <a href="#groupe#ID_GROUPE">#TITRE</a>
     29                        </BOUCLE_groupes_mots_onglets>
     30                </div>
     31        </div>
     32</B_groupes_mots_onglets>
     33
     34
     35<B_groupes_mots>
     36<div id="contenu--glossaire">
     37        <input class="search" placeholder="<:info_rechercher|attribut_html:>" />
     38        <div class="elements">
    2339<BOUCLE_groupes_mots(GROUPES_MOTS) {titre==^[0-9]}{par num titre, titre}>
    24 <div class="groupe_mot" id="groupe#ID_GROUPE">
    25         <h2 class="glossaire__titre">#TITRE</h2>
    26         <div class="glossaire__bloc">
    27                 <BOUCLE_mots(MOTS) {id_groupe} {par num titre, titre}>
    28                 <dl class="glossaire__liste">
    29                 <a href="#mot#ID_MOT" name="mot#ID_MOT" id="mot#ID_MOT"></a>
    30                 <dt class="glossaire__sujet" lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR">#TITRE</dt>
    31        
    32                         <BOUCLE_article_fr(ARTICLES){lang=fr}{id_mot}{par num titre, titre}>
    33                
    34                                 <BOUCLE_article(ARTICLES){traduction}{lang=#ENV{lang}}>
    35                                 <dd class="glossaire__lien"><a href="[(#URL_ARTICLE|ancre_url_propre{#_mots:TITRE})]">#TITRE</a></dd>
    36                                 </BOUCLE_article>
    37                                 <dd class="glossaire__lien" lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR"><em><a href="[(#_article_fr:URL_ARTICLE|ancre_url_propre{#_mots:TITRE})]">#_article_fr:TITRE</a></em></dd>
    38                                 <//B_article>
    39        
    40                         </BOUCLE_article_fr>
     40                <div class="groupe_mot" id="groupe#ID_GROUPE">
     41                        <h2 class="glossaire__titre">#TITRE</h2>
     42                        <div class="glossaire__bloc">
     43                                <BOUCLE_mots(MOTS) {id_groupe} {par num titre, titre}>
     44                                <dl class="glossaire__liste">
     45                                <a href="#mot#ID_MOT" name="mot#ID_MOT" id="mot#ID_MOT"></a>
     46                                <dt class="glossaire__sujet" lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR">#TITRE</dt>
    4147
    42                 </dl>
    43                 </BOUCLE_mots>
     48                                        <BOUCLE_article_fr(ARTICLES){lang=fr}{id_mot}{par num titre, titre}>
     49
     50                                                <BOUCLE_article(ARTICLES){traduction}{lang=#ENV{lang}}>
     51                                                <dd class="glossaire__lien"><a href="[(#URL_ARTICLE|ancre_url_propre{#_mots:TITRE})]">#TITRE</a></dd>
     52                                                </BOUCLE_article>
     53                                                <dd class="glossaire__lien" lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR"><em><a href="[(#_article_fr:URL_ARTICLE|ancre_url_propre{#_mots:TITRE})]">#_article_fr:TITRE</a></em></dd>
     54                                                <//B_article>
     55
     56                                        </BOUCLE_article_fr>
     57
     58                                </dl>
     59                                </BOUCLE_mots>
     60                        </div>
     61                </div>
     62</BOUCLE_groupes_mots>
    4463        </div>
     64        <div class="glossaire__notfound is-hidden"><p><:galactic_spip_net:pas_de_resultat_pour_la_recherche:></p></div>
    4565</div>
    46 </BOUCLE_groupes_mots>
     66</B_groupes_mots>
    4767
    4868
    4969<script type='text/javascript'><!--
    50 $(document).ready(function() {
     70jQuery(function($) {
    5171
    52         var open_titre = null;
    53         $('.glossaire__titre').on('click', function() {
    54                 var bloc = $(this).next('.glossaire__bloc');
    55                 if(bloc.is(':hidden')) {
    56                         $(this).addClass('active');
    57                         if(open_titre) {
    58                                 open_titre.removeClass('active');
    59                                 open_titre.next('.glossaire__bloc').slideUp('fast');
     72        $('.onglets a').on('click', function() {
     73                if (!$(this).hasClass('on')) {
     74                        var lien = $(this).attr('href').substring(1);
     75                        if (lien) {
     76                                $('.groupe_mot').addClass('is-hidden');
     77                                $('#' + lien).removeClass('is-hidden');
     78                        } else {
     79                                $('.groupe_mot').removeClass('is-hidden');
    6080                        }
    61                         bloc.slideDown('fast');
    62                         open_titre = $(this);
    63                 } else {
    64                         $(this).removeClass('active');
    65                         bloc.slideUp('fast');
    66                         open_titre = null;
     81                        $(this).closest('.onglets').find('a').removeClass('on').end().end().addClass('on');
    6782                }
     83                return false;
    6884        });
    6985
     
    7288        $('.glossaire__sujet').on('click', function() {
    7389                var liste = $(this.parentNode);
    74                 if($('.glossaire__lien', liste).is(':hidden')) {
     90                if ($('.glossaire__lien', liste).is(':hidden')) {
    7591                        $(this).addClass('active');
    7692                        if(open_item) {
    7793                                open_item.find('.glossaire__sujet').removeClass('active');
    78                                 $('.glossaire__lien', open_item).slideUp('fast');
     94                                $('.glossaire__lien', open_item).hide();
    7995                        }
    80                         $('.glossaire__lien', liste).slideDown("fast");
     96                        $('.glossaire__lien', liste).show();
    8197                        open_item = liste;
    82                 }
    83                 else {
     98                } else {
    8499                        $(this).removeClass('active');
    85                         $('.glossaire__lien', liste).slideUp('fast');
     100                        $('.glossaire__lien', liste).hide();
    86101                        open_item = null;
    87102                }
     
    89104        });
    90105
     106
     107
     108        // search & highlight
     109        // [(#REM) code origine : https://osvaldas.info/real-time-search-in-javascript ]
     110        function recherche_highlight() {
     111                var $container = $('#contenu--glossaire');
     112                if (!$container.length) return true;
     113
     114                var $input = $container.find('input'),
     115                        $notfound = $container.find('.glossaire__notfound'),
     116                        $items = $container.find('.glossaire__sujet'),
     117                        $item = $(),
     118                        itemsIndexed = [];
     119
     120                $items.each(function () {
     121                        itemsIndexed.push($(this).text().replace(/\s{2,}/g, ' ').toLowerCase());
     122                });
     123
     124                $input.on('keyup', function (e) {
     125                        if (e.keyCode == 13) // enter
     126                        {
     127                                $input.trigger('blur');
     128                                return true;
     129                        }
     130
     131                        $container.find('.glossaire__sujet.active').trigger('click');
     132
     133                        $items.each(function () {
     134                                $item = $(this);
     135                                $item.html($item.html().replace(/<span class="highlight">([^<]+)<\/span>/gi, '$1'));
     136                        });
     137
     138                        var searchVal = $.trim($input.val()).toLowerCase();
     139                        if (searchVal.length) {
     140                                for (var i in itemsIndexed) {
     141                                        $item = $items.eq(i);
     142                                        if (itemsIndexed[i].indexOf(searchVal) != -1) {
     143                                                $item.removeClass('is-hidden')
     144                                                        .html($item.html().replace(new RegExp(searchVal + '(?!([^<]+)?>)', 'gi'), '<span class="highlight">$&</span>'));
     145                                        } else {
     146                                                $item.addClass('is-hidden');
     147                                        }
     148                                }
     149                        } else {
     150                                $items.removeClass('is-hidden');
     151                        }
     152                        /** cacher les groupes vides */
     153                        $container.find('.groupe_mot:not(.is-hidden)').each(function() {
     154                                if ($(this).find('.glossaire__sujet:not(.is-hidden)').length == 0) {
     155                                        $(this).hide();
     156                                } else {
     157                                        $(this).show();
     158                                }
     159                        });
     160                        $notfound.toggleClass('is-hidden', $items.not('.is-hidden').length != 0);
     161                });
     162        }
     163        recherche_highlight();
    91164});
    92165--></script>
     166
     167<style type="text/css">
     168        .highlight {
     169                background-color: #ffeb4b !important;
     170        }
     171        .is-hidden { display: none; }
     172        #contenu--glossaire input.search { float:right; }
     173</style>
  • _galaxie_/galactic/galactic_spip_net/lang/galactic_spip_net_fr.php

    r105541 r106804  
    2323        'maj' => 'mis à jour le ',
    2424
     25        // P
     26        'pas_de_resultat_pour_la_recherche' => 'Pas de résultat pour la recherche.',
     27
    2528        // T
    2629        'trad_bilan' => 'Bilan des traductions',
  • _galaxie_/galactic/galactic_spip_net/scss/galactic_theme.scss

    r106083 r106804  
    145145
    146146.contentNav__rubrique--racine:not(.ouverte) > a > span::before {
    147         border-top-color: #333;
     147        border-top-color: white;
    148148}
    149149
     
    224224// Page Glossaire
    225225
    226 .js .glossaire__bloc,
     226.js .glossaire__bloc {
     227        /*display: none;*/
     228}
    227229.js .glossaire__lien {
    228230        display: none;
    229231}
    230 .glossaire__titre, .glossaire__sujet {
     232.glossaire__sujet {
    231233        position:    relative;
    232234        cursor:      pointer;
     
    256258}
    257259.glossaire__bloc {
    258         margin-left:   1.5em;
     260        margin-left:   0em;
    259261        margin-bottom: 1.5em;
    260262}
    261263.glossaire__lien {
    262264        margin-bottom: 0.2em;
     265        margin-left: 1em;
    263266}
    264267
     
    280283        padding: 0.2em 1em;
    281284}
    282  
     285
     286@import "scss/theme/onglets";
Note: See TracChangeset for help on using the changeset viewer.