move template to js file

Author: hmillersarah

ims-videos.html

@@ -77,7 +77,7 @@
   <script src="wp-includes/js/navbar.js"></script>
 
   <!-- Web components -->
-  <script src="wp-includes/js/web-components/video-card.js"></script>
+  <script src="web-components/video-card.js"></script>
 </head>
 
   <!-- PAGE CONTENT -->
@@ -288,7 +288,7 @@ <h5>IMS support</h5>
       </div>
 
       <!-- Video card template -->
-      <template id="video-card">
+      <!-- <template id="video-card">
         <link href="wp-includes/css/web-components/video-card.css" rel="stylesheet">
         <div class="video-card">
           <div>
@@ -305,7 +305,7 @@ <h2 class="video-name"></h2>
             <a class="video-link-3" target="_blank" rel="noopener noreferrer"></a>
           </div>
         </div>
-      </template>
+      </template> -->
 
       <!-- MAIN CONTENT -->
       <div id="content" class="main-content">

…cludes/css/web-components/video-card.css web-components/video-card.csswp-includes/css/web-components/video-card.css renamed to web-components/video-card.css wp-includes/css/web-components/video-card.css renamed to web-components/video-card.css

@@ -1,3 +1,24 @@
+// HTML template
+const template = document.createElement('template');
+template.innerHTML = 
+`
+    <div class="video-card">
+        <div>
+        <h2 class="video-name"></h2>
+        <p class="video-desc"></p>
+        <div class="inline-g">
+            <p><b>Level: </b><span class="video-level"></span></p>
+            <p><b>Time: </b><span class="video-time"></span></p>
+        </div>
+        </div>
+        <div class="link-g">
+        <a class="video-link" target="_blank" rel="noopener noreferrer"></a>
+        <a class="video-link-2" target="_blank" rel="noopener noreferrer"></a>
+        <a class="video-link-3" target="_blank" rel="noopener noreferrer"></a>
+        </div>
+    </div>
+`;
+
 // Web component
 class VideoCard extends HTMLElement {
 
@@ -25,7 +46,8 @@ class VideoCard extends HTMLElement {
         // Create shadow root for element
         const shadow = this.attachShadow({mode: 'closed'});
         shadow.append(
-            document.getElementById('video-card').content.cloneNode(true)
+            // document.getElementById('video-card').content.cloneNode(true) // Use this line to test template in ims-videos.html
+            template.content.cloneNode(true)
         );
 
         // Set video name