Multi Projects Extension

Multi Projects Manager

Idea (Original Author: Zaso)

The Multi Projects Manager allows to create and work with and on different plans, setups or ideas at the same time without leaving IITC or changing into a different browser profile. We call them projects.

The plugin Multi Projects Extension (MPE) is providing the needed "infrastructure" and the menus. Plugins, that are enabled for Multi Projects Manager will automatically show up in the Manager. The user can decide if the menu items appear in the sidebar, a separate dialogue or both. Switching between projects is completely transparent and any other plugin should not need to know about what project the user is working on (SYNC is a special case, see below).

Example

See an example https://telegram.me/ZasoItems/19

Basic Concept

Each plugin that wants to use persistent data across reloads of IITC needs to store that data as a named object in localstorage. To address that storage the plugin uses a pointer. The concept of MPE is to create a second object in localstorage and have the pointer point there. The manager then only changes the pointer and advises the plugin to perform some actions so that the "new" data loaded from the other object gets displayed properly. For more technical details see below (-> Developers).

Plugins enabled for Multi Projects

The following plugins on http://IITC.APP currently support MPE:

• Drawtools
• Bookmarks

Additional plugins that support MPE can be found on https://github.com/MysticJay/ZasoItems.CE

• ToDo-List
• Player-ranges
• Layers profile

Developers

The MPE plugin provides only the interface and the code for its operation. In order to integrate it into third-party plugins, a specific code must be declared in them:

Code to add

    //--------------------------------------------
    // This is an example to implement MPE:
    //--------------------------------------------

    // A function for myPlugin
    window.plugin.myPlugin.initMPE = function(){
      // Not launch che code if the MPE plugin there isn't.
      if(!window.plugin.mpe){ return; }

      // The MPE function to set a MultiProjects type
      window.plugin.mpe.setMultiProjects({
        namespace: 'myplugin',
        title: 'Label for My Plugin',
        // Font awesome css class
        fa: 'fa-star',
        // Function to change a localstorage key
        func_setKey: function(newKey){
            window.plugin.myPlugin.KEY_STORAGE = newKey;
        },
        // Native value of localstorage key
        defaultKey: 'myPlugin-storage',
        // This function is run before the localstorage key change
        func_pre: function(){},
        // This function is run after the localstorage key change
        func_post: function(){
            // Code to:
            // hide/remove elements from DOM, layers, variables, etc...
            // load data from window.localStorage[window.plugin.myPlugin.KEY_STORAGE]
            // show/add/draw elements in the DOM, layers, variables, etc...
        }
      });
    }

    // Insert in the plugin setup
    window.plugin.myPlugin.initMPE();

myPlugin - name of your plugin, usually also the namespace of that plugin 'myPlugin-storage' - name of the object in localstorage where your plugin saves persistent data

Implementation steps

For implementation it is nesseccary that the plugin we want to enable keeps the name of it's storage in a variable. We prefer if that variable is called window.plugin.myPlugin.KEY_STORAGE. Initialize that variable at the top of your plugin. var window.plugin.myPlugin.KEY_STORAGE = 'myPlugin-storage' If you already use a variable please replace it. If you used a construct like window.plugin.myPlugin.LoadStorage('myPlugin-storage'); it should now look like this: window.plugin.myPlugin.LoadStorage(window.plugin.myPlugin.KEY_STORAGE);

After these changes your plugin should be working as before. Please check that!

Now add the code above to your plugin. The function declaration window.plugin.myPlugin.initMPE() should be stored near the end of the plugin. The call for that function inside of the setup function:

var setup = function () {
     window.plugin.myPlugin.initMPE ();
}

Finally we get to the point, where you need to know your plugin. You need to add your existing functions, that initialize the storage if it is empty, load the data from the storage to memory, fill elements etc. to func_pre and func_post.

SYNC

Multi Projects is completely transparent, so any other plugin, that would refer, use or modify to your plugin's data would simply not know which project has been loaded. Unfortunately this will cause severe conflicts with the SYNC-plugin. Think about this: you work on two different projects "default" and "PLAN-B". SYNC stores the data from default and IITCm shows the default project. You add some data inside of IITCm and it should be synced back to your desktop. But what, if you changed the project on the desktop to "Plan-B" in the meantime? The change will merge in to Plan-B or the data from IITCm will overwrite your Plan-B or your Plan-B will overwrite the data in IITCm.

Currently only the Bookmarks plugin is effected, so we decided to limit syncing to the default storage. I.e. whenever you work on a different project, sync will not happen. This way we keep consistency of the data.

We have been brainstorming about other solutions, but either we face a possible data corruption or conflicts which storage to sync or which storage to save back or even an OPSEC issue, when PLAN-B should not get public.

If you want to SYNC a different project you need to copy the data in default to a save place, and copy the data manually.