<img src="media/banner-docs.svg" alt="ApplicationPrototype Modules Documentation">

ApplicationPrototype Modules

• The SGApps.IO UI module set for the application-prototype framework* -- ten modules, about 3,600 lines of original SGApps.IO JavaScript and 1,700 lines of CSS, with no third-party code inside: modal dialogs (alert, confirm, prompt, custom popups), toast notifications with ten screen positions, a context menu with sub-lists, collapsible side-by-side panels, an org-chart tree, a transform-based scroll area, a tiled dashboard layout editor, a Blob-URL iframe sandbox -- plus a static routing pattern (routes, components, resources) for single-page applications. Every module is a plain ES5 file resolved by name through the framework's module loader -- Application.require('elements/popup') -- with no build step and no bundler.

Why application-prototype-modules?

• Our own code, end to end -- every module was written in-house by SGApps.IO; the only dependencies are the framework's built-ins (extensions/prototype, uri-load, request, custom-elements, async)
• Uniform objects -- the element and gadget factories return ApplicationPrototype instances, so each has the same on(), once(), off(), emit(), bind() surface, node() for its root element and the framework's before / on / after hooks on every bound method
• One registration call -- lib.js maps the 10 module names to files with Application.moduleRegister(); from then on App.require('elements/notify'), App.require('gadgets/grid-panel'), ... resolve by name, are downloaded on first use and cached
• Self-contained styling -- each module links its own style.css through uri-load when it loads; the dialogs, notifications and the context menu use the class names of the SGApps RegalRoyal theme (rr-button, rr-block-space, rr-menu, ...) and take its look when the theme is on the page, and the browser's defaults when it is not
• Custom elements without customElements.define() -- <sgapps-scroller> is registered through the framework's MutationObserver-based custom-elements module and lazy-loaded the first time the tag appears
• A playground for every module -- the play button in the corner of this site opens playground.html: an editable page per module that runs on the working copy of the modules and the CDN build of the framework (9 examples)
• Same code style as the framework -- ES5, var and function, plain <script> tags; works with application-prototype 1.31.0, the version the playground loads from the SGApps CDN

Quick Example

// App = a booted ApplicationBuilder on which the framework's lib() has run (see Getting Started)
App.require('/application-prototype-modules/lib.js').then(function (loader) {
    loader(); // Application.moduleRegister('/application-prototype-modules', ['custom-elements/lib', 'elements/popup', ...])

    App.require(['popup :: elements/popup', 'notify :: elements/notify']).then(function (libs) {
        var notify = libs.notify();                      // one notification container
        document.body.appendChild(notify.node());
        notify.position('top', 'right');

        libs.popup.confirm('Publish the article?', function (answer) {
            if (answer) notify.info('Published', 'The article is now public');
            else notify.warn('Not published');
        });
    });
});

Module Overview

• SGApps.IO modules* -- all written in-house; each returns a factory (or, for the custom element, registers a tag):

// lib.js -- module.exports = loader
loader.list = [{
    path: __dirname,                       // the folder lib.js was loaded from
    modules: [
        'custom-elements/lib',
        'custom-elements/scroller',
        'elements/context-menu',
        'elements/crop-sections',
        'elements/tree-node',
        'elements/popup',
        'elements/notify',
        'elements/notify-service',
        'gadgets/wrapper',
        'gadgets/grid-panel'
    ]
}];

application-patterns/routing is a separate mini-framework with its own package.json; it is loaded by path (see its page) and is not part of the lib.js list. elements/popup/user/login and elements/popup/user/registration are application-specific sign-in / sign-up forms built on the Popup that require modules not shipped here (elements/google-re-capcha, resources/user); they are described on the Popup page as examples.
Every module page has a Use Cases (or Code Examples) section and can be opened in the playground (the play button in the corner lists them by category).

Getting Started

The modules need the framework and a static server. Serve this repository next to your site (git clone, here at /application-prototype-modules/) and register the modules with a root-relative path or an absolute URL -- lib.js registers the module names under its own folder (__dirname), and every module loads its sub-files (elements/popup/style.css, elements/crop-sections/template.tpl, gadgets/grid-panel/grid.js, ...) relative to its own file with module.resourceUrl() / module.require().

<!-- Browser: the framework's two script tags -->
<script src="/application-prototype/ApplicationPrototype.js"></script>
<script src="/application-prototype/ApplicationBuilder.js"></script>
<script>
    var App = new ApplicationBuilder({
        onready: function () {
            var App = this;
            App.modulePath('/application-prototype/constructors');

            // 1. the framework's built-in modules (extensions/prototype, uri-load, request, custom-elements, async, ...) by name
            App.require(['extensions/prototype', 'lib'], function (libs) {
                libs.lib();

                // 2. the modules of this repository by name: lib.js -> Application.moduleRegister('/application-prototype-modules', [...])
                App.require('/application-prototype-modules/lib.js').then(function (loader) {
                    loader();

                    // 3. any module
                    App.require('elements/notify-service').then(function (NotifyService) {
                        var notifications = NotifyService();
                        notifications.position('top', 'right').info('Ready', 'All modules registered');
                    }, console.error);
                }, console.error);
            });
        }
    });
</script>

The playground pages boot the same way (the framework from the SGApps CDN, https://cdn.sgapps.io/components/application-prototype, and the modules from the working copy above docs/ -- or from https://cdn.sgapps.io/components/application-prototype-modules when only docs/ is served), so every snippet on the module pages can be pasted into a page booted like the one above.
Full Getting Started Guide | Playground

License

The modules are original work of SGApps.IO, Copyright 2020-2026 Sergiu Gordienco Vasile, published under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International licence (the LICENSE file at the repository root): you may use and redistribute them with attribution for non-commercial purposes, without modification. Commercial use or derivative work needs a written agreement -- sgapps.io/contact.
The documentation site vendors Docsify (MIT), Prism (MIT) and, for the playground editor only, CodeMirror 3.15 (MIT) under docs/vendor/; none of them is loaded by the modules themselves.
By Sergiu Gordienco | sgapps.io