coprl 0.1.0 → 3.0.0.beta.1

data/views/mdc/assets/js/components/rich-text-area/horizontal-rule-blot.js

@@ -0,0 +1,23 @@
+// For more information on writing custom Blots:
+// https://github.com/quilljs/quill/issues/2371#issuecomment-454819412
+import Quill from 'quill';
+
+const Embed = Quill.import('blots/embed');
+
+export class HorizontalRuleBlot extends Embed {
+    static get name() {
+        return 'horizontal-rule';
+    }
+    
+    static get tag() {
+        return 'hr';
+    }
+
+    static action(quill, event) {
+        const range = quill.getSelection(true);
+
+        quill.insertText(range.index, '\n', Quill.sources.USER);
+        quill.insertEmbed(range.index + 1, HorizontalRuleBlot.name, true, Quill.sources.USER);
+        quill.setSelection(range.index + 2, Quill.sources.SILENT);
+    }
+};

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

@@ -0,0 +1,5 @@
+export default function getRoot(element) {
+  if (element.parentNode === null) return element;
+
+  return getRoot(element.parentNode);
+}

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

@@ -0,0 +1,56 @@
+import {MDCSelect} from '@material/select';
+import {VBaseComponent, hookupComponents} from './base-component';
+import {visibilityObserverMixin} from "./mixins/visibility-observer";
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export function initSelects(e) {
+    console.debug('\tSelects');
+    hookupComponents(e, '.v-select', VSelect, MDCSelect);
+}
+
+export class VSelect extends dirtyableMixin(visibilityObserverMixin(VBaseComponent)) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.select = element.querySelector('select');
+        this.select.vComponent = this;
+        this.recalcWhenVisible(this);
+        this.originalValue = this.value();
+    }
+
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.select.name;
+    }
+
+    value() {
+        return this.select.options.length === 0 || this.select.selectedIndex === -1 ? null : this.select.options[this.select.selectedIndex].value;
+    }
+
+    clear() {
+        let before = this.select.selectedIndex;
+        this.select.selectedIndex = 0;
+        if (before !== 0) {
+            var event = new InputEvent('input', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+              });
+            this.select .dispatchEvent(event);
+        }
+    }
+
+    reset() {
+        this.select.value = this.originalValue;
+    }
+
+    setValue(value) {
+        this.select.value = value;
+    }
+
+    isDirty() {
+        return this.dirtyable && this.value() !== this.originalValue;
+    }
+}

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

@@ -0,0 +1,67 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {MDCSlider} from '@material/slider';
+import {visibilityObserverMixin} from './mixins/visibility-observer';
+import {VEvents} from './events';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export function initSliders(e) {
+    console.debug('\tSliders');
+    hookupComponents(e, '.v-slider', VSlider, MDCSlider);
+}
+
+export class VSlider extends dirtyableMixin(visibilityObserverMixin(
+    eventHandlerMixin(VBaseComponent))) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.recalcWhenVisible(this);
+        this.originalValue = this.value();
+    }
+
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.element.getAttribute('data-name');
+    }
+
+    value() {
+        return this.mdcComponent.value;
+    }
+
+    clear() {
+        this.setValue(0);
+    }
+
+    reset() {
+        this.setValue(this.originalValue);
+    }
+
+    setValue(value) {
+        this.mdcComponent.value = value;
+    }
+
+    isDirty() {
+        return this.dirtyable && this.value() !== this.originalValue;
+    }
+
+    initEventListener(eventName, eventHandler) {
+        if (eventName === 'change') {
+            eventName = 'MDCSlider:change';
+        }
+        super.initEventListener(eventName, eventHandler);
+    }
+
+
+    createEventHandler(actionsData, root) {
+        return function(event) {
+            // The MDC slider was firing duplicate change events - this prevents that
+            if (!this.lastEvent ||
+                (event.timeStamp - this.lastEvent.timeStamp) > 10.0) {
+                new VEvents(actionsData, event, root).call();
+            }
+            this.lastEvent = event;
+        };
+    }
+}

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

@@ -0,0 +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 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,
+        // };
+        // this.mdcComponent.show(dataObj);
+
+        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

@@ -0,0 +1,14 @@
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
+import {MDCSwitch} from '@material/switch';
+
+export function initSwitches(e) {
+    console.debug('\tSwitches');
+    hookupComponents(e, '.v-switch', VSwitch, MDCSwitch);
+}
+
+export class VSwitch extends VBaseToggle {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

@@ -0,0 +1,157 @@
+import {MDCTextField} from '@material/textfield';
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {visibilityObserverMixin} from './mixins/visibility-observer';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+const AFTER_INPUT_EVENT = 'after_input';
+const AFTER_INPUT_TIMEOUT = 500; // ms
+
+export function initTextFields(e) {
+    console.debug('\tTextFields');
+    hookupComponents(e, '.v-text-field', VTextField, MDCTextField);
+}
+
+export class VTextField extends dirtyableMixin(
+    visibilityObserverMixin(
+        eventHandlerMixin(VBaseComponent))) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        this.input = element.querySelector('input,textarea');
+        this.input.vComponent = this;
+        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.
+    // 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(formData) {
+        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;
+        }
+
+        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(params) {
+        const optionSelected = this.optionSelected();
+        if (optionSelected) {
+            const key = optionSelected.dataset.key;
+            if (key) {
+                const name = this.name();
+                const id = name + '_id';
+                params.push([id, key]);
+                console.debug('TextField prepareSubmit added:' + id + '=' + key);
+            }
+        }
+        params.push([this.name(), this.value()]);
+    }
+
+    optionSelected() {
+        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;
+    }
+
+    name() {
+        return this.input.name;
+    }
+
+    value() {
+        return this.input.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);
+    }
+}
+