voom-presenters 0.2.0 → 2.0.0

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

@@ -1,17 +1,19 @@
 export class VNavigates {
-    constructor(options, params, event) {
-        this.target = options.target;
-        this.params = params;
-        this.event = event;
-    }
+  constructor(options, params, event, root) {
+    this.direction = params.direction;
+  }
 
-    call(results) {
-        var promiseObj = new Promise(function (resolve) {
-            console.log("Navigating back");
-            results.push({action: 'navigates', statusCode: 200});
-            history.back();
-            resolve(results);
-        });
-        return promiseObj;
-    }
-}
+  call(results) {
+    const direction = this.direction;
+    return new Promise(function(resolve) {
+      results.push({action: 'navigates', statusCode: 200});
+      resolve(results);
+      switch (direction) {
+        case 'back':
+          window.history.back();
+        case 'forward':
+          window.history.forward();
+      }
+    });
+  }
+}

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

@@ -0,0 +1,18 @@
+export class VPluginEventAction {
+    constructor(actionType, options, params, event, root) {
+        this.actionType = actionType;
+        this.options = options;
+        this.params = params;
+        this.event = event;
+        this.root = root;
+    }
+
+    call(results) {
+        const actionType = this.actionType;
+        const options = this.options;
+        const params = this.params;
+        const event = this.event;
+        return document.defaultView[actionType](options, params, event,
+            results);
+    }
+}

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

@@ -0,0 +1,21 @@
+export class VPostMessage {
+    constructor(options, params, event, root) {
+        this.params = params;
+        this.event = event;
+        this.root = root;
+    }
+
+    call(results) {
+        return new Promise((resolve) => {
+            console.log('Post Message: ' + this.params.message);
+            window.parent.postMessage(this.params.message, '*');
+            results.push({
+                action: 'close_frame',
+                statusCode: 200,
+            });
+
+            // Otherwise, proceed with the next action:
+            return resolve(results);
+        });
+    }
+}

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

@@ -1,22 +1,77 @@
-import {VSnackbar} from '../snackbar';
 import {VBase} from './base';
 import appConfig from '../../config';
