DEV Community: ktr92

VanillaJS Lazy Load images/video/embed/youtube

ktr92 — Mon, 27 May 2024 18:18:59 +0000

DEMO - https://codepen.io/ktr92/pen/qBGqRgZ

html example

<img data-src='https://placehold.co/600x400'>
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/NpEaa2P7qZI?si=4Rq1E37zRobyhGRI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

function lazyLoadSrc(selector) {
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      const source = entry.target
      if (entry.intersectionRatio > 0) {
        if (!source.getAttribute('src')) {
            source.setAttribute('src', source.dataset.src)
            observer.unobserve(source)
        }
      }
    })
  }
  const target = document.querySelectorAll(selector)
  const options = {
    threshold: 0.4
  }
  let obs = new IntersectionObserver(callback, options)
  target.forEach(item => {
    obs.observe(item)
  }) 
}

// usage
document.addEventListener('DOMContentLoaded', function() {
  lazyLoadSrc('img');
  lazyLoadSrc('iframe');
})

[Vue3 Tailwind] auth form

ktr92 — Tue, 14 May 2024 08:09:31 +0000

validation
routes protecting
status messages
server-load imitation

https://auth-app-nine-silk.vercel.app/

[html js css] Vanilla JS slider with responsivity, swipe, arrows, dots

ktr92 — Sat, 02 Mar 2024 11:13:55 +0000

demo - https://codepen.io/ktr92/pen/gOybmwO

HTML

<div class="myslider" data-myslider-container='sliderID'>
      <div class="myslider__arrows"  data-myslider-arrows='sliderID'>
        <div class="myslider__arrow myslider__left" data-myslider-prev='sliderID'>prev</div>
        <div class="myslider__arrow myslider__right" data-myslider-next='sliderID'>next</div>
      </div>
      <div class="myslider__slider" data-myslider-slider='sliderID'>
        <div class="myslider__slide" data-myslider-slide='sliderID'>1</div>
        <div class="myslider__slide" data-myslider-slide='sliderID'>2</div>
        <div class="myslider__slide" data-myslider-slide='sliderID'>3</div>
        <div class="myslider__slide" data-myslider-slide='sliderID'>4</div>
        <div class="myslider__slide" data-myslider-slide='sliderID'>5</div>
        <div class="myslider__slide" data-myslider-slide='sliderID'>6</div>
        <div class="myslider__slide" data-myslider-slide='sliderID'>7</div>
        <div class="myslider__slide" data-myslider-slide='sliderID'>8</div>
        <div class="myslider__slide" data-myslider-slide='sliderID'>9</div>     
      </div>
      <div class="myslider__dots" data-myslider-dots='sliderID'></div>
    </div>

CSS

[data-myslider-container] {
  width: 100%;
  overflow: hidden;
  position: relative;
}
[data-myslider-slider] {
  display: flex;
  position: relative;
  transition: left 0.5s;
  overflow-x: hidden;
  scroll-behavior: smooth;
  left: 0;
}

class Myslider {
  constructor(selector, settings) {
    this.settings = settings
    this.slidesVisible = settings.slides ?? 1
    this.screen = window.screen.width
    this.$el = document.querySelector(selector) 
    this.sliderID = this.$el.dataset.mysliderContainer
    this.$slider = this.$el.querySelector(`[data-myslider-slider='${this.sliderID}']`)
    this.$next = document.querySelector(`[data-myslider-next='${this.sliderID}']`)
    this.$prev = document.querySelector(`[data-myslider-prev='${this.sliderID}']`)
    this.$dots = document.querySelector(`[data-myslider-dots='${this.sliderID}']`)
    this.dotsItems = null
    this.activeId = 0
    this.slideWIdth =  this.$el.offsetWidth / this.slidesVisible
    this.slides = this.$slider.querySelectorAll(`[data-myslider-slide='${this.sliderID}']`)
    this.slidesCount =  this.slides.length
    this.sectionCount = Math.ceil(this.slidesCount / this.slidesVisible)
    this.position = this.$slider.style.left
    this.responsive = settings.responsive ?? null
    this.sliderInit()
  }


