Code placeholders (#4966)

* WIP code-placeholders

* add ability to custom code-placeholders

* removed testing code

* revert unnecessary changes

* remove commented css

---------

Co-authored-by: Jason Stirnaman <stirnamanj@gmail.com>

assets/js/code-placeholders.js

@@ -0,0 +1,44 @@
+const placeholderWrapper = '.code-placeholder-wrapper';
+const placeholderElement = 'var.code-placeholder';
+const codePlaceholders = $(placeholderElement);
+const editIcon = "<span class='code-placeholder-edit-icon cf-icon Pencil'></span>";
+
+// When clicking a placeholder, append the edit input
+codePlaceholders.on('click', function() {
+  var placeholderData = $(this)[0].dataset;
+  var placeholderID = placeholderData.codeVar;
+  var placeholderValue = placeholderData.codeVarValue;
+  var placeholderInputWrapper = $('<div class="code-input-wrapper"></div>');
+  var placeholderInput = `<input class="placeholder-edit" id="${placeholderID}" value="${placeholderValue}" spellcheck=false onblur="submitPlaceholder($(this))" oninput="updateInputWidth($(this))" onkeydown="closeOnEnter($(this)[0], event)"></input>`;
+
+  $(this).before(placeholderInputWrapper)
+  $(this).siblings('.code-input-wrapper').append(placeholderInput);
+  $(`input#${placeholderID}`).width(`${placeholderValue.length}ch`);
+  $(`input#${placeholderID}`).focus().select();
+  $(this).css('opacity', 0);
+})
+
+function submitPlaceholder(placeholderInput) {
+  var placeholderID = placeholderInput.attr('id');
+  var placeholderValue = placeholderInput[0].value;
+  var placeholderInput = $(`input.placeholder-edit#${placeholderID}`);
+
+  $(`*[data-code-var='${placeholderID}']`).each(function() {
+    $(this).attr('data-code-var-value', placeholderValue);
+    $(this).html(placeholderValue + editIcon);
+    $(this).css('opacity', 1);
+  })
+  placeholderInput.parent().remove();
+}
+
+function updateInputWidth(placeholderInput) {
+  var placeholderLength = placeholderInput[0].value.length
+
+  placeholderInput.width(`${placeholderLength}ch`)
+}
+
+function closeOnEnter(input, event) {
+  if (event.which == 13) {
+    input.blur();
+  }
+}

assets/js/influxdb-url.js

@@ -287,12 +287,6 @@ updateUrls(placeholderUrls, getUrls())
 // Set active radio button on page load
 setRadioButtons(getUrls())
 
-// Update URLs whenever you focus on the browser tab
-$(window).focus(function() {
-  updateUrls(getPrevUrls(), getUrls())
-  setRadioButtons(getUrls())
-});
-
 ////////////////////////////////////////////////////////////////////////////////
 ////////////////////////// Modal window interactions ///////////////////////////
 ////////////////////////////////////////////////////////////////////////////////

assets/styles/layouts/_code-controls.scss

@@ -115,6 +115,6 @@
     line-height: 1.75rem;
     font-family: $code;
 
-    @import "article/code-api-methods";
+    @import "article/code";
   }
 }

assets/styles/layouts/article/_code.scss

@@ -76,7 +76,7 @@ pre {
 }
 
 // Styles for calling out specific code in code blocks
