Add: use cache template

edit/applies-to-line-widget.js

@@ -1,6 +1,16 @@
 /* global regExpTester debounce messageBox CodeMirror */
 'use strict';
 
+function templateCache(cache) {
+  function clone(id) {
+    if (typeof cache[id] === 'function') {
+      cache[id] = cache[id]();
+    }
+    return cache[id].cloneNode(true);
+  }
+  return {clone};
+}
+
 function createAppliesToLineWidget(cm) {
   const APPLIES_TYPE = [
     [t('appliesUrlOption'), 'url'],
@@ -13,6 +23,57 @@ function createAppliesToLineWidget(cm) {
   let fromLine, toLine, styleVariables;
   let initialized = false;
 
+  const template = templateCache({
+    container: () =>
+      $element({className: 'applies-to', appendChild: [
+        $element({tag: 'label', appendChild: t('appliesLabel')}),
+        $element({
+          tag: 'ul',
+          className: 'applies-to-list'
+        })
+      ]}),
+    listItem: () =>
+      $element({tag: 'li', appendChild: [
+        $element({
+          tag: 'select',
+          className: 'applies-type',
+          appendChild: APPLIES_TYPE.map(([label, value]) => $element({
+            tag: 'option',
+            value: value,
+            textContent: label
+          }))
+        }),
+        $element({
+          tag: 'input',
+          className: 'applies-value'
+        }),
+        $element({
+          tag: 'button',
+          type: 'button',
+          className: 'applies-to-regexp-test',
+          textContent: t('styleRegexpTestButton')
+        }),
+        $element({
+          tag: 'button',
+          type: 'button',
+          className: 'applies-to-remove',
+          textContent: t('appliesRemove')
+        }),
+        $element({
+          tag: 'button',
+          type: 'button',
+          className: 'applies-to-add',
+          textContent: t('appliesAdd')
+        })
+      ]}),
+    appliesToEverything: () =>
+      $element({
+        tag: 'li',
+        className: 'applies-to-everything',
+        textContent: t('appliesToEverything')
+      })
+  });
+
   return {toggle};
 
   function toggle(newState = !initialized) {
@@ -240,76 +301,45 @@ function createAppliesToLineWidget(cm) {
   }
 
   function buildElement({applies}) {
-    const el = $element({className: 'applies-to', appendChild: [
+    const el = template.clone('container');
-      $element({tag: 'label', appendChild: [
+    const appliesToList = $('.applies-to-list', el);
-        t('appliesLabel'),
+    applies.map(makeLi)
-        // $element({tag: 'svg'})
+      .forEach(item => appliesToList.appendChild(item));
-      ]}),
+    if (!appliesToList.childNodes.length) {
-      $element({
+      appliesToList.appendChild(template.clone('appliesToEverything'));
-        tag: 'ul',
-        className: 'applies-to-list',
-        appendChild: applies.map(makeLi)
-      })
-    ]});
-    if (!$('li', el)) {
-      $('ul', el).appendChild($element({
-        tag: 'li',
-        className: 'applies-to-everything',
-        textContent: t('appliesToEverything')
-      }));
     }
     return el;
 
     function makeLi(apply) {
-      const el = $element({tag: 'li', appendChild: makeInput(apply)});
+      const el = template.clone('listItem');
       el.dataset.type = apply.type.text;
       el.addEventListener('change', e => {
         if (e.target.classList.contains('applies-type')) {
           el.dataset.type = apply.type.text;
         }
       });
-      return el;
-    }
 
-    function makeInput(apply) {
+      const typeInput = $('.applies-type', el);
-      const typeInput = $element({
-        tag: 'select',
-        className: 'applies-type',
-        appendChild: APPLIES_TYPE.map(([label, value]) => $element({
-          tag: 'option',
-          value: value,
-          textContent: label
-        })),
-        onchange() {
-          applyChange(apply.type, this.value);
-        }
-      });
       typeInput.value = apply.type.text;
-      const valueInput = $element({
+      typeInput.onchange = function () {
-        tag: 'input',
+        applyChange(apply.type, this.value);
-        className: 'applies-value',
+      };
-        value: apply.value.text,
+
-        oninput() {
+      const valueInput = $('.applies-value', el);
+      valueInput.value = apply.value.text;
+      valueInput.oninput = function () {
         debounce(applyChange, THROTTLE_DELAY, apply.value, this.value);
-        },
+      };
-        onfocus: updateRegexpTest
+      valueInput.onfocus = updateRegexpTest;
-      });
+
-      const regexpTestButton = $element({
+      const regexpTestButton = $('.applies-to-regexp-test', el);
-        tag: 'button',
+      regexpTestButton.onclick = () => {
-        type: 'button',
-        className: 'applies-to-regexp-test',
-        textContent: t('styleRegexpTestButton'),
-        onclick() {
         regExpTester.toggle();
         regExpTester.update([apply.value.text]);
-        }
+      };
-      });
+
-      const removeButton = $element({
+      const removeButton = $('.applies-to-remove', el);
-        tag: 'button',
+      removeButton.onclick = function () {
-        type: 'button',
-        className: 'applies-to-remove',
-        textContent: t('appliesRemove'),
-        onclick() {
         const i = applies.indexOf(apply);
         let repl;
         let from;
@@ -338,14 +368,10 @@ function createAppliesToLineWidget(cm) {
         clearApply(apply);
         this.closest('li').remove();
         applies.splice(i, 1);
-        }
+      };
-      });
+
-      const addButton = $element({
+      const addButton = $('.applies-to-add', el);
-        tag: 'button',
+      addButton.onclick = function () {
-        type: 'button',
-        className: 'applies-to-add',
-        textContent: t('appliesAdd'),
-        onclick() {
         const i = applies.indexOf(apply);
         const pos = apply.mark.find().to;
         const text = `, ${apply.type.text}("")`;
@@ -359,9 +385,9 @@ function createAppliesToLineWidget(cm) {
         setupApplyMarkers(newApply);
         applies.splice(i + 1, 0, newApply);
         this.closest('li').insertAdjacentElement('afterend', makeLi(newApply));
-        }
+      };
-      });
+
-      return [typeInput, valueInput, regexpTestButton, removeButton, addButton];
+      return el;
 
       function updateRegexpTest() {
         if (apply.type.text === 'regexp') {