  sliderInit() {
    this.sizeInit()
    if (this.$next && this.$prev) {
      this.arrowsInit()
    }
    if (this.$dots) {
      this.dotsInit()
    }
    if (this.responsive && this.responsive.length > 0) {
      this.responsive.unshift({width: this.screen, slides: this.settings.slides ?? 1})
    }
    this.initSwipe()

    window.addEventListener('resize', () => {
      this.activateSlide(0)
      this.sizeInit()
    })
  }

  arrowsInit() {
    this.$next.addEventListener('click', () => {
      this.activateSlide(this.activeId + 1)
    });

    this.$prev.addEventListener('click', () => {
      this.activateSlide(this.activeId - 1)
    });
  }

  sizeInit() {
    if (this.responsive && this.responsive.length) {
      this.responsive.forEach((size, index) => {
        if (size.width > window.innerWidth) {
          this.screen = size.width
          this.slidesVisible = size.slides
        }
      })
    }

    this.slideWIdth = this.$el.offsetWidth / this.slidesVisible

    let index = 0
    this.$slider.style.width = this.slideWIdth * this.slidesCount + 'px'
    this.slides.forEach($slide => {
      $slide.style.width =  this.slideWIdth + 'px'
      $slide.dataset.mysliderid = index
      index++
    })
  }

  dotsInit() {

    for (let i = 0; i < this.sectionCount; i++) {
      this.$dots.insertAdjacentHTML('beforeend', `<div class="myslider__dots__button" data-mysliderdot="${i * (this.slidesVisible)}" data-myslider-dotid='${this.sliderID}'></div>`)
    }
    const dots = document.querySelectorAll(`[data-myslider-dotid='${this.sliderID}']`)
    dots[0].classList.add('active')

    dots.forEach(el => {
      el.addEventListener('click', (e) => {
        const id = +e.target.dataset.mysliderdot
        if (id < this.slidesCount - (this.slidesVisible - 1)) {
          this.activateSlide(id)

        } else {
          this.activateSlide(this.slidesCount - this.slidesVisible)

        }
      })
    })

    this.dotsItems = dots
  }

  activateDot(dots, id) {
    const activeDot = document.querySelector(`[data-mysliderdot="${id}"][data-myslider-dotid='${this.sliderID}']`)
    if (activeDot) {
      dots.forEach(dot => {
        dot.classList.remove('active')
      })
      activeDot.classList.add('active')
    }
  } 



  activateSlide(n) {
    if (n < 0) {
      this.position = this.slideWIdth * (this.slidesCount - this.slidesVisible)
      this.$slider.style.left = -this.position + 'px'
      this.activeId = this.slidesCount - this.slidesVisible
     } else {
      if (n < this.slidesCount - (this.slidesVisible - 1)) {
        this.position = this.slideWIdth * n
        this.$slider.style.left = -this.position + 'px'
        this.activeId = n
       } else {
        this.$slider.style.left = 0
        this.activeId = 0
       }
     }

     this.activateDot(this.dotsItems, this.activeId)

  }

  initSwipe() {
       let initialX = null;
       let initialY = null;    

       const startTouch = (e) => {
         initialX = e.touches[0].clientX;
         initialY = e.touches[0].clientY;
       };     

       const moveTouch = (e) => {
         if (initialX === null) {
           return;
         } 

         if (initialY === null) {
           return;
         }  

         let currentX = e.touches[0].clientX;
         let currentY = e.touches[0].clientY;    
         let diffX = initialX - currentX;
         let diffY = initialY - currentY;

         if (Math.abs(diffX) > Math.abs(diffY)) {
           if (diffX > 0) {
            this.activateSlide(this.activeId + 1)
           } else {
            this.activateSlide(this.activeId - 1)
           }  
         } 

         initialX = null;
         initialY = null;

         e.preventDefault();
       };

       this.$slider.addEventListener("touchstart", startTouch, false);
       this.$slider.addEventListener("touchmove", moveTouch, false);
  }

}


})

USAGE

