Wagtail client-side components
    Preparing search index...

    Class DropdownController

    A Tippy.js tooltip with interactive "dropdown" options.

    <div data-controller="w-dropdown" data-w-dropdown-hide-on-click-value-"true">
      <button type="button" data-w-dropdown-target="toggle" aria-label="Actions"></button>
      <div data-w-dropdown-target="content">[…]</div>
    </div>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    contentTarget context hasContentTarget hasOffsetValue hideOnClickValue keepMountedValue offsetValue themeValue tippy? toggleTarget blessings outlets targets values

    Accessors

    application classes data element hideTooltipOnClickAway identifier options outlets plugins reference scope targets themeOptions shouldLoad

    Methods

    connect disconnect dispatch hide initialize show afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns DropdownController

    Properties

    contentTarget: HTMLDivElement
    context: Context
    hasContentTarget: boolean
    hasOffsetValue: boolean
    hideOnClickValue: boolean

    Hide on click inside the dropdown. Differs from tippy's hideOnClick option for outside clicks that defaults to true and we don't yet expose it.

    keepMountedValue: boolean
    offsetValue: [number, number]
    themeValue: TippyTheme
    tippy?: Instance<Props>
    toggleTarget: HTMLButtonElement
    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[] = ...
    values: {
        hideOnClick: { default: boolean; type: BooleanConstructor };
        keepMounted: { default: boolean; type: BooleanConstructor };
        offset: ArrayConstructor;
        theme: { default: TippyTheme; type: StringConstructor };
    } = ...

    Accessors

    • get application(): Application

      Returns Application

    • get classes(): ClassMap

      Returns ClassMap

    • get data(): DataMap

      Returns DataMap

    • get element(): ElementType

      Returns ElementType

    • get hideTooltipOnClickAway(): {
          fn: (instance: Instance) => { onHide(): void; onShow(): void };
          name: string;
      }

      Hides tooltip on click away from the reference element. A custom implementation to replace tippy's default hideOnClick option, which doesn't play well with our datetime libraries (or others that render elements outside of the dropdown's DOM).

      Returns { fn: (instance: Instance) => { onHide(): void; onShow(): void }; name: string }

    • get identifier(): string

      Returns string

    • get outlets(): OutletSet

      Returns OutletSet

    • get plugins(): {
          name: string;
          fn(
              instance: Instance,
          ):
              | { onHide?: undefined; onShow?: undefined }
              | { onHide: () => void; onShow: () => void };
      }[]

      Returns {
          name: string;
          fn(
              instance: Instance,
          ):
              | { onHide?: undefined; onShow?: undefined }
              | { onHide: () => void; onShow: () => void };
      }[]

    • get scope(): Scope

      Returns Scope

    • get targets(): TargetSet

      Returns TargetSet

    • get themeOptions(): | {
          arrow: true;
          hideOnClick?: undefined;
          maxWidth: 350;
          placement: "bottom";
          plugins: {
              name: string;
              fn(
                  instance: Instance,
              ):
                  | { onHide?: undefined; onShow?: undefined }
                  | { onHide: () => void; onShow: () => void };
          }[];
      }
      | {
          arrow: false;
          hideOnClick: false;
          maxWidth: "none";
          placement: "bottom-end";
          plugins: {
              name: string;
              fn(
                  instance: Instance,
              ):
                  | { onHide?: undefined; onShow?: undefined }
                  | { onHide: () => void; onShow: () => void };
          }[];
      }
      | {
          arrow: false;
          hideOnClick?: undefined;
          maxWidth: "none";
          placement: "bottom-start";
          plugins: {
              name: string;
              fn(
                  instance: Instance,
              ):
                  | { onHide?: undefined; onShow?: undefined }
                  | { onHide: () => void; onShow: () => void };
          }[];
      }

      Returns
          | {
              arrow: true;
              hideOnClick?: undefined;
              maxWidth: 350;
              placement: "bottom";
              plugins: {
                  name: string;
                  fn(
                      instance: Instance,
                  ):
                      | { onHide?: undefined; onShow?: undefined }
                      | { onHide: () => void; onShow: () => void };
              }[];
          }
          | {
              arrow: false;
              hideOnClick: false;
              maxWidth: "none";
              placement: "bottom-end";
              plugins: {
                  name: string;
                  fn(
                      instance: Instance,
                  ):
                      | { onHide?: undefined; onShow?: undefined }
                      | { onHide: () => void; onShow: () => void };
              }[];
          }
          | {
              arrow: false;
              hideOnClick?: undefined;
              maxWidth: "none";
              placement: "bottom-start";
              plugins: {
                  name: string;
                  fn(
                      instance: Instance,
                  ):
                      | { onHide?: undefined; onShow?: undefined }
                      | { onHide: () => void; onShow: () => void };
              }[];
          }

    • get shouldLoad(): boolean

      Returns boolean

    Methods

    • Parameters

      • eventName: string
      • Optional__namedParameters: Partial<
            {
                bubbles: boolean;
                cancelable: boolean;
                detail: Object;
                prefix: string;
                target: Element
                | Window
                | Document;
            },
        >

      Returns CustomEvent<Object>

    • Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods