voom-presenters 0.1.13 → 2.0.3

data/views/mdc/assets/js/utils/compatibility.js

@@ -0,0 +1,9 @@
+import { detect } from 'detect-browser';
+import config from '../config';
+
+const incompatibleList = config.get('compatibility.incompatibleBrowsers', []);
+const browser = detect();
+const name = browser ? browser.name : 'unknown';
+const isCompatible = browser && incompatibleList.indexOf(name) < 0;
+
+export default isCompatible;

data/views/mdc/assets/js/utils/config.js

@@ -0,0 +1,73 @@
+const PATH_SEPARATOR = '.';
+
+/**
+ * Retreive the nested value at `path`.
+ * @param {Object} object The object to search
+ * @param {string} path The period-delimited path to traverse
+ * @return {Object} An object of the structure { ok: boolean, value: any }
+ */
+function dig(object, path) {
+    const ret = {
+        ok: false,
+        value: undefined,
+    };
+    const keys = path.split(PATH_SEPARATOR);
+    let k;
+    let value = object;
+
+    /* eslint-disable no-cond-assign */
+    while (k = keys.shift()) {
+        value = value[k];
+
+        if (typeof value === 'undefined') {
+            return ret;
+        }
+    }
+
+    ret.ok = true;
+    ret.value = value;
+
+    return ret;
+}
+
+export default class VConfig {
+    constructor(config = {}) {
+        this.config = config;
+    }
+
+    /**
+     * Retrieve the entire configuration object.
+     * @return {Object}
+     */
+    all() {
+        return this.config;
+    }
+
+    /**
+     * Determine whether `key` is present.
+     * @param {string} key [description]
+     * @return {Boolean} [description]
+     */
+    has(key) {
+        return dig(this.config, key).ok;
+    }
+
+    /**
+     * Retrieve the nested value at `key`. If any keys during traversal do
+     * not exist, `fallback` is returned.
+     * @param {string} key The period-delimited path to traverse
+     * @param {*} fallback
+     * @return {*}
+     */
+    get(key, fallback) {
+        if (!this.has(key)) {
+            return fallback;
+        }
+
+        const keys = key.split(PATH_SEPARATOR);
+        const last = keys.pop();
+        const obj = dig(this.config, keys.join(PATH_SEPARATOR)).value;
+
+        return obj[last];
+    }
+}

data/views/mdc/assets/js/utils/config.test.js

@@ -0,0 +1,59 @@
+import VConfig from './config';
+
+const baseConfig = {
+    foo: () => {},
+    aaa: {
+        bbb: {
+            ccc: {
+                ddd: true,
+                eee: undefined,
+                fff: 5,
+            },
+            ggg: 'string',
+        },
+    },
+};
+let appConfig;
+
+beforeAll(() => {
+    appConfig = new VConfig(baseConfig);
+});
+
+test('constructs', () => {
+    expect(new VConfig()).toBeInstanceOf(Object);
+});
+
+test('get returns a value for a present key', () => {
+    expect(appConfig.get('foo')).toBeInstanceOf(Function);
+});
+
+test('get returns undefined for an absent key', () => {
+    expect(appConfig.get('absent')).toBeUndefined();
+    expect(appConfig.get('absent.key')).toBeUndefined();
+});
+
+test('get handles nested keys', () => {
+    expect(appConfig.get('aaa.bbb.ggg')).toEqual('string');
+});
+
+test('get handles empty an empty path', () => {
+    expect(appConfig.get('')).toBeUndefined();
+});
+
+test('config returns the entire configuration object', () => {
+    expect(appConfig.all()).toEqual(baseConfig);
+});
+
+test('has returns a truthy value for a present key', () => {
+    expect(appConfig.has('foo')).toEqual(true);
+});
+
+test('has returns false for an absent key', () => {
+    expect(appConfig.has('absent')).toEqual(false);
+    expect(appConfig.has('absent.key')).toEqual(false);
+});
+
+test('has handles nested keys', () => {
+    expect(appConfig.has('aaa.bbb.ggg')).toEqual(true);
+    expect(appConfig.has('aaa.bbb.absent')).toEqual(false);
+});

data/views/mdc/assets/js/utils/urls.js

