PDJ Brandbox

hotspot 

<a class="hotspot" style="top: 80%; left: 30%;">
    <span class="hotspot__trigger">
        <span class="hotspot__trigger__inner">
            <span class="hotspot__symbol">
                <span class="icon-plus">
                    <span class="icon-plus__inner"></span>
                </span>
            </span>
        </span>
    </span>

    <span class="hotspot__bubble">
        <span class="hotspot__visual">
            <picture class="visual">
                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                <img data-sizes="auto" data-src="[object Object]" class="lazyload" alt="">
            </picture>

        </span>

        <span class="hotspot__content">
            <span class="hotspot__close">
                <span class="icon-cross">
                    <span class="icon-cross__inner"></span>
                </span>
            </span>
            <span class="hotspot__title p--2">Lorem ipsum dolor sit amet.</span>
            <span class="hotspot__description caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem.</span>
        </span>
    </span>
</a>
 
<a class="hotspot" style="top: {{ position.top }}; left: {{ position.left }};">
  <span class="hotspot__trigger">
    <span class="hotspot__trigger__inner">
      <span class="hotspot__symbol">
        {{> @icon-plus }}
      </span>
    </span>
  </span>

  <span class="hotspot__bubble">
    <span class="hotspot__visual">
      {{render '@visual' visual merge=true }}
    </span>

    <span class="hotspot__content">
      <span class="hotspot__close">
        {{> @icon-cross }}
      </span>
      <span class="hotspot__title p--2">{{ title }}</span>
      <span class="hotspot__description caption">{{ description }}</span>
    </span>
  </span>
</a>
 
position:
  top: 80%
  left: 30%
visual:
  src:
    mobile: false
    desktop: /graphics/video-player.jpg
  alt: ''
title: Lorem ipsum dolor sit amet.
description: >-
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem.
  • Content: 
    /*
* Tippy: https://atomiks.github.io/tippyjs/
*/

const HOTSPOT = ((w, d, tippy, undefined) => {

  'use strict';

  const selectors = {
    theHotspot: '.hotspot',
    theContent: '.hotspot__bubble',
    theCloser: '.hotspot__close',
  };

  const els = {};

  const init = () => {
    if (!tippy) { console.error('Tippy plugin is not loaded, but needed voor tooltipping!'); return; }

    els.theTippies = tippy(selectors.theHotspot, {
      trigger: 'click',
      interactive: true,
      offset: [16, 10],
      allowHTML: true,
      content: (ref) => {
        const theContent = ref.querySelector(selectors.theContent);

        return theContent ? theContent.innerHTML : '';
      },
      onShown: (tippy) => {
        const theCloser = tippy.popper.querySelector(selectors.theCloser);

        tippy.popper.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
        });

        theCloser.addEventListener('click', () => {
          tippy.hide();
        });
      },
    });
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document, window.tippy || null);
  • URL: /components/raw/hotspot/hotspot.js
  • Filesystem Path: ../src/03_molecules/hotspot/hotspot.js
  • Size: 1.1 KB
  • Content: 
    [data-tippy-root] {
  @media (max-width: 599px) {
    transform: none !important;
    top: auto !important;
    bottom: 90% !important;
  }
}

.tippy-box {
  max-width: calc(100% - var(--gap--2)) !important;
  margin-right: auto;
  margin-left: auto;
  padding: 2px;
  color: inherit;
  border-radius: 0;
  background-color: var(--color--neutrals-0);
  box-shadow: 0 2px 34px rgba(#000, .15);

  @media (min-width: 600px) {
    max-width: 344px !important;
  }
}

.tippy-content {
  padding: 0;
}

.tippy-arrow {
  display: none;
  color: var(--color--neutrals-0);

  @media (min-width: 600px) {
    display: block;
  }
}

.hotspot {
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  color: inherit;
  text-decoration: none;

  &:hover {
    color: inherit;
    text-decoration: none;
  }
}

.hotspot__trigger {
  transition: transform 250ms;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;

  &:active {
    transform: scale(.9);
  }

  .hotspot[aria-expanded='true'] & {
    transform: scale(.9) rotate(45deg);
  }
}

.hotspot__trigger:before {
  transition: transform 250ms;
  animation: pulse 2s infinite;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color--neutrals-0);
  opacity: .2;
  content: '';
  backface-visibility: hidden;
}

.hotspot__trigger:hover:before,
.hotspot__trigger:active:before,
.hotspot[aria-expanded='true'] .hotspot__trigger:before {
  transform: scale(1);
  animation: initial;
}

.hotspot__trigger__inner {
  transition: transform 250ms;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color--neutrals-0);

  .hotspot__trigger:hover &,
  .hotspot[aria-expanded='true'] & {
    transform: scale(1.1);
  }
}

.hotspot__symbol {
  display: block;
  width: 10px;
  height: 10px;
}

.hotspot__bubble {
  display: none;
  user-select: none;
}

.hotspot__visual {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: (206 / 344) * 100%;
}

.hotspot__content {
  position: relative;
  display: block;
  padding: var(--gap--8) var(--gap--6);
}

.hotspot__close {
  position: absolute;
  top: var(--gap--3);
  right: var(--gap--3);
  display: block;
  width: 12px;
}

.hotspot__title {
  display: block;
  font-weight: 700;
}

.hotspot__description {
  display: block;
  margin-top: var(--gap--2);
}

@keyframes pulse {
  0% {
    transform: scale(.9);
  }

  50% {
    transform: scale(1.1);
    opacity: .3;
  }

  100% {
    transform: scale(.9);
  }
}
  • URL: /components/raw/hotspot/hotspot.scss
  • Filesystem Path: ../src/03_molecules/hotspot/hotspot.scss
  • Size: 2.7 KB

No notes defined.