Changeset 114892 in spip-zone


Ignore:
Timestamp:
Apr 10, 2019, 2:05:40 PM (3 months ago)
Author:
cedric@…
Message:

Integration d'un systeme d'icone lightweight (sprite SVG) et accessible (texte alternatif aria possible) base sur https://danklammer.com/bytesize-icons/
#ICON{search,icon-lg,Rechercher}

Le jeu d'icone est personalisable, il suffit
define('_ICON_SPRITE_SVG_FILE', 'chemin vers le sprite svg');
et de definir sa fonction filtre_icone_ancre_from_name($name){} pour faire correspondre les ancres dans le sprite avec les petits noms d'icone (quitte a renommer/etendre)

+ une feuille de style icons.css qu'il peut etre utile de personaliser si on change le jeu d'icone

(BootStrap? ayant change puis abandonne la famille d'icones fournie par defaut, on trace donc notre route)

Location:
_plugins_/z-core/trunk
Files:
107 added
1 edited
2 copied

Legend:

Unmodified
Added
Removed
  • _plugins_/z-core/trunk/demo/content/icons.html

    r114652 r114892  
    1         <h1>Boites</h1>
    2                 #BOITE_OUVRIR{'<h1>mod </h1>'}
    3                         <p>box is the <b>basic</b> container, all other containers inherit from this one. This is the high performance container that should be used unless you specifically need another type of container.</p>
    4                         <ul class="simpleList">
    5                                 <li>One tiny image</li>
    6                                 <li>Expands to any height or width</li>
    7                                 <li>Compatible with any content</li>
    8                                 <li>Choose for any container object that doesn't require outside transparency or complex borders.</li>
    9                         </ul>
    10                 #BOITE_FERMER
     1<style>
     2#INCLURE{css/icons.css}
     3</style>
    114
    12         <div class="line">
    13                 <h2>Habillage des boites</h2>
    14                 <h3>Contour</h3>
    15                 #BOITE_OUVRIR{'<h3>simple</h3>','simple'}
    16                         <p>Contenu</p>
    17                 #BOITE_FERMER
     5        <h1>Icons</h1>
    186
    19                 #BOITE_OUVRIR{'<h3>info</h3>','info'}
    20                         <p>Contenu</p>
    21                 #BOITE_FERMER
     7        <p>
     8                <a href="https://danklammer.com/bytesize-icons/">https://danklammer.com/bytesize-icons/</a>
     9                <br />
     10                <code>\#ICON{name,class,alt}</code>
     11                <br />
     12                <code>\#ICON{search,icon-lg,Rechercher}</code>
     13        </p>
     14        #SET{icons,#REM|lister_icones_svg}
    2215
    23                 #BOITE_OUVRIR{'<h3>note</h3>','note'}
    24                         <p>Contenu</p>
    25                 #BOITE_FERMER
     16        <h2>Default</h2>
     17        <p>
     18                <BOUCLE_i1(POUR){tableau #GET{icons}}>
     19                #ICON{#VALEUR,'',#VALEUR}
     20                </BOUCLE_i1>
     21        </p>
    2622
    27                 #BOITE_OUVRIR{'<h3>important</h3>','important'}
    28                         <p>Contenu</p>
    29                 #BOITE_FERMER
     23        <h2>Large <code>.icon-lg</code></h2>
     24        <p>
     25                <BOUCLE_i2(POUR){tableau #GET{icons}}>
     26                #ICON{#VALEUR,icon-lg,#VALEUR}
     27                </BOUCLE_i2>
     28        </p>
    3029
    31                 <h3>Fonds</h3>
    32                 #BOITE_OUVRIR{'<h3>basic highlight</h3>','basic highlight'}
    33                         <p>Combiner la classe basic avec une classe de fond</p>
    34                 #BOITE_FERMER
     30        <h2>Small <code>.icon-sm</code></h2>
     31        <p>
     32                <BOUCLE_i3(POUR){tableau #GET{icons}}>
     33                #ICON{#VALEUR,icon-sm,#VALEUR}
     34                </BOUCLE_i3>
     35        </p>
    3536
    36                 #BOITE_OUVRIR{'<h3>basic inverse</h3>','basic inverse'}
    37                         <p>Combiner la classe basic avec une classe de fond</p>
    38                 #BOITE_FERMER
     37        <h2>Styles</h2>
     38        <h3>Rounded (default)</h3>
     39        <p style="font-size: 4em;">
     40                <BOUCLE_i4(POUR){tableau #GET{icons}}{0,6}>
     41                #ICON{#VALEUR,icon-lg,#VALEUR}
     42                </BOUCLE_i4>
     43        </p>
    3944
    40                 <h3>Erreurs, succes, avertissement</h3>
     45        <h3>Bevel <code>.icon-bevel</code></h3>
     46        <p style="font-size: 4em;">
     47                <BOUCLE_i5(POUR){tableau #GET{icons}}{0,6}>
     48                #ICON{#VALEUR,icon-lg icon-bevel,#VALEUR}
     49                </BOUCLE_i5>
     50        </p>
    4151
    42                 #BOITE_OUVRIR{'<h3>success</h3>','success'}
    43                         <p>Contenu</p>
    44                 #BOITE_FERMER
    45                 #BOITE_OUVRIR{'','success'}
    46                         <p>Contenu</p>
    47                 #BOITE_FERMER
     52        <h3>Miter <code>.icon-miter</code></h3>
     53        <p style="font-size: 4em;">
     54                <BOUCLE_i6(POUR){tableau #GET{icons}}{0,6}>
     55                #ICON{#VALEUR,icon-lg icon-miter,#VALEUR}
     56                </BOUCLE_i6>
     57        </p>
    4858
    49                 #BOITE_OUVRIR{'<h3>notice</h3>','notice'}
    50                         <p>Contenu</p>
    51                 #BOITE_FERMER
    52                 #BOITE_OUVRIR{'','notice'}
    53                         <p>Contenu</p>
    54                 #BOITE_FERMER
     59        <h2>Thickness</h2>
    5560
    56                 #BOITE_OUVRIR{'<h3>error</h3>','error'}
    57                         <p>Contenu</p>
    58                 #BOITE_FERMER
    59                 #BOITE_OUVRIR{'','error'}
    60                         <p>Contenu</p>
    61                 #BOITE_FERMER
    62 
    63         </div>
    64 
    65         <div class="line">
    66                 <h2>Header de boite</h2>
    67                 #BOITE_OUVRIR{'<h3>simple/section</h3>','simple','section'}
    68                         <p>Body</p>
    69                 #BOITE_FERMER
    70                 #BOITE_OUVRIR{'<h3>simple/bam</h3>','simple','bam'}
    71                         <p>Body</p>
    72                 #BOITE_FERMER
    73                 #BOITE_OUVRIR{'<h3>basic/topper</h3>','basic inverse','topper'}
    74                         <p>Body</p>
    75                 #BOITE_FERMER
    76 
    77                 <h2>Block Footers</h2>
    78                 <div class="ft act">button here</div>
    79         </div>
    80        
     61        <BOUCLE_g(POUR){tableau #LISTE{ulight,thin,light,regular,medium,bold,heavy}}>
     62<h3><code>[.icon-(#_g:VALEUR)]</code></h3>
     63        <p>
     64                <BOUCLE_i7(POUR){tableau #GET{icons}}{0,12}>
     65                        [(#ICON{#_i7:VALEUR,[icon-lg icon-(#_g:VALEUR)],#_i7:#VALEUR})]
     66                </BOUCLE_i7>
     67        </p>
     68        </BOUCLE_g>
  • _plugins_/z-core/trunk/demo/icons.html

    r114652 r114892  
    77]
    88<?php _chemin(_DIR_PLUGIN_Z.'demo/'); ?>
    9 <INCLURE{fond=page,composition=box}>
     9<INCLURE{fond=structure,env,type-page=icons} />
  • _plugins_/z-core/trunk/zcore_options.php

    r108571 r114892  
    131131}
    132132
     133/**
     134 * #ICON{search,icon-sm,Rechercher}
     135 * @param $p
     136 * @return mixed
     137 */
     138function balise_ICON_dist($p) {
     139        $_name = interprete_argument_balise(1, $p);
     140        if (!$_name) {
     141                $msg = array('zbug_balise_sans_argument', array('balise' => ' ICON'));
     142                erreur_squelette($msg, $p);
     143        }
     144        else {
     145                $_class = interprete_argument_balise(2, $p);
     146                if (!$_class) {
     147                        $_class = "''";
     148                }
     149                $_alt = interprete_argument_balise(3, $p);
     150                if (!$_alt) {
     151                        $_alt = "''";
     152                }
     153                $p->code = "afficher_icone_svg($_name, $_class, $_alt)";
     154        }
     155
     156        $p->interdire_scripts = false;
     157        return $p;
     158}
     159
     160function afficher_icone_svg($name, $class = '', $alt = '') {
     161        static $sprite_file;
     162        if (is_null($sprite_file)) {
     163                if (!defined('_ICON_SPRITE_SVG_FILE')) {
     164                        define('_ICON_SPRITE_SVG_FILE', "css/bytesize/bytesize-symbols.min.svg");
     165                }
     166                $sprite_file = timestamp(find_in_path(_ICON_SPRITE_SVG_FILE));
     167        }
     168        if (!$name) {
     169                return $sprite_file;
     170        }
     171        if ($sprite_file) {
     172                $name = preg_replace(",[^\w\-],", "", $name);
     173                /*
     174                        <svg aria-labelledby="my-icon-title" role="img">
     175                    <title id="my-icon-title">Texte alternatif</title>
     176                    <use xlink:href="bytesize-symbols.min.svg#search"></use>
     177            </svg>
     178                        <svg aria-hidden="true" role="img">
     179                    <use xlink:href="bytesize-symbols.min.svg#search"></use>
     180                        </svg>
     181                 */
     182                // width="0" height="0" -> rien ne s'affiche si on a pas la CSS icons.css
     183                $svg = "<svg role=\"img\" width=\"0\" height=\"0\"";
     184                if ($alt) {
     185                        $id = "icon-title-" . substr(md5("$name:$alt:$sprite_file"),0,4);
     186                        $svg .= " aria-labelledby=\"$id\"><title id=\"$id\">" . entites_html($alt)."</title>";
     187                }
     188                else {
     189                        $svg .= ">";
     190                }
     191                $icone_ancre_from_name = chercher_filtre("icone_ancre_from_name");
     192                $ancre = $icone_ancre_from_name($name);
     193                $svg .= "<use xlink:href=\"$sprite_file#$ancre\"></use>";
     194                $svg .= "</svg>";
     195
     196                if ($class = trim($class)) {
     197                        $class = preg_replace(",[^\w\s\-],", "", $class);
     198                }
     199                return "<i class=\"icon" . ($class ? " $class" : "") . "\">$svg</i> ";
     200        }
     201        return "";
     202}
     203
     204function filtre_icone_ancre_from_name_dist($name) {
     205        return "i-$name";
     206}
     207
     208function lister_icones_svg() {
     209        $sprite_file = afficher_icone_svg('');
     210        if ($sprite_file
     211                and $sprite_file = supprimer_timestamp($sprite_file)
     212          and $sprite = file_get_contents($sprite_file)
     213          and preg_match_all(',id="i-([\w\-]+)",', $sprite, $matches, PREG_PATTERN_ORDER)) {
     214                $icons = $matches[1];
     215                return $icons;
     216        }
     217        return array();
     218}
     219
     220
Note: See TracChangeset for help on using the changeset viewer.