+import {expandParams} from './action_parameter';
+import {encode} from './encode';
+import {getEventTarget} from '../get_event_target';
 
 // Replaces a given element with the contents of the call to the url.
 // parameters are appended.
 export class VPosts extends VBase {
-    constructor(options, url, params, method, event) {
-        super(options);
+    constructor(options, url, params, method, event, root) {
+        super(options, root);
         this.url = url;
         this.params = params;
         this.method = method;
         this.event = event;
+        this.headers = options.headers;
     }
 
-    call(results) {
+    call(results, eventParams) {
         this.clearErrors();
-        let errors = this.validate();
         let method = this.method;
+
+        const ev = new CustomEvent('V:postStarted', {
+            bubbles: true,
+            cancelable: false,
+            detail: this,
+            composed: true,
+        });
+
+        this.dispatchLifecycleEvent(this.event, ev);
+
+        // Manually build the FormData.
+        // Passing in a <form> element (if available) would skip over
+        // unchecked toggle elements, which would be unexpected if the user
+        // has specified a value for the toggle's `off_value` attribute.
+        const formData = new FormData();
+
+        // NB: `inputValues` will appropriately handle `input_tag`.
+        for (const [name, value] of this.inputValues()) {
+            formData.append(name, value);
+        }
+
+        if (eventParams){
+            for (const [name, value] of Object.entries(eventParams)) {
+                formData.append(name, value);
+            }
+        }
+
+        // Add CSRF authenticity token if present
+        const csrf_meta_token = document.querySelector('meta[name=csrf-token]');
+        const csrf_meta_param = document.querySelector('meta[name=csrf-param]');
+        if (csrf_meta_token && csrf_meta_param) {
+            formData.append(csrf_meta_param.content, csrf_meta_token.content);
+        }
+
+        // Add params from presenter:
+        const expandedParams = expandParams(results, this.params);
+
+        for (const [name, value] of Object.entries(expandedParams)) {
+            formData.append(name, encode(value));
+        }
+
+        const paramCount = Array.from(formData).length;
+
+        if (paramCount < 1) {
+            console.warn(
+                'Creating request with no data!'
+                + ' Are you sure you\'ve hooked everything up correctly?',
+            );
+        }
+
+        let errors = this.validate(formData);
+        console.log('Validation errors');
+        console.dir(errors);
         if (errors.length > 0) {
             return new Promise(function(_, reject) {
                 results.push({
@@ -30,37 +85,34 @@ export class VPosts extends VBase {
             });
         }
 
-        var FD = null;
-        var form = this.form();
-        if (form) {
-            FD = new FormData(form);
-        }
-        else {
-            FD = new FormData();
-        }
-        // Add params from presenter
-        for (var name in this.params) {
-            FD.append(name, this.params[name]);
-        }
-
-        var inputValues = this.inputValues(form);
-        for (var input of inputValues) {
-            FD.append(input[0], input[1]);
-        }
-
-        var httpRequest = new XMLHttpRequest();
-        var url = this.url;
+        const httpRequest = new XMLHttpRequest();
+        const url = this.url;
+        const callHeaders = this.headers;
+        const root = this.root;
+        const vEvent = this;
         if (!httpRequest) {
             throw new Error(
                 'Cannot talk to server! Please upgrade your browser to one that supports XMLHttpRequest.');
         }
 
-        let snackbarCallback = function(contentType, response) {
-            const snackbar = document.querySelector('.mdc-snackbar').vComponent;
-            if (contentType && contentType.indexOf('application/json') !== -1) {
-                const messages = JSON.parse(response).messages;
-                if (snackbar && messages && messages.snackbar) {
+        if (formData.has('rich_text_payload')) {
+            callHeaders['X-Rich-Text-Payload'] = true;
+        }
+
+        const snackbarCallback = function(contentType, response) {
+            const element = root.querySelector('.mdc-snackbar');
+
+            if (!(element && element.vComponent)) {
+                return;
+            }
+
+            const snackbar = element.vComponent;
+
+            if (contentType && contentType.includes('application/json')) {
+                const messages = JSON.parse(response).message;
+                if (messages && messages.snackbar) {
                     const message = messages.snackbar.join('<br/>');
+
                     if (message !== '') {
                         snackbar.display(message);
                     }
@@ -68,60 +120,75 @@ export class VPosts extends VBase {
             }
         };
 
-        return new Promise(function(resolve, reject) {
-            httpRequest.onreadystatechange = function(event) {
+        return new Promise((resolve, reject) => {
+            httpRequest.onreadystatechange = (event) => {
                 if (httpRequest.readyState === XMLHttpRequest.DONE) {
-                    const contentType = this.getResponseHeader('content-type');
-                    console.log(httpRequest.status + ':' + contentType);
+                    const contentType = httpRequest.getResponseHeader('content-type');
+                    console.debug(httpRequest.status + ':' + contentType);
+
+                    const result = {
+                        action: 'posts',
+                        method: httpRequest.method,
+                        statusCode: httpRequest.status,
+                        contentType: contentType,
+                        content: httpRequest.responseText,
+                        responseURL: httpRequest.responseURL,
+                    };
+
+
+                    var postFailed = httpRequest.status >= 400;
+                    const ev = new CustomEvent(postFailed ? 'V:postFailed' : 'V:postSucceeded', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: {event: vEvent, result: result},
+                        composed: true,
+                    });
+                    this.dispatchLifecycleEvent(this.event, ev);
+
                     if (httpRequest.status >= 200 && httpRequest.status < 300) {
-                        results.push({
-                            action: 'posts',
-                            method: this.method,
-                            statusCode: httpRequest.status,
-                            contentType: contentType,
-                            content: httpRequest.responseText,
-                            responseURL: httpRequest.responseURL,
-                        });
+                        results.push(result);
                         snackbarCallback(contentType,
                             httpRequest.responseText);
                         resolve(results);
+                    }
                     // Response is an html error page
-                    } else if (contentType && contentType.indexOf('text/html') !== -1){
-                        document.open(contentType);
-                        document.write(httpRequest.responseText);
-                        document.close();
-                        results.push({
-                            action: 'posts',
-                            method: this.method,
-                            statusCode: httpRequest.status,
-                            contentType: contentType,
-                            content: httpRequest.responseText,
-                            responseURL: httpRequest.responseURL,
-                        });
+                    else if (contentType && contentType.indexOf('text/html') !== -1) {
+                        root.open(contentType);
+                        root.write(httpRequest.responseText);
+                        root.close();
+                        results.push(result);
                         resolve(results);
-                    } else {
-                        results.push({
-                            action: 'posts',
-                            method: this.method,
-                            statusCode: httpRequest.status,
-                            contentType: contentType,
-                            content: httpRequest.responseText,
-                        });
+                    }
+                    else {
+                        results.push(result);
                         reject(results);
                     }
+                    const evFinished = new CustomEvent('V:postFinished', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: {event: vEvent, result: result},
+                        composed: true,
+                    });
+                    this.dispatchLifecycleEvent(this.event, evFinished);
                 }
             };
             // Set up our request
             httpRequest.open(method, url);
 
-            const headers = appConfig.get('request.headers.POST', {});
+            const configHeaders = appConfig.get('request.headers.POST', {});
 
-            for (const [key, value] of Object.entries(headers)) {
+            for (const [key, value] of Object.entries(configHeaders)) {
                 httpRequest.setRequestHeader(key, value);
             }
 
+            if (callHeaders) {
+                for (const [key, value] of Object.entries(callHeaders)) {
+                    httpRequest.setRequestHeader(key, value);
+                }
+            }
+
             // Send our FormData object; HTTP headers are set automatically
-            httpRequest.send(FD);
+            httpRequest.send(formData);
         });
     }
 
@@ -136,4 +203,19 @@ export class VPosts extends VBase {
         }
         return null;
     }
+
+    dispatchLifecycleEvent(domEvent, lifecycleEvent) {
+        let target = getEventTarget(domEvent);
+
+        if (!target || !target.isConnected) {
+            // If an action has hidden `target` or its parent (via e.g.
+            // `hides :some_element`), it will no longer be connected to the DOM
+            // and its dispatched lifecycle events won't make it up to the root.
+            // Instead, dispatch straight from the root instead of bubbling up
+            // from the DOM event's target.
+            target = this.root;
+        }
+
+        return target.dispatchEvent(lifecycleEvent);
+    }
 }

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

@@ -0,0 +1,67 @@
+import {VBase} from './base';
+import {VDialog} from './dialog';
+
+const HALT_PATTERNS = [/close/i, /halt/i, /stay/i, /stop/i, /cancel/i];
+
+/**
+ * shouldHalt determines whether the specified action should halt execution
+ * of further actions.
+ * @param {string} action
+ * @return {bool}
+ */
+function shouldHalt(action) {
+    for (const pattern of HALT_PATTERNS) {
+        if (pattern.test(action)) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+export class VPromptIfDirty extends VBase {
+    constructor(options, params, event, root) {
+        super(options, root);
+
+        this.targetId = options.target;
+        this.params = params;
+        this.event = event;
+        this.dialog = new VDialog(this.options, this.params, this.event, root);
+    }
+
+    call(results) {
+        // We're in a dirty state if any dirtyable inputs are dirty:
+        const dirty = this.inputComponents()
+            .filter((comp) => comp.isDirty)
+            .map((comp) => comp.isDirty())
+            .some(Boolean);
+
+        results.push({
+            action: 'prompt_if_dirty',
+            statusCode: 412,
+            squelch: true,
+            dirty: dirty,
+        });
+
+        // If everything's clean, skip the dialog entirely and proceed:
+        if (!dirty) {
+            return new Promise((resolve, _) => resolve(results));
+        }
+
+        // Otherwise, invoke the specified dialog and capture its result:
+        return new Promise((resolve, reject) => {
+            return this.dialog.call(results).then((results) => {
+                const result = results.pop();
+                const action = result.dialogAction;
+
+                // If the dialog's result indicates halting, bail out:
+                if (shouldHalt(action)) {
+                    return reject(results);
+                }
+
+                // Otherwise, proceed with the next action:
+                return resolve(results);
+            });
+        });
+    }
+}

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

@@ -1,20 +1,21 @@
 export class VRemoves {
-    constructor(options, params, event) {
+    constructor(options, params, event, root) {
         this.target = options.target;
         this.ids = params.ids;
         this.event = event;
+        this.root = root;
     }
 
     call(results) {
-        let ids = this.ids;
-        var promiseObj = new Promise(function (resolve) {
+        const ids = this.ids;
+        const root = this.root;
+        return new Promise(function(resolve) {
             results.push({action: 'removes', statusCode: 200});
-            for (const id of ids){
-                let elem = document.getElementById(id);
+            for (const id of ids) {
+                const elem = root.getElementById(id);
                 elem.parentNode.removeChild(elem);
             }
             resolve(results);
         });
-        return promiseObj;
     }
 }

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

@@ -1,81 +1,135 @@
-import {VSnackbar} from '../snackbar';
+import {expandParams} from './action_parameter';
 import {VBase} from './base';
 import {initialize} from '../initialize';
+import {uninitialize} from '../uninitialize';
+
+const MOUSE_DELAY_AMOUNT = 0; // ms
+const KEYBOARD_DELAY_AMOUNT = 500; // ms
+
+// Create a NodeList from raw HTML.
+// Whitespace is trimmed to avoid creating superfluous text nodes.
+function htmlToNodes(html, root = document) {
+    const template = document.createElement('template');
+
+    template.innerHTML = html.trim();
+
+    return template.content.children;
+}
+
+function assertXHRSupport() {
+    if (typeof window.XMLHttpRequest !== 'function') {
+        throw new Error('Support for XMLHttpRequest is required');
+    }
+}
+
+function delayAmount(event) {
+    if (typeof window['InputEvent'] === 'function') {
+        return event instanceof InputEvent ? KEYBOARD_DELAY_AMOUNT : MOUSE_DELAY_AMOUNT;
+    }
+
+    return event instanceof MouseEvent ? MOUSE_DELAY_AMOUNT : KEYBOARD_DELAY_AMOUNT;
+}
 
 // Replaces a given element with the contents of the call to the url.
 // parameters are appended.
 export class VReplaces extends VBase {
-    constructor(options, url, params, event) {
-        super(options);
+    constructor(options, url, params, event, root) {
+        super(options, root);
+
+        assertXHRSupport();
+
         this.element_id = options.target;
         this.url = url;
         this.params = params;
         this.event = event;
     }
 
-    call(results) {
+    call(results, eventParams=[]) {
         this.clearErrors();
-        console.log('The event: '+this.event);
-        var httpRequest = new XMLHttpRequest();
-        if (!httpRequest) {
-            throw new Error('Cannot talk to server! Please upgrade your browser to one that supports XMLHttpRequest.');
-        }
-        var elementId = this.element_id;
-        var nodeToReplace = document.getElementById(elementId);
-        var url = this.buildURL(this.url, this.params, this.inputValues(), [['grid_nesting', this.options.grid_nesting]]);
-        let delayAmt = this.event instanceof InputEvent ? 500 : 0;
-
-        var promiseObj = new Promise(function (resolve, reject) {
+
+        const httpRequest = new XMLHttpRequest();
+        const root = this.root;
+        const elementId = this.element_id;
+        const nodeToReplace = root.getElementById(elementId);
+        const expandedParams = expandParams(results, this.params);
+
+        const inputVals = this.inputValues().filter((vals) => {
+          return this.options.ignore_input_values.indexOf(vals[0]) == -1;
+        });
+        const paramsCollection = [expandedParams, eventParams, inputVals, [['grid_nesting', this.options.grid_nesting]]];
+
+        const url = this.buildURL(this.url, ...paramsCollection);
+        const delayAmt = delayAmount(this.event);
+
+        return new Promise(function(resolve, reject) {
             if (!nodeToReplace) {
                 let msg = 'Unable to located node: \'' + elementId + '\'' +
-                    ' This usually the result of issuing a replaces action and specifying a element id that does not currently exist on the page.';
+                    ' This usually the result of issuing a replaces action ' +
+                    'and specifying a element id that does not currently ' +
+                    'exist on the page.';
                 console.error(msg);
                 results.push({
                     action: 'replaces',
                     statusCode: 500,
                     contentType: 'v/errors',
-                    content: {exception: msg}
+                    content: {exception: msg},
                 });
                 reject(results);
             }
             else {
                 clearTimeout(nodeToReplace.vTimeout);
-                nodeToReplace.vTimeout = setTimeout(function(){
-                    httpRequest.onreadystatechange = function () {
+                nodeToReplace.vTimeout = setTimeout(function() {
+                    httpRequest.onreadystatechange = function() {
                         if (httpRequest.readyState === XMLHttpRequest.DONE) {
-                            console.log(httpRequest.status + ':' + this.getResponseHeader('content-type'));
+                            console.debug(httpRequest.status + ':' +
+                                this.getResponseHeader('content-type'));
                             if (httpRequest.status === 200) {
-                                let nodeToReplace = document.getElementById(elementId);
-                                nodeToReplace.outerHTML = httpRequest.responseText;
-                                var newNode = document.getElementById(elementId);
-                                initialize(newNode);
+                                // NodeList.childNodes is "live", meaning DOM
+                                // changes to its entries will mutate the list
+                                // itself.
+                                // (see: https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
+                                // Array.from clones the entries, creating a
+                                // "dead" list.
+                                const newNodes = Array.from(htmlToNodes(
+                                    httpRequest.responseText,
+                                    root
+                                ));
+
+                                uninitialize(nodeToReplace);
+
+                                nodeToReplace.replaceWith(...newNodes);
+
+                                for (const node of newNodes) {
+                                    initialize(node);
+                                }
 
                                 results.push({
                                     action: 'replaces',
                                     statusCode: httpRequest.status,
-                                    contentType: this.getResponseHeader('content-type'),
-                                    content: httpRequest.responseText
+                                    contentType: this.getResponseHeader(
+                                        'content-type'),
+                                    content: httpRequest.responseText,
                                 });
                                 resolve(results);
-                            } else {
+                            }
+                            else {
                                 results.push({
                                     action: 'replaces',
                                     statusCode: httpRequest.status,
-                                    contentType: this.getResponseHeader('content-type'),
-                                    content: httpRequest.responseText
+                                    contentType: this.getResponseHeader(
+                                        'content-type'),
+                                    content: httpRequest.responseText,
                                 });
                                 reject(results);
                             }
                         }
-                    }
-                    console.log('GET:' + url);
+                    };
+                    console.debug('GET:' + url);
                     httpRequest.open('GET', url, true);
                     httpRequest.setRequestHeader('X-NO-LAYOUT', true);
                     httpRequest.send();
                 }, delayAmt);
             }
         });
-        return promiseObj;
     }
-
 }