Add modal functionality to display HTML/JavaScript code

Author: jairomelo

chapters/what-is-an-api.qmd

@@ -5,9 +5,23 @@ execute:
 format:
     html:
         code-fold: true
+        include-in-header:
+            - text:
+                <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
 lightbox: true
 ---
 
+```{=html}
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    MicroModal.init({
+        awaitOpenAnimation: true,
+        awaitCloseAnimation: true
+    });
+});
+</script>
+```
+
 An API (Application Programming Interface) is a set of rules and protocols enabling software programs to communicate and share information. While the term is often associated with "web APIs," it encompasses a broader concept. For instance, an API might allow a library to share its collection data with a museum or enable a weather service to provide updates to a news organization. APIs operate based on predefined rules set by developers, specifying how data can be accessed and used. While some APIs are public, most are internal, facilitating communication between systems within an organization. 
 
 ## Using an API
@@ -72,6 +86,11 @@ displayCat(bengalCatData);
 
 You can even get a random cat image!
 
+**<a href="#" data-micromodal-trigger="mymodal" tabindex="0" class="popup-link">
+  <i class="bi bi-box-arrow-up-right"></i>
+  Code
+</a>**
+
 ::: {#cat-container .cell-html}
 <script>
 window.getRandomCat = async function () {
@@ -142,3 +161,55 @@ In research, APIs bridge the gap between data and analysis by automating data co
 ## In summary
 APIs are not just tools for developers—they hold immense potential for researchers, too. By providing structured, dynamic access to datasets, APIs enable scholars to automate data collection, access real-time information, and integrate diverse data sources into their workflows. Whether you’re studying digital humanities, analyzing climate data, or investigating social media trends, APIs allow you to retrieve exactly the data you need, at scale and with precision. Embracing APIs as part of your research toolkit opens doors to innovative methodologies and insights that might otherwise remain out of reach.
 :::
+
+
+:::::: {#mymodal .modal .micromodal-slide aria-hidden="true"}
+::::: {.modal__overlay tabindex="-1" data-micromodal-close="true"}
+:::: {.modal__container role="dialog" aria-modal="true" aria-labelledby="mymodal-title"}
+
+<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
+
+<header>
+## Code {#mymodal-title}
+</header>
+
+::: {#modal-1-content}
+
+<pre><code>
+&lt;script&gt;
+window.getRandomCat = async function () {
+    
+    const response = await fetch("https://api.thecatapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=1");
+    if (!response.ok) throw new Error("Failed to fetch random cat.");
+    const data = await response.json();
+
+    const cat = data[0];
+    const cat_id = cat.id;
+
+    const cat_detailed_info = await fetch(`https://api.thecatapi.com/v1/images/${cat_id}`);
+    const cat_detailed_info_json = await cat_detailed_info.json();
+
+    // Safely access items that might be undefined or empty
+    const breed = cat_detailed_info_json.breeds && cat_detailed_info_json.breeds.length > 0 ? cat_detailed_info_json.breeds[0].name : "Unknown";
+    const description = cat_detailed_info_json.breeds && cat_detailed_info_json.breeds.length > 0 ? cat_detailed_info_json.breeds[0].description : "Unknown";
+
+    document.getElementById("cat-image").innerHTML = `
+        &lt;div class="card" style="max-width: 300px; margin: 15px auto;"&gt;
+            &lt;img src="${cat.url}" class="card-img-top" alt="Random Cat"&gt;
+            &lt;div class="card-body"&gt;
+                &lt;h5 class="card-title"&gt;Breed: ${breed}&lt;/h5&gt;
+                &lt;p class="card-text"&gt;${description}&lt;/p&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    `;
+};
+&lt;/script&gt;
+&lt;button onclick="getRandomCat()" class="btn btn-primary" style="padding: 10px 20px; font-size: 16px; display: block; margin: 0 auto;"&gt;Click here to get a random cat :)&lt;/button&gt;
+&lt;div id="cat-image" style="margin-top: 15px;"&gt;&lt;/div&gt;
+</code></pre>
+
+:::
+
+::::
+:::::
+::::::

styles.css

@@ -12,6 +12,9 @@
     justify-content: flex-end;
 }
 
+#cat-container {
+  margin-bottom: 3em;
+}
 
 .carousel-container {
   position: relative;
@@ -45,4 +48,100 @@
 }
 
 .carousel-button.prev { left: 10px; }
-.carousel-button.next { right: 10px; }
+.carousel-button.next { right: 10px; }
+
+/* Micromodal author: James Goldie. https://jimjam-slam.github.io/quarto-experiments/ */
+/* micromodal css: essentials for toggling/animating the dialog
+  (otherwise it just sits there on the page!)
+*/
+
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal__container {
+  background-color: #fff;
+  padding: 30px;
+  /* max-width: 500px; */
+  width: 90%;
+  max-height: 90vh;
+  border-radius: 4px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+@keyframes mmfadeIn {
+  from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes mmfadeOut {
+  from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@keyframes mmslideIn {
+  from { transform: translateY(15%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes mmslideOut {
+  from { transform: translateY(0); }
+    to { transform: translateY(-10%); }
+}
+
+.micromodal-slide {
+  display: none;
+}
+
+.micromodal-slide.is-open {
+  display: block;
+}
+
+.micromodal-slide[aria-hidden="false"] .modal__overlay {
+  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="false"] .modal__container {
+  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
+}
+
+.micromodal-slide[aria-hidden="true"] .modal__overlay {
+  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="true"] .modal__container {
+  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
+}
+
+.micromodal-slide .modal__container,
+.micromodal-slide .modal__overlay {
+  will-change: transform;
+}
+
+.modal__close {
+  background:transparent;
+  border: 0;
+  float: right;
+}
+
+.modal__close::before {
+  content: "\2715";
+}
+
+/* Aditional styles for popup */
+.popup-link {
+  cursor: pointer;
+  color: #6c757d;
+  text-decoration: none;
+  margin-bottom: 1em;
+  display: inline-block;
+}