Activator

Click a control (e.g. button), and a tiny JavaScript adds or removes some .is-active classes. That explains the operation of most things in Codebase.

Since Codebase 2 the various showhides, dropdowns, modals and offcanvas sidebars are all controlled by one script named _activator.js, that has been included within codebase.js.

Basic activator components need an outer wrapper element (block), with a controller element and a content both as immediate children (and thus siblings) within the wrapper. These elements can be anything, so long as:

1. You must give your component’s outer HTML wrapper a class name, and then use that same class name as a prefix for its controller and content elements.

2. The controller must have has a class with suffix -ctrl and the content must have a class with suffix -content.

An example "thing":

<div class="thing">
  <button class="thing-ctrl">
    Click me
  </button>
  <div class="thing-content">
    I am a thing.
  </div>
</div>

It doesn’t matter whether the controller element comes before or after the content element.

Activator Operation

It is entirely up to you what styling you wish to add for the inactive and active states of the component, controller and content. But Codebase does contain a few examples.

Examples of simple Codebase activator components are showhide and dropdowns.

1. Click/tap an activator control .thing-ctrl to add class .is-active to all these:
   • Its .thing wrapper
   • The clicked .thing-ctrl element itself
   • Its respective .thing-content element
2. At the same time, all other activator components, no matter what kind of thing they are, will get .is-active removed. (Only one activator component can be active at any time.)
3. Click/tap an activator .thing-ctrl again to cause the removal of the .is-active classes, thereby deactivating this component.
4. A click/tap anywhere outside an activator content will also deactivate the active component (this is useful for dismissing an offcanvas sidebar or a modal).
5. A click/tap an on-page <a href="#..."> tag within an activator will also deactivate the active component (this is useful for dismissing an offcanvas sidebar if visiting a hyperlink target on the same webpage).
6. Optional extra: click/tap a .thing-close element within an active activator component to deactivate it. (See “Closing from within”, below.)

Adding Specificity

Add data-content-id="{identifier}" to control elements in order to target particular id="{identifier}" content elements.

This enables the controller to be located outside the component and yet still be able to identify its respective target.

<div class="thing">
  <div id="thing-content-2" class="thing-content">
    I am thing 2.
  </div>
</div>
<button data-content-id="thing-content-2" class="thing-ctrl">
  Click me
</button>

data-content-id="{identifier}" can also also allow multiple controller/content pairs to co-exist within the same activator component.

Examples of activator components with added specificity in Codebase are modals and offcanvas side panels.

Closing From Within

If for some reason you wish to have a "close" (or "dismiss") button inside your content element, you can do that. Simply add an element with class .thing-close inside your .thing-content. Clicking this element will cause the removal of is-active from the content element (and the control element, if you have one).

Codebase modals and offcanvas side panels have "close" buttons.

Activator Classes

Class	Notes	Active state class
.thing (could be anything)	The class of the activator component block	.thing.is-active
.thing-ctrl	The activator controller element. (Optional:) data-content-id="identifier" for added specificity.	.thing-ctrl.is-active
.thing-content	The activator content element. (Optional:) id="identifier".	.thing-content.is-active
.thing-close	(Optional:) The activator "close from within" element	n/a

Codebase Activator Components

The activator script is being used by the following components in Codebase:

Component class	Controller class	Content class
.showhide	.showhide-ctrl	.showhide-content
.dropdown	.dropdown-ctrl	.dropdown-content
.offcanvas	.offcanvas-ctrl 1	.offcanvas-content 2
.modal	.modal-ctrl 1	.modal-content 2

1. data-content-id is required for specificity.
2. The content element must have an id that matches its respective controller’s data-content-id.

---