coprl 0.1.0 → 3.0.0.beta.5

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

@@ -0,0 +1,135 @@
+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, root) {
+        super(options, root);
+
+        assertXHRSupport();
+
+        this.element_id = options.target;
+        this.url = url;
+        this.params = params;
+        this.event = event;
+    }
+
+    call(results, eventParams=[]) {
+        this.clearErrors();
+
+        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: httpRequest.status,
+                                    contentType: this.getResponseHeader(
+                                        'content-type'),
+                                    content: httpRequest.responseText,
+                                });
+                                resolve(results);
+                            }
+                            else {
+                                results.push({
+                                    action: 'replaces',
+                                    statusCode: httpRequest.status,
+                                    contentType: this.getResponseHeader(
+                                        'content-type'),
+                                    content: httpRequest.responseText,
+                                });
+                                reject(results);
+                            }
+                        }
+                    };
+                    console.debug('GET:' + url);
+                    httpRequest.open('GET', url, true);
+                    httpRequest.setRequestHeader('X-NO-LAYOUT', true);
+                    httpRequest.send();
+                }, delayAmt);
+            }
+        });
+    }
+}

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

@@ -0,0 +1,23 @@
+import {expandParam} from './action_parameter';
+
+export class VSnackbarEvent {
+    constructor(options, params, event, root = document) {
+        this.options = options;
+        this.text = params.text;
+        this.event = event;
+        this.root = root;
+        const snackbarElem = this.root.querySelector('.mdc-snackbar');
+        this.snackbar = snackbarElem.vComponent;
+    }
+
+    call(results) {
+        const snackbar = this.snackbar;
+        const message = expandParam(results, this.text);
+        return new Promise(function(resolve) {
+            console.debug('Showing snackbar');
+            snackbar.display(message);
+            results.push({action: 'snackbar', statusCode: 200});
+            resolve(results);
+        });
+    }
+}

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

@@ -0,0 +1,21 @@
+import {VBase} from './base';
+
+export class VStepperEvent extends VBase {
+    constructor(options, params, event, root) {
+        super(options, root);
+        this.params = params;
+        this.event = event;
+    }
+
+    call(results) {
+        const parentElem = this.root.getElementById(this.params.stepper_id);
+        const component = parentElem.vComponent;
+        const navAction = this.params.navigate;
+
+        return new Promise(function(resolve) {
+            component.navigate(navAction);
+            results.push({action: 'stepper', statusCode: 200});
+            resolve(results);
+        });
+    }
+}

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

@@ -0,0 +1,41 @@
+export class VToggleDisabled {
+  constructor(options, params, event, root) {
+    this.targetId = options.target;
+    this.params = params;
+    this.event = event;
+    this.root = root;
+  }
+
+  call(results) {
+    const targetId = this.targetId;
+    const action = this.params.action;
+    const delayAmt = this.event instanceof FocusEvent ? 500 : 0;
+    const elem = this.root.getElementById(targetId);
+
+    if (!elem) {
+      const err = new Error(
+        `Unable to locate node ${targetId}!`
+        + ' Did you forget to attach it?',
+      );
+
+      results.push({
+        action: 'toggle_disabled',
+        contentType: 'v/errors',
+        content: {exception: err.message},
+      });
+
+      return new Promise((_, reject) => reject(results));
+    }
+
+    const promiseObj = new Promise(function(resolve) {
+      clearTimeout(elem.vTimeout);
+      elem.vTimeout = setTimeout(function() {
+        console.debug('Toggling disabled on: ' + targetId);
+        elem.disabled = (action === 'disable')
+        results.push({action: 'toggle_disabled', statusCode: 200});
+        resolve(results);
+      }, delayAmt);
+    });
+    return promiseObj;
+  }
+}

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

