coprl 0.1.0 → 3.0.0.beta.1

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

@@ -0,0 +1,135 @@
+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 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);
+        }
+    }
+}

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

@@ -0,0 +1,182 @@
+/*
+    A drag data store (DragEvent.prototype.dataTransfer.items) can be in one of
+    three modes:
+
+    1. read/write, during a `dragstart` event: items can be read and added
+    2. read-only, during a `drop` event: items can be read, but not added
+    3. protected, during all other types of DragEvent: items cannot be read
+       or added.
+
+    (see https://html.spec.whatwg.org/multipage/dnd.html#concept-dnd-rw)
+
+    Thus, attempting to mutate the store during events other than `dragstart`
+    fails silently: no error is raised, but items are not added.
+
+
+    To read items in protected mode, serialize data as a string and store it as
+    a key instead of as a value. This makes it accessible via
+    `dataTransfer.types`:
+
+    // in a dragstart handler:
+    event.dataTransfer.setData(JSON.stringify(foo), '');
+
+    // in a later read-only or protected DragEvent handler:
+    const json = event.dataTransfer.types[someIndex];
+    const foo = JSON.stringify(json);
+
+
+    There is no workaround for attempting to mutate a drag data store not in
+    read/write mode.
+ */
+
+import {getRootNode} from './base-component';
+
+export const EVENT_DROPPED = 'dropped';
+
+const DRAG_DATA_MIME_TYPE = 'application/x.coprl-drag-data+json';
+const ELEMENT_ID_MIME_TYPE = 'text/x.coprl-element-id';
+
+function createDragStartHandler(root, element) {
+    return function(event) {
+        const dragParamData = event.target.dataset.drag_params;
+
+        if (dragParamData) {
+            event.dataTransfer.setData(DRAG_DATA_MIME_TYPE, dragParamData);
+
+            const zone = JSON.parse(dragParamData).zone;
+
+            if (zone) {
+                event.dataTransfer.setData(zone, '');
+            }
+
+            event.dataTransfer.effectAllowed = 'move';
+            event.target.classList.remove('v-dnd-draggable');
+            event.target.classList.add('v-dnd-moving');
+
+            event.dataTransfer.setData(ELEMENT_ID_MIME_TYPE, element.id);
+        }
+    };
+}
+
+function createDragOverHandler(root, element) {
+    return function(event) {
+        const dropZone = element.dataset.dropzone;
+
+        if (dropZone == null || event.dataTransfer.types.includes(dropZone)) {
+            if (event.preventDefault) {
+                event.preventDefault();
+            }
+            element.classList.add('v-dnd-over');
+        }
+        else {
+            element.classList.remove('v-dnd-over');
+        }
+    };
+}
+
+function createDragLeaveHandler(root, element) {
+    return function(event) {
+        element.classList.remove('v-dnd-over');
+    };
+}
+
+function createDropHandler(root, element) {
+    // When an element is upgraded to a Coprl component after being replaced via
+    // `replaces`, root may refer to the replaced element itself instead of the
+    // element's root node.
+    // Since a valid drop zone may exist anywhere on the page, it is not
+    // guaranteed that root contains the element being dragged.
+    // getRootNode will fetch `root`'s actual root node (document or shadow
+    // DOM root).
+    const trueRoot = getRootNode(root);
+
+    return function(event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        const id = event.dataTransfer.getData(ELEMENT_ID_MIME_TYPE);
+        const draggedElement = id ? trueRoot.querySelector(`#${id}`) : null;
+        let dragParams = {};
+
+        if (draggedElement) {
+            dragParams = JSON.parse(draggedElement.dataset.drag_params);
+        }
+
+        element.classList.remove('v-dnd-over', 'v-dnd-moving');
+        element.classList.add('v-dnd-draggable');
+
+        // Emit a "dropped" event for the element being dragged:
+        // The drag_params of the dragged element are merged with the
+        // drop_params of the drop zone.
+        const dropZoneParams = JSON.parse(element.dataset.drop_params);
+        const params = Object.assign({}, dragParams, dropZoneParams);
+        const droppedEvent = new CustomEvent(EVENT_DROPPED, {detail: params});
+
+        draggedElement.dispatchEvent(droppedEvent);
+
+        return false;
+    };
+}
+
+function createDragEndHandler(root, element) {
+    return function(event) {
+        element.classList.remove('v-dnd-over', 'v-dnd-moving');
+        element.classList.add('v-dnd-draggable');
+    };
+}
+
+const DRAGGABLE_SELECTOR = '[draggable=true]';
+const DROP_ZONE_SELECTOR = '[data-dropzone]';
+
+export function initDragAndDrop(root) {
+    const draggables = Array.from(root.querySelectorAll(DRAGGABLE_SELECTOR));
+
+    if (typeof root.matches === 'function' && root.matches(DRAGGABLE_SELECTOR)) {
+        draggables.unshift(root);
+    }
+
+    for (const elem of draggables) {
+        elem.addEventListener('dragstart', createDragStartHandler(root, elem));
+        elem.addEventListener('dragend', createDragEndHandler(root, elem));
+    }
+
+    const dropZones = Array.from(root.querySelectorAll(DROP_ZONE_SELECTOR));
+
+    if (typeof root.matches === 'function' && root.matches(DROP_ZONE_SELECTOR)) {
+        dropZones.unshift(root);
+    }
+
+    for (const elem of dropZones) {
+        elem.addEventListener('dragover', createDragOverHandler(root, elem));
+        elem.addEventListener('drop', createDropHandler(root, elem));
+        elem.addEventListener('dragleave', createDragLeaveHandler(root, elem));
+    }
+}
+
+/**
+ * hasDragDropData determines whether the provided event has previously-set
+ * drag-n-drop data available.
+ * @param {Event} event
+ * @return {Boolean}
+ */
+export function hasDragDropData(event) {
+    return event.type === 'drop' && event.dataTransfer
+        || event.type === EVENT_DROPPED && event.detail;
+}
+
+/**
+ * extractDragDropData attempts to extract a payload of drag-n-drop data from
+ * the provided event previously set during  a `dragstart` event.
+ * @param {Event} event
+ * @return {Object}
+ */
+export function extractDragDropData(event) {
+    if (event.type === 'drop' && event.dataTransfer) {
+        return JSON.parse(event.dataTransfer.getData(DRAG_DATA_MIME_TYPE));
+    }
+    else if (event.type === EVENT_DROPPED) {
+        return event.detail;
+    }
+
+    return {};
+}

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

