mirror of
https://github.com/kovidgoyal/kitty
synced 2026-06-08 14:18:26 +02:00
Make timestamps.js re-useable
This commit is contained in:
13
docs/_static/custom.js
vendored
13
docs/_static/custom.js
vendored
@@ -4,6 +4,7 @@
|
|||||||
*
|
*
|
||||||
* Distributed under terms of the GPLv3 license
|
* Distributed under terms of the GPLv3 license
|
||||||
*/
|
*/
|
||||||
|
/*jshint esversion: 6 */
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -39,7 +40,7 @@ function mark_current_link(sidebar_tree, a, onload) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function show_hash_in_sidebar(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) {
|
if (document.location.hash.length > 1) {
|
||||||
var a = sidebar_tree.querySelector('a[href="' + document.location.hash + '"]');
|
var a = sidebar_tree.querySelector('a[href="' + document.location.hash + '"]');
|
||||||
if (a) mark_current_link(sidebar_tree, a, onload);
|
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);
|
show_hash_in_sidebar(true);
|
||||||
window.addEventListener('hashchange', show_hash_in_sidebar.bind(null, false));
|
window.addEventListener('hashchange', show_hash_in_sidebar.bind(null, false));
|
||||||
});
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", init_sidebar);
|
||||||
|
init_sidebar();
|
||||||
|
|
||||||
}());
|
}());
|
||||||
|
|
||||||
|
|||||||
6
docs/_static/timestamps.css
vendored
6
docs/_static/timestamps.css
vendored
@@ -1,13 +1,13 @@
|
|||||||
.timestamp-list dl {
|
.video-with-timestamps dl {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: max-content auto;
|
grid-template-columns: max-content auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timestamp-list dt {
|
.video-with-timestamps dt {
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timestamp-list dd {
|
.video-with-timestamps dd {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
}
|
}
|
||||||
|
|||||||
22
docs/_static/timestamps.js
vendored
22
docs/_static/timestamps.js
vendored
@@ -1,29 +1,35 @@
|
|||||||
/*jshint esversion: 6 */
|
/*jshint esversion: 6 */
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
function init_timestamps() {
|
function init_timestamps() {
|
||||||
document.querySelectorAll('.timestamp-list').forEach(loc => {
|
document.querySelectorAll('.video-with-timestamps').forEach(loc => {
|
||||||
var dl = loc.querySelector('dl');
|
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 => {
|
dl.querySelectorAll('dt').forEach(dt => {
|
||||||
dt.innerHTML = '<a href="javascript:void(0)" style="text-decoration: none"><time>' + dt.innerHTML + '</time></a>';
|
dt.innerHTML = '<a href="javascript:void(0)" style="text-decoration: none"><time>' + dt.innerHTML + '</time></a>';
|
||||||
dt.style.display = 'inline';
|
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') {
|
if (e.target.tagName.toUpperCase() === 'TIME') {
|
||||||
const timestamp = e.target.textContent;
|
const timestamp = e.target.textContent;
|
||||||
if (timestamp) {
|
if (timestamp) {
|
||||||
const [minutes, seconds] = timestamp.split(':');
|
const [minutes, seconds] = timestamp.split(':');
|
||||||
const totalSeconds = parseInt(minutes) * 60 + parseInt(seconds);
|
const total_seconds = parseInt(minutes) * 60 + parseInt(seconds);
|
||||||
const video = document.querySelector('video');
|
const video = document.querySelector('#' + container_id + ' video');
|
||||||
video.currentTime = totalSeconds;
|
video.currentTime = total_seconds;
|
||||||
video.play();
|
video.play();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('load', init_timestamps);
|
init_timestamps();
|
||||||
|
document.addEventListener('DOMContentloaded', init_timestamps);
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
.. raw:: html
|
.. raw:: html
|
||||||
|
|
||||||
|
<div id="intro-video-container" class="video-with-timestamps">
|
||||||
|
|
||||||
<video controls width="640" height="360" poster="_static/poster.png">
|
<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.mp4" type="video/mp4">
|
||||||
<source src="https://download.calibre-ebook.com/videos/kitty.webm" type="video/webm">
|
<source src="https://download.calibre-ebook.com/videos/kitty.webm" type="video/webm">
|
||||||
@@ -9,11 +11,6 @@
|
|||||||
|
|
||||||
Watch kitty in action!
|
Watch kitty in action!
|
||||||
|
|
||||||
|
|
||||||
.. raw:: html
|
|
||||||
|
|
||||||
<div id="timestamps-for-intro-video" class="timestamp-list">
|
|
||||||
|
|
||||||
Timestamps for the above video:
|
Timestamps for the above video:
|
||||||
|
|
||||||
00:00
|
00:00
|
||||||
|
|||||||
Reference in New Issue
Block a user