Refactor markup builder using template literals

Tetsuro · Jan 24, 2017 · 7d0da36 · 7d0da36
1 parent 99db83f
commit 7d0da36
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 22 deletions.
diff --git a/app/scripts/main.js b/app/scripts/main.js
@@ -117,28 +117,20 @@ var mtlMurals = (function() {
   function populateList() {
     markers.forEach(function(marker) {
       let markerListItem = document.createElement('li');
-      let markerListButton = document.createElement('button');
+      let markerListMarkup = `
-      let markerListMeta = document.createElement('p');
+        <li class="${MURAL_LIST_ITEM_CLASS}" data-index="${marker.id}">
-      let markerListAddress = document.createElement('p');
+          <button class="${MURAL_LIST_BUTTON_CLASS}">
-      let markerListImage = document.createElement('div');
+            <div data-bg="${marker.image}" class="lazyload ${MURAL_LIST_IMAGE_CLASS}"></div>
-
+            <p class=${MURAL_LIST_META_CLASS}>
-      markerListItem.classList.add(MURAL_LIST_ITEM_CLASS);
+              <p class="${MURAL_LIST_ADDRESS_CLASS}">${marker.title}</p>
-      markerListItem.setAttribute('data-index', marker.id);
+            </p>
+          </button>
+        </li>
+      `;
+
+      markerListItem.innerHTML = markerListMarkup;
+      let markerListButton = $(markerListItem).find(`.${MURAL_LIST_BUTTON_CLASS}`)[0];
       $MURAL_LIST[0].appendChild(markerListItem);
-      markerListItem.appendChild(markerListButton);
-      markerListButton.classList.add(MURAL_LIST_BUTTON_CLASS)
-
-      markerListAddress.classList.add(MURAL_LIST_ADDRESS_CLASS)
-      markerListAddress.innerHTML = marker.title;
-      markerListMeta.appendChild(markerListAddress);
-      markerListMeta.classList.add(MURAL_LIST_META_CLASS)
-
-
-      markerListImage.setAttribute('data-bg', marker.image);
-      markerListImage.classList.add('lazyload', MURAL_LIST_IMAGE_CLASS);
-      markerListButton.appendChild(markerListImage);
-      markerListButton.appendChild(markerListMeta);
-
       markerListButton.addEventListener('click', openModal.bind(marker));
     });
   }

diff --git a/dist/scripts/main.js b/dist/scripts/main.js