voom-presenters 0.1.13 → 0.2.0

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

@@ -17,10 +17,20 @@ export class VBase extends VUrls {
 
     inputValues(form) {
         let params = [];
-        // Let input component push parameters
+
+        // If tagged input is asked for. Fetch all the matching tag elements and then call any bound components
+        if (this.options.input_tag !== undefined) {
+            var taggedInputs = document.querySelectorAll('[data-input-tag=' + this.options.input_tag + ']');
+            for (let input of taggedInputs) {
+                if (input.vComponent && typeof input.vComponent.prepareSubmit === 'function') {
+                    input.vComponent.prepareSubmit(params);
+                }
+            }
+        }
+        // Let input components push parameters
         let vComp = this.component();
-        if (vComp) {
-            vComp.prepareSubmit(form, params);
+        if (vComp && typeof vComp.prepareSubmit === 'function') {
+            vComp.prepareSubmit(params);
         }
         return params;
     }

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

@@ -64,7 +64,7 @@ export class VErrors {
             }
             for (var response of responseErrors) {
                 var pageErrors = Object.values(this.normalizeErrors(response)).reduce(function (previous, value) {
-                    if (Array.isArray(value)) {
+                    if (Array.isArray(value) && value.length > 0) {
                         previous.push(value.join('<br/>'));
                     }
                     return previous;

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

@@ -1,5 +1,6 @@
 import {VSnackbar} from '../snackbar';
 import {VBase} from './base';
+import appConfig from '../../config';
 
 // Replaces a given element with the contents of the call to the url.
 // parameters are appended.
@@ -17,13 +18,13 @@ export class VPosts extends VBase {
         let errors = this.validate();
         let method = this.method;
         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);
             });
@@ -33,7 +34,8 @@ export class VPosts extends VBase {
         var form = this.form();
         if (form) {
             FD = new FormData(form);
-        } else {
+        }
+        else {
             FD = new FormData();
         }
         // Add params from presenter
@@ -49,20 +51,52 @@ export class VPosts extends VBase {
         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.');
+            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) {
+
+        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) {
+                    const message = messages.snackbar.join('<br/>');
+                    if (message !== '') {
+                        snackbar.display(message);
+                    }
+                }
+            }
+        };
+
+        return new Promise(function(resolve, reject) {
+            httpRequest.onreadystatechange = function(event) {
                 if (httpRequest.readyState === XMLHttpRequest.DONE) {
-                    console.log(httpRequest.status + ':' + this.getResponseHeader('content-type'));
+                    const contentType = this.getResponseHeader('content-type');
+                    console.log(httpRequest.status + ':' + contentType);
                     if (httpRequest.status >= 200 && httpRequest.status < 300) {
                         results.push({
                             action: 'posts',
                             method: this.method,
                             statusCode: httpRequest.status,
-                            contentType: this.getResponseHeader('content-type'),
+                            contentType: contentType,
+                            content: httpRequest.responseText,
+                            responseURL: httpRequest.responseURL,
+                        });
+                        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
+                            responseURL: httpRequest.responseURL,
                         });
                         resolve(results);
                     } else {
@@ -70,8 +104,8 @@ export class VPosts extends VBase {
                             action: 'posts',
                             method: this.method,
                             statusCode: httpRequest.status,
-                            contentType: this.getResponseHeader('content-type'),
-                            content: httpRequest.responseText
+                            contentType: contentType,
+                            content: httpRequest.responseText,
                         });
                         reject(results);
                     }
@@ -79,7 +113,13 @@ export class VPosts extends VBase {
             };
             // Set up our request
             httpRequest.open(method, url);
-            console.log(method + ':' + url);
+
+            const headers = appConfig.get('request.headers.POST', {});
+
+            for (const [key, value] of Object.entries(headers)) {
+                httpRequest.setRequestHeader(key, value);
+            }
+
             // Send our FormData object; HTTP headers are set automatically
             httpRequest.send(FD);
         });
@@ -96,4 +136,4 @@ export class VPosts extends VBase {
         }
         return null;
     }
-}
+}

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

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

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

@@ -21,31 +21,31 @@ export class VReplaces extends VBase {
             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 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) {
-            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);
-                                results.push({
-                                    action: 'replaces',
-                                    statusCode: 500,
-                                    contentType: 'v/errors',
-                                    content: {exception: msg}
-                                });
-                                reject(results);
-                            } else {
+            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.log(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);
@@ -57,24 +57,23 @@ export class VReplaces extends VBase {
                                     content: httpRequest.responseText
                                 });
                                 resolve(results);
+                            } else {
+                                results.push({
+                                    action: 'replaces',
+                                    statusCode: httpRequest.status,
+                                    contentType: this.getResponseHeader('content-type'),
+                                    content: httpRequest.responseText
+                                });
+                                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.log('GET:' + url);
+                    httpRequest.open('GET', url, true);
+                    httpRequest.setRequestHeader('X-NO-LAYOUT', true);
+                    httpRequest.send();
+                }, delayAmt);
+            }
         });
         return promiseObj;
     }

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

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

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

