voom-presenters 0.1.10 → 2.0.0

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();
+    }
+}

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

@@ -0,0 +1,14 @@
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
+import {MDCRadio} from "@material/radio";
+
+export function initRadios(e) {
+    console.debug('\tRadios');
+    hookupComponents(e, '.v-radio', VRadio, MDCRadio);
+}
+
+export class VRadio extends VBaseToggle {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+    }
+}

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

@@ -0,0 +1,227 @@
+import Quill from "quill";
+import {HorizontalRuleBlot} from './rich-text-area/horizontal-rule-blot';
+import {hookupComponents, VBaseComponent} from "./base-component";
+import {eventHandlerMixin} from "./mixins/event-handler";
+import {dirtyableMixin} from './mixins/dirtyable';
+
+// These Blots will be registered with Quill.
+const blots = [
+    HorizontalRuleBlot,
+];
+const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],
+    [{ 'color': [] }],
+    [{ 'align': [] }],
+    ['blockquote', 'horizontal-rule'],
+    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+    [{ 'script': 'sub'}, { 'script': 'super' }],
+    [{ 'direction': 'rtl' }],
+    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+    [{ 'size': ['xx-small', false, 'large', 'x-large'] }],
+    ['link', 'image', 'video'],
+    ['clean']
+];
+const EMPTY_VALUE = '';
+
+export function initRichTextArea(e) {
+    console.debug('\tRich Text Area');
+    hookupComponents(e, '.v-rich-text-area-container', VRichTextArea, null);
+}
+
+export class VRichTextArea extends dirtyableMixin(eventHandlerMixin(VBaseComponent)) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+
+        configureQuill();
+        registerBlots();
+
+        this.quillWrapper = element.querySelector('.v-rich-text-area');
+        this.quill = new Quill(this.quillWrapper, {
+            modules: {toolbar: toolbarOptions},
+            bounds: this.quillWrapper,
+            theme: 'snow',
+            placeholder: this.quillWrapper.dataset.placeholder
+        });
+        this.fixedUpContentElement = element.querySelector('.v-rich-text-area--fixed-up-content')
+        this.quillEditor = this.quillWrapper.querySelector('.ql-editor');
+
+        if (element.hasAttribute('disabled')) {
+            this.quill.enable(false);
+        }
+
+        hookupCustomToolbarButtons(this);
+
+        // Fix-ups:
+        this.updateFixedContentElement();
+        this.quill.on('text-change', () => this.updateFixedContentElement());
+
+        adjustEditorStyles(this);
+        this.originalValue = this.value();
+    }
+
+    prepareSubmit(params) {
+        params.push(['rich_text_payload', 'true']);
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.quillWrapper.dataset.name;
+    }
+
+    value() {
+        const document = this.fixedUpContentElement.innerHTML;
+
+        return this.quill.editor.isBlank() ? EMPTY_VALUE : document;
+    }
+
+    clear() {
+        if (this.value() !== EMPTY_VALUE) {
+            this.setValue(EMPTY_VALUE);
+        }
+    }
+
+    reset() {
+        this.setValue(this.originalValue);
+    }
+
+    setValue(value) {
+        this.quill.root.innerHTML = value;
+    }
+
+    isDirty() {
+        return this.dirtyable
+            && this.value().localeCompare(this.originalValue) !== 0;
+    }
+
+    updateFixedContentElement() {
+        const rawDocument = this.quill.root.innerHTML;
+
+        this.fixedUpContentElement.innerHTML = convertLists(rawDocument);
+    }
+}
+
+function adjustEditorStyles(richTextArea) {
+    // The editor element is not created until Quill has been initialized, so
+    // its styles must be adjusted dynamically post-construction.
+    const initialHeight = richTextArea.element.dataset.initialHeight;
+
+    richTextArea.quillEditor.style.height = initialHeight;
+    richTextArea.quillEditor.style.minHeight = initialHeight;
+}
+
+const blotRegistry = new WeakSet();
+
+function registerBlots() {
+    for (const blot of blots) {
+        if (blotRegistry.has(blot)) {
+            continue;
+        }
+
+        // Set required Blot attributes:
+        blot.blotName = blot.name;
+        blot.tagName = blot.tag;
+
+        Quill.register(blot);
+        blotRegistry.add(blot)
+    }
+}
+
+function hookupCustomToolbarButtons(vRichTextArea) {
+    for (const blotClass of blots) {
+        const {name, action} = blotClass;
+        const buttons = vRichTextArea.element.querySelectorAll(`.ql-${name}`);
+
+        for (const button of buttons) {
+            // Invoke the Blot's action when button is clicked:
+            button.addEventListener('click', (event) => {
+                action(vRichTextArea.quill, event);
+            });
+        }
+    }
+}
+
+function configureQuill() {
+    // Inform Quill that it should decorate text objects with inline styles
+    // instead of Quill CSS classes when modifying text:
+    const sizeAttributor = Quill.import('attributors/style/size');
+    sizeAttributor.whitelist = [
+        'xx-small',
+        'x-small',
+        'small',
+        'medium',
+        'large',
+        'x-large',
+        'xx-large',
+        false
+    ];
+
+    const styleAttributors = [
+        sizeAttributor,
+        Quill.import('attributors/style/align'),
+        Quill.import('attributors/style/direction'),
+    ];
+
+    for (const attributor of styleAttributors) {
+        Quill.register(attributor, true);
+    }
+}
+
+// Quill 1 is not capable of generating structurally-sound nested lists. Instead
+// of generated nested list elements, all list items are generated at the same
+// level. Indentation and list item numbers are handled by various `indent` CSS
+// classes and CSS counters. Eugh.
+// see https://github.com/quilljs/quill/issues/979
+
+// from https://github.com/quilljs/quill/issues/979#issuecomment-381151479.
+function convertLists(richtext) {
+    const tempEl = window.document.createElement('div');
+    tempEl.setAttribute('style', 'display: none;');
+    tempEl.innerHTML = richtext;
+
+    ['ul','ol'].forEach((type) => {
+        const startTag = `::start${type}::::/start${type}::`;
+        const endTag = `::end${type}::::/end${type}::`;
+
+        // Grab each list, and work on it in turn
+        Array.from(tempEl.querySelectorAll(type)).forEach((outerListEl) => {
+            const listChildren = Array.from(outerListEl.children).filter((el) => el.tagName === 'LI');
+
+            // Account for the fact that the first li might not be at level 0
+            const firstLi = listChildren[0];
+            firstLi.before(startTag.repeat(getListLevel(firstLi)));
+
+            // Now work through each li in this list
+            listChildren.forEach((listEl, index) => {
+                const currentLiLevel = getListLevel(listEl);
+                if (index < listChildren.length - 1) {
+                    const difference = getListLevel(listChildren[index + 1]) - currentLiLevel;
+
+                    // we only need to add tags if the level is changing
+                    if (difference > 0) {
+                        listChildren[index + 1].before(startTag.repeat(difference));
+                    } else if (difference < 0) {
+                        listEl.after(endTag.repeat(-difference));
+                    }
+                } else {
+                    listEl.after(endTag);
+                }
+            });
+            outerListEl.after(endTag);
+        });
+    });
+
+    //  Get the content in the element and replace the temporary tags with new ones
+    let newContent = tempEl.innerHTML;
+    newContent = newContent.replace(/::startul::::\/startul::/g, '<ul>');
+    newContent = newContent.replace(/::endul::::\/endul::/g, '</ul>');
+    newContent = newContent.replace(/::startol::::\/startol::/g, '<ol>');
+    newContent = newContent.replace(/::endol::::\/endol::/g, '</ol>');
+
+    tempEl.remove();
+    return newContent;
+}
+
+function getListLevel(el) {
+    const className = el.className || '0';
+    return +className.replace(/[^\d]/g, '');
+}

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

