coprl 0.1.0 → 3.0.0.beta.5

data/views/mdc/assets/js/components/form-fields.js

@@ -0,0 +1,16 @@
+// 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 {MDCFormField} from '@material/form-field';
+
+export function initFormFields(e) {
+    console.debug('\tForm Fields');
+    hookupComponents(e, '.v-form-field', VFormField, MDCFormField);
+}
+
+export class VFormField extends VBaseContainer {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

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

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

@@ -0,0 +1,15 @@
+export function getEventTarget(event) {
+  if (typeof event.composedPath === 'function') {
+    const compTarget = event.composedPath()[0];
+
+    if (compTarget) {
+      return compTarget;
+    }
+
+    if (event.path && event.path[0]) {
+      return event.path[0];
+    }
+  }
+
+  return event.target;
+}

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

@@ -0,0 +1,21 @@
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initGrid(e) {
+    console.debug('\tGrid');
+    hookupComponents(e, '.v-grid', VGrid, null);
+    hookupComponents(e, '.v-column', VColumn, null);
+}
+
+export class VGrid extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}
+
+export class VColumn extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

@@ -0,0 +1,20 @@
+import {MDCTopAppBar} from '@material/top-app-bar/index';
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initHeader(e) {
+    console.debug('\tHeader');
+    hookupComponents(e, '.v-header', VHeader, MDCTopAppBar);
+}
+
+export class VHeader extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent, root) {
+        super(element, mdcComponent);
+        element.addEventListener('MDCTopAppBar:nav', function() {
+            var event = new Event('v:header:item-click',{bubbles: true, composed: true});
+            // Dispatch the event.
+            element.dispatchEvent(event);
+        });
+    }
+}

data/views/mdc/assets/js/components/hidden-fields.js

@@ -0,0 +1,44 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export function initHiddenFields(e) {
+    console.debug('\tHiddenFields');
+    hookupComponents(e, '.v-hidden-field', VHiddenField, null);
+}
+
+export class VHiddenField extends dirtyableMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.originalValue = this.value();
+    }
+
+    // Called to collect data for submission
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.element.name;
+    }
+
+    value() {
+        return this.element.value;
+    }
+
+    clear() {
+        this.setValue('');
+    }
+
+    reset() {
+        this.element.value = this.originalValue;
+    }
+
+    setValue(value) {
+        this.element.value = value;
+    }
+
+    isDirty() {
+        return this.dirtyable
+            && this.value() !== this.originalValue;
+    }
+}

data/views/mdc/assets/js/components/icon-toggles.js