@@ -18,8 +18,11 @@ export class VUrls {
                     url += this.seperator(url) + this.encodeQueryParam(arg[0], arg[1]);
                 }
             } else if (typeof args === 'object') {
-                url += this.seperator(url) + this.serialize(arguments[i]);
-            } else {
+                let q = this.serialize(arguments[i]);
+                if(q && q.length>0){
+                    url += this.seperator(url) + q;
+                }
+            } else if(args && args.length > 0){
                 url += this.seperator(url) + args;
             }
         }

data/views/mdc/assets/js/wc.js

@@ -0,0 +1,111 @@
+/* global require */
+
+import {initialize} from './components/initialize';
+
+// The Adapter is required when transpiling classes to ES5 code.
+// https://github.com/webcomponents/webcomponentsjs/tree/v2.2.7#custom-elements-es5-adapterjs
+import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
+
+// Webcomponent polyfil
+window.WebComponents = window.WebComponents || {};
+window.WebComponents.root = require(
+    '../../node_modules/@webcomponents/webcomponentsjs/');
+
+function loadFont(src) {
+    const lnk = document.createElement('link');
+    lnk.setAttribute('href', src);
+    lnk.setAttribute('rel', 'stylesheet');
+    lnk.setAttribute('type', 'text/css');
+    document.head.appendChild(lnk);
+}
+
+// https://stackoverflow.com/questions/54546007/why-doesnt-font-awesome-work-in-my-shadow-dom
+loadFont('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
+loadFont('https://fonts.googleapis.com/icon?family=Material+Icons');
+loadFont('https://use.fontawesome.com/releases/v5.4.1/css/all.css');
+
+class FlowMatic extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    loadComponent() {
+        const oReq = new XMLHttpRequest();
+        oReq.addEventListener('load', (r) => {
+            const template = document.createElement('template');
+            template.innerHTML = oReq.responseText;
+
+            this.attachShadow({mode: 'open'}).
+                appendChild(template.content);
+
+            this.loadScripts(this.shadowRoot)
+                .then(() => {
+                    initialize(this.shadowRoot, true);
+                });
+
+            const event = new CustomEvent('flow-matic-loaded', { bubbles: true });
+            this.dispatchEvent(event);
+        });
+        oReq.open('GET', `${this.dataset.comp}`);
+        oReq.send();
+    }
+
+    static get observedAttributes() {
+        // A list of attribute names to observe via attributeChangedCallback.
+        return ['data-comp'];
+    }
+
+    attributeChangedCallback() {
+        if (this.dataset.comp) {
+            this.loadComponent();
+        }
+
+    }
+
+    // Scripts that are part of the response and stuck into a template with innerHTML
+    // won't be parsed.  On top of that js from a plugin that has a remote dependency
+    // was being parsed before the remote script was loaded (everything was treated async).
+    // This function collects a promise for each remote script and once they're all loaded
+    // it adds the inline scripts.
+    loadScripts(root) {
+        if (window.FLOW_MATIC_SCRIPTS_LOADED) {
+          return Promise.resolve();
+        } else {
+          window.FLOW_MATIC_SCRIPTS_LOADED = true;
+        }
+
+        const scripts = Array.from(root.querySelectorAll('script'));
+        const remoteScripts = scripts.filter((s) => { return s.hasAttribute('src'); });
+        const inlineScripts = scripts.filter((s) => { return !remoteScripts.includes(s); });
+        // load remote scripts
+        const remoteScriptPromises = remoteScripts.map((script) => {
+            return new Promise((resolve) => {
+                const newScript = this.loadScript(script);
+                newScript.addEventListener('load', () => {
+                  resolve();
+                });
+            });
+        });
+
+        // When all remote scripts are done, load inlines
+        return Promise.all(remoteScriptPromises).then(() => {
+            inlineScripts.forEach(this.loadScript);
+        });
+    }
+
+    // Browsers don't evaluate <script>s from innerHTML, so we need to add each of them.
+    // https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml
+    loadScript(script) {
+        const newScript = document.createElement('script');
+        for (var i = 0; i < script.attributes.length; i++) {
+            newScript.setAttribute(script.attributes[i].nodeName, script.attributes[i].nodeValue);
+        }
+        newScript.innerHTML = script.innerHTML;
+        document.head.appendChild(newScript);
+        document.head.removeChild(newScript);
+        return newScript;
+    }
+}
+
+require('material-design-lite/material');
+customElements.define('flow-matic', FlowMatic);

data/views/mdc/assets/scss/app.scss

@@ -1,5 +1,6 @@
 @import 'material.blue_grey-orange.min';
 @import "theme";