@@ -0,0 +1,23 @@
+// For more information on writing custom Blots:
+// https://github.com/quilljs/quill/issues/2371#issuecomment-454819412
+import Quill from 'quill';
+
+const Embed = Quill.import('blots/embed');
+
+export class HorizontalRuleBlot extends Embed {
+    static get name() {
+        return 'horizontal-rule';
+    }
+    
+    static get tag() {
+        return 'hr';
+    }
+
+    static action(quill, event) {
+        const range = quill.getSelection(true);
+
+        quill.insertText(range.index, '\n', Quill.sources.USER);
+        quill.insertEmbed(range.index + 1, HorizontalRuleBlot.name, true, Quill.sources.USER);
+        quill.setSelection(range.index + 2, Quill.sources.SILENT);
+    }
+};

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

@@ -0,0 +1,5 @@
+export default function getRoot(element) {
+  if (element.parentNode === null) return element;
+
+  return getRoot(element.parentNode);
+}

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

@@ -1,45 +1,56 @@
 import {MDCSelect} from '@material/select';
-import {VBaseComponent} 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;
-        }
-    }
-}
+import {VBaseComponent, hookupComponents} from './base-component';
+import {visibilityObserverMixin} from "./mixins/visibility-observer";
+import {dirtyableMixin} from './mixins/dirtyable';
 
