voom-presenters 0.2.0 → 2.0.0

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.voom-drag-data+json';
+const ELEMENT_ID_MIME_TYPE = 'text/x.voom-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 Voom 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

@@ -4,157 +4,274 @@ 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 {VNavigates} from './events/navigates';
 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) {
+    // [[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);
+            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
-        var fnlist = this.actions.map((action) => {
-            return function (results) {
-                return Promise.resolve(action.call(results));
+        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) {
-            var p = Promise.resolve([]);
-            return list.reduce(function (pacc, fn) {
+            const p = Promise.resolve([]);
+            return list.reduce(function(pacc, fn) {
                 return pacc = pacc.then(fn);
             }, p);
         }
 
-        var event = this.event;
+        const ev = new CustomEvent('V:eventsStarted', {
+            bubbles: true,
+            cancelable: false,
+            detail: this,
+        });
+        target.dispatchEvent(ev);
+
+        if (this.vComponent) {
+            this.vComponent.actionsStarted(this);
+        }
 
-        pseries(fnlist)
-            .then(function (results) {
-                var result = results.pop();
-                var contentType = result.contentType;
-                var responseURL = result.responseURL;
 
-                if (event.target.dialog) {
-                    event.target.dialog.close();
-                }
-                if (contentType && contentType.indexOf("text/html") !== -1 && typeof responseURL !== 'undefined') {
-                    window.location = responseURL;
-                }
+        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);
+            }
 
-            }).catch(function (results) {
-            console.log("If you got here it may not be what you think:", results);
+            const ev = new CustomEvent('V:eventsHalted', {
+                bubbles: true,
+                cancelable: false,
+                detail: this,
+            });
+            target.dispatchEvent(ev);
 
-            var result = results.pop();
-            new VErrors(event).displayErrors(result);
+            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) {
-        var action_type = action[0];
-        var url = action[1];
-        var options = action[2];
-        var params = action[3];
+    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);
+                return new VLoads(options, url, params, event, root);
             case 'replaces':
-                return new VReplaces(options, url, params, event);
+                return new VReplaces(options, url, params, event, root);
             case 'post':
-                return new VPosts(options, url, params, 'POST', event);
+                return new VPosts(options, url, params, 'POST', event, root);
             case 'update':
-                return new VPosts(options, url, params, 'PUT', event);
+                return new VPosts(options, url, params, 'PUT', event, root);
             case 'delete':
-                return new VPosts(options, url, params, 'DELETE', event);
+                return new VPosts(options, url, params, 'DELETE', event, root);
             case 'dialog':
-                return new VDialog(options, params, event);
+                return new VDialog(options, params, event, root);
             case 'toggle_visibility':
-                return new VToggleVisibility(options, params, event);
+                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);
+                return new VRemoves(options, params, event, root);
             case 'snackbar':
-                return new VSnackbarEvent(options, params, event);
-            case 'navigates':
-                return new VNavigates(options, params, event);
+                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);
+                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);
+                return new VStepperEvent(options, params, event, root);
+            case 'navigates':
+                return new VNavigates(options, params, event, root);
             default:
-                throw action_type + ' is not supported.';
+                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) {
-    return function (event) {
-        event.stopPropagation(); 
-        new VEvents(actionsData, event).call();
+function createEventHandler(actionsData, root, vComponent) {
+    return function(event) {
+        event.stopPropagation();
+        new VEvents(actionsData, event, root, vComponent).call();
     };
 }
 
-export function initEvents() {
-    console.log('\tEvents');
+function getEventElements(root) {
+    const elements = Array.from(root.querySelectorAll(EVENTS_SELECTOR));
 
-    var events = document.querySelectorAll('[data-events]');
-    for (var i = 0; i < events.length; i++) {
-        var eventElem = events[i];
+    // 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];
-            var eventHandler = createEventHandler(actionsData);
-            // allow overide of event handler by component
-            if (eventElem.vComponent && eventElem.vComponent.createEventHandler) {
-                eventHandler = eventElem.vComponent.createEventHandler(actionsData);
+            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 (eventElem.vComponent && eventElem.vComponent.initEventListener) {
-                eventElem.vComponent.initEventListener(eventName, eventHandler);
-            } else {
+            if (vComponent &&
+                vComponent.initEventListener) {
+                vComponent.initEventListener(eventName, eventHandler,
+                    eventOptions);
+            }
+            else {
                 if (typeof eventElem.eventsHandler === 'undefined') {
                     eventElem.eventsHandler = {};
                 }
-                if (!eventElem.eventsHandler[eventName]) {
-                    // Delegate to the component if possible
-                    eventElem.eventsHandler[eventName] = eventHandler;
-                    eventElem.addEventListener(eventName, eventHandler, eventOptions);
+                if (typeof eventElem.eventsHandler[eventName] === 'undefined') {
+                    eventElem.eventsHandler[eventName] = [];
                 }
+                eventElem.eventsHandler[eventName].push(eventHandler);
+                eventElem.addEventListener(eventName, eventHandler,
+                    eventOptions);
+            }
+
+            if (vComponent) {
+                vComponent.afterInit();
             }
         }
     }
-    fireAfterLoad();
+    fireAfterLoad(e);
 }
 
-function fireAfterLoad() {
-    var events = document.querySelectorAll('[data-events]');
-    for (var i = 0; i < events.length; i++) {
-        var eventElem = events[i];
+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');
+                var event = new Event('after_init', { composed: true });
                 // Dispatch the event.
                 eventElem.dispatchEvent(event);
             }
         }
     }
 }
-
-