Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

added influxdb selector functionality

pull/954/head
Scott Anderson 2020-04-17 00:57:07 -06:00
parent 0852562449
commit 07017fa340
14 changed files with 360 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/js/content-interactions.js
View File

@ -16,7 +16,8 @@ var elementWhiteList = [
".code-tabs p a",
".truncate-toggle",
".children-links a",
".list-links a"
".list-links a",
"a.url-trigger"
]
$('.article a[href^="#"]:not(' + elementWhiteList + ')').click(function (e) {

61
assets/js/influxdb-url.js Normal file
View File

@ -0,0 +1,61 @@
var defaultUrl = "http://localhost:9999"
function getUrl() {
var currentUrl = Cookies.get('influxdb_url')
if (typeof currentUrl == 'undefined' ) {
return defaultUrl
} else {
return currentUrl
}
}
function updateUrls(currentUrl, newUrl) {
if (typeof currentUrl != newUrl) {
$(".article--content pre").each(function() {
$(this).html($(this).html().replace(currentUrl, newUrl));
});
}
}
function appendUrlSelector(currentUrl) {
$(".article--content pre").each(function() {
var code = $(this).html()
if (code.includes(currentUrl)) {
$(this).after("<div class='select-url'><a class='url-trigger' href='#'>InfluxDB URL</a></div>")
$('.select-url').fadeIn(400)
}
});
}
function toggleModal() {
$(".modal").fadeToggle(200).toggleClass("open")
}
function setRadioButton(currentUrl) {
$('input[name="influxdb-loc"][value="' + currentUrl + '"]').prop("checked", true)
}
function storeUrl(newUrl) {
Cookies.set('influxdb_url', newUrl)
}
$('input[name="influxdb-loc"]').change(function() {
var newUrl = $(this).val()
updateUrls(getUrl(), newUrl)
storeUrl(newUrl)
})
// Update URLs on load
updateUrls(defaultUrl, getUrl())
// Append URL selector buttons to code blocks
appendUrlSelector(getUrl())
// Set active radio button on page load
setRadioButton(getUrl())
// Open and close modal window
$("#modal-close, .modal-overlay, .url-trigger").click(function(e) {
e.preventDefault()
toggleModal()
})

15
assets/js/region-url.js
View File

@ -1,15 +0,0 @@
var url = "https://us-west-2-1.aws.cloud2.influxdata.com"
// Create a way for users to select their region
// store the region url as a cookie
// set a session cookie for the url
// If the session cookie isn't defined, don't do anything
function updateUrls() {
$(".article--content pre").each(function() {
$(this).html($(this).html().replace("http://localhost:9999", url));
});
}
updateUrls()

216
assets/styles/layouts/_modal.scss Normal file
View File

@ -0,0 +1,216 @@
.modal {
display: none;
padding: 1rem;
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
.modal-overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
@include gradient($grad-miyazakisky);
opacity: .85;
}
.modal-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
}
.modal-body {
position: relative;
display: flex;
overflow: hidden;
max-width: 650px;
max-height: 95vh;
margin-top: 10vh;
padding: .75rem 2rem 1.5rem;
border-radius: $radius * 1.5;
background: $article-bg;
color: $article-text;
font-size: 1rem;
transition: margin .4s;
}
&.open {
.modal-body { margin-top: 0; }
}
#modal-close {
position: absolute;
padding: .25rem;
top: 1rem;
right: 1rem;
color: rgba($article-text, .5);
transition: color .2s;
text-decoration: none;
&:hover {
color: $article-text;
}
}
.modal-content{
overflow: scroll;
h3 {
color: $article-heading;
font-weight: $medium;
font-size: 1.4rem;
margin-bottom: 1rem;
}
h4 {
color: $article-heading;
font-weight: $medium;
margin: 1rem 0 .5rem $radius;
}
h5 {
margin: .5rem 0 0;
color: $article-bold;
}
p,li {
margin: .25rem 0;
line-height: 1.5rem;
strong {
font-weight: $medium;
color: $article-bold;
}
&.note {
padding-top: 1.25rem;
margin-top: 1.5rem;
color: rgba($article-text, .5);
border-top: 1px solid rgba($article-text, .25);
font-size: .9rem;
font-style: italic;
}
}
a {
color: $article-link;
font-weight: $medium;
text-decoration: none;
transition: color .2s;
&:hover {
color: $article-link-hover;
}
}
}
.products {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-start;
}
.product {
margin-right: .5rem;
.providers{
display: flex;
flex-wrap: wrap;
padding: .5rem 1rem;
background: rgba($article-text, .05);
border-radius: $radius;
.provider {
flex-grow: 1;
&:not(:last-child) {margin-right: 1rem;}
}
ul {
margin: .5rem .5rem .5rem 0;
padding: 0;
list-style: none;
}
}
}
.radio {
position: relative;
display: inline-block;
height: 1.15em;
width: 1.15em;
background: rgba($article-text, .05);
margin: 0 .3rem 0 .1rem;
vertical-align: text-top;
border-radius: $radius;
cursor: pointer;
border: 1.5px solid rgba($article-text, .2);
user-select: none;
}
input[type='radio'] {
margin-right: -1.1rem ;
padding: 0;
vertical-align: top;
opacity: 0;
cursor: pointer;
& + .radio:after {
content: "";
display: block;
position: absolute;
height: .5rem;
width: .5rem;
border-radius: 50%;
background: $article-link;
top: 50%;
left: 50%;
opacity: 0;
transform: scale(2) translate(-20%, -20%);
transition: all .2s;
}
&:checked + .radio:after {
opacity: 1;
transform: scale(1) translate(-50%, -50%);
}
}
}
///////////////////////////// InfluxDB URL Triggers ////////////////////////////
.article--content {
.select-url {
margin: -2.5rem 0 1rem;
text-align: right;
display: none;
}
.url-trigger {
padding: .25rem .5rem;
display: inline-block;
font-size: .85rem;
font-style: italic;
color: rgba($article-tab-code-text, .5);
background: $article-code-bg;
border-radius: 0 0 $radius $radius;
&:before {
content: "\e923";
display: inline-block;
margin-right: .35rem;
font-family: "icomoon";
font-style: normal;
font-size: .8rem;
}
&:hover {
color: $article-tab-code-text;
}
}
.code-tab-content {
.select-url{margin-top: -3.25rem}
}
}

