voom-presenters 0.1.10 → 2.0.0

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

@@ -1,23 +1,23 @@
-import {VSnackbar} from '../snackbar.js';
+import {expandParam} from './action_parameter';
 
 export class VSnackbarEvent {
-    constructor(options, params, event) {
+    constructor(options, params, event, root = document) {
         this.options = options;
-        this.params = params;
+        this.text = params.text;
         this.event = event;
-        let snackbarElem = document.querySelector('.mdc-snackbar');
+        this.root = root;
+        const snackbarElem = this.root.querySelector('.mdc-snackbar');
         this.snackbar = snackbarElem.vComponent;
     }
 
     call(results) {
-        let message = this.params.text;
-        let snackbar = this.snackbar;
-        let promiseObj = new Promise(function (resolve) {
-            console.log("Showing snackbar");
+        const snackbar = this.snackbar;
+        const message = expandParam(results, this.text);
+        return new Promise(function(resolve) {
+            console.debug('Showing snackbar');
             snackbar.display(message);
-            results.push({action:'snackbar', statusCode: 200});
+            results.push({action: 'snackbar', statusCode: 200});
             resolve(results);
         });
-        return promiseObj;
     }
 }

data/views/mdc/assets/js/components/events/stepper.js

@@ -0,0 +1,21 @@
+import {VBase} from './base';
+
+export class VStepperEvent extends VBase {
+    constructor(options, params, event, root) {
+        super(options, root);
+        this.params = params;
+        this.event = event;
+    }
+
+    call(results) {
+        const parentElem = this.root.getElementById(this.params.stepper_id);
+        const component = parentElem.vComponent;
+        const navAction = this.params.navigate;
+
+        return new Promise(function(resolve) {
+            component.navigate(navAction);
+            results.push({action: 'stepper', statusCode: 200});
+            resolve(results);
+        });
+    }
+}

data/views/mdc/assets/js/components/events/toggle_disabled.js

@@ -0,0 +1,41 @@
+export class VToggleDisabled {
+  constructor(options, params, event, root) {
+    this.targetId = options.target;
+    this.params = params;
+    this.event = event;
+    this.root = root;
+  }
+
+  call(results) {
+    const targetId = this.targetId;
+    const action = this.params.action;
+    const delayAmt = this.event instanceof FocusEvent ? 500 : 0;
+    const elem = this.root.getElementById(targetId);
+
+    if (!elem) {
+      const err = new Error(
+        `Unable to locate node ${targetId}!`
+        + ' Did you forget to attach it?',
+      );
+
+      results.push({
+        action: 'toggle_disabled',
+        contentType: 'v/errors',
+        content: {exception: err.message},
+      });
+
+      return new Promise((_, reject) => reject(results));
+    }
+
+    const promiseObj = new Promise(function(resolve) {
+      clearTimeout(elem.vTimeout);
+      elem.vTimeout = setTimeout(function() {
+        console.debug('Toggling disabled on: ' + targetId);
+        elem.disabled = (action === 'disable')
+        results.push({action: 'toggle_disabled', statusCode: 200});
+        resolve(results);
+      }, delayAmt);
+    });
+    return promiseObj;
+  }
+}

data/views/mdc/assets/js/components/events/toggle_visibility.js

@@ -1,25 +1,71 @@
-export class VToggleVisibility  {
-    constructor(options, params, event) {
+export class VToggleVisibility {
+    constructor(options, params, event, root) {
         this.targetId = options.target;
         this.params = params;
         this.event = event;
+        this.root = root;
     }
 
     call(results) {
-        let targetId = this.targetId;
-        let action = this.params.action;
-        let promiseObj = new Promise(function (resolve) {
-            console.log("Toggling visibility on: " + targetId);
-            let elem = document.getElementById(targetId);
-            if (action === 'show') {
-                elem.classList.remove("v-hidden");
-            } else if (action === 'hide') {
-                elem.classList.add("v-hidden");
-            } else {
-                elem.classList.toggle("v-hidden");
-            }
-            results.push({action:'toggle_visibility', statusCode: 200});
-            resolve(results);
+        const targetId = this.targetId;
+        const action = this.params.action;
+        const delayAmt = this.event instanceof FocusEvent ? 500 : 0;
+        const elem = this.root.getElementById(targetId);
+
+        if (!elem) {
+            const err = new Error(
+                `Unable to locate node ${targetId}!`
+                + ' Did you forget to attach it?',
+            );
+
+            results.push({
+                action: 'toggle_visibility',
+                contentType: 'v/errors',
+                content: {exception: err.message},
+            });
+
+            return new Promise((_, reject) => reject(results));
+        }
+
+        const promiseObj = new Promise(function(resolve) {
+            clearTimeout(elem.vTimeout);
+            elem.vTimeout = setTimeout(function() {
+                console.debug('Toggling visibility on: ' + targetId);
+
+                if (action === 'show') {
+                    if (elem.vComponent && elem.vComponent.show) {
+                        elem.vComponent.show();
+                    }
+                    else {
+                        elem.classList.remove('v-hidden');
+                    }
+                }
+                else if (action === 'hide') {
+                    if (elem.vComponent && elem.vComponent.hide) {
+                        elem.vComponent.hide();
+                    }
+                    else {
+                        elem.classList.add('v-hidden');
+                    }
+                }
+                else {
+                    if (elem.vComponent && elem.vComponent.toggleVisibility) {
+                        elem.vComponent.toggleVisibility();
+                    }
+                    else {
+                        elem.classList.toggle('v-hidden');
+                    }
+                }
+                if (elem.classList.contains('v-hidden') && elem.vComponent &&
+                    elem.vComponent.onHide) {
+                    elem.vComponent.onHide();
+                }
+                else if (elem.vComponent && elem.vComponent.onShow) {
+                    elem.vComponent.onShow();
+                }
+                results.push({action: 'toggle_visibility', statusCode: 200});
+                resolve(results);
+            }, delayAmt);
         });
         return promiseObj;
     }

data/views/mdc/assets/js/components/file-inputs.js

@@ -0,0 +1,76 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export function initFileInputs(e) {
+    console.debug('\tFile Inputs');
+    hookupComponents(e, '.v-file-input', VFileInput, null);
+}
+
+export class VFileInput extends dirtyableMixin(eventHandlerMixin(VBaseComponent)) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        this.input = element.querySelector('input[type=file]');
+        this.accept = element.dataset.accept;
+        this.preview = JSON.parse(element.dataset.preview);
+        ['change'].forEach((e) => {
+            element.addEventListener(e, (e) => this.handleFileSelection(e),
+                false);
+        });
+        this.originalValue = this.input.value;
+    }
+
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.input.name;
+    }
+
+    value() {
+        return this.input.files[0];
+    }
+
+    previewComponent(e) {
+        if (!this.preview) return null;
+        for (const previewId of this.preview) {
+            const elem = this.root.querySelector(`#${previewId}`);
+
+            if (elem && elem.vComponent && elem.vComponent.preview) {
+                this.file = e.target.files[0];
+                const fr = new FileReader();
+                fr.onload = (e) => {
+                    this.previewSelection(e, elem.vComponent);
+                };
+                if (this.accept.startsWith('text')) {
+                    fr.readAsText(this.file);
+                }
+                else {
+                    fr.readAsDataURL(this.file);
+                }
+
+            }
+            else {
+                console.warn(
+                    `WARNING: Unable to find previewable element with id: ${previewId}
+1) Make sure you have an element with that id on your page
+2) Make sure the Componenet or Plugin supports the preview option for the request mime type`);
+            }
+        }
+    }
+
+    previewSelection(e, previewComp) {
+        previewComp.preview(e.target.result, this.accepts, this.file);
+    }
+
+    isDirty() {
+        return this.dirtyable && this.input.value !== this.originalValue;
+    }
+
+    // From an example based on: https://www.quirksmode.org/dom/inputfile.html
+    handleFileSelection(e) {
+        this.previewComponent(e);
+    }
+}

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

@@ -0,0 +1,16 @@
+// This is used to get a proper binding of the actionData
+// https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
+import {VBaseContainer} from './base-container';
+import {hookupComponents} from './base-component';
+import {MDCFormField} from '@material/form-field';
+
+export function initFormFields(e) {
+    console.debug('\tForm Fields');
+    hookupComponents(e, '.v-form-field', VFormField, MDCFormField);
+}
+
+export class VFormField extends VBaseContainer {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

@@ -1,65 +1,14 @@
-export function initForms() {
-    console.log('\tForms');
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
 
-    var components = document.querySelectorAll('.v-form');
-    for (var i = 0; i < components.length; i++) {
-        var component = components[i];
-        if (!component.vComponent) {
-            component.vComponent = new VForm(component);
-        }
-    }
+export function initForms(e) {
+    console.debug('\tForms');
+    hookupComponents(e, '.v-form', VForm, null);
 }
 
-export class VForm {
-    constructor(element) {
-        this.element = element;
-    }
-
-    // Called whenever a form is about to be submitted.
-    // returns true on success
-    // returns on failure return an error object that can be processed by VErrors:
-    //    { 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);
-                if (result !== true) {
-                    errors.push(result);
-                }
-            }
-        }
-        return errors;
-    }
-
-    inputs() {
-        return this.element.elements;
-    }
-
-    // Called to collect data for submission
-    prepareSubmit(form, params) {
-        for (let input of this.inputs()) {
-            if (input.vComponent && input.vComponent.prepareSubmit) {
-                input.vComponent.prepareSubmit(form, params);
-            }
-        }
-    }
-
-    initEventListener(eventName, eventHandler) {
-        for (let input of this.inputs()) {
-            if (input.vComponent && input.vComponent.initEventListener) {
-                input.vComponent.initEventListener(eventName, eventHandler);
-            }
-        }
-    }
-
-    clear() {
-        for (const input of this.inputs()) {
-            if (input.vComponent && input.vComponent.clear) {
-                input.vComponent.clear();
-            }
-        }
+export class VForm extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
     }
 }

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

@@ -0,0 +1,15 @@
+export function getEventTarget(event) {
+  if (typeof event.composedPath === 'function') {
+    const compTarget = event.composedPath()[0];
+
+    if (compTarget) {
+      return compTarget;
+    }
+
+    if (event.path && event.path[0]) {
+      return event.path[0];
+    }
+  }
+
+  return event.target;
+}

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

@@ -0,0 +1,21 @@
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initGrid(e) {
+    console.debug('\tGrid');
+    hookupComponents(e, '.v-grid', VGrid, null);
+    hookupComponents(e, '.v-column', VColumn, null);
+}
+
+export class VGrid extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}
+
+export class VColumn extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

@@ -0,0 +1,20 @@
+import {MDCTopAppBar} from '@material/top-app-bar/index';
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initHeader(e) {
+    console.debug('\tHeader');
+    hookupComponents(e, '.v-header', VHeader, MDCTopAppBar);
+}
+
+export class VHeader extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent, root) {
+        super(element, mdcComponent);
+        element.addEventListener('MDCTopAppBar:nav', function() {
+            var event = new Event('v:header:item-click',{bubbles: true, composed: true});
+            // Dispatch the event.
+            element.dispatchEvent(event);
+        });
+    }
+}

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

@@ -0,0 +1,44 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export function initHiddenFields(e) {
+    console.debug('\tHiddenFields');
+    hookupComponents(e, '.v-hidden-field', VHiddenField, null);
+}
+
+export class VHiddenField extends dirtyableMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.originalValue = this.value();
+    }
+
+    // Called to collect data for submission
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.element.name;
+    }
+
+    value() {
+        return this.element.value;
+    }
+
+    clear() {
+        this.setValue('');
+    }
+
+    reset() {
+        this.element.value = this.originalValue;
+    }
+
+    setValue(value) {
+        this.element.value = value;
+    }
+
+    isDirty() {
+        return this.dirtyable
+            && this.value() !== this.originalValue;
+    }
+}