/ Gists / JavaScript

Gists - JavaScript

On gists

Simple reveal

JavaScript

reveal.js #

function reveal() {
        var reveals = document.querySelectorAll(".reveal");
        for (var i = 0; i < reveals.length; i++) {
          var windowHeight = window.innerHeight;
          var elementTop = reveals[i].getBoundingClientRect().top;
          var elementVisible = 150;
          if (elementTop < windowHeight - elementVisible) {
            reveals[i].classList.add("active");
          } else {
            reveals[i].classList.remove("active");
          }
        }
      }
      window.addEventListener("scroll", reveal);
On gists

Scroll header - IntersectionObserver by KP

JavaScript

demo.html #

  <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            .primary-header {
                --_bg: hsl(0 0% 100%);
                --_logo-color: hsl(0, 0%, 5%);
                --_nav-link-color: hsl(37, 82%, 20%);

                padding: 1rem;
                background: var(--_bg);

                position: sticky;
                top: 0;
            }

            /* for demo, probably not the best idea */
            .primary-header,
            .primary-header * {
                transition: 500ms;
            }

            .primary-header.sticking {
                --_bg: #333;
                --_logo-color: #fff;
                --_nav-link-color: #f00;
            }

            .primary-header__inner {
                display: flex;
                justify-content: space-between;
            }

            .primary-header a {
                color: var(--_nav-link-color);
            }

            .primary-header a:hover,
            .primary-header a:focus {
                opacity: 0.7;
            }

            .logo {
                color: var(--_logo-color);
            }

            .nav-list {
                list-style: none;
                margin: 0;
                padding: 0;

                display: flex;
                gap: clamp(0.5rem, 5vw, 2rem);
            }

            :root {
                /* either --dark-mode or --no-dark-mode */
                --color-scheme: var(--dark-mode);

                --font-family: system-ui;

                --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
                --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
                --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
                --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
                --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
                --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
                --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

                --clr-primary-300: hsl(219, 76%, 55%);
                --clr-primary-400: hsl(219, 76%, 40%);
                --clr-primary-500: hsl(219, 76%, 25%);
                --clr-secondary-300: hsl(269, 75%, 55%);
                --clr-secondary-400: hsl(269, 75%, 40%);
                --clr-secondary-500: hsl(269, 75%, 25%);
                --clr-accent-300: hsl(358, 72%, 65%);
                --clr-accent-400: hsl(358, 72%, 50%);
                --clr-accent-500: hsl(358, 72%, 35%);

                /* settings */
                --no-dark-mode: light;
                --dark-mode: dark light;
            }

            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }

            body {
                margin: 0;
                font-family: var(--font-family);
                font-size: var(--fs-400);
                line-height: 1.6;
            }

            .wrapper {
                width: min(65rem, 100% - 2rem);
                margin-inline: auto;
            }

            .site-title {
                font-size: var(--fs-900);
                line-height: 1.05;
                text-transform: uppercase;
            }

            .section-title {
                font-size: var(--fs-800);
                line-height: 1.1;
            }

            .visually-hidden {
                clip: rect(0 0 0 0);
                clip-path: inset(50%);
                height: 1px;
                overflow: hidden;
                position: absolute;
                white-space: nowrap;
                width: 1px;
            }
        </style>
    </head>
    <body>
        <header class="primary-header">
            <div class="wrapper">
                <div class="primary-header__inner">
                    <span class="logo">LOGO</span>
                    <ul class="nav-list">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </header>

        <main>
            <div class="wrapper">
                <h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa <strong>strong</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede <a class="external ext" href="#">link</a>
                    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
                </p>
                <h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit</h1>
                <h2>Aenean commodo ligula eget dolor aenean massa</h2>
                <img
                    src="/image-2.jpg"
                    alt="consectetuer adipiscing
          elit"
                />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                <h2>Aenean commodo ligula eget dolor aenean massa</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                <ul>
                    <li>Lorem ipsum dolor sit amet consectetuer.</li>
                    <li>Aenean commodo ligula eget dolor.</li>
                    <li>Aenean massa cum sociis natoque penatibus.</li>
                </ul>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                <form action="#" method="post">
                    <fieldset>
                        <label for="name">Name:</label>
                        <input
                            type="text"
                            id="name"
                            placeholder="Enter your
          full name"
                        />
                        <label for="email">Email:</label>
                        <input
                            type="email"
                            id="email"
                            placeholder="Enter
          your email address"
                        />
                        <label for="message">Message:</label>
                        <textarea
                            id="message"
                            placeholder="What's on your
          mind?"
                        ></textarea>
                        <input type="submit" value="Send message" />
                    </fieldset>
                </form>
                <img
                    src="/image-3.jpg"
                    alt="consectetuer adipiscing
          elit"
                />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                <table class="data">
                    <tr>
                        <th>Entry Header 1</th>
                        <th>Entry Header 2</th>
                        <th>Entry Header 3</th>
                        <th>Entry Header 4</th>
                    </tr>
                    <tr>
                        <td>Entry First Line 1</td>
                        <td>Entry First Line 2</td>
                        <td>Entry First Line 3</td>
                        <td>Entry First Line 4</td>
                    </tr>
                    <tr>
                        <td>Entry Line 1</td>
                        <td>Entry Line 2</td>
                        <td>Entry Line 3</td>
                        <td>Entry Line 4</td>
                    </tr>
                    <tr>
                        <td>Entry Last Line 1</td>
                        <td>Entry Last Line 2</td>
                        <td>Entry Last Line 3</td>
                        <td>Entry Last Line 4</td>
                    </tr>
                </table>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </div>
        </main>

        <script>
            // For this tutorial on YT:
            // https://youtu.be/V-CBdlfCPic

            const primaryHeader = document.querySelector('.primary-header');
            const scrollWatcher = document.createElement('div');

            scrollWatcher.setAttribute('data-scroll-watcher', '');
            primaryHeader.before(scrollWatcher);

            const navObserver = new IntersectionObserver(
                entries => {
                    primaryHeader.classList.toggle('sticking', !entries[0].isIntersecting);
                },
                { rootMargin: '500px 0px 0px 0px' }
            );

            navObserver.observe(scrollWatcher);
        </script>
    </body>
