😎 Give your xaringan slides some style
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

163 lines
4.6KB

  1. /* http://gregfranko.com/blog/jquery-best-practices/ */
  2. (function($) {
  3. $(function() {
  4. $('nav.navbar').headroom();
  5. Toc.init({
  6. $nav: $("#toc"),
  7. $scope: $("main h2, main h3, main h4, main h5, main h6")
  8. });
  9. if ($('#toc').length) {
  10. $('body').scrollspy({
  11. target: '#toc',
  12. offset: $("nav.navbar").outerHeight() + 1
  13. });
  14. }
  15. // Activate popovers
  16. $('[data-bs-toggle="popover"]').popover({
  17. container: 'body',
  18. html: true,
  19. trigger: 'focus',
  20. placement: "top",
  21. sanitize: false,
  22. });
  23. $('[data-bs-toggle="tooltip"]').tooltip();
  24. /* Clipboard --------------------------*/
  25. function changeTooltipMessage(element, msg) {
  26. var tooltipOriginalTitle=element.getAttribute('data-bs-original-title');
  27. element.setAttribute('data-bs-original-title', msg);
  28. $(element).tooltip('show');
  29. element.setAttribute('data-bs-original-title', tooltipOriginalTitle);
  30. }
  31. if(ClipboardJS.isSupported()) {
  32. $(document).ready(function() {
  33. var copyButton = "<button type='button' class='btn btn-primary btn-copy-ex' title='Copy to clipboard' aria-label='Copy to clipboard' data-toggle='tooltip' data-placement='left' data-trigger='hover' data-clipboard-copy><i class='fa fa-copy'></i></button>";
  34. $("div.sourceCode").addClass("hasCopyButton");
  35. // Insert copy buttons:
  36. $(copyButton).prependTo(".hasCopyButton");
  37. // Initialize tooltips:
  38. $('.btn-copy-ex').tooltip({container: 'body'});
  39. // Initialize clipboard:
  40. var clipboard = new ClipboardJS('[data-clipboard-copy]', {
  41. text: function(trigger) {
  42. return trigger.parentNode.textContent.replace(/\n#>[^\n]*/g, "");
  43. }
  44. });
  45. clipboard.on('success', function(e) {
  46. changeTooltipMessage(e.trigger, 'Copied!');
  47. e.clearSelection();
  48. });
  49. clipboard.on('error', function(e) {
  50. changeTooltipMessage(e.trigger,'Press Ctrl+C or Command+C to copy');
  51. });
  52. });
  53. }
  54. /* Search marking --------------------------*/
  55. var url = new URL(window.location.href);
  56. var toMark = url.searchParams.get("q");
  57. var mark = new Mark("main#main");
  58. if (toMark) {
  59. mark.mark(toMark, {
  60. accuracy: {
  61. value: "complementary",
  62. limiters: [",", ".", ":", "/"],
  63. }
  64. });
  65. }
  66. /* Search --------------------------*/
  67. /* Adapted from https://github.com/rstudio/bookdown/blob/2d692ba4b61f1e466c92e78fd712b0ab08c11d31/inst/resources/bs4_book/bs4_book.js#L25 */
  68. // Initialise search index on focus
  69. var fuse;
  70. $("#search-input").focus(async function(e) {
  71. if (fuse) {
  72. return;
  73. }
  74. $(e.target).addClass("loading");
  75. var response = await fetch($("#search-input").data("search-index"));
  76. var data = await response.json();
  77. var options = {
  78. keys: ["what", "text", "code"],
  79. ignoreLocation: true,
  80. threshold: 0.1,
  81. includeMatches: true,
  82. includeScore: true,
  83. };
  84. fuse = new Fuse(data, options);
  85. $(e.target).removeClass("loading");
  86. });
  87. // Use algolia autocomplete
  88. var options = {
  89. autoselect: true,
  90. debug: true,
  91. hint: false,
  92. minLength: 2,
  93. };
  94. var q;
  95. async function searchFuse(query, callback) {
  96. await fuse;
  97. var items;
  98. if (!fuse) {
  99. items = [];
  100. } else {
  101. q = query;
  102. var results = fuse.search(query, { limit: 20 });
  103. items = results
  104. .filter((x) => x.score <= 0.75)
  105. .map((x) => x.item);
  106. if (items.length === 0) {
  107. items = [{dir:"Sorry 😿",previous_headings:"",title:"No results found.",what:"No results found.",path:window.location.href}];
  108. }
  109. }
  110. callback(items);
  111. }
  112. $("#search-input").autocomplete(options, [
  113. {
  114. name: "content",
  115. source: searchFuse,
  116. templates: {
  117. suggestion: (s) => {
  118. if (s.title == s.what) {
  119. return `${s.dir} > <div class="search-details"> ${s.title}</div>`;
  120. } else if (s.previous_headings == "") {
  121. return `${s.dir} > <div class="search-details"> ${s.title}</div> > ${s.what}`;
  122. } else {
  123. return `${s.dir} > <div class="search-details"> ${s.title}</div> > ${s.previous_headings} > ${s.what}`;
  124. }
  125. },
  126. },
  127. },
  128. ]).on('autocomplete:selected', function(event, s) {
  129. window.location.href = s.path + "?q=" + q + "#" + s.id;
  130. });
  131. });
  132. })(window.jQuery || window.$)
  133. document.addEventListener('keydown', function(event) {
  134. // Check if the pressed key is '/'
  135. if (event.key === '/') {
  136. event.preventDefault(); // Prevent any default action associated with the '/' key
  137. document.getElementById('search-input').focus(); // Set focus to the search input
  138. }
  139. });