render = function() {
var title = formNode.querySelector('h1'),
list = formNode.querySelector('ol');
title.textContent = data.title;
list.innerHTML = '';
data.list.forEach(function(listItem) {
var node = itemTemplateNode.cloneNode(true);
node.querySelector('span').textContent = listItem.label;
// Here we apply the folder-card's depth indentation to represent label.
var depthIdx = listItem.depth;
depthIdx = Math.min(FOLDER_DEPTH_CLASSES.length - 1, depthIdx);
node.classList.add(FOLDER_DEPTH_CLASSES[depthIdx]);
// If not selectable use an empty click handler. Because of event
// fuzzing, we want to have something registered, otherwise an
// adjacent list item may receive the click.
var callback = listItem.selectable ? listItem.callback : noop;
node.addEventListener('click', callback, false);
list.appendChild(node);
});
};
init = function() {
data = {
title: 'No Title',
list: [
{
label: 'Dummy element',
callback: function() {
alert('Define an action here!');
}
}
]
};
document.body.appendChild(formNode);
var btnCancel = formNode.querySelector('button');
btnCancel.addEventListener('click', function(event) {
event.stopPropagation();
event.preventDefault();
hide();
});
// Empty dummy data
emptyList();
// Apply optional actions while initializing
if (typeof title === 'string') {
setTitle(title);
}
if (Array.isArray(list)) {
data.list = list;
}
};