4
assets/styles/layouts/_syntax-highlighting.scss
View File

@ -1,3 +1,5 @@
pre { line-height: 1.25rem; }
code[class*="language-"],
pre[class*="language-"] {
/*text-shadow: 0 1px #101419;*/
@ -50,8 +52,6 @@ pre[class*="language-"] {
.highlight { color: $article-code;
line-height: 1.25rem;
// COLORS
.gh, /* Generic.Heading */

11
assets/styles/layouts/_top-nav.scss
View File

@ -39,7 +39,7 @@
display: inline-block;
position: absolute;
z-index: 100;
right: 3.5rem;
right: 5.5rem;
color: $g20-white;
height: 2rem;
@include gradient($version-selector-gradient);
@ -65,7 +65,6 @@
&.open {
height: auto;
@include gradient($version-selector-gradient);
&:after {
transform: rotate(180deg);
}
@ -102,7 +101,7 @@
}
}
.theme-switcher, #search-btn {
.theme-switcher, #search-btn, .url-trigger {
display: inline-block;
padding: 0;
font-size: 1.8rem;
@ -126,6 +125,12 @@
&#theme-switch-light { display: $theme-switch-light; }
}
.url-trigger {
font-size: 1.1rem;
vertical-align: top;
margin: .1rem 0 0 0;
}
#search-btn {
opacity: 0;
}

11
assets/styles/layouts/article/_telegraf-plugins.scss
View File

@ -50,7 +50,6 @@
opacity: 0.25;
transition: opacity .2s, background .2s, color .2s;
background-color: rgba($article-btn, 0);
color: $article-bold;
.icon-github {
font-size: 1.2rem;
@ -62,7 +61,6 @@
.github-link {
opacity: 1;
background-color: rgba($article-btn, 1);
color: $g20-white;
}
}
@ -149,6 +147,7 @@
.checkbox {
display: inline-block;
position: relative;
height: 1.15em;
width: 1.15em;
background: rgba($article-text, .05);
@ -175,16 +174,16 @@
width: .5rem;
border-radius: 50%;
background: $article-link;
top: .65rem;
left: .35rem;
top: 50%;
left: 50%;
opacity: 0;
transform: scale(2);
transform: scale(2) translate(-20%, -20%);
transition: all .2s;
}
&:checked + .checkbox:after {
opacity: 1;
transform: scale(1);
transform: scale(1) translate(-50%, -50%);
}
}
}

