voom-presenters 0.2.0 → 2.1.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

@@ -1,39 +1,14 @@
-import {VBaseComponent, hookupComponents} from './base-component';
-import {eventHandlerMixin} from "./mixins/event-handler";
+import {hookupComponents} from './base-component';
+import {VBaseToggle} from './base-toggle';
 import {MDCRadio} from "@material/radio";
 
-export function initRadios() {
-    console.log('\tRadios');
-    hookupComponents('.v-radio', VRadio, MDCRadio);
+export function initRadios(e) {
+    console.debug('\tRadios');
+    hookupComponents(e, '.v-radio', VRadio, MDCRadio);
 }
 
-export class VRadio extends eventHandlerMixin(VBaseComponent) {
+export class VRadio extends VBaseToggle {
     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

@@ -1,43 +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';
 
-var toolbarOptions = [
-    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-    ['blockquote', 'code-block'],
-
-    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+// 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' }],      // superscript/subscript
-    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
-    [{ 'direction': 'rtl' }],                         // text direction
-
-    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+    [{ 'script': 'sub'}, { 'script': 'super' }],
+    [{ 'direction': 'rtl' }],
     [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-
-    //[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
-    //[{ 'font': [] }],
-    [{ 'align': [] }],
-    ['link', 'image'],
-    ['clean']                                         // remove formatting button
+    [{ 'size': ['xx-small', false, 'large', 'x-large'] }],
+    ['link', 'image', 'video'],
+    ['clean']
 ];
+const EMPTY_VALUE = '';
 
-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;
+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,18 +1,20 @@
 import {MDCSelect} from '@material/select';
 import {VBaseComponent, hookupComponents} from './base-component';
-import {eventHandlerMixin} from './mixins/event-handler';
+import {visibilityObserverMixin} from "./mixins/visibility-observer";
+import {dirtyableMixin} from './mixins/dirtyable';
 
-export function initSelects() {
-    console.log('\tSelects');
-    hookupComponents('.v-select', VSelect, MDCSelect);
+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, mdcComponent);
         this.select = element.querySelector('select');
         this.select.vComponent = this;
+        this.recalcWhenVisible(this);
+        this.originalValue = this.value();
     }
 
     prepareSubmit(params) {
@@ -24,7 +26,7 @@ export class VSelect extends eventHandlerMixin(VBaseComponent) {
     }
 
     value() {
-        return this.select.options.length === 0 ? null : this.select.options[this.select.selectedIndex].value;
+        return this.select.options.length === 0 || this.select.selectedIndex === -1 ? null : this.select.options[this.select.selectedIndex].value;
     }
 
     clear() {
@@ -40,7 +42,15 @@ export class VSelect extends eventHandlerMixin(VBaseComponent) {
         }
     }
 
+    reset() {
+        this.select.value = this.originalValue;
+    }
+
     setValue(value) {
         this.select.value = value;
     }
-}
+
+    isDirty() {
+        return this.dirtyable && this.value() !== this.originalValue;
+    }
+}

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

@@ -1,41 +1,51 @@
 import {VBaseComponent, hookupComponents} from './base-component';
-import {eventHandlerMixin} from "./mixins/event-handler";
+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() {
-    console.log('\tSliders');
-    hookupComponents('.v-slider', VSlider, MDCSlider);
+export function initSliders(e) {
+    console.debug('\tSliders');
+    hookupComponents(e, '.v-slider', VSlider, MDCSlider);
 }
 
-export class VSlider extends visibilityObserverMixin(eventHandlerMixin(VBaseComponent)) {
+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')
+        return this.element.getAttribute('data-name');
     }
 
     value() {
-        return this.mdcComponent.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';
@@ -44,11 +54,12 @@ export class VSlider extends visibilityObserverMixin(eventHandlerMixin(VBaseComp
     }
 
 
-    createEventHandler(actionsData) {
-        return function (event) {
+    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).call();
+            if (!this.lastEvent ||
+                (event.timeStamp - this.lastEvent.timeStamp) > 10.0) {
+                new VEvents(actionsData, event, root).call();
             }
             this.lastEvent = event;
         };