diff --git a/src/backend/views/pages/blocks/header.twig b/src/backend/views/pages/blocks/header.twig index f069652..476d646 100644 --- a/src/backend/views/pages/blocks/header.twig +++ b/src/backend/views/pages/blocks/header.twig @@ -1,11 +1,5 @@ - - - + {{ text }} - diff --git a/src/frontend/js/modules/page.js b/src/frontend/js/modules/page.js index 00bbaf9..148b3e6 100644 --- a/src/frontend/js/modules/page.js +++ b/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 }); - } } diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss index 7109556..c359a4c 100644 --- a/src/frontend/styles/components/page.pcss +++ b/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 @@ } } } -