123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- 'use strict';
- document.addEventListener('DOMContentLoaded', function () {
- // Dropdowns
- var $metalinks = getAll('#meta a');
- if ($metalinks.length > 0) {
- $metalinks.forEach(function ($el) {
- $el.addEventListener('click', function (event) {
- event.preventDefault();
- var target = $el.getAttribute('href');
- var $target = document.getElementById(target.substring(1));
- $target.scrollIntoView(true);
- // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
- return false;
- });
- });
- }
- // Dropdowns
- var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
- if ($dropdowns.length > 0) {
- $dropdowns.forEach(function ($el) {
- $el.addEventListener('click', function (event) {
- event.stopPropagation();
- $el.classList.toggle('is-active');
- });
- });
- document.addEventListener('click', function (event) {
- closeDropdowns();
- });
- }
- function closeDropdowns() {
- $dropdowns.forEach(function ($el) {
- $el.classList.remove('is-active');
- });
- }
- // Toggles
- var $burgers = getAll('.burger');
- if ($burgers.length > 0) {
- $burgers.forEach(function ($el) {
- $el.addEventListener('click', function () {
- var target = $el.dataset.target;
- var $target = document.getElementById(target);
- $el.classList.toggle('is-active');
- $target.classList.toggle('is-active');
- });
- });
- }
- // Modals
- var $html = document.documentElement;
- var $modals = getAll('.modal');
- var $modalButtons = getAll('.modal-button');
- var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
- if ($modalButtons.length > 0) {
- $modalButtons.forEach(function ($el) {
- $el.addEventListener('click', function () {
- var target = $el.dataset.target;
- var $target = document.getElementById(target);
- $html.classList.add('is-clipped');
- $target.classList.add('is-active');
- });
- });
- }
- if ($modalCloses.length > 0) {
- $modalCloses.forEach(function ($el) {
- $el.addEventListener('click', function () {
- closeModals();
- });
- });
- }
- document.addEventListener('keydown', function (event) {
- var e = event || window.event;
- if (e.keyCode === 27) {
- closeModals();
- closeDropdowns();
- }
- });
- function closeModals() {
- $html.classList.remove('is-clipped');
- $modals.forEach(function ($el) {
- $el.classList.remove('is-active');
- });
- }
- // Clipboard
- var $highlights = getAll('.highlight');
- var itemsProcessed = 0;
- if ($highlights.length > 0) {
- $highlights.forEach(function ($el) {
- var copyEl = '<button class="button is-small bd-copy">Copy</button>';
- var expandEl = '<button class="button is-small bd-expand">Expand</button>';
- $el.insertAdjacentHTML('beforeend', copyEl);
- <<<<<<< HEAD
- var $parent = $el.parentNode;
- if ($parent && $parent.classList.contains('bd-is-more')) {
- var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
- $el.insertAdjacentHTML('beforeend', showEl);
- } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
- $el.insertAdjacentHTML('beforeend', expandEl);
- =======
- if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
- $el.insertAdjacentHTML('beforeend', expandEl);
- }
- var $parent = $el.parentNode;
- if ($parent && $parent.className == 'bd-highlight-clipped') {
- var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
- $el.classList.add('bd-is-clipped');
- $el.insertAdjacentHTML('beforeend', showEl);
- >>>>>>> Add show code
- }
- itemsProcessed++;
- if (itemsProcessed === $highlights.length) {
- addHighlightControls();
- }
- });
- }
- function addHighlightControls() {
- var $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
- $highlightButtons.forEach(function ($el) {
- $el.addEventListener('mouseenter', function () {
- $el.parentNode.classList.add('bd-is-hovering');
- });
- $el.addEventListener('mouseleave', function () {
- $el.parentNode.classList.remove('bd-is-hovering');
- });
- });
- var $highlightExpands = getAll('.highlight .bd-expand');
- $highlightExpands.forEach(function ($el) {
- $el.addEventListener('click', function () {
- $el.parentNode.firstElementChild.style.maxHeight = 'none';
- });
- });
- <<<<<<< HEAD
- var $highlightShows = getAll('.highlight .bd-show');
- $highlightShows.forEach(function ($el) {
- $el.addEventListener('click', function () {
- $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
- =======
- var $highlightShows = getAll('.bd-highlight-clipped .bd-show');
- $highlightShows.forEach(function ($el) {
- $el.addEventListener('click', function () {
- $el.parentNode.classList.remove('bd-is-clipped');
- >>>>>>> Add show code
- });
- });
- }
- new Clipboard('.bd-copy', {
- target: function target(trigger) {
- return trigger.previousSibling;
- }
- });
- // Functions
- function getAll(selector) {
- return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
- }
- var latestKnownScrollY = 0;
- var ticking = false;
- function scrollUpdate() {
- ticking = false;
- // do stuff
- }
- function onScroll() {
- latestKnownScrollY = window.scrollY;
- scrollRequestTick();
- }
- function scrollRequestTick() {
- if (!ticking) {
- requestAnimationFrame(scrollUpdate);
- }
- ticking = true;
- }
- window.addEventListener('scroll', onScroll, false);
- });
|