voom-presenters 0.1.13 → 0.2.0

data/views/mdc/assets/js/components/hidden-fields.js

@@ -0,0 +1,33 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+
+export function initHiddenFields() {
+    console.log('\tHiddenFields');
+    hookupComponents('.v-hidden-field', VHiddenField, null);
+}
+
+export class VHiddenField extends VBaseComponent {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+
+    // Called to collect data for submission
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name(){
+        return this.element.name;
+    }
+
+    value(){
+        return this.element.value;
+    }
+
+    clear(){
+        this.setValue('');
+    }
+
+    setValue(value){
+        this.element.value = value;
+    }
+}

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

@@ -1,21 +1,14 @@
 import {MDCIconToggle} from '@material/icon-toggle';
+import {hookupComponents, VBaseComponent} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
 
 export function initIconToggles() {
     console.log('\tIcon Toggles');
+    hookupComponents('.v-icon-toggle', VIconToggle, MDCIconToggle);
+}
 
-    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);
-        }
+export class VIconToggle extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
     }
 }
-
-// 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

@@ -13,6 +13,16 @@ import {initForms} from './forms';
 import {initSnackbar} from './snackbar';
 import {initCheckboxes} from './checkboxes';
 import {initSwitches} from './switches';
+import {initRichTextArea} from './rich-text-area';
+import {initSteppers} from './steppers';
+import {initRadios} from './radios';
+import {initSliders} from './sliders';
+import {initHiddenFields} from './hidden-fields';
+import {initContent} from './content';
+import {initGrid} from './grid';
+import {initTabBars} from './tab-bars';
+import {initTables} from './data-tables';
+import {initFileInputs} from './file-inputs';
 
 export function initialize(){
     console.log('Initializing');
@@ -30,7 +40,16 @@ export function initialize(){
     initSnackbar();
     initCheckboxes();
     initSwitches();
+    initRichTextArea();
+    initSteppers();
+    initRadios();
+    initSliders();
+    initHiddenFields();
+    initContent();
+    initGrid();
+    initTabBars();
+    initTables();
+    initFileInputs();
     // This needs to be last, because it relies on the components installed above.
     initEvents();
-    // componentHandler.upgradeAllRegistered();
 }

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

@@ -46,7 +46,7 @@ function toggleSelectTotalHeader(component, count, show = false) {
 
 function toggleSelectTotalInput(component, selectTotal = false) {
     if (component.dataset.totalLines > 0) {
-        component.querySelector('#select-total').checked = selectTotal
+        component.querySelector('#select-total').checked = selectTotal;
         component.querySelector('#list-item-select-all-toggle-on').classList.add('hidden');
         component.querySelector('#list-item-select-all-toggle-off').classList.add('hidden');
         component.querySelector('#list-item-select-all-toggle-' + (selectTotal ? 'on' : 'off')).classList.remove('hidden');

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

@@ -1,11 +1,13 @@
 import {MDCMenu} from '@material/menu';
 import {Corner} from '@material/menu';
+import {hookupComponents, VBaseComponent} from "./base-component";
+import {eventHandlerMixin} from "./mixins/event-handler";
 
 
 function createMenuHandler(menu, element) {
     return function () {
         let offset = parseInt(element.dataset.rightOffset);
-        let placement = element.dataset.placement === 'contextual' ? Corner.TOP_LEFT : Corner.BOTTOM_LEFT
+        let placement = element.dataset.placement === 'contextual' ? Corner.TOP_LEFT : Corner.BOTTOM_LEFT;
         menu.setAnchorMargin({left: offset});
         menu.setAnchorCorner(placement);
         menu.open = !menu.open;
@@ -14,20 +16,17 @@ function createMenuHandler(menu, element) {
 
 export function initMenus() {
     console.log('\tMenus');
+    hookupComponents('.v-menu', VMenu, MDCMenu);
+}
 
-    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));
-                }
+export class VMenu extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
 
-            }
+        var anchor = element.closest('.mdc-menu-anchor');
+        if (anchor) {
+            var menulink = anchor.querySelector('.v-menu-click');
+            menulink.addEventListener('click', createMenuHandler(mdcComponent, element));
         }
     }
 }

data/views/mdc/assets/js/components/mixins/visibility-observer.js

@@ -0,0 +1,34 @@
+export let visibilityObserverMixin = Base => class extends Base {
+
+    recalcWhenVisible(vComponent) {
+        vComponent.hidden_on_create = vComponent.element.offsetParent === null;
+        if(vComponent.hidden_on_create){
+            // If the component is hidden in DOM for any number of reasons (parent is hidden) then the
+            // Text Field may no render correctly. In this case we observe the DOM watching for a point at which the
+            // element become visible in the DOM and at that point using the MDCComponent to properly re-render that
+            // element
+            vComponent.mutationObserver = new MutationObserver(function(mutations) {
+                if(this.vComponent.hidden_on_create) {
+                    if(this.vComponent.element.offsetParent !== null){
+                        // Parent is now visible. Re-run the MDC layout and disconnect from the observer
+                        this.vComponent.hidden_on_create = false;
+                        this.vComponent.mdcComponent.layout();
+                        // I changed this to addtionally force a resize event on the element after mdcComponent.layout();
+                        // method. In some scenarios with the MDCSlider going from hidden to visible calling layout
+                        // didn't work. Firing the 'resize' event did.
+                        var event = document.createEvent('HTMLEvents');
+                        event.initEvent('resize', true, false);
+                        this.vComponent.element.dispatchEvent(event);
+                        this.disconnect();
+                    }
+                }
+            });
+            vComponent.mutationObserver.vComponent = vComponent;
+            vComponent.mutationObserver.observe(document.documentElement, {
+                attributes: true,
+                subtree: true
+            });
+        }
+
+    }
+};

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

@@ -0,0 +1,39 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {MDCRadio} from "@material/radio";
+
+export function initRadios() {
+    console.log('\tRadios');
+    hookupComponents('.v-radio', VRadio, MDCRadio);
+}
+
+export class VRadio extends eventHandlerMixin(VBaseComponent) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.input = element.querySelector('input');
+    }
+
+    prepareSubmit(params) {
+        if(this.input.checked) {
+            params.push([this.name(), this.value()]);
+        }
+    }
+
+    name(){
+        return this.input.name;
+    }
+
+    value(){
+        return this.input.value;
+    }
+
+    clear(){
+        this.setValue('');
+    }
+
+    setValue(value){
+        this.input.value = value;
+    }
+
+
+}

