HSMP OCCCP

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="hmsp-one-click-copy">This is some sample text to copy.</div>

<div class="hmsp-one-click-copy-html">
  <strong>This is HTML content</strong> to copy.
</div>

<style>
  .hmsp-copy-icon-stack-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 6px;
  }

  .hmsp-one-click-copy-wrapper-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .hmsp-copy-button-container {
    position: relative;
    width: 24px;
    height: 24px;
  }

  .hmsp-one-click-copy-icon,
  .hmsp-one-click-check-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    color: inherit;
  }

  .hmsp-one-click-check-icon {
    opacity: 0;
    pointer-events: none;
  }

  .hmsp-one-click-check-icon.show {
    opacity: 1;
    pointer-events: auto;
  }

  .hmsp-aria-status {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>

<template id="hmsp-one-click-copy-wrapper-div-template">
  <div class="hmsp-one-click-copy-wrapper-div"></div>
</template>

<template id="hsmp-copy-icon-template">
  <div
    class="hmsp-one-click-copy-icon bde-icon-185-162 builder-element bde-icon breakdance--active-element"
    title="Copy as text"
    aria-label="Copy as text"
  >
    <div class="bde-icon-icon breakdance-icon-atom">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path
          d="M20 8v-8h-14l-6 6v18h12v8h20v-24h-12zM6 2.828v3.172h-3.172l3.172-3.172zM2 22v-14h6v-6h10v6l-6 6v8h-10zM18 10.828v3.172h-3.172l3.172-3.172zM30 30h-16v-14h6v-6h10v20z"
...

JavaScript

// Function to copy given text to clipboard
async function writeClipboardText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log("copied to clipboard");
  } catch (error) {
    console.error(error.message);
  }
}

jQuery(document).ready(function () {
  // Selectors for elements to enhance
  const textCopySelector = ".hmsp-one-click-copy";
  const htmlCopySelector = ".hmsp-one-click-copy-html";

  // Grab template elements
  const wrapperDivTemplate = document.querySelector(
    "#hmsp-one-click-copy-wrapper-div-template",
  );
  const wrapperDivClass = ".hmsp-one-click-copy-wrapper-div";

  const textCopyIconTemplate = document.querySelector(
    "#hsmp-copy-icon-template",
  );
  const htmlCopyIconTemplate = document.querySelector(
    "#hsmp-copy-html-icon-template",
  );
  const checkIconTemplate = document.querySelector("#hsmp-check-icon-template");

  // Function to initialize copy logic on a given element
  const initCopyBlock = function ($element, isHTML = false) {
    // Ensure the content is wrapped inside a .hmsp-copy-target div
    if ($element.find(".hmsp-copy-target").length === 0) {
      $element.contents().wrapAll('<div class="hmsp-copy-target"></div>');
    }

    // Add a stack wrapper if it doesn't already exist
    let $stackWrapper = $element.find(".hmsp-copy-icon-stack-wrapper");
    if ($stackWrapper.length === 0) {
      $stackWrapper = jQuery(
        '<div class="hmsp-copy-icon-stack-wrapper"></div>',
      );
      $element.append($stackWrapper);
    }

    // Clone wrapper div from template
    const wrapper = wrapperDivTemplate.content.cloneNode(true);
    $stackWrapper.append(wrapper);
    const $wrapper = $stackWrapper.find(wrapperDivClass).last();

    // Choose correct icon template (text or HTML)
    const iconTemplate = isHTML ? htmlCopyIconTemplate : textCopyIconTemplate;
    const copyIcon = iconTemplate.content.cloneNode(true);
    const...