Wagtail client-side components
    Preparing search index...

    Class SessionController

    Manage an editing session by indicating the presence of the user and handling cases when there are multiple users editing the same content.

    This controller defines the following behaviors:

    • Dispatching a ping event periodically, which can be utilized by other controllers to keep the session alive or indicate presence.
    • Dispatching an event indicating the visibility state of the document.
    • Preventing events triggered by submit buttons and workflow action buttons in the edit form, and showing a confirmation dialog instead, before proceeding with the original action after the user confirms the dialog.

    Ideally this controller should be used in conjunction with SwapController, ActionController, and DialogController to compose the user experience.

    <form
      id="w-editing-sessions"
      method="post"
      data-controller="w-swap w-action w-session"
      data-w-swap-target-value="#w-editing-sessions"
      data-w-swap-src-value="/path/to/ping/session/"
      data-w-swap-json-path-value="html"
      data-w-action-continue-value="true"
      data-w-action-url-value="/path/to/release/session/"
      data-w-session-w-dialog-outlet="[data-edit-form] [data-controller='w-dialog']#w-overwrite-changes-dialog"
      data-action="visibilitychange@document->w-session#dispatchVisibilityState w-session:visible->w-session#ping w-session:visible->w-session#addInterval w-session:hidden->w-session#clearInterval w-session:hidden->w-action#sendBeacon"
    >
    </form>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    context hasUnsavedChangesTarget hasWDialogOutlet interceptValue interval intervalValue lastActionButton? reloadTargets unsavedChangesTarget wDialogOutlet blessings outlets targets values

    Accessors

    actionController application classes data element identifier interceptTargets outlets scope swapController targets shouldLoad

    Methods

    addInterval clearInterval confirmAction connect disconnect dispatch dispatchVisibilityState initialize intervalValueChanged ping reloadTargetConnected setUnsavedChanges showConfirmationDialog updateSessionData wDialogOutletConnected wDialogOutletDisconnected afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns SessionController

    Properties

    context: Context
    hasUnsavedChangesTarget: boolean
    hasWDialogOutlet: boolean
    interceptValue: boolean

    Whether to intercept the original event and show a confirmation dialog

    interval: null | number

    The interval ID for the periodic pinging

    intervalValue: number

    The interval duration for the ping event

    lastActionButton?: HTMLButtonElement

    The last action button that triggered the event

    reloadTargets: HTMLButtonElement[]

    Reload buttons in the sessions' popups

    unsavedChangesTarget: HTMLInputElement

    The checkbox input to indicate unsaved changes

    wDialogOutlet: DialogController

    The confirmation dialog for overwriting changes made by another user

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[] = ...
    targets: string[] = ...
    values: {
        intercept: { default: boolean; type: BooleanConstructor };
        interval: { default: number; type: NumberConstructor };
    } = ...

    Accessors

    • get application(): Application

      Returns Application

    • get classes(): ClassMap

      Returns ClassMap

    • get data(): DataMap

      Returns DataMap

    • get element(): ElementType

      Returns ElementType

    • get identifier(): string

      Returns string

    • get outlets(): OutletSet

      Returns OutletSet

    • get scope(): Scope

      Returns Scope

    • get targets(): TargetSet

      Returns TargetSet

    • 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>

    • Dispatch the visibility state of the document. When used as an event listener for the visibilitychange event, it will dispatch two separate events: identifier:visible and identifier:hidden, which makes it easier to attach event listeners to specific visibility states.

      Returns void

    • Sets the unsaved changes input state based on the event type dispatched by the w-unsaved controller. If the event type is w-unsaved:add, the input is checked. If the event type is w-unsaved:clear, the input is unchecked.

      Parameters

      • event: Event

        w-unsaved:add or w-unsaved:clear

      Returns void

      Example: - Use via data-action

      <form
        data-controller="w-session"
        data-action="w-unsaved:add@document->w-session#setUnsavedChanges w-unsaved:clear@document->w-session#setUnsavedChanges"
      >
        <input type="checkbox" data-w-session-target="unsavedChanges" hidden />
      </form>

    • Intercept the original event and show a confirmation dialog instead.

      The interception can be controlled dynamically via the interceptValue so that we can temporarily disable it when the user confirms the overwrite and immediately re-enable it without having to remove and re-add the event listener. This is useful for events that are triggered by a multi-step process, such as a workflow action, which may have its own dialogs and may be cancelled in the middle of the process.

      Parameters

      • event: Event

        The original event that triggered the action.

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods