From nobody Sun Apr 10 10:20:06 2022 X-Original-To: dev-commits-doc-all@mlmmj.nyi.freebsd.org Received: from mx1.freebsd.org (mx1.freebsd.org [IPv6:2610:1c1:1:606c::19:1]) by mlmmj.nyi.freebsd.org (Postfix) with ESMTP id E37AD1A885F3 for ; Sun, 10 Apr 2022 10:20:06 +0000 (UTC) (envelope-from git@FreeBSD.org) Received: from mxrelay.nyi.freebsd.org (mxrelay.nyi.freebsd.org [IPv6:2610:1c1:1:606c::19:3]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (4096 bits) server-digest SHA256 client-signature RSA-PSS (4096 bits) client-digest SHA256) (Client CN "mxrelay.nyi.freebsd.org", Issuer "R3" (verified OK)) by mx1.freebsd.org (Postfix) with ESMTPS id 4Kbnzp64Wgz4S76; Sun, 10 Apr 2022 10:20:06 +0000 (UTC) (envelope-from git@FreeBSD.org) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=freebsd.org; s=dkim; t=1649586006; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version:content-type:content-type: content-transfer-encoding:content-transfer-encoding; bh=CU8JlIAzJaR/kLbxFME5vXmwIqzY0ePCzUgJJsO231U=; b=kPtMLerRSFatmQZa3iqJ7RXWvSRWFO9hEL7gNAboMMIEHr+4gR8UR2lrVN1salfND6hnSJ SFHhPNjVSn6AfQyeaJlKyLAOyN+5c9gDP6gEAJ/DNaHF2H7i4mktWFGKwkXFx3RTBJNCM/ xnDRyaShUbHrqfOvbOcpNYyqwBSzQz9t+FdNKkNpL4wae+AIbDnGB0b230RN8Cng8z7ewx 5a5wMLaWwV3hpKeT/IRVC5ki4kmKTgy7ZszeN7sJBTOXL1pKg3jPuOLK93OtldPXpkJFbr IQMBPos8HFZjkv1YZ/s7tZ7vqoD3BoVqeh6Vbm/6ISw+1n1dQf25xEKkyNXmtQ== Received: from gitrepo.freebsd.org (gitrepo.freebsd.org [IPv6:2610:1c1:1:6068::e6a:5]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (4096 bits) server-digest SHA256) (Client did not present a certificate) by mxrelay.nyi.freebsd.org (Postfix) with ESMTPS id B0FFE4B05; Sun, 10 Apr 2022 10:20:06 +0000 (UTC) (envelope-from git@FreeBSD.org) Received: from gitrepo.freebsd.org ([127.0.1.44]) by gitrepo.freebsd.org (8.16.1/8.16.1) with ESMTP id 23AAK6ir005819; Sun, 10 Apr 2022 10:20:06 GMT (envelope-from git@gitrepo.freebsd.org) Received: (from git@localhost) by gitrepo.freebsd.org (8.16.1/8.16.1/Submit) id 23AAK6FJ005817; Sun, 10 Apr 2022 10:20:06 GMT (envelope-from git) Date: Sun, 10 Apr 2022 10:20:06 GMT Message-Id: <202204101020.23AAK6FJ005817@gitrepo.freebsd.org> To: doc-committers@FreeBSD.org, dev-commits-doc-all@FreeBSD.org From: Sergio Carlavilla Delgado Subject: git: 0188b57bf9 - main - Add copy button to source code elements List-Id: Commit messages for all branches of the doc repository List-Archive: https://lists.freebsd.org/archives/dev-commits-doc-all List-Help: List-Post: List-Subscribe: List-Unsubscribe: Sender: owner-dev-commits-doc-all@freebsd.org X-BeenThere: dev-commits-doc-all@freebsd.org MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit X-Git-Committer: carlavilla X-Git-Repository: doc X-Git-Refname: refs/heads/main X-Git-Reftype: branch X-Git-Commit: 0188b57bf9aa69736f1ce710fa798c208940cb9d Auto-Submitted: auto-generated ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=freebsd.org; s=dkim; t=1649586006; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version:content-type:content-type: content-transfer-encoding:content-transfer-encoding; bh=CU8JlIAzJaR/kLbxFME5vXmwIqzY0ePCzUgJJsO231U=; b=Bs/PoJ3B/19ENoEtgHTgiLoSB1z830tNyjUykxMNuMFr3P+LqLGmyizLDyx6bjPhZjq97b wQ/zby5mB7JX0xu+VKJDt+/cIA1t368+8fiZeShdeW7icUG5yqWcoFesmFWWX2nvGKxrcV A4p00PV71vlgkhg0f9EEbrTrXUUu+gJqPpN22ba904hFwpcCbAGtjUfq8Fvy2+tXSu4yNK CudDQSZk5Po3FWDnWSD9oy1l7ZxxMg2H/9Y9gjDUFxiNZvP2Tt+sJYrMmkSH1sFE0TwS/a GQqWtxVoNYmkPdWnjj0iTtLahnrrZ6M0hAB4xMo1yB8rhioRjAzAQe2ZNSBTTQ== ARC-Seal: i=1; s=dkim; d=freebsd.org; t=1649586006; a=rsa-sha256; cv=none; b=Bm6yiaOnRXYmFl10oVhiiVN3pSfy949/qIuhz6atToZ+SvGPM/bVIIynpt4qHvG2WZ8BoZ XuqlUVOuEL++gYj8NAymkLfhBnuoZEYIPl8xWgO0EMr7/c5ZbPven7ZlrEd1AV+I48R0FK zlnygtYizYmBSFYaZ5zKU9DZ5TCVRiTkBUB+E/UZaoztrfx9S9ZdmBUNI/LfsoTxMBAK3v VK/0l9r4IOuwHl6Q+moSDrfH8LeJ0uaKsUs3G+Qinza0aOjoeMd5ThD5KLTiIn0ZnIdMDm 4raTYMqkQ6BW2Vo2DglQPrUSyrDrersKBaVyUFsieEElnHJO9XhrVuYMr1v8Bw== ARC-Authentication-Results: i=1; mx1.freebsd.org; none X-ThisMailContainsUnwantedMimeParts: N The branch main has been updated by carlavilla: URL: https://cgit.FreeBSD.org/doc/commit/?id=0188b57bf9aa69736f1ce710fa798c208940cb9d commit 0188b57bf9aa69736f1ce710fa798c208940cb9d Author: Sergio Carlavilla Delgado AuthorDate: 2022-04-10 10:17:26 +0000 Commit: Sergio Carlavilla Delgado CommitDate: 2022-04-10 10:19:44 +0000 Add copy button to source code elements A copy button has been added to all source code elements. It works using Javascript so Javascript should be activated in the browser. --- .../themes/beastie/assets/js/copy-clipboard.js | 66 ++++++++++++++++++++++ .../themes/beastie/assets/styles/global.scss | 56 ++++++++++++++++++ .../themes/beastie/assets/styles/variables.scss | 3 + .../themes/beastie/layouts/partials/site-head.html | 6 ++ 4 files changed, 131 insertions(+) diff --git a/documentation/themes/beastie/assets/js/copy-clipboard.js b/documentation/themes/beastie/assets/js/copy-clipboard.js new file mode 100644 index 0000000000..4b11058422 --- /dev/null +++ b/documentation/themes/beastie/assets/js/copy-clipboard.js @@ -0,0 +1,66 @@ +/* +BSD 2-Clause License + +Copyright (c) 2001-2022, The FreeBSD Documentation Project +Copyright (c) 2021-2022, Sergio Carlavilla +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +*/ + +(function () { + document.querySelectorAll(".rouge, .highlight").forEach(function(codeItem) { + var sourceCode = codeItem.textContent; + + var icon = document.createElement("i"); + icon.className = "fa fa-clipboard"; + + var tooltip = document.createElement("span"); + tooltip.className = "tooltip"; + tooltip.innerHTML = "Copied!"; + + var button = document.createElement("button"); + button.title = "Copy to clipboard"; + button.appendChild(icon); + button.appendChild(tooltip); + + var clipboardWrapper = document.createElement("div"); + clipboardWrapper.className = "copy-to-clipboard-wrapper"; + clipboardWrapper.appendChild(button); + + codeItem.appendChild(clipboardWrapper); + + button.addEventListener('click', copyToClipboard.bind(button, sourceCode)); + }); +})(); + +function copyToClipboard(text, item) { + const tooltip = item.target.nextElementSibling; + window.navigator.clipboard.writeText(text).then(function() { + if (tooltip) { + tooltip.classList.add("show-tooltip"); + setTimeout(function(){ + tooltip.classList.remove("show-tooltip"); + }, 1200); + } + }); +} diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss index 9873fbc46e..e2172bbcf9 100644 --- a/documentation/themes/beastie/assets/styles/global.scss +++ b/documentation/themes/beastie/assets/styles/global.scss @@ -688,6 +688,12 @@ table.stretch { .listingblock { margin: .75em 0; + position: relative; +} + +.highlight { + padding-top: 1.5rem; + padding-bottom: 1.5rem; } code { @@ -738,3 +744,53 @@ kbd { color: var(--global-font-color); } } + +.copy-to-clipboard-wrapper { + position: absolute; + margin: 0; + padding: .50rem; + right: .5rem; + top: 0rem; + + button { + display: flex; + flex-direction: column; + border: none; + cursor: pointer; + align-items: center; + width: 1rem; + height: 1rem; + background: none; + + &:focus { + outline: none; + } + + i { + color: var(--white); + } + } + + .tooltip { + visibility: hidden; + opacity: 0; + justify-content: center; + margin-top: 1em; + background-color: var(--copy-clipboard-tooltip-background-color); + border-radius: .25em; + padding: .5em; + color: var(--white); + z-index: 999; + + &:focus { + outline: none; + } + } + + .show-tooltip { + visibility: visible; + opacity: 1; + transition: visibility 0s easy 0s; + } + +} diff --git a/documentation/themes/beastie/assets/styles/variables.scss b/documentation/themes/beastie/assets/styles/variables.scss index adb22109e1..48a87f7c14 100644 --- a/documentation/themes/beastie/assets/styles/variables.scss +++ b/documentation/themes/beastie/assets/styles/variables.scss @@ -60,6 +60,7 @@ --links-color: #0645AD; --pre-background-color: #F4F4F4; --pre-font-color: #444; + --copy-clipboard-tooltip-background-color: #43453B; --admonition-font-color: #444; --admonition-links-color: #0645AD; @@ -95,6 +96,7 @@ --links-color: #BAD7FF; --pre-background-color: #272727; --pre-font-color: #EEEFF1; + --copy-clipboard-tooltip-background-color: #43453B; --admonition-font-color: #444; --admonition-links-color: #1A79FF; @@ -130,6 +132,7 @@ --links-color: #9F0E0F; --pre-background-color: #FFF; --pre-font-color: #000; + --copy-clipboard-tooltip-background-color: #43453B; --admonition-font-color: #000; --admonition-note-color: #19407C; diff --git a/documentation/themes/beastie/layouts/partials/site-head.html b/documentation/themes/beastie/layouts/partials/site-head.html index 781ad79c12..e20572e820 100644 --- a/documentation/themes/beastie/layouts/partials/site-head.html +++ b/documentation/themes/beastie/layouts/partials/site-head.html @@ -20,6 +20,9 @@ {{- $themeChooser := resources.Get "js/theme-chooser.js" | resources.Minify }} + + {{- $copyClipboard := resources.Get "js/copy-clipboard.js" | resources.Minify }} + {{ else }} @@ -29,6 +32,9 @@ {{- $themeChooser := resources.Get "js/theme-chooser.js" | resources.Minify }} + + {{- $copyClipboard := resources.Get "js/copy-clipboard.js" | resources.Minify }} + {{ end }}