voom-presenters 0.2.0 → 2.0.0

data/scripts/build.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+set -eo pipefail
+pushd views/mdc
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
+nvm install `cat .nvmrc`
+nvm use `cat .nvmrc`
+npm install
+npx webpack  $1
+

data/views/mdc/.eslintrc.yml

@@ -16,6 +16,7 @@ rules:
     - allowSingleLine: false
   require-jsdoc: 0
   no-console: 0
+  max-len: [2, 140, 4, {"ignoreUrls": true}]
 
 parserOptions:
   sourceType: module

data/views/mdc/.nvmrc

@@ -0,0 +1 @@
+v10.15

data/views/mdc/assets/js/app.js

@@ -1,3 +1,4 @@
+
 import isCompatible from './utils/compatibility';
 import config from './config';
 
@@ -7,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
             'compatibility.errorMessage',
             'Unsupported browser!',
         );
+
         document.body.innerHTML = `<p>${errorMessage}</p>`;
 
         return;
@@ -14,10 +16,19 @@ document.addEventListener('DOMContentLoaded', () => {
 
     document.documentElement.classList.remove('incompatible-browser');
 
-    window.dialogPolyfill = require('./dialog-polyfill');
     require('material-design-lite/material');
     require('./mdl-stepper');
     require('babel-polyfill');
 
-    require('./components/initialize').initialize();
+    require('./components/initialize').initialize(document, true);
+
+    // Focus first valid input control
+    const focusable = document.querySelectorAll('.v-focusable');
+    for (var i = 0; i < focusable.length; i++) {
+        if (focusable[i] && focusable[i].vComponent) {
+            if (focusable[i].vComponent.focus()) {
+                break;
+            }
+        }
+    }
 });

data/views/mdc/assets/js/components/base-component.js

@@ -1,28 +1,163 @@
+import {VErrors} from './events/errors';
+
 export class VBaseComponent {
     constructor(element, mdcComponent) {
+        this.root = getRootNode(element);
         this.element = element;
+        this.element.vComponent = this;
         this.mdcComponent = mdcComponent;
+        this.element.classList.add('v-component');
+    }
+
+    destroy() {
+        // Work in progress - this will ultimately be cleaning up other items like events, etc. (more to come)
+        if(this.mdcComponent && this.mdcComponent.destroy) {
+            this.mdcComponent.destroy();
+        }
     }
 
     validate(formData) {
         return true;
     }
+
+    onShow() {
+    }
+
+    onHide() {
+    }
+
+    // Invoked after event handlers have been initialized.
+    afterInit() {
+    }
+
+    parentComponent(selector) {
+        if (!this.element.parentElement) {
+            return null;
+        }
+        const element = this.element.parentElement.closest(selector);
+
+        if (!(element && element.vComponent)) {
+            return null;
+        }
+
+        return element.vComponent;
+    }
+
+    // Event actions results bubble up to their containers
+    actionsStarted(vEvent) {
+        const ev = new Event('V:actionsStarted', {
+            bubbles: true,
+            cancelable: false,
+            detail: vEvent,
+            composed: true,
+        });
+        this.element.dispatchEvent(ev);
+    }
+
+    // Event actions results bubble up to their containers
+    actionsHalted(vEvent) {
+        const ev = new Event('V:actionsHalted', {
+            bubbles: true,
+            cancelable: false,
+            detail: vEvent,
+            composed: true,
+        });
+        this.element.dispatchEvent(ev);
+    }
+
+    actionsSucceeded(vEvent) {
+        const ev = new CustomEvent('V:actionsSucceeded', {
+            bubbles: true,
+            cancelable: false,
+            detail: vEvent,
+            composed: true,
+        });
+        this.element.dispatchEvent(ev);
+    }
+
+    actionsFinished(vEvent) {
+        const ev = new CustomEvent('V:actionsFinished', {
+            bubbles: true,
+            cancelable: false,
+            detail: vEvent,
+            composed: true,
+        });
+        this.element.dispatchEvent(ev);
+    }
+
+    hasHandlers() {
+        return this.eventsHandler && Object.keys(this.eventsHandler).length > 0;
+    }
+
+    clearErrors() {
+        new VErrors(this.root).clearErrors();
+    }
+
+    respondTo(method) {
+        return typeof this[method] === 'function';
+    }
+
+    is(name) {
+        return this.constructor.name === name;
+    }
+}
+
+function getCandidateElements(root, selector) {
+    const elements = Array.from(root.querySelectorAll(selector));
+
+    if (root && typeof root.matches === 'function' && root.matches(selector)) {
+        elements.unshift(root);
+    }
+
+    return elements;
+}
+
+// `fn` is a unary function accepting a HTMLElement and returning an instance of
+// VBaseComponent.
+export function hookupComponentsManually(root, selector, fn) {
+    const elements = getCandidateElements(root, selector);
+
+    for (const element of elements) {
+        if (element.mdcComponent || element.vComponent) {
+            continue;
+        }
+
+        fn(element);
+    }
 }
 
