voom-presenters 0.1.13 → 0.2.0

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

@@ -0,0 +1,47 @@
+import {VBaseComponent} from "./base-component";
+
+export class VBaseContainer extends VBaseComponent {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+
+    inputs() {
+        return this.element.querySelectorAll('.v-input')
+    }
+
+    // Called to collect data for submission
+    prepareSubmit(params) {
+        for (let input of this.inputs()) {
+            if (input.vComponent && input.vComponent.prepareSubmit) {
+                input.vComponent.prepareSubmit(params);
+            }
+        }
+    }
+
+    clear() {
+        for (const input of this.inputs()) {
+            if (input.vComponent && input.vComponent.clear) {
+                input.vComponent.clear();
+            }
+        }
+    }
+
+    // Called whenever a container 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;
+    }
+}

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

@@ -1,15 +1,8 @@
 import {MDCRipple} from '@material/ripple';
+import {VBaseComponent} from "./base-component";
+import {hookupComponents} from "./base-component";
 
 export function initButtons() {
     console.log('\tButtons');
-
-    var rippleButtons = document.querySelectorAll('.v-js-ripple-button');
-    if(rippleButtons) {
-        for (var i = 0; i < rippleButtons.length; i++) {
-            var button = rippleButtons[i];
-            if(!button.mdcComponent) {
-                button.mdcComponent = new MDCRipple(button);
-            }
-        }
-    }
+    hookupComponents('.v-js-ripple-button', VBaseComponent, MDCRipple);
 }

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

@@ -1,3 +1,14 @@
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
+
 export function initCards() {
     console.log('\tCards');
+    hookupComponents('.v-card', VCard, null);
 }
+
+export class VCard extends VBaseContainer {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}
+

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

@@ -1,15 +1,38 @@
 import {MDCCheckbox} from '@material/checkbox';
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {VBaseComponent, hookupComponents} from './base-component';
 
 export function initCheckboxes() {
     console.log('\tCheckboxes');
+    hookupComponents('.v-checkbox', VCheckbox, MDCCheckbox);
+}
 