-span.code-callout {
+span.code-callout, .code-placeholder {
   font-weight:bold;
   margin:0 .15rem;
 
@@ -85,6 +85,76 @@ span.code-callout {
   &.orange {color: $r-curacao;}
 }
 
+.code-placeholder-wrapper {
+  display: inline;
+  position: relative;
+
+  .code-placeholder {
+    display: inline-block;
+    margin:0 .15rem;
+    padding: 0;
+    line-height: 1.4em;
+    color: $code-placeholder;
+    font-weight:bold;
+    border-bottom: 1px dotted;
+    transition: color .2s;
+    cursor: pointer;
+    
+    .code-placeholder-edit-icon{
+      font-style: normal;
+      &::before {
+        margin-left: .2rem;
+        font-size: .9em;
+        transition: opacity .2s;
+        opacity: .65;
+        z-index: -1;
+      }
+    }
+  
+    &:hover {
+      color: $code-placeholder-hover;
+      .code-placeholder-edit-icon::before {opacity: 1}
+    }
+  }
+
+  .code-input-wrapper {
+    position: absolute;
+    top: -3px;
+    left: -4.5px;
+    z-index: 1;
+    color: inherit;
+
+    input.placeholder-edit {
+      width: 100%;
+      max-width: 100%;
+      border: 1px solid $sidebar-search-bg;
+      border-radius: $radius * 2;
+      background-color: $sidebar-search-bg;
+      padding: 2px 20px 2px 6px;
+      color: $code-placeholder-hover;
+      font-weight: bold;
+      &:focus {
+        outline: none;
+        border-color: rgba($code-placeholder-hover, .75);
+        box-shadow: 1px 1px 8px rgba($code-placeholder-hover, .5);
+        border-radius: 2px;
+      }
+    }
+
+    &:hover {cursor: pointer;}
+
+    &:after {
+      content: "\e937";
+      font-family: 'icomoon-v4';
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 3px;
+    }
+  }
+}
+
+
 ////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////// MEDIA QUERIES ////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////

assets/styles/themes/_theme-dark.scss

@@ -216,6 +216,10 @@ $diagram-arrow: $g6-smoke;
 
 $flux-water-process-img: url('/img/flux/0-x-water-process-dark.svg');
 
+// Code placeholder colors
+$code-placeholder: #d43587;
+$code-placeholder-hover: $br-teal;
+
 @import "dark/telegraf",
         "dark/chronograf",
         "dark/kapacitor";

assets/styles/themes/_theme-light.scss

@@ -215,6 +215,10 @@ $flux-water-process-img: url('/img/flux/0-x-water-process-light.svg') !default;
 // Diagram colors
 $diagram-arrow: $g14-chromium !default;
 
+// Code placeholder colors
+$code-placeholder: $br-new-magenta !default;
+$code-placeholder-hover: $br-new-purple !default;
+
 @import "light/telegraf",
         "light/chronograf",
         "light/kapacitor";

content/influxdb/cloud-dedicated/get-started/_index.md

@@ -117,4 +117,4 @@ There a two types of tokens:
   - Pricing
   <!-- - Infrastructure management -->
 
-{{< page-nav next="/influxdb/cloud-dedicated/get-started/setup/" >}}
+{{< page-nav next="/influxdb/cloud-dedicated/get-started/setup/" >}}

layouts/partials/footer/javascript.html

@@ -16,11 +16,13 @@
 {{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
 {{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js" }}
 {{ $ioxWayfinding := resources.Get "/js/iox-wayfinding.js"}}
+{{ $codePlaceholders := resources.Get "/js/code-placeholders.js" }}
 {{ $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 }}
-{{ $dateTimejs := slice $dateTime | resources.Concat "js/datetime.js" | resources.Fingerprint }}
-{{ $influxdbGSTimestampsjs := slice $influxdbGSTimestamps | resources.Concat "js/custom-timestamps.js" | resources.Fingerprint }}
-{{ $ioxWayfindingjs := slice $ioxWayfinding | resources.Concat "js/iox-wayfinding.js" | resources.Fingerprint }}
+{{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }}
+{{ $dateTimejs := $dateTime | resources.Fingerprint }}
+{{ $influxdbGSTimestampsjs := $influxdbGSTimestamps | resources.Fingerprint }}
+{{ $ioxWayfindingjs := $ioxWayfinding | resources.Fingerprint }}
+{{ $codePlaceholdersjs := $codePlaceholders | resources.Fingerprint }}
 
 <!-- Load cloudUrls array -->
 <script type="text/javascript">
@@ -69,3 +71,8 @@
 {{ if in (slice "cloud" "cloud-serverless") (index (findRE "[^/]+.*?" .Page.RelPermalink) 1) }}
 <script type="text/javascript" src="{{ $ioxWayfinding.RelPermalink }}"></script>
 {{ end }}
+
+<!-- Load code placeholders js when code-placeholders shortcode is present -->
+{{ if .Page.HasShortcode "code-placeholders" }}
+<script type="text/javascript" src="{{ $codePlaceholdersjs.RelPermalink }}"></script>
+{{ end }}

layouts/shortcodes/code-placeholders.html

@@ -1,6 +1,6 @@
 {{- $regex := .Get 0 -}}
 {{- $color := .Get 1 | default "magenta" -}}
-{{- $elReplace := print "<var class='code-placeholder " $color "'>$0</var>" -}}
+{{- $elReplace := print "<div class='code-placeholder-wrapper'><var title='Edit $0' class='code-placeholder " $color "' data-code-var='$0' data-code-var-value='$0'>$0<span class='code-placeholder-edit-icon cf-icon Pencil'></span></var></div>" -}}
 {{- $code := .Inner | markdownify -}}
 {{- $codeCallout := replaceRE $regex $elReplace $code -}}
 {{ $codeCallout | safeHTML }}