PostMessage RPC API Documentation - v0.2.2
    Preparing search index...

    Function initFullscreenPlugin

    • Initializes a fullscreen plugin with custom animations and optional splash screen.

      Use this function when you want to display a plugin as a modal dialog that covers the entire viewport. The plugin supports smooth animations and optional splash screens.

      • Modal dialogs and forms
      • Full-page editors
      • Lightbox galleries
      • Wizards and step-by-step processes
      • Plugins that need exclusive focus
      import { initFullscreenPlugin } from '@micskeil/postmessage-rpc';

      // Initialize the fullscreen plugin
      const plugin = await initFullscreenPlugin(
        {
          data: {
            documentId: 'doc-123',
            content: 'Initial content...'
          },
          settings: {
            theme: 'dark',
            splashScreenUrl: 'https://example.com/splash.html'
          },
          hooks: {
            onSave: async (data) => {
              console.log('Saved:', data);
              await updateDocument(data);
            },
            onClose: async () => {
              console.log('Plugin closed');
            }
          }
        },
        {
          id: 'document-editor',
          src: 'https://example.com/editor-plugin.html',
          parentElem: document.body,
          timeout: 5000
        }
      );

      // Show the plugin with animation
      plugin.show({
        x: '0px',      // Start x position
        y: '100vh',    // Start y position (from bottom)
        opacity: 0.5,  // Start opacity
        time: 300      // Animation duration in ms
      });

      // Hide when done
      await plugin.hide();

      // Cleanup
      await plugin.destroy();

      The show() method supports custom animation parameters:

      plugin.show({
        x: '-100vw',   // Slide from left (default)
        y: '0px',      // Slide from top
        opacity: 0.5,  // Fade from 50% opacity
        scale: 0.95,   // Scale from 95%
        time: 500      // Animation duration (ms)
      });

      You can show a loading/splash screen while the plugin loads:

      // Show splash screen while loading
      plugin.showSplashScreen();

      // Plugin loads...

      // Hide splash when ready
      plugin.hideSplashScreen();

      Enable splash screen via settings:

      const plugin = await initFullscreenPlugin(
        {
          settings: {
            splashScreenUrl: 'https://example.com/splash.html'
          }
        },
        options
      );

      Parameters

      • config: PluginConfig

        Plugin configuration object

        Configuration for initializing a plugin from the parent side

        • data: unknown

          Initial data to pass to the plugin

        • settings: unknown

          Plugin settings and configuration

        • hooks: Record<string, Method>

          Map of hook names to callback functions that the parent provides to the plugin

      • options: FullscreenPluginOptions

        Fullscreen-specific initialization options

        Options for fullscreen plugin initialization

        • id: string

          Unique identifier for the plugin container

        • src: string

          URL of the plugin to load

        • OptionalparentElem?: HTMLElement

          Parent element where the plugin container will be appended (defaults to document.body)

        • OptionalbeforeInit?: (context: { container: HTMLElement; iframe: HTMLIFrameElement }) => void

          Optional callback invoked before initializing the plugin iframe

        • Optionaltimeout?: number

          Optional timeout in milliseconds for plugin initialization

      Returns Promise<FullscreenPlugin>

      Promise resolving to fullscreen plugin interface with methods, animations, and splash screen functions

      If plugin fails to initialize within the timeout period

      // Example: Document editor with animations
      const editor = await initFullscreenPlugin(
        {
          data: { docId: '123' },
          hooks: {
            onSave: (doc) => saveDocument(doc)
          }
        },
        {
          id: 'editor-modal',
          src: 'https://editor.example.com/plugin.html'
        }
      );

      // Show from bottom with slide animation
      editor.show({ y: '100vh', time: 400 });

      // Later...
      await editor.hide();
      await editor.destroy();

    Settings

    Member Visibility

    On This Page

    When to Use Fullscreen PluginsBasic UsageAnimation OptionsSplash Screen