voom-presenters 0.1.11 → 2.0.1

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

@@ -1,32 +1,26 @@
 import {MDCSnackbar, MDCSnackbarFoundation} from '@material/snackbar';
+import {VBaseComponent, hookupComponents} from './base-component';
+
+
+export function initSnackbar(e) {
+    console.debug('\tSnackbar');
+    hookupComponents(e, '.v-snackbar', VSnackbar, MDCSnackbar);
+}
 
 // This class displays a page level message
-export class VSnackbar {
-    constructor(element, snackbar) {
-        this.element = element;
-        this.snackbar = snackbar;
+export class VSnackbar extends VBaseComponent {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        element.classList.remove('v-hidden'); // defer causes default snackbar to flash without this
     }
 
     display(message) {
-        const dataObj = {
-          message: message,
-          // actionText: 'Undo',
-          // actionHandler: function () {
-          //   console.log('my undo function');
-          // }
-        };
-        this.snackbar.show(dataObj);
-    }
-}
+        // const dataObj = {
+        //     message: message,
+        // };
+        // this.mdcComponent.show(dataObj);
 
-export function initSnackbar() {
-    console.log('\tSnackbar');
-    var components = document.querySelectorAll('.mdc-snackbar');
-    for (var i = 0; i < components.length; i++) {
-        var component = components[i];
-        if (!component.vComponent) {
-            let vSnackbar= new VSnackbar(component, MDCSnackbar.attachTo(component));
-            component.vComponent = vSnackbar;
-        }
+        this.mdcComponent.labelText = message;
+        this.mdcComponent.open();
     }
 }

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

@@ -0,0 +1,48 @@
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
+
+
+export function initSteppers(e) {
+    console.debug('\tStepper');
+    hookupComponents(e, '.v-stepper', VStepper, null);
+}
+
+export class VStepper extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        if (typeof componentHandler !== 'undefined') { // MDL is loaded?
+            componentHandler.upgradeElement(element);
+            this.stepper = element.MaterialStepper;
+        }
+    }
+
+    inputs() {
+        // A stepper content area does not live within the stepper element so let's get it from the right place
+        return document.querySelectorAll('#' + this.element.id + '-content .v-input')
+    }
+
+    navigate(nav_action){
+        if(nav_action === 'continue' || nav_action === 'next') {
+            this.next_step();
+        }
+        else if(nav_action === 'back'){
+            this.back_step();
+        }
+        else if(nav_action === 'skip'){
+            this.skip_step();
+        }
+    }
+
+    next_step() {
+        this.stepper.next();
+    }
+    back_step() {
+        this.stepper.back();
+    }
+    skip_step() {
+        this.stepper.skip();
+    }
+}
+

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

@@ -1,36 +1,14 @@
-import {VBaseComponent} 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');
-
-    let components = document.querySelectorAll('.v-switch');
-    if (components) {
-        for (let i = 0; i < components.length; i++) {
-            let component = components[i];
-            if (!component.vComponent) {
-                let input = component.querySelector('input');
-                let vSwitch = new VSwitch(component, input);
-                component.vComponent = vSwitch;
-                input.vComponent = vSwitch;
-            }
-        }
-    }
+export function initSwitches(e) {
+    console.debug('\tSwitches');
+    hookupComponents(e, '.v-switch', VSwitch, MDCSwitch);
 }
 
-export class VSwitch extends eventHandlerMixin(VBaseComponent) {
-    constructor(element, input) {
-        super(element);
-        this.input = input;
-    }
-
-    validate(_formData) {
-        return true;
+export class VSwitch extends VBaseToggle {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
     }
-
-    prepareSubmit(form, params) {
-        if (!form) {
-            params.push([this.input.name, this.input.checked]);
-        }
-    }
-}
+}

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

@@ -0,0 +1,28 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {MDCTabBar} from '@material/tab-bar';
+
+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

@@ -1,25 +1,45 @@
 import {MDCTextField} from '@material/textfield';
-import {VBaseComponent} from './base-component';
+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');
+const AFTER_INPUT_EVENT = 'after_input';
+const AFTER_INPUT_TIMEOUT = 500; // ms
 
-    var textFields = document.querySelectorAll('.mdc-text-field');
-    for (var i = 0; i < textFields.length; i++) {
-        var textField = textFields[i];
-        if (!textField.vComponent) {
-            textField.vComponent = new VTextField(textField, new MDCTextField(textField));
-        }
-    }
+export function initTextFields(e) {
+    console.debug('\tTextFields');
+    hookupComponents(e, '.v-text-field', VTextField, MDCTextField);
 }
 
-export class VTextField extends eventHandlerMixin(VBaseComponent) {
+export class VTextField extends dirtyableMixin(
+    visibilityObserverMixin(
+        eventHandlerMixin(VBaseComponent))) {
     constructor(element, mdcComponent) {
-        super(element);
-        this.input = element.querySelector('input');
+        super(element, mdcComponent);
+
+        this.input = element.querySelector('input,textarea');
         this.input.vComponent = this;
-        this.mdcComponent = mdcComponent;
+        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.
@@ -28,56 +48,110 @@ export class VTextField extends eventHandlerMixin(VBaseComponent) {
     //    { 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();
-        if(isValid) {
+        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];
-        return errorMessage;
-    }
 
-    value(){
-        return this.input.value;
+        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(form, params) {
-        var optionSelected = this.optionSelected();
+    prepareSubmit(params) {
+        const optionSelected = this.optionSelected();
         if (optionSelected) {
-            var key = optionSelected.dataset.key;
+            const key = optionSelected.dataset.key;
             if (key) {
-                var name = this.input.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);
             }
         }
-        // On actual post/submit the form is passed and we are not expected to return our value
-        if (!form) {
-            params.push([this.input.name, this.input.value]);
-        }
+        params.push([this.name(), this.value()]);
     }
 
     optionSelected() {
-        var dataList = this.element.querySelector('datalist');
-        var parentElement = this.input;
-
-        // If we find the input inside our list, we submit the form
-        for (var element of dataList.children) {
-            if (element.value === parentElement.value) {
-                return element;
+        const dataList = this.element.querySelector('datalist');
+        if (dataList) {
+            const parentElement = this.input;
+            // If we find the input inside our list, we submit the form
+            for (const element of dataList.children) {
+                if (element.value === parentElement.value) {
+                    return element;
+                }
             }
         }
         return null;
     }
 
-    clear(){
-        this.setValue('');
+    name() {
+        return this.input.name;
+    }
+
+    value() {
+        return this.input.value;
     }
 
-    setValue(value){
+    clear() {
+        if (this.value() !== '') {
+            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/config.js

@@ -0,0 +1,27 @@
+import VConfig from './utils/config';
+
+export default new VConfig({
+    component: {
+        datetime: {
+            flatpickr: {
+                altInput: true,
+                disableMobile: true,
+                clickOpens: false,
+                defaultHour: 0
+            },
+        },
+    },
+    request: {
+        headers: {
+            POST: {
+                Accept: 'application/json,text/html;q=0.9',
+            },
+        },
+    },
+    compatibility: {
+        errorMessage: 'Your browser is not supported! Please use a different browser to continue.',
+        incompatibleBrowsers: [
+            'ie',
+        ],
+    },
+});