Nevertheless! Party Metaphorically

    @cagov/anchor-events

    1.0.0 • Public • Published

    Anchor Events

    A component that looks for ids within selectors and fires events if a link to those ids is executed either via click on an in page anchor or on new page load

    Use case

    We have accordions on our pages which initialize in a closed state. We may want to link directly to the contents of one of these accordions from another page or with an in page anchor link. Clicking on this link will scroll the page to the desired location already but this module adds the ability for the accordion to automatically open as the user arrives at it.

    Example

    <cagov-anchor-events
      data-selector="cagov-accordion"
      data-event="click"
      data-event-target-selector="button.card-header.accordion-alpha"
      data-cancel-selector="open"
    />
    

    Example above shows the custom element passing in the default values for all data set attributes. These attributes are optional and if the above default values are preferred that data attribute can be skipped:

    <cagov-anchor-events />
    

    Attributes

    Arguments are passed in as data attributes

    • selector: a query selector to identify element which may contain ids where we want to watch inbound anchor links
    • eventType: The event to fire on the element matching the selector containing the id of the anchor clicked
    • eventTargetSelector: query selector used to identify element inside selector that should receive the event
    • cancelSelector: a selector to look for inside the element identified by selector that will abort firing the event

    Conditions

    This will only fire the event if the user clicked a link or loaded a page with an anchor hash targeting an id inside the selector

    Keywords

    none

    Install

    npm i @cagov/anchor-events

    DownloadsWeekly Downloads

    45

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    7.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • zakiyak
    • timothyshambra
    • xjensen
    • carter.medlin
    • aaronhans
    • chacha-california
    • kkoryaka