update docs and readme

docs/build/orango-demo-tools.js

@@ -2,4 +2,125 @@
  * O-RANGO - MIT License
  * Built with http://stenciljs.com
  */
-!function(e,t,o,n,r,s,i,l,c,a,d,u,m,p,h){for((d=e.OrangoDemoTools=e.OrangoDemoTools||{}).components=c,(m=c.filter(function(e){return e[2]}).map(function(e){return e[0]})).length&&((u=t.createElement("style")).innerHTML=m.join()+"{visibility:hidden}.hydrated{visibility:inherit}",u.setAttribute("data-styles",""),t.head.insertBefore(u,t.head.firstChild)),d.$r=[],h=a.componentOnReady,a.componentOnReady=function(t){const o=this;function n(e){d.$r?d.$r.push([o,e]):d.componentOnReady(o,e)}return h&&h.call(o),t?n(t):e.Promise?new Promise(n):{then:n}},u=(m=t.querySelectorAll("script")).length-1;u>=0&&!(p=m[u]).src&&!p.hasAttribute("data-resources-url");u--);(m=p.getAttribute("data-resources-url"))&&(r=m),!r&&p.src&&(r=(m=p.src.split("/").slice(0,-1)).join("/")+(m.length?"/":"")+"orango-demo-tools/"),u=t.createElement("script"),function(e,t,o,n){return!(t.search.indexOf("core=esm")>0)&&(!(!(t.search.indexOf("core=es5")>0||"file:"===t.protocol)&&e.customElements&&e.customElements.define&&e.fetch&&e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")&&"noModule"in o)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,u)?u.src=r+"orango-demo-tools.qf2xh6v2.js":(u.src=r+"orango-demo-tools.53hcphkd.js",u.setAttribute("type","module"),u.setAttribute("crossorigin",!0)),u.setAttribute("data-resources-url",r),u.setAttribute("data-namespace","orango-demo-tools"),t.head.appendChild(u)}(window,document,0,0,0,0,0,0,[["o-demo-bar","29miknlu",1,[["device",2,0,1,2],["deviceSize",2,0,"device-size",2],["el",7],["events",1],["name",1,0,1,2],["pattern",2,0,1,3]],1,[["toolbarButtonClicked","toolbarButtonClickedHandler"],["selectedCaseChanged","selectedCaseChangedHandler"],["resizeButtonClicked","resizeButtonClickedHandler"]]],["o-demo-bar-buttons","29miknlu",1,0,1],["o-demo-bar-select","29miknlu",1,[["el",7],["options",1,0,1,1]],1],["o-demo-bar-toolbar","29miknlu",1,[["el",7],["name",1,0,1,2],["options",1,0,1,1]],1],["o-demo-case","ovmkfnp3",1,[["name",1,0,1,2],["scripts",1,0,1,2]],1],["o-demo-devices","ab5czldo",1],["o-demo-resizer","29miknlu",1,[["el",7],["setActiveViewPort",6],["size",1,0,1,2],["viewport",1,0,1,2]],1],["o-demo-snackbar","29miknlu",1,[["el",7],["events",1,0,1,1]],1]],HTMLElement.prototype);
+(function(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components) {
+
+function init(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCorePolyfilled, hydratedCssClass, components, HTMLElementPrototype, App, x, y, scriptElm, orgComponentOnReady) {
+    // create global namespace if it doesn't already exist
+    App = win[namespace] = win[namespace] || {};
+    App.components = components;
+    y = components.filter(function (c) { return c[2]; }).map(function (c) { return c[0]; });
+    if (y.length) {
+        // auto hide components until they been fully hydrated
+        // reusing the "x" and "i" variables from the args for funzies
+        x = doc.createElement('style');
+        x.innerHTML = y.join() + '{visibility:hidden}.' + hydratedCssClass + '{visibility:inherit}';
+        x.setAttribute('data-styles', '');
+        doc.head.insertBefore(x, doc.head.firstChild);
+    }
+    // create a temporary array to store the resolves
+    // before the core file has fully loaded
+    App.$r = [];
+    // add componentOnReady to HTMLElement.prototype
+    orgComponentOnReady = HTMLElementPrototype.componentOnReady;
+    HTMLElementPrototype.componentOnReady = function componentOnReady(cb) {
+        const elm = this;
+        // there may be more than one app on the window so
+        // call original HTMLElement.prototype.componentOnReady
+        // if one exists already
+        orgComponentOnReady && orgComponentOnReady.call(elm);
+        function executor(resolve) {
+            if (App.$r) {
+                // core file hasn't loaded yet
+                // so let's throw it in this temporary queue
+                // and when the core does load it'll handle these
+                App.$r.push([elm, resolve]);
+            }
+            else {
+                // core has finished loading because there's no temporary queue
+                // call the core's logic to handle this
+                App.componentOnReady(elm, resolve);
+            }
+        }
+        if (cb) {
+            // just a callback
+            return executor(cb);
+        }
+        // callback wasn't provided, let's return a promise
+        if (win.Promise) {
+            // use native/polyfilled promise
+            return new Promise(executor);
+        }
+        // promise may not have been polyfilled yet
+        return { then: executor };
+    };
+    // figure out the script element for this current script
+    y = doc.querySelectorAll('script');
+    for (x = y.length - 1; x >= 0; x--) {
+        scriptElm = y[x];
+        if (scriptElm.src || scriptElm.hasAttribute('data-resources-url')) {
+            break;
+        }
+    }
+    // get the resource path attribute on this script element
+    y = scriptElm.getAttribute('data-resources-url');
+    if (y) {
+        // the script element has a data-resources-url attribute, always use that
+        resourcesUrl = y;
+    }
+    if (!resourcesUrl && scriptElm.src) {
+        // we don't have an exact resourcesUrl, so let's
+        // figure it out relative to this script's src and app's filesystem namespace
+        y = scriptElm.src.split('/').slice(0, -1);
+        resourcesUrl = (y.join('/')) + (y.length ? '/' : '') + fsNamespace + '/';
+    }
+    // request the core this browser needs
+    // test for native support of custom elements and fetch
+    // if either of those are not supported, then use the core w/ polyfills
+    // also check if the page was build with ssr or not
+    x = doc.createElement('script');
+    if (usePolyfills(win, win.location, x, 'import("")')) {
+        // requires the es5/polyfilled core
+        x.src = resourcesUrl + appCorePolyfilled;
+    }
+    else {
+        // let's do this!
+        x.src = resourcesUrl + appCore;
+        x.setAttribute('type', 'module');
+        x.setAttribute('crossorigin', true);
+    }
+    x.setAttribute('data-resources-url', resourcesUrl);
+    x.setAttribute('data-namespace', fsNamespace);
+    doc.head.appendChild(x);
+}
+function usePolyfills(win, location, scriptElm, dynamicImportTest) {
+    // fyi, dev mode has verbose if/return statements
+    // but it minifies to a nice 'lil one-liner ;)
+    if (location.search.indexOf('core=esm') > 0) {
+        // force esm build
+        return false;
+    }
+    if ((location.search.indexOf('core=es5') > 0) ||
+        (location.protocol === 'file:') ||
+        (!(win.customElements && win.customElements.define)) ||
+        (!win.fetch) ||
+        (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) ||
+        (!('noModule' in scriptElm))) {
+        // es5 build w/ polyfills
+        return true;
+    }
+    // final test to see if this browser support dynamic imports
+    return doesNotSupportsDynamicImports(dynamicImportTest);
+}
+function doesNotSupportsDynamicImports(dynamicImportTest) {
+    try {
+        new Function(dynamicImportTest);
+        return false;
+    }
+    catch (e) { }
+    return true;
+}
+
+
+init(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components);
+
+})(window, document, "OrangoDemoTools","orango-demo-tools",0,"orango-demo-tools.core.js","es5-build-disabled.js","hydrated",[["o-demo-bar","o-demo-bar",1,[["device",2,0,1,2],["deviceSize",2,0,"device-size",2],["el",7],["events",1],["name",1,0,1,2],["pattern",2,0,1,3]],1,[["toolbarButtonClicked","toolbarButtonClickedHandler"],["selectedCaseChanged","selectedCaseChangedHandler"],["resizeButtonClicked","resizeButtonClickedHandler"]]],["o-demo-bar-buttons","o-demo-bar",1,0,1],["o-demo-bar-select","o-demo-bar",1,[["el",7],["options",1,0,1,1]],1],["o-demo-bar-toolbar","o-demo-bar",1,[["el",7],["name",1,0,1,2],["options",1,0,1,1]],1],["o-demo-case","o-demo-case",1,[["name",1,0,1,2],["scripts",1,0,1,2]],1],["o-demo-devices","o-demo-devices",1],["o-demo-resizer","o-demo-bar",1,[["el",7],["setActiveViewPort",6],["size",1,0,1,2],["viewport",1,0,1,2]],1],["o-demo-snackbar","o-demo-bar",1,[["el",7],["events",1,0,1,1]],1]],HTMLElement.prototype);