SGApps.IO modules · dialogs · notifications · menus · panels · grid editor
The SGApps.IO UI module set for the application-prototype framework, written in-house -- modal dialogs (alert, confirm, prompt), toast notifications with ten screen positions, a context menu with sub-lists, collapsible side-by-side panels, an org-chart tree, a transform-based scroller element, a tiled grid layout editor, an iframe sandbox and a static routing pattern: about 3,600 lines of original JavaScript (plus 1,700 of CSS) with no third-party code inside, each module resolved by name through Application.require(). Plain ES5, no build step, no bundler.
Ten modules that give a page built with the application-prototype framework its everyday UI, plus one application pattern -- all original code developed by SGApps.IO, with the framework's own built-ins (extensions/prototype, uri-load, request, custom-elements, async) as the only dependencies. lib.js at the repository root registers the module names with Application.moduleRegister(); from then on App.require('elements/popup') downloads the module on first use, and every element and gadget factory returns an ApplicationPrototype instance with the same node(), on(), bind() surface.
Scroller 643, Grid Panel 642, Popup 526, Routing 421, Context Menu 390, Notify 360, Crop Sections 287, Notify Service 121, Tree Node 87, Wrapper 86 -- counted with wc -l; a grep for require( shows they load only framework built-ins and each other.
Each module links its style.css through uri-load when it loads (1,700 lines of CSS in all: the notification layouts alone are 855). The dialogs, notifications and the menu use the class names of the SGApps RegalRoyal theme and take its look when it is on the page.
<sgapps-scroller> is registered through the framework's MutationObserver-based custom-elements module and lazy-loaded the first time the tag appears; options are plain attrb-* attributes.
lib.js registers 10 names; factories return ApplicationPrototype instances with before / on / after hooks on every method, and every module has a playground page.
10 module names registered by lib.js, plus the routing pattern loaded by path -- each with a documentation page and a playground example (9 in all; the routing pattern needs component files of its own). Everything on this page is SGApps.IO module code: original software developed in-house, CC BY-NC-ND 4.0.
alert(), confirm(), prompt() and bare popup() dialogs over a full-screen overlay: title, text, websymbols icon, any number of buttons with callbacks, light / dark / clean themes, outside-click handling, focus management.
Toast notification manager: log / info / warn / error / debug rows with a message and detail lines, per-type auto-expiry, click callbacks, ten container positions; forwards alert / confirm / prompt to the Popup.
Ten Notify managers, one per position, attached to document.body on construction: position('top', 'right').warn(...) picks a corner; the service itself proxies the bottom-left manager.
A menu built from an options array -- text, icon, function or URL action, nested lists, a render hook, style classes, a draggable headbar -- shown at the mouse ('mouse-viewport' keeps it on screen) and hidden on the next click outside.
Side-by-side panels that share the free width: fixed or fluid sections with a header and scrolling articles, collapsing into a 48 px vertical tab with a CSS 3D rotation; attach / detach, lookup by name.
Org-chart style tree of <tree-node> elements: append(), remove(), parent(), parents(), childs(), siblings(); connectors drawn in pure CSS and highlighted on hover.
A zero-size marker that turns an overflow: hidden box into a wheel- and drag-scrollable area by translating its siblings with a generated transform rule: limits, speeds, axis flags, synchronised boxes, a transform prefix and a bubbling sgapps-scroll event.
The registration helper: hands the tag → module map to the framework's custom-elements module so <sgapps-scroller> is downloaded the first time it appears in the page.
Tiled dashboard layout editor: click two cells (or double-click one) to place a block, a self-growing cell grid, blocks with a content container and geometry setters, settings() snapshot and restore of the whole layout.
Same-origin Blob-URL iframe sandbox: node(), container(), document(), window(), whenLoaded(), with header / code / base options for the generated document. Keeps a widget's globals and CSS out of your page.
Static routing for single-page applications: routes (string patterns with :params, RegExps, matcher functions, a null fallback) name component modules and shared resource modules; load() resolves the URL, loads each resource once and renders the components in order with timed logs.
A selection of the playground pages, embedded in preview mode. They load the framework from the SGApps CDN and the modules from this working copy (the folder above docs/) -- serve the repository root (npm start) and every example runs on your checkout; on a published docs-only site they fall back to the CDN copy of the modules. Each frame has an Edit in the playground button that opens the same page with its source in an editor.
elements/popupAn alert(), a two-button dark-theme alert, a confirm(), a prompt() with validation and a custom popup(node) with its own footer. Docs · Open in the playground
elements/notifyOne manager in the bottom-right corner: log, info, warn, error rows, a sticky notification with detail lines and a click handler that updates it, and a position switch. Docs · Open in the playground
elements/crop-sectionsA fixed-width navigation panel and two fluid panels sharing the rest; collapse one with the arrow in its header, add and detach sections with the toolbar. Docs · Open in the playground
elements/tree-nodeAn organisation chart built from data; click a node to read its path, siblings and children, append a child to it or remove it. Docs · Open in the playground
custom-elements/scrollerThree overflow: hidden boxes scrolled by wheel and drag: A and B are synchronised, C reverses the wheel axis; the buttons drive the API on A and a delegated sgapps-scroll listener prints the positions. Docs · Open in the playground
gadgets/grid-panelClick a cell then another (or double-click) to add blocks, remove them with their x, change the cell size, and snapshot / restore the layout. Docs · Open in the playground
ApplicationPrototype.js and ApplicationBuilder.js, register the framework modules, then the modules of this repository through lib.js.<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');
App.require(['extensions/prototype', 'lib'], function (libs) {
libs.lib(); // framework modules by name
App.require('/application-prototype-modules/lib.js').then(function (loader) {
loader(); // the 10 modules by name
App.require('elements/notify-service').then(function (NotifyService) {
var notifications = NotifyService();
notifications.position('top', 'right').info('Ready', 'All modules registered');
});
});
});
}
});
</script>The Getting Started page explains every step, how module names are resolved and how the modules load their stylesheets; each module page has a Use Cases section with copy-paste snippets.
npm start # this page + the docs at http://localhost:3000/ and /docs/
npm run docs-site-published # serve docs/ alone, the layout of a published docs-only site
npm test # lint the documentation (links, sidebar, playground registry, this page, lib.js coverage)