voom-presenters 0.2.0 → 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

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

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,27 +1,69 @@
-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 delayAmt = this.event instanceof FocusEvent ? 500 : 0;
-        let elem = document.getElementById(targetId);
-        let promiseObj = new Promise(function (resolve) {
+        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.log("Toggling visibility on: " + targetId);
+            elem.vTimeout = setTimeout(function() {
+                console.debug('Toggling visibility on: ' + targetId);
+
                 if (action === 'show') {
-                    elem.classList.remove("v-hidden");
-                } else if (action === 'hide') {
-                    elem.classList.add("v-hidden");
-                } else {
-                    elem.classList.toggle("v-hidden");
+                    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});
+                results.push({action: 'toggle_visibility', statusCode: 200});
                 resolve(results);
             }, delayAmt);
         });

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

@@ -1,29 +1,76 @@
-import {VBaseContainer} from "./base-container";
-import {VBaseComponent, hookupComponents} from "./base-component";
-import {eventHandlerMixin} from "./mixins/event-handler";
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {dirtyableMixin} from './mixins/dirtyable';
 
-export function initFileInputs() {
-  console.log('\tFile Inputs');
-  hookupComponents('.v-file-input', VFileInput, null);
+export function initFileInputs(e) {
+    console.debug('\tFile Inputs');
+    hookupComponents(e, '.v-file-input', VFileInput, null);
 }
 
-export class VFileInput extends eventHandlerMixin(VBaseComponent) {
-  constructor(element, mdcComponent) {
-    super(element, mdcComponent);
+export class VFileInput extends dirtyableMixin(eventHandlerMixin(VBaseComponent)) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
 
-    this.input = element.querySelector('input[type=file]');
-    this.label = element.querySelector('label');
+        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;
+    }
 
-    ['change', 'mouseup'].forEach((e) => {
-      element.addEventListener(e, () => this.handleFileSelection());
-    });
-  }
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
 
-  // From an example based on: https://www.quirksmode.org/dom/inputfile.html
-  handleFileSelection() {
-    if (!this.input.value) return;
+    name() {
+        return this.input.name;
+    }
 
-    var value = this.input.value.replace(/^.*[\\\/]/, '');
-    this.label.innerText = value;
-  }
+    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

@@ -2,9 +2,9 @@ import {eventHandlerMixin} from "./mixins/event-handler";
 import {VBaseContainer} from "./base-container";
 import {hookupComponents} from "./base-component";
 
-export function initForms() {
-    console.log('\tForms');
-    hookupComponents('.v-form', VForm, null);
+export function initForms(e) {
+    console.debug('\tForms');
+    hookupComponents(e, '.v-form', VForm, null);
 }
 
 export class VForm extends eventHandlerMixin(VBaseContainer) {

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

@@ -1,19 +1,20 @@
 import {VBaseContainer} from "./base-container";
 import {hookupComponents} from "./base-component";
+import {eventHandlerMixin} from './mixins/event-handler';
 
-export function initGrid() {
-    console.log('\tGrid');
-    hookupComponents('.v-grid', VGrid, null);
-    hookupComponents('.v-column', VColumn, null);
+export function initGrid(e) {
+    console.debug('\tGrid');
+    hookupComponents(e, '.v-grid', VGrid, null);
+    hookupComponents(e, '.v-column', VColumn, null);
 }
 
-export class VGrid extends VBaseContainer {
+export class VGrid extends eventHandlerMixin(VBaseContainer) {
     constructor(element, mdcComponent) {
         super(element, mdcComponent);
     }
 }
 
-export class VColumn extends VBaseContainer {
+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

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

data/views/mdc/assets/js/components/icon-toggles.js

@@ -1,13 +1,13 @@
-import {MDCIconToggle} from '@material/icon-toggle';
-import {hookupComponents, VBaseComponent} from './base-component';
-import {eventHandlerMixin} from './mixins/event-handler';
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
+import {MDCIconButtonToggle} from '@material/icon-button';
 
-export function initIconToggles() {
-    console.log('\tIcon Toggles');
-    hookupComponents('.v-icon-toggle', VIconToggle, MDCIconToggle);
+export function initIconToggles(e) {
+    console.debug('\tIcon Buttons');
+    hookupComponents(e, '.v-icon-toggle', VIconToggle, MDCIconButtonToggle);
 }
 
-export class VIconToggle extends eventHandlerMixin(VBaseComponent) {
+export class VIconToggle extends VBaseToggle {
     constructor(element, mdcComponent) {
         super(element, mdcComponent);
     }