@nextcloud/viewer
    Preparing search index...

    Interface IHandler

    interface IHandler {
        canCompare?: (nodes: IFile[]) => boolean;
        canEdit?: boolean;
        canShowDifferences?: (files: IFile[]) => boolean;
        canSlideshow?: boolean;
        displayName: string;
        enabled: (nodes: IFile[]) => boolean;
        group?: string;
        iconSvgInline?: string;
        id: string;
        onInit?: () => Promise<void>;
        preload?: (
            node: IFile,
            space?: { height: number; width: number },
        ) => Promise<void>;
        supportsEndToEndEncryption?: boolean;
        tagName: string;
        theme?: "dark" | "light" | "default";
    }
    Index
    canCompare? canEdit? canShowDifferences? canSlideshow? displayName enabled group? iconSvgInline? id onInit? preload? supportsEndToEndEncryption? tagName theme?
    canCompare?: (nodes: IFile[]) => boolean

    Whether comparing versions of these files is worth offering, like enabled() says whether it opens them. It is a hint for callers deciding whether to offer it at all (see canCompare()): getViewer().compare() shows any pair either way.

    canEdit?: boolean

    Whether this handler supports editing the current file in place. When true the viewer shows an "Edit" action that toggles the handler's editing prop (e.g. the image editor).

    canShowDifferences?: (files: IFile[]) => boolean

    Whether it can show the differences between these two of its files in a single view, as an image slider or a list of changes does. Called with the files compared, the older first. When it says so, the viewer offers that view next to side by side, and renders one element with comparison: 'differences'.

    canSlideshow?: boolean

    Whether the viewer offers a slideshow through the other files it can open next to this one. Defaults to true.

    displayName: string

    The handler translated name

    enabled: (nodes: IFile[]) => boolean

    Is this enabled for the given mimes ?

    group?: string

    Identifier to group handlers by. When opening a folder we'll check against all handlers that are enabled for the given group AND matches the group property.

    iconSvgInline?: string

    Optional icon for the handler

    id: string

    Unique identifier for the handler

    onInit?: () => Promise<void>

    Called the first time the viewer needs the element, to define it (customElements.define() with tagName).

    The viewer waits for the returned promise and for the element to be defined (customElements.whenDefined()) before rendering it, so the view and everything it imports stay out of the registration script that runs on every page. Leave it out when the element is already defined by the time the viewer opens.

    preload?: (
        node: IFile,
        space?: { height: number; width: number },
    ) => Promise<void>

    Optional function to preload data for the given node. This will be called for the previous and next nodes on opening a file to allow the handler to be faster when navigating.

    Type Declaration

      • (node: IFile, space?: { height: number; width: number }): Promise<void>

      • Parameters

        • node: IFile

          The node to preload data for

        • Optionalspace: { height: number; width: number }

          The space the viewer shows files in, in CSS pixels, for a handler whose request depends on it, like a preview's size

          • height: number

            Its height

          • width: number

            Its width

        Returns Promise<void>

        A promise that resolves when the data is preloaded

    supportsEndToEndEncryption?: boolean

    Whether this handler works with end-to-end encrypted files.

    End-to-end encrypted files are decrypted when fetched from their WebDAV endpoint. A handler that fetches the file from a different endpoint gets ciphertext. Set the property to true if the handler reads the file from its dav source.

    tagName: string

    The tag name of the custom element that shows the file.

    The element must be defined under this name with CustomElementRegistry.define(), either when the handler is registered or within the onInit callback (preferred, as it keeps the view out of the script that runs on every page). With onInit, the viewer waits for the element to be defined (customElements.whenDefined()) before rendering it.

    Custom elements share one registry for the whole page, so to avoid name clashes the name has to start with your app id (e.g. your_app). In addition to the custom element naming rules (lowercase, with a hyphen), a good name would be your_app-viewer-handler.

    theme?: "dark" | "light" | "default"

    Viewer modal theme: 'dark' (the default), 'light', or 'default' to follow the user's theme

    Settings
    Member Visibility

    On This Page
    Properties