empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Copy documentation links to clipboard when a user clicks on them (#2442)

Browse Source 
* copying header links

* copied text notification

* animation and comment update

* Update basic-documentation.less

* Update basic-documentation.page.js

* using for loop instead of lodash, updated function to remove copied class, handling double clicks, move notification

* Update basic-documentation.page.js
This commit is contained in:
eashaw 2021-10-07 15:27:36 -05:00 committed by GitHub
parent 84a3c6e134
commit 834289c0c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
website/assets/js/pages/docs/basic-documentation.page.js vendored
View File

@ -159,6 +159,29 @@ parasails.registerPage('basic-documentation', {
});
})();
// Adding event handlers to the Headings on the page, allowing users to copy links by clicking on the heading.
let headingsOnThisPage = $('#body-content').find(':header');
for(let key in Object.values(headingsOnThisPage)){
let heading = headingsOnThisPage[key];
$(heading).click(()=> {
// Find the child <a> element
let linkToCopy = _.first($(heading).find('a.markdown-link'));
// If this heading has already been clicked and still has the copied class we'll just ignore this click
if(!$(heading).hasClass('copied')){
// If the link's href is missing, we'll copy the current url (and remove any hashes) to the clipboard instead
if(linkToCopy) {
navigator.clipboard.writeText(linkToCopy.href);
} else {
navigator.clipboard.writeText(heading.baseURI.split('#')[0]);
}
// Add the copied class to the header to notify the user that the link has been copied.
$(heading).addClass('copied');
// Remove the copied class 5 seconds later, so we can notify the user again if they re-cick on this heading
setTimeout(()=>{$(heading).removeClass('copied');}, 5000);
}
});
}
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

27
website/assets/styles/pages/docs/basic-documentation.less vendored
View File

@ -44,6 +44,33 @@
}
}
.markdown-heading.copied::before {
content: 'Link copied to clipboard';
display: flex;
font-weight: 400;
position: relative;
top: -25px;
height: 0px;
font-size: 14px;
// line-height: 14px;
color: @core-vibrant-blue;
animation-name: copiedText;
animation-duration: 4s;
animation-fill-mode: forwards;
}
.markdown-heading.copied:hover::before {
// right: -15px;
}
@keyframes copiedText {
0% {opacity: 0;}
20% {opacity: 100;}
30% {opacity: 80;}
50% {opacity: 60;}
70% {opacity: 40;}
80% {opacity: 20;}
100% {opacity: 0;}
}
[purpose='search'] {