source: spip-zone/_plugins_/webfonts/branches/webfonts2/prive/squelettes/contenu/webfonts.html @ 98097

Last change on this file since 98097 was 98097, checked in by arnaud.berard@…, 4 years ago

Premier jet de la refonte

  • la google api key est definissable depuis le fichier mes_options ou depuis un plugin, pour pouvoir être partageable entre plusieurs plugins proposant des services différents (youtube, ...)
  • la page webfont reproduit le formulaire de filtrage et l'affichage de GoogleFont?, via une boucle data : mais ne permet pas encore de sélctionner les webfonts utilisables
  • une page utilisable en inclure ou en popup s'occupe de la preview Typo
  • Property svn:eol-style set to native
File size: 3.6 KB
Line 
1[(#REM)<!--
2
3  Squelette Webfonts
4  (c) 2010 Cedric MORIN
5  Distribue sous licence GPL
6 
7 
8  https://developers.google.com/fonts/docs/getting_started#specifying_font_families_and_styles_in_a_stylesheet_url
9
10-->]
11<style>
12.typelist_block_preview{
13       
14}
15        .webfont_preview {
16                width: 100%;
17                height:auto;
18                overflow: auto;
19               
20                margin-bottom: 1em;
21                border-top: 1px solid silver;
22                border-bottom: 1px solid silver;
23        }
24</style>
25
26<form action="[(#SELF)]" method="GET" id="filtrer">
27        [(#SELF|form_hidden)]
28        <label for="font_search">Rechercher une typo</label>
29        <input name="font_search" type="text" value="#ENV{font_search}">
30        <label for="sort">Trier par</label>
31        <select name="sort" id="sort">
32          <option value="popularity"[(#ENV{sort}|=={popularity}|?{' selected="selected"',''})]>Popularité</option>
33          <option value="alpha"[(#ENV{sort}|=={alpha}|?{' selected="selected"',''})]>Alphabétique</option>
34        </select>
35        <label for="preview_text">Texte pour la preview</label>
36        <input type="text" name="preview_text" value='#ENV{preview_text, Grumpy wizards make toxic brew for the evil Queen and Jack.}'>
37        <label for="category">Catégories</label>
38        <select name="category" id="category">
39                <option value=""> Choisissez une catégorie</option>
40                <option value="serif"[(#ENV{category}|=={serif}|?{'selected="selected"',''})]>Sérif</option>
41                <option value="sans-serif"[(#ENV{category}|=={sans-serif}|?{'selected="selected"',''})]>Sans sérif</option>
42                <option value="display"[(#ENV{category}|=={display}|?{'selected="selected"',''})]>Display</option>
43                <option value="handwriting"[(#ENV{category}|=={handwriting}|?{'selected="selected"',''})]>Handwritting</option>
44                <option value="monospace"[(#ENV{category}|=={monospace}|?{'selected="selected"',''})]>Monospace</option>
45        </select>
46        <input type="submit">
47</form>
48
49[(#ENV|print_r{1})]
50
51
52
53
54#SET{webfont_api_key, #EVAL{_GOOGLE_API_KEY}}
55#SET{webfonts,#ARRAY}
56<BOUCLE_listWebFont(DATA){source json, https://www.googleapis.com/webfonts/v1/webfonts?key=#GET{webfont_api_key}&sort=#ENV{sort,popularity}}>
57[(#SET{webfonts,#GET{webfonts}|push{#VALEUR}})]
58</BOUCLE_listWebFont>
59
60<div id="google_webfont_list" class="ajax typelist">
61<BOUCLE_fontsList(DATA){source table, #GET{webfonts}}>
62        <div class="typelist_block">
63    <BOUCLE_fontInfos(DATA){source table, #VALEUR}{category ?== #ENV{category}}{pagination 10}>
64                #SET{font-family,#VALEUR{family}}
65                <div class="typelist_block_title">
66                        <h2>[(#VALEUR{family})]</h2>
67                </div>
68                <div class="typelist_block_infos">
69                        <strong>Categorie : </strong>[(#VALEUR{category})]<br>
70                        <h3>Subsets :</h3>
71                        <ul>
72                                <BOUCLE_listFiles(POUR){tableau #VALEUR{subsets}}>
73                                        <li>[(#VALEUR)]</li>
74                                </BOUCLE_listFiles>
75                        </ul>
76                        <strong>Variantes :</strong>
77                        <ul>
78                                <BOUCLE_listVariants(POUR){tableau #VALEUR{variants}}>
79                                        <li>
80                                                <input type="checkbox" name="#GET{font-family}:[(#VALEUR)]" value="#GET{font-family}:[(#VALEUR)]">[(#VALEUR)]
81                                                <div class="typelist_block_preview">
82                                                        <h3>Preview</h3>
83                                                        #SET{preview_font-size, 48px}
84                                                        #SET{preview_text,#ENV{preview_text}}
85                                                        #SET{font-categorie,#VALEUR{category}}
86                                                        <iframe class="webfont_preview ajax" src="[(#URL_PAGE{webfont_preview,font-family=#GET{font-family}}
87                                                                                                                                                |parametre_url{font-categorie,#GET{font-categorie}}
88                                                                                                                                                |parametre_url{font-variant,#VALEUR}
89                                                                                                                                                |parametre_url{preview_font-size, #GET{preview_font-size}}
90                                                                                                                                                |parametre_url{preview_text,#GET{preview_text}})]"></iframe>
91                                                </div>                                 
92                                        </li>
93                                </BOUCLE_listVariants>
94                        </ul>
95                </div>
96
97        </BOUCLE_fontInfos>
98        #PAGINATION
99        </B_fontInfos>
100        </div>
101</BOUCLE_fontsList>
102</div>
Note: See TracBrowser for help on using the repository browser.