coprl 0.1.0 → 3.0.0.beta.5

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

@@ -0,0 +1,43 @@
+export class VDialog {
+    constructor(options, params, event, root) {
+        this.dialogId = options.target;
+        this.params = params;
+        this.event = event;
+        this.root = root;
+    }
+
+    call(results) {
+        const dialog = this.root.querySelector('#' + this.dialogId);
+
+        if (!(dialog && dialog.vComponent)) {
+            const err = new Error(
+                `Unable to find dialog ${this.dialogId}. `
+                + 'Did you forget to attach it?'
+            );
+
+            results.push({
+                action: 'dialog',
+                contentType: 'v/errors',
+                content: {exception: err.message},
+            });
+
+            return new Promise((_, reject) => reject(results));
+        }
+
+        return new Promise(function(resolve, reject) {
+            const comp = dialog.vComponent.mdcComponent;
+
+            comp.listen('MDCDialog:closed', (event) => {
+                results.push({
+                    action: 'dialog',
+                    statusCode: 200,
+                    dialogAction: event.detail.action,
+                });
+
+                resolve(results);
+            });
+
+            dialog.vComponent.open();
+        });
+    }
+}

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

@@ -0,0 +1,8 @@
+export function encode(value) {
+    if (value === Object(value)) {
+        return JSON.stringify(value);
+    }
+    else {
+        return value;
+    }
+}

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