@@ -0,0 +1,14 @@
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
+import {MDCIconButtonToggle} from '@material/icon-button';
+
+export function initIconToggles(e) {
+    console.debug('\tIcon Buttons');
+    hookupComponents(e, '.v-icon-toggle', VIconToggle, MDCIconButtonToggle);
+}
+
+export class VIconToggle extends VBaseToggle {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

@@ -0,0 +1,19 @@
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initImages(e) {
+    console.debug('\tImages');
+    hookupComponents(e, '.v-image', VImage);
+}
+
+export class VImage extends eventHandlerMixin(VBaseComponent) {
+    constructor(element) {
+        super(element);
+    }
+
+    preview(result, acceptsMimeTypes, file) {
+        this.element.src = result;
+    }
+}
+

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

@@ -0,0 +1,82 @@
+import {initButtons} from './button';
+import {initDialogs} from './dialogs';
+import {initDateTime} from './datetime';
+import {initTextFields} from './text-fields';
+import {initEvents} from './events';
+import {initLists} from './lists';
+import {initDrawer} from './drawer';
+import {initHeader} from './header';
+import {initIconToggles} from './icon-toggles';
+import {initMenus} from './menus';
+import {initSelects} from './selects';
+import {initChips} from './chips';
+import {initCards} from './cards';
+import {initForms} from './forms';
+import {initSnackbar} from './snackbar';
+import {initCheckboxes} from './checkboxes';
+import {initSwitches} from './switches';
+import {initRichTextArea} from './rich-text-area';
+import {initSteppers} from './steppers';
+import {initRadios} from './radios';
+import {initSliders} from './sliders';
+import {initHiddenFields} from './hidden-fields';
+import {initContent} from './content';
+import {initGrid} from './grid';
+import {initTabBars} from './tab-bars';
+import {initTables} from './data-tables';
+import {initFileInputs} from './file-inputs';
+import {initFormFields} from './form-fields';
+import {initImages} from './images';
+import {initTypography} from './typography';
+import {initTooltips} from './tooltip';
+import {initPlugins} from './plugins';
+import {initProgress} from './progress';
+import {initDragAndDrop} from './drag_n_drop';
+import {initMultiSelects} from "./multi-select";
+
+export function initialize(root, setRoot) {
+    console.debug('Initializing components');
+
+    const start = performance.now();
+
+    initButtons(root);
+    initDialogs(root);
+    initDateTime(root);// MUST BE BEFORE initTextFields
+    initTextFields(root);
+    initLists(root);
+    initDrawer(root);
+    initHeader(root);
+    initIconToggles(root);
+    initMenus(root);
+    initSelects(root);
+    initChips(root);
+    initCards(root);
+    initForms(root);
+    initSnackbar(root);
+    initCheckboxes(root);
+    initSwitches(root);
+    initRichTextArea(root);
+    initSteppers(root);
+    initRadios(root);
+    initSliders(root);
+    initHiddenFields(root);
+    initContent(root);
+    initGrid(root);
+    initTabBars(root);
+    initTables(root);
+    initFileInputs(root);
+    initFormFields(root);
+    initImages(root);
+    initTypography(root);
+    initProgress(root);
+    initTooltips(root);
+    initPlugins(root);
+    initDragAndDrop(root);
+    initMultiSelects(root);
+
+    // This needs to be last, because it relies on the components installed above.
+    initEvents(root);
+
+    const end = performance.now();
+    console.debug('Done in %s ms', (end - start).toFixed(2));
+}

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

@@ -0,0 +1,92 @@
+
+function createSelectAllHandler(component, target, listElements) {
+    return function() {
+        for (let element of listElements) {
+            element.checked = target.checked;
+        }
+        if (component.dataset.totalLines > listElements.length) {
+            toggleSelectTotalHeader(component, listElements.length, target.checked);
+        }
+    }
+}
+
+function createSelectTotalSetHandler(component) {
+    return function(event) {
+        event.preventDefault();
+        if (component.dataset.totalLines > 0) {
+            toggleSelectTotalInput(component, !component.querySelector('#select-total').checked);
+        }
+    }
+}
+
+function createListItemSelectHandler(component, listElements, selectAll) {
+    return function() {
+        let checked = 0;
+        let unchecked = 0;
+        toggleSelectTotalInput(component, false); // Clear select total results whenever a list item selection is modified
+        for (let element of listElements) {
+            element.checked ? checked++ : unchecked++;
+        }
+        selectAll.indeterminate = (checked && unchecked);
+        selectAll.checked = (checked && !unchecked);
+        toggleSelectTotalHeader(component, listElements.length, (Boolean(checked) && !Boolean(unchecked)));
+    }
+}
+
+function toggleSelectTotalHeader(component, count, show = false) {
+    if (component.dataset.totalLines > 0) {
+        updateSelectionCount(component, count);
+        if (show === false) {
+            component.querySelector('#list-item-select-all-header').classList.add('hidden');
+        } else {
+            component.querySelector('#list-item-select-all-header').classList.remove('hidden');
+        }
+    }
+}
+
+function toggleSelectTotalInput(component, selectTotal = false) {
+    if (component.dataset.totalLines > 0) {
+        component.querySelector('#select-total').checked = selectTotal;
+        component.querySelector('#list-item-select-all-toggle-on').classList.add('hidden');
+        component.querySelector('#list-item-select-all-toggle-off').classList.add('hidden');
+        component.querySelector('#list-item-select-all-toggle-' + (selectTotal ? 'on' : 'off')).classList.remove('hidden');
+    }
+}
+
+function updateSelectionCount(component, count) {
+    if (component.dataset.totalLines > 0) {
+        component.querySelector('#page-selection-count').innerHTML = count;
+    }
+}
+
+export function initLists(e) {
+    console.debug('\tLists');
+    let components = e.querySelectorAll('.mdc-list');
+
+    if (components.length === 0 && e.offsetParent && e.offsetParent.vComponent !== undefined) {
+        components = document.querySelectorAll('.mdc-list');
+    }
+
+    if (components) {
+        for (let component of components) {
+            let selectAllLineItem = component.querySelector('.v-checkbox--select-control');
+            let selectableLineItems = component.querySelectorAll('.v-list-item--selectable-checkbox');
+            if (selectAllLineItem && selectableLineItems) {
+                for (let element of component.querySelectorAll('.toggle-total-set')) {
+                    // Clone and replace element to prevent duplicate event handlers when additional records are loaded/paged
+                    let new_element = element.cloneNode(true);
+                    element.parentNode.replaceChild(new_element, element);
+                    new_element.addEventListener('click', createSelectTotalSetHandler(component));
+                }
+
+                selectAllLineItem.addEventListener('change', createSelectAllHandler(component, selectAllLineItem, selectableLineItems));
+
+                for (let element of selectableLineItems) {
+                    element.addEventListener('change', createListItemSelectHandler(component, selectableLineItems, selectAllLineItem));
+                }
+                updateSelectionCount(component, selectableLineItems.length);
+                toggleSelectTotalInput(component);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,79 @@
+import {MDCMenu, Corner} from '@material/menu';
+import {hookupComponents, unhookupComponents, VBaseComponent} from "./base-component";
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {initEvents, removeEvents} from "./events"
+
+function createMenuHandler(menu, element) {
+    return function (event) {
+        let offset = parseInt(element.dataset.rightOffset);
+        let placement = element.dataset.placement === 'contextual' ? Corner.TOP_LEFT : Corner.BOTTOM_LEFT;
+        menu.setAbsolutePosition(event.clientX, event.clientY);
+        menu.setAnchorMargin({left: offset});
+        menu.setAnchorCorner(placement);
+        menu.open = !menu.open;
+        event.stopPropagation();
+    };
+}
+
+function createSurfaceClickHandler(mdcMenu) {
+    return function (event) {
+        if (mdcMenu.open) {
+            if (event.target.classList.contains('v-menu-link')) {
+                mdcMenu.open = false;
+            }
+        }
+    };
+}
+
+export function uninitMenus(root) {
+    console.debug('\tUninit Menus');
+    unhookupComponents(root, '.v-menu');
+}
+
+export function initMenus(root) {
+    console.debug('\tMenus');
+    hookupComponents(root, '.v-menu', VMenu, null);
+}
+
+export class VMenu extends eventHandlerMixin(VBaseComponent) {
+    constructor(element) {
+        super(element);
+        this.hoistedMenuElement = element.querySelector('.mdc-menu');
+        this.mdcComponent = new MDCMenu(this.hoistedMenuElement);
+
+        initEvents(this.hoistedMenuElement);
+
+        // Ensure that the menu surface closes when an item is clicked
+        this.hoistedMenuElement.addEventListener('click', createSurfaceClickHandler(this.mdcComponent), { capture: true });
+
+        var link = this.menulink();
+        if (link) {
+            link.addEventListener('click', createMenuHandler(this.mdcComponent, element));
+        }
+        if (this.hoistedMenuElement.getAttribute('data-hoist') != 'false') {
+            this.mdcComponent.hoistMenuToBody();
+        }
+    }
+
+    destroy() {
+        super.destroy();
+        removeEvents(this.hoistedMenuElement);
+
+        var link = this.menulink();
+        if (link) {
+            link.removeEventListener('click', createMenuHandler(this.mdcComponent, this.element));
+        }
+
+        this.hoistedMenuElement.removeEventListener('click', createSurfaceClickHandler(), { capture: true });
+        this.hoistedMenuElement.parentNode.removeChild(this.hoistedMenuElement);
+    }
+
+    menulink() {
+        var anchor = this.element.closest('.mdc-menu-anchor');
+        var link = null;
+        if (anchor) {
+            link = anchor.querySelector('.v-menu-click');
+        }
+        return link;
+    }
+}

data/views/mdc/assets/js/components/mixins/dirtyable.js

@@ -0,0 +1,22 @@
+export const dirtyableMixin = Base => class extends Base {
+    get originalValue() {
+        return this._originalValue;
+    }
+
+    set originalValue(value) {
+        this._originalValue = value;
+    }
+
+    get dirtyable() {
+        if (!this.element) {
+            return false;
+        }
+
+        return this.element.hasAttribute('data-dirtyable');
+    }
+
+    isDirty() {
+        // Implement in extending classes.
+        throw new Error('Implement isDirty()');
+    }
+};