rest_framework 0.8.17 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b8d9a14de396b6832c13e0f3e1f2627decb432af03c6a2cbb59ce27328cdd7c
-  data.tar.gz: 6d1e675245643d96e2b35aaaadd9118eb441025a1bb7acc303db63d6761dc79c
+  metadata.gz: e2e028b70ec7cad48ee82a18f8e7b68b6c5d2c3d79bf058ab9a9dfc9f1b428b6
+  data.tar.gz: 70f703c74d2e2d7228f0bf09c8510958a6860bf9a7cc2d7e6f586a8975e0374a
 SHA512:
-  metadata.gz: a0ef4d98bec92656d0541f34aebd652d30b90af0bdde8ea91e0b1809b82ee381bdbfef0ea04235b2c24005ec43646ad59b7fce01d3eda1312e48e1a976bd8092
-  data.tar.gz: d64fdd4c884a6173c9df9f87074748290b1093917a053acfa70b5b6579bbe07f7479adf15b226178fb784181edfe28ac3cbce461c13b64372e988d5abbab5966
+  metadata.gz: 659e40f0cd59dfc249a3799baca4c9a6b0109302904d4874d998c4d656c1ffdd1e0d11f4e463d92cc9006bcb174b7fe72f61bc01e914ed57428616aa56e662bd
+  data.tar.gz: a172ab0072d67e52280f058ea38694ffd22d543697bcae1a73fc5fc9ec595101d606b4ff681e1f11ba27beca86d3376eda40907b95ae8bf213a6a86c2eb6e3ae

data/VERSION

@@ -1 +1 @@
-0.8.17
+0.9.0

data/app/views/rest_framework/_head.html.erb

@@ -135,11 +135,15 @@ html[data-bs-theme="dark"] .rrf-routes .rrf-route-group-header:hover {
 }
 .rrf-copy .rrf-copy-link {
   position: absolute;
-  top: .5em;
-  right: .5em;
+  top: .25em;
+  right: .4em;
   transition: 0.3s ease;
+  font-size: 1.5em;
 }
