Skip to main content
The AppHelpers class provides a collection of utility methods for common DOM manipulation tasks, event handling, and element management in Theme Raed.

​
Class overview

AppHelpers is a helper class that simplifies working with DOM elements through a chainable API. It provides methods for querying elements, managing classes, handling events, and controlling element visibility.

​
Methods

​
toggleClassIf

Toggles between two sets of CSS classes on elements based on a callback condition.
​
selector
string
required
CSS selector for target elements
​
classes1
array<string>
required
First set of CSS classes to toggle
​
classes2
array<string>
required
Second set of CSS classes to toggle
​
callback
function
required
Function that determines which classes to apply
const helpers = new AppHelpers();
helpers.toggleClassIf('.menu-item', ['active', 'highlight'], ['inactive'], 
  (element) => element.dataset.selected === 'true'
);

​
element

Retrieves a DOM element by selector or returns the element if already an HTMLElement.
​
selector
string | HTMLElement
required
CSS selector string or HTMLElement object
​
returns
HTMLElement | NodeList | null
The matched element(s) or null if not found
const helpers = new AppHelpers();
const button = helpers.element('#submit-btn');
For certain selectors like .total-price, .before-price, and .product-weight, this method returns a NodeList instead of a single element.

​
watchElement

Stores a reference to an element on the helper instance for later use.
​
name
string
required
Property name to store the element reference
​
selector
string
required
CSS selector for the element to watch
const helpers = new AppHelpers();
helpers.watchElement('submitBtn', '#submit-btn');
// Access later via helpers.submitBtn

​
watchElements

Stores references to multiple elements at once.
​
elements
Object.<string, string>
required
Object mapping property names to CSS selectors
const helpers = new AppHelpers();
helpers.watchElements({
  submitBtn: '#submit-btn',
  cancelBtn: '#cancel-btn',
  form: '#checkout-form'
});

​
on

Attaches event listeners to elements with optional configuration.
​
action
string
required
Event type (e.g., ‘click’, ‘keyup’, ‘change’)
​
element
string | HTMLElement
required
CSS selector or HTMLElement
​
callback
function
required
Event handler function
​
options
object
Event listener options (optional)
const helpers = new AppHelpers();
helpers.on('click', '.add-to-cart', (event) => {
  console.log('Product added to cart');
});

​
onClick

Convenience method for attaching click event listeners.
​
element
string | HTMLElement
required
CSS selector or HTMLElement
​
callback
function
required
Click handler function
const helpers = new AppHelpers();
helpers.onClick('#menu-toggle', (event) => {
  document.body.classList.toggle('menu-open');
});

​
onKeyUp

Convenience method for attaching keyup event listeners.
​
element
string | HTMLElement
required
CSS selector or HTMLElement
​
callback
function
required
Keyup handler function
const helpers = new AppHelpers();
helpers.onKeyUp('#search-input', (event) => {
  performSearch(event.target.value);
});

​
all

Iterates over all elements matching a selector and executes a callback.
​
element
string | HTMLElement
required
CSS selector for elements to iterate
​
callback
function
required
Function to execute for each element
const helpers = new AppHelpers();
helpers.all('.product-card', (card) => {
  card.addEventListener('mouseenter', showQuickView);
});

​
hideElement

Hides an element by setting its display style to ‘none’.
​
element
string | HTMLElement
required
CSS selector or HTMLElement to hide
const helpers = new AppHelpers();
helpers.hideElement('#loading-spinner');

​
showElement

Shows a hidden element by setting its display style.
​
element
string | HTMLElement
required
CSS selector or HTMLElement to show
​
display
string
default:"block"
CSS display value (e.g., ‘block’, ‘flex’, ‘grid’)
const helpers = new AppHelpers();
helpers.showElement('#success-message', 'flex');

​
removeClass

Removes one or more CSS classes from an element.
​
element
string | HTMLElement
required
CSS selector or HTMLElement
​
className
string
required
Class name(s) to remove
const helpers = new AppHelpers();
helpers.removeClass('#alert', 'hidden', 'opacity-0');
You can pass multiple class names as separate arguments to remove them all at once.

​
addClass

Adds one or more CSS classes to an element.
​
element
string | HTMLElement
required
CSS selector or HTMLElement
​
className
string
required
Class name(s) to add
const helpers = new AppHelpers();
helpers.addClass('#notification', 'show', 'animate-fade-in');
You can pass multiple class names as separate arguments to add them all at once.

​
Method chaining

Most methods return the AppHelpers instance, allowing for method chaining: 
const helpers = new AppHelpers();

helpers
  .watchElement('modal', '#product-modal')
  .onClick('#open-modal', () => helpers.showElement(helpers.modal))
  .onClick('#close-modal', () => helpers.hideElement(helpers.modal))
  .addClass('#product-grid', 'loaded');

Build docs developers (and LLMs) love

Get started for freeTalk to us