@@ -8,18 +8,22 @@ export class VToggleVisibility  {
     call(results) {
         let targetId = this.targetId;
         let action = this.params.action;
+        let delayAmt = this.event instanceof FocusEvent ? 500 : 0;
+        let elem = document.getElementById(targetId);
         let promiseObj = new Promise(function (resolve) {
-            console.log("Toggling visibility on: " + targetId);
-            let elem = document.getElementById(targetId);
-            if (action === 'show') {
-                elem.classList.remove("v-hidden");
-            } else if (action === 'hide') {
-                elem.classList.add("v-hidden");
-            } else {
-                elem.classList.toggle("v-hidden");
-            }
-            results.push({action:'toggle_visibility', statusCode: 200});
-            resolve(results);
+            clearTimeout(elem.vTimeout);
+            elem.vTimeout = setTimeout(function(){
+                console.log("Toggling visibility on: " + targetId);
+                if (action === 'show') {
+                    elem.classList.remove("v-hidden");
+                } else if (action === 'hide') {
+                    elem.classList.add("v-hidden");
+                } else {
+                    elem.classList.toggle("v-hidden");
+                }
+                results.push({action:'toggle_visibility', statusCode: 200});
+                resolve(results);
+            }, delayAmt);
         });
         return promiseObj;
     }

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

@@ -0,0 +1,29 @@
+import {VBaseContainer} from "./base-container";
+import {VBaseComponent, hookupComponents} from "./base-component";
+import {eventHandlerMixin} from "./mixins/event-handler";
+
+export function initFileInputs() {
+  console.log('\tFile Inputs');
+  hookupComponents('.v-file-input', VFileInput, null);
+}
+
+export class VFileInput extends eventHandlerMixin(VBaseComponent) {
+  constructor(element, mdcComponent) {
+    super(element, mdcComponent);
+
+    this.input = element.querySelector('input[type=file]');
+    this.label = element.querySelector('label');
+
+    ['change', 'mouseup'].forEach((e) => {
+      element.addEventListener(e, () => this.handleFileSelection());
+    });
+  }
+
+  // From an example based on: https://www.quirksmode.org/dom/inputfile.html
+  handleFileSelection() {
+    if (!this.input.value) return;
+
+    var value = this.input.value.replace(/^.*[\\\/]/, '');
+    this.label.innerText = value;
+  }
+}

data/views/mdc/assets/js/components/forms.js

@@ -1,65 +1,14 @@
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
+
 export function initForms() {
     console.log('\tForms');
-
-    var components = document.querySelectorAll('.v-form');
-    for (var i = 0; i < components.length; i++) {
-        var component = components[i];
-        if (!component.vComponent) {
-            component.vComponent = new VForm(component);
-        }
-    }
+    hookupComponents('.v-form', VForm, null);
 }
 
-export class VForm {
-    constructor(element) {
-        this.element = element;
-    }
-
-    // Called whenever a form is about to be submitted.
-    // returns true on success
-    // returns on failure return an error object that can be processed by VErrors:
-    //    { email: ["email must be filled", "email must be from your domain"] }
-    //    { :page: ["must be filled"] }
-    validate(form, params) {
-        console.log("Form validate", form, params);
-        var errors = [];
-        for (let input of this.inputs()) {
-            if (input.vComponent && input.vComponent.validate) {
-                var result = input.vComponent.validate(form, params);
-                if (result !== true) {
-                    errors.push(result);
-                }
-            }
-        }
-        return errors;
-    }
-
-    inputs() {
-        return this.element.elements;
-    }
-
-    // Called to collect data for submission
-    prepareSubmit(form, params) {
-        for (let input of this.inputs()) {
-            if (input.vComponent && input.vComponent.prepareSubmit) {
-                input.vComponent.prepareSubmit(form, params);
-            }
-        }
-    }
-
-    initEventListener(eventName, eventHandler) {
-        for (let input of this.inputs()) {
-            if (input.vComponent && input.vComponent.initEventListener) {
-                input.vComponent.initEventListener(eventName, eventHandler);
-            }
-        }
-    }
-
-    clear() {
-        for (const input of this.inputs()) {
-            if (input.vComponent && input.vComponent.clear) {
-                input.vComponent.clear();
-            }
-        }
+export class VForm extends eventHandlerMixin(VBaseContainer) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
     }
 }

data/views/mdc/assets/js/components/grid.js

@@ -0,0 +1,20 @@
+import {VBaseContainer} from "./base-container";
+import {hookupComponents} from "./base-component";
+
+export function initGrid() {
+    console.log('\tGrid');
+    hookupComponents('.v-grid', VGrid, null);
+    hookupComponents('.v-column', VColumn, null);
+}
+
+export class VGrid extends VBaseContainer {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}
+
+export class VColumn extends VBaseContainer {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}