From eeb4f279852a69a2ac9ac6a326be060e69f3eb0f Mon Sep 17 00:00:00 2001
From: Clair Blacketer <mblacke@its.jnj.com>
Date: Tue, 21 Feb 2023 12:59:28 -0500
Subject: [PATCH] add zoom function to erd

---
 docs/cdm54erd.html | 23 +++++++++++++++++++++--
 rmd/cdm54erd.Rmd   | 21 ++++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/docs/cdm54erd.html b/docs/cdm54erd.html
index a02532a..3e3d5a9 100644
--- a/docs/cdm54erd.html
+++ b/docs/cdm54erd.html
@@ -423,14 +423,33 @@ $(document).ready(function () {
 </div>
 
 
+<style type="text/css">
+script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
+</style>
+<script type="text/javascript">
+ $(document).ready(function() {
+    $('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
+    // onClick function for all plots (img's)
+    $('img:not(.zoomImg)').click(function() {
+      $('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
+      $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
+    });
+    // onClick function for zoomImg
+    $('img.zoomImg').click(function() {
+      $('.zoomDiv').css({opacity: '0', width: '0%'}); 
+    });
+  });
+</script>
 <p>Late in 2022 we held a community contest to find the best
 entity-relationship diagram and we crowned two winners! Martijn Schuemie
 and Renske Los created the best printable version and Vishnu
 Chandrabalan created the best <a
 href="http://omop-erd.surge.sh/">interactive version</a>.</p>
 <div class="figure">
-<img src="images/erd.jpg" alt="" />
-<p class="caption">CDM v5.4 Printable ERD</p>
+<img src="images/erd.jpg" style="width:150.0%" alt="" />
+<p class="caption">CDM v5.4 Printable ERD - <a
+href="https://github.com/OHDSI/CommonDataModel/raw/main/rmd/images/erd.jpg">click
+here to download</a></p>
 </div>
 
 
diff --git a/rmd/cdm54erd.Rmd b/rmd/cdm54erd.Rmd
index 915966c..aab1e3e 100644
--- a/rmd/cdm54erd.Rmd
+++ b/rmd/cdm54erd.Rmd
@@ -4,6 +4,25 @@ output:
   html_document
 ---
 
+```{css zoom-lib-src, echo = FALSE}
+script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
+```
+
+```{js zoom-jquery, echo = FALSE}
+ $(document).ready(function() {
+    $('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
+    // onClick function for all plots (img's)
+    $('img:not(.zoomImg)').click(function() {
+      $('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
+      $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
+    });
+    // onClick function for zoomImg
+    $('img.zoomImg').click(function() {
+      $('.zoomDiv').css({opacity: '0', width: '0%'}); 
+    });
+  });
+```
+
 Late in 2022 we held a community contest to find the best entity-relationship diagram and we crowned two winners! Martijn Schuemie and Renske Los created the best printable version and Vishnu Chandrabalan created the best [interactive version](http://omop-erd.surge.sh/). 
 
-![CDM v5.4 Printable ERD](images/erd.jpg)
+![CDM v5.4 Printable ERD - [click here to download](https://github.com/OHDSI/CommonDataModel/raw/main/rmd/images/erd.jpg)](images/erd.jpg){width=150%}