@@ -0,0 +1,43 @@
+import {MDCDrawer} from '@material/drawer';
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initDrawer(e) {
+    console.debug('\tDrawer');
+    hookupComponents(e, '.v-drawer__modal', VModalDrawer, MDCDrawer);
+    hookupComponents(e, '.v-drawer__dismissible', VDismissibleDrawer, MDCDrawer);
+}
+
+class VDrawer extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        const header = this.root.querySelector('.v-header');
+        if (header) {
+            header.addEventListener('MDCTopAppBar:nav',
+                () => {
+                    if (this.isActive()) {
+                        this.mdcComponent.open = !this.mdcComponent.open;
+                    }
+                });
+        }
+    }
+
+    isActive() {
+        return (getComputedStyle(this.element).
+            getPropertyValue('--v-drawer-active') !== 'no');
+    }
+}
+
+export class VModalDrawer extends VDrawer {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.mdcComponent.open = false;
+    }
+}
+
+export class VDismissibleDrawer extends VDrawer {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

@@ -0,0 +1,277 @@
+import {VLoads} from './events/loads';
+import {VPosts} from './events/posts';
+import {VReplaces} from './events/replaces';
+import {VDialog} from './events/dialog';
+import {VErrors} from './events/errors';
+import {VToggleVisibility} from './events/toggle_visibility';
+import {VToggleDisabled} from './events/toggle_disabled';
+import {VAutoComplete} from './events/autocomplete';
+import {VPromptIfDirty} from './events/prompt_if_dirty';
+import {VSnackbarEvent} from './events/snackbar';
+import {VClears} from './events/clears';
+import {VCloseDialog} from './events/close_dialog';
+import {VPostMessage} from './events/post_message';
+import {VRemoves} from './events/removes';
+import {VStepperEvent} from './events/stepper';
+import {VNavigates} from './events/navigates';
+import {VPluginEventAction} from './events/plugin';
+import getRoot from './root_document';
+import {hasDragDropData, extractDragDropData} from './drag_n_drop';
+import {getEventTarget} from './get_event_target';
+
+const EVENTS_SELECTOR = '[data-events]';
+
+export class VEvents {
+    // [[type, url, target, params]]
+    constructor(actions, event, root, vComponent) {
+        this.event = event;
+        this.root = root;
+        this.actions = actions.map((action) => {
+            return this.constructor.action_class(action, event, root);
+        });
+        this.vComponent = vComponent;
+    }
+
+    call() {
+        const event = this.event;
+        const target = getEventTarget(event);
+        let eventParams = {};
+
+        if (hasDragDropData(event)) {
+            eventParams = Object.assign(eventParams, extractDragDropData(event));
+        }
+        else if (event.detail && event.detail.constructor === Object) {
+            eventParams = Object.assign(eventParams, event.detail);
+        }
+
+        // Adapted from http://www.datchley.name/promise-patterns-anti-patterns/#executingpromisesinseries
+        const fnlist = this.actions.map((action) => {
+            return function(results) {
+                return Promise.resolve(action.call(results, eventParams));
+            };
+        });
+
+        // Execute a list of Promise return functions in series
+        function pseries(list) {
+            const p = Promise.resolve([]);
+            return list.reduce(function(pacc, fn) {
+                return pacc = pacc.then(fn);
+            }, p);
+        }
+
+        const ev = new CustomEvent('V:eventsStarted', {
+            bubbles: true,
+            cancelable: false,
+            detail: this,
+        });
+        target.dispatchEvent(ev);
+
+        if (this.vComponent) {
+            this.vComponent.actionsStarted(this);
+        }
+
+
+        new VErrors(this.root).clearErrors();
+
+        pseries(fnlist).then((results) => {
+            const result = results.pop();
+            const contentType = result.contentType;
+            const responseURL = result.responseURL;
+
+            if (contentType && contentType.indexOf('text/html') !== -1 &&
+                typeof responseURL !== 'undefined') {
+                window.location = responseURL;
+            }
+
+            const ev = new CustomEvent('V:eventsSucceeded', {
+                bubbles: true,
+                cancelable: false,
+                detail: this,
+            });
+            target.dispatchEvent(ev);
+
+            if (this.vComponent) {
+                this.vComponent.actionsSucceeded(this);
+            }
+        }).catch((results) => {
+            console.log('If you got here it may not be what you think:',
+                results);
+
+            let result = results;
+
+            if (typeof results.pop === 'function') {
+                result = results.pop();
+            }
+
+            if (!result.squelch) {
+                new VErrors(this.root, target).displayErrors(result);
+            }
+
+            const ev = new CustomEvent('V:eventsHalted', {
+                bubbles: true,
+                cancelable: false,
+                detail: this,
+            });
+            target.dispatchEvent(ev);
+
+            if (this.vComponent) {
+                this.vComponent.actionsHalted(this);
+            }
+        }).finally(() => {
+            const ev = new CustomEvent('V:eventsFinished', {
+                bubbles: true,
+                cancelable: false,
+                detail: this,
+            });
+            target.dispatchEvent(ev);
+
+            if (this.vComponent) {
+                this.vComponent.actionsFinished(this);
+            }
+        });
+    }
+
+    static action_class(action, event, root) {
+        const action_type = action[0];
+        const url = action[1];
+        const options = action[2];
+        const params = action[3];
+
+        switch (action_type) {
+            case 'loads':
+                return new VLoads(options, url, params, event, root);
+            case 'replaces':
+                return new VReplaces(options, url, params, event, root);
+            case 'post':
+                return new VPosts(options, url, params, 'POST', event, root);
+            case 'update':
+                return new VPosts(options, url, params, 'PUT', event, root);
+            case 'delete':
+                return new VPosts(options, url, params, 'DELETE', event, root);
+            case 'dialog':
+                return new VDialog(options, params, event, root);
+            case 'toggle_visibility':
+                return new VToggleVisibility(options, params, event, root);
+            case 'toggle_disabled':
+                return new VToggleDisabled(options, params, event, root);
+            case 'prompt_if_dirty':
+                return new VPromptIfDirty(options, params, event, root);
+            case 'remove':
+                return new VRemoves(options, params, event, root);
+            case 'snackbar':
+                return new VSnackbarEvent(options, params, event, root);
+            case 'autocomplete':
+                return new VAutoComplete(options, url, params, event, root);
+            case 'clear':
+                return new VClears(options, params, event, root);
+            case 'close_dialog':
+                return new VCloseDialog(options, params, event, root);
+            case 'post_message':
+                return new VPostMessage(options, params, event, root);
+            case 'stepper':
+                return new VStepperEvent(options, params, event, root);
+            case 'navigates':
+                return new VNavigates(options, params, event, root);
+            default:
+                return new VPluginEventAction(action_type, options, params,
+                    event, root);
+        }
+    }
+}
+
+// This is used to get a proper binding of the actionData
+// https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
+function createEventHandler(actionsData, root, vComponent) {
+    return function(event) {
+        event.stopPropagation();
+        new VEvents(actionsData, event, root, vComponent).call();
+    };
+}
+
+function getEventElements(root) {
+    const elements = Array.from(root.querySelectorAll(EVENTS_SELECTOR));
+
+    // Include `root` if it has events:
+    if (typeof root.matches === 'function' && root.matches(EVENTS_SELECTOR)) {
+        elements.unshift(root);
+    }
+
+    return elements;
+}
+
+export function initEvents(e) {
+    console.debug('\tEvents');
+
+    for (const eventElem of getEventElements(e)) {
+        var eventsData = JSON.parse(eventElem.dataset.events);
+        for (var j = 0; j < eventsData.length; j++) {
+            var eventData = eventsData[j];
+            var eventName = eventData[0];
+            var eventOptions = eventData[2];
+            eventOptions.passive = true;
+            var actionsData = eventData[1];
+            const vComponent = eventElem.vComponent;
+            var eventHandler = createEventHandler(actionsData, getRoot(e),
+                vComponent);
+            // allow override of event handler by component
+            if (vComponent && vComponent.createEventHandler) {
+                eventHandler = vComponent.createEventHandler(
+                    actionsData, getRoot(e), vComponent);
+            }
+            // Delegate to the component if possible
+            if (vComponent &&
+                vComponent.initEventListener) {
+                vComponent.initEventListener(eventName, eventHandler,
+                    eventOptions);
+            }
+            else {
+                if (typeof eventElem.eventsHandler === 'undefined') {
+                    eventElem.eventsHandler = {};
+                }
+                if (typeof eventElem.eventsHandler[eventName] === 'undefined') {
+                    eventElem.eventsHandler[eventName] = [];
+                }
+                eventElem.eventsHandler[eventName].push(eventHandler);
+                eventElem.addEventListener(eventName, eventHandler,
+                    eventOptions);
+            }
+
+            if (vComponent) {
+                vComponent.afterInit();
+            }
+        }
+    }
+    fireAfterLoad(e);
+}
+
+export function removeEvents(elem) {
+    console.debug('\tuninitEvents');
+
+    for (const eventElem of getEventElements(elem)) {
+        let eventsData = JSON.parse(eventElem.dataset.events);
+        for (var j = 0; j < eventsData.length; j++) {
+            let eventData = eventsData[j];
+            let eventName = eventData[0];
+            let eventOptions = eventData[2];
+            eventOptions.passive = true;
+            for (const handler of eventElem.eventsHandler[eventName]) {
+                eventElem.removeEventListener(eventName, handler, eventOptions);
+            }
+        }
+    }
+}
+
+function fireAfterLoad(e) {
+    for (const eventElem of getEventElements(e)) {
+        var eventsData = JSON.parse(eventElem.dataset.events);
+        for (var j = 0; j < eventsData.length; j++) {
+            var eventData = eventsData[j];
+            var eventName = eventData[0];
+            if (eventName === 'after_init') {
+                var event = new Event('after_init', { composed: true });
+                // Dispatch the event.
+                eventElem.dispatchEvent(event);
+            }
+        }
+    }
+}