Skip to content

Commit

Permalink
Accept absent model item in fx-container
Browse files Browse the repository at this point in the history
  • Loading branch information
@DrRataplan
DrRataplan committed Feb 19, 2025
1 parent 93b3d95 commit 4020ca5
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 139 deletions.
177 changes: 89 additions & 88 deletions src/ui/fx-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,47 +9,47 @@ import { ControlBinding } from '../binding/ControlBinding.js';
*
*/
export class FxContainer extends ForeElementMixin {
static get properties() {
return {
...super.properties,
/*
static get properties() {
return {
...super.properties,
/*
src: {
type: String,
},
*/
};
}
};
}

constructor() {
super();
this.attachShadow({ mode: 'open' });
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
super.connectedCallback();
connectedCallback() {
super.connectedCallback();

this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
const style = `
this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
const style = `
:host {
display: block;
}
`;

const html = `
const html = `
<slot></slot>
`;

this.shadowRoot.innerHTML = `
this.shadowRoot.innerHTML = `
<style>
${style}
</style>
${html}
`;
if (this.ref !== '') {
this.getOwnerForm().registerLazyElement(this);
}
if (this.ref !== '') {
this.getOwnerForm().registerLazyElement(this);
}

/*
/*
this.addEventListener('mousedown', e => {
if(e.target === this){
Expand All @@ -58,17 +58,17 @@ export class FxContainer extends ForeElementMixin {
}
} );
*/
}
}

/**
* (re)apply all state properties to this control.
*/
async refresh(force) {
if (!force && this.hasAttribute('refresh-on-view')) return;
// console.log('### FxContainer.refresh on : ', this);
/**
* (re)apply all state properties to this control.
*/
async refresh(force) {
if (!force && this.hasAttribute('refresh-on-view')) return;
// console.log('### FxContainer.refresh on : ', this);

// if loading from 'src' needs to be done do it now
/*
// if loading from 'src' needs to be done do it now
/*
if(this.src){
await Fore.loadForeFromSrc(this,this.src,'fx-group')
.then(foreElement =>{
Expand All @@ -77,79 +77,80 @@ export class FxContainer extends ForeElementMixin {
})
}
*/
if (this.isBound()) {
this.evalInContext();
this.modelItem = this.getModelItem();
/*
if (this.isBound()) {
this.evalInContext();
this.modelItem = this.getModelItem();
/*
if (this.modelItem && !this.modelItem.boundControls.includes(this)) {
this.modelItem.boundControls.push(this);
}
*/
DependencyTracker.getInstance().registerControl(
this.modelItem.path,
new ControlBinding(this),
);
*/
if (this.modelItem) {
DependencyTracker.getInstance().registerControl(
this.modelItem.path,
new ControlBinding(this),
);
}
this.handleModelItemProperties();
}

this.handleModelItemProperties();
// state change event do not fire during init phase (initial refresh)
// if (this._getForm().ready) {
// this.handleModelItemProperties();
// }
// Fore.refreshChildren(this, force);
}

// state change event do not fire during init phase (initial refresh)
// if (this._getForm().ready) {
// this.handleModelItemProperties();
// }
// Fore.refreshChildren(this, force);
}

/**
* relevance is processed for container controls only
*/
handleModelItemProperties() {
this.handleRelevant();
}

_getForm() {
return this.getModel().parentNode;
}

handleRelevant() {
// console.log('mip valid', this.modelItem.enabled);
if (!this.modelItem) {
// console.log('container is not relevant');
this.removeAttribute('relevant', '');
this.setAttribute('nonrelevant', '');
this.dispatchEvent(new CustomEvent('disabled', {}));
return;
/**
* relevance is processed for container controls only
*/
handleModelItemProperties() {
this.handleRelevant();
}

if (this.isEnabled() !== this.modelItem.enabled) {
if (this.modelItem.relevant) {
// this.style.display = 'block';
this.removeAttribute('nonrelevant', '');
this.setAttribute('relevant', '');
this.dispatchEvent(new CustomEvent('enabled', {}));
} else {
this.removeAttribute('relevant', '');
this.setAttribute('nonrelevant', '');
this.dispatchEvent(new CustomEvent('disabled', {}));
}
_getForm() {
return this.getModel().parentNode;
}
}

isReadonly() {
if (this.hasAttribute('readonly')) {
return true;
handleRelevant() {
// console.log('mip valid', this.modelItem.enabled);
if (!this.modelItem) {
// console.log('container is not relevant');
this.removeAttribute('relevant', '');
this.setAttribute('nonrelevant', '');
this.dispatchEvent(new CustomEvent('disabled', {}));
return;
}

if (this.isEnabled() !== this.modelItem.enabled) {
if (this.modelItem.relevant) {
// this.style.display = 'block';
this.removeAttribute('nonrelevant', '');
this.setAttribute('relevant', '');
this.dispatchEvent(new CustomEvent('enabled', {}));
} else {
this.removeAttribute('relevant', '');
this.setAttribute('nonrelevant', '');
this.dispatchEvent(new CustomEvent('disabled', {}));
}
}
}
return false;
}

isEnabled() {
if (this.style.display === 'none') {
return false;
isReadonly() {
if (this.hasAttribute('readonly')) {
return true;
}
return false;
}

isEnabled() {
if (this.style.display === 'none') {
return false;
}
return true;
}
return true;
}
}

if (!customElements.get('fx-container')) {
window.customElements.define('fx-container', FxContainer);
window.customElements.define('fx-container', FxContainer);
}
102 changes: 51 additions & 51 deletions src/ui/fx-group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ import { FxContainer } from './fx-container.js';
* @customElement
*/
class FxGroup extends FxContainer {
static get properties() {
return {
...super.properties,
collapse: {
type: Boolean,
reflect: true,
},
};
}
/*
static get properties() {
return {
...super.properties,
collapse: {
type: Boolean,
reflect: true,
},
};
}
/*
init(model){
super.init(model);
console.log(this, this.modelItem);
Expand All @@ -29,48 +29,48 @@ class FxGroup extends FxContainer {
}
*/

constructor() {
super();
this.collapse = false;
}
constructor() {
super();
this.collapse = false;
}

connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'group');
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'group');
}

render() {
return `
render() {
return `
<slot></slot>
`;
}
}

/**
* overwrites Abstract Control.
*
* Groups only reacts to 'relevant' property.
*/
handleModelItemProperties() {
this.handleRelevant();
}
/**
* overwrites Abstract Control.
*
* Groups only reacts to 'relevant' property.
*/
handleModelItemProperties() {
this.handleRelevant();
}

initializeChildren(node) {
const children = Array.from(node.children);
// console.log('_initializeChildren ', children);
initializeChildren(node) {
const children = Array.from(node.children);
// console.log('_initializeChildren ', children);

children.forEach(child => {
// console.log('child ', child);
children.forEach((child) => {
// console.log('child ', child);

if (Fore.isUiElement(child.nodeName)) {
child.init(this.model);
} else if (child.children.length !== 0) {
const grantChildren = Array.from(child.children);
grantChildren.forEach(grantChild => {
this.initializeChildren(grantChild);
if (Fore.isUiElement(child.nodeName)) {
child.init(this.model);
} else if (child.children.length !== 0) {
const grantChildren = Array.from(child.children);
grantChildren.forEach((grantChild) => {
this.initializeChildren(grantChild);
});
}
});
}
});
/*
/*
if(Fore.isUiElement(node.nodeName)){
const childElements = children.filter( action => Fore.isUiElement(action.nodeName));
console.log('children ', childElements);
Expand All @@ -86,16 +86,16 @@ class FxGroup extends FxContainer {
}
*/

console.groupEnd();
}
console.groupEnd();
}

async refresh(force) {
super.refresh(force);
// Make the maybe filtered refresh an unconditional forced refresh: This fx-group changes the
// context item
}
async refresh(force) {
super.refresh(force);
// Make the maybe filtered refresh an unconditional forced refresh: This fx-group changes the
// context item
}
}

if (!customElements.get('fx-group')) {
window.customElements.define('fx-group', FxGroup);
window.customElements.define('fx-group', FxGroup);
}

0 comments on commit 4020ca5

Please sign in to comment.