data/views/mdc/assets/js/components/rich-text-area.js

@@ -0,0 +1,43 @@
+import Quill from "quill";
+
+var toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+    ['blockquote', 'code-block'],
+
+    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
+    [{ 'direction': 'rtl' }],                         // text direction
+
+    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+    //[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+    //[{ 'font': [] }],
+    [{ 'align': [] }],
+    ['link', 'image'],
+    ['clean']                                         // remove formatting button
+];
+
+export function initRichTextArea() {
+    console.log('\tRich Text Area');
+    let components = document.querySelectorAll('.v-rich-text-area');
+    for (let i = 0; i < components.length; i++) {
+        let component = components[i];
+        let form = component.closest('form');
+        if (!component.vComponent) {
+            component.vComponent = new Quill(component, {
+                modules: {
+                    toolbar: toolbarOptions
+                },
+                theme: 'snow',
+                placeholder: component.dataset.placeholder
+            });
+            let input = document.querySelector('input[name=' + component.dataset.name + ']');
+            component.vComponent.on('text-change', function(){
+                input.value = component.vComponent.root.innerHTML;
+            });
+        }
+    }
+}

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

@@ -1,45 +1,46 @@
 import {MDCSelect} from '@material/select';
-import {VBaseComponent} from './base-component';
+import {VBaseComponent, hookupComponents} from './base-component';
 import {eventHandlerMixin} from './mixins/event-handler';
 
 export function initSelects() {
     console.log('\tSelects');
-    var components = document.querySelectorAll('.mdc-select');
-    for (var i = 0; i < components.length; i++) {
-        var component = components[i];
-        if (!component.vComponent) {
-            let vSelect = new VSelect(component, MDCSelect.attachTo(component));
-            component.vComponent = vSelect;
-            var selectInput = component.querySelector('select');
-            selectInput.vComponent = vSelect;
-        }
-    }
+    hookupComponents('.v-select', VSelect, MDCSelect);
 }
 
 
 export class VSelect extends eventHandlerMixin(VBaseComponent) {
     constructor(element, mdcComponent) {
-        super(element);
+        super(element, mdcComponent);
         this.select = element.querySelector('select');
-        this.mdcComponent = mdcComponent;
+        this.select.vComponent = this;
     }
 
-    prepareSubmit(form, params) {
-        // On actual post/submit the form is passed and we are not expected to return our value
-        if (!form) {
-            params.push([this.select.name, this.select.value]);
-        }
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
     }
 
-    validate() {
-        return true;
+    name() {
+        return this.select.name;
     }
 
-    name(){
-            
+    value() {
+        return this.select.options.length === 0 ? null : this.select.options[this.select.selectedIndex].value;
     }
 
-    value(){
+    clear() {
+        let before = this.select.selectedIndex;
+        this.select.selectedIndex = 0;
+        if (before !== 0) {
+            var event = new InputEvent('input', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+              });
+            this.select .dispatchEvent(event);
+        }
+    }
 
+    setValue(value) {
+        this.select.value = value;
     }
 }

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

@@ -0,0 +1,56 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {MDCSlider} from '@material/slider';
+import {visibilityObserverMixin} from './mixins/visibility-observer';
+import {VEvents} from './events';
+
+export function initSliders() {
+    console.log('\tSliders');
+    hookupComponents('.v-slider', VSlider, MDCSlider);
+}
+
+export class VSlider extends visibilityObserverMixin(eventHandlerMixin(VBaseComponent)) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.recalcWhenVisible(this);
+    }
+
+
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.element.getAttribute('data-name')
+    }
+
+    value() {
+        return this.mdcComponent.value
+    }
+
+    clear() {
+        this.setValue(0);
+    }
+
+    setValue(value) {
+        this.mdcComponent.value = value;
+    }
+
+    initEventListener(eventName, eventHandler) {
+        if (eventName === 'change') {
+            eventName = 'MDCSlider:change';
+        }
+        super.initEventListener(eventName, eventHandler);
+    }
+
+
+    createEventHandler(actionsData) {
+        return function (event) {
+            // The MDC slider was firing duplicate change events - this prevents that
+            if (!this.lastEvent || (event.timeStamp - this.lastEvent.timeStamp) > 10.0) {
+                new VEvents(actionsData, event).call();
+            }
+            this.lastEvent = event;
+        };
+    }
+}

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

