voom-presenters 0.1.12 → 2.0.2

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

@@ -1,3 +1,14 @@
-export function initCards() {
-    console.log('\tCards');
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
+
+export function initCards(e) {
+    console.debug('\tCards');
+    hookupComponents(e,'.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,15 @@
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
 import {MDCCheckbox} from '@material/checkbox';
 
-export function initCheckboxes() {
-    console.log('\tCheckboxes');
+export function initCheckboxes(e) {
+    console.debug('\tCheckboxes');
+    hookupComponents(e, '.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 VBaseToggle {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.mdcComponent.indeterminate = (this.input.dataset.indeterminate === 'true');
     }
-}
+}

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

@@ -1,12 +1,109 @@
 import {MDCChip} from '@material/chips';
+import {MDCChipSet} from '@material/chips';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {VBaseComponent, hookupComponentsManually} 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);
+export const EVENT_SELECT = 'select';
+export const EVENT_DESELECT = 'deselect';
+export const EVENT_TRAILING_ICON_CLICK = 'trailing_icon_click';
+
+const SELECTABLE_VARIANT_CLASS = 'v-chip-set--selectable-variant';
+const CHIP_BEHAVIOR_AUTO_REMOVE = 'auto_remove';
+const CHIP_BEHAVIOR_NO_AUTO_REMOVE = 'no_auto_remove';
+
+export function initChips(e) {
+    console.debug('\tChips');
+
+    // The chip set > chips hierarchy is established differently than other
+    // components: a chip set constructs and manages Chip components for its
+    // chip elements.
+    //
+    // Because the chip set constructs chips on its own, a `hookupComponents`
+    // call for chips is not needed.
+
+    hookupComponentsManually(e, '.v-chip-set', function(element) {
+        const chipFactory = voomChipFactoryFactory(CHIP_BEHAVIOR_NO_AUTO_REMOVE);
+        const mdcComponent = new MDCChipSet(element, undefined, chipFactory);
+
+        return new VChipSet(element, mdcComponent);
+    });
+}
+
+export class VChip extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        this.element.addEventListener('click', (e) => {
+            if (this.selectable) {
+                this.mdcComponent.selected = !this.mdcComponent.selected;
+
+                const eventType = this.mdcComponent.selected
+                    ? EVENT_SELECT
+                    : EVENT_DESELECT;
+                const selectionEvent = new Event(eventType, {bubbles: false});
+
+                this.element.dispatchEvent(selectionEvent);
+            }
+        });
+    }
+
+    get trailingIcon() {
+        return this.element.querySelector(
+            '.mdc-chip__icon.mdc-chip__icon--trailing'
+        );
+    }
+
+    // Called to collect data for submission
+    prepareSubmit(params) {
+        if (this.shouldSubmitParams()) {
+            params.push([this.name(), this.value()]);
         }
     }
+
+    name() {
+        return this.element.getAttribute('data-name');
+    }
+
+    value() {
+        return this.element.getAttribute('data-value');
+    }
+
+    clear() {
+        console.debug('Chip clear is a no-op');
+    }
+
+    setValue(value) {
+        this.element.setAttribute('data-value', value);
+    }
+
+    shouldSubmitParams() {
+        // Selectable chips (those within a :filter or :choice chipset) which
+        // are not currently selected do not submit their value.
+        return this.name() && this.value()
+            && (!this.selectable || this.mdcComponent.selected);
+    }
+
+    get selectable() {
+        return this.element.parentElement.classList.contains(
+            SELECTABLE_VARIANT_CLASS
+        );
+    }
+}
+
+// Returns a function which constructs VChip components.
+function voomChipFactoryFactory(behavior = CHIP_BEHAVIOR_AUTO_REMOVE) {
+    const autoRemove = behavior === CHIP_BEHAVIOR_AUTO_REMOVE;
+
+    return function(element) {
+        const mdcComponent = new MDCChip(element);
+        mdcComponent.shouldRemoveOnTrailingIconClick = autoRemove;
+
+        return new VChip(element, mdcComponent);
+    };
+}
+
+export class VChipSet extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
 }

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

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

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

@@ -0,0 +1,15 @@
+import {MDCDataTable} from '@material/data-table';
+import {hookupComponents} from "./base-component";
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {VBaseContainer} from "./base-container";
+
+export function initTables(e) {
+    console.debug('\tTables');
+    hookupComponents(e, '.v-data-table', VDataTable, MDCDataTable);
+}
+
+export class VDataTable extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

@@ -1,26 +1,28 @@
-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 function initDateTime(e) {
+    console.debug('\tDateTime');
+    hookupComponents(e, '.v-datetime', VDateTime, MDCTextField);
+}
 
 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 defaultConfig = {};
+        if (!this.root.documentElement) {
+          defaultConfig.appendTo = this.root.querySelector('.v-root');
+        }
+        const config = Object.assign(
+            defaultConfig,
+            appConfig.get('component.datetime.flatpickr', {}),
+            JSON.parse(element.dataset.config),
+        );
 
         if (type === 'datetime') {
             config.enableTime = true;
@@ -28,13 +30,74 @@ 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();
+            const event = new Event('closed');
+            element.dispatchEvent(event);
+        };
+
         this.fp = flatpickr(this.input, config);
