var Phenix = () => {

Comme beaucoup de choses en développement web, les touch-icons¹ c’est le bordel. Des formats différents en fonction des écrans, en fonction des résolutions d’écrans, des versions d’Android en vrac, et des développeurs perdus au milieu.

Bref, voici un petit squelette SPIP basé sur le travail Mathias Bynens.

L’idée est de placer un fichier apple-touch-icon.png dans le dossier squelettes/ de SPIP pour le décliner automatiquement dans toutes les autres versions. Le fichier ne sera pas agrandi donc il vaut mieux utiliser un fichier de minimum 192px.

Dans certains cas, la gestion automatique n’est pas idéale. On peut alors placer un fichier apple-touch-icon-VALEURxVALEUR.png pour remplacer celui générer automatiquement. Par exemple, si je veux remplacer le fichier 72px: apple-touch-icon-72x72.png

[(#REM)
  Favicon touch icon.
  Voir https://mathiasbynens.be/notes/touch-icons

  Ce fichier va générer les favicons pour un maximum de device.
  Il n'est pas inutile de passer ce squelette dans le filtre supprimer_ligne_vide (https://gist.github.com/phenix-factory/1dc0195bd655a654b9ef)
]

[(#REM)
  Tableau des tailles, en px
  Pour le moment, ils n'ont pas encore pondu autre chose que des icônes carrées. On espère que cela ne change pas.
]

[(#SET{taille_device,
[(#ARRAY{
192,192,
180,180,
152,152,
144,144,
120,120,
114,114,
76,76,
72,72,
60,60,
57,57})]})]

<BOUCLE_generateur_touch_icone(DATA){source tableau, #GET{taille_device}}>
  [(#REM)
    L'utilisateur fourni un fichier spécifique, on affiche directement
  ]

  [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|oui)
    [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png})">]
  ]

  [(#REM)
    Pas de fichier spécifique, on va créer l’icône si le fichier générique le permet.
  ]
  [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|non
    |et{#CHEMIN{apple-touch-icon.png}|hauteur|>={#VALEUR}|oui}
    |et{#CHEMIN{apple-touch-icon.png}|largeur|>={#VALEUR}|oui})
    [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon.png}|image_reduire{#VALEUR,#VALEUR}|extraire_attribut{src})">]
    ]
</BOUCLE_generateur_touch_icone>

Un Gist est disponible pour ce code.

Personne ne semble relire le code avant de merge…

Merci Dhoko !

Love. pic.twitter.com/cBzAwC3CCl

— dhoko (@dhoko_) August 25, 2015

SPIP dispose de quelques “schémas” d’URL par défaut. Dans la majorité des cas, ils conviennent aux goûts de chacun.

Cependant, il peut arriver que l’on ait envie de modifier la façon dans les URLs sont créées. Dans mon cas, j’avais envie de changer les URLs Arborescentes qui créée par défaut un schéma objet/titre.

Cela ne me convenait pas dans le cas des auteurs, auteur/nom_auteur ne signifiait rien, je voulais un visiteur/nom_visiteur.

Ce qu’il faut savoir

SPIP possède une table dans laquelle il place toutes les urls du site. Sans surprise, elle a pour nom… spip_urls. Une fois qu’une url est ajoutée dans cette base, elle n’en bougera plus. Même si on change de schéma. Si l’on change le schéma des URLs, les anciennes continueront de fonctionner, en plus des nouvelles.

C’est l’un des rares cas où vider le cache ne suffit pas pour faire des tests, il faut aussi supprimer les URLs de la table. Je vous déconseille fortement de faire cela avec un site en production…

Utiliser les bons pipelines

Il existe 2 pipelines pour modifier les URLs. Toutes ne sont pas modifiables:

• propres_creer_chaine_url pour les URLs Propres, les URLs Propres+.html et les URLs Libres.
• arbo_creer_chaine_url pour les URLs Arborescentes.

Ces pipelines retournent un tableau du style:

<?php
$flux = array(
    "data" => "article/test",
    "objet" => array(
            "url" => null,
            "date" => null,
            "id_parent" => null,
            "perma" => null,
            "titre" => "test",
            "lang" => null,
            "parent" => '0',
            "type_parent" => '',
            "type" => "article",
            "id_objet" => 24
        )
);

L’url se trouve dans la cellule data, il suffit de la modifier ! La cellule objet contient des informations que l’on peut exploiter.

Exemple

Par défaut, les url arbo créent une url auteur/nom_de_l’auteur. Or, j’ai envie de changer et d’utiliser “visiteur” à la place de “auteur’, voici à quoi devrait ressembler mon pipeline:

<?php
/**
 * On bricole les URLs dans ce pipeline
 *
 * @param mixed $flux
 * @access public
 * @return mixed
 */
function prefix_arbo_creer_chaine_url($flux) {
    // On chope les auteurs pour créer des urls "visiteur"
    if ($flux['objet']['type'] == 'auteur') {
        // On inclut les fonctions d'édition d'url par sécurité
        include_spip('action/editer_url');

        // Créer une URL "visiteur"
        $flux['data'] = 'visiteur/'.url_nettoyer($flux['objet']['titre'],_URLS_ARBO_MAX,_URLS_ARBO_MIN,'-',_url_arbo_minuscules?'strtolower':'');
    }

    return $flux;
}

J’ai repris la fonction url_nettoyer telle qu’elle était utilisée par le core.

Les boucles SPIP possèdent un mécanisme de recherche particulièrement utile. On utilise le critère recherche.

Cela permet de faire des recherches sur n’importe quel objet SPIP et d’avoir des résultats un peu plus précis qu’un simple LIKE sur une requête SQL.

J’ai découvert qu’on pouvait également utiliser ce système en dehors d’une boucle, avec un peu de PHP :

<?php
$prepare_recherche = charger_fonction('prepare_recherche', 'inc');
list($rech_select, $rech_where) = $prepare_recherche(
  _request('recherche'), // Le terme recherché
  $objet // L'objet dans lequel on recherche
);

$rech_where contient un WHERE sql qui peut être utilisé dans une requête. Il ne faut juste pas oublie la jointure sur la table spip_resultats:

<?php
// On fait la requête SQL qui va bien
$recherche = sql_allfetsel('*', 'spip_articles INNER JOIN spip_resultats as resultats ON resultats.id=spip_articles.id_article', $rech_where);

Et voilà !

Lorsque l’on veut récupérer le logo d’un objet SPIP, on est obligé de faire quelques choses qui ressemble à:

<BOUCLE_logo(ARTICLES){id_article=1}>
#LOGO_ARTICLE
</BOUCLE_logo>

C’est assez ennuyant, d’autant que cela risque fort de faire une requête SQL alors que la récupération de logo n’en a absolument pas besoin, les fichiers sont stocker sous la forme objetId_objet.xx dans le dossier IMG.

On pourrait espérer que mettre simplement l’identifiant dans la balise récupère le logo, comme le font les balises URL. Malheureusement cela ne fonctionne pas.

Du coup, je me suis inspiré de la balise #INFO_ pour créer une balise #CHERCHER_LOGO:

<?php
/**
 * #CHERCHER_LOGO{objet, id_objet}
 * Retrouver le logo d'un objet sans avoir à lancer tout le système de boucle.
 *
 * @param mixed $p
 * @access public
 * @return mixed
 */
function balise_CHERCHER_LOGO_dist($p) {
    $objet = interprete_argument_balise(1, $p);
    $id_objet = interprete_argument_balise(2, $p);

    // Faire la conversion pour la fonction chercher_logo
    $objet = "id_table_objet($objet)";

    include_spip('inc/filtres');
    include_spip('public/quete');
    $p->code = "http_img_pack(_DIR_IMG.quete_logo($objet, 'on', $id_objet, '', true), '', 'class=\"spip_logos\"')";
    $p->interdire_scripts = false;

    return $p;
}

Voir mon gist: https://gist.github.com/phenix-factory/57cb993512d13fdfee88

Lorsqu’on nous demande “d’autocompleter” un champ adresse, il vient immédiatement la question: avec quelle base de donnée ?

Eh bien, avec celle de Google ?

Une petite astuce que j’ai découvert il y a peu, on peut utiliser l’API de Google map pour créer facilement une autocomplétion d’adresse.

Un peu de JavaScript qui va bien:

// Inclure l'API de Google map, il y a un paramètre de pour spécifier qu'on veut la librairie des places.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript">
  $(function () {
     var input = (document.getElementById('test'));
     var autocomplete = new google.maps.places.Autocomplete(input);
  });
</script>

Et le html qui va avec:

<input name="Test" type="text" value="" id="test"/>

Et voilà, pas besoin de se casser plus la tête.

Pour ceux qui veulent tester:

https://gist.github.com/phenix-factory/f4d82164f8aee13fb6ec#file-gmap_adresse_autocomplete-html

Petite astuce que j’ai trouvée il y a peu.

Lorsque l’ont AJAX des blocs SPIP, le comportement par défaut est de passer le bloc en opacité 50%.
Ce n’est pas forcément le plus explicite pour les visiteurs, plus habitués à avoir un signe de “pseudo-progression”.

Ce n’est le comportement de la partie admin, qui affiche une icône “Loading” dans le coin supérieur droit.

On peut facilement reproduire ce comportement dans l’espace publique avec une petite ligne de css:

.loading {
background: url(../../prive/themes/spip/images/searching.gif) no-repeat top right;
}

Ici je suppose que le fichier css se trouve dans un sous-dossier du dossier squelettes de SPIP. Si ce n’est pas le cas, il faut adapter le chemin.

Bien entendu on peut mettre ce que l’on veut sur la class loading, ici je n’ai fais que reproduire le comportement de SPIP.

Je n’aurai jamais pensé trouver cela dans du code en production…

C’est “joli” mais pas super lisible…

Alors que substr() c’est bien mieux !