mini-templating in js+html

1 files changed, 41 insertions, 0 deletions

diff --git a/resources/index.html b/resources/index.html
index cbf0a75..de19121 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -7,6 +7,44 @@
     <title>IR</title>
     <script>
      "use strict"
+     function fillTemplate(template,values) {
+       const newElement=template.content.cloneNode(true);
+
+       newElement.querySelectorAll('*').forEach(
+         (e) => {
+           if (e.tagName == 'SLOT') {
+             const valueKey=e.textContent.trim();
+             e.replaceWith(e.ownerDocument.createTextNode(values[valueKey]));
+             return;
+           }
+
+           const attrs = e.attributes;
+           for (var i = attrs.length - 1; i >= 0; i--) {
+             if (attrs[i].name.startsWith('slot:')) {
+               const name=attrs[i].name.replace('slot:','');
+               const valueKey=attrs[i].value;
+               e.removeAttribute(attrs[i].name);
+               e.setAttribute(name,values[valueKey]);
+             }
+           }
+         },
+       );
+
+       return newElement;
+     }
+     // example usage
+     function addRow() {
+       document.querySelector('#list').appendChild(
+         fillTemplate(
+           document.querySelector('#row'),
+           {
+             'play-url':'http://foo.bar',
+             'name':'something',
+           },
+         )
+       );
+     }
+
      function call(method,path,args) {
        args ||= {};
        let url=new URL(path,location.href);
@@ -215,5 +253,8 @@
       </table>
     </div>
 
+    <template id="row">
+      <li><a slot:href="play-url"><span><slot>name</slot></span></a></li>
+    </template>
   </body>
 </html>