@@ -0,0 +1,225 @@
+import 'core-js/features/array/flat';
+
+/**
+ * mapObject transforms an object's key-value pairs via the provided function.
+ * @param {Object} object
+ * @param {Function} fn A mapping function suitable for use with Array.map
+ * @return {Object}
+ */
+function mapObject(object, fn) {
+    return Object.entries(object)
+        .map(fn)
+        .reduce((obj, [k, v]) => Object.assign(obj, {[[k]]: v}), {});
+}
+
+/*
+    Attempt to interpret and serialize the following cases for display:
+
+    A: Rails errors:
+        1. { "name": ["Requires name"] }
+
+    B: Validation errors:
+        1. { :email => ["must be filled"] }
+        2. { :fees => 0 => { :fee => ["must be filled", "must be greater than zero"] } }
+
+    C: Custom errors and client-side exceptions:
+        1. { :email => "must be filled" }
+        2. { exception: 'Something bad happened' }
+
+    D: Logical errors:
+        1. "undefined method `map' for nil:NilClass"
+ */
+
+export class VErrors {
+    constructor(root, target) {
+        this.root = root;
+        this.target = target;
+    }
+
+    clearErrors() {
+        const errorMessages = this.root.querySelectorAll('.v-error-message');
+
+        for (let i = 0; i < errorMessages.length; i++) {
+            errorMessages[i].remove();
+        }
+    }
+
+    /**
+     * normalize attempts to convert the various error structures described
+     * above into a single consistent structure by replacing error arrays
+     * with joined strings.
+     * @param {Object} errors
+     * @return {Object}
+     */
+    normalize(errors) {
+        if (!errors) {
+            return {};
+        }
+
+        // Normalize case D into case C-1:
+        if (typeof errors === 'string') {
+            errors = {error: errors};
+        }
+
+        return mapObject(errors, ([k, v]) => {
+            let result = null;
+
+            // Case C, a single key-value pair:
+            if (typeof v === 'string') {
+                // Normalize case C into case A/B-1:
+                v = [v];
+            }
+
+            if (Array.isArray(v)) {
+                // Case A and B-1: an array of error messages:
+                result = v.join(', ');
+            } else if (v.constructor === Object) {
+                // Case B-2: a nested structure:
+                result = this.normalize(v);
+            } else {
+                throw new Error(`Cannot normalize value of type ${typeof v}`);
+            }
+
+            return [k, result];
+        });
+    }
+
+    /**
+     * flatten attempts to extract all human-readable error messages from an
+     * arbitrary error structure, yielding a flat array of strings.
+     * @param {Object} errors
+     * @return {Array<String>}
+     */
+    flatten(errors) {
+        if (!errors) {
+            return [];
+        }
+
+        // Normalize case D into case C-1:
+        if (typeof errors === 'string') {
+            errors = {error: errors};
+        }
+
+        const object = mapObject(errors, ([k, v]) => {
+            let result = null;
+
+            if (typeof v === 'string') {
+                result = v;
+            }
+            else if (v.constructor === Object) {
+                result = this.flatten(v);
+            }
+            else {
+                throw new Error(`Cannot flatten value of type ${typeof v}`);
+            }
+
+            return [k, result];
+        });
+
+        return Object.values(object).flat();
+    }
+
+    displayErrors(result) {
+        const {statusCode, contentType, content} = result;
+
+        let responseErrors = null;
+
+        if (contentType && contentType.includes('application/json')) {
+            responseErrors = JSON.parse(content);
+        }
+        else if (contentType && contentType.includes('v/errors')) {
+            responseErrors = content;
+        }
+
+        if (responseErrors) {
+            if (!Array.isArray(responseErrors)) {
+                responseErrors = [responseErrors];
+            }
+
+            for (const response of responseErrors) {
+                const normalizedResponse = this.normalize(response);
+                const errors = normalizedResponse.errors ? normalizedResponse.errors : normalizedResponse;
+                if (errors.constructor === String) {
+                    this.prependErrors([errors]);
+                }
+                else {
+                    for (const key in errors) {
+                        if (!this.displayInputError(key, errors[key])) {
+                            // If not handled at the field level, display at the page level
+                            if (errors[key].length > 0) {
+                                this.prependErrors([errors[key]]);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        else if (statusCode === 0) {
+            this.prependErrors(
+                ['Unable to contact server. Please check that you are online and retry.']
+            );
+        }
+        else {
+            this.prependErrors(
+                [`The server returned an unexpected response! Status: ${statusCode}`]
+            );
+        }
+    }
+
+    // Sets the helper text on the field
+    // Returns true if it was able to set the error on the control
+    displayInputError(id, message) {
+        const currentEl = this.root.getElementById(id) || this.root.getElementsByName(id)[0];
+
+        if (!currentEl) {
+            return false;
+        }
+
+        const helperText = this.root.getElementById(`${currentEl.id}-helper-text`);
+        if (!helperText) {
+            return false;
+        }
+
+        helperText.innerHTML = message;
+        currentEl.classList.add('mdc-text-field--invalid');
+        helperText.classList.add('mdc-text-field-helper-text--validation-msg');
+        helperText.classList.remove('v-hidden');
+
+        return true;
+    }
+
+    // Creates a div before the element with the same id as the error
+    // Used to display an error message without their being an input field to
+    // attach the error to
+    prependErrors(messages) {
+        const errorsDiv = this.findNearestErrorDiv();
+
+        if (!errorsDiv) {
+            console.error('Unable to display Errors! ', messages);
+
+            return false;
+        }
+
+        const newDiv = document.createElement('div');
+
+        newDiv.classList.add('v-error-message');
+        newDiv.insertAdjacentHTML('beforeend', messages.join('<br>'));
+
+        // add the newly created element and its content into the DOM
+        if (errorsDiv.clientTop < 10) {
+            errorsDiv.scrollIntoView();
+        }
+
+        errorsDiv.insertAdjacentElement('beforebegin', newDiv);
+
+        return true;
+    }
+
+    findNearestErrorDiv() {
+        if (this.target) {
+            return this.target.closest('.v-errors');
+        }
+
+        return this.root.querySelector('.v-errors');
+    }
+}

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

@@ -0,0 +1,62 @@
+import {expandParams} from './action_parameter';
+import {VBase} from './base';
+
+export class VLoads extends VBase {
+    constructor(options, url, params, event, root) {
+        super();
+        this.root = root;
+        this.options = options;
+        this.params = params;
+        this.url = url;
+        this.event = event;
+    }
+
+
+    waitForDownload(downloadID, f) {
+        // Now, we need to start watching the local Cookies to
+        // see when the download ID has been updated by the
+        // response headers.
+        const cookieTimer = setInterval(() => {
+            // The local cookie cache is defined in the browser
+            // as one large string; we need to search for the
+            // name-value pattern with the above ID.
+            const cookiePattern = new RegExp(('downloadID=' + downloadID), 'i');
+
+            if (!downloadID) {
+                clearInterval(cookieTimer);
+                return f();
+            }
+            // I check the local cookies for an update.
+            // If the local cookies have been updated, clear
+            // the timer and call the promise!
+            else if (document.cookie.search(cookiePattern) >= 0) {
+                clearInterval(cookieTimer);
+                return f();
+            }
+            console.debug(
+                'File still downloading (Make sure you set the downloadID in your cookie?)...',
+                new Date().getTime());
+        }, downloadID ? 500 : 0);
+    }
+
+
+    call(results) {
+        const expandedParams = expandParams(results, this.params);
+        return new Promise((resolve) => {
+            let downloadID = null;
+            if (this.options['wait_for_download']) {
+                downloadID = (new Date()).getTime();
+            }
+            const url = this.buildURL(this.url, expandedParams,
+                this.inputValues(),
+                downloadID ? {download_id: downloadID} : null);
+            this.waitForDownload(downloadID, () => {
+                results.push({action: 'loads', statusCode: 200});
+                resolve(results);
+            });
+            this.options['target'] === '_blank' ?
+                document.defaultView.open(url) :
+                document.defaultView.location = url;
+        });
+    }
+}

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

@@ -0,0 +1,19 @@
+export class VNavigates {
+  constructor(options, params, event, root) {
+    this.direction = params.direction;
+  }
+
+  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

@@ -0,0 +1,222 @@
+import {VBase} from './base';
+import appConfig from '../../config';
+import {expandParams} from './action_parameter';
+import {encode} from './encode';
+import {getEventTarget} from '../get_event_target';
+import {buildFormData} from '../../utils/form-data'
+
+// 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, root) {
+        super(options, root);
+        this.url = url;
+        this.params = params;
+        this.method = method;
+        this.event = event;
+        this.headers = options.headers;
+    }
+
+    call(results, eventParams) {
+        this.clearErrors();
+        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){
+            buildFormData(formData, eventParams);
+        }
+
+        // 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));
+        }
+
+        if (this.paramCount(formData) < 1) {
+            console.warn(
+                'Creating request with no data!'
+                + ' Are you sure you\'ve hooked everything up correctly?');
+        }
+
+        let errors = this.validate(formData);
+        if (errors.length > 0) {
+            return new Promise(function(_, reject) {
+                results.push({
+                    action: 'posts',
+                    method: method,
+                    statusCode: 400,
+                    contentType: 'v/errors',
+                    content: errors,
+                });
+                reject(results);
+            });
+        }
+
+        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.');
+        }
+
+        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);
+                    }
+                }
+            }
+        };
+
+        return new Promise((resolve, reject) => {
+            httpRequest.onreadystatechange = (event) => {
+                if (httpRequest.readyState === XMLHttpRequest.DONE) {
+                    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(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(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 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
+            // Rack 2.2 will throw an exception https://github.com/rack/rack/issues/1603
+            // if we set the header as multi-part form data with no data in the body
+            // So we set the body to null in this case.
+            httpRequest.send(this.paramCount(formData) < 1 ? null : formData);
+        });
+    }
+
+    paramCount(formData){
+        return Array.from(formData).length;
+    }
+
+    isForm() {
+        var parentElement = this.parentElement();
+        return parentElement && parentElement.elements;
+    }
+
+    form() {
+        if (this.isForm()) {
+            return this.parentElement();
+        }
+        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);
+    }
+}