@@ -0,0 +1,72 @@
+export class VToggleVisibility {
+    constructor(options, params, event, root) {
+        this.targetId = options.target;
+        this.params = params;
+        this.event = event;
+        this.root = root;
+    }
+
+    call(results) {
+        const targetId = this.targetId;
+        const action = this.params.action;
+        const delayAmt = this.event instanceof FocusEvent ? 500 : 0;
+        const elem = this.root.getElementById(targetId);
+
+        if (!elem) {
+            const err = new Error(
+                `Unable to locate node ${targetId}!`
+                + ' Did you forget to attach it?',
+            );
+
+            results.push({
+                action: 'toggle_visibility',
+                contentType: 'v/errors',
+                content: {exception: err.message},
+            });
+
+            return new Promise((_, reject) => reject(results));
+        }
+
+        const promiseObj = new Promise(function(resolve) {
+            clearTimeout(elem.vTimeout);
+            elem.vTimeout = setTimeout(function() {
+                console.debug('Toggling visibility on: ' + targetId);
+
+                if (action === 'show') {
+                    if (elem.vComponent && elem.vComponent.show) {
+                        elem.vComponent.show();
+                    }
+                    else {
+                        elem.classList.remove('v-hidden');
+                    }
+                }
+                else if (action === 'hide') {
+                    if (elem.vComponent && elem.vComponent.hide) {
+                        elem.vComponent.hide();
+                    }
+                    else {
+                        elem.classList.add('v-hidden');
+                    }
+                }
+                else {
+                    if (elem.vComponent && elem.vComponent.toggleVisibility) {
+                        elem.vComponent.toggleVisibility();
+                    }
+                    else {
+                        elem.classList.toggle('v-hidden');
+                    }
+                }
+                if (elem.classList.contains('v-hidden') && elem.vComponent &&
+                    elem.vComponent.onHide) {
+                    elem.vComponent.onHide();
+                }
+                else if (elem.vComponent && elem.vComponent.onShow) {
+                    elem.vComponent.onShow();
+                }
+                results.push({action: 'toggle_visibility', statusCode: 200});
+                resolve(results);
+            }, delayAmt);
+        });
+        return promiseObj;
+    }
+}

data/views/mdc/assets/js/components/file-inputs.js

@@ -0,0 +1,76 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export function initFileInputs(e) {
+    console.debug('\tFile Inputs');
+    hookupComponents(e, '.v-file-input', VFileInput, null);
+}
+
+export class VFileInput extends dirtyableMixin(eventHandlerMixin(VBaseComponent)) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        this.input = element.querySelector('input[type=file]');
+        this.accept = element.dataset.accept;
+        this.preview = JSON.parse(element.dataset.preview);
+        ['change'].forEach((e) => {
+            element.addEventListener(e, (e) => this.handleFileSelection(e),
+                false);
+        });
+        this.originalValue = this.input.value;
+    }
+
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.input.name;
+    }
+
+    value() {
+        return this.input.files[0];
+    }
+
+    previewComponent(e) {
+        if (!this.preview) return null;
+        for (const previewId of this.preview) {
+            const elem = this.root.querySelector(`#${previewId}`);
+
+            if (elem && elem.vComponent && elem.vComponent.preview) {
+                this.file = e.target.files[0];
+                const fr = new FileReader();
+                fr.onload = (e) => {
+                    this.previewSelection(e, elem.vComponent);
+                };
+                if (this.accept.startsWith('text')) {
+                    fr.readAsText(this.file);
+                }
+                else {
+                    fr.readAsDataURL(this.file);
+                }
+
+            }
+            else {
+                console.warn(
+                    `WARNING: Unable to find previewable element with id: ${previewId}
+1) Make sure you have an element with that id on your page
+2) Make sure the Componenet or Plugin supports the preview option for the request mime type`);
+            }
+        }
+    }
+
+    previewSelection(e, previewComp) {
+        previewComp.preview(e.target.result, this.accepts, this.file);
+    }
+
+    isDirty() {
+        return this.dirtyable && this.input.value !== this.originalValue;
+    }
+
+    // From an example based on: https://www.quirksmode.org/dom/inputfile.html
+    handleFileSelection(e) {
+        this.previewComponent(e);
+    }
+}