+        this.fp.mdc_text_field = mdcComponent;
+
+        element.addEventListener('click', () => this.toggle());
+        this.originalValue = this.fp.input.value;
     }
 
     clear() {
-        this.fp.clear();
+        if (this.fp.input.value !== '') {
+            this.fp.clear();
+        }
+
+        this.mdcComponent.foundation_.deactivateFocus();
+    }
+
+    reset() {
+        this.fp.setDate(this.originalValue);
+    }
+
+    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)
+    //             }
+    //         }
+    //     }
+    // }
+
+    isDirty() {
+        if (!this.dirtyable) {
+            return false;
+        }
+
+        const currVal = new Date(this.fp.input.value);
+        const prevVal = new Date(this.originalValue);
+
+        return currVal.getTime() !== prevVal.getTime();
+    }
+}
 
 

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

@@ -1,32 +1,135 @@
-// This is used to get a proper binding of the actionData
-// https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
-function createDialogHandler(dialog) {
-    return function () {
-        dialog.close();
-    };
+import {VBaseContainer} from './base-container';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {hookupComponents} from './base-component';
+import {MDCDialog, MDCDialogFoundation} from '@material/dialog';
+
+// Here be dragons.
+
+/**
+ * Causes the bound dialog's adapter to emit a closing event when applicable.
+ * @param {String} action
+ * @this {VDialog}
+ */
+function beforeClose(action = '') {
+    const mdcDialog = this.mdcComponent;
+
+    if (this.shouldNotifyClosing) {
+        mdcDialog.foundation_.adapter_.notifyClosing(action);
+        this.shouldNotifyClosing = false;
+    }
+}
+
+/**
+ * Actually closes the bound dialog.
+ * @param {String} action
+ * @this {MDCDialogFoundation}
+ */
+function hideDialog(action = '') {
+    this.isOpen_ = false;
+    this.adapter_.addClass(MDCDialogFoundation.cssClasses.CLOSING);
+    this.adapter_.removeClass(MDCDialogFoundation.cssClasses.OPEN);
+    this.adapter_.removeBodyClass(MDCDialogFoundation.cssClasses.SCROLL_LOCK);
+
+    cancelAnimationFrame(this.animationFrame_);
+    this.animationFrame_ = 0;
+
+    clearTimeout(this.animationTimer_);
+    this.animationTimer_ = setTimeout(() => {
+        this.adapter_.releaseFocus();
+        this.handleAnimationTimerEnd_();
+        this.adapter_.notifyClosed(action);
+    }, MDCDialogFoundation.numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);
+}
+
+export function initDialogs(e) {
+    console.debug('\tDialogs');
+    hookupComponents(e, '.v-dialog', VDialog, MDCDialog);
 }
 
-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 eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        // Closeable state:
+        this.shouldNotifyClosing = true;
+        this.canClose = false;
+
+        mdcComponent.listen('MDCDialog:opened', this.onShow.bind(this));
+
+        mdcComponent.listen('MDCDialog:closed', () => {
+            this.reset();
+            this.clearErrors();
+
+            // Reset closeable state:
+            this.shouldNotifyClosing = true;
+            this.canClose = false;
+        });
+
+        mdcComponent.listen('MDCDialog:closing', (mdcEvent) => {
+            const action = mdcEvent.detail.action || '';
+            const event = new CustomEvent('close', {
+                cancelable: true,
+                bubbles: true,
+                detail: {action},
+            });
+
+            this.element.dispatchEvent(event);
+        });
+    }
+
+    open() {
+        this.mdcComponent.open();
+    }
+
+    closeDialog() {
+        this.mdcComponent.close();
+    }
+
+    close(action = '') {
+        action = action || '';
+
+        beforeClose.call(this, action);
+
+        if (this.canClose) {
+            hideDialog.call(this.mdcComponent.foundation_, action);
+        }
+    }
+
+    actionsSucceeded(vEvent) {
+        // A successful run-to-completion of an event chain should always
+        // attempt to close the dialog.
+        this.shouldNotifyClosing = false;
+
+        // We should only be closing the dialog for components marked as autoClose
+        let dialogAction = vEvent.vComponent.element.dataset.autoClose;
+        if (dialogAction !== undefined) {
+            this.canClose = true;
+            this.close(vEvent.event.detail.action);
+        }
+        super.actionsSucceeded(vEvent); // Bubble up
+    }
+
+    actionsHalted(vEvent) {
+        // A halted event chain should not close the dialog.
+        this.shouldNotifyClosing = true;
+        this.canClose = false;
+        super.actionsHalted(vEvent); // Bubble up
+    }
+
+    get buttons() {
+        return this.components().filter((c) => c.is('VButton'));
+    }
+
+    afterInit() {
+        const dialogHasHandlers = this.hasHandlers();
+        const buttonsHaveHandlers = this.buttons
+            .map((c) => c.hasHandlers())
+            .some(Boolean);
+
+        if (dialogHasHandlers || buttonsHaveHandlers) {
+            // Stub in our own dialog close method to ensure events run to
+            // completion before the dialog is closed:
+            this.mdcComponent.foundation_.close = this.close.bind(this);
         }
     }
 }