Accords-Library-Archive
/
gallery.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client/expanders: extract HTML

This commit is contained in:
rr- 2016-08-22 00:53:53 +02:00
parent 2335aaff20
commit c7f36c893f
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/html/expander.tpl Normal file
View File

@ -0,0 +1,10 @@
<section class='expander'>
<header>
<a>
<%- ctx.title %>
<i class='fa fa-chevron-down'></i>
</a>
</header>
<div class='expander-content'></div>
</section>

24
client/js/controls/expander_control.js
View File

@ -3,6 +3,10 @@
const ICON_CLASS_OPENED = 'fa-chevron-down'; const ICON_CLASS_OPENED = 'fa-chevron-down';
const ICON_CLASS_CLOSED = 'fa-chevron-up'; const ICON_CLASS_CLOSED = 'fa-chevron-up';
const views = require('../util/views.js');
const template = views.getTemplate('expander');
class ExpanderControl { class ExpanderControl {
constructor(title, nodes) { constructor(title, nodes) {
this._title = title; this._title = title;
@ -12,24 +16,12 @@ class ExpanderControl {
return; return;
} }
const expanderNode = document.createElement('section'); const expanderNode = template({title: title});
expanderNode.classList.add('expander'); const toggleLinkNode = expanderNode.querySelector('a');
const toggleIconNode = expanderNode.querySelector('i');
const toggleLinkNode = document.createElement('a'); const expanderContentNode = expanderNode.querySelector('div');
const toggleIconNode = document.createElement('i');
toggleIconNode.classList.add('fa');
toggleLinkNode.textContent = title;
toggleLinkNode.appendChild(toggleIconNode);
toggleLinkNode.addEventListener('click', e => this._evtToggleClick(e)); 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]); nodes[0].parentNode.insertBefore(expanderNode, nodes[0]);
for (let node of nodes) { for (let node of nodes) {