toc.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /* vim:fileencoding=utf-8
  2. *
  3. * Copyright (C) 2019 Kovid Goyal <kovid at kovidgoyal.net>
  4. *
  5. * Distributed under terms of the GPLv3 license
  6. */
  7. /*jshint esversion: 6 */
  8. (function() {
  9. "use strict";
  10. var com_id = "COM_ID";
  11. var com_counter = 0;
  12. var settings = SETTINGS;
  13. function onclick(event) {
  14. // We dont want this event to trigger onclick on this element's parent
  15. // block, if any.
  16. event.stopPropagation();
  17. var frac = window.pageYOffset/document.body.scrollHeight;
  18. var loc = [];
  19. var totals = [];
  20. var block = event.currentTarget;
  21. var parent = block;
  22. while (parent && parent.tagName && parent.tagName.toLowerCase() !== 'body') {
  23. totals.push(parent.parentNode.children.length);
  24. var num = 0;
  25. var sibling = parent.previousElementSibling;
  26. while (sibling) {
  27. num += 1;
  28. sibling = sibling.previousElementSibling;
  29. }
  30. loc.push(num);
  31. parent = parent.parentNode;
  32. }
  33. loc.reverse();
  34. totals.reverse();
  35. com_counter += 1;
  36. window.calibre_toc_data = [block.tagName.toLowerCase(), block.id, loc, totals, frac];
  37. document.title = com_id + '-' + com_counter;
  38. }
  39. function find_blocks() {
  40. for (let elem of document.body.getElementsByTagName('*')) {
  41. var style = window.getComputedStyle(elem);
  42. if (style.display === 'block' || style.display === 'flex-box' || style.display === 'box') {
  43. elem.addEventListener('click', onclick);
  44. elem.addEventListener('mouseover', function(ev) { this.classList.add('calibre_toc_hover'); ev.stopPropagation(); });
  45. elem.addEventListener('mouseout', function(ev) { this.classList.remove('calibre_toc_hover'); ev.stopPropagation(); });
  46. }
  47. }
  48. }
  49. function apply_body_colors(event) {
  50. if (document.documentElement) {
  51. if (settings.bg) document.documentElement.style.backgroundColor = settings.bg;
  52. if (settings.fg) document.documentElement.style.color = settings.fg;
  53. }
  54. if (document.body) {
  55. if (settings.bg) document.body.style.backgroundColor = settings.bg;
  56. if (settings.fg) document.body.style.color = settings.fg;
  57. }
  58. }
  59. function apply_css() {
  60. var css = '';
  61. css += '.calibre_toc_hover:hover { cursor: pointer !important; border-top: solid 5px green !important }\n\n';
  62. if (settings.link) css += 'html > body :link, html > body :link * { color: ' + settings.link + ' !important; }\n\n';
  63. if (settings.is_dark_theme) { css = ':root { color-scheme: dark; }' + css; }
  64. var style = document.createElement('style');
  65. style.textContent = css;
  66. document.documentElement.appendChild(style);
  67. }
  68. apply_body_colors();
  69. function apply_all() {
  70. apply_css();
  71. apply_body_colors();
  72. find_blocks();
  73. }
  74. document.addEventListener("DOMContentLoaded", apply_all);
  75. })();