voom-presenters 0.1.11 → 2.0.1

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

@@ -1,21 +1,14 @@
-import {MDCIconToggle} from '@material/icon-toggle';
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
+import {MDCIconButtonToggle} from '@material/icon-button';
 
-export function initIconToggles() {
-    console.log('\tIcon Toggles');
+export function initIconToggles(e) {
+    console.debug('\tIcon Buttons');
+    hookupComponents(e, '.v-icon-toggle', VIconToggle, MDCIconButtonToggle);
+}
 
-    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 VBaseToggle {
+    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/images.js

@@ -0,0 +1,19 @@
+import {VBaseComponent} from './base-component';
+import {hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initImages(e) {
+    console.debug('\tImages');
+    hookupComponents(e, '.v-image', VImage);
+}
+
+export class VImage extends eventHandlerMixin(VBaseComponent) {
+    constructor(element) {
+        super(element);
+    }
+
+    preview(result, acceptsMimeTypes, file) {
+        this.element.src = result;
+    }
+}
+

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

@@ -4,6 +4,8 @@ import {initDateTime} from './datetime';
 import {initTextFields} from './text-fields';
 import {initEvents} from './events';
 import {initLists} from './lists';
+import {initDrawer} from './drawer';
+import {initHeader} from './header';
 import {initIconToggles} from './icon-toggles';
 import {initMenus} from './menus';
 import {initSelects} from './selects';
@@ -13,24 +15,66 @@ 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';
+import {initFormFields} from './form-fields';
+import {initImages} from './images';
+import {initTypography} from './typography';
+import {initTooltips} from './tooltip';
+import {initPlugins} from './plugins';
+import {initProgress} from './progress';
+import {initDragAndDrop} from './drag_n_drop';
+
+export function initialize(root, setRoot) {
+    console.debug('Initializing components');
+
+    const start = performance.now();
+
+    initButtons(root);
+    initDialogs(root);
+    initDateTime(root);// MUST BE BEFORE initTextFields
+    initTextFields(root);
+    initLists(root);
+    initDrawer(root);
+    initHeader(root);
+    initIconToggles(root);
+    initMenus(root);
+    initSelects(root);
+    initChips(root);
+    initCards(root);
+    initForms(root);
+    initSnackbar(root);
+    initCheckboxes(root);
+    initSwitches(root);
+    initRichTextArea(root);
+    initSteppers(root);
+    initRadios(root);
+    initSliders(root);
+    initHiddenFields(root);
+    initContent(root);
+    initGrid(root);
+    initTabBars(root);
+    initTables(root);
+    initFileInputs(root);
+    initFormFields(root);
+    initImages(root);
+    initTypography(root);
+    initProgress(root);
+    initTooltips(root);
+    initPlugins(root);
+    initDragAndDrop(root);
 
-export function initialize(){
-    console.log('Initializing');
-    initButtons();
-    initDialogs();
-    initDateTime();// MUST BE BEFORE initTextFields
-    initTextFields();
-    initLists();
-    initIconToggles();
-    initMenus();
-    initSelects();
-    initChips();
-    initCards();
-    initForms();
-    initSnackbar();
-    initCheckboxes();
-    initSwitches();
     // This needs to be last, because it relies on the components installed above.
-    initEvents();
-    // componentHandler.upgradeAllRegistered();
+    initEvents(root);
+
+    const end = performance.now();
+    console.debug('Done in %s ms', (end - start).toFixed(2));
 }

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');
@@ -59,15 +59,19 @@ function updateSelectionCount(component, count) {
     }
 }
 
-export function initLists() {
-    console.log('\tLists');
-    let components = document.querySelectorAll('.mdc-list');
+export function initLists(e) {
+    console.debug('\tLists');
+    let components = e.querySelectorAll('.mdc-list');
+
+    if (components.length === 0 && e.offsetParent && e.offsetParent.vComponent !== undefined) {
+        components = document.querySelectorAll('.mdc-list');
+    }
+
     if (components) {
         for (let component of components) {
             let selectAllLineItem = component.querySelector('.v-checkbox--select-control');
             let selectableLineItems = component.querySelectorAll('.v-list-item--selectable-checkbox');
             if (selectAllLineItem && selectableLineItems) {
-
                 for (let element of component.querySelectorAll('.toggle-total-set')) {
                     // Clone and replace element to prevent duplicate event handlers when additional records are loaded/paged
                     let new_element = element.cloneNode(true);
@@ -81,6 +85,7 @@ export function initLists() {
                     element.addEventListener('change', createListItemSelectHandler(component, selectableLineItems, selectAllLineItem));
                 }
                 updateSelectionCount(component, selectableLineItems.length);
+                toggleSelectTotalInput(component);
             }
         }
     }

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

@@ -1,33 +1,79 @@
-import {MDCMenu} from '@material/menu';
-import {Corner} from '@material/menu';
-
+import {MDCMenu, Corner} from '@material/menu';
+import {hookupComponents, unhookupComponents, VBaseComponent} from "./base-component";
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {initEvents, removeEvents} from "./events"
 
 function createMenuHandler(menu, element) {
-    return function () {
+    return function (event) {
         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.setAbsolutePosition(event.clientX, event.clientY);
         menu.setAnchorMargin({left: offset});
         menu.setAnchorCorner(placement);
         menu.open = !menu.open;
+        event.stopPropagation();
     };
 }
 
-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));
-                }
-
+function createSurfaceClickHandler(mdcMenu) {
+    return function (event) {
+        if (mdcMenu.open) {
+            if (event.target.classList.contains('v-menu-link')) {
+                mdcMenu.open = false;
             }
         }
+    };
+}
+
+export function uninitMenus(root) {
+    console.debug('\tUninit Menus');
+    unhookupComponents(root, '.v-menu');
+}
+
+export function initMenus(root) {
+    console.debug('\tMenus');
+    hookupComponents(root, '.v-menu', VMenu, null);
+}
+
+export class VMenu extends eventHandlerMixin(VBaseComponent) {
+    constructor(element) {
+        super(element);
+        this.hoistedMenuElement = element.querySelector('.mdc-menu');
+        this.mdcComponent = new MDCMenu(this.hoistedMenuElement);
+
+        initEvents(this.hoistedMenuElement);
+
+        // Ensure that the menu surface closes when an item is clicked
+        this.hoistedMenuElement.addEventListener('click', createSurfaceClickHandler(this.mdcComponent), { capture: true });
+
+        var link = this.menulink();
+        if (link) {
+            link.addEventListener('click', createMenuHandler(this.mdcComponent, element));
+        }
+        if (this.hoistedMenuElement.getAttribute('data-hoist') != 'false') {
+            this.mdcComponent.hoistMenuToBody();
+        }
+    }
+
+    destroy() {
+        super.destroy();
+        removeEvents(this.hoistedMenuElement);
+
+        var link = this.menulink();
+        if (link) {
+            link.removeEventListener('click', createMenuHandler(this.mdcComponent, this.element));
+        }
+
+        this.hoistedMenuElement.removeEventListener('click', createSurfaceClickHandler(), { capture: true });
+        this.hoistedMenuElement.parentNode.removeChild(this.hoistedMenuElement);
+    }
+
+    menulink() {
+        var anchor = this.element.closest('.mdc-menu-anchor');
+        var link = null;
+        if (anchor) {
+            link = anchor.querySelector('.v-menu-click');
+        }
+        return link;
     }
 }

data/views/mdc/assets/js/components/mixins/dirtyable.js

@@ -0,0 +1,22 @@
+export const dirtyableMixin = Base => class extends Base {
+    get originalValue() {
+        return this._originalValue;
+    }
+
+    set originalValue(value) {
+        this._originalValue = value;
+    }
+
+    get dirtyable() {
+        if (!this.element) {
+            return false;
+        }
+
+        return this.element.hasAttribute('data-dirtyable');
+    }
+
+    isDirty() {
+        // Implement in extending classes.
+        throw new Error('Implement isDirty()');
+    }
+};

data/views/mdc/assets/js/components/mixins/event-handler.js

@@ -1,13 +1,13 @@
 export let eventHandlerMixin = Base => class extends Base {
     // idempotent event handling initialization
-    initEventListener(eventName, eventHandler) {
-        if (typeof this.eventsHandler === 'undefined') {
-            this.eventsHandler = {};
+    initEventListener(eventName, eventHandler, eventOptions) {
+        if (typeof this.element.eventsHandler === 'undefined') {
+            this.element.eventsHandler = {};
         }
-        if (!this.eventsHandler[eventName]) {
-            // Delegate to the component if possible
-            this.eventsHandler[eventName] = eventHandler;
-            this.element.addEventListener(eventName, eventHandler);
+        if (typeof this.element.eventsHandler[eventName] === 'undefined') {
+            this.element.eventsHandler[eventName] = [];
         }
+        this.element.eventsHandler[eventName].push(eventHandler);
+        this.element.addEventListener(eventName, eventHandler, eventOptions);
     }
 };

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

@@ -0,0 +1,35 @@
+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(vComponent.root.documentElement || vComponent.root.host,
+                {
+                    attributes: true,
+                    subtree: true,
+                });
+        }
+    }
+};

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

@@ -0,0 +1,86 @@
+import {VBaseComponent, hookupComponents} from './base-component';
+import {eventHandlerMixin} from './mixins/event-handler';
+
+export function initPlugins(e) {
+    console.debug('\tPlugins');
+    hookupComponents(e, '.v-plugin', VPluginComponent);
+}
+
+// Delegating plugin class. Allows a plugin to define a class-name as a data
+// element, then constructs that class and delegates component lifecycle
+// events to the class.
+export class VPluginComponent extends eventHandlerMixin(VBaseComponent) {
+    constructor(element) {
+        super(element);
+        const pluginClassName = this.element.dataset.pluginCallback;
+        if (pluginClassName) {
+            var PluginClass = null;
+            if (!/^[$_a-z][$_a-z0-9.]*$/i.test(pluginClassName)) {
+                console.error(`Invalid class name: $(pluginClassName)`);
+            }
+            else {
+                PluginClass = eval(pluginClassName);
+            }
+            if (PluginClass) {
+                this.element.vPlugin = new PluginClass(element);
+            }
+            else {
+                console.error(
+                    `Unable to find a plugin class with name ${pluginClassName}`);
+            }
+
+        }
+    }
+
+    prepareSubmit(params) {
+        if (this.element.vPlugin && this.element.vPlugin.prepareSubmit) {
+            this.element.vPlugin.prepareSubmit(params);
+        }
+    }
+
+    validate(formData) {
+        if (this.element.vPlugin && this.element.vPlugin.validate) {
+            return this.element.vPlugin.validate(formData);
+        }
+        return super.validate(formData);
+    }
+
+    clear() {
+        if (this.element.vPlugin && this.element.vPlugin.clear) {
+            return this.element.vPlugin.clear();
+        }
+    }
+
+    reset() {
+        if (this.element.vPlugin && this.element.vPlugin.reset) {
+            return this.element.vPlugin.reset();
+        }
+    }
+
+    onShow() {
+        if (this.element.vPlugin && this.element.vPlugin.onShow) {
+            return this.element.vPlugin.onShow();
+        }
+    }
+
+    initEventListener(eventName, eventHandler) {
+        if (this.element.vPlugin && this.element.vPlugin.initEventListener) {
+            this.element.vPlugin.initEventListener(eventName, eventHandler);
+        }
+        else {
+            super.initEventListener(eventName, eventHandler);
+        }
+    }
+
+    preview(result, acceptsMimeTypes, e) {
+        if (this.canPreview()) {
+            this.element.vPlugin.preview(result, acceptsMimeTypes, e);
+        }
+    }
+
+    canPreview() {
+        return this.element.vPlugin && this.element.vPlugin.preview;
+    }
+}
+
+