diff --git a/src/navigator/config/config.js b/src/navigator/config/config.js index e1bc19c5b..12abd1971 100644 --- a/src/navigator/config/config.js +++ b/src/navigator/config/config.js @@ -34,5 +34,29 @@ export default { scrollLayers: { behavior: 'auto', block: 'nearest' }, // Highlight when a layer component is hovered - highlightHover: 1 + highlightHover: 1, + + /** + * WARNING: Experimental option + * A callback triggered once the component layer is initialized. + * Useful to trigger updates on some component prop change. + * @example + * onInit({ component, render, listenTo }) { + * listenTo(component, 'change:some-prop', render); + * }; + */ + onInit: () => {}, + + /** + * WARNING: Experimental option + * A callback triggered once the component layer is rendered. + * A callback useful to update the layer DOM on some component change + * @example + * onRender({ component, el }) { // el is the DOM of the layer + * if (component.get('some-prop')) { + * // do changes using the `el` DOM + * } + * } + */ + onRender: () => {} }; diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js index 9705a22b7..80d67e4d2 100644 --- a/src/navigator/view/ItemView.js +++ b/src/navigator/view/ItemView.js @@ -1,4 +1,4 @@ -import { isUndefined, isString } from 'underscore'; +import { isUndefined, isString, bindAll } from 'underscore'; import { getModel } from 'utils/mixins'; import Backbone from 'backbone'; import ComponentView from 'dom_components/view/ComponentView'; @@ -61,9 +61,12 @@ export default Backbone.View.extend({ }, initialize(o = {}) { + bindAll(this, '__render'); this.opt = o; this.level = o.level; - this.config = o.config; + const config = o.config || {}; + const { onInit } = config; + this.config = config; this.em = o.config.em; this.ppfx = this.em.get('Config').stylePrefix; this.sorter = o.sorter || ''; @@ -94,6 +97,11 @@ export default Backbone.View.extend({ this.$el.data('model', model); this.$el.data('collection', components); model.viewLayer = this; + onInit.bind(this)({ + component: model, + render: this.__render, + listenTo: this.listenTo + }); }, getVisibilityEl() { @@ -419,6 +427,13 @@ export default Backbone.View.extend({ this.updateOpening(); this.updateStatus(); this.updateVisibility(); + this.__render(); return this; + }, + + __render() { + const { model, config, el } = this; + const { onRender } = config; + onRender.bind(this)({ component: model, el }); } });