😎 Give your xaringan slides some style
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

155 lines
4.3KB

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