coprl 0.1.0 → 3.0.0.beta.1

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

@@ -0,0 +1,56 @@
+import {VBaseComponent} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export class VBaseToggle extends dirtyableMixin(eventHandlerMixin(VBaseComponent)) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        this.input = element.querySelector('input') || element;
+
+        element.addEventListener('V:postFailed', (event) => {
+            // Revert to previous checked state on failed post.
+            this.mdcComponent.checked = !this.mdcComponent.checked;
+        });
+
+        this.originalValue = this.input.checked;
+    }
+
+    prepareSubmit(params) {
+        if (this.submittedValue()) {
+            params.push([this.name(), this.submittedValue()]);
+        }
+    }
+
+    submittedValue() {
+        return this.input.checked ? this.value() : this.offValue();
+    }
+
+    name() {
+        return this.input.name;
+    }
+
+    value() {
+        return this.input.value;
+    }
+
+    offValue() {
+        return this.input.dataset.off;
+    }
+
+    clear() {
+        this.input.checked = false;
+    }
+
+    reset() {
+        this.input.checked = this.originalValue;
+    }
+
+    setValue(value) {
+        this.input.value = value;
+    }
+
+    isDirty() {
+        return this.dirtyable && this.input.checked !== this.originalValue;
+    }
+}

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

@@ -0,0 +1,77 @@
+import {MDCRipple} from '@material/ripple';
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initButtons(e) {
+    console.debug('\tButtons');
+    hookupComponents(e, '.v-button', VButton, MDCRipple);
+}
+
+
+export class VButton extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        mdcComponent.unbounded = true;
+
+        this.element.addEventListener('V:postStarted', (e) => this.disable());
+        this.element.addEventListener('V:eventsHalted', (e) => this.enable());
+        if (this.element.dataset.disabledOnPostFinished === 'false') {
+            this.element.addEventListener('V:postFinished', (e) => this.enable());
+        } else {
+            this.element.addEventListener('V:postFailed', (e) => this.enable());
+        }
+
+    }
+
+    preview(result, acceptsMimeTypes, file) {
+        if (this.element.classList.contains('v-button--image')) {
+            this.element.style.backgroundImage = `url('${result}')`;
+        }
+        else {
+            console.warn(
+                `WARNING: Attempted to preview an image on a Button (id: ${this.element.id}) that is NOT an image button.
+Make sure you set the type: :image on the button.`);
+        }
+    }
+
+    disable() {
+        this.element.setAttribute('disabled', 'disabled');
+    }
+
+    enable() {
+        this.element.removeAttribute('disabled');
+    }
+
+    actionsHalted(vEvent) {
+        const parentDialog = this.parentComponent('.v-dialog');
+
+        if (!parentDialog) {
+            return;
+        }
+
+        parentDialog.actionsHalted(vEvent);
+    }
+
+    actionsSucceeded(vEvent) {
+        const parentDialog = this.parentComponent('.v-dialog');
+
+        if (!parentDialog) {
+            return;
+        }
+
+        parentDialog.actionsSucceeded(vEvent);
+    }
+
+    actionsFinished(vEvent) {
+        const parentDialog = this.parentComponent('.v-dialog');
+
+        if (!parentDialog) {
+            return;
+        }
+
+        parentDialog.actionsFinished(vEvent);
+    }
+}
+

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,15 @@
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
+import {MDCCheckbox} from '@material/checkbox';
+
+export function initCheckboxes(e) {
+    console.debug('\tCheckboxes');
+    hookupComponents(e, '.v-checkbox', VCheckbox, MDCCheckbox);
+}
+
+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

@@ -0,0 +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 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 = CoprlChipFactoryFactory(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 CoprlChipFactoryFactory(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

@@ -0,0 +1,186 @@
+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);
+    hookupComponents(e, '.v-date-text', VDateText, 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),
+        );
+
+        if (type === 'datetime') {
+            config.enableTime = true;
+        } else if (type === 'time') {
+            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() {
+        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();
+    }
+
+    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();
+    }
+}
+
+export class VDateText extends VTextField {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        element.addEventListener('input', this.createInputHandler(element.vComponent));
+        element.vComponent.input.addEventListener('blur', () => this.validate(null));
+    }
+
+    createInputHandler(component) {
+        return function(e) {
+            let input = component.value();
+
+            // Add a leading zero if input is like 1/ or 01 / 1/
+            if (/^\d\/$/.test(input)) input = '0' + input;
+            if (/^\d{2}\s\/\s\d\/$/.test(input)) input = input.slice(0,4) + '0' + input.slice(5,6);
+
+            // Parse and format input
+            if (/\D\/$/.test(input)) input = input.substr(0, input.length - 3);
+            let values = input.split('/').map(function(v) {
+                return v.replace(/\D/g, '')
+            });
+            if (values[0]) values[0] = checkValue(values[0], 12);
+            if (values[1]) values[1] = checkValue(values[1], 31);
+            const output = values.map(function(v, i) {
+                return v.length === 2 && i < 2 ? v + ' / ' : v;
+            });
+            component.setValue(output.join('').substr(0, 14));
+        }
+    }
+
+    validate(formData) {
+        const input = this.element.vComponent.value();
+        if (this.isValidDate(input)) {
+            if (this.origHelperText !== '') {
+                this.helperDisplay.innerHTML = this.origHelperText;
+                this.helperDisplay.classList.remove('mdc-text-field-helper-text--validation-msg');
+                this.element.classList.remove('mdc-text-field--invalid');
+            }
+            else {
+                this.helperDisplay.classList.add('v-hidden');
+            }
+            return true;
+        }
+
+        const message = this.helperDisplay.dataset.validationError ?
+          this.helperDisplay.dataset.validationError :
+          this.input.validationMessage;
+
+        this.helperDisplay.innerHTML = message;
+        this.helperDisplay.classList.add('mdc-text-field-helper-text--validation-msg');
+        this.element.classList.add('mdc-text-field--invalid');
+
+        const errorMessage = {};
+        errorMessage[this.element.id] = [message];
+        return errorMessage;
+    }
+
+    isValidDate(dateString) {
+        dateString = dateString.replace(/\s+/g, '');
+        if (dateString === '' && !this.input.required) {
+            return true
+        }
+        if(!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString)) {
+            return false;
+        }
+
+        const parts = dateString.split("/");
+        const day = parseInt(parts[1], 10);
+        const month = parseInt(parts[0], 10);
+        const year = parseInt(parts[2], 10);
+
+        if (year < 1000 || year > 3000 || month === 0 || month > 12) {
+            return false;
+        }
+
+        const monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
+        if(year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)) {
+            monthLength[1] = 29;
+        }
+
+        return day > 0 && day <= monthLength[month - 1];
+    };
+
+    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();
+    }
+}
+
+function checkValue(str, max) {
+    if (str.charAt(0) !== '0' || str === '00') {
+        let num = parseInt(str);
+        if (isNaN(num) || num <= 0 || num > max) num = 1;
+        str = num > parseInt(max.toString().charAt(0)) && num.toString().length === 1 ? '0' + num : num.toString();
+    }
+    return str;
+}
+
+