Joomla Tabs GK5 module for Developers
Tabs GK5 Module code and notes regarding styling
Our primary objective in producing the Tabs GK5 module was to simplify the HTML and JavaScript code. The use of HTML5 has opened up new possibilities for us.
A key difference between the new Tabs module and the previous version (Tabs GK4) has to do with the introduction of data-* attributes versus the use of global Javascript variables.
Schematically, Tabs GK5 module code with a basic configuration appears as follows:
<div id="[TAB ID]" data-config="[TAB CONFIG]"> <div> <ol> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> </ol> <div> <div>[TAB CONTENT]</div> <div>[TAB CONTENT]</div> <div>[TAB CONTENT]</div> </div> </div> <div>next</div> <div>prev</div> </div>
Following is an explanation of the code elements:
[TAB ID] – module ID
[TAB CONFIG] – object in JSON format which defines a module’s configuration as per the following example:
{
'activator':'click',
'animation':'0',
'animation_speed':'250',
'animation_interval':'5000',
'animation_type':'slide_vertical',
'animation_function':'Fx.Transitions.linear',
'active_tab':1,
'cookie_save':'0',
'auto_height':'1',
'module_height':'300'
}
To ensure compatibility with HTML5, quotation marks (sometimes called “inverted commas”) have been replaced with apostrophes. However, these are automatically converted back to quotation marks for the purpose of JSON object parsing because the JSON notation requires the use of quotation marks.
[vertical|horizontal] – the selection of class to add – vertical or horizontal class – is dependent upon the position of the tabs. A vertical class is added where the tabs are located in the left or right position, whereas a horizontal class is added for those in the top or bottom position. These classes are used to differentiate styling for the layout of the current tabs instance.
To distinguish between vertical tab element styling and horizontal tab element styling, a selector must be defined in code as follows:
.gkTabsWrap.vertical
or
.gkTabsWrap.horizontal
[active] – refers to a class added to an active tab and a container including its content, and is used for styling active elements.
[TAB ANIMATION] – the name used to refer to an animation in a given tab, e.g. default
[TAB NAME] – a tab’s name as set by a user. When the “Use additional spans” option is switched on, a tab name is incorporated with a element and the code as follows:
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
Changes to:
<li data-animation="[TAB ANIMATION]"><span>[TAB NAME]</span></li>
[TAB CONTENT] – a tab’s content as defined by a user as HTML code or a module.
It’s worth understanding that the fragment:
<div>next</div> <div>prev</div>
is optional and will be shown when switching on prev/next buttons and using tabs in the Top or Bottom position.
In the case of setting tabs positioned in the Left or Right position, the code:
<ol> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> </ol> <div> <div>[TAB CONTENT]</div> <div>[TAB CONTENT]</div> <div>[TAB CONTENT]</div> </div>
will change to:
<div> <div>[TAB CONTENT]</div> <div>[TAB CONTENT]</div> <div>[TAB CONTENT]</div> </div> <ol> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> <li data-animation="[TAB ANIMATION]">[TAB NAME]</li> </ol>
As not all styles are the same for tabs in the Top/Bottom and Left/Right positions, use of the following selectors for styling of tabs in the Left and Right positions is recommended:
.gkTabsWrap.vertical .gkTabsContainer + ol .gkTabsWrap.vertical .gkTabsContainer + ol li
JavaScript Code
In the module’s JavaScript code, there is one important fragment common to both the MooTools and jQuery frameworks:
if(typeof gkTabEventTrigger !== 'undefined') {
gkTabEventTrigger(i, current_tab, module_id);
}
This code is called each time the current tab is activated. This triggers an external event which has been configured by the module user. This is possible when a user defines the function in a form as in the following example:
gkTabEventTrigger(clicked_tab, current_tab, module_id)
As you can see, this function loads three arguments:
- clicked_tab (“i”) – ID of the tab which was clicked (indexed from 0)
- current_tab – ID of the tab active at the moment of clicking
- module_id – attribute value of the module id
The first two variables uniquely identify which tabs are active (or animated) whereas the third one indicates the event source and indirectly allows the DOM structure of the current module to be acquired (also module configuration data saved in a data-config attribute).
This functionality was first used in the AppsProTech template and it allowed GavickPro to add animation of a moving arrow without modifying the module structure.
For the AppsProTech template, an arrow had been added to the specified modules (with a given suffix) and animation was requested by the gkTabEventTrigger function.
In practice, the possibilities for such a function are even greater. For example, it is possible to animate other areas of the template after clicking on a given tab in a specific module.
External source data
The option to use external data sources is one of the most exciting changes introduced in the Tabs GK5 module. Files in either the XML or JSON format may be used. Simply position a file with data in the defined format (see the “external_data catalog”), set the “Module data source” option to “External files” and on the “External sources” tab select a file using the “Source file” option.
Example of a JSON file:
[
{
"name": "Test 1",
"type": "xhtml",
"content": ":)",
"published": "1",
"access": "4"
},
{
"name": "Test2",
"type": "module",
"content": "tab1",
"published": "1",
"access": "1"
}
]
Example of an XML file:
<?xml version="1.0" encoding="utf-8"?> <tabs> <tab> <name>Test 1</name> <type>xhtml</type> <content><![CDATA[:)]]></content> <published>1</published> <access>1</access> </tab> <tab> <name>Test 2</name> <type>module</type> <content>tab1</content> <published>1</published> <access>1</access> </tab> </tabs>
Fields from the XML and JSON files have the following meaning:
- name – tab’s name as displayed in a module
- type – gets xhtml or module value – specifies content type of the tab
- content – in the case of types set as a module, it includes the position names the module is loaded into. For types specified as xhtml, it may include any (X)HTML code
- published – returns a value of 0 or 1 depending upon whether the tab is to be displayed
- access – identifies an ACL group requiring access to a given tab
In the case where type is set to “module”, it is important to assign module positions not already defined within the template for module display; this will help to avoid the creation of duplicate modules. Also, when using a tabs manager, it is possible to easily define the names of positions used in the admin/elements/positions.json file.
Important Note to Developers
The most important thing to remember here is that it is now possible to configure custom data capture and presentation solutions by using the Tabs GK5 module in conjunction with other extensions. This can already be done at the presentation layer. However, this concept may be further extended when considering those other extensions which themselves store values in external files. It now becomes possible to trigger events and actions and to share or transfer data elements in the back-end through the use of programming.
This article was first published
