Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

POC - Adding subscription controllers #1901

Closed
wants to merge 4 commits into from
Closed

POC - Adding subscription controllers #1901

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
365512e
Add subscription controllers and hookup to the selection components
svanherk Nov 29, 2021
2307580
Divide the event and for property subscribers into separate controllers
svanherk Nov 30, 2021
015aec7
Add form and validation POC
svanherk Dec 1, 2021
367dda8
Add fix and error control (to be tested)
svanherk Dec 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 20 additions & 24 deletions components/form/form-element-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { isCustomFormElement } from './form-helper.js';
import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
import { ProviderController } from '../../helpers/subscriptionControllers.js';

export class FormElementValidityState {

Expand Down Expand Up @@ -111,10 +112,8 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(

constructor() {
super();
this._validationCustomConnected = this._validationCustomConnected.bind(this);
this._onFormElementErrorsChange = this._onFormElementErrorsChange.bind(this);

this._validationCustoms = new Set();
this._validity = new FormElementValidityState({});
/** @ignore */
this.forceInvalid = false;
Expand All @@ -130,7 +129,10 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
this.childErrors = new Map();
this._errors = [];

this.shadowRoot.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
this._validationCustomsController = new ProviderController(this, {},
{ eventName: 'd2l-validation-custom-connected' }
);

this.shadowRoot.addEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
}

Expand All @@ -153,6 +155,16 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
return this._validity;
}

connectedCallback() {
super.connectedCallback();
this._validationCustomsController.hostConnected();
}

disconnectedCallback() {
super.disconnectedCallback();
this._validationCustomsController.hostDisconnected();
}

updated(changedProperties) {
if (changedProperties.has('_errors') || changedProperties.has('childErrors')) {
let errors = this._errors;
Expand All @@ -173,11 +185,15 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
}
}

getController() {
return this._validationCustomsController;
}

async requestValidate(showNewErrors = true) {
if (this.noValidate) {
return [];
}
const customs = [...this._validationCustoms].filter(custom => custom.forElement === this || !isCustomFormElement(custom.forElement));
const customs = Array.from(this._validationCustomsController.subscribers.values()).filter(custom => custom.forElement === this || !isCustomFormElement(custom.forElement));
const results = await Promise.all(customs.map(custom => custom.validate()));
const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);
if (!this.validity.valid) {
Expand Down Expand Up @@ -208,14 +224,6 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
return this._errors;
}

validationCustomConnected(custom) {
this._validationCustoms.add(custom);
}

validationCustomDisconnected(custom) {
this._validationCustoms.delete(custom);
}

_onFormElementErrorsChange(e) {
e.stopPropagation();
const errors = e.detail.errors;
Expand All @@ -230,16 +238,4 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
}
}

_validationCustomConnected(e) {
e.stopPropagation();
const custom = e.composedPath()[0];
this.validationCustomConnected(custom);

const onDisconnect = () => {
custom.removeEventListener('d2l-validation-custom-disconnected', onDisconnect);
this.validationCustomDisconnected(custom);
};
custom.addEventListener('d2l-validation-custom-disconnected', onDisconnect);
}

};
27 changes: 12 additions & 15 deletions components/form/form-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { getComposedActiveElement } from '../../helpers/focus.js';
import { getUniqueId } from '../../helpers/uniqueId.js';
import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
import { localizeFormElement } from './form-element-localize-helper.js';
import { ProviderController } from '../../helpers/subscriptionControllers.js';

export const FormMixin = superclass => class extends LocalizeCoreElement(superclass) {

Expand All @@ -27,21 +28,25 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl

this.trackChanges = false;
this._tooltips = new Map();
this._validationCustoms = new Set();
this._errors = new Map();

this._validationCustomsController = new ProviderController(this, {},
{ eventName: 'd2l-validation-custom-connected' }
);

this.addEventListener('d2l-form-errors-change', this._onErrorsChange);
this.addEventListener('d2l-form-element-errors-change', this._onErrorsChange);
this.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
}

