Added abilitly to toggle codeblocks to fullscreen (#3811)

* added abilitly to toggle codeblocks to fullscreen

* added trailing newlines

Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com>

assets/js/content-interactions.js

@@ -17,7 +17,8 @@ var elementWhiteList = [
   ".truncate-toggle",
   ".children-links a",
   ".list-links a",
-  "a.url-trigger"
+  "a.url-trigger",
+  "a.fullscreen-close"
 ]
 
 function scrollToAnchor(target) {

assets/js/fullscreen-code.js

@@ -0,0 +1,48 @@
+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>')
+});

assets/styles/layouts/_fullscreen-code.scss

@@ -0,0 +1,38 @@
+////////////////////////// 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;
+  }
+}

assets/styles/layouts/article/_code.scss

@@ -87,6 +87,27 @@ pre .api {
   &.put {background: $br-pulsar; }
 }
 
+///////////////////////// 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 ////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////

assets/styles/styles-default.scss

@@ -26,7 +26,8 @@
         "layouts/url-selector",
         "layouts/feature-callouts",
         "layouts/v1-overrides",
-        "layouts/notifications";
+        "layouts/notifications",
+        "layouts/fullscreen-code";
 
 // Import Product-specifc color schemes
 @import "product-overrides/telegraf",

content/example.md

@@ -2,7 +2,7 @@
 title: Example post
 description: This is just an example post to show the format of new 2.0 posts
 weight: 1
-# draft: true
+draft: true
 related:
   - /influxdb/v2.0/write-data/
   - /influxdb/v2.0/write-data/quick-start

layouts/partials/footer.html

@@ -2,9 +2,10 @@
 {{ $product := index $productPathData 0 }}
 {{ $currentVersion := index $productPathData 1 | default "v2.0"}}
 
-  <!-- InfluxDB URL modal -->
+  <!-- Modals -->
   {{ partial "footer/influxdb-url-modal.html" . }}
   {{ partial "footer/feature-callout.html" . }}
+  {{ partial "footer/fullscreen-code.html" . }}
 
   <!-- Docsearch JS -->
   {{ partial "footer/search.html" . }}

layouts/partials/footer/fullscreen-code.html

@@ -0,0 +1,4 @@
+<div class="fullscreen-code highlight">
+  <div id="fullscreen-code-placeholder"></div>
+  <a class="fullscreen-close"><span class="icon-x"></span></a>
+</div>

layouts/partials/footer/javascript.html

@@ -8,7 +8,8 @@
 {{ $keybindings := resources.Get "js/keybindings.js" }}
 {{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }}
 {{ $fluxCurrentTime := resources.Get "js/flux-current-time.js" }}
-{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $influxdbURLs $featureCallouts $notifications $keybindings | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
+{{ $fullscreenCode := resources.Get "js/fullscreen-code.js" }}
+{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $influxdbURLs $featureCallouts $notifications $keybindings $fullscreenCode | 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 }}