diff --git a/client/html/expander.tpl b/client/html/expander.tpl new file mode 100644 index 0000000..39014d1 --- /dev/null +++ b/client/html/expander.tpl @@ -0,0 +1,10 @@ +
+
+ + <%- ctx.title %> + + +
+ +
+
diff --git a/client/js/controls/expander_control.js b/client/js/controls/expander_control.js index 36628f3..93ba2cb 100644 --- a/client/js/controls/expander_control.js +++ b/client/js/controls/expander_control.js @@ -3,6 +3,10 @@ const ICON_CLASS_OPENED = 'fa-chevron-down'; const ICON_CLASS_CLOSED = 'fa-chevron-up'; +const views = require('../util/views.js'); + +const template = views.getTemplate('expander'); + class ExpanderControl { constructor(title, nodes) { this._title = title; @@ -12,24 +16,12 @@ class ExpanderControl { return; } - const expanderNode = document.createElement('section'); - expanderNode.classList.add('expander'); - - const toggleLinkNode = document.createElement('a'); - const toggleIconNode = document.createElement('i'); - toggleIconNode.classList.add('fa'); - toggleLinkNode.textContent = title; - toggleLinkNode.appendChild(toggleIconNode); + const expanderNode = template({title: title}); + const toggleLinkNode = expanderNode.querySelector('a'); + const toggleIconNode = expanderNode.querySelector('i'); + const expanderContentNode = expanderNode.querySelector('div'); toggleLinkNode.addEventListener('click', e => this._evtToggleClick(e)); - const headerNode = document.createElement('header'); - headerNode.appendChild(toggleLinkNode); - expanderNode.appendChild(headerNode); - - const expanderContentNode = document.createElement('div'); - expanderContentNode.classList.add('expander-content'); - expanderNode.appendChild(expanderContentNode); - nodes[0].parentNode.insertBefore(expanderNode, nodes[0]); for (let node of nodes) {