added influxdb selector functionality

assets/js/content-interactions.js

@@ -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) {

assets/js/influxdb-url.js

@@ -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()
+})

assets/js/region-url.js

@@ -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()

assets/styles/layouts/_modal.scss

@@ -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} 
+  }
+}

assets/styles/layouts/_syntax-highlighting.scss

@@ -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 */

assets/styles/layouts/_top-nav.scss

@@ -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;
   }

assets/styles/layouts/article/_telegraf-plugins.scss

@@ -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;
+      top: 50%;
-      left: .35rem;
+      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%);
     }
   }
 }

assets/styles/sidebar-closed.scss

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

assets/styles/styles-default.scss

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

data/influxdb_urls.yml

@@ -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

layouts/partials/footer/influxdb-url-modal.html

@@ -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 }}
+              <div class="providers">
-    <ul><li data-url="{{ .url }}">{{ .name }}</li></ul>
-  {{ end }}
-  {{ if .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 }}
+                  </div>
-  {{ end }}
                 {{ 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>

layouts/partials/footer/javascript.html

@@ -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" }}
+{{ $influxdbURLs := resources.Get "js/influxdb-url.js" }}
-{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $regionURLs | resources.Concat "js/footer.bundle.js" }}
+{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs | resources.Concat "js/footer.bundle.js" }}
 
 <script type="text/javascript" src="{{ $footerjs.RelPermalink }}" ></script>

layouts/partials/topnav.html

@@ -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>