voom-presenters 0.1.11 → 2.0.1

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,87 +1,194 @@
-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) {
+            return new Promise(function(_, reject) {
                 results.push({
                     action: 'posts',
                     method: method,
                     statusCode: 400,
                     contentType: 'v/errors',
-                    content: errors
+                    content: errors,
                 });
                 reject(results);
             });
         }
 
-        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]);
+        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.');
         }
 
-        var inputValues = this.inputValues(form);
-        for (var input of inputValues) {
-            FD.append(input[0], input[1]);
+        if (formData.has('rich_text_payload')) {
+            callHeaders['X-Rich-Text-Payload'] = true;
         }
 
-        var httpRequest = new XMLHttpRequest();
-        var url = this.url;
-        if (!httpRequest) {
-            throw new Error('Cannot talk to server! Please upgrade your browser to one that supports XMLHttpRequest.');
-        }
-        return new Promise(function (resolve, reject) {
-            httpRequest.onreadystatechange = function (event) {
+        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);
+                    }
+                }
+            }
+        };
+
+        return new Promise((resolve, reject) => {
+            httpRequest.onreadystatechange = (event) => {
                 if (httpRequest.readyState === XMLHttpRequest.DONE) {
-                    console.log(httpRequest.status + ':' + this.getResponseHeader('content-type'));
+                    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: this.getResponseHeader('content-type'),
-                            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) {
+                        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: this.getResponseHeader('content-type'),
-                            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);
-            console.log(method + ':' + url);
+
+            const configHeaders = appConfig.get('request.headers.POST', {});
+
+            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);
         });
     }
 
@@ -96,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

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

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

@@ -1,82 +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 parentElement = this.parentElement();
-        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) {
-            clearTimeout(parentElement.vTimeout);
-            parentElement.vTimeout = setTimeout(function(){
-                httpRequest.onreadystatechange = function () {
-                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
-                        console.log(httpRequest.status + ':' + this.getResponseHeader('content-type'));
-                        if (httpRequest.status === 200) {
-                            var nodeToReplace = document.getElementById(elementId);
-                            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.';
-                                console.error(msg);
+
+        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.';
+                console.error(msg);
+                results.push({
+                    action: 'replaces',
+                    statusCode: 500,
+                    contentType: 'v/errors',
+                    content: {exception: msg},
+                });
+                reject(results);
+            }
+            else {
+                clearTimeout(nodeToReplace.vTimeout);
+                nodeToReplace.vTimeout = setTimeout(function() {
+                    httpRequest.onreadystatechange = function() {
+                        if (httpRequest.readyState === XMLHttpRequest.DONE) {
+                            console.debug(httpRequest.status + ':' +
+                                this.getResponseHeader('content-type'));
+                            if (httpRequest.status === 200) {
+                                // 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: 500,
-                                    contentType: 'v/errors',
-                                    content: {exception: msg}
+                                    statusCode: httpRequest.status,
+                                    contentType: this.getResponseHeader(
+                                        'content-type'),
+                                    content: httpRequest.responseText,
                                 });
-                                reject(results);
-                            } else {
-                                nodeToReplace.outerHTML = httpRequest.responseText;
-                                var newNode = document.getElementById(elementId);
-                                initialize(newNode);
-
+                                resolve(results);
+                            }
+                            else {
                                 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);
+                                reject(results);
                             }
-                        } else {
-                            results.push({
-                                action: 'replaces',
-                                statusCode: httpRequest.status,
-                                contentType: this.getResponseHeader('content-type'),
-                                content: httpRequest.responseText
-                            });
-                            reject(results);
                         }
-                    }
-                }
-                console.log('GET:' + url);
-                httpRequest.open('GET', url, true);
-                httpRequest.setRequestHeader('X-NO-LAYOUT', true);
-                httpRequest.send();
-            }, delayAmt);
-
+                    };
+                    console.debug('GET:' + url);
+                    httpRequest.open('GET', url, true);
+                    httpRequest.setRequestHeader('X-NO-LAYOUT', true);
+                    httpRequest.send();
+                }, delayAmt);
+            }
         });
-        return promiseObj;
     }
-
 }