Added code block controls (#4737)
* added code block tools * updated notification close buttonpull/4739/head
Scott Anderson
GitHub
parent
691a451a90
commit
f70a22afea
|
|
@ -0,0 +1,106 @@
|
|||
var codeBlockSelector = ".article--content pre";
|
||||
var codeBlocks = $(codeBlockSelector);
|
||||
|
||||
var appendHTML = `
|
||||
<div class="code-controls">
|
||||
<span class="code-controls-toggle"><span class='cf-icon More'></span></span>
|
||||
<ul class="code-control-options">
|
||||
<li class='copy-code'><span class='cf-icon Duplicate_New'></span> <span class="message">Copy</span></li>
|
||||
<li class='fullscreen-toggle'><span class='cf-icon ExpandB'></span> Fill window</li>
|
||||
</ul>
|
||||
</div>
|
||||
`
|
||||
|
||||
// Wrap all codeblocks with a new 'codeblock' div
|
||||
$(codeBlocks).each(function() {
|
||||
$(this).wrap("<div class='codeblock'></div>");
|
||||
});
|
||||
|
||||
// Append code controls to all codeblock divs
|
||||
$('.codeblock').append(appendHTML);
|
||||
|
||||
//////////////////////////// CODE CONTROLS TOGGLING ////////////////////////////
|
||||
|
||||
// Click outside of the code-controls to close them
|
||||
$(document).click(function() {
|
||||
$('.code-controls').removeClass('open')
|
||||
});
|
||||
|
||||
// Click the code controls toggle to open code controls
|
||||
$('.code-controls-toggle').click(function() {
|
||||
$(this).parent().toggleClass('open');
|
||||
})
|
||||
|
||||
// Stop event propagation for clicks inside of the code-controls div
|
||||
$(".code-controls").click(function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
/////////////////////////////// COPY TO CLIPBOARD //////////////////////////////
|
||||
|
||||
// Update button text during lifecycles
|
||||
function updateText(element, currentText, newText) {
|
||||
let inner = (element)[0].innerHTML;
|
||||
inner = inner.replace(currentText, newText)
|
||||
|
||||
element[0].innerHTML = inner
|
||||
}
|
||||
|
||||
// Trigger copy success state lifecycle
|
||||
function copyLifeCycle(element, state) {
|
||||
let stateData = ((state === 'success') ? {state: 'success', message: 'Copied!'} : {state: 'failed', message: 'Copy failed!'})
|
||||
|
||||
updateText(element, 'Copy', stateData.message)
|
||||
element.addClass(stateData.state)
|
||||
|
||||
setTimeout(function() {
|
||||
updateText(element, stateData.message, 'Copy');
|
||||
element.removeClass(stateData.state)
|
||||
}, 2500)
|
||||
}
|
||||
|
||||
// Trigger copy failure state lifecycle
|
||||
|
||||
$('.copy-code').click(function() {
|
||||
let text = $(this).closest('.code-controls').prev('pre')[0].innerText
|
||||
|
||||
const copyContent = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
copyLifeCycle($(this), 'success')
|
||||
} catch (err) {
|
||||
copyLifeCycle($(this), 'failed')
|
||||
}
|
||||
}
|
||||
|
||||
copyContent()
|
||||
})
|
||||
|
||||
/////////////////////////////// FULL WINDOW CODE ///////////////////////////////
|
||||
|
||||
/*
|
||||
On click, open the fullscreen code modal and append a clone of the selected codeblock.
|
||||
Disable scrolling on the body.
|
||||
Disable user selection on everything but the fullscreen codeblock.
|
||||
*/
|
||||
$('.fullscreen-toggle').click(function() {
|
||||
var code = $(this).closest('.code-controls').prev('pre').clone();
|
||||
|
||||
$('#fullscreen-code-placeholder').replaceWith(code[0]);
|
||||
$('body').css('overflow', 'hidden');
|
||||
$('body > div:not(.fullscreen-code)').css('user-select', 'none');
|
||||
$('.fullscreen-code').fadeIn();
|
||||
})
|
||||
|
||||
/*
|
||||
On click, close the fullscreen code block.
|
||||
Reenable scrolling on the body.
|
||||
Reenable user selection on everything.
|
||||
Close the modal and replace the code block with the placeholder element.
|
||||
*/
|
||||
$('.fullscreen-close').click(function() {
|
||||
$('body').css('overflow', 'auto');
|
||||
$('body > div:not(.fullscreen-code)').css('user-select', '');
|
||||
$('.fullscreen-code').fadeOut();
|
||||
$('.fullscreen-code pre').replaceWith('<div id="fullscreen-code-placeholder"></div>')
|
||||
});
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
var codeBlockSelector = ".article--content pre";
|
||||
var codeBlocks = $(codeBlockSelector);
|
||||
|
||||
// Check if codeblock content requires scrolling (overflow)
|
||||
function hasOverflow(element) {
|
||||
if (element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// Wrap codeblocks that overflow with a new 'codeblock' div
|
||||
$(codeBlocks).each(function() {
|
||||
if (hasOverflow( $(this)[0] )) {
|
||||
$(this).wrap("<div class='codeblock'></div>");
|
||||
} else {}
|
||||
});
|
||||
|
||||
// Append a clickable fullscreen toggle button to all codeblock divs
|
||||
$('.codeblock').append("<a class='fullscreen-toggle'><span class='cf-icon expand-new'></span></a>");
|
||||
|
||||
/*
|
||||
On click, open the fullscreen code modal and append a clone of the selected codeblock.
|
||||
Disable scrolling on the body.
|
||||
Disable user selection on everything but the fullscreen codeblock.
|
||||
*/
|
||||
$('.fullscreen-toggle').click(function() {
|
||||
var code = $(this).prev('pre').clone();
|
||||
|
||||
$('#fullscreen-code-placeholder').replaceWith(code[0]);
|
||||
$('body').css('overflow', 'hidden');
|
||||
$('body > div:not(.fullscreen-code)').css('user-select', 'none');
|
||||
$('.fullscreen-code').fadeIn();
|
||||
})
|
||||
|
||||
/*
|
||||
On click, close the fullscreen code block.
|
||||
Reenable scrolling on the body.
|
||||
Reenable user selection on everything.
|
||||
Close the modal and replace the code block with the placeholder element.
|
||||
*/
|
||||
$('.fullscreen-close').click(function() {
|
||||
$('body').css('overflow', 'auto');
|
||||
$('body > div:not(.fullscreen-code)').css('user-select', '');
|
||||
$('.fullscreen-code').fadeOut();
|
||||
$('.fullscreen-code pre').replaceWith('<div id="fullscreen-code-placeholder"></div>')
|
||||
});
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
.codeblock { position: relative; }
|
||||
|
||||
.code-controls {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
|
||||
.code-controls-toggle {
|
||||
padding: .05rem .15rem;
|
||||
display: inline-block;
|
||||
font-size: 1.15rem;
|
||||
color: $article-code;
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
border-radius: $radius;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background-color: rgba($article-text, .1);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
}
|
||||
|
||||
ul.code-control-options {
|
||||
list-style: none;
|
||||
padding: .5rem;
|
||||
margin: 0;
|
||||
border-radius: $radius;
|
||||
background-color: rgba($article-text, .05);
|
||||
backdrop-filter: blur(15px);
|
||||
display: none;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: .4rem .5rem .6rem;
|
||||
border-radius: $radius;
|
||||
color: $article-bold;
|
||||
font-size: .87rem;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {background-color: rgba($article-text, .07)}
|
||||
|
||||
&.copy-code, &.fullscreen-toggle {
|
||||
.cf-icon {margin-right: .35rem;}
|
||||
}
|
||||
|
||||
&.copy-code {
|
||||
.message {
|
||||
text-shadow: 0px 0px 8px rgba($article-text, 0);
|
||||
font-weight: normal;
|
||||
transition: color .2s, text-shadow .2s;
|
||||
}
|
||||
|
||||
&.success > .message {
|
||||
text-shadow: 0px 0px 8px rgba($article-text, .5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.failed > .message {
|
||||
color: $r-fire;
|
||||
text-shadow: 0px 0px 8px rgba($r-fire, .5);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.code-controls-toggle {display: none;}
|
||||
.code-control-options {display: block;}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////// Fullscreen codeblock styles /////////////////////////
|
||||
.fullscreen-code {
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 2rem;
|
||||
background: $article-code-bg;
|
||||
overflow: scroll !important;
|
||||
|
||||
.fullscreen-close {
|
||||
position: fixed;
|
||||
padding: .1rem;
|
||||
right: .75rem;
|
||||
top: .5rem;
|
||||
display: block;
|
||||
color: $article-code;
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
background: $article-code-bg;
|
||||
border-radius: $radius;
|
||||
|
||||
span {
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
&:hover span {opacity: 1};
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
line-height: 1.75rem;
|
||||
|
||||
@import "article/code-api-methods";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
////////////////////////// Fullscreen codeblock styles /////////////////////////
|
||||
.fullscreen-code {
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 2rem;
|
||||
background: $article-code-bg;
|
||||
overflow: scroll !important;
|
||||
|
||||
.fullscreen-close {
|
||||
position: fixed;
|
||||
padding: .1rem;
|
||||
right: .75rem;
|
||||
top: .5rem;
|
||||
display: block;
|
||||
color: $article-code;
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
background: $article-code-bg;
|
||||
border-radius: $radius;
|
||||
|
||||
span {
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
&:hover span {opacity: 1};
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
line-height: 1.75rem;
|
||||
|
||||
@import "article/code-api-methods";
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
position: fixed;
|
||||
top: 65px;
|
||||
right: 10px;
|
||||
z-index: 100;
|
||||
z-index: 98;
|
||||
width: calc(100vw - 20px);
|
||||
max-width: 450px;
|
||||
transition: all .4s ease;
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.7rem;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
justify-content: space-between;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
z-index: 99;
|
||||
|
||||
.influx-home {
|
||||
font-family: 'icomoon-v2';
|
||||
|
|
|
|||
|
|
@ -74,27 +74,6 @@ pre {
|
|||
@import "code-api-methods";
|
||||
}
|
||||
|
||||
///////////////////////// Codeblocks fullscreen toggle /////////////////////////
|
||||
|
||||
.codeblock {
|
||||
position: relative;
|
||||
|
||||
.fullscreen-toggle {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
line-height: 0;
|
||||
font-size: 1.15rem;
|
||||
color: $article-code;
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover {opacity: 1}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
"layouts/v1-overrides",
|
||||
"layouts/notifications",
|
||||
"layouts/custom-time-trigger",
|
||||
"layouts/fullscreen-code";
|
||||
"layouts/code-controls";
|
||||
|
||||
// Import Product-specifc color schemes
|
||||
@import "product-overrides/telegraf",
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ If `gpg` is not available, see the [GnuPG homepage](https://gnupg.org/download/)
|
|||
1. Download and import InfluxData's public key:
|
||||
|
||||
```
|
||||
curl -s https://repos.influxdata.com/influxdata-archive_compat.key | gpg --import -
|
||||
curl -s https://repos.influxdata.com/influxdb2.key | gpg --import -
|
||||
```
|
||||
|
||||
2. Download the signature file for the release by adding `.asc` to the download URL.
|
||||
|
|
@ -353,7 +353,7 @@ If `gpg` is not available, see the [GnuPG homepage](https://gnupg.org/download/)
|
|||
1. Download and import InfluxData's public key:
|
||||
|
||||
```
|
||||
curl -s https://repos.influxdata.com/influxdata-archive_compat.key | gpg --import -
|
||||
curl -s https://repos.influxdata.com/influxdb2.key | gpg --import -
|
||||
```
|
||||
|
||||
2. Download the signature file for the release by adding `.asc` to the download URL.
|
||||
|
|
@ -456,11 +456,12 @@ To prevent unwanted access to data, we recommend setting the permissions on the
|
|||
|
||||
Example:
|
||||
|
||||
````powershell
|
||||
```powershell
|
||||
> $acl = Get-Acl "C:\Users\<username>\.influxdbv2"
|
||||
> $accessRule = New-Object System.Security.AccessControl.FileSystemAccessRule("everyone","Read","Deny")
|
||||
> $acl.SetAccessRule($accessRule)
|
||||
> $acl | Set-Acl "C:\Users\<username>\.influxdbv2"
|
||||
```
|
||||
|
||||
{{% /expand %}}
|
||||
{{< /expand-wrapper >}}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
{{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }}
|
||||
{{ $fluxCurrentTime := resources.Get "js/flux-current-time.js" }}
|
||||
{{ $influxdbGSTimestamps := resources.Get "js/get-started-timestamps.js" }}
|
||||
{{ $fullscreenCode := resources.Get "js/fullscreen-code.js" }}
|
||||
{{ $codeControls := resources.Get "js/code-controls.js" }}
|
||||
{{ $pageFeedback := resources.Get "js/page-feedback.js" }}
|
||||
{{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
|
||||
{{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js"}}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $modals $influxdbURLs $featureCallouts $tabbedContent $notifications $keybindings $fullscreenCode $pageFeedback $homepageInteractions $fluxInfluxDBVersions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $modals $influxdbURLs $featureCallouts $tabbedContent $notifications $keybindings $codeControls $pageFeedback $homepageInteractions $fluxInfluxDBVersions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $fluxGroupKeyjs := slice $fluxGroupKeys | resources.Concat "js/flux-group-keys.js" | resources.Fingerprint }}
|
||||
{{ $fluxCurrentTimejs := slice $fluxCurrentTime | resources.Concat "js/flux-current-time.js" | resources.Fingerprint }}
|
||||
{{ $influxdbGSTimestampsjs := slice $influxdbGSTimestamps | resources.Concat "js/get-started-timestamps.js" | resources.Fingerprint }}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="notification-content">
|
||||
{{ .message | markdownify }}
|
||||
</div>
|
||||
<div class="close-notification"><span class="icon-remove"></span></div>
|
||||
<div class="close-notification"><span class="cf-icon Remove_New"></span></div>
|
||||
<span class="show"></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue