Accès direct aux blocs-Comprendre le thème xSwatch4-Tutoriels

Comprendre le thème xSwatch4

Thèmes 28534

Auteur

Alain

Publication

13-09-2021

Mise à jour

03-11-2021

Note
4.7 (3 votes)

Niveau

Avancé

Choisissez le thème xSwatch4 pour votre site web et arrangez-le exactement comme vous le souhaitez.

Ce tutoriel très détaillé vous expliquera comment est structuré ce thème et vous guidera pas à pas pour l'adapter à vos besoins.

Vous n'avez pas accès à l'ensemble de ce tutoriel.
Pour accéder à la totalité des pages (), vous devez être membre du site.
L'inscription est donc obligatoire mais gratuite !

Introduction Mise en place Structure générale Liste des variantes Choix des variantes theme.tpl - Prérequis Positionnement des blocs theme.tpl - Entête theme.tpl - Corps - Début theme.tpl - maincontainer theme.tpl - Corps - Fin Personnalisation CSS Accès direct aux blocs Surcharges de modules Conclusion

Accès direct à la gestion des blocs

Ce thème, xSwatch4, dispose d'une fonctionnalité très intéressante.
En effet, il permet d'appeler la gestion d'un bloc depuis l'interface utilisateur.

1. Utilisation

Pour utiliser cette fonctionnalité :

Il faut que vous soyez connecté,
Que votre compte soit membre du groupe des webmasters,
Il faut enfin que la barre d'outils admin soit affichée (en bas de page).
S'il cette barre d'outils n'est pas présente, activez-la via le menu du haut [Compte][Barre d'outils ]

Maintenant, sur la barre d'outils webmasters, vous pouvez cliquer sur [ Édition du Bloc].
Pour chaque bloc présent sur la page affichée (côté utilisateur), un bouton orange apparait en haut à gauche : .
Si vous cliquez sur l'un des boutons, vous accéderez directement à la gestion de ce bloc.

2. Explication

Vous vous demandez sans doute comment cela fonctionne ?
Observez le template blockContent.tpl sous le dossier tpl.
Il permet de comprendre la construction du lien du bouton "Edition du bloc .


<{if $xoops_isadmin|default:false}>

    <a class="toolbar-block-edit btn btn-large btn-warning" 

        href="<{xoAppUrl /modules/system/admin.php?fct=blocksadmin&op=edit&bid=}><{$block.id}>"

        title="<{$smarty.const.THEME_TOOLBAR_EDIT_THIS_BLOCK}>">

        <span class="fa fa-pencil-square-o"></span>

    </a>

<{/if}>

<{$block.content}>

Si l'utilisateur est membre du groupe des webmasters
Alons on affiche un bouton
avec pour lien la gestion du bloc concerné (<{$block.id}>)

Fin du test conditionnel
Affichage du contenu du bloc

Pour être tout à fait complet, détaillons le lien du menu "Edition du bloc" situé dans la barre d'outils webmasters via le template nav-admin.tpl.


<li class="nav-item">

     <a class="nav-link" href="javascript:xswatchEnableBlockEdits();">

          <span class="fa fa-edit"></span> <{$smarty.const.THEME_TOOLBAR_SHOW_BLOCK_EDIT}>

     </a>

</li>

Ouverture d'un élément dans la barre d'outils webmaster
Appel à un script pour l'affichage ou non du bouton
Affichage de l'icône et du texte " Édition du Bloc"

Fermeture de l'élément

A la fin du template nav-admin.tpl, on peut trouver le script en javascript.
Il permet de gérer :

L'affichage ou le masquage des boutons orange ,
L'affichage ou le masquage de la barre d'outils.


<script type="text/javascript">

    var toolbar_block_edits = false;

    function xswatchEnableBlockEdits() {

        if (toolbar_block_edits) {

            $('.toolbar-block-edit').hide();

            toolbar_block_edits = false;

        } else {

            $('.toolbar-block-edit').show();

            toolbar_block_edits = true;

        }

    }

    function xswatchToolbarIndOn() {

        $('#xswatch-toolbar-ind').attr('class', 'fa fa-toggle-on');

        $('#xswatch-toolbar').show();

    }

    function xswatchToolbarIndOff() {

        $('#xswatch-toolbar-ind').attr('class', 'fa fa-toggle-off');

        $('#xswatch-toolbar').hide();

    }

    function xswatchToolbarToggle() {

        var toolbar_cookie = Cookies.get('xswatch-toolbar');

        if (toolbar_cookie == 'off') {

            toolbar_cookie = 'on';

            xswatchToolbarIndOn();

        } else {

            toolbar_cookie = 'off';

            xswatchToolbarIndOff();

        }

        Cookies.set('xswatch-toolbar', toolbar_cookie, { expires: 365, sameSite: 'strict' });

    }

    // set initial conditions based on cookie

    var toolbar_cookie = Cookies.get('xswatch-toolbar');

    if (toolbar_cookie == 'off') {

        xswatchToolbarIndOff();

    } else {

        xswatchToolbarIndOn();

    }

</script>

Ouverture du javascript
Par défaut, le bouton "Edition du bloc" n'est pas affiché sur chaque bloc
Fonction Affichage/Masquage du bouton "Edition du bloc"
Si les boutons sont affichés sur les blocs
Alors on masque les boutons sur chaque bloc
et la variable "toolbar_block_edits" passe à "false"
Sinon
Alors on affiche un bouton sur chaque bloc
et la variable "toolbar_block_edits" passe à "true"
Fin du test conditionnel

Fonction Affichage de la barre d'outils
Affichage de l'icône
Affichage de la barre d'outils

Fonction Masquage de la barre d'outils
Affichage de l'icône
Masquage de la barre d'outils

Gestion Affichage / Masquage de la barre d'outils
Affectation du cookies 'xswatch-toolbar' dans la variable 'toolbar_cookie'
Si la variable toolbar_cookie est à 'off'
Alors on passe la variable à 'on'
et on exécute la fonction Affichage de la barre d'outils
Sinon
Alors on passe la variable à 'off'
et on exécute la fonction Masquage de la barre d'outils
Fin du test conditionnel
Définie le cookies 'xswatch-toolbar' avec la variable 'toolbar_cookie'

Ligne de commentaire sur les conditions initiales des coockies 'xswatch-toolbar'
On récupère dans la variable "toolbar_cookie" la valeur du cookies
Si la variable "toolbar_cookie" est à 'off'
Alors on exécute la fonction xswatchToolbarIndOff()
Sinon
on exécute la fonction xswatchToolbarIndOn()
Fin du test conditionnel
Fermeture du script