Direct access to blocks-Understanding the xSwatch4 theme-Tutorials

Understanding the xSwatch4 theme

Themes 28966

Author

Alain

Publication

09/13/2021

Update

11/03/2021

Rating
4.7 (3 votes)

Level

Advanced

Choose the xSwatch4 theme for your website and arrange it exactly as you wish.

This very detailed tutorial will explain how this theme is structured and will guide you step by step to adapt it to your needs.

You do not have access to all of this tutorial.
To access all the pages (), you must be a member of the site.
Registration is therefore compulsory but free!

Introduction Setting up General structure List of variants Choice of variants theme.tpl - Requirements Positioning of blocks theme.tpl - Header theme.tpl - Body - Start theme.tpl - maincontainer theme.tpl - Body - End Customizing CSS file Direct access to blocks Module overloads Conclusion

Direct access to block management

This theme, xSwatch4, has a very interesting feature.
Indeed, it allows to call the management of a block from the user interface.

1. Usage

To use this feature:

You must be logged in,
Your account must be a member of the webmaster group,
Finally, the admin toolbar must be displayed (at the bottom of the page).
If this toolbar is not present, activate it via the top menu [Account][Toolbar ]

Now, on the webmasters toolbar, you can click on [ Block Edit].
For each block present on the displayed page (user side), an orange button appears at the top left: .
Clicking on any of the buttons will take you directly to the management of this block.

2. Explanation

You may be wondering how this works?
Look at the template blockContent.tpl under the tpl folder.
It helps to understand the link construction of the "Edit Block .


<{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}>

If the user is a member of the webmaster group
Let's display a button
with the link to the relevant block management (<{$block.id}>)

Fin du test conditionnel
Affichage du contenu du bloc

For completeness, let's detail the "Edit Block" menu link located in the webmasters toolbar via the 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>

Opening an item in the webmaster toolbar
Call to a script for the display or not of the button
Displaying the icon and text " Editing the Block"

Closing the element

At the end of the template nav-admin.tpl, you can find the script in javascript.
It allows you to manage :

Showing or hiding the orange buttons ,
Showing or hiding the toolbar.


<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>

Opening the javascript
By default, the "Edit block" button is not displayed on each block
Show/hide function of the "Edit block" button
If the buttons are displayed on the blocks
Then we hide the buttons on each block
and the "toolbar_block_edits" variable is set to "false"
Else
Then we display a button on each block
and the "toolbar_block_edits" variable is et to "true"
End of the conditional test

Function Displaying the toolbar
Display of the icon
Display toolbar

Function Hiding the toolbar
Display icon
Hiding the toolbar

Manage Display / Hide Toolbar
Assigning the cookie 'xswatch-toolbar' to 'toolbar_cookie' variable
If the toolbar_cookie is set to 'off'
Then set the variable to ''on'
and execute the Display Toolbar function
Else
Then set the variable to 'off'
and execute the function Hide toolbar
End of conditional test
Set the 'xswatch-toolbar' coockies with the 'toolbar_cookie' variable

Comment line on the initial conditions of the 'xswatch-toolbar' cookies
Get the value of the cookie from the 'toolbar_cookie[i]' variable
If the variable '[i]toolbar_cookie' is set to 'off'.
Then execute the xswatchToolbarIndOff() function
else
execute the xswatchToolbarIndOn() function
End of the conditional test
Closing the script