Widget Plugins

You can create your own plugins. This way you can include code, events and communication into the Weavy Widget. This is a good way to package code that extends the widget. You can specify options or enable/disable plugins directly in the widget options.

Loading plugins

You just have to load the javascript file of your plugin to get it registered. Make sure to load any custom plugins after widget.js is loaded and before you make a new WeavyWidget() instance.

Built-in plugins

The weavy widget is itself built up using the plugin structure. You may enable/disable and configure all the plugins or replace them with your own custom plugins.

  • Alert - Displaying alerts with messages.
  • Attach - Functionality for attaching files from dropbox, O365, Google etc.
  • Authentication - Sign in functionality when not using SSO.
  • Badge - Handles badges for notifications and messages.
  • Bubbles - State machine for handling spaces connected to urls.
  • Context - Connect spaces to urls and provide browser context links.
  • Dock - The UI component containing bubble buttons and panel handling.
  • Fallback - Opening panels in popup windows when frames are disallowed.
  • Messenger - The Weavy Messenger.
  • Notifications - Displays notifications in the browser window.
  • Panels - Manager for creating and handling panels.
  • Personal - Panel containing user profile, notifications, stars and drafts.
  • Position - Dock minimizing and drag’n’drop.
  • Preview - Displaying images and documents in full browser window.
  • SSO (Single Sign On) - Using JWT for providing seamless authentication.
  • Start - Panel for the weavy start page for opening spaces and finding people.
  • Theme - Loading and injecting styles into the WeavyWidget.
  • Upgrade - Checking if new versions of the widget are available.

Options and Widget API

While you get possibilities to use built in options you may also use anything exposed in the Widget API in your plugin.

Plugin template

This is the minimal structure you need in your plugin for it to be registered and executed. Have a look at the hello world example below to get more explanation of the various parts of the plugin.

(function ($) {
    /**
     * Your plugin name. This name will be used for registration and options etc.
     */
    var PLUGIN_NAME = "myplugin";

    console.debug("Registering WeavyWidget plugin:", PLUGIN_NAME);

    if (typeof WeavyWidget === 'undefined' || !WeavyWidget.plugins) {
        throw new Error("WeavyWidget must be loaded before registering plugin: " + PLUGIN_NAME);
    }

    WeavyWidget.plugins[PLUGIN_NAME] = function (options) {
        /**
         *  Reference to this instance
         */
        var widget = this;

        // MY CUSTOM CODE
        // ...

        // Exports
        return {}
    };

    /**
     * Default plugin options
     */
    WeavyWidget.plugins[PLUGIN_NAME].defaults = {
    };

    /**
     * Non-optional dependencies.
     */
    WeavyWidget.plugins[PLUGIN_NAME].dependencies = [];

})(jQuery);

Hello World Plugin Example

This is a maximal example of a plugin setting the widget-hello-world class to the widget container. It uses various methods and events just to show an example of what you can do. When it’s finished you get a console log telling you whether setting the class was successful or not.

(function ($) {
    // Set you plugin name here. This name will be used for registration and options etc.
    var PLUGIN_NAME = "helloworld";

    // This is an example hello-world plugin for the Weavy widget.
    // It adds the class 'widget-hello-world' to the widget container.
    // It demonstrates various ways to work with the widget.

    console.debug("Registering WeavyWidget plugin:", PLUGIN_NAME);

    if (typeof WeavyWidget === 'undefined' || !WeavyWidget.plugins) {
        throw new Error("WeavyWidget must be loaded before registering plugin: " + PLUGIN_NAME);
    }

    // Register the plugin the same way you would define a prototype
    // {this} is passed as a reference to the widget instance
    // {options} is passed to the function, which you also may access via widget.options.plugins[PLUGIN_NAME]
    WeavyWidget.plugins[PLUGIN_NAME] = function (options) {

        // Best practice is to use 'widget' instead of 'this' to avoid confusion
        var widget = this;

        // EXAMPLE CODE BELOW, REPLACE IT WITH ANY CUSTOM CODE

        // Other options
        var widgetOptions = widget.options; // All global options for the widget
        var pluginOptions = widget.options.plugins[PLUGIN_NAME]; // Same as options
        
        // Set a common widget property from options
        widget.helloText = options.helloText;

        // Register a public method on the widget
        // Avoid prototype methods, since they cannot be disabled
        widget.helloWorld = function (targetText) {

            // Combine the common widget property and the provided text
            sayHello(widget.helloText + "-" + targetText);
        };

        // Internal protected method
        function sayHello(classText) {
            if (widget.nodes.container) {
                // Add weavy-hello-world class to the main widget container
                $(widget.nodes.container).addClass("weavy-" + classText);

                // This is the last step in the flow and shows true if everything was successful
                widget.log("Hello World done:", PLUGIN_NAME, $(widget.nodes.container).hasClass("weavy-hello-world"));
            }
        }

        // Add a one-time load event listener
        widget.one("load", function (e) {
            widget.debug("Hello World oneload:", PLUGIN_NAME);
            widget.info("WeavyWidget ver:", widget.options.version);

            // Check if this plugin is enabled.
            // Not necessary here, but useful if you reference another plugin instead
            if (widget.plugins.helloworld) {
                // Call the public method with the exported text as parameter
                widget.helloWorld(widget.plugins.helloworld.exportedText);
            }
        });

        // Export the worldText
        return { exportedText: pluginOptions.worldText };

        // END OF EXAMPLE CODE
    }

    // Set any default options here
    WeavyWidget.plugins[PLUGIN_NAME].defaults = {
        helloText: 'hello',
        worldText: 'world'
    };

    // Non-optional dependencies
    // Dependency plugins always run prior to this plugin.
    // Unfound plugins or incorrect dependencies will result in an error.
    // The following will result in a circular reference error.
    WeavyWidget.plugins[PLUGIN_NAME].dependencies = [
        "helloworld"
    ];

})(jQuery);