const slider = new Myslider("[data-myslider-container='sliderID']", {
  slides: 3,
  responsive: [
    {
      width: 992,
      slides: 2
    },
    {
      width: 480,
      slides: 1
    }
  ]

[html js] Tabs content toggle

ktr92 — Fri, 09 Feb 2024 11:36:10 +0000

<div data-tabs="tabs">
    <div class="tabs__nav" data-headertabs="tabs_id">
        <ul>
            <li class="active">1</li>
            <li class="">2</li>
        </ul>
    </div>
    <div class="tabs__wrapper" data-tabswrapper="tabs_id">
        <div class="tabs__content active" data-contenttabs="tabs_id">
            1
        </div>
        <div class="tabs__content " data-contenttabs="tabs_id">
            2
        </div>
    </div>
</div>

document.querySelector('[data-headertabs]').addEventListener('click', function(e) {
    const el = e.target
    if (el.tagName === 'LI') {
        if (!el.classList.contains('active')) {
            let index = Array.from(el.parentNode.children).indexOf(el)

            document.querySelectorAll('[data-headertabs] li').forEach(item => {
                item.classList.remove('active')
            })
            el.classList.add('active')

            document.querySelectorAll('[data-contenttabs]').forEach(item => {
                item.classList.remove('active')
            })
            const items = Array.from(document.querySelector('[data-tabswrapper]').children)
            items[index].classList.add('active')
        }
    }
})

[data-contenttabs] {
  display: none; 
}

[data-contenttabs].active {
  display: block; 
}

[jquery] The most simple universal accordion

ktr92 — Tue, 05 Sep 2023 09:06:17 +0000

DEMO - https://codepen.io/ktr92/pen/zYyoYeW

HTML

<div class='accordion_title' data-accordiontitle='accordion1'>
  Title 1
</div>
<div class='accordion_content' data-accordioncontent='accordion1'>
  Content 1
</div>

<div class='accordion_title' data-accordiontitle='accordion2'>
  Title 2
</div>
<div class='accordion_content' data-accordioncontent='accordion2'>
  Content 2
</div>

CSS

[data-accordioncontent] {
  display: none;
}

[data-accordiontitle] {
  position: relative;
  display: block; 
  cursor: pointer;
}
[data-accordiontitle]:after {
  content: "+";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  font-size: 20px;
  font-weight: 700;
  margin-right: 5px;
  background-color: #c9c9c9;
  border-radius: 50%;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
[data-accordiontitle].active:after {
  content: "-";
}

[data-accordioncontent] {
  padding: 20px;
}

$("[data-accordiontitle]").on("click", function () {
  let accordion = $(this).data("accordiontitle");
  $(`[data-accordioncontent="${accordion}"`).slideToggle();
  $(this).toggleClass("active");
});

[vue3 ts tailwind] Simple reusable Button component example

ktr92 — Tue, 09 May 2023 08:19:08 +0000

/components/UI/Button.vue

<template>
  <button
    @click.prevent="onClick"
    :disabled="props.disabled"
    :class="classes"
    class="
      text-white
      bg-green
      hover:bg-blue-800
      focus:ring-4
      focus:outline-none
      font-medium
      px-5
      py-4
      text-md text-center
      cursor-pointer
      whitespace-nowrap
    "
  >
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "md",
  },
  liquid: {
    type: Boolean,
    default: false,
  },
  rounded: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(["onclick"])

enum ButtonSizes {
  "xs" = "px-[10px] py-[6px]",
  "sm" = "px-[15px] py-[10px]",
  "md" = "py-3 px-3",
  "lg" = "px-12 py-3",
}

enum TextSizes {
  "xs" = "text-xs",
  "sm" = "text-sm",
  "md" = "text-md",
  "lg" = "text-lg",
}

const paddingClasses = computed(() => {
  return ButtonSizes[props.size as keyof typeof ButtonSizes]
})

const textClass = computed(() => {
  return TextSizes[props.size as keyof typeof ButtonSizes]
})
const widthClass = computed(() => {
  return props.liquid ? "w-full" : "w-min"
})
const roundedClass = computed(() => {
  return props.rounded ? "rounded-md" : ""
})

const classes = computed(
  () =>
    `${paddingClasses.value} ${textClass.value} ${widthClass.value} ${roundedClass.value}`
)

const onClick = (event: Event) => {
  emits("onclick", event)
}
</script>

Usage:

<UIButton
  @onclick="$emit('dosomething')"
  size="lg"
  :liquid="false"
  :rounded="true"
 >
   Do something
</UIButton>

[vue3] Why is the length of a reactive Array always undefined?

ktr92 — Sun, 07 May 2023 18:32:21 +0000

I once spent a lot of time due to my superficial knowledge of Vue reactivity. I saw it very clearly and simply, but I never really thought about how it works.

For example, we have an empty array of strings that will be filled after user actions.

const inputData = ref<string[]>([])

You'll always use ref() for primitives, but ref() is good for objects that need to be reassigned, like an array.

After the user's action and filling the array, we need to show him some information in the template, but before that it was hidden. So we add a computed property to keep track of the length of the array.

const inputLength = computed(() => {
  return inputData.value.length
})

<template v-if="inputLength ">
 some information
</template>

Problem:
At first glance this seems correct (to me), but it doesn't work because since we're using ref, our inputData is not an array of strings, but a ref object that has one property value. And inputData.value is also not an array of strings, but a proxy object.
So our inputLength computed property is always undefined.
For a long time I could not understand what was wrong here.

All we need to do is use Object.keys and get the number of keys of the proxy object.

Solution:

const inputLength = computed(() => {
  return Object.keys(inputData.value).length
})

[html scss] Reusable SCSS mixin for screen-scalable responsive design

ktr92 — Fri, 28 Apr 2023 20:13:05 +0000

There is a design in Figma (or Photoshop) with 3 layouts for each page (desktop 1920, tablet 834 and mobile 320).
We have to do pixel-perfect HTML coding by represented layouts for respective screen sizes, and scalable responsive design for intermediate screen sizes, which keep the design while next layout breakpoint.
That is, our result must be the same as our design on 1920px, and keep this view until 834px reducing proportionally.

This task can be done in several ways, but I want to get the styles directly from Figma into px without manual conversions. But screen-scaling design must be made on vw...

There is a solution. The idea is very simple. Really you don't have to ponder about scaling design. It might be solved by simple SCSS function which will be calculate scaling automatically.

First, we need to declare 3 functions for converting pixels measure to vw measure (for desktop, tablet, and mobile).

🔥 codepen https://codepen.io/ktr92/pen/gOBxbZb

SCSS:

@function get_vw_large($value) {
    $vw-viewport-large: 1920; // there is design breakpoint for desktop screen view
    $vw-context: $vw-viewport-large * 0.01 * 1px;
    @return $value/ $vw-context * 1vw;
    @return $value;
}

@function get_vw_medium($value) {
    $vw-viewport-medium: 834; // there is design breakpoint for tablet screen view
    $vw-context: $vw-viewport-medium * 0.01 * 1px;
    @return $value/ $vw-context * 1vw;
    @return $value;
}

@function get_vw_small($value) {
    $vw-viewport-small: 834; // there is design breakpoint for mobile screen view
    $vw-context: $vw-viewport-small * 0.01 * 1px;
    @return $value/ $vw-context * 1vw;
    @return $value;
}

Then we can use it!

Throughout the project we need wrap all PIXEL-based styles on a function.
For example, we have a block with the following styles (from Figma desing):

CSS:

.block{ 
  font-size: 18px;
  line-height: 23px;
  margin-bottom: 2px;
  padding: 20px;
}

It must be rewritten in the following way:

.block {
  font-size: get_vw_large(28px);
  line-height: get_vw_large(33px);
  margin-bottom: get_vw_large(42px);
  padding: get_vw_large(20px);
}

So it will be converted to vw value and we will see the following styles in a browser:

    font-size: 0.9375vw;
    line-height: 1.19792vw;
    margin-bottom: 0.10417vw;
    padding: 1.0416666667vw;

🔥We can use any breakpoints for @media queries, but our result will be perfect on the each design breakpoint (1920, 834, 320). For tablet breakpoint it must be rewritten in the following way:

@media (max-width: 1023px) {
  .block {
    font-size: get_vw_medium(18px);
    line-height: get_vw_medium(23px);
    margin-bottom: get_vw_medium(20px);
    padding: get_vw_medium(20px);
  }
}

For the mobile breakpoint it has the following styles (from Figma desing):

.block{ 
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 20px;
}

It must be rewritten in the following way:


@media (max-width: 480px) {
  .block {
    font-size: get_vw_small(13px);
    line-height: get_vw_small(18px);
    margin-bottom: get_vw_small(20px);
    padding: get_vw_small(20px);
  }
}

[html css jquery] Mobile menu + button change from burger to close + close on backdrop click

ktr92 — Fri, 28 Apr 2023 14:00:38 +0000

Here is the basis for creating a menu with a hamburger button that changes to close when the menu is open. In addition, there is a background on top of the content. You can close the menu by clicking on the background.

codepen example: https://codepen.io/ktr92/pen/gOBRyKO

HTML:

<div class="jsbackdrop"></div>

<div class="container">
  <header class="header">
    <div class="flex items-center space-between w-full">
      <div class="headercontent">HEADER</div>
      <a href="#" class="menubtn" data-menutoggle="mainmenu">
        <span></span>
        <span></span>
        <span></span>
      </a>
    </div>

    <div class="mainmenu" data-menu="mainmenu">
      <div class="mainmenu__wrapper">
        <div class="mainmenu__items">
          <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
            <li><a href="#">Page 5</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>
  <main>
    content body
  </main>
</div>

CSS:

[data-menutoggle] {
  display: block;
  margin-left: 15px;
}

[data-menutoggle] span {
  width: 32px;
  height: 3px;
  margin-bottom: 5px;
  display: block;
  background: #324064;
  transform-origin: 4px 0px;
  transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;

  &:last-child {
    margin-bottom: 0;
  }
}

[data-menutoggle] span:first-child {
  transform-origin: 0% 0%;
}

[data-menutoggle] span:last-child {
  transform-origin: 0% 100%;
}

[data-menutoggle].active span:first-child {
  opacity: 1;
  transform: translate(0, 18px) rotate(-45deg);
}

[data-menutoggle].active span:last-child {
  transform: translate(0, -21px) rotate(45deg);
}

[data-menutoggle].active span:nth-child(2) {
  opacity: 0;
}
[data-menu] {
  display: none;
}
[data-menu].active {
  display: block;
}

.jsbackdrop {
  background: rgba(52, 60, 75, 0.5);
  display: none;
  position: fixed;
  z-index: 9;
  height: 100%;
  min-height: 100vh;
  left: 0;
  top: 0;
  width: 100%;
}

.jsbackdrop.active {
  display: block;
}
.mainmenu {
  width: 100%;
  position: absolute;
  background: #fff;
  z-index: 99;
  left: 0;
  padding: 10px;
  top: 100%;
}
.mainmenu li {
  list-style: none;
  margin-bottom: 5px;
}

JS[jquery]:

$("[data-menutoggle]").on("click", function (e) {
  e.preventDefault();
  let menu = $(this).data("menutoggle");
  $(`[data-menu=${menu}]`).toggleClass("active");
  $(this).toggleClass("active");
  $(".jsbackdrop").toggleClass("active");
});
$(".jsbackdrop").on("click", function (e) {
  $(this).removeClass("active");
  $("[data-menu]").removeClass("active");
  $("[data-menutoggle]").removeClass("active");
});

[html css js] Show/hide password input value

ktr92 — Wed, 26 Apr 2023 20:17:46 +0000

Codepen demo: https://codepen.io/ktr92/pen/vYVmbam

Solution example:

HTML

<div class="inputpassword" data-toggleblock="password">
  <input type="password">
  <img src="https://ktr92.github.io/nft/dist/img/Invisible.svg" alt="" data-togglebutton="password" class="password_invisible">
  <img src="https://ktr92.github.io/nft/dist/img/Eye2.svg" alt="" data-togglebutton="password" class="password_visible">
</div>

CSS

.inputpassword {
  position: relative;
  width: 320px;
}

.password_visible {
  display: none;
}

.inputpassword.active .password_invisible {
  display: none;
}

.inputpassword.active .password_visible {
  display: block;
}

.inputpassword img {
  position: absolute;
  right: 0;
  top: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

input {
  background: #f3f5f8;
  padding: 20px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: none;
  border-bottom: 4px solid #d9dde3;
  display: block;
  width: 100%;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  resize: none;
  color: #212531;
}

document.querySelectorAll('[data-togglebutton="password"]').forEach((item) => {
  item.addEventListener("click", (event) => {
    let inp = item.closest("[data-toggleblock]").querySelector("input");
    if (inp.type === "password") {
      inp.type = "text";
      item.closest("[data-toggleblock]").classList.add("active");
    } else {
      inp.type = "password";
      item.closest("[data-toggleblock]").classList.remove("active");
    }
  });
});

[html css jquery] Reusable script for dropdown elements

ktr92 — Wed, 26 Apr 2023 20:04:04 +0000

Here is reusable jquery script for dropdown elements. You can keep every dropdown open at the same time or hide all other dropdowns when you open one.

You can add a new dropdown element declaratively via html. You need to add the attribute data-toggleclick="some-id" for a button and data-toggleblock="some-id" for a dropdown block.

codepen demo: https://codepen.io/ktr92/pen/LYgyqZE

Solution example

HTML

<div>
  <div class="wrapper">
    <button data-toggleclick="block1">Open block 1</button>
    <div data-toggleblock="block1">
      Block 1 
    </div>
  </div>
  <div class="wrapper">
    <button data-toggleclick="block2" >Open block 2</button>
    <div data-toggleblock="block2">
      Block 2
    </div>
  </div>
</div>

CSS

[data-toggleblock] {
  display: none;
}

[data-toggleblock].active {
  display: block;
}

.container {
  width: 320px;
}

.wrapper {
  height: 100px;
  position: relative;
  width: 320px;
}
[data-toggleblock] {
  padding: 10px;
  border: 1px solid #000;
  margin-bottom: 30px;
  position: absolute;
  top: 50px;
  width: 100%;
  z-index: 1;
}
[data-toggleclick] {
  background: #ccc;
  padding: 10px 10px;
  border: none;
  display: block;
  width: 100%;
  font-size: 20px;
}

JS (jquery)

// show element by click on button 
$('[data-toggleclick]').each(function() {
  $(this).on('click', function(e) {
        $(this).toggleClass('active')
        e.preventDefault()
        let dropdown = $(this).data('toggleclick')
        // if you want to hide all other dropdowns
        // $('[data-toggleblock].active').not($(`[data-toggle=${dropdown}]`)).removeClass('active')
        // $('[data-toggleclick].active').not($(`[data-toggleclick=${dropdown}]`)).removeClass('active')
        $(`[data-toggleblock=${dropdown}]`).toggleClass('active')
  })
})

[html css jquery] How to hide element by click outside

ktr92 — Wed, 26 Apr 2023 19:10:52 +0000

There is an element which we need to close by click outside of it. We can do it using simple reusable function.

codepen demo: https://codepen.io/ktr92/pen/LYgyGaY

Solution example

HTML

<div>
  <button data-toggleclick="block1">Open block 1</button>
  <div data-toggleblock="block1" class="active">
     Click outside to close
  </div>
  <div>
    <br><br>
  <button data-toggleclick="block2" >Open block 2</button>
    <div data-toggleblock="block2"  class="active">
      Click outside to close
    </div>
  </div>
</div>

CSS

[data-toggleblock] {
  display: none;
}

[data-toggleblock].active {
  display: block;
}

JS (jquery)
We need a second argument (our element's open button) to prevent the element from opening and closing at the same time.

function closeByClickOutside(element, button, callback) {
    $(document).click(function(event) {
        if (!$(event.target).closest(`${element},${button}`).length) {
            $(button).removeClass('active')
            $(element).removeClass('active')
            // or  
            //$(element).hide()
        }
    });

    $(document).keyup(function(e) {
        if (e.key === "Escape") { // escape key maps to keycode `27`
            $(button).removeClass('active')
            $(element).removeClass('active')
            // or  
            //$(element).hide()
        }
    });

    if (callback instanceof Function) { callback(); }
  }

// usage
closeByClickOutside('[block_selector]', '[button_selector]')