* Make default Block wrappers and put Tool`s content there * * @returns {HTMLDivElement}
()
| 743 | * @returns {HTMLDivElement} |
| 744 | */ |
| 745 | private compose(): HTMLDivElement { |
| 746 | const wrapper = $.make('div', Block.CSS.wrapper) as HTMLDivElement, |
| 747 | contentNode = $.make('div', Block.CSS.content), |
| 748 | pluginsContent = this.toolInstance.render(); |
| 749 | |
| 750 | if (import.meta.env.MODE === 'test') { |
| 751 | wrapper.setAttribute('data-cy', 'block-wrapper'); |
| 752 | } |
| 753 | |
| 754 | /** |
| 755 | * Export id to the DOM three |
| 756 | * Useful for standalone modules development. For example, allows to identify Block by some child node. Or scroll to a particular Block by id. |
| 757 | */ |
| 758 | wrapper.dataset.id = this.id; |
| 759 | |
| 760 | /** |
| 761 | * Saving a reference to plugin's content element for guaranteed accessing it later |
| 762 | */ |
| 763 | this.toolRenderedElement = pluginsContent; |
| 764 | |
| 765 | contentNode.appendChild(this.toolRenderedElement); |
| 766 | |
| 767 | /** |
| 768 | * Block Tunes might wrap Block's content node to provide any UI changes |
| 769 | * |
| 770 | * <tune2wrapper> |
| 771 | * <tune1wrapper> |
| 772 | * <blockContent /> |
| 773 | * </tune1wrapper> |
| 774 | * </tune2wrapper> |
| 775 | */ |
| 776 | let wrappedContentNode: HTMLElement = contentNode; |
| 777 | |
| 778 | [...this.tunesInstances.values(), ...this.defaultTunesInstances.values()] |
| 779 | .forEach((tune) => { |
| 780 | if (_.isFunction(tune.wrap)) { |
| 781 | try { |
| 782 | wrappedContentNode = tune.wrap(wrappedContentNode); |
| 783 | } catch (e) { |
| 784 | _.log(`Tune ${tune.constructor.name} wrap method throws an Error %o`, 'warn', e); |
| 785 | } |
| 786 | } |
| 787 | }); |
| 788 | |
| 789 | wrapper.appendChild(wrappedContentNode); |
| 790 | |
| 791 | return wrapper; |
| 792 | } |
| 793 | |
| 794 | /** |
| 795 | * Instantiate Block Tunes |