diff --git a/website/assets/js/pages/articles/basic-article.page.js b/website/assets/js/pages/articles/basic-article.page.js index 0d70d984f4f1..7f17f0daad7e 100644 --- a/website/assets/js/pages/articles/basic-article.page.js +++ b/website/assets/js/pages/articles/basic-article.page.js @@ -37,6 +37,30 @@ parasails.registerPage('basic-article', { let startValue = parseInt(ol.getAttribute('start'), 10) - 1; ol.style.counterReset = 'custom-counter ' + startValue; }); + + let headingsOnThisPage = $('[purpose="article-content"]').find(':header'); + for(let key in Object.values(headingsOnThisPage)){ + let heading = headingsOnThisPage[key]; + // Find the child element + let linkElementNestedInThisHeading = _.first($(heading).find('a.markdown-link')); + $(linkElementNestedInThisHeading).click(()=> { + if(typeof navigator.clipboard !== 'undefined') { + // 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(linkElementNestedInThisHeading.href) { + navigator.clipboard.writeText(linkElementNestedInThisHeading.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); + } + } + }); + } // Add an event listener to add a class to the right sidebar when the header is hidden. window.addEventListener('scroll', this.handleScrollingInArticle); diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less index 09f4b4810264..1f9f8e1230b7 100644 --- a/website/assets/styles/pages/articles/basic-article.less +++ b/website/assets/styles/pages/articles/basic-article.less @@ -8,6 +8,40 @@ border-top: 2px solid @core-vibrant-blue-15; width: 100%; } + .markdown-heading:hover { + .markdown-link { + height: 16px; + vertical-align: middle; + margin-left: 8px; + content: url('/images/icon-link-16x16@2x.png'); + } + } + + .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; + } + + @keyframes copiedText { + 0% {opacity: 0;} + 20% {opacity: 100;} + 30% {opacity: 80;} + 50% {opacity: 60;} + 70% {opacity: 40;} + 80% {opacity: 20;} + 100% {opacity: 0;} + } + [purpose='page-container'] { max-width: 1200px; padding: 64px;