Make timestamps.js re-useable

docs/_static/custom.js

@@ -4,6 +4,7 @@
  *
  * Distributed under terms of the GPLv3 license
  */
+/*jshint esversion: 6 */
 
 (function() {
 "use strict";
@@ -39,7 +40,7 @@ function mark_current_link(sidebar_tree, a, onload) {
 }
 
 function show_hash_in_sidebar(onload) {
-    var sidebar_tree = document.querySelector('.sidebar-tree');
+    const sidebar_tree = get_sidebar_tree();
     if (document.location.hash.length > 1) {
         var a = sidebar_tree.querySelector('a[href="' + document.location.hash + '"]');
         if (a) mark_current_link(sidebar_tree, a, onload);
@@ -48,10 +49,16 @@ function show_hash_in_sidebar(onload) {
     }
 }
 
-document.addEventListener("DOMContentLoaded", function() {
+function init_sidebar() {
+    const sidebar_tree = document.querySelector('.sidebar-tree');
+    if (!sidebar_tree || sidebar_tree.dataset.inited === 'true') return;
+    sidebar_tree.dataset.inited = 'true';
     show_hash_in_sidebar(true);
     window.addEventListener('hashchange', show_hash_in_sidebar.bind(null, false));
-});
+}
+
+document.addEventListener("DOMContentLoaded", init_sidebar);
+init_sidebar();
 
 }());
 

docs/_static/timestamps.css

@@ -1,13 +1,13 @@
-.timestamp-list dl {
+.video-with-timestamps dl {
     display: grid;
     grid-template-columns: max-content auto;
 }
 
-.timestamp-list dt {
+.video-with-timestamps dt {
     grid-column-start: 1;
 }
 
-.timestamp-list dd {
+.video-with-timestamps dd {
     grid-column-start: 2;
     margin-left: 1em;
 }

docs/_static/timestamps.js

@@ -1,29 +1,35 @@
 /*jshint esversion: 6 */
 
 (function() {
+    'use strict';
+
     function init_timestamps() {
-        document.querySelectorAll('.timestamp-list').forEach(loc => {
-            var dl = loc.querySelector('dl');
+        document.querySelectorAll('.video-with-timestamps').forEach(loc => {
+            if (loc.dataset.inited === 'true') return;
+            loc.dataset.inited = 'true';
+            const container_id = loc.id;
+            const dl = loc.querySelector('dl');
             dl.querySelectorAll('dt').forEach(dt => {
                 dt.innerHTML = '<a href="javascript:void(0)" style="text-decoration: none"><time>' + dt.innerHTML + '</time></a>';
                 dt.style.display = 'inline';
             });
-            dl.addEventListener('click', handle_timestamp_click);
+            dl.addEventListener('click', handle_timestamp_click.bind(null, container_id));
         });
     }
 
-    function handle_timestamp_click(e) {
+    function handle_timestamp_click(container_id, e) {
         if (e.target.tagName.toUpperCase() === 'TIME') {
             const timestamp = e.target.textContent;
             if (timestamp) {
                 const [minutes, seconds] = timestamp.split(':');
-                const totalSeconds = parseInt(minutes) * 60 + parseInt(seconds);
-                const video = document.querySelector('video');
-                video.currentTime = totalSeconds;
+                const total_seconds = parseInt(minutes) * 60 + parseInt(seconds);
+                const video = document.querySelector('#' + container_id + ' video');
+                video.currentTime = total_seconds;
                 video.play();
             }
         }
     }
 
-    window.addEventListener('load', init_timestamps);
+    init_timestamps();
+    document.addEventListener('DOMContentloaded', init_timestamps);
 })();

docs/intro_vid.rst

@@ -1,5 +1,7 @@
 .. raw:: html
 
+    <div id="intro-video-container" class="video-with-timestamps">
+
     <video controls width="640" height="360" poster="_static/poster.png">
         <source src="https://download.calibre-ebook.com/videos/kitty.mp4" type="video/mp4">
         <source src="https://download.calibre-ebook.com/videos/kitty.webm" type="video/webm">
@@ -9,11 +11,6 @@
 
     Watch kitty in action!
 
-
-.. raw:: html
-
-    <div id="timestamps-for-intro-video" class="timestamp-list">
-
 Timestamps for the above video:
 
 00:00