2
assets/styles/sidebar-closed.scss
View File

@ -27,7 +27,7 @@
opacity: 1;
}
.version-selector {
right: 5.5rem;
right: 7.5rem;
}
}

3
assets/styles/styles-default.scss
View File

@ -21,4 +21,5 @@
"layouts/syntax-highlighting",
"layouts/algolia-search-overrides",
"layouts/landing",
"layouts/error-page";
"layouts/error-page",
"layouts/modal";

7
data/influxdb_urls.yml
View File

@ -1,6 +1,9 @@
oss:
product: InfluxDB OSS
name: localhost:9999
providers:
- name: Default
regions:
- name: localhost:9999
url: http://localhost:9999
cloud:
@ -9,7 +12,7 @@ cloud:
- name: Amazon Web Services
short_name: AWS
regions:
- name: US West (Orgeon)
- name: US West (Oregon)
url: https://us-west-2-1.aws.cloud2.influxdata.com
- name: EU Frankfort
url: https://eu-central-1-1.aws.cloud2.influxdata.com

39
layouts/partials/footer/influxdb-url-modal.html
View File

@ -1,18 +1,39 @@
<div class="url-selector" style="background: #fff; padding: 1rem;">
{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) .RelPermalink }}
<div class="modal">
<div class="modal-overlay"></div>
<div class="modal-wrapper">
<div id="influxdb-url-list" class="modal-body">
<a id="modal-close"href="#"><span class="icon-ui-remove"></span></a>
<div class="modal-content">
<h3>Where are you running InfluxDB?</h3>
<p>Select where you're using InfluxDB and we'll customize code examples with your <strong>InfluxDB URL</strong>.</p>
<div class="products">
{{ range sort .Site.Data.influxdb_urls "product" "desc" }}
<div class="product">
<h4>{{ .product }}</h4>
{{ if .name }}
<ul><li data-url="{{ .url }}">{{ .name }}</li></ul>
{{ end }}
{{ if .providers }}
<div class="providers">
{{ range .providers }}
<strong>{{ if .short_name}}{{ .short_name }}{{ else }}{{ .name }}{{ end }}</strong>
<div class="provider">
<h5>{{ if .short_name}}{{ .short_name }}{{ else }}{{ .name }}{{ end }}</h5>
<ul>
{{ range .regions }}
<li data-url="{{ .url }}">{{ .name }}</li>
<li>
<label for="{{ anchorize .name }}">
<input type="radio" name="influxdb-loc" id="{{ anchorize .name }}" value="{{ .url }}" checked>
<span class="radio"></span>
{{ .name }}
</label>
</li>
{{ end }}
</ul>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
<p class="note">For more information, see <a href='{{ print "/" $currentVersion "/cloud/urls/"}}'>InfluxDB URLs</a>.</p>
</div>
</div>
</div>
</div>

4
layouts/partials/footer/javascript.html
View File

@ -2,7 +2,7 @@
{{ $contentInteractions := resources.Get "js/content-interactions.js" }}
{{ $searchInteractions := resources.Get "js/search-interactions.js" }}
{{ $telegrafFilters := resources.Get "js/telegraf-filters.js" }}
{{ $regionURLs := resources.Get "js/region-url.js" }}
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $regionURLs | resources.Concat "js/footer.bundle.js" }}
{{ $influxdbURLs := resources.Get "js/influxdb-url.js" }}
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs | resources.Concat "js/footer.bundle.js" }}
<script type="text/javascript" src="{{ $footerjs.RelPermalink }}" ></script>

1
layouts/partials/topnav.html
View File

@ -22,6 +22,7 @@
</ul>
</div>
<button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
<button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
<button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
<button class="theme-switcher" id="theme-switch-dark" onclick="switch_style('dark-theme');return false;"><span class="icon-moon1"></span></button>
</div>