+export function initSelects(e) {
+    console.debug('\tSelects');
+    hookupComponents(e, '.v-select', VSelect, MDCSelect);
+}
 
-export class VSelect extends eventHandlerMixin(VBaseComponent) {
+export class VSelect extends dirtyableMixin(visibilityObserverMixin(VBaseComponent)) {
     constructor(element, mdcComponent) {
-        super(element);
+        super(element, mdcComponent);
         this.select = element.querySelector('select');
-        this.mdcComponent = mdcComponent;
+        this.select.vComponent = this;
+        this.recalcWhenVisible(this);
+        this.originalValue = this.value();
     }
 
-    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()]);
+    }
+
+    name() {
+        return this.select.name;
+    }
+
+    value() {
+        return this.select.options.length === 0 || this.select.selectedIndex === -1 ? null : this.select.options[this.select.selectedIndex].value;
     }
 
-    validate() {
-        return true;
+    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);
+        }
     }
 
-    name(){
-            
+    reset() {
+        this.select.value = this.originalValue;
     }
 
-    value(){
+    setValue(value) {
+        this.select.value = value;
+    }
 
+    isDirty() {
+        return this.dirtyable && this.value() !== this.originalValue;
     }
-}
+}

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

@@ -0,0 +1,67 @@
+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';
+import {dirtyableMixin} from './mixins/dirtyable';
+
+export function initSliders(e) {
+    console.debug('\tSliders');
+    hookupComponents(e, '.v-slider', VSlider, MDCSlider);
+}
+
+export class VSlider extends dirtyableMixin(visibilityObserverMixin(
+    eventHandlerMixin(VBaseComponent))) {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        this.recalcWhenVisible(this);
+        this.originalValue = this.value();
+    }
+
+    prepareSubmit(params) {
+        params.push([this.name(), this.value()]);
+    }
+
+    name() {
+        return this.element.getAttribute('data-name');
+    }
+
+    value() {
+        return this.mdcComponent.value;
+    }
+
+    clear() {
+        this.setValue(0);
+    }
+
+    reset() {
+        this.setValue(this.originalValue);
+    }
+
+    setValue(value) {
+        this.mdcComponent.value = value;
+    }
+
+    isDirty() {
+        return this.dirtyable && this.value() !== this.originalValue;
+    }
+
+    initEventListener(eventName, eventHandler) {
+        if (eventName === 'change') {
+            eventName = 'MDCSlider:change';
+        }
+        super.initEventListener(eventName, eventHandler);
+    }
+
+
+    createEventHandler(actionsData, root) {
+        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, root).call();
+            }
+            this.lastEvent = event;
+        };
+    }
+}