@@ -1,32 +1,23 @@
 import {MDCSnackbar, MDCSnackbarFoundation} from '@material/snackbar';
+import {VBaseComponent, hookupComponents} from './base-component';
+
+
+export function initSnackbar() {
+    console.log('\tSnackbar');
+    hookupComponents('.v-snackbar', VSnackbar, MDCSnackbar);
+}
 
 // This class displays a page level message
-export class VSnackbar {
-    constructor(element, snackbar) {
-        this.element = element;
-        this.snackbar = snackbar;
+export class VSnackbar extends VBaseComponent {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        element.classList.remove('v-hidden'); // defer causes default snackbar to flash without this
     }
 
     display(message) {
         const dataObj = {
-          message: message,
-          // actionText: 'Undo',
-          // actionHandler: function () {
-          //   console.log('my undo function');
-          // }
+            message: message,
         };
-        this.snackbar.show(dataObj);
+        this.mdcComponent.show(dataObj);
     }
-}
-
-export function initSnackbar() {
-    console.log('\tSnackbar');
-    var components = document.querySelectorAll('.mdc-snackbar');
-    for (var i = 0; i < components.length; i++) {
-        var component = components[i];
-        if (!component.vComponent) {
-            let vSnackbar= new VSnackbar(component, MDCSnackbar.attachTo(component));
-            component.vComponent = vSnackbar;
-        }
-    }
-}
+}