Changeset 108236 in spip-zone


Ignore:
Timestamp:
Dec 29, 2017, 12:17:17 PM (18 months ago)
Author:
arnaud.berard@…
Message:
  • ajout d'un selecteur générique webfont qui retourne la liste des font variantes sous la forme {family:variante} depuis l'index google

Configuration :

  • ajout du choix de web font depuis la configuration : on peut donc grace au selecteur parcourir l'index de fonts google et les ajouter
  • les webfonts sélectionnées en config sont ajoutées a la pipeline fonts_list
  • sur la page de configuration on affiche en dessous la liste des webfonts actuellements dans le flux de la pipeline, avec possibilité de
  • spécifier le texte de preview,
  • la taille de police,
  • si on veux afficher ou non la previsu (ralentit le chargement de la page suivant le nombre de requètes)
Location:
_plugins_/webfonts/branches/webfonts2
Files:
6 added
10 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/webfonts/branches/webfonts2/README.md

    r108220 r108236  
    11# WebFonts 2
    22
    3 Le chargement de webfonts peut impacter sur le rendu des pages, sur l'accessibilité au contenus, sur les performances de votre page.
     3Le chargement de webfonts peut impacter sur le rendu des pages,
     4sur l'accessibilité au contenus, sur les performances de votre page.
    45Il conviens donc d'en être conscient et de les utiliser en connaissance de cause.
    56
    6 Outre les considérations d'ordre esthétique et typographique, il est recommandé de ne pas utiliser plus de deux ou trois variantes de fonts, afin de ne pas détériorer les performances de chargement de vos pages.
    7 
    8 `@font-face`
     7Outre les considérations d'ordre esthétique et typographique,
     8il est recommandé de ne pas utiliser plus de deux ou trois variantes de fonts,
     9afin de ne pas détériorer les performances de chargement de vos pages.
     10
     11Le plugin inssert dans le head et en tête des autres fichiers css
     12les balise link ou style nécessaires. La requète vers google font ne necessite pas
     13d'accès a l'api.
     14
     15
     16
     17La rêgle css `@font-face` :
    918https://developer.mozilla.org/fr/docs/Web/CSS/@font-face
     19
    1020
    1121```css
     
    1929}
    2030```
     31
     32
    2133## Techniques de chargement de fonts :
    2234
     
    3648## Fonctionalitées
    3749
    38 * Proposer plusieurs techniques d'intégration chargement de webfont
     50* insertion auto
     51
     52##
     53
    3954* Ajoute une pipeline pour que les plugins theme puisse activer leur insertions
     55
     56
    4057
    4158En cours :
     
    4966## Configuration:
    5067
     68### GoogleFonts API Key
     69
    5170Pour pouvoir afficher les fonts via l'api GoogleFont, il est nécessaire d'avoir
    5271préalablement récupéré une clef d'accès aux API Google et sélectionné GoogleFont dans
     
    6079
    6180ou via la configuration du plugin.
     81
     82
     83### Méthode d'insertion
     84
     85Propose plusieurs techniques d'intégration/chargement de webfont
     86
     87* insertion standard via la balise `<link>`
     88* insertion @import via une balise `<style>`
     89
    6290
    6391## Utilisation
     
    7199Explication sur les subsets : https://developers.google.com/fonts/docs/getting_started#Subsets
    72100Navigateurs supportant `unicode-range : https://caniuse.com/#feat=font-unicode-range
     101
     102
     103### Depuis un squelette
     104
     105via le fichier `mes_options.php`
     106
     107```php
     108// Exemple d'ajout dans le pipeline "fonts_list" :
     109$GLOBALS['spip_pipeline']['fonts_list'] .= "|skel_webfonts";
     110 
     111function skel_webfonts($fonts) {
     112        $fonts = array(
     113                '0'=> array(
     114                        'family'=> 'Open Sans',
     115                        'variants'=> array('300','300italic','regular','italic','600')
     116                ),
     117                '1'=> array(
     118                        'family'=> 'Montserrat',
     119                        'variants'=> array('regular','800')
     120                )
     121        );
     122    return $fonts;
     123}
     124```
    73125
    74126### Depuis un plugin
  • _plugins_/webfonts/branches/webfonts2/formulaires/configurer_webfonts2.html

    r108227 r108236  
    11[(#REM)<!--
    22
    3 Squelette #FORMULAIRE_CONFIGURER_WEBFONTS
    4 (c) 2010 Cedric Morin
    5 Distribue sous licence GPL
     3
    64
    75-->]
     6<style>
     7input#webfonts,
     8input#googlefonts_api_key{
     9        width: 100%;
     10        font-size: 1em;
     11}
     12</style>
    813<div class="formulaire_spip formulaire_editer formulaire_#FORM">
    914        [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
     
    1621                        #ACTION_FORMULAIRE{#ENV{action},#FORM}
    1722                        <fieldset>
    18                                 <legend></legend>
    19                                 <div class="editer-groupe">
     23                                <legend>Configuration</legend>
     24                                <div class="editer-group">
    2025                                          <div class="editer googlefonts_api_key obligatoire[ (#ENV**{erreurs}|table_valeur{googlefonts_api}|oui)erreur]">
    2126                                                  <label for="nom"><:webfonts2:label_googlefonts_api:></label>[
     
    3540                                </div>
    3641                        </fieldset>
     42                        <fieldset>
     43                                <legend>Webfonts</legend>
     44                                <div class="editer-group">
     45                                        <div class="editer">
     46                                                <label for="webfonts">webfonts</label>
     47                                                <input name="webfonts"
     48                                                           data-selecteur="webfonts"
     49                                                           multiple="multiple"
     50                                                           id="webfonts"
     51                                                           type="text" value="#ENV{webfonts}"/>
     52                                        </div>
     53                                </div>
     54                        </fieldset>
    3755                        <!--extra-->
    3856                        <input type="hidden" name="_meta_casier" value="webfonts2"/>
     
    4361        </form>]
    4462</div>
     63
     64<script>
     65function split( val ) {
     66 return val.split( /,\s*/ );
     67}
     68
     69jQuery(function($){
     70        var input = $('#webfonts');
     71        $(input).autocomplete({
     72                select: function(event,ui){
     73                        var terms = split( this.value );
     74                        // remove the current input
     75                        terms.pop();
     76                        // add the selected item
     77                        terms.push( ui.item.value );
     78                        // add placeholder to get the comma-and-space at the end
     79                        terms.push( "" );
     80                        this.value = terms.join( ", " );
     81                        return false;
     82                }
     83        });
     84});
     85
     86
     87</script>
  • _plugins_/webfonts/branches/webfonts2/formulaires/configurer_webfonts2.php

    r108227 r108236  
    99function formulaires_configurer_webfonts2_charger_dist(){
    1010        $valeurs = array(
    11                 'methode_insert'=> lire_config('webfonts2/methode_insert')
     11                'methode_insert'=> lire_config('webfonts2/methode_insert'),
     12                'webfonts'=> lire_config('webfonts2/webfonts'),
    1213        );
    1314        if(!defined('_GOOGLE_API_KEY') OR _GOOGLE_API_KEY == false){
     
    2122
    2223
    23 
    2424?>
  • _plugins_/webfonts/branches/webfonts2/formulaires/selectionner_webfonts.html

    r108226 r108236  
    9191
    9292<script>
    93 /**
    94 @function autoResize
    95 @desc Resize an iframe acoording to content
    96 @author Mist. GraphX mistergraphx@gmail.com
    97 @param {int} id block id to be resized
    98 @return String
    99 */
    100 function autoResize(id){
    101     var newheight;
    102     var newwidth;
    10393
    104     if(document.getElementById){
    105         newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
    106         newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    107     }
    108     document.getElementById(id).style.height= (newheight) + "px";
    109 }
    11094
    11195jQuery(function($){
  • _plugins_/webfonts/branches/webfonts2/lang/webfonts2_fr.php

    r98097 r108236  
    1010
    1111        // C
    12         'cfg_exemple' => 'Exemple',
    13         'cfg_exemple_explication' => 'Explication de cet exemple',
    14         'cfg_titre_parametrages' => 'Paramétrages',
     12        'cfg_titre_configurer_webfonts2'        => 'Configuration des webfonts',
     13
     14       
     15        // E
     16        'explication_googlefonts_api'   => 'N\'est nécessaire que si vous souhaitez utiliser le formulaire de recherche',
     17
     18        // L
     19        'label_googlefonts_api' => 'Google Font API Key',
     20        'label_methode_insert'  => 'Méthode d\'insertion des polices',
     21
    1522
    1623        // T
  • _plugins_/webfonts/branches/webfonts2/paquet.xml

    r108226 r108236  
    1818        <pipeline nom="autoriser" inclure="webfonts2_autorisations.php" />
    1919        <pipeline nom="insert_head_css" inclure="webfonts2_pipelines.php" />
     20        <pipeline nom="header_prive" inclure="webfonts2_pipelines.php" />
     21       
    2022        <pipeline nom="fonts_list" inclure="webfonts2_pipelines.php" />
    2123       
    2224        <necessite nom="php:curl" />
    2325        <necessite nom="spip_bonux" compatibilite="[3.4.4;["/>
     26        <utilise nom="selecteurgenerique" compatibilite="[1.1.0;]" />
    2427       
    2528        <menu nom="webfonts" titre="webfonts2:webfonts2_titre" parent="menu_squelette" icone="images/webfonts2-16.png" action="webfonts" />
    26 
    2729</paquet>
  • _plugins_/webfonts/branches/webfonts2/prive/squelettes/contenu/configurer_webfonts2.html

    r98097 r108236  
    11[(#AUTORISER{configurer,_webfonts2}|sinon_interdire_acces)]
    22
    3 <h1 class="grostitre"><:webfonts2:titre_page_configurer_webfonts2:></h1>
     3<h1 class="grostitre"><:webfonts2:cfg_titre_configurer_webfonts2:></h1>
    44
    55<div class="ajax">
    66        #FORMULAIRE_CONFIGURER_WEBFONTS2
    77</div>
     8
     9
     10<h2>Liste des webfonts inssérées via la pipeline</h2>
     11
     12<form action="#SELF" class="formulaires_spip preview_params">
     13        <div class="editer-group">
     14                <div class="editer">
     15                                <label for="preview_text">Texte pour la preview</label>
     16                                <input type="text" id="preview_text" name="preview_text" value='#ENV{preview_text, Grumpy wizards make toxic brew for the evil Queen and Jack.}'>
     17
     18                        </div>
     19                <div class="editer">
     20                        <label for="preview_font_size">preview_font_size</label>
     21                        <p class="explication">Une valeur en pixel, em, rem</p>
     22                        <input type="text" name="preview_font_size" id="preview_font_size"
     23                                   value="#ENV{preview_font_size,16px}"/>
     24                                               
     25                </div>
     26        </div>
     27        <div class="editer-group">
     28                        <div class="editer">
     29                                <div class="choix">
     30                                        <input type='checkbox' class="checkbox" name='preview' value='oui' id='preview' />
     31                                        <label for='preview'>Afficher la preview</label>
     32                                </div>
     33                                <div class="choix">
     34                                        <input type='checkbox' class="checkbox" name='infos' value='oui' id='infos'/>
     35                                        <label for='infos'>Afficher les infos</label>
     36                                </div>
     37                        </div>
     38                </div>
     39        <p class='boutons'>
     40        <input type='submit' class='submit' value='Recharger' />
     41    </p>
     42</form>
     43<INCLURE{fond=inclure/font_list,ajax=fonts,env} />
     44<script>
     45jQuery(function($){
     46        $('form.preview_params').on('submit', function(e){
     47                var previewTxt = $('#preview_text').val();
     48                var previewFontSize = $('#preview_font_size').val();
     49                var preview = $('.preview_params #preview');
     50                var infos = $('.preview_params #infos');
     51               
     52                //console.log(infos[0].checked);
     53               
     54                        ajaxReload('fonts', {
     55                                args:{
     56                                        preview_text: previewTxt,
     57                                        preview_font_size: previewFontSize,
     58                                        infos: (infos[0].checked ? 'oui' : 'non'),
     59                                        preview: (preview[0].checked ? 'oui' : 'non')
     60                                },
     61                                history:false
     62                        });
     63                e.preventDefault();
     64        });
     65       
     66});
     67</script>
  • _plugins_/webfonts/branches/webfonts2/prive/squelettes/contenu/webfonts.html

    r108224 r108236  
    11[(#REM)<!--
    22
    3 Squelette Webfonts
    4 (c) 2010 Cedric MORIN
     3Webfonts2
    54Distribue sous licence GPL
    65
     
    98
    109-->]
    11 <style>
    12 .typelist_block_preview {
    13                
    14 }
    15 
    16 .webfont_preview {
    17         width: 100%;
    18         height:auto;
    19         overflow: auto;
    20        
    21         margin-bottom: 1em;
    22         border-top: 1px solid silver;
    23         border-bottom: 1px solid silver;
    24 }
    25 </style>
    26 
    2710[<div class="ajax">(#FORMULAIRE_SELECTIONNER_WEBFONTS)</div>]
    2811
  • _plugins_/webfonts/branches/webfonts2/webfonts2_fonctions.php

    r108221 r108236  
    99        return;
    1010}
     11
    1112/**
    1213 * googlefont_request
  • _plugins_/webfonts/branches/webfonts2/webfonts2_pipelines.php

    r108227 r108236  
    1414*/
    1515function webfonts2_fonts_list($fonts){
    16         $fonts = array(
    17                 '0'=> array(
    18                         'family'=> 'Open Sans',
    19                         'variants'=> array('300','300italic','regular','italic','600')
    20                 ),
    21                 '1'=> array(
    22                         'family'=> 'Roboto Condensed',
    23                         'variants'=> array('700','800')
    24                 )
    25         );
     16        $webfonts = lire_config('webfonts2/webfonts');
     17        // enlever la dernière virgule
     18        $webfonts = explode(',',rtrim($webfonts,', '));
     19       
     20        foreach($webfonts as $font){
     21                $set =  explode(':',$font);
     22                $fonts[] = ['family'=> trim($set[0]),'variants'=> [ $set[1] ]];
     23        }
    2624       
    2725        return $fonts;
    2826}
    2927
     28function webfonts2_header_prive($flux){
     29       
     30    $flux .= '<script src="'._DIR_PLUGIN_WEBFONTS2.'javascript/webfonts2.js'.'" type="text/javascript"></script>';
     31    return $flux;
     32
     33}
    3034 /**
    3135  * webfonts_insert_head_css
     
    3640                $webfonts = lister_webfonts();         
    3741                if(is_array($webfonts)){
    38                         (defined('_FONTS_SUBSETS')) ? $subsets= _FONTS_SUBSETS : $subsets='' ;
     42                        (defined('_FONTS_SUBSETS')) ? $subsets = _FONTS_SUBSETS : $subsets='' ;
    3943                        $font_request = googlefont_request($webfonts,$subsets);
    4044                        if (strlen($font_request)) {
    41                                 $methode = lire_config('webfonts2/methode_insert');
     45                                $methode = lire_config('webfonts2');
    4246                                if($methode == 'at_import'){
    4347                                        $code = "<style>@import url('$font_request');</style>";
Note: See TracChangeset for help on using the changeset viewer.