voom-presenters 0.2.0 → 2.0.0

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

@@ -1,9 +1,9 @@
 import {VBaseContainer} from "./base-container";
 import {hookupComponents} from "./base-component";
 
-export function initCards() {
-    console.log('\tCards');
-    hookupComponents('.v-card', VCard, null);
+export function initCards(e) {
+    console.debug('\tCards');
+    hookupComponents(e,'.v-card', VCard, null);
 }
 
 export class VCard extends VBaseContainer {

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

@@ -1,38 +1,15 @@
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
 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);
+export function initCheckboxes(e) {
+    console.debug('\tCheckboxes');
+    hookupComponents(e, '.v-checkbox', VCheckbox, MDCCheckbox);
 }
 
-export class VCheckbox extends eventHandlerMixin(VBaseComponent) {
+export class VCheckbox extends VBaseToggle {
     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,41 +1,105 @@
 import {MDCChip} from '@material/chips';
 import {MDCChipSet} from '@material/chips';
-import {eventHandlerMixin} from "./mixins/event-handler";
-import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {VBaseComponent, hookupComponentsManually} from './base-component';
 
-export function initChips() {
-    console.log('\tChips');
-    hookupComponents('.v-chip', VChip, MDCChip);
-    hookupComponents('.v-chip-set', VChipSet, MDCChipSet);
+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.value() !== ''){
+        if (this.shouldSubmitParams()) {
             params.push([this.name(), this.value()]);
         }
     }
 
-    name(){
+    name() {
         return this.element.getAttribute('data-name');
     }
 
-    value(){
+    value() {
         return this.element.getAttribute('data-value');
     }
 
-    clear(){
-        console.log('\tChip clear is a no-op');
+    clear() {
+        console.debug('Chip clear is a no-op');
     }
 
-    setValue(value){
+    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) {

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

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

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

@@ -1,38 +1,15 @@
-
-function createSelectAllHandler(component, target, listElements) {
-    return function() {
-        for (let element of listElements) {
-            element.checked = target.checked;
-        }
-    }
+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);
 }
 
-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 class VDataTable extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
     }
 }
-
-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

@@ -4,13 +4,22 @@ 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);
 
         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),
         );
@@ -27,13 +36,15 @@ export class VDateTime extends VTextField {
         };
         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());
-        // element.addEventListener('change', () => this.checkDefaults());
+        this.originalValue = this.fp.input.value;
     }
 
     clear() {
@@ -44,6 +55,10 @@ export class VDateTime extends VTextField {
         this.mdcComponent.foundation_.deactivateFocus();
     }
 
+    reset() {
+        this.fp.setDate(this.originalValue);
+    }
+
     open() {
         this.fp.open();
     }
@@ -72,9 +87,17 @@ export class VDateTime extends VTextField {
     //         }
     //     }
     // }
-}
 
-export function initDateTime() {
-    console.log('\tDateTime');
-    hookupComponents('.v-datetime', VDateTime, MDCTextField);
+    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,38 +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
-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);
+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;
+    }
 }
 
-function createDialogHandler(dialog) {
-    return function () {
-        dialog.close();
-    };
+/**
+ * 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 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));
-                }
-            }
+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);
         }
     }
 }