diff --git a/src/style_manager/index.js b/src/style_manager/index.js index c76b6eabb..feea8bee4 100644 --- a/src/style_manager/index.js +++ b/src/style_manager/index.js @@ -313,15 +313,32 @@ export default () => { * and `isType` function which recognize the type of the * passed entity *@example - * styleManager.addType('my-type', { - * model: {}, - * view: {}, - * isType: (value) => { - * if (value && value.type == 'my-type') { - * return value; - * } - * }, - * }) + * styleManager.addType('my-custom-prop', { + create({ props, change }) { + const el = document.createElement('div'); + el.innerHTML = ''; + const inputEl = el.querySelector('.my-input'); + inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit + inputEl.addEventListener('input', event => change({ event, complete: false })); + return el; + }, + + emit({ props, updateStyle }, { event, complete }) { + const { value } = event.target; + const valueRes = value + 'px'; + // Pass a string value for the exact CSS property or an object containing multiple properties + // eg. updateStyle({ [props.property]: valueRes, color: 'red' }); + updateStyle(valueRes, { complete }); + }, + + update({ value, el }) { + el.querySelector('.my-input').value = parseInt(value, 10); + }, + + destroy() { + // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc. + } + }) */ addType(id, definition) { properties.addType(id, definition);