voom-presenters 0.1.0

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

@@ -0,0 +1,22 @@
+import {VUrls} from '../../utils/urls';
+
+export class VLoads extends VUrls{
+    constructor(options, url, params, event) {
+        super();
+        this.options = options;
+        this.params = params;
+        this.url = url;
+        this.event = event;
+    }
+
+    call(results) {
+        var url = this.buildURL(this.url, this.params);
+        var promiseObj = new Promise(function (resolve) {
+            console.log("Loading page: " + url);
+            results.push({action:'loads', statusCode: 200});
+            resolve(results);
+            window.location = url;
+        });
+        return promiseObj;
+    }
+}

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

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

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

@@ -0,0 +1,99 @@
+import {VSnackbar} from '../snackbar';
+import {VBase} from './base';
+
+// 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);
+        this.url = url;
+        this.params = params;
+        this.method = method;
+        this.event = event;
+    }
+
+    call(results) {
+        this.clearErrors();
+        let errors = this.validate();
+        let method = this.method;
+        if (errors.length > 0) {
+            return new Promise(function (_, reject) {
+                results.push({
+                    action: 'posts',
+                    method: method,
+                    statusCode: 400,
+                    contentType: 'v/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]);
+        }
+
+        var inputValues = this.inputValues(form);
+        for (var input of inputValues) {
+            FD.append(input[0], input[1]);
+        }
+
+        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) {
+                if (httpRequest.readyState === XMLHttpRequest.DONE) {
+                    console.log(httpRequest.status + ':' + this.getResponseHeader('content-type'));
+                    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
+                        });
+                        resolve(results);
+                    } else {
+                        results.push({
+                            action: 'posts',
+                            method: this.method,
+                            statusCode: httpRequest.status,
+                            contentType: this.getResponseHeader('content-type'),
+                            content: httpRequest.responseText
+                        });
+                        reject(results);
+                    }
+                }
+            };
+            // Set up our request
+            httpRequest.open(method, url);
+            console.log(method + ':' + url);
+            // Send our FormData object; HTTP headers are set automatically
+            httpRequest.send(FD);
+        });
+    }
+
+    isForm() {
+        var parentElement = this.parentElement();
+        return parentElement && parentElement.elements;
+    }
+
+    form() {
+        if (this.isForm()) {
+            return this.parentElement();
+        }
+        return null;
+    }
+}

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

@@ -0,0 +1,82 @@
+import {VSnackbar} from '../snackbar';
+import {VBase} from './base';
+import {initialize} from '../initialize';
+
+// 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);
+        this.element_id = options.target;
+        this.url = url;
+        this.params = params;
+        this.event = event;
+    }
+
+    call(results) {
+        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);
+                                results.push({
+                                    action: 'replaces',
+                                    statusCode: 500,
+                                    contentType: 'v/errors',
+                                    content: {exception: msg}
+                                });
+                                reject(results);
+                            } else {
+                                nodeToReplace.outerHTML = httpRequest.responseText;
+                                var newNode = document.getElementById(elementId);
+                                initialize(newNode);
+
+                                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.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/selects.js

@@ -0,0 +1,28 @@
+export class VSelects {
+    constructor(options, params, event) {
+        this.target = options.target;
+        this.params = params;
+        this.event = event;
+    }
+
+    call(results) {
+        let targetFields =document.querySelectorAll('input[name="'+this.target+'"]');
+        let checked = this.event.target.checked;
+        new Promise(function (resolve) {
+            if (targetFields) {
+                if (checked) {
+                    for (let i = 0; i < targetFields.length; i++) {
+                        console.log(i);
+                        targetFields[i].checked = true;
+                    }
+                } else {
+                    for (let i = 0; i < targetFields.length; i++) {
+                        targetFields[i].checked = false;
+                    }
+                }
+            }
+            results.push({action:'selects', statusCode: 200});
+            resolve(results);
+        });
+    }
+}

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

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

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

@@ -0,0 +1,19 @@
+export class VToggleVisiblity  {
+    constructor(options, params, event) {
+        this.targetId = options.target;
+        this.params = params;
+        this.event = event;
+    }
+
+    call(results) {
+        var targetId = this.targetId;
+        var promiseObj = new Promise(function (resolve) {
+            console.log("Toggling visiblity on: " + targetId);
+            var elem = document.getElementById(targetId);
+            elem.classList.toggle("v-hidden");
+            results.push({action:'toggle_visiblity', statusCode: 200});
+            resolve(results);
+        });
+        return promiseObj;
+    }
+}

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

@@ -0,0 +1,57 @@
+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);
+        }
+    }
+}
+
+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) {
+                var result = input.vComponent.validate(form, params);
+                if (result !== true) {
+                    errors.push(result);
+                }
+            }
+        }
+        return errors;
+    }
+
+    inputs() {
+        return this.element.querySelectorAll('input');
+    }
+
+    // Called to collect data for submission
+    prepareSubmit(form, params) {
+        for (let input of this.inputs()) {
+            if (input.vComponent) {
+                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);
+            }
+        }
+    }
+}

data/views/mdc/assets/js/components/icon-toggles.js

@@ -0,0 +1,21 @@
+import {MDCIconToggle} from '@material/icon-toggle';
+
+export function initIconToggles() {
+    console.log('\tIcon Toggles');
+
+    var components = document.querySelectorAll('.mdc-icon-toggle');
+    for (var i = 0; i < components.length; i++) {
+        var component = components[i];
+        if (!component.mdcComponent) {
+            component.mdcComponent = new MDCIconToggle(component);
+        }
+    }
+}
+
+// TODO: Add event handler
+// var addToFavorites = document.getElementById('add-to-favorites');
+//         var favoritedStatus = document.getElementById('favorited-status');
+//         addToFavorites.addEventListener('MDCIconToggle:change', function(evt) {
+//           var newStatus = evt.detail.isOn ? 'yes' : 'no';
+//           favoritedStatus.textContent = newStatus;
+//         });

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

@@ -0,0 +1,34 @@
+import {initButtons} from './button';
+import {initDialogs} from './dialogs';
+import {initTextFields} from './text-fields';
+import {initEvents} from './events';
+import {initLists} from './lists';
+import {initIconToggles} from './icon-toggles';
+import {initMenus} from './menus';
+import {initSelects} from './selects';
+import {initChips} from './chips';
+import {initCards} from './cards';
+import {initForms} from './forms';
+import {initSnackbar} from './snackbar';
+import {initCheckboxes} from './checkboxes';
+import {initDateTime} from './date-time';
+
+export function initialize(){
+    console.log('Initializing');
+    initButtons();
+    initDialogs();
+    initTextFields();
+    initLists();
+    initIconToggles();
+    initMenus();
+    initSelects();
+    initChips();
+    initCards();
+    initForms();
+    initSnackbar();
+    initCheckboxes();
+    initDateTime();
+    // This needs to be last, because it relies on the components installed above.
+    initEvents();
+    // componentHandler.upgradeAllRegistered();
+}

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

@@ -0,0 +1,4 @@
+export function initLists() {
+    console.log('\tLists');
+    // Put any initialization code you need here
+}

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

@@ -0,0 +1,31 @@
+import {MDCMenu} from '@material/menu';
+import {Corner} from '@material/menu';
+
+
+function createMenuHandler(menu, element) {
+    return function () {
+        var offset = parseInt(element.dataset.rightOffset);
+        menu.setAnchorMargin({left: offset});
+        menu.open = !menu.open;
+    };
+}
+
+export function initMenus() {
+    console.log('\tMenus');
+
+    var components = document.querySelectorAll('.v-menu');
+    if (components) {
+        for (var i = 0; i < components.length; i++) {
+            var component = components[i];
+            if (!component.mdcComponent) {
+                component.mdcComponent = new MDCMenu(component);
+                var anchor = component.closest('.mdc-menu-anchor');
+                if (anchor) {
+                    var menulink = anchor.querySelector('.v-menu-click');
+                    menulink.addEventListener('click', createMenuHandler(component.mdcComponent, component));
+                }
+
+            }
+        }
+    }
+}