Tirer partie de la génération de classes CSS par les enregistrements du
CMS Icybee

En HTML, l'attribut class permet d'assigner un nom de classe ou un jeu de noms de classe à un élément. Cet attribut peut être utilisé comme un sélecteur par la feuille de style (lorsque l'on souhaite ajouter des informations de style à un ensemble d'éléments) ou comme un moyen général pour décrire un élément. Les enregistrements de type nœuds du CMS Icybee offrent plusieurs moyens d'obtenir une valeur pour cet attribut, ainsi que d'ajouter ou de modifier les noms de classe à utiliser pour la composer.

Une valeur pour l'attribut class des éléments HTML

On peut obtenir une valeur adéquate pour l'attribut class d'un élément HTML grâce à la propriété magique css_class des enregistrements du CMS Icybee :

<?php

echo $core->models['articles'][6]->css_class;

Affichera une valeur similaire à celle-ci :

node node-id-6 node-slug-icybee-has-been-released constructor-articles has-image

La valeur de l'attribut css_class est généralement composée de plusieurs noms de classe, comme l'illustre l'exemple ci-dessus, et chaque type d'enregistrement peut avoir ses propres noms de classe, surchargeant ou complétant ceux d'un type parent.

Des noms de classes spécifiques selon les types d'enregistrement

Les enregistrements du CMS Icybee sont des objets dans une hiérarchie de classes. Par exemple le type article étend le type contenu qui étend lui-même le type nœud. Chaque type peut définir de nouveaux noms de classe ou surcharger ceux définis pour un type parent. Prenons l'exemple du type page qui étend le type noeud et surcharge certains noms de classe pour marquer la différence entre ces deux types tout en en définissant d'autres particuliers à son type.

Nous verrons plus tard comment sont définis et surchargés les noms de classes, mais voyons d’abord ce que l'on peut obtenir comme valeur pour la page d'accueil d'un site sous Icybee :

page page-id-1 page-slug-accueil constructor-pages home active template-home

On retrouve les noms de classe slug et constructor mais on notera que le type node a été remplacé par le type page pour marquer la différence entre les deux types. On notera également l'apparition des noms de classe home, active et template, particuliers au type page, qui indiquent que la page est la page d'accueil, qu'elle est active (c'est elle qui est affichée), et que son gabarit est « home ».

C'est très volontiers que l'on utilisera une telle valeur pour la classe d'un élément présentant le détail d'un nœud, ou pour la balise BODY d'un document, mais on préfèrera utiliser un sous-ensemble de noms de classe lorsqu'il s'agit de composer la classe d'un élément du fil d'Ariane, d'une entrée du menu de navigation ou l'accroche d'un enregistrement dans une liste.

Obtenir un sous-ensemble de noms de classe

La méthode css_class() compose une valeur à partir de noms de classe que l'on spécifie. On peut spécifier ceux à utiliser, ou au contraire ceux à exclure.

L'exemple suivant illustre comment obtenir une valeur à partir des noms de classe id et constructor :

<?php

echo $article->css_class('id constructor');

Affichera :

node-id-6 constructor-articles

Pour exclure un nom on le précède du signe moins « – », comme dans l'exemple suivant, où slug est exclu :

<?php

echo $node->css_class('-slug');

Affichera :

node node-id-6 constructor-articles has-image

Les noms de classe définis par les enregistrements

Comme nous l'avons vu, la propriété magique css_class et la méthode css_class() utilisent des noms de classes pour composer leurs valeurs. Ces noms de classes varient en fonction des types d'enregistrement. Voici par exemple les noms de classe définis par les enregistrements de type nœud et page.

Les noms de classe définis par les enregistrements de type nœuds

  • type : Type de l'enregistrement. node par défaut.
  • id : Identifiant unique de l'enregistrement. Interpolé depuis node-{$this->nid} par défaut.
  • slug : Identifiant de l'enregistrement par son slug, il n'est pas garanti qu'il soit unique. Interpolé depuis node-slug-{$this->slug} par défaut.
  • constructor : Constructeur de l'enregistrement (généralement l'identifiant de son module). Interpolé depuis constructor-{$normalized_constructor} par défaut.