</html>
On gists

Prevent Body Scrolling on iOS

JavaScript CSS CSS trick

ios-prevent-scroll-fix.js #

const $body = document.querySelector('body');
let scrollPosition = 0;

export default {
  enable() {
    scrollPosition = window.pageYOffset;
    $body.style.overflow = 'hidden';
    $body.style.position = 'fixed';
    $body.style.top = `-${scrollPosition}px`;
    $body.style.width = '100%';
  },
  disable() {
    $body.style.removeProperty('overflow');
    $body.style.removeProperty('position');
    $body.style.removeProperty('top');
    $body.style.removeProperty('width');
    window.scrollTo(0, scrollPosition);
  }
};
On gists

Infinity loading

JavaScript ES 6

Infinity loading.js #

/* OLD */
let currentPage = 1;
let totalPages = 5;

window.addEventListener('scroll', function() {
  // Check if the user has reached the bottom of the page
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // Check if there are more pages to load
    if (currentPage < totalPages) {
      // Fetch the data
      await fetch('url')
      currentPage++
    }
  }
});


/* NEW */
/* https://javascript.plainenglish.io/you-dont-need-using-scroll-event-to-load-data-infinite-b893c46a84ea */
let isVisible = false;
// the element visible / unvisble will trigger the function.
const observer = new IntersectionObserver(entries => {
  isVisible = entries[0].isIntersecting
  if (entries[0].isIntersecting) {
      // load new content
      loadData().then(() => {
         setTimeout(() => {
           // if the loading element still visible means the list height is less than container
           // so try to load more
           isVisible && loadData()
         }, 100)
      })
   }
});

