Make shiny-mode-tab and shinylive links in code block site-wide f…

…eatures
posit-dev · Jan 12, 2024 · 8afa9dc · 8afa9dc
1 parent 7212f3b
commit 8afa9dc
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 91 deletions.
diff --git a/components/_partials/components.css b/components/_partials/components.css
@@ -202,9 +202,9 @@ pre.console code {
 /* Tab styling */
 
 .panel-tabset .nav-tabs {
-  display: flex !important;
-  align-items: flex-end !important;
-  justify-content: flex-end !important;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
   border-bottom: 1px solid #E9ECEF;
   border-top: none;
   border-left: none;
@@ -256,41 +256,3 @@ main a.nav-link:hover {
   border: 1px solid #E9ECEF;
   border-radius: 10px;
 }
-
-/* Shiny App Mode Tabset (Express/Core) */
-
-.shiny-mode-tabset > .nav-tabs {
-  padding-inline: 0.5rem;
-  border-start-end-radius: 0.5rem;
-  border-start-start-radius: 0.5rem;
-  border-bottom: 2px solid var(--bs-blue);
-  justify-content: flex-start !important;
-  font-size: 0.95em;
-  line-height: 1.5;
-}
-
-.shiny-mode-tabset > .nav-tabs,
-.shiny-mode-tabset > .nav-tabs > .nav-item > .nav-link,
-.shiny-mode-tabset > .nav-tabs > .nav-item > .nav-link.active {
-  background-color: var(--bs-blue);
-  color: var(--bs-white);
-}
-
-.shiny-mode-tabset > .nav-tabs > .nav-item > .nav-link:hover {
-  border-bottom-color: transparent !important;
-}
-
-.shiny-mode-tabset > .nav-tabs > .nav-item > .nav-link.active {
-  font-weight: 600;
-  border-bottom-color: var(--bs-white) !important;
-}
-
-.shiny-mode-tabset > .tab-content {
-  padding-top: 0;
-}
-
-.shiny-mode-tabset > .tab-content .sourceCode {
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-  border-block-start-width: 0;
-}
diff --git a/components/_partials/componentsjs.html b/components/_partials/componentsjs.html
@@ -1,53 +1,6 @@
 <script type="text/javascript">
-
 document.querySelectorAll('.tab-pane:first-of-type').forEach((x) => x.classList.add("show"))
 
 const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
 const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
-
-function addShinyliveEditLinks() {
-  const codeWithLink = document.querySelectorAll('.sourceCode[data-shinylive]')
-  codeWithLink.forEach(el => {
-    el.classList.add("code-with-shinylive-link")
-    const url = el.dataset.shinylive
-
-    // <a class="edit-shinylive-button btn btn-link" href="<%= app.shinylive %>" data-bs-toggle="tooltip" data-bs-title="Edit in Shinylive" data-bs-placement="bottom">
-    //  <i class="bi bi-lightning-fill"></i> <span class="visually-hidden">Edit in Shinylive</span>
-    // </a>
-
-    const link = document.createElement('a')
-    link.classList.add('edit-shinylive-button', 'btn', 'btn-link')
-    link.href = url
-    link.dataset.bsToggle = 'tooltip'
-    link.dataset.bsTitle = 'Edit in Shinylive'
-    link.dataset.bsPlacement = 'bottom'
-
-    const icon = document.createElement('i')
-    icon.classList.add('bi', 'bi-lightning-fill')
-    link.appendChild(icon)
-
-    const span = document.createElement('span')
-    span.classList.add('visually-hidden')
-    span.innerText = 'Edit in Shinylive'
-    link.appendChild(span)
-
-    const btnCopy = el.querySelector('.code-copy-button')
-    if (btnCopy) {
-      btnCopy.parentElement.insertBefore(link, btnCopy)
-    } else {
-      if (el.matches('pre')) {
-        el.appendChild(link)
-      } else {
-        el.querySelector('pre').appendChild(link)
-      }
-    }
-
-    if (window.bootstrap?.Tooltip) {
-      new bootstrap.Tooltip(link)
-    }
-    el.removeAttribute('data-shinylive')
-  })
-}
-
-addShinyliveEditLinks()
 </script>
diff --git a/include-before-body.html b/include-before-body.html
@@ -1,3 +1,3 @@
 <!-- Google Tag Manager (noscript) -->
- <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KHBDBW7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-<!-- End Google Tag Manager (noscript) --> 
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KHBDBW7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
diff --git a/include-in-header.html b/include-in-header.html
@@ -24,4 +24,56 @@
       .forEach(lnk => lnk.setAttribute("rel", "noopener noreferrer"))
   );
 </script>
-<!-- End Add rel="noopener noreferrer" to each target="_blank" -->
+<!-- End Add rel="noopener noreferrer" to each target="_blank" -->
+
+<script type="text/javascript">
+(function() {
+  function addShinyliveEditLinks() {
+    const codeWithLink = document.querySelectorAll('.sourceCode[data-shinylive]')
+    codeWithLink.forEach(el => {
+      el.classList.add("code-with-shinylive-link")
+      const url = el.dataset.shinylive
+
+      // <a class="edit-shinylive-button btn btn-link" href="<%= app.shinylive %>" data-bs-toggle="tooltip" data-bs-title="Edit in Shinylive" data-bs-placement="bottom">
+      //  <i class="bi bi-lightning-fill"></i> <span class="visually-hidden">Edit in Shinylive</span>
+      // </a>
+
+      const link = document.createElement('a')
+      link.classList.add('edit-shinylive-button', 'btn', 'btn-link')
+      link.href = url
+      link.dataset.bsToggle = 'tooltip'
+      link.dataset.bsTitle = 'Edit in Shinylive'
+      link.dataset.bsPlacement = 'bottom'
+
+      const icon = document.createElement('i')
+      icon.classList.add('bi', 'bi-lightning-fill')
+      link.appendChild(icon)
+
+      const span = document.createElement('span')
+      span.classList.add('visually-hidden')
+      span.innerText = 'Edit in Shinylive'
+      link.appendChild(span)
+
+      const btnCopy = el.querySelector('.code-copy-button')
+      if (btnCopy) {
+        btnCopy.parentElement.insertBefore(link, btnCopy)
+      } else {
+        if (el.matches('pre')) {
+          el.appendChild(link)
+        } else {
+          el.querySelector('pre').appendChild(link)
+        }
+      }
+
+      if (window.bootstrap?.Tooltip) {
+        new bootstrap.Tooltip(link)
+      }
+      el.removeAttribute('data-shinylive')
+    })
+  }
+
+  document.readyState === 'loading'
+    ? document.addEventListener('DOMContentLoaded', addShinyliveEditLinks)
+    : addShinyliveEditLinks()
+})()
+</script>
diff --git a/quarto-style.scss b/quarto-style.scss
@@ -1657,3 +1657,44 @@ btn.action-button:hover {
 .border-bottom.blue {
   border-bottom: 1px solid #007BB7 !important;
 }
+
+// Shiny Mode Tabset Code Window
+.shiny-mode-tabset {
+  > .nav-tabs,
+  > .nav-tabs > .nav-item > .nav-link,
+  > .nav-tabs > .nav-item > .nav-link.active {
+    background-color: var(--bs-blue);
+    color: var(--bs-white);
+  }
+
+	> .nav-tabs {
+		padding-inline: 0.5rem;
+		border-start-end-radius: 0.5rem;
+		border-start-start-radius: 0.5rem;
+		border-bottom: 2px solid var(--bs-blue);
+		justify-content: flex-start !important;
+		font-size: 0.95em;
+		line-height: 1.5;
+
+		> .nav-item {
+			> .nav-link {
+				&:hover {
+					border-bottom-color: transparent !important;
+				}
+				&.active {
+					font-weight: 600;
+					border-bottom-color: var(--bs-white) !important;
+				}
+			}
+		}
+	}
+
+	> .tab-content {
+		padding-top: 0;
+		.sourceCode {
+			border-start-start-radius: 0;
+			border-start-end-radius: 0;
+			border-block-start-width: 0;
+		}
+	}
+}