refactor: delete copy link button from header

Author: alsolovyev

src/backend/views/pages/blocks/header.twig

@@ -1,11 +1,5 @@
-<h{{ level }} id="{{ text | urlify  }}" class="block-header block-header--{{ level }} block-header--anchor">
-  <div class="block-header__copy-link-splash"></div>
-  <div class="block-header__copy-link">
-    <div class="block-header__copy-link-icon--initial">{{ svg('copy') }}</div>
-    <div class="block-header__copy-link-icon--success">{{ svg('check') }}</div>
-  </div>
+<h{{ level }} id="{{ text | urlify  }}" class="block-header block-header--{{ level }}">
   <a href="#{{ text | urlify  }}">
     {{ text }}
   </a>
 </h{{ level }}>
-

src/frontend/js/modules/page.js

@@ -20,10 +20,7 @@ export default class Page {
    */
   static get CSS() {
     return {
-      page: 'page',
-      copyLinkBtn: 'block-header__copy-link',
-      header: 'block-header--anchor',
-      headerLinkCopied: 'block-header--link-copied',
+      page: 'page'
     };
   }
 
@@ -35,11 +32,11 @@ export default class Page {
     this.tableOfContent = this.createTableOfContent();
 
     /**
-     * Add click event listener to capture copy link button clicks
+     * Add click event listener
      */
     const page = document.querySelector(`.${Page.CSS.page}`);
 
-    page.addEventListener('click', this.copyAnchorLinkIfNeeded);
+    page.addEventListener('click', (event) => { });
   }
 
   /**
@@ -69,39 +66,11 @@ export default class Page {
     try {
       // eslint-disable-next-line no-new
       new TableOfContent({
-        tagSelector:
-          'h2.block-header--anchor,' +
-          'h3.block-header--anchor,' +
-          'h4.block-header--anchor',
+        tagSelector: '.block-header',
         appendTo: document.getElementById('layout-sidebar-right'),
       });
     } catch (error) {
       console.error(error); // @todo send to Hawk
     }
   }
-
-  /**
-   * Checks if 'copy link' button was clicked and copies the link to clipboard
-   *
-   * @param e - click event
-   */
-  copyAnchorLinkIfNeeded = async (e) => {
-    const copyLinkButtonClicked = e.target.closest(`.${Page.CSS.copyLinkBtn}`);
-
-    if (!copyLinkButtonClicked) {
-      return;
-    }
-
-    const header = e.target.closest(`.${Page.CSS.header}`);
-    const link = header.querySelector('a').href;
-
-    await copyToClipboard(link);
-    header.classList.add(Page.CSS.headerLinkCopied);
-
-    header.addEventListener('mouseleave', () => {
-      setTimeout(() => {
-        header.classList.remove(Page.CSS.headerLinkCopied);
-      }, 500);
-    }, { once: true });
-  }
 }

src/frontend/styles/components/page.pcss

@@ -125,111 +125,9 @@
     pointer-events: none;
   }
 
-  &--link-copied {
-    .block-header__copy-link,
-    .block-header__copy-link:hover {
-      background: var(--color-success);
-      opacity: 1;
-      animation: check-square-in 250ms ease-in;
-      pointer-events: none;
-    }
-
-    .block-header__copy-link-icon--initial {
-      display: none;
-    }
-
-    .block-header__copy-link-icon--success {
-      display: flex;
-      animation: check-sign-in 350ms ease-in forwards;
-    }
-
-    .block-header__copy-link-splash {
-      opacity: 0;
-      visibility: visible;
-      transform: scale(3.5);
-    }
-  }
-
-  &__copy-link-splash {
-    position: absolute;
-    left: 0;
-    width: 28px;
-    height: 28px;
-    background-color: var(--color-success);
-    transform: scale(1);
-    border-radius: 100%;
-    transition: transform 400ms ease-out, opacity 400ms;
-    visibility: hidden;
-  }
-
-  &__copy-link-icon--success {
-    width: 24px;
-    height: 24px;
-    display: none;
-    color: white;
-  }
-
-  &__copy-link-icon--initial {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &__copy-link {
-    width: 28px;
-    height: 28px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px;
-    @apply --squircle;
-    color: var(--color-text-second);
-    opacity: 0;
-    margin-right: 8px;
-
-    @media (--can-hover) {
-      &:hover {
-        background: var(--color-link-hover);
-      }
-    }
-  }
-
-  @media (--can-hover) {
-    &:hover {
-      .block-header__copy-link {
-        opacity: 1;
-      }
-    }
-  }
-
   .inline-code {
     line-height: inherit;
   }
-
-  @keyframes check-sign-in {
-    from {
-        transform: scale(.7);
-    }
-    80% {
-        transform: scale(1.1);
-    }
-    to {
-        transform: none;
-    }
-  }
-
-  @keyframes check-square-in {
-    from {
-      transform: scale(1.05);
-    }
-    80% {
-      transform: scale(.96);
-    }
-    to {
-      transform: none;
-    }
-  }
 }
 
 /**
@@ -580,4 +478,3 @@
     }
   }
 }
-