main.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. document.addEventListener('DOMContentLoaded', () => {
  2. // Dropdowns
  3. const $metalinks = getAll('#meta a');
  4. if ($metalinks.length > 0) {
  5. $metalinks.forEach($el => {
  6. $el.addEventListener('click', event => {
  7. event.preventDefault();
  8. const target = $el.getAttribute('href');
  9. const $target = document.getElementById(target.substring(1));
  10. $target.scrollIntoView(true);
  11. // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
  12. return false;
  13. });
  14. });
  15. }
  16. // Dropdowns
  17. const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
  18. if ($dropdowns.length > 0) {
  19. $dropdowns.forEach($el => {
  20. $el.addEventListener('click', event => {
  21. event.stopPropagation();
  22. $el.classList.toggle('is-active');
  23. });
  24. });
  25. document.addEventListener('click', event => {
  26. closeDropdowns();
  27. });
  28. }
  29. function closeDropdowns() {
  30. $dropdowns.forEach($el => {
  31. $el.classList.remove('is-active');
  32. });
  33. }
  34. // Toggles
  35. const $burgers = getAll('.burger');
  36. if ($burgers.length > 0) {
  37. $burgers.forEach($el => {
  38. $el.addEventListener('click', () => {
  39. const target = $el.dataset.target;
  40. const $target = document.getElementById(target);
  41. $el.classList.toggle('is-active');
  42. $target.classList.toggle('is-active');
  43. });
  44. });
  45. }
  46. // Modals
  47. const $html = document.documentElement;
  48. const $modals = getAll('.modal');
  49. const $modalButtons = getAll('.modal-button');
  50. const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
  51. if ($modalButtons.length > 0) {
  52. $modalButtons.forEach($el => {
  53. $el.addEventListener('click', () => {
  54. const target = $el.dataset.target;
  55. const $target = document.getElementById(target);
  56. $html.classList.add('is-clipped');
  57. $target.classList.add('is-active');
  58. });
  59. });
  60. }
  61. if ($modalCloses.length > 0) {
  62. $modalCloses.forEach($el => {
  63. $el.addEventListener('click', () => {
  64. closeModals();
  65. });
  66. });
  67. }
  68. document.addEventListener('keydown', event => {
  69. const e = event || window.event;
  70. if (e.keyCode === 27) {
  71. closeModals();
  72. closeDropdowns();
  73. }
  74. });
  75. function closeModals() {
  76. $html.classList.remove('is-clipped');
  77. $modals.forEach($el => {
  78. $el.classList.remove('is-active');
  79. });
  80. }
  81. // Clipboard
  82. const $highlights = getAll('.highlight');
  83. let itemsProcessed = 0;
  84. if ($highlights.length > 0) {
  85. $highlights.forEach($el => {
  86. const copyEl = '<button class="button is-small bd-copy">Copy</button>';
  87. const expandEl = '<button class="button is-small bd-expand">Expand</button>';
  88. $el.insertAdjacentHTML('beforeend', copyEl);
  89. <<<<<<< HEAD
  90. const $parent = $el.parentNode;
  91. if ($parent && $parent.classList.contains('bd-is-more')) {
  92. const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
  93. $el.insertAdjacentHTML('beforeend', showEl);
  94. } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
  95. $el.insertAdjacentHTML('beforeend', expandEl);
  96. =======
  97. if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
  98. $el.insertAdjacentHTML('beforeend', expandEl);
  99. }
  100. const $parent = $el.parentNode;
  101. if ($parent && $parent.className == 'bd-highlight-clipped') {
  102. const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
  103. $el.classList.add('bd-is-clipped');
  104. $el.insertAdjacentHTML('beforeend', showEl);
  105. >>>>>>> Add show code
  106. }
  107. itemsProcessed++;
  108. if (itemsProcessed === $highlights.length) {
  109. addHighlightControls();
  110. }
  111. });
  112. }
  113. function addHighlightControls() {
  114. const $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
  115. $highlightButtons.forEach($el => {
  116. $el.addEventListener('mouseenter', () => {
  117. $el.parentNode.classList.add('bd-is-hovering');
  118. });
  119. $el.addEventListener('mouseleave', () => {
  120. $el.parentNode.classList.remove('bd-is-hovering');
  121. });
  122. });
  123. const $highlightExpands = getAll('.highlight .bd-expand');
  124. $highlightExpands.forEach($el => {
  125. $el.addEventListener('click', () => {
  126. $el.parentNode.firstElementChild.style.maxHeight = 'none';
  127. });
  128. });
  129. const $highlightShows = getAll('.highlight .bd-show');
  130. $highlightShows.forEach($el => {
  131. $el.addEventListener('click', () => {
  132. $el.parentNode.classList.remove('bd-is-clipped');
  133. });
  134. });
  135. }
  136. new Clipboard('.bd-copy', {
  137. target: function(trigger) {
  138. return trigger.previousSibling;
  139. }
  140. });
  141. // Functions
  142. function getAll(selector) {
  143. return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
  144. }
  145. let latestKnownScrollY = 0;
  146. let ticking = false;
  147. function scrollUpdate() {
  148. ticking = false;
  149. // do stuff
  150. }
  151. function onScroll() {
  152. latestKnownScrollY = window.scrollY;
  153. scrollRequestTick();
  154. }
  155. function scrollRequestTick() {
  156. if(!ticking) {
  157. requestAnimationFrame(scrollUpdate);
  158. }
  159. ticking = true;
  160. }
  161. window.addEventListener('scroll', onScroll, false);
  162. });