coprl 0.1.0 → 3.0.0.beta.1

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

@@ -0,0 +1,13 @@
+export let eventHandlerMixin = Base => class extends Base {
+    // idempotent event handling initialization
+    initEventListener(eventName, eventHandler, eventOptions) {
+        if (typeof this.element.eventsHandler === 'undefined') {
+            this.element.eventsHandler = {};
+        }
+        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/multi-select.js

@@ -0,0 +1,75 @@
+import {MDCNotchedOutline} from '@material/notched-outline';
+import {hookupComponentsManually} from './base-component';
+
+export function initMultiSelects(root) {
+  console.debug('\tMultiSelects');
+  hookupComponentsManually(root, '.v-multi-select-container', function(element) {
+    return new VMultiSelect(root, element);
+  });
+}
+
+export class VMultiSelect {
+
+  constructor(root, element) {
+    this.vComponent = root.vComponent;
+    this.element = element;
+    this.setEventListeners();
+    this.setLabelHandlers();
+  }
+
+  setEventListeners() {
+    this.element.addEventListener('click', createToggleHandler(this.element));
+    document.addEventListener('click', createCloseHandler(this.element));
+  }
+
+  setLabelHandlers() {
+    createValueDescriptionHandler(this.element);
+    setCurrentValueDescription(this.element);
+    setLabelNotch(this.element);
+  }
+}
+
+function createToggleHandler(component) {
+  return function (event) {
+    if (!event.target.classList.contains('v-multi-select--option')) {
+      component.querySelector('.v-multi-select--options-list').classList.toggle('v-hidden');
+      component.classList.toggle('mdc-select--focused');
+    }
+  }
+}
+
+function createCloseHandler(component) {
+  return function (event) {
+    if (!event.target.className.match(/[\w-]*v-multi-select[\w-]*/g)) {
+      component.querySelector('.v-multi-select--options-list').classList.add('v-hidden');
+      component.classList.remove('mdc-select--focused');
+    }
+  }
+}
+
+function createValueDescriptionHandler(component) {
+  const listElements = component.querySelectorAll('.v-multi-select--option');
+  for (let element of listElements) {
+    element.addEventListener('change', function(e){
+      setCurrentValueDescription(component);
+    })
+  }
+}
+
+function setCurrentValueDescription(component) {
+  const selectedElements = Array.from(component.querySelectorAll('.v-multi-select--option')).filter((e) => e.checked );
+  let msg = selectedElements.length + ' selected';
+  if (selectedElements.length === 1 && selectedElements[0].labels.length === 1) {
+    msg = selectedElements[0].labels[0].innerText;
+  }
+  component.querySelector('.v-multi-select--current-values').innerText = msg;
+}
+
+function setLabelNotch(component) {
+  const labelWidth = component.querySelector('.mdc-floating-label').offsetWidth * .75;
+  const notchedOutline = new MDCNotchedOutline(component.querySelector('.mdc-notched-outline'));
+  notchedOutline.notch(labelWidth);
+}
+
+
+

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

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