Skip to content

Instantly share code, notes, and snippets.

@dzNavitski

dzNavitski/index.html

Created February 20, 2023 11:51
Show Gist options
  • Save dzNavitski/1f6262f7bfbc124ff8bb421ab748f1fb to your computer and use it in GitHub Desktop.
Save dzNavitski/1f6262f7bfbc124ff8bb421ab748f1fb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dzNavitski created this gist Feb 20, 2023.
    131 changes: 131 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,131 @@
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
    <script type="module">
    // @ts-ignore
    const events = [];

    const stopFn = rrweb.record({
    emit(event) {
    // save the event
    console.warn(event);
    events.push(event);
    },
    recordCanvas: true,
    recordCrossOriginIframes: true,
    inlineImages: true,
    });

    setTimeout(() => {
    // @ts-ignore
    stopFn();
    // @ts-ignore
    console.error(events);
    // @ts-ignore
    downloadJson(events);
    }, 5000);

    // @ts-ignore
    function downloadJson(myJson) {
    const sJson = JSON.stringify(myJson);
    const element = document.createElement('a');
    element.setAttribute(
    'href',
    'data:text/json;charset=UTF-8,' + encodeURIComponent(sJson)
    );
    element.setAttribute('download', 'rrweb.json');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click(); // simulate click
    document.body.removeChild(element);
    }

    // Create a class for the element
    class PopUpInfo extends HTMLElement {
    constructor() {
    // Always call super first in constructor
    super();

    // Create a shadow root
    const shadow = this.attachShadow({mode: 'open'});

    // Create spans
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');

    const icon = document.createElement('span');
    icon.setAttribute('class', 'icon');
    icon.setAttribute('tabindex', 0);

    const info = document.createElement('span');
    info.setAttribute('class', 'info');

    // Take attribute content and put it inside the info span
    const text = this.getAttribute('data-text');
    info.textContent = text;

    // Insert icon
    let imgUrl;
    if(this.hasAttribute('img')) {
    imgUrl = this.getAttribute('img');
    } else {
    imgUrl = 'img/default.png';
    }

    const img = document.createElement('img');
    img.src = imgUrl;
    icon.appendChild(img);

    // Create some CSS to apply to the shadow dom
    const style = document.createElement('style');
    console.log(style.isConnected);

    style.textContent = `
    .wrapper {
    position: relative;
    }
    .info {
    font-size: 0.8rem;
    width: 200px;
    display: inline-block;
    border: 1px solid black;
    padding: 10px;
    background: white;
    border-radius: 10px;
    opacity: 1;
    z-index: 3;
    transform: translateX(30px);
    }
    `;

    // Attach the created elements to the shadow dom
    shadow.appendChild(style);
    console.log(style.isConnected);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info);
    }
    }

    // Define the new element
    customElements.define('popup-info', PopUpInfo);

    const el = document.getElementsByTagName('popup-info')[0].shadowRoot.querySelectorAll('.info')[0];

    const keyframes = new KeyframeEffect(
    el,
    [
    { transform: 'translateY(0)' }
    ],
    { duration: 300, fill: 'forwards', delay: 300 }
    );

    const anim = new Animation(keyframes, document.timeline);

    anim.play();
    </script>

    <popup-info img="img/alt.png" data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info>