voom-presenters 0.2.0 → 2.0.0

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';
@@ -23,33 +25,56 @@ 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();
-    initRichTextArea();
-    initSteppers();
-    initRadios();
-    initSliders();
-    initHiddenFields();
-    initContent();
-    initGrid();
-    initTabBars();
-    initTables();
-    initFileInputs();
     // This needs to be last, because it relies on the components installed above.
-    initEvents();
+    initEvents(root);
+
+    const end = performance.now();
+    console.debug('Done in %s ms', (end - start).toFixed(2));
 }

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

@@ -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,32 +1,79 @@
-import {MDCMenu} from '@material/menu';
-import {Corner} from '@material/menu';
-import {hookupComponents, VBaseComponent} from "./base-component";
+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;
+        menu.setAbsolutePosition(event.clientX, event.clientY);
         menu.setAnchorMargin({left: offset});
         menu.setAnchorCorner(placement);
         menu.open = !menu.open;
+        event.stopPropagation();
+    };
+}
+
+function createSurfaceClickHandler(mdcMenu) {
+    return function (event) {
+        if (mdcMenu.open) {
+            if (event.target.classList.contains('v-menu-link')) {
+                mdcMenu.open = false;
+            }
+        }
     };
 }
 
-export function initMenus() {
-    console.log('\tMenus');
-    hookupComponents('.v-menu', VMenu, MDCMenu);
+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, mdcComponent) {
-        super(element, mdcComponent);
+    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);
+    }
 
-        var anchor = element.closest('.mdc-menu-anchor');
+    menulink() {
+        var anchor = this.element.closest('.mdc-menu-anchor');
+        var link = null;
         if (anchor) {
-            var menulink = anchor.querySelector('.v-menu-click');
-            menulink.addEventListener('click', createMenuHandler(mdcComponent, element));
+            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

@@ -2,33 +2,34 @@ export let visibilityObserverMixin = Base => class extends Base {
 
     recalcWhenVisible(vComponent) {
         vComponent.hidden_on_create = vComponent.element.offsetParent === null;
-        if(vComponent.hidden_on_create){
+        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 = 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
-            });
+            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;
+    }
+}
+
+

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

@@ -0,0 +1,31 @@
+import {hookupComponents, VBaseComponent} from './base-component';
+import {MDCLinearProgress} from '@material/linear-progress';
+
+export function initProgress(e) {
+    console.debug('\tProgress');
+    hookupComponents(e, '.v-progress', VProgress, MDCLinearProgress);
+}
+
+export class VProgress extends VBaseComponent {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        element.dataset.hidden === 'true' ? this.hide() : this.show();
+        this.root.addEventListener('V:postStarted', (e) => {
+            this.show();
+        });
+        this.root.addEventListener('V:postFinished', (e) => {
+            this.hide();
+        });
+        this.root.addEventListener('V:eventsHalted', (e) => {
+            this.hide();
+        });
+    }
+
+    show() {
+        this.mdcComponent.open();
+    }
+
+    hide() {
+        this.mdcComponent.close();
+    }
+}