voom-presenters 0.2.0 → 2.0.0

data/views/mdc/assets/js/components/snackbar.js

@@ -2,9 +2,9 @@ import {MDCSnackbar, MDCSnackbarFoundation} from '@material/snackbar';
 import {VBaseComponent, hookupComponents} from './base-component';
 
 
-export function initSnackbar() {
-    console.log('\tSnackbar');
-    hookupComponents('.v-snackbar', VSnackbar, MDCSnackbar);
+export function initSnackbar(e) {
+    console.debug('\tSnackbar');
+    hookupComponents(e, '.v-snackbar', VSnackbar, MDCSnackbar);
 }
 
 // This class displays a page level message
@@ -15,9 +15,12 @@ export class VSnackbar extends VBaseComponent {
     }
 
     display(message) {
-        const dataObj = {
-            message: message,
-        };
-        this.mdcComponent.show(dataObj);
+        // const dataObj = {
+        //     message: message,
+        // };
+        // this.mdcComponent.show(dataObj);
+
+        this.mdcComponent.labelText = message;
+        this.mdcComponent.open();
     }
-}
+}

data/views/mdc/assets/js/components/steppers.js

@@ -3,9 +3,9 @@ import {VBaseContainer} from "./base-container";
 import {hookupComponents} from "./base-component";
 
 
