ToggleClassController

Purpose

To toggle a class on an element, based on various optional interactions i.e. On Hover, On click-away, on direct-click

Actions

Action	Purpose
toggle	If the class is currently applied, removed it. Otherwise, add it.
on	Add the class if it is currently missing
off	Remove the class if it is currently applied

Targets

Target	Purpose	Default
toggle	The target to toggle the class on	-

Classes

Class	Purpose	Default
-	-	-

Values

Value	Type	Description	Default
class	String	The space separated list of classes to toggle	-
mouseEnter (Optional)	String	One of on, off, or toggle, what to do when the user's mouse enters the controller scope	-
mouseLeave (Optional)	String	One of on, off, or toggle, what to do when the user's mouse leaves the controller scope	-
clickAway (Optional)	Boolean	When the user clicks outside of the controller scope, should any previously toggled classes be toggled back	-
initial (Optional)	String	Either on: the controller will ensure the class is always present when the controller connects. Or off: it will ensure the class is not present on connect. If the option is not specified then the class will be left as it is in the DOM	-

Note: If you use Turbo/Turbolinks, it's best to specify a value for initial, otherwise the Turbo(links) cache can put the class into a strange state and the toggle will be inverted.

Events

Event	When	Dispatched on	event.detail
-	-	-	-

Side Effects

None

How to Use

Example - showing a dropdown menu on a click, and hiding it again if the user clicks away.

HTML

<div
  data-controller="toggle-class"
  data-toggle-class-class-value="hidden"
  data-toggle-class-click-away-value="true"
  data-toggle-class-initial-value="on"
>
  <button id="user-menu" class="navbar-button" data-action="click->toggle-class#toggle">
    <i class="far fa-bell"></i>
    <span class="hidden dropdown" data-toggle-class-target="toggle">
      <a href="/profile" class="dropdown-link">Your Profile</a>
      <a href="/settings" class="dropdown-link">Settings</a>
      <a href="/sign-out" class="dropdown-link">Sign Out</a>
    </span>
  </button>
</div>

Example, showing an action button on hover

HTML

<div id="calendar" class="grid grid-cols-7">
  <!-- ...-->
  <div
    class="calendar-cell"
    data-controller="toggle-class"
    data-toggle-class-class-value="invisible"
    data-toggle-class-mouse-enter-value="off"
    data-toggle-class-mouse-leave-value="on"
    data-toggle-class-initial-value="on"
  >
    <span class="cell-heading">4th</span>
    <div class="cell-body">
      <div class="text-center invisible" data-toggle-class-target="toggle">
        <a class="btn btn-primary" href="/events/new">+ New event</a>
      </div>
    </div>
  </div>
  <!-- ...-->
</div>