+@import "palette";
 
 // MDC
 @import "components/fab";
@@ -8,24 +9,38 @@
 @import "components/grid";
 @import "components/textfield";
 @import "components/list";
-@import "components/icon-toggles";
+@import "components/header";
+@import "components/drawer";
+@import "components/icon-button-toggles";
 @import "components/menu";
 @import "components/typography";
 @import "components/select";
 @import "components/chip";
 @import "components/card";
 @import "components/snackbar";
+@import "components/stepper";
+@import "components/radio";
+@import "components/slider";
+@import "components/tab-bars";
+@import "components/unordered-lists";
+@import "components/progress";
+@import "components/tooltip";
+@import "components/drag_n_drop";
+@import "components/image-list";
+@import "components/dialog";
+@import "components/data-table";
 
 // Custom
 @import "components/expansion-panel"; // MDL derivative
 //@import "components/table-pagination"; // WIP
 @import "components/avatar";
-@import "components/dialog";
 @import "components/switch";
 @import "components/image";
 @import "components/icon";
+@import "components/content";
+@import "components/separator";
 @import "components/datetime";
-
+@import "components/file-input";
+@import "components/rich-text-area";
+@import "components/vendor/quill.snow";
 @import "styles";
-
-

data/views/mdc/assets/scss/components/avatar.scss

@@ -1,25 +1,69 @@
 
 .v-avatar {
   margin-left: 0;
-  width: 40px;
-  height: 40px;
   border-radius: 50%;
   color: white;
+  background-color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
   align-items: center;
   justify-content: center;
   display: inline-flex;
   flex-shrink: 0;
+  &.v-avatar-size-small {
+    width: 30px;
+    height: 30px;
+  }
+  &.v-avatar-size-default, &.v-avatar-size-medium {
+    width: 40px;
+    height: 40px;
+  }
+  &.v-avatar-size-large {
+    width: 50px;
+    height: 50px;
+  }
+  &.v-avatar-size-x-large {
+    width: 60px;
+    height: 60px;
+  }
+  &.v-avatar-size-xx-large {
+    width: 110px;
+    height: 110px;
+  }
+  > img {
+    width: 100%;
+  }
 }
 
 .v-card-media {
   .v-avatar {
-    background-color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
-    margin-right: 8px;
     margin: 8px;
+    &.v-avatar-size-small {
+      width: 30px;
+      height: 30px;
+    }
+    &.v-avatar-size-default, &.v-avatar-size-medium {
+      width: 40px;
+      height: 40px;
+    }
+    &.v-avatar-size-large {
+      width: 50px;
+      height: 50px;
+    }
+    &.v-avatar-size-x-large {
+      width: 60px;
+      height: 60px;
+    }
+    &.v-avatar-size-xx-large {
+      width: 110px;
+      height: 110px;
+    }
   }
-  .v-avatar + .v-card-title {
-    margin-top: 8px;
-  }
+}
+
+
+
+.v-column > .v-avatar,
+.v-content > .v-avatar {
+  margin: 8px;
 }
 
 .v-avatar-position-left {

data/views/mdc/assets/scss/components/button.scss

@@ -1,6 +1,7 @@
 @import "@material/button/mdc-button";
+@import "@material/icon-button/mdc-icon-button";
 
-.v-button-image {
+.v-button.v-button--image {
   width: 150px;
   height: 45px;
   background-color: $mdc-theme-background !important;
@@ -13,6 +14,7 @@
     position: absolute;
     margin-right: 0 !important;
     color: $v-header-background;
+    line-height: 1;
   }
 }
 
@@ -27,19 +29,27 @@
 }
 
 .v-button-position-left {
-  float: left;
+  position: absolute;
+  left: 0;
 }
 
-.v-button-text-align-left {
- padding-left: 0;
+.v-button-position-right {
+  position: absolute;
+  right: 0;
 }
 
-.v-button-position-right {
-  float: right;
+.v-button-position-top {
+  position: absolute;
+  top: 0;
+}
+
+.v-button-position-bottom {
+  position: absolute;
+  bottom: 0;
 }
 
 
-v-card-title-position-left {
+.v-card-title-position-left {
   position: absolute;
   left: 0;
 }
@@ -60,4 +70,7 @@ v-card-title-position-left {
 
 }
 
+.v-button-full-width {
+  width: 100%;
+}