Les noms de classe définis par les enregistrements de type page

  • type : Surcharge le type d'enregistrement avec page par défaut.
  • id : Surcharge l'identifiant unique de l'enregistrement avec l'interpolation de page-id-{$this->nid} par défaut.
  • slug : Surchargé par l'interpolation de page-slug-{$this->slug}.

  • home : vrai si la page est la page d'accueil du site.

  • active: vrai si la page est la page actuellement affichée.
  • trail : vrai si la page fait parti de la hiérarchie de la page affichée.
  • template : Identifiant du gabarit utilisé par la page, interpolé depuis template-{$template_name}.

Les noms de classe suivant sont ajoutés si le corps de la page affiche un enregistrement :

  • node-id : Identifiant unique de l'enregistrement affiché. Interpolé depuis node-id-{$node->nid}.
  • node-constructor : Constructeur de l'enregistrement affiché. Interpolé depuis node-constructor-{$normalized_constructor}.

Définir les noms de classe

Les noms de classe disponibles pour les enregistrements sont initialement définis par la propriété magique css_class_names, ou plus exactement par la méthode __get_css_class_names(), son getter.

Définir les noms de classe par l'héritage

La méthode __get_css_class_names() renvoie un tableau dont les clés sont les noms de classe. Ce tableau est utilisé pour composer la classe, cela consiste en général à concaténer les valeurs du tableau. Avant la concaténation les valeurs vides sont filtrées et les valeurs vraies sont doublées. Ainsi si id est égal à zéro il sera supprimé et si active est true alors sa valeur sera changée pour « active ».

Voici la méthode telle qu'elle est définie par l'enregistrement de type nœud :

<?php

protected function __get_css_class_names()
{
    return array
    (
        'type' => 'node',
        'id' => 'node-' . $this->nid,
        'slug' => 'node-slug-' . $this->slug,
        'constructor' => 'constructor-' . \ICanBoogie\normalize($this->constructor)
    );
}

Et voici la méthode surchargée par l'enregistrement de type page :

<?php

protected function __get_css_class_names()
{
    $names = array_merge
    (
        parent::__get_css_class_names(), array
        (
            'type' => 'page',
            'id' => 'page-id-' . $this->nid,
            'slug' => 'page-slug-'$this->slug,
            'home' => ($this->home->nid == $this->nid),
            'active' => $this->is_active,
            'trail' => (!$this->is_active && $this->is_trail),
            'template' = 'template-' . preg_replace('#|.(html|php)#'''$this->template)
        )
    );

    if ($this->node)
    {
        $node = $this->node;

        $names['node-id'] = 'node-id-' . $node->nid;
        $names['node-constructor'] = 'node-constructor-' . \ICanBoogie\normalize($node->constructor);
    }

    return $names;
}

Modifier les noms de classe par le système d'évènements

Il est également possible de modifier les noms de classe en utilisant le système d'évènements. En effet, l'évènement <class>::alter_css_class_name, instancié de la classe ICanBoogie\ActiveRecord\Node\AlterCSSClassNamesEvent, est déclenché la première fois qu'une classe est composée pour un enregistrement.

L'exemple suivant illustre l'ajout du nom de classe has-image sur un enregistrement de type content (instancié de la classe ICanBoogie\ActiveRecord\Content) lorsque sa propriété magique image est définie. :

<?php

namespace ICanBoogie;

Events::attach
(
    'ICanBoogie\ActiveRecord\Content::alter_css_class_names'function(ActiveRecord\Node\AlterCSSClassNamesEvent $event, ActiveRecord\Content $target) use($class)
    {
        $event->names['has-image'] = !empty($target->image);
    }
);

Conclusion

Au cours de cet article nous avons vu comment obtenir une valeur utilisable pour l'attribut class des éléments HTML. Nous avons également vu comment définir les noms de classe à utiliser pour composer cette valeur et enfin comment définir et modifier les noms de classe disponibles.

De quoi obtenir des classes standardisées et surtout automatiques sans se tracasser, pour cibler ou décorer à cœur joie.

Laisser un commentaire

Pas de commentaire