observer.observe(document.querySelector('.more')
On gists

Fast images via API fetch

JavaScript

fetch.js #

fetch("https://dog.ceo/api/breeds/image/random/10")
 .then((response) => response.json())
 .then((data) => data.message)
 .then(arrayOfLinks => console.log(arrayOfLinks))
On gists

No need remove event listener

JavaScript

examples.js #

// https://javascript.plainenglish.io/you-dont-need-removeeventlistener-to-remove-dom-event-listeners-12db93cd8bf6

// 1. once

document.querySelector('#btn').addEventListener('click', () => {
  console.log('clicked');
}, {once: true});


// 2. AbortController
const controller = new AbortController();

document.querySelector('#btn').addEventListener('click', () => {
  console.log('clicked');
}, { signal: controller.signal });

// abort the listener!
controller.abort();


// or
const controller = new AbortController();
const { signal } = controller;

document.querySelector('#btn').addEventListener('click', () => {
  console.log('clicked');
}, { signal });

document.querySelector('#btn').addEventListener('mouseenter', () => {
  console.log('mouseenter');
}, { signal })

window.addEventListener('scroll', () => {
  console.log('scroll');
}, { signal })

// Remove all listeners at once:
controller.abort();


// 3. clone element
const button = document.querySelector('#btn');
button.replaceWith(button.cloneNode(true));
On gists

prevAll, nextAll in pure jS (jQuery replacement)

JavaScript JS oneliners ES 6

index.html #

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li id="selected">6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
On gists

unique selector in document (while)

JavaScript

unique.js #

/*!
 * getUniqueClass - v1.1 - 2/13/2010
 * http://benalman.com/projects/jquery-misc-plugins/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

// For when you really need a unique classname, (like when you're cloning a
// whole bunch of elements and don't exactly know where they're going, but need
// to do something with them after they've gotten there).

jQuery.getUniqueClass = function() {
  var name, i = 0;
  while ( jQuery('.' + (name = 'BA-' + (+new Date) + (i++))).length ) { };
  return name;
};



// 2 my

let s = '.test'
let name, i = ''
while (document.querySelector(name =  s + i)) {
  i += 0
  i++
}

document.write(name)
On gists

Google map (ES 6 / promise)

JavaScript ES 6 Vue.js

googlemap.js #

// Your personal API key.
// Get it here: https://console.cloud.google.com/google/maps-apis
const API_KEY = '***'
const CALLBACK_NAME = 'gmapsCallback'

let initialized = !!window.google
let resolveInitPromise
let rejectInitPromise
// This promise handles the initialization
// status of the google maps script.
const initPromise = new Promise((resolve, reject) => {
  resolveInitPromise = resolve
  rejectInitPromise = reject
})

export default function init() {
  // If Google Maps already is initialized
  // the `initPromise` should get resolved
  // eventually.
  if (initialized) return initPromise

  initialized = true
  // The callback function is called by
  // the Google Maps script if it is
  // successfully loaded.
  window[CALLBACK_NAME] = () => resolveInitPromise(window.google)

  // We inject a new script tag into
  // the `<head>` of our HTML to load
  // the Google Maps script.
  const script = document.createElement('script')
  script.async = true
  script.defer = true
  script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=${CALLBACK_NAME}`
  script.onerror = rejectInitPromise
  document.querySelector('head').appendChild(script)

  return initPromise
}
On gists

ResizeObserver.html

•
JavaScript

ResizeObserver.html #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            .container {
                display: flex;
                width: 100%; /* This can be changed via the buttons. */
                height: 200px;
                padding: 8px;
                background: #eaeaea;
            }

            /* Image Wrappers */
            .container > div {
                height: 200px;
                min-width: 100px;
                max-width: 200px;
                flex: 1;
                background-size: cover;
                background-repeat: no-repeat;
            }

            /* The rest is just setup. */

            #app {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-family: sans-serif;
                padding: 16px;
            }

            p {
                margin-top: 32px;
                text-align: center;
                color: #4c11f7;
                text-transform: uppercase;
                font-weight: 600;
                font-size: 14px;
                letter-spacing: 0.5px;
            }

            .change-size {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="container"></div>

            <p>Container Size</p>
            <div class="change-size">
                <button value="100%">100%</button>
                <button value="1400px">1400px</button>
                <button value="640px">640px</button>
                <button value="200px">200px</button>
            </div>
        </div>

        <script>
            /* Attach ResizeObserver to the container. */
            const resizeObserver = new ResizeObserver(onResize);
            resizeObserver.observe(document.querySelector('.container'));

            const IMAGE_MAX_WIDTH = 200;
            const IMAGE_MIN_WIDTH = 100;

            function onResize(entries) {
                const entry = entries[0];
                const container = entry.target;
                /* Calculate how many images can fit in the container. */
                const imagesNeeded = Math.ceil(entry.contentRect.width / IMAGE_MAX_WIDTH);
                let images = container.children;

                console.log(images);

                /* Remove images as needed. */
                while (images.length > imagesNeeded) {
                    images[images.length - 1].remove();
                }
                /* Add images as needed. */
                while (images.length < imagesNeeded) {
                    let seed = Math.random().toString().replace('.', '');
                    const newImage = document.createElement('div');
                    const imageUrl = `https://picsum.photos/seed/${seed}/${IMAGE_MAX_WIDTH}`;
                    newImage.style.backgroundImage = `url(${imageUrl})`;
                    container.append(newImage);
                }
            }

            /* The rest is for the container size buttons. */
            function changeSize(e) {
                if (!e.target.value) return;
                const container = document.querySelector('.container');
                container.style.width = e.target.value;
            }

            const changeSizeButtons = document.querySelector('.change-size');
            changeSizeButtons.addEventListener('click', changeSize);
        </script>
    </body>
</html>