connectedCallback() {
super.connectedCallback();
this._validationCustomsController.hostConnected();
window.addEventListener('beforeunload', this._onUnload);
}

disconnectedCallback() {
super.disconnectedCallback();
this._validationCustomsController.hostDisconnected();
window.removeEventListener('beforeunload', this._onUnload);
}

Expand All @@ -52,6 +57,10 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
this.addEventListener('focusout', this._onFormElementChange);
}

getController() {
return this._validationCustomsController;
}

// eslint-disable-next-line no-unused-vars
async requestSubmit(submitter) {
throw new Error('FormMixin.requestSubmit must be overridden');
Expand Down Expand Up @@ -154,7 +163,7 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
if (isCustomFormElement(ele)) {
return ele.validate(showNewErrors);
} else if (isNativeFormElement(ele)) {
const customs = [...this._validationCustoms].filter(custom => custom.forElement === ele);
const customs = Array.from(this._validationCustomsController.subscribers.values()).filter(custom => custom.forElement === ele);
const results = await Promise.all(customs.map(custom => custom.validate()));
const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);
if (!ele.checkValidity()) {
Expand All @@ -171,16 +180,4 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
return [];
}

_validationCustomConnected(e) {
e.stopPropagation();
const custom = e.composedPath()[0];
this._validationCustoms.add(custom);

const onDisconnect = () => {
custom.removeEventListener('d2l-validation-custom-disconnected', onDisconnect);
this._validationCustoms.delete(custom);
};
custom.addEventListener('d2l-validation-custom-disconnected', onDisconnect);
}

};
4 changes: 2 additions & 2 deletions components/list/list-item-checkbox-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,13 +181,13 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
if (this._selectionProvider === nestedList) return;

if (this._selectionProvider && this._selectionProvider !== nestedList) {
this._selectionProvider.unsubscribeObserver(this);
this._selectionProvider.getController('observer').unsubscribe(this);
this._selectionProvider = null;
}

if (nestedList) {
this._selectionProvider = nestedList;
this._selectionProvider.subscribeObserver(this);
this._selectionProvider.getController('observer').subscribe(this);
}
}

Expand Down
28 changes: 11 additions & 17 deletions components/selection/selection-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import '../inputs/input-checkbox.js';
import { css, html, LitElement } from 'lit-element/lit-element.js';
import { classMap } from 'lit-html/directives/class-map.js';
import { EventSubscriberController } from '../../helpers/subscriptionControllers.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { LabelledMixin } from '../../mixins/labelled-mixin.js';
import { radioStyles } from '../inputs/input-radio-styles.js';
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

const keyCodes = {
SPACE: 32
};
Expand Down Expand Up @@ -40,8 +40,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
* @type {string}
*/
key: { type: String },
_indeterminate: { type: Boolean },
_provider: { type: Object }
_indeterminate: { type: Boolean }
};
}

Expand All @@ -61,26 +60,21 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
super();
this.selected = false;
this._indeterminate = false;

this._subscriberController = new EventSubscriberController(this,
{ onSubscribe: () => { this.requestUpdate(); } },
{ eventName: 'd2l-selection-input-subscribe', controllerId: 'input' }
);
}

connectedCallback() {
super.connectedCallback();
// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
requestAnimationFrame(() => {
const evt = new CustomEvent('d2l-selection-input-subscribe', {
bubbles: true,
composed: true,
detail: {}
});
this.dispatchEvent(evt);
this._provider = evt.detail.provider;
});
this._subscriberController.hostConnected();
}

disconnectedCallback() {
super.disconnectedCallback();
if (!this._provider) return;
this._provider.unsubscribeSelectable(this);
this._subscriberController.hostDisconnected();
}

firstUpdated(changedProperties) {
Expand All @@ -89,8 +83,8 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
}

render() {
if (!this._provider) return;
if (this._provider.selectionSingle) {
if (!this._subscriberController.provider) return;
if (this._subscriberController.provider.selectionSingle) {
const radioClasses = {
'd2l-input-radio': true,
'd2l-selection-input-radio': true,
Expand Down
Loading