-.rrf-copy .rrf-copy-link.rrf-clicked{
+.rrf-copy .rrf-copy-link.rrf-clicked {
+  color: green;
+}
+.rrf-copy .rrf-copy-link.rrf-clicked:hover {
   color: green;
 }
 </style>
@@ -167,8 +171,6 @@ html[data-bs-theme="dark"] .rrf-routes .rrf-route-group-header:hover {
 
   // Set the mode, given a "selected" mode.
   const rrfSetSelectedMode = (selectedMode) => {
-    const modeComponent = document.getElementById("rrfModeComponent")
-
     // Anything except "light" or "dark" is casted to "system".
     if (selectedMode !== "light" && selectedMode !== "dark") {
       selectedMode = "system"
@@ -178,16 +180,19 @@ html[data-bs-theme="dark"] .rrf-routes .rrf-route-group-header:hover {
     localStorage.setItem("rrfMode", selectedMode)
 
     // Set the mode selector to the selected mode.
-    let labelHTML
-    modeComponent.querySelectorAll("button[data-rrf-mode-value]").forEach((el) => {
-      if (el.getAttribute("data-rrf-mode-value") === selectedMode) {
-        el.classList.add("active")
-        labelHTML = el.querySelector("i").outerHTML.replace("ms-2", "me-1")
-      } else {
-        el.classList.remove("active")
-      }
-    })
-    modeComponent.querySelector("button[data-bs-toggle]").innerHTML = labelHTML
+    const modeComponent = document.getElementById("rrfModeComponent")
+    if (modeComponent) {
+      let labelHTML
+      modeComponent.querySelectorAll("button[data-rrf-mode-value]").forEach((el) => {
+        if (el.getAttribute("data-rrf-mode-value") === selectedMode) {
+          el.classList.add("active")
+          labelHTML = el.querySelector("i").outerHTML.replace("ms-2", "me-1")
+        } else {
+          el.classList.remove("active")
+        }
+      })
+      modeComponent.querySelector("button[data-bs-toggle]").innerHTML = labelHTML
+    }
 
     // Get the real mode to use.
     realMode = rrfGetRealMode(selectedMode)
@@ -218,10 +223,14 @@ html[data-bs-theme="dark"] .rrf-routes .rrf-route-group-header:hover {
     }
   }
 
-  // Initialize dark/light mode.
+  // Initialize dark/light mode before page fully loads to prevent flash.
+  rrfSetSelectedMode(localStorage.getItem("rrfMode"))
+
+  // Initialize dark/light mode after page load (mostly so mode component is updated).
   document.addEventListener("DOMContentLoaded", (event) => {
-    const selectedMode = localStorage.getItem("rrfMode")
-    rrfSetSelectedMode(selectedMode)
+    rrfSetSelectedMode(localStorage.getItem("rrfMode"))
+
+    // Also set up mode selector.
     document.querySelectorAll("#rrfModeComponent button[data-rrf-mode-value]").forEach((el) => {
       el.addEventListener("click", (event) => {
         rrfSetSelectedMode(event.target.getAttribute("data-rrf-mode-value"))
@@ -246,7 +255,7 @@ html[data-bs-theme="dark"] .rrf-routes .rrf-route-group-header:hover {
 
 document.addEventListener("DOMContentLoaded", (event) => {
   // Pretty-print JSON.
-  document.querySelectorAll(".language-json").forEach((el, index) => {
+  document.querySelectorAll(".language-json").forEach((el) => {
     el.innerHTML = neatJSON(JSON.parse(el.innerText), {
       wrap: 80,
       afterComma: 1,
@@ -263,17 +272,37 @@ document.addEventListener("DOMContentLoaded", (event) => {
   hljs.highlightAll()
 
   // Replace text node links with anchor tag links.
-  document.querySelectorAll(".rrf-copy code").forEach((el, index) => {
+  document.querySelectorAll(".rrf-copy code").forEach((el) => {
     el.innerHTML = rrfLinkify(el.innerHTML)
   })
 
-  // Insert copy link and callback to copy contents of `<code>` element.
-  document.querySelectorAll("rrf-copy").forEach((el, index) => {
+  // Insert copy links.
+  document.querySelectorAll(".rrf-copy").forEach((el) => {
     el.insertAdjacentHTML(
       "afterbegin",
-      "<a class=\"rrf-copy-link\" onclick=\"return rrfCopyToClipboard(this)\" href=\"#\">Copy to Clipboard</a>",
+      '<a class="rrf-copy-link" title="Copy to Clipboard" href="#"><i class="bi bi-clipboard-fill"></i></a>',
     )
   })
+
+  // Copy link implementation.
+  document.querySelectorAll(".rrf-copy-link").forEach((el) => {
+    el.addEventListener("click", (event) => {
+      const range = document.createRange()
+      range.selectNode(el.nextSibling)
+      window.getSelection().removeAllRanges()
+      window.getSelection().addRange(range)
+      if (document.execCommand("copy")) {
+        // Trigger clicked animation.
+        el.classList.add("rrf-clicked")
+        el.innerHTML = '<i class="bi bi-clipboard-check-fill">'
+        setTimeout(() => {
+          el.classList.remove("rrf-clicked")
+          el.innerHTML = '<i class="bi bi-clipboard-fill">'
+        }, 1000)
+      }
+      event.preventDefault()
+    })
+  })
 })
 
 // Convert plain-text links to anchor tag links.
@@ -292,26 +321,6 @@ function rrfReplaceDocument(content) {
   document.dispatchEvent(new Event("DOMContentLoaded", {bubbles: true, cancelable: true}))
 }
 
-// Copy the element's next `<code>` sibling's content to the clipboard.
-function rrfCopyToClipboard(element) {
-  let range = document.createRange()
-  range.selectNode(element.nextSibling)
-  window.getSelection().removeAllRanges()
-  window.getSelection().addRange(range)
-  if (document.execCommand("copy")) {
-    // Trigger clicked animation.
-    element.classList.add("rrf-clicked")
-    element.innerText = "Copied!"
-    setTimeout(() => {
-      element.classList.remove("rrf-clicked")
-      element.innerText = "Copy to Clipboard"
-    }, 700)
-  }
-
-  // Return false to prevent normal link behavior.
-  return false
-}
-
 // Refresh the window as a `GET` request.
 function rrfGet(button) {
   button.disabled = true
@@ -352,7 +361,7 @@ function rrfSubmitRawForm(button) {
     // Add file(s) to `formData`.
     const rawFilesForm = document.getElementById("rawFilesForm")
     if (rawFilesForm) {
-      rawFilesForm.querySelectorAll("input[type=file]").forEach((el, index) => {
+      rawFilesForm.querySelectorAll("input[type=file]").forEach((el) => {
         const files = el.files
         for (let i = 0; i < files.length; i++) {
           formData.append(el.name, files[i])

data/docs/assets/js/rest_framework.js

@@ -19,8 +19,6 @@
 
   // Set the mode, given a "selected" mode.
   const rrfSetSelectedMode = (selectedMode) => {
-    const modeComponent = document.getElementById("rrfModeComponent")
-
     // Anything except "light" or "dark" is casted to "system".
     if (selectedMode !== "light" && selectedMode !== "dark") {
       selectedMode = "system"
@@ -30,16 +28,19 @@
     localStorage.setItem("rrfMode", selectedMode)
 
     // Set the mode selector to the selected mode.
-    let labelHTML
-    modeComponent.querySelectorAll("button[data-rrf-mode-value]").forEach((el) => {
-      if (el.getAttribute("data-rrf-mode-value") === selectedMode) {
-        el.classList.add("active")
-        labelHTML = el.querySelector("i").outerHTML.replace("ms-2", "me-1")
-      } else {
-        el.classList.remove("active")
-      }
-    })
-    modeComponent.querySelector("button[data-bs-toggle]").innerHTML = labelHTML
+    const modeComponent = document.getElementById("rrfModeComponent")
+    if (modeComponent) {
+      let labelHTML
+      modeComponent.querySelectorAll("button[data-rrf-mode-value]").forEach((el) => {
+        if (el.getAttribute("data-rrf-mode-value") === selectedMode) {
+          el.classList.add("active")
+          labelHTML = el.querySelector("i").outerHTML.replace("ms-2", "me-1")
+        } else {
+          el.classList.remove("active")
+        }
+      })
+      modeComponent.querySelector("button[data-bs-toggle]").innerHTML = labelHTML
+    }
 
     // Get the real mode to use.
     realMode = rrfGetRealMode(selectedMode)
@@ -70,10 +71,14 @@
     }
   }
 
-  // Initialize dark/light mode.
+  // Initialize dark/light mode before page fully loads to prevent flash.
+  rrfSetSelectedMode(localStorage.getItem("rrfMode"))
+
+  // Initialize dark/light mode after page load (mostly so mode component is updated).
   document.addEventListener("DOMContentLoaded", (event) => {
-    const selectedMode = localStorage.getItem("rrfMode")
-    rrfSetSelectedMode(selectedMode)
+    rrfSetSelectedMode(localStorage.getItem("rrfMode"))
+
+    // Also set up mode selector.
     document.querySelectorAll("#rrfModeComponent button[data-rrf-mode-value]").forEach((el) => {
       el.addEventListener("click", (event) => {
         rrfSetSelectedMode(event.target.getAttribute("data-rrf-mode-value"))

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rest_framework
 version: !ruby/object:Gem::Version
-  version: 0.8.17
+  version: 0.9.0
 platform: ruby
 authors:
 - Gregory N. Schmit