mirror of https://github.com/artf/grapesjs.git
mohamed yahia
1 year ago
committed by
GitHub
GitHub
17 changed files with 1131 additions and 771 deletions
@ -0,0 +1,66 @@ |
|||
import { ObjectAny } from '../../common'; |
|||
import EditorModel from '../../editor/model/Editor'; |
|||
import Component from './Component'; |
|||
import { DynamicValueWatcher } from './DynamicValueWatcher'; |
|||
|
|||
export class ComponentDynamicValueWatcher { |
|||
private propertyWatcher: DynamicValueWatcher; |
|||
private attributeWatcher: DynamicValueWatcher; |
|||
|
|||
constructor( |
|||
private component: Component, |
|||
em: EditorModel, |
|||
) { |
|||
this.propertyWatcher = new DynamicValueWatcher(this.createPropertyUpdater(), em); |
|||
this.attributeWatcher = new DynamicValueWatcher(this.createAttributeUpdater(), em); |
|||
} |
|||
|
|||
private createPropertyUpdater() { |
|||
return (key: string, value: any) => { |
|||
this.component.set(key, value, { fromDataSource: true, avoidStore: true }); |
|||
}; |
|||
} |
|||
|
|||
private createAttributeUpdater() { |
|||
return (key: string, value: any) => { |
|||
this.component.addAttributes({ [key]: value }, { fromDataSource: true, avoidStore: true }); |
|||
}; |
|||
} |
|||
|
|||
addProps(props: ObjectAny) { |
|||
this.propertyWatcher.addDynamicValues(props); |
|||
} |
|||
|
|||
addAttributes(attributes: ObjectAny) { |
|||
this.attributeWatcher.addDynamicValues(attributes); |
|||
} |
|||
|
|||
setAttributes(attributes: ObjectAny) { |
|||
this.attributeWatcher.setDynamicValues(attributes); |
|||
} |
|||
|
|||
removeAttributes(attributes: string[]) { |
|||
this.attributeWatcher.removeListeners(attributes); |
|||
} |
|||
|
|||
getDynamicPropsDefs() { |
|||
return this.propertyWatcher.getAllSerializableValues(); |
|||
} |
|||
|
|||
getDynamicAttributesDefs() { |
|||
return this.attributeWatcher.getAllSerializableValues(); |
|||
} |
|||
|
|||
getAttributesDefsOrValues(attributes: ObjectAny) { |
|||
return this.attributeWatcher.getSerializableValues(attributes); |
|||
} |
|||
|
|||
getPropsDefsOrValues(props: ObjectAny) { |
|||
return this.propertyWatcher.getSerializableValues(props); |
|||
} |
|||
|
|||
destroy() { |
|||
this.propertyWatcher.removeListeners(); |
|||
this.attributeWatcher.removeListeners(); |
|||
} |
|||
} |
|||
@ -0,0 +1,117 @@ |
|||
import { ObjectAny } from '../../common'; |
|||
import DynamicVariableListenerManager from '../../data_sources/model/DataVariableListenerManager'; |
|||
import { evaluateDynamicValueDefinition, isDynamicValueDefinition } from '../../data_sources/model/utils'; |
|||
import { DynamicValue } from '../../data_sources/types'; |
|||
import EditorModel from '../../editor/model/Editor'; |
|||
|
|||
export class DynamicValueWatcher { |
|||
dynamicVariableListeners: { [key: string]: DynamicVariableListenerManager } = {}; |
|||
constructor( |
|||
private updateFn: (key: string, value: any) => void, |
|||
private em: EditorModel, |
|||
) {} |
|||
|
|||
static getStaticValues(values: ObjectAny | undefined, em: EditorModel): ObjectAny { |
|||
if (!values) return {}; |
|||
const evaluatedValues: ObjectAny = { ...values }; |
|||
const propsKeys = Object.keys(values); |
|||
|
|||
for (const key of propsKeys) { |
|||
const valueDefinition = values[key]; |
|||
if (!isDynamicValueDefinition(valueDefinition)) continue; |
|||
|
|||
const { value } = evaluateDynamicValueDefinition(valueDefinition, em); |
|||
evaluatedValues[key] = value; |
|||
} |
|||
|
|||
return evaluatedValues; |
|||
} |
|||
|
|||
static areStaticValues(values: ObjectAny | undefined) { |
|||
if (!values) return true; |
|||
return Object.keys(values).every((key) => { |
|||
return !isDynamicValueDefinition(values[key]); |
|||
}); |
|||
} |
|||
|
|||
setDynamicValues(values: ObjectAny | undefined) { |
|||
this.removeListeners(); |
|||
return this.addDynamicValues(values); |
|||
} |
|||
|
|||
addDynamicValues(values: ObjectAny | undefined) { |
|||
if (!values) return {}; |
|||
this.removeListeners(Object.keys(values)); |
|||
const dynamicProps = this.getDynamicValues(values); |
|||
const propsKeys = Object.keys(dynamicProps); |
|||
for (let index = 0; index < propsKeys.length; index++) { |
|||
const key = propsKeys[index]; |
|||
this.dynamicVariableListeners[key] = new DynamicVariableListenerManager({ |
|||
em: this.em, |
|||
dataVariable: dynamicProps[key], |
|||
updateValueFromDataVariable: (value: any) => { |
|||
this.updateFn.bind(this)(key, value); |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
return dynamicProps; |
|||
} |
|||
|
|||
private getDynamicValues(values: ObjectAny) { |
|||
const dynamicValues: { |
|||
[key: string]: DynamicValue; |
|||
} = {}; |
|||
const propsKeys = Object.keys(values); |
|||
for (let index = 0; index < propsKeys.length; index++) { |
|||
const key = propsKeys[index]; |
|||
if (!isDynamicValueDefinition(values[key])) { |
|||
continue; |
|||
} |
|||
const { variable } = evaluateDynamicValueDefinition(values[key], this.em); |
|||
dynamicValues[key] = variable; |
|||
} |
|||
|
|||
return dynamicValues; |
|||
} |
|||
|
|||
/** |
|||
* removes listeners to stop watching for changes, |
|||
* if keys argument is omitted, remove all listeners |
|||
* @argument keys |
|||
*/ |
|||
removeListeners(keys?: string[]) { |
|||
const propsKeys = keys ? keys : Object.keys(this.dynamicVariableListeners); |
|||
propsKeys.forEach((key) => { |
|||
if (this.dynamicVariableListeners[key]) { |
|||
this.dynamicVariableListeners[key].destroy(); |
|||
delete this.dynamicVariableListeners[key]; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
getSerializableValues(values: ObjectAny | undefined) { |
|||
if (!values) return {}; |
|||
const serializableValues = { ...values }; |
|||
const propsKeys = Object.keys(serializableValues); |
|||
for (let index = 0; index < propsKeys.length; index++) { |
|||
const key = propsKeys[index]; |
|||
if (this.dynamicVariableListeners[key]) { |
|||
serializableValues[key] = this.dynamicVariableListeners[key].dynamicVariable.toJSON(); |
|||
} |
|||
} |
|||
|
|||
return serializableValues; |
|||
} |
|||
|
|||
getAllSerializableValues() { |
|||
const serializableValues: ObjectAny = {}; |
|||
const propsKeys = Object.keys(this.dynamicVariableListeners); |
|||
for (let index = 0; index < propsKeys.length; index++) { |
|||
const key = propsKeys[index]; |
|||
serializableValues[key] = this.dynamicVariableListeners[key].dynamicVariable.toJSON(); |
|||
} |
|||
|
|||
return serializableValues; |
|||
} |
|||
} |
|||
@ -0,0 +1,259 @@ |
|||
import Editor from '../../../../src/editor/model/Editor'; |
|||
import DataSourceManager from '../../../../src/data_sources'; |
|||
import ComponentWrapper from '../../../../src/dom_components/model/ComponentWrapper'; |
|||
import { DataVariableType } from '../../../../src/data_sources/model/DataVariable'; |
|||
import { setupTestEditor } from '../../../common'; |
|||
import { Component } from '../../../../src'; |
|||
|
|||
const staticAttributeValue = 'some tiltle'; |
|||
describe('Dynamic Attributes', () => { |
|||
let em: Editor; |
|||
let dsm: DataSourceManager; |
|||
let cmpRoot: ComponentWrapper; |
|||
const staticAttributes = { |
|||
staticAttribute: staticAttributeValue, |
|||
}; |
|||
|
|||
beforeEach(() => { |
|||
({ em, dsm, cmpRoot } = setupTestEditor()); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
em.destroy(); |
|||
}); |
|||
|
|||
test('static and dynamic attributes', () => { |
|||
const inputDataSource = { |
|||
id: 'ds_id', |
|||
records: [{ id: 'id1', value: 'test-value' }], |
|||
}; |
|||
dsm.add(inputDataSource); |
|||
|
|||
const attributes = { |
|||
...staticAttributes, |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id1.value', |
|||
}, |
|||
}; |
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'input', |
|||
attributes, |
|||
})[0]; |
|||
|
|||
testAttribute(cmp, 'dynamicAttribute', 'test-value'); |
|||
testStaticAttributes(cmp); |
|||
}); |
|||
|
|||
test('dynamic attributes should listen to change', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [{ id: 'id1', value: 'test-value' }], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const attributes = { |
|||
...staticAttributes, |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id1.value', |
|||
}, |
|||
}; |
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'input', |
|||
attributes, |
|||
})[0]; |
|||
|
|||
testAttribute(cmp, 'dynamicAttribute', 'test-value'); |
|||
testStaticAttributes(cmp); |
|||
|
|||
changeDataSourceValue(dsm, 'id1'); |
|||
testAttribute(cmp, 'dynamicAttribute', 'changed-value'); |
|||
}); |
|||
|
|||
test('(Component.setAttributes) dynamic attributes should listen to the latest dynamic value', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [ |
|||
{ id: 'id1', value: 'test-value' }, |
|||
{ id: 'id2', value: 'second-test-value' }, |
|||
], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const attributes = { |
|||
...staticAttributes, |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id1.value', |
|||
}, |
|||
}; |
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'input', |
|||
attributes, |
|||
})[0]; |
|||
|
|||
cmp.setAttributes({ dynamicAttribute: 'some-static-value' }); |
|||
testAttribute(cmp, 'dynamicAttribute', 'some-static-value'); |
|||
|
|||
cmp.setAttributes({ |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id2.value', |
|||
}, |
|||
}); |
|||
changeDataSourceValue(dsm, 'id1'); |
|||
testAttribute(cmp, 'dynamicAttribute', 'second-test-value'); |
|||
|
|||
changeDataSourceValue(dsm, 'id2'); |
|||
testAttribute(cmp, 'dynamicAttribute', 'changed-value'); |
|||
}); |
|||
|
|||
test('(Component.addAttributes) dynamic attributes should listen to the latest dynamic value', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [ |
|||
{ id: 'id1', value: 'test-value' }, |
|||
{ id: 'id2', value: 'second-test-value' }, |
|||
], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const attributes = { |
|||
...staticAttributes, |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id1.value', |
|||
}, |
|||
}; |
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'input', |
|||
attributes, |
|||
})[0]; |
|||
|
|||
cmp.addAttributes({ dynamicAttribute: 'some-static-value' }); |
|||
testAttribute(cmp, 'dynamicAttribute', 'some-static-value'); |
|||
|
|||
cmp.addAttributes({ |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id2.value', |
|||
}, |
|||
}); |
|||
changeDataSourceValue(dsm, 'id1'); |
|||
testAttribute(cmp, 'dynamicAttribute', 'second-test-value'); |
|||
|
|||
changeDataSourceValue(dsm, 'id2'); |
|||
testAttribute(cmp, 'dynamicAttribute', 'changed-value'); |
|||
}); |
|||
|
|||
test('dynamic attributes should stop listening to change if the value changed to static', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [{ id: 'id1', value: 'test-value' }], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const attributes = { |
|||
...staticAttributes, |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id1.value', |
|||
}, |
|||
}; |
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'input', |
|||
attributes, |
|||
})[0]; |
|||
|
|||
testAttribute(cmp, 'dynamicAttribute', 'test-value'); |
|||
testStaticAttributes(cmp); |
|||
|
|||
cmp.setAttributes({ |
|||
dynamicAttribute: 'static-value', |
|||
}); |
|||
changeDataSourceValue(dsm, 'id1'); |
|||
testAttribute(cmp, 'dynamicAttribute', 'static-value'); |
|||
}); |
|||
|
|||
test('dynamic attributes should start listening to change if the value changed to dynamic value', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [{ id: 'id1', value: 'test-value' }], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const attributes = { |
|||
...staticAttributes, |
|||
dynamicAttribute: 'static-value', |
|||
}; |
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'input', |
|||
attributes, |
|||
})[0]; |
|||
|
|||
cmp.setAttributes({ |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id1.value', |
|||
}, |
|||
}); |
|||
testAttribute(cmp, 'dynamicAttribute', 'test-value'); |
|||
changeDataSourceValue(dsm, 'id1'); |
|||
testAttribute(cmp, 'dynamicAttribute', 'changed-value'); |
|||
}); |
|||
|
|||
test('dynamic attributes should stop listening to change if the attribute was removed', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [{ id: 'id1', value: 'test-value' }], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const attributes = { |
|||
...staticAttributes, |
|||
dynamicAttribute: { |
|||
type: DataVariableType, |
|||
defaultValue: 'default', |
|||
path: 'ds_id.id1.value', |
|||
}, |
|||
}; |
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'input', |
|||
attributes, |
|||
})[0]; |
|||
|
|||
testAttribute(cmp, 'dynamicAttribute', 'test-value'); |
|||
testStaticAttributes(cmp); |
|||
|
|||
cmp.removeAttributes('dynamicAttribute'); |
|||
changeDataSourceValue(dsm, 'id1'); |
|||
expect(cmp?.getAttributes()['dynamicAttribute']).toBe(undefined); |
|||
const input = cmp.getEl(); |
|||
expect(input?.getAttribute('dynamicAttribute')).toBe(null); |
|||
}); |
|||
}); |
|||
|
|||
function changeDataSourceValue(dsm: DataSourceManager, id: string) { |
|||
dsm.get('ds_id').getRecord(id)?.set('value', 'intermediate-value1'); |
|||
dsm.get('ds_id').getRecord(id)?.set('value', 'intermediate-value2'); |
|||
dsm.get('ds_id').getRecord(id)?.set('value', 'changed-value'); |
|||
} |
|||
|
|||
function testStaticAttributes(cmp: Component) { |
|||
testAttribute(cmp, 'staticAttribute', staticAttributeValue); |
|||
} |
|||
|
|||
function testAttribute(cmp: Component, attribute: string, value: string) { |
|||
expect(cmp?.getAttributes()[attribute]).toBe(value); |
|||
const input = cmp.getEl(); |
|||
expect(input?.getAttribute(attribute)).toBe(value); |
|||
} |
|||
@ -0,0 +1,147 @@ |
|||
import Editor from '../../../../src/editor/model/Editor'; |
|||
import DataSourceManager from '../../../../src/data_sources'; |
|||
import ComponentWrapper from '../../../../src/dom_components/model/ComponentWrapper'; |
|||
import { DataVariableType } from '../../../../src/data_sources/model/DataVariable'; |
|||
import { setupTestEditor } from '../../../common'; |
|||
|
|||
describe('Component Dynamic Properties', () => { |
|||
let em: Editor; |
|||
let dsm: DataSourceManager; |
|||
let cmpRoot: ComponentWrapper; |
|||
|
|||
beforeEach(() => { |
|||
({ em, dsm, cmpRoot } = setupTestEditor()); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
em.destroy(); |
|||
}); |
|||
|
|||
test('set static and dynamic properties', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [{ id: 'id1', value: 'test-value' }], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const properties = { |
|||
custom_property: 'static-value', |
|||
content: { |
|||
type: DataVariableType, |
|||
path: 'ds_id.id1.value', |
|||
defaultValue: 'default', |
|||
}, |
|||
}; |
|||
|
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'div', |
|||
...properties, |
|||
})[0]; |
|||
|
|||
expect(cmp.get('custom_property')).toBe('static-value'); |
|||
expect(cmp.get('content')).toBe('test-value'); |
|||
}); |
|||
|
|||
test('dynamic properties respond to data changes', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [{ id: 'id1', value: 'initial-value' }], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'div', |
|||
content: { |
|||
type: DataVariableType, |
|||
path: 'ds_id.id1.value', |
|||
defaultValue: 'default', |
|||
}, |
|||
})[0]; |
|||
|
|||
expect(cmp.get('content')).toBe('initial-value'); |
|||
dsm.get('ds_id').getRecord('id1')?.set('value', 'updated-value'); |
|||
expect(cmp.get('content')).toBe('updated-value'); |
|||
}); |
|||
|
|||
test('setting static values stops dynamic updates', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [{ id: 'id1', value: 'dynamic-value' }], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const dataVariable = { |
|||
type: DataVariableType, |
|||
path: 'ds_id.id1.value', |
|||
defaultValue: 'default', |
|||
}; |
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'div', |
|||
content: dataVariable, |
|||
})[0]; |
|||
|
|||
cmp.set('content', 'static-value'); |
|||
dsm.get('ds_id').getRecord('id1')?.set('value', 'new-dynamic-value'); |
|||
expect(cmp.get('content')).toBe('static-value'); |
|||
|
|||
// @ts-ignore
|
|||
cmp.set({ content: dataVariable }); |
|||
expect(cmp.get('content')).toBe('new-dynamic-value'); |
|||
}); |
|||
|
|||
test('updating to a new dynamic value listens to the new dynamic value only', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [ |
|||
{ id: 'id1', value: 'dynamic-value1' }, |
|||
{ id: 'id2', value: 'dynamic-value2' }, |
|||
], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'div', |
|||
content: { |
|||
type: DataVariableType, |
|||
path: 'ds_id.id1.value', |
|||
defaultValue: 'default', |
|||
}, |
|||
})[0]; |
|||
|
|||
cmp.set({ |
|||
content: { |
|||
type: DataVariableType, |
|||
path: 'ds_id.id2.value', |
|||
defaultValue: 'default', |
|||
} as any, |
|||
}); |
|||
dsm.get('ds_id').getRecord('id1')?.set('value', 'new-dynamic-value1'); |
|||
expect(cmp.get('content')).toBe('dynamic-value2'); |
|||
dsm.get('ds_id').getRecord('id2')?.set('value', 'new-dynamic-value2'); |
|||
expect(cmp.get('content')).toBe('new-dynamic-value2'); |
|||
}); |
|||
|
|||
test('unset properties stops dynamic updates', () => { |
|||
const dataSource = { |
|||
id: 'ds_id', |
|||
records: [ |
|||
{ id: 'id1', value: 'dynamic-value1' }, |
|||
{ id: 'id2', value: 'dynamic-value2' }, |
|||
], |
|||
}; |
|||
dsm.add(dataSource); |
|||
|
|||
const cmp = cmpRoot.append({ |
|||
tagName: 'div', |
|||
custom_property: { |
|||
type: DataVariableType, |
|||
path: 'ds_id.id1.value', |
|||
defaultValue: 'default', |
|||
}, |
|||
})[0]; |
|||
|
|||
cmp.unset('custom_property'); |
|||
dsm.get('ds_id').getRecord('id1')?.set('value', 'new-dynamic-value'); |
|||
expect(cmp.get('custom_property')).toBeUndefined(); |
|||
}); |
|||
}); |
|||
@ -1,59 +0,0 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`TraitConditionalVariable should store traits with conditional values correctly 1`] = ` |
|||
{ |
|||
"assets": [], |
|||
"dataSources": [], |
|||
"pages": [ |
|||
{ |
|||
"frames": [ |
|||
{ |
|||
"component": { |
|||
"components": [ |
|||
{ |
|||
"attributes": { |
|||
"dynamicTrait": "Positive", |
|||
}, |
|||
"attributes-dynamic-value": { |
|||
"dynamicTrait": { |
|||
"condition": { |
|||
"left": 0, |
|||
"operator": ">", |
|||
"right": -1, |
|||
}, |
|||
"ifTrue": "Positive", |
|||
"type": "conditional-variable", |
|||
}, |
|||
}, |
|||
"tagName": "h1", |
|||
"type": "text", |
|||
}, |
|||
], |
|||
"docEl": { |
|||
"tagName": "html", |
|||
}, |
|||
"head": { |
|||
"type": "head", |
|||
}, |
|||
"stylable": [ |
|||
"background", |
|||
"background-color", |
|||
"background-image", |
|||
"background-repeat", |
|||
"background-attachment", |
|||
"background-position", |
|||
"background-size", |
|||
], |
|||
"type": "wrapper", |
|||
}, |
|||
"id": "data-variable-id", |
|||
}, |
|||
], |
|||
"id": "data-variable-id", |
|||
"type": "main", |
|||
}, |
|||
], |
|||
"styles": [], |
|||
"symbols": [], |
|||
} |
|||
`; |
|||
Loading…
Reference in new issue