SActivateFeature

Platform  

js

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

  Features

• Take the href attribute as target

• Allows to group some element for tabs behavior, etc...

• Support the toggle mode

• Support the history mode

• Allows you to save state to restore them on page load

• Available trigger: click, mouseover, mouseout, anchor and more to come

• Expand the HTMLTemplateElement that stands as direct child of the dom feature itself AND of the targets

  Import

  Install

  Events

1. s-activate.activate

   Dispatched from each targets when they are activated

2. s-activate.unactivate

   Dispatched from each targets when they are unactivated

  Interface

1. href

   String

   Specify the target element(s) to activate/unactivate

2. group

   String

   Specify a group id for your element. This is used for things like tabs, etc...

3. toggle

   false

   Boolean

   Specify if you want to be able to click on the same element to activate/unactivate it.

4. history

   false

   Boolean

   Specify if you want to store and react to history hash changes

5. active

   false

   Boolean

   Specify the initial state of your element

6. activeClass

   active

   String

   Specify the class applied on target(s) when active. Default is "active"

7. activeAttribute

   active

   String

   Specify the attribute name applied on target(s) when active.

8. saveState

   false

   Boolean

   Specify if you want to save state in localStorage to restore it on page reload, etc...

9. activateTimeout

   0

   Number

   Specify a timeout before actiavting the target(s)

10. unactivateTimeout

    0

    Number

    Specify a timeout before unactivate the target(s)

11. triggerer

    String

    Specify an element selector that will be used as the triggerer instead of this current element

12. trigger

    ["click"]

    • click
    • mouseover
    • mouseenter
    • mouseout
    • mouseleave
    • anchor

    Array<String>

    Specify what trigger an activate/unactivate action. Can be "click", "mouseover", "mouseout" ,"anchor", "event:%eventName" "and/or" "cookie:%cookieName.%optionalDotPath". When using the "event:", the listener will be the node itself by default but you can specify the "document" like so "event:%eventName:document". When using "cookie", you can negate the assertion like so "!cookie:myCookie.myValue"

13. unactivateOn

    Array<String>

    Specify some event(s) catched on the body tag that will unactivate the target(s)