Usage
nebula.temporaryClass(element, activeClass, inactiveClass, period)
Parameters
element
(Required) (Object or String) The element whose class will be changed
Default: None
activeClass
(Required) (String) The class to use during the active period
Default: None
inactiveClass
(Optional) (String) The class to change to after the active period has elapsed
Default: ""
period
(Optional) (Integer) How long the active class should be shown (in milliseconds)
Default: 1500
Parameter Notes
If an inactiveClass is not provided, Nebula will attempt to parse the classes for a Font Awesome class, otherwise it will default to an empty string.
Examples
Change an icon to a check and then after 5 seconds change it to a bomb.
nebula.temporaryClass(jQuery('i.example'), 'fa-check', 'fa-bomb', 5000)
Find the icon within a button and change it to a check. This attempts to revert back to whatever Font Awesome icon class was on the original icon before it was changed.
jQuery('a#activate').on('click', function(){
nebula.temporaryClass(jQuery(this).find('i'), 'fa-check');
});
Temporarily add a class and then remove that class after (no inactiveClass)
nebula.temporaryClass(jQuery('.drop-area'), 'rejected');
Additional Notes
During the active period, a temporary-status-active class is added to the element. This can be used for additional styling or animation.
Source File
Located in /assets/js/modules/helpers.js on line 336.
No Hooks
This function does not have any filters or actions available. Request one?nebula.temporaryClass = function($element, activeClass, inactiveClass, period = 1500){
if ( $element && activeClass ){
if ( typeof $element === 'string' ){
$element = jQuery($element);
}
if ( !inactiveClass ){
if ( $element.is('fa, fas, far, fab, fad, fat, fal, fa-solid, fa-regular, fa-brands, fa-duotone, fa-thin, fa-light') ){ //Font Awesome icon element
inactiveClass = (/fa-(?!fw)\S+/i).test($element.attr('class')); //Match the first Font Awesome icon class that is the actual icon (exclude fa-fw for example)
} else if ( $element.is('bi') ){ //Bootstrap icon element
inactiveClass = (/bi-\S+/i).test($element.attr('class')); //Match the first Bootstrap icon class
} else {
inactiveClass = ''; //Set to an empty string to only use a temporary active class
}
}
$element.removeClass(inactiveClass).addClass(activeClass + ' temporary-status-active'); //Remove the inactive class and add the active class
setTimeout(function(){
$element.removeClass(activeClass + ' temporary-status-active').addClass(inactiveClass); //After the period of time, revert back to the inactive class
}, period);
}
return false;
};
Override
To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).
For non-module import functions:
nebula.temporaryClass = function(element, activeClass, inactiveClass, period){
//Write your own code here, leave it blank, or return false.
}
For dynamically imported module function overrides:
jQuery(window).on('load', function(){
nebula.temporaryClass = function(element, activeClass, inactiveClass, period){
//Write your own code here, leave it blank, or return false.
}
});
Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:
jQuery(document).on('nebula_module_loaded', function(module){
//Note that the module variable is also available to know which module specifically was imported
if ( typeof nebula.temporaryClass === 'function' ){
nebula.temporaryClass = function(element, activeClass, inactiveClass, period){
//Write your own code here, leave it blank, or return false.
}
}
});