@schukai/monster
Version:
Monster is a simple library for creating fast, robust and lightweight websites.
423 lines (370 loc) • 10.9 kB
JavaScript
/**
* Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
* Node module: @schukai/monster
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
*
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH.
*
* SPDX-License-Identifier: AGPL-3.0
*/
import { instanceSymbol } from "../../constants.mjs";
import { Pathfinder } from "../../data/pathfinder.mjs";
import {
assembleMethodSymbol,
CustomElement,
attributeObserverSymbol,
registerCustomElement,
} from "../../dom/customelement.mjs";
import {
findElementWithSelectorUpwards,
getDocument,
getWindow,
} from "../../dom/util.mjs";
import { isString } from "../../types/is.mjs";
import { Observer } from "../../types/observer.mjs";
import {
ATTRIBUTE_DATASOURCE_SELECTOR,
ATTRIBUTE_DATATABLE_INDEX,
} from "./constants.mjs";
import { Datasource } from "./datasource.mjs";
import { DatasetStyleSheet } from "./stylesheet/dataset.mjs";
import {
handleDataSourceChanges,
datasourceLinkedElementSymbol,
} from "./util.mjs";
import { FormStyleSheet } from "../stylesheet/form.mjs";
import { addErrorAttribute } from "../../dom/error.mjs";
export { DataSet };
/**
* A data set component
*
* @fragments /fragments/components/datatable/dataset
*
* @example /examples/components/datatable/dataset-dom Dom dataset
* @example /examples/components/datatable/dataset-rest Rest dataset
*
* @issue https://localhost.alvine.dev:8440/development/issues/closed/272.html
*
* @copyright schukai GmbH
* @summary A dataset component that can be used to show the data of a data source
*/
class DataSet extends CustomElement {
/**
* This method is called by the `instanceof` operator.
* @return {symbol}
*/
static get [instanceSymbol]() {
return Symbol.for(
"@schukai/monster/components/datatable/dataset@@instance",
);
}
/**
* This method determines which attributes are to be monitored by `attributeChangedCallback()`.
*
* @return {string[]}
* @since 1.15.0
*/
static get observedAttributes() {
const attributes = super.observedAttributes;
attributes.push(ATTRIBUTE_DATATABLE_INDEX);
attributes.push("data-monster-option-mapping-index");
return attributes;
}
/**
* To set the options via the HTML tag, the attribute `data-monster-options` must be used.
* @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
*
* The individual configuration values can be found in the table.
*
* @property {Object} templates Template definitions
* @property {string} templates.main Main template
* @property {object} datasource The datasource
* @property {string} datasource.selector The selector of the datasource
* @property {object} mapping The mapping
* @property {string} mapping.data The data
* @property {number} mapping.index The index
* @property {object} features The features
* @property {boolean} features.refreshOnMutation Refresh on mutation
* @property {object} refreshOnMutation The refresh on mutation
* @property {string} refreshOnMutation.selector The selector
*/
get defaults() {
const obj = Object.assign({}, super.defaults, {
templates: {
main: getTemplate(),
},
datasource: {
selector: null,
},
mapping: {
data: "dataset",
index: 0,
},
features: {
/**
* @since 3.70.0
* @type {boolean}
*/
refreshOnMutation: true,
},
/**
* @since 3.70.0
* @type {boolean}
*/
refreshOnMutation: {
selector:
"input, select, textarea, monster-select, monster-toggle-switch",
},
data: {},
});
updateOptionsFromArguments.call(this, obj);
return obj;
}
/**
*
* @return {string}
*/
static getTag() {
return "monster-dataset";
}
/**
* This method is called when the component is created.
* @since 3.70.0
* @return {Promise}
*/
refresh() {
// makes sure that handleDataSourceChanges is called
return new Promise((resolve) => {
this.setOption("data", {});
queueMicrotask(() => {
handleDataSourceChanges.call(this);
resolve();
});
});
}
/**
*
* @return {Promise<unknown>}
*/
write() {
return new Promise((resolve, reject) => {
if (!this[datasourceLinkedElementSymbol]) {
reject(new Error("No datasource"));
return;
}
const internalUpdateCloneData = this.getInternalUpdateCloneData();
if (!internalUpdateCloneData) {
reject(new Error("No update data"));
return;
}
const internalData = internalUpdateCloneData?.["data"];
if (
internalData === undefined ||
internalData === null ||
internalData === ""
) {
reject(new Error("No data"));
return;
}
queueMicrotask(() => {
const path = this.getOption("mapping.data");
const index = this.getOption("mapping.index");
let pathWithIndex;
if (isString(path) && path !== "") {
pathWithIndex = path + "." + index;
} else {
pathWithIndex = String(index);
}
const data = this[datasourceLinkedElementSymbol]?.data;
if (!data) {
reject(new Error("No data"));
return;
}
const unref = JSON.stringify(data);
const ref = JSON.parse(unref);
new Pathfinder(ref).setVia(pathWithIndex, internalData);
this[datasourceLinkedElementSymbol].data = ref;
resolve();
});
});
}
/**
* This method is responsible for assembling the component.
*
* It calls the parent's assemble method first, then initializes control references and event handlers.
* If the `datasource.selector` option is provided and is a string, it searches for the corresponding
* element in the DOM using that selector.
*
* If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
*
* If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
* attaches an observer to the datasource's changes.
*
* The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
* Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
* method in the component's context.
*/
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
setTimeout(() => {
if (!this[datasourceLinkedElementSymbol]) {
const selector = this.getOption("datasource.selector");
if (isString(selector)) {
const element = findElementWithSelectorUpwards(this, selector);
if (element === null) {
addErrorAttribute(
this,
"the selector must match exactly one element",
);
return;
}
if (!(element instanceof Datasource)) {
addErrorAttribute(this, "the element must be a datasource");
return;
}
this[datasourceLinkedElementSymbol] = element;
element.datasource.attachObserver(
new Observer(handleDataSourceChanges.bind(this)),
);
handleDataSourceChanges.call(this);
} else {
addErrorAttribute(
this,
"the datasource selector is missing or invalid",
);
return;
}
}
if (
this.getOption("features.refreshOnMutation") &&
this.getOption("refreshOnMutation.selector")
) {
initMutationObserver.call(this);
}
initEventHandler.call(this);
}, 10);
}
/**
* @return [CSSStyleSheet]
*/
static getCSSStyleSheet() {
return [FormStyleSheet, DatasetStyleSheet];
}
}
/**
* @private
*/
function initEventHandler() {
this[attributeObserverSymbol][ATTRIBUTE_DATATABLE_INDEX] = () => {
// @deprecated use data-monster-option-mapping-index
const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
if (index) {
this.setOption("mapping.index", parseInt(index, 10));
handleDataSourceChanges.call(this);
}
};
this[attributeObserverSymbol]["data-monster-option-mapping-index"] = () => {
const index = this.getAttribute("data-monster-option-mapping-index");
if (index !== null && index !== undefined && index !== "") {
this.setOption("mapping.index", parseInt(index, 10));
handleDataSourceChanges.call(this);
}
};
if (this[datasourceLinkedElementSymbol] instanceof Datasource) {
this[datasourceLinkedElementSymbol]?.datasource?.attachObserver(
new Observer(() => {
let index = 0;
if (
typeof this[datasourceLinkedElementSymbol]?.currentPage === "function"
) {
const page = this[datasourceLinkedElementSymbol].currentPage();
if (page !== null && page !== undefined && page !== "") {
index = parseInt(page, 10) - 1;
}
}
this.setOption("mapping.index", index);
handleDataSourceChanges.call(this);
}),
);
this[datasourceLinkedElementSymbol]?.attachObserver(
new Observer(() => {
let index = 0;
if (
typeof this[datasourceLinkedElementSymbol]?.currentPage === "function"
) {
const page = this[datasourceLinkedElementSymbol].currentPage();
if (page !== null && page !== undefined && page !== "") {
index = parseInt(page, 10) - 1;
}
}
this.setOption("mapping.index", index);
handleDataSourceChanges.call(this);
}),
);
handleDataSourceChanges.call(this);
}
}
/**
*
* @param {Object} options
*/
function updateOptionsFromArguments(options) {
const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX); // @deprecated use data-monster-option-mapping-index
if (index !== null && index !== undefined) {
options.mapping.index = parseInt(index, 10);
}
const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
if (selector) {
options.datasource.selector = selector;
}
}
/**
* @private
*/
function initMutationObserver() {
const config = { attributes: false, childList: true, subtree: true };
const callback = (mutationList, observer) => {
if (mutationList.length === 0) {
return;
}
let doneFlag = false;
for (const mutation of mutationList) {
if (mutation.type === "childList") {
for (const node of mutation.addedNodes) {
if (
node instanceof HTMLElement &&
node.matches(this.getOption("refreshOnMutation.selector"))
) {
doneFlag = true;
break;
}
}
if (doneFlag) {
break;
}
}
}
if (doneFlag) {
this.refresh();
}
};
const observer = new MutationObserver(callback);
observer.observe(this, config);
}
/**
* @private
* @return {string}
*/
function getTemplate() {
// language=HTML
return `
<div data-monster-role="control" part="control">
<slot></slot>
</div>
`;
}
registerCustomElement(DataSet);