image zoom modal (#15975)

* POC image modal

* standardize image size

* fixes

* fixes

* reverse an earlier commit and tweak further

* experiments

* more playing around

* simplify

* David's magic

* david fix

* test

* test 2

* Final fix

* now the final fix

_includes/head.html

@@ -69,6 +69,7 @@
   <script defer src="/assets/bootstrap/js/bootstrap.min.js"></script>
   <script defer src="/assets/js/docs.js"></script>
   <script defer src="/assets/js/copy.js"></script>
+  <script defer src="/assets/js/modal.js"></script>
   {%- endif -%}
   {%- if site.local_search -%}
   <script defer src="/assets/js/search.js"></script>

_includes/image-modal.html

@@ -0,0 +1,5 @@
+<div id="img-modal" class="modal">
+  <span class="close" id="img-modal-close">&times;</span>
+    <img src="/" alt="/" class="modal-content" id="img-modal-img">
+    <div id="img-modal-caption"></div>
+  </div>

_layouts/docs.html

@@ -52,6 +52,8 @@
                                 {%- assign my_min = page.toc_min | default: site.toc_min | default: 2 -%}
                                 {%- assign my_max = page.toc_max | default: site.toc_max | default: 3 -%}
                                 {%- assign my_name = page.url | default: "unnamed" -%}
+                                <div id="side-toc-title">Contents:</div>
+                                {% include image-modal.html %}
                                 <div class="side-toc-title">Page details</div>
                                 <div class="metadata-items">
                                     <ul>

_scss/_content.scss

@@ -124,3 +124,83 @@ a.glossary {
 a.accept-eula {
   font-weight: bold;
 }
+
+/* Style the Image Used to Trigger the Modal  */
+main img {
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+main img:hover {opacity: 0.7;}
+
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+}
+
+/* Modal Content (Image) */
+.modal-content {
+  margin: auto;
+  display: block;
+  width: 90%;
+  top:20px;
+}
+
+/* Caption of Modal Image (Image Text) - Same Width as the Image */
+#img-modal-caption {
+  margin: 15px auto;
+  display: block;
+  width: 80%;
+  max-width: 700px;
+  text-align: center;
+  color: #ccc;
+  padding: 10px 0;
+  height: 150px;
+}
+
+/* Add Animation - Zoom in the Modal */
+.modal-content, #img-modal-caption {
+  animation-name: zoom;
+  animation-duration: 0.6s;
+}
+
+@keyframes zoom {
+  from {transform:scale(0)}
+  to {transform:scale(1)}
+}
+
+/* The Close Button */
+#img-modal-close {
+  font-size: 40px;
+  font-weight: bold;
+  color: #f1f1f1;
+  transition: 0.3s;
+  margin-right: 10px;
+}
+
+#img-modal-close:hover,
+#img-modal-close:focus {
+  color: #bbb;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* 100% Image Width on Smaller Screens */
+@media only screen and (max-width: 700px){
+  .modal-content {
+    width: 100%;
+  }
+}
+
+

assets/js/modal.js

@@ -0,0 +1,31 @@
+// Get the modal for image 1 
+var modal = document.getElementById("img-modal");
+
+// Get the image and insert it inside the modal - use its "alt" text as a caption
+const images = document.querySelectorAll("main img");
+var modalImg = document.getElementById("img-modal-img");
+var captionText = document.getElementById("img-modal-caption");
+function handleImageClick(event) {
+  modal.style.display = "block";
+  modalImg.src = event.target.src;
+  modalImg.alt = event.target.alt;
+  captionText.innerHTML = event.target.alt;
+  window.addEventListener("keydown", handleModalClose)
+}
+images.forEach(image => image.addEventListener("click", handleImageClick))
+
+
+// Get the element that closes the modal
+var span = document.getElementById("img-modal-close");
+function handleModalClose(event) {
+  if (event.type==="click"||event.key==="Escape"){
+    modal.style.display = "none"
+    window.removeEventListener("keydown", handleModalClose)
+  }
+}
+modal.addEventListener("click", handleModalClose)
+
+// When the user clicks on (x), close the modal
+span.onclick = function(){
+  modal.style.display = "none";
+}

desktop/use-desktop/index.md

@@ -41,4 +41,5 @@ To display the Docker menu, right-click on the ![whale menu](../../assets/images
 - **Kubernetes**
 - **Pause**
 - **Restart**
-- **Quit Docker Desktop**
+- **Quit Docker Desktop**
+