Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-18 20:59:42 +02:00
Code Issues Releases Activity

refactor: delete copy link button from header

Browse source
This commit is contained in:
Aleksey Solovyev 2022-11-29 14:02:31 +03:00
parent b83d468ba0
commit 91ba44a169
3 changed files with 5 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/backend/views/pages/blocks/header.twig
View file

@ -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 }}>

39
src/frontend/js/modules/page.js
View file

@ -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 });
}
}

103
src/frontend/styles/components/page.pcss
View file

@ -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 @@
}
}
}