-export function hookupComponents(selector, VoomClass, MdcClass) {
+export function hookupComponents(root, selector, VoomClass, MDCClass) {
+    const ctor = componentFactory(VoomClass, MDCClass);
+    hookupComponentsManually(root, selector, ctor);
+}
+
+// Returns a function capable of constructing a Voom component.
+function componentFactory(VoomClass, MDCClass) {
+    return (element) => new VoomClass(
+        element,
+        typeof MDCClass === 'function' ? new MDCClass(element) : null
+    );
+}
 
-    const components = document.querySelectorAll(selector);
-    for (let i = 0; i < components.length; i++) {
-        const component = components[i];
-        if (!component.mdcComponent) {
-            let mdcInstance = null;
-            if (MdcClass != null) {
-                mdcInstance = new MdcClass(component);
-            }
-            if (!component.vComponent) {
-                component.vComponent = new VoomClass(component, mdcInstance);
-            }
+export function unhookupComponents(root, selector) {
+    const elements = getCandidateElements(root, selector);
+
+    for (const element of elements) {
+        if (element.vComponent) {
+            element.vComponent.destroy();
         }
     }
 }
 
+// Retrieve the element's owning document or shadow root.
+export function getRootNode(node) {
+    if (!node.parentNode || isShadowRoot(node)) {
+        return node;
+    }
+
+    return getRootNode(node.parentNode);
+}
+
+function isShadowRoot(node) {
+    return node.constructor.name === 'ShadowRoot';
+}

data/views/mdc/assets/js/components/base-container.js

@@ -1,27 +1,56 @@
-import {VBaseComponent} from "./base-component";
+import {VBaseComponent} from './base-component';
 
 export class VBaseContainer extends VBaseComponent {
     constructor(element, mdcComponent) {
         super(element, mdcComponent);
+        this.element.classList.add('v-container');
+    }
+
+    components() {
+        return Array.from(this.element.querySelectorAll('.v-component'))
+            .filter((element) => element.vComponent)
+            .map((element) => element.vComponent);
     }
 
     inputs() {
-        return this.element.querySelectorAll('.v-input')
+        return this.element.querySelectorAll('.v-input');
+    }
+
+    inputComponents() {
+        return Array.from(this.inputs())
+            .filter((element) => element.vComponent)
+            .map((element) => element.vComponent);
     }
 
     // Called to collect data for submission
     prepareSubmit(params) {
-        for (let input of this.inputs()) {
-            if (input.vComponent && input.vComponent.prepareSubmit) {
-                input.vComponent.prepareSubmit(params);
+        for (const comp of this.inputComponents()) {
+            if (comp.respondTo('prepareSubmit')) {
+                comp.prepareSubmit(params);
             }
         }
     }
 
     clear() {
-        for (const input of this.inputs()) {
-            if (input.vComponent && input.vComponent.clear) {
-                input.vComponent.clear();
+        for (const comp of this.inputComponents()) {
+            if (comp.respondTo('clear')) {
+                comp.clear();
+            }
+        }
+    }
+
+    reset() {
+        for (const comp of this.inputComponents()) {
+            if (comp.respondTo('reset')) {
+                comp.reset();
+            }
+        }
+    }
+
+    onShow() {
+        for (const comp of this.inputComponents()) {
+            if (comp.respondTo('onShow')) {
+                comp.onShow();
             }
         }
     }
@@ -32,11 +61,14 @@ export class VBaseContainer extends VBaseComponent {
     //    { email: ["email must be filled", "email must be from your domain"] }
     //    { :page: ["must be filled"] }
     validate(form, params) {
-        console.log("Form validate", form, params);
-        var errors = [];
-        for (let input of this.inputs()) {
-            if (input.vComponent && input.vComponent.validate) {
-                var result = input.vComponent.validate(form, params);
+        console.debug('Form validate', form, params);
+
+        const errors = [];
+
+        for (const comp of this.inputComponents()) {
+            if (comp.respondTo('validate')) {
+                const result = comp.validate(form, params);
+
                 if (result !== true) {
                     errors.push(result);
                 }
@@ -44,4 +76,12 @@ export class VBaseContainer extends VBaseComponent {
         }
         return errors;
     }
-}
+
+    isDirty() {
+        // A container is dirty if any of its dirtyable inputs is dirty:
+        return this.inputComponents()
+            .filter((component) => component.respondTo('isDirty'))
+            .map((component) => component.isDirty())
+            .some(Boolean);
+    }
+}

data/views/mdc/assets/js/components/base-toggle.js

@@ -0,0 +1,56 @@
+import {VBaseComponent} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export class VBaseToggle extends dirtyableMixin(eventHandlerMixin(VBaseComponent)) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        this.input = element.querySelector('input') || element;
+
+        element.addEventListener('V:postFailed', (event) => {
+            // Revert to previous checked state on failed post.
+            this.mdcComponent.checked = !this.mdcComponent.checked;
+        });
+
+        this.originalValue = this.input.checked;
+    }
+
+    prepareSubmit(params) {
+        if (this.submittedValue()) {
+            params.push([this.name(), this.submittedValue()]);
+        }
+    }
+
+    submittedValue() {
+        return this.input.checked ? this.value() : this.offValue();
+    }
+
+    name() {
+        return this.input.name;
+    }
+
+    value() {
+        return this.input.value;
+    }
+
+    offValue() {
+        return this.input.dataset.off;
+    }
+
+    clear() {
+        this.input.checked = false;
+    }
+
+    reset() {
+        this.input.checked = this.originalValue;
+    }
+
+    setValue(value) {
+        this.input.value = value;
+    }
+
+    isDirty() {
+        return this.dirtyable && this.input.checked !== this.originalValue;
+    }
+}

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

@@ -1,8 +1,77 @@
 import {MDCRipple} from '@material/ripple';
-import {VBaseComponent} from "./base-component";
-import {hookupComponents} from "./base-component";
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
 
-export function initButtons() {
-    console.log('\tButtons');
-    hookupComponents('.v-js-ripple-button', VBaseComponent, MDCRipple);
+export function initButtons(e) {
+    console.debug('\tButtons');
+    hookupComponents(e, '.v-button', VButton, MDCRipple);
 }
+
+
+export class VButton extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        mdcComponent.unbounded = true;
+
+        this.element.addEventListener('V:postStarted', (e) => this.disable());
+        this.element.addEventListener('V:eventsHalted', (e) => this.enable());
+        if (this.element.dataset.disabledOnPostFinished === 'false') {
+            this.element.addEventListener('V:postFinished', (e) => this.enable());
+        } else {
+            this.element.addEventListener('V:postFailed', (e) => this.enable());
+        }
+
+    }
+
+    preview(result, acceptsMimeTypes, file) {
+        if (this.element.classList.contains('v-button--image')) {
+            this.element.style.backgroundImage = `url('${result}')`;
+        }
+        else {
+            console.warn(
+                `WARNING: Attempted to preview an image on a Button (id: ${this.element.id}) that is NOT an image button.
+Make sure you set the type: :image on the button.`);
+        }
+    }
+
+    disable() {
+        this.element.setAttribute('disabled', 'disabled');
+    }
+
+    enable() {
+        this.element.removeAttribute('disabled');
+    }
+
+    actionsHalted(vEvent) {
+        const parentDialog = this.parentComponent('.v-dialog');
+
+        if (!parentDialog) {
+            return;
+        }
+
+        parentDialog.actionsHalted(vEvent);
+    }
+
+    actionsSucceeded(vEvent) {
+        const parentDialog = this.parentComponent('.v-dialog');
+
+        if (!parentDialog) {
+            return;
+        }
+
+        parentDialog.actionsSucceeded(vEvent);
+    }
+
+    actionsFinished(vEvent) {
+        const parentDialog = this.parentComponent('.v-dialog');
+
+        if (!parentDialog) {
+            return;
+        }
+
+        parentDialog.actionsFinished(vEvent);
+    }
+}
+