lodash wrap

by david_i_smith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
<button class="btn" id="ul">UL</button>
<button class="btn" id="ol">OL</button>
<textarea id="textarea" placeholder="Your list here" rows="10"></textarea>

JavaScript

var createDescriptionList = function (value, index) {
  var dt = document.createElement('dt');
  var dd = document.createElement('dd')
  dt.appendChild(document.createTextNode(++index));
  dd.appendChild(document.createTextNode(value));
  this.appendChild(dt);
  this.appendChild(dd);
};

var createDefaultList = function (value, index) {
  var listItem = document.createElement('li');
  listItem.appendChild(document.createTextNode(value));
  this.appendChild(listItem);
};

var createList = function (iterator, collection, listType) {
  var list = document.createElement(listType);
  iterator(collection, function (value, index) {
    var func = (listType === 'dl') ? createDescriptionList : createDefaultList;
    func.call(list, value, index);
  });
  return list;
};

var wrap = _.wrap(_.forEach, createList);

var origValue = '';

_.forEach(document.getElementsByTagName('button'), function (button) {
  button.addEventListener('click', function (event) {
    var textarea = document.getElementById('textarea');
  	origValue = origValue || textarea.value;
    var partial = _.partial(wrap, origValue.trim().split('\n'));
    textarea.value = partial(event.target.id).outerHTML;
  });
});