coprl 0.1.0 → 3.0.0.beta.1

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/form-data.js

@@ -0,0 +1,12 @@
+// Turns an Object into FormData. Note that a nested array will come out as a hash with numeric keys
+// and will need to be handled accordingly server-side.
+export function buildFormData(formData, data, parentKey) {
+  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File) && !(data instanceof Blob)) {
+    Object.keys(data).forEach(key => {
+      buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
+    });
+  } else {
+    const value = data == null ? '' : data;
+    formData.append(parentKey, value);
+  }
+}

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

@@ -0,0 +1,57 @@
+export class VUrls {
+
+    paramsArrayToHash(params) {
+        var results = {};
+        // Map params to object/hash
+        for (let param of params) {
+            results[param[0]] = param[1];
+        }
+        return results;
+    }
+
+    buildURL(baseUrl) {
+        var url = baseUrl;
+        for (var i = 1; i < arguments.length; i++) {
+            var args = arguments[i];
+            if (Array.isArray(args)) {
+                for (let arg of args) {
+                    url += this.seperator(url) + this.encodeQueryParam(arg[0], arg[1]);
+                }
+            } else if (typeof args === 'object') {
+                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;
+            }
+        }
+        return url;
+    }
+
+    seperator(url) {
+        if (url.endsWith('?')) {
+            return '';
+        }
+        return url.includes("?") ? '&' : '?';
+    }
+
+    serialize(obj, prefix) {
+        var str = [],
+            p;
+        for (p in obj) {
+            if (obj.hasOwnProperty(p)) {
+                var k = prefix ? prefix + "[" + p + "]" : p,
+                    v = obj[p];
+                str.push((v !== null && typeof v === "object") ?
+                    this.serialize(v, k) :
+                    this.encodeQueryParam(k, v));
+            }
+        }
+        return str.join("&");
+    }
+
+    encodeQueryParam(k, v) {
+        return encodeURIComponent(k) + "=" + encodeURIComponent(v);
+    }
+}

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

@@ -0,0 +1,47 @@
+@import 'material.blue_grey-orange.min';
+@import "theme";
+@import "palette";
+
+// MDC
+@import "components/fab";
+@import "components/button";
+@import "components/checkbox";
+@import "components/grid";
+@import "components/textfield";
+@import "components/list";
+@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";
+@import "components/multi-select";
+
+// Custom
+@import "components/expansion-panel"; // MDL derivative
+//@import "components/table-pagination"; // WIP
+@import "components/avatar";
+@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

@@ -0,0 +1,85 @@
+
+.v-avatar {
+  margin-left: 0;
+  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 {
+    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-column > .v-avatar,
+.v-content > .v-avatar {
+  margin: 8px;
+}
+
+.v-avatar-position-left {
+  float:left;
+}
+
+.v-avatar-position-top {
+  position: absolute;
+  top: 0;
+}
+
+.v-avatar-position-right {
+  float:right;
+}
+
+.v-avatar-position-bottom {
+  position: absolute;
+  bottom: 0;
+}