-    var components = document.querySelectorAll('.mdc-checkbox');
-    if (components) {
-        for (var i = 0; i < components.length; i++) {
-            var component = components[i];
-            if (!component.mdcComponent) {
-                component.mdcComponent = MDCCheckbox.attachTo(component);
-            }
+export class VCheckbox extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.input = element.querySelector('input');
+        this.mdcComponent.indeterminate = (this.input.dataset.indeterminate === 'true');
+    }
+
+    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/chips.js

@@ -1,12 +1,45 @@
 import {MDCChip} from '@material/chips';
+import {MDCChipSet} from '@material/chips';
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {VBaseComponent, hookupComponents} from './base-component';
 
 export function initChips() {
     console.log('\tChips');
-    var components = document.querySelectorAll('.mdc-chip');
-    for (var i = 0; i < components.length; i++) {
-        var component = components[i];
-        if(!component.mdcComponent) {
-            component.mdcComponent = MDCChip.attachTo(component);
+    hookupComponents('.v-chip', VChip, MDCChip);
+    hookupComponents('.v-chip-set', VChipSet, MDCChipSet);
+}
+
+export class VChip extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+
+    // Called to collect data for submission
+    prepareSubmit(params) {
+        if(this.value() !== ''){
+            params.push([this.name(), this.value()]);
         }
     }
+
+    name(){
+        return this.element.getAttribute('data-name');
+    }
+
+    value(){
+        return this.element.getAttribute('data-value');
+    }
+
+    clear(){
+        console.log('\tChip clear is a no-op');
+    }
+
+    setValue(value){
+        this.element.setAttribute('data-value', value);
+    }
+}
+
+export class VChipSet extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
 }

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

@@ -0,0 +1,13 @@
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
+
+export function initContent() {
+    console.log('\tContent');
+    hookupComponents('.v-content', VContent, null);
+}
+
+export class VContent extends VBaseContainer {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

data/views/mdc/assets/js/components/data-tables.js

@@ -0,0 +1,38 @@
+
+function createSelectAllHandler(component, target, listElements) {
+    return function() {
+        for (let element of listElements) {
+            element.checked = target.checked;
+        }
+    }
+}
+
+function createTableRowSelectHandler(component, listElements, selectAll) {
+    return function() {
+        let checked = 0;
+        let unchecked = 0;
+        for (let element of listElements) {
+            element.checked ? checked++ : unchecked++;
+        }
+        selectAll.indeterminate = (checked && unchecked);
+        selectAll.checked = (checked && !unchecked);
+    }
+}
+
+export function initTables() {
+    console.log('\tTables');
+    let components = document.querySelectorAll('.mdl-data-table');
+    if (components) {
+        for (let component of components) {
+            let selectAllRow = component.querySelector('.v-checkbox--select-control');
+            let selectableRows = component.querySelectorAll('.v-table-item--selectable-checkbox');
+            if (selectAllRow && selectableRows) {
+                selectAllRow.addEventListener('change', createSelectAllHandler(component, selectAllRow, selectableRows));
+
+                for (let element of selectableRows) {
+                    element.addEventListener('change', createTableRowSelectHandler(component, selectableRows, selectAllRow));
+                }
+            }
+        }
+    }
+}

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

@@ -1,26 +1,19 @@
-import flatpickr from "flatpickr";
-import {VTextField} from './text-fields';
-import {MDCTextField} from '@material/textfield';
-
-
-export function initDateTime() {
-    console.log('\tDateTime');
-    let components = document.querySelectorAll('.v-datetime');
-    for (let i = 0; i < components.length; i++) {
-        let component = components[i];
-        if (!component.vComponent) {
-            component.vComponent = new VDateTime(component, new MDCTextField(component));
-        }
-    }
-}
-
+import flatpickr from 'flatpickr';
+import { MDCTextField } from '@material/textfield';
+import { VTextField } from './text-fields';
+import { hookupComponents } from './base-component';
+import appConfig from '../config';
 
 export class VDateTime extends VTextField {
     constructor(element, mdcComponent) {
         super(element, mdcComponent);
-        let config = JSON.parse(element.dataset.config);
-        config.altInput = true;
-        let type = element.dataset.type;
+
+        const type = element.dataset.type;
+        const config = Object.assign(
+            {},
+            appConfig.get('component.datetime.flatpickr', {}),
+            JSON.parse(element.dataset.config),
+        );
 
         if (type === 'datetime') {
             config.enableTime = true;
@@ -28,13 +21,60 @@ export class VDateTime extends VTextField {
             config.enableTime = true;
             config.noCalendar = true;
         }
+
+        config.onOpen = function onOpen(selectedDates, dateStr, instance) {
+            instance.mdc_text_field.foundation_.activateFocus();
+        };
+        config.onClose = function onClose(selectedDates, dateStr, instance) {
+            instance.mdc_text_field.foundation_.deactivateFocus();
+        };
+
         this.fp = flatpickr(this.input, config);
+        this.fp.mdc_text_field = mdcComponent;
+
+        element.addEventListener('click', () => this.toggle());
+        // element.addEventListener('change', () => this.checkDefaults());
     }
 
     clear() {
-        this.fp.clear();
+        if (this.fp.input.value !== '') {
+            this.fp.clear();
+        }
+
+        this.mdcComponent.foundation_.deactivateFocus();
+    }
+
+    open() {
+        this.fp.open();
+    }
+
+    close() {
+        this.fp.close();
     }
-}
 
+    toggle() {
+        this.fp.toggle();
+    }
 
+    // checkDefaults() {
+    //     if(this.fp.config.mode = 'range'){
+    //         if(this.fp.selectedDates[1]){
+    //             // If we are in range mode and the endDate is defined as the beginning of the day, default it to be the
+    //             // end of the day.
+    //             let endDate = this.fp.selectedDates[1];
+    //             if(endDate.getHours() == 0 && endDate.getMinutes() == 0 && endDate.getSeconds() == 0 && endDate.getMilliseconds() == 0){
+    //                 endDate.setHours(23);
+    //                 endDate.setMinutes(59);
+    //                 endDate.setSeconds(59);
+    //                 endDate.getMilliseconds(9999);
+    //                 this.fp.setDate(this.fp.selectedDates)
+    //             }
+    //         }
+    //     }
+    // }
+}
 
+export function initDateTime() {
+    console.log('\tDateTime');
+    hookupComponents('.v-datetime', VDateTime, MDCTextField);
+}

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

@@ -1,30 +1,36 @@
 // 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 {MDCTextField} from "@material/textfield";
+import {VDateTime} from "./datetime";
+
+export function initDialogs() {
+    console.log('\tDialogs');
+    hookupComponents('.v-dialog', VDialog, null);
+}
+
 function createDialogHandler(dialog) {
     return function () {
         dialog.close();
     };
 }
 
-export function initDialogs() {
-    console.log('\tDialogs');
-
-    var dialogs = document.querySelectorAll('.v-js-dialog');
-    if (dialogs) {
-        for (var i = 0; i < dialogs.length; i++) {
-            var dialog = dialogs[i];
-            var dialogButtons = dialog.querySelectorAll('button:not([disabled])');
-            for (var j = 0; j != dialogButtons.length; j++) {
-                var dialogButton = dialogButtons[j];
-                if (!dialogButton.dialog) {
-                    dialogButton.dialog = dialog;
-                    var buttonEvents = dialogButton.dataset.events;
-                    // If the dialog button does not have any events tied to it,
-                    // then close the dialog on click, otherwise let the events handlers
-                    // take care of the close.
-                    if (!buttonEvents) {
-                        dialogButton.addEventListener('click', createDialogHandler(dialog));
-                    }
+export class VDialog extends VBaseContainer {
+    constructor(element) {
+        super(element);
+        let dialog = element;
+        var dialogButtons = dialog.querySelectorAll('button:not([disabled])');
+        for (var j = 0; j != dialogButtons.length; j++) {
+            var dialogButton = dialogButtons[j];
+            if (!dialogButton.dialog) {
+                dialogButton.dialog = dialog;
+                var buttonEvents = dialogButton.dataset.events;
+                // If the dialog button does not have any events tied to it,
+                // then close the dialog on click, otherwise let the events handlers
+                // take care of the close.
+                if (!buttonEvents) {
+                    dialogButton.addEventListener('click', createDialogHandler(dialog));
                 }
             }
         }

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

@@ -5,9 +5,10 @@ import {VDialog} from './events/dialog';
 import {VErrors} from './events/errors';
 import {VToggleVisibility} from './events/toggle_visibility';
 import {VSnackbarEvent} from './events/snackbar';
-import {VAutoComplete} from './events/autocomplete';
 import {VNavigates} from './events/navigates';
 import {VClears} from './events/clears';
+import {VRemoves} from './events/removes';
+import {VStepperEvent} from './events/stepper';
 
 export class VEvents {
     //[[type, url, target, params]]
@@ -50,6 +51,8 @@ export class VEvents {
                 }
 
             }).catch(function (results) {
+            console.log("If you got here it may not be what you think:", results);
+
             var result = results.pop();
             new VErrors(event).displayErrors(result);
         });
@@ -76,14 +79,16 @@ export class VEvents {
                 return new VDialog(options, params, event);
             case 'toggle_visibility':
                 return new VToggleVisibility(options, params, event);
+            case 'remove':
+                return new VRemoves(options, params, event);
             case 'snackbar':
                 return new VSnackbarEvent(options, params, event);
-            case 'autocomplete':
-                return new VAutoComplete(options, url, params, event);
             case 'navigates':
                 return new VNavigates(options, params, event);
             case 'clear':
                 return new VClears(options, params, event);
+            case 'stepper':
+                return new VStepperEvent(options, params, event);
             default:
                 throw action_type + ' is not supported.';
         }
@@ -95,6 +100,7 @@ export class VEvents {
 // https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
 function createEventHandler(actionsData) {
     return function (event) {
+        event.stopPropagation(); 
         new VEvents(actionsData, event).call();
     };
 }
@@ -112,6 +118,10 @@ export function initEvents() {
             var eventOptions = eventData[2];
             var actionsData = eventData[1];
             var eventHandler = createEventHandler(actionsData);
+            // allow overide of event handler by component
+            if (eventElem.vComponent && eventElem.vComponent.createEventHandler) {
+                eventHandler = eventElem.vComponent.createEventHandler(actionsData);
+            }
             // Delegate to the component if possible
             if (eventElem.vComponent && eventElem.vComponent.initEventListener) {
                 eventElem.vComponent.initEventListener(eventName, eventHandler);