-export function initSteppers() {
-    console.log('\tStepper');
-    hookupComponents('.v-stepper', VStepper, null);
+export function initSteppers(e) {
+    console.debug('\tStepper');
+    hookupComponents(e, '.v-stepper', VStepper, null);
 }
 
 export class VStepper extends eventHandlerMixin(VBaseContainer) {

data/views/mdc/assets/js/components/switches.js

@@ -1,37 +1,14 @@
-import {VBaseComponent, hookupComponents} from './base-component';
-import {eventHandlerMixin} from './mixins/event-handler';
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
 import {MDCSwitch} from '@material/switch';
 
-export function initSwitches() {
-    console.log('\tSwitches');
-    hookupComponents('.v-switch', VSwitch, MDCSwitch);
+export function initSwitches(e) {
+    console.debug('\tSwitches');
+    hookupComponents(e, '.v-switch', VSwitch, MDCSwitch);
 }
 
-export class VSwitch extends eventHandlerMixin(VBaseComponent) {
+export class VSwitch extends VBaseToggle {
     constructor(element, mdcComponent) {
         super(element, mdcComponent);
-        this.input = element.querySelector('input');
-    }
-
-    prepareSubmit(params) {
-        if (this.input.checked) {
-            params.push([this.name(), this.value()]);
-        }
-    }
-
-    name() {
-        return this.input.name;
-    }
-
-    value() {
-        return this.input.value;
-    }
-
-    clear() {
-        this.input.checked = false;
-    }
-
-    setValue(value) {
-        this.input.value = value;
     }
 }

data/views/mdc/assets/js/components/tab-bars.js

@@ -1,14 +1,28 @@
 import {VBaseComponent, hookupComponents} from './base-component';
-import {eventHandlerMixin} from "./mixins/event-handler";
+import {eventHandlerMixin} from './mixins/event-handler';
 import {MDCTabBar} from '@material/tab-bar';
 
-export function initTabBars() {
-    console.log('\tTab Bars');
-    hookupComponents('.v-tab-bar', VTabBar, MDCTabBar);
+export function initTabBars(e) {
+    console.debug('\tTab Bars');
+    hookupComponents(e, '.v-tab-bar', VTabBar, MDCTabBar);
 }
 
 export class VTabBar extends eventHandlerMixin(VBaseComponent) {
     constructor(element, mdcComponent) {
         super(element, mdcComponent);
+
+        mdcComponent.listen('MDCTabBar:activated', (event) => {
+            const tabs = element.parentElement.querySelectorAll(
+                '.v-tab-content');
+
+            for (const element of tabs) {
+                if (Number(element.dataset.tabId) == event.detail.index) {
+                    element.classList.remove('v-hidden');
+                }
+                else {
+                    element.classList.add('v-hidden');
+                }
+            }
+        });
     }
 }

data/views/mdc/assets/js/components/text-fields.js

@@ -2,22 +2,44 @@ import {MDCTextField} from '@material/textfield';
 import {VBaseComponent, hookupComponents} from './base-component';
 import {eventHandlerMixin} from './mixins/event-handler';
 import {visibilityObserverMixin} from './mixins/visibility-observer';
+import {dirtyableMixin} from './mixins/dirtyable';
 
-export function initTextFields() {
-    console.log('\tTextFields');
-    hookupComponents('.v-text-field', VTextField, MDCTextField);
+const AFTER_INPUT_EVENT = 'after_input';
+const AFTER_INPUT_TIMEOUT = 500; // ms
+
+export function initTextFields(e) {
+    console.debug('\tTextFields');
+    hookupComponents(e, '.v-text-field', VTextField, MDCTextField);
 }
 
-export class VTextField extends visibilityObserverMixin(
-    eventHandlerMixin(VBaseComponent)) {
+export class VTextField extends dirtyableMixin(
+    visibilityObserverMixin(
+        eventHandlerMixin(VBaseComponent))) {
     constructor(element, mdcComponent) {
         super(element, mdcComponent);
-        this.input = element.querySelector('input');
-        if (this.input == null) {
-            this.input = element.querySelector('textarea');
-        }
+
+        this.input = element.querySelector('input,textarea');
         this.input.vComponent = this;
+        this.afterInputTimeout = null;
+        this.helperDisplay = this.root.getElementById(`${element.id}-input-helper-text`);
+        this.origHelperText = this.helperDisplay.innerHTML.trim();
+
         this.recalcWhenVisible(this);
+
+        this.input.addEventListener('input', (event) => {
+            clearTimeout(this.afterInputTimeout);
+            this.afterInputTimeout = setTimeout(() => {
+                this.element.dispatchEvent(new Event(AFTER_INPUT_EVENT, {composed: true}));
+            }, AFTER_INPUT_TIMEOUT);
+        });
+
+        const caseType = element.dataset.case_type;
+        if (caseType !== 'mixed') {
+            this.input.addEventListener('keyup', (e) => {
+                this.forceCase(caseType);
+            });
+        }
+        this.originalValue = this.value();
     }
 
     // Called whenever a form is about to be submitted.
@@ -26,37 +48,50 @@ export class VTextField extends visibilityObserverMixin(
     //    { email: ["email must be filled", "email must be from your domain"] }
     //    { :page: ["must be filled"] }
     validate(formData) {
-        console.log('TextField validate', formData);
-        let isValid = this.input.checkValidity();
+        console.debug('TextField validate', formData);
+        const isValid = this.input.checkValidity();
         if (isValid) {
+            if (this.origHelperText !== '') {
+                this.helperDisplay.innerHTML = this.origHelperText;
+                this.helperDisplay.classList.remove('v-hidden', 'mdc-text-field-helper-text--validation-msg');
+                this.element.classList.remove('mdc-text-field--invalid');
+            }
+            else {
+                this.helperDisplay.classList.add('v-hidden');
+            }
             return true;
         }
-        let errorMessage = {};
-        errorMessage[this.input.id] = [this.input.validationMessage];
+
+        const message = this.helperDisplay.dataset.validationError ?
+            this.helperDisplay.dataset.validationError :
+            this.input.validationMessage;
+
+        const errorMessage = {};
+        errorMessage[this.element.id] = [message];
         return errorMessage;
     }
 
     // Called to collect data for submission
     prepareSubmit(params) {
-        var optionSelected = this.optionSelected();
+        const optionSelected = this.optionSelected();
         if (optionSelected) {
-            var key = optionSelected.dataset.key;
+            const key = optionSelected.dataset.key;
             if (key) {
-                var name = this.name();
-                var id = name + '_id';
+                const name = this.name();
+                const id = name + '_id';
                 params.push([id, key]);
-                console.log('TextField prepareSubmit added:' + id + '=' + key);
+                console.debug('TextField prepareSubmit added:' + id + '=' + key);
             }
         }
         params.push([this.name(), this.value()]);
     }
 
     optionSelected() {
-        var dataList = this.element.querySelector('datalist');
+        const dataList = this.element.querySelector('datalist');
         if (dataList) {
-            var parentElement = this.input;
+            const parentElement = this.input;
             // If we find the input inside our list, we submit the form
-            for (var element of dataList.children) {
+            for (const element of dataList.children) {
                 if (element.value === parentElement.value) {
                     return element;
                 }
@@ -75,11 +110,48 @@ export class VTextField extends visibilityObserverMixin(
 
     clear() {
         if (this.value() !== '') {
-            this.setValue('');
+            this.setValue(null);
         }
     }
 
+    reset() {
+        this.input.value = this.originalValue;
+    }
+
     setValue(value) {
         this.input.value = value;
     }
+
+    isDirty() {
+        return this.dirtyable
+            && this.value().localeCompare(this.originalValue) !== 0;
+    }
+
+    onShow() {
+        this.mdcComponent.layout();
+    }
+
+    preview(result, acceptsMimeTypes) {
+        this.setValue(result);
+    }
+
+    // Return true if focus is able to be set, false otherwise
+    focus() {
+        if (this.isHidden() || this.input.disabled) return false;
+        this.input.focus();
+        return true;
+    }
+
+    isHidden() {
+        const style = window.getComputedStyle(this.element);
+        return (style.display === 'none');
+    }
+
+    forceCase(caseType){
+        if (caseType === 'upper') {
+            this.input.value = this.input.value.toUpperCase();
+        } else if (caseType === 'lower') {
+            this.input.value = this.input.value.toLowerCase();
+        }
+    }
 }

data/views/mdc/assets/js/components/tooltip.js

@@ -0,0 +1,17 @@
+/* global MaterialTooltip */
+
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initTooltips(e) {
+    console.debug('\tTooltips');
+    hookupComponents(e, '.v-tooltip', VTooltip, MaterialTooltip);
+}
+
+export class VTooltip extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}
+

data/views/mdc/assets/js/components/typography.js

@@ -0,0 +1,28 @@
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initTypography(e) {
+    console.debug('\tTypography');
+    hookupComponents(e, '.v-typography', VTypography);
+}
+
+
+export class VTypography extends eventHandlerMixin(VBaseComponent) {
+    constructor(element) {
+        super(element);
+    }
+
+    preview(result, acceptsMimeTypes, file) {
+        this.element.innerText = file.name;
+    }
+
+    clear() {
+        this.element.innerText = '';
+    }
+
+    value() {
+        return this.element.innerText;
+    }
+}
+

data/views/mdc/assets/js/components/uninitialize.js

@@ -0,0 +1,7 @@
+import {uninitMenus} from './menus';
+
+export function uninitialize(root) {
+    console.debug('Uninitializing components');
+
+    uninitMenus(root);
+}

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);