voom-presenters 0.1.0

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

@@ -0,0 +1,3 @@
+export function initCards() {
+    console.log('\tCards');
+}

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

@@ -0,0 +1,15 @@
+import {MDCCheckbox} from '@material/checkbox';
+
+export function initCheckboxes() {
+    console.log('\tCheckboxes');
+
+    var components = document.querySelectorAll('.mdc-checkbox');
+    if (components) {
+        for (var i = 0; i < components.length; i++) {
+            var component = components[i];
+            if (!component.mdcComponent) {
+                component.mdcComponent = MDCCheckbox.attachTo(component);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+import {MDCChip} from '@material/chips';
+
+export function initChips() {
+    console.log('\tChips');
+    var components = document.querySelectorAll('.mdc-chip');
+    for (var i = 0; i < components.length; i++) {
+        var component = components[i];
+        if(!component.mdcComponent) {
+            component.mdcComponent = MDCChip.attachTo(component);
+        }
+    }
+}

data/views/mdc/assets/js/components/date-time.js

@@ -0,0 +1,6 @@
+export function initDateTime() {
+    console.log('\tDateTime');
+}
+
+
+

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

@@ -0,0 +1,32 @@
+// This is used to get a proper binding of the actionData
+// https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
+function createDialogHandler(dialog) {
+    return function () {
+        dialog.close();
+    };
+}
+
+export function initDialogs() {
+    console.log('\tDialogs');
+
+    var dialogs = document.querySelectorAll('.v-js-dialog');
+    if (dialogs) {
+        for (var i = 0; i < dialogs.length; i++) {
+            var dialog = dialogs[i];
+            var dialogButtons = dialog.querySelectorAll('button:not([disabled])');
+            for (var j = 0; j != dialogButtons.length; j++) {
+                var dialogButton = dialogButtons[j];
+                if (!dialogButton.dialog) {
+                    dialogButton.dialog = dialog;
+                    var buttonEvents = dialogButton.dataset.events;
+                    // If the dialog button does not have any events tied to it,
+                    // then close the dialog on click, otherwise let the events handlers
+                    // take care of the close.
+                    if (!buttonEvents) {
+                        dialogButton.addEventListener('click', createDialogHandler(dialog));
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,151 @@
+import {VLoads} from './events/loads';
+import {VPosts} from './events/posts';
+import {VReplaces} from './events/replaces';
+import {VDialog} from './events/dialog';
+import {VErrors} from './events/errors';
+import {VToggleVisiblity} from './events/toggle_visiblity';
+import {VSnackbarEvent} from './events/snackbar';
+import {VAutoComplete} from './events/autocomplete';
+import {VSelects} from './events/selects';
+import {VNavigates} from './events/navigates';
+
+
+export class VEvents {
+    //[[type, url, target, params]]
+    constructor(actions, event) {
+        this.event = event;
+        this.actions = actions.map((action) => {
+            return this.constructor.action_class(action, event);
+        });
+    }
+
+    call() {
+        // Adapted from http://www.datchley.name/promise-patterns-anti-patterns/#executingpromisesinseries
+        var fnlist = this.actions.map((action) => {
+            return function (results) {
+                return Promise.resolve(action.call(results));
+            };
+        });
+
+        // Execute a list of Promise return functions in series
+        function pseries(list) {
+            var p = Promise.resolve([]);
+            return list.reduce(function (pacc, fn) {
+                return pacc = pacc.then(fn);
+            }, p);
+        }
+
+        var event = this.event;
+
+        pseries(fnlist)
+            .then(function (results) {
+                var result = results.pop();
+                var contentType = result.contentType;
+                var responseURL = result.responseURL;
+
+                if (event.target.dialog) {
+                    event.target.dialog.close();
+                }
+                if (contentType && contentType.indexOf("text/html") !== -1 && typeof responseURL !== 'undefined') {
+                    window.location = responseURL;
+                }
+
+            }).catch(function (results) {
+            var result = results.pop();
+            new VErrors(event).displayErrors(result);
+        });
+    }
+
+    static action_class(action, event) {
+        var action_type = action[0];
+        var url = action[1];
+        var options = action[2];
+        var params = action[3];
+
+        switch (action_type) {
+            case 'loads':
+                return new VLoads(options, url, params, event);
+            case 'replaces':
+                return new VReplaces(options, url, params, event);
+            case 'post':
+                return new VPosts(options, url, params, 'POST', event);
+            case 'update':
+                return new VPosts(options, url, params, 'PUT', event);
+            case 'delete':
+                return new VPosts(options, url, params, 'DELETE', event);
+            case 'dialog':
+                return new VDialog(options, params, event);
+            case 'toggle_visibility':
+                return new VToggleVisiblity(options, params, event);
+            case 'snackbar':
+                return new VSnackbarEvent(options, params, event);
+            case 'autocomplete':
+                return new VAutoComplete(options, url, params, event);
+            case 'selects':
+                return new VSelects(options, params, event);
+            case 'navigates':
+                return new VNavigates(options, params, event);
+            default:
+                throw action_type + ' is not supported.';
+        }
+    }
+
+}
+
+// This is used to get a proper binding of the actionData
+// https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
+function createEventHandler(actionsData) {
+    return function (event) {
+        new VEvents(actionsData, event).call();
+    };
+}
+
+export function initEvents() {
+    console.log('\tEvents');
+
+    var events = document.querySelectorAll('[data-events]');
+    for (var i = 0; i < events.length; i++) {
+        var eventElem = events[i];
+        var eventsData = JSON.parse(eventElem.dataset.events);
+        for (var j = 0; j < eventsData.length; j++) {
+            var eventData = eventsData[j];
+            var eventName = eventData[0];
+            var eventOptions = eventData[2];
+            var actionsData = eventData[1];
+            var eventHandler = createEventHandler(actionsData);
+            // Delegate to the component if possible
+            if (eventElem.vComponent && eventElem.vComponent.initEventListener) {
+                eventElem.vComponent.initEventListener(eventName, eventHandler);
+            } else {
+                if (typeof eventElem.eventsHandler === 'undefined') {
+                    eventElem.eventsHandler = {};
+                }
+                if (!eventElem.eventsHandler[eventName]) {
+                    // Delegate to the component if possible
+                    eventElem.eventsHandler[eventName] = eventHandler;
+                    eventElem.addEventListener(eventName, eventHandler, eventOptions);
+                }
+            }
+        }
+    }
+    fireAfterLoad();
+}
+
+function fireAfterLoad() {
+    var events = document.querySelectorAll('[data-events]');
+    for (var i = 0; i < events.length; i++) {
+        var eventElem = events[i];
+        var eventsData = JSON.parse(eventElem.dataset.events);
+        for (var j = 0; j < eventsData.length; j++) {
+            var eventData = eventsData[j];
+            var eventName = eventData[0];
+            if(eventName==='after_init') {
+                var event = new Event('after_init');
+                // Dispatch the event.
+                eventElem.dispatchEvent(event);
+            }
+        }
+    }
+}
+
+

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

@@ -0,0 +1,96 @@
+import {VSnackbar} from '../snackbar';
+import {VBase} from './base';
+import {initialize} from '../initialize';
+
+// Auto complete a datalist
+// The elementId is a datalist
+// The url is called as a GET expecting json back
+export class VAutoComplete 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) {
+        // Clear the timeout if it has already been set.
+        // This will prevent the previous task from executing
+        // if it has been less than <MILLISECONDS>
+        var parentElement = this.parentElement();
+        var updateElement = this.createUpdateElementHandler(this);
+        var promiseObj = new Promise(function (resolve) {
+            clearTimeout(parentElement.vTimeout);
+            // Make a new timeout
+            parentElement.vTimeout = setTimeout(updateElement, 500);
+            results.push({action:'autocomplete', statusCode: 200});
+            resolve(results);
+        });
+        return promiseObj;
+    }
+
+    // This is used to get a proper binding of the object
+    // https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
+    createUpdateElementHandler(_this_) {
+        return function () {
+            _this_.updateElement();
+        };
+    }
+
+    updateElement() {
+        this.clearErrors();
+        this.getData(this.populateOptions);
+    }
+
+    dataList() {
+        return document.getElementById(this.element_id);
+    }
+
+    getData(funcProcessData) {
+        var comp = this.component();
+        if(comp.value().length < 2){
+            return;
+        }
+        var httpRequest = new XMLHttpRequest();
+        if (!httpRequest) {
+            throw new Error('Cannot talk to server! Please upgrade your browser to one that supports XMLHttpRequest.');
+            // new VSnackbar('Cannot talk to server! Please upgrade your browser to one that supports XMLHttpRequest.').display();
+        }
+        var dataList = this.dataList();
+        var url = this.buildURL(this.url, this.params, this.inputValues());
+
+        httpRequest.onreadystatechange = function () {
+            if (httpRequest.readyState === XMLHttpRequest.DONE) {
+                console.log(httpRequest.status + ':' + this.getResponseHeader('content-type'));
+                if (httpRequest.status === 200) {
+                    var response = JSON.parse(httpRequest.responseText);
+                    funcProcessData(response, dataList);
+                } else {
+                    console.error("Unable to autocomplete! ElementId: " + this.element_id);
+                }
+            }
+        };
+        console.log('GET:' + url);
+        httpRequest.open('GET', url, true);
+        httpRequest.send();
+    }
+
+    populateOptions(response, dataList) {
+        dataList.innerHTML = "";
+
+        response.forEach(function (item) {
+            var value = item;
+            var key = null;
+            if (Array.isArray(item)) {
+                value = item[0];
+                key = item[1];
+            }
+            // Create a new <option> element.
+            var option = document.createElement('option');
+            option.value = value;
+            option.dataset.key = key;
+            dataList.appendChild(option);
+        });
+    }
+}

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

@@ -0,0 +1,41 @@
+import {VErrors} from './errors';
+import {VUrls} from '../../utils/urls';
+
+export class VBase extends VUrls {
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+
+    clearErrors() {
+        new VErrors().clearErrors();
+    }
+
+    parentElement() {
+        return document.getElementById(this.options.__parent_id__);
+    }
+
+    inputValues(form) {
+        var params = [];
+        // Let input component push parameters
+        var vComp = this.component();
+        if (vComp) {
+            vComp.prepareSubmit(form, params);
+        }
+        return params;
+    }
+
+    component() {
+        let parent = this.parentElement();
+        return parent ? this.parentElement().vComponent : null;
+    }
+
+    validate() {
+        var errors = [];
+        var comp = this.component();
+        if (comp) {
+            errors = comp.validate();
+        }
+        return errors;
+    }
+}

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

@@ -0,0 +1,25 @@
+export class VDialog {
+    constructor(options, params, event) {
+        this.dialogId = options.target;
+        this.params = params;
+        this.event = event;
+    }
+
+    call(results) {
+        var dialog = document.querySelector('#' + this.dialogId);
+        if(dialog) {
+            if (!dialog.showModal) {
+                dialogPolyfill.registerDialog(dialog);
+            }
+
+            dialog.showModal();
+        }else {
+            console.error("Unable to find dialog with id: "+this.dialogId+". Usually this means you forgot to attach it to the currently rendered page.");
+        }
+        var promiseObj = new Promise(function (resolve) {
+            results.push({action:'dialog', statusCode: 200});
+            resolve(results);
+        });
+        return promiseObj;
+    }
+}

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

@@ -0,0 +1,142 @@
+export class VErrors {
+    constructor(event) {
+        this.event = event;
+    }
+
+    clearErrors() {
+        var errorMessages = document.querySelectorAll('.v-error-message');
+
+        for (var i = 0; i < errorMessages.length; i++) {
+            errorMessages[i].remove();
+        }
+    }
+
+    // Rails errors
+    // {
+    //   "name": [
+    //     "Requires name"
+    //   ]
+    // }
+
+    // Validation errors
+    // { :email => ["must be filled"] }
+
+    // Custom errors
+    // { :email => "must be filled" }
+
+    // Exceptions
+    // {exception: 'Something bad happened' }
+
+    stringsToArrays(value) {
+        if (Array.isArray(value) || value.constructor === Object) {
+            return value;
+        }
+        return new Array(value);
+    }
+
+    normalizeErrors(errors) {
+        if (errors && errors.constructor === Object) {
+            return Object.keys(errors).reduce((previous, key) => {
+                previous[key] = this.stringsToArrays(errors[key]);
+                return previous;
+            }, {});
+        }
+        return [];
+    }
+
+    // [http_status, content_type, resultText]
+    displayErrors(result) {
+        var httpStatus = result.statusCode;
+        var contentType = result.contentType;
+        var resultText = result.content;
+
+        var responseErrors = null;
+
+        if (contentType && contentType.indexOf("application/json") !== -1) {
+            responseErrors = JSON.parse(resultText);
+        } else if (contentType && contentType.indexOf("v/errors") !== -1) {
+            responseErrors = resultText;
+        }
+
+        if (responseErrors) {
+            if (!Array.isArray(responseErrors)) {
+                responseErrors = [responseErrors];
+            }
+            for (var response of responseErrors) {
+                var pageErrors = Object.values(this.normalizeErrors(response)).reduce(function (previous, value) {
+                    if (Array.isArray(value)) {
+                        previous.push(value.join('<br/>'));
+                    }
+                    return previous;
+                }, []);
+                var fieldErrors = this.normalizeErrors(response.errors);
+
+                for (var field in fieldErrors) {
+                    if (!this.displayInputError(field, fieldErrors[field])) {
+                        // Collect errors that can't be displayed at the field level
+                        pageErrors.push(fieldErrors[field]);
+                    }
+                }
+                this.prependErrors(pageErrors);
+            }
+        } else if (httpStatus === 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:" + httpStatus]);
+        }
+    }
+
+    // Sets the helper text on the field
+    // Returns true if it was able to set the error on the control
+    displayInputError(divId, messages) {
+        var currentEl = document.getElementById(divId);
+        if (currentEl && currentEl.mdcComponent) {
+            currentEl.mdcComponent.helperTextContent = messages.join(', ');
+            var helperText = document.getElementById(divId + '-input-helper-text');
+            helperText.classList.add('mdc-text-field--invalid',
+                'mdc-text-field-helper-text--validation-msg',
+                'mdc-text-field-helper-text--persistent');
+            currentEl.mdcComponent.valid = false;
+            return true;
+        }
+        return false;
+    }
+
+    // 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) {
+        var errorsDiv = this.findNearestErrorDiv();
+        // create a new div element
+        var newDiv = document.createElement("div");
+        newDiv.className = 'v-error-message';
+        // and give it some content
+
+        for (var message of messages) {
+            var newContent = document.createTextNode(message);
+            newDiv.appendChild(newContent);
+            let br = document.createElement('br');
+            // add the text node to the newly created div
+            newDiv.appendChild(br);
+        }
+
+        // add the newly created element and its content into the DOM
+        if (errorsDiv) {
+            errorsDiv.parentElement.insertBefore(newDiv, errorsDiv);
+            return true;
+        } else {
+            console.error("Unable to display Errors! ", messages);
+        }
+        return false;
+    }
+
+    findNearestErrorDiv() {
+        let errorsDiv = null;
+        const currentDiv = this.event.target;
+        if(currentDiv) {
+            errorsDiv = currentDiv.closest('.v-errors')
+        }else{
+            errorsDiv = document.querySelector('.v-errors');
+        }
+        return errorsDiv;
+    }
+}