Merge pull request #4 from shafayetShafee/fix03

fixed #3
shafayetShafee · Feb 16, 2023 · 5721c67 · 5721c67
2 parents 59e1295 + 12d498a
commit 5721c67
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 9 deletions.
diff --git a/_extensions/code-fullscreen/_extension.yml b/_extensions/code-fullscreen/_extension.yml
@@ -1,6 +1,6 @@
 title: Code-fullscreen
 author: Shafayet Khan Shafee
-version: 1.0.0
+version: 1.1.0
 quarto-required: ">=1.2.0"
 contributes:
   filters:

diff --git a/_extensions/code-fullscreen/resources/css/code-fullscreen.css b/_extensions/code-fullscreen/resources/css/code-fullscreen.css
@@ -1,3 +1,12 @@
+/**
+ * code-fullscreen
+ * A filter that add a fullscreen button in code chunk.
+ * 
+ * MIT License
+ * Copyright (c) 2023 Shafayet Khan Shafee.
+ */
+
+
 /**************************** fullscreen buttons *************************/ 
 
 pre .fullscreen-button {
@@ -31,6 +40,10 @@ pre:hover .fullscreen-button {
   display: block;
 }
 
+div.sourceCode.cell-code:hover .fullscreen-button {
+  display: block;
+}
+
 div#fullscreen-box:hover .fullscreen-button {
   display: block;
 }
@@ -108,3 +121,25 @@ body.reveal-viewport:has(div#fullscreen-box) {
   border-radius: 0;
   margin-left: 3em;
 }
+
+
+/********************** for mobile devices ****************************/
+
+@media only screen and (max-width: 992px) {
+  div#fullscreen-box {
+    font-size: 1.5vw;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  div#fullscreen-box pre.numberSource code > span {
+    left: -5em !important;
+  }
+}
+
+@media only screen and (min-width: 501px) and (max-width: 768px) {
+  div#fullscreen-box pre.numberSource code > span {
+    left: -4.5em !important;
+  }
+
+}
diff --git a/_extensions/code-fullscreen/resources/js/code-fullscreen.js b/_extensions/code-fullscreen/resources/js/code-fullscreen.js
@@ -2,6 +2,14 @@
 code modified from https://github.com/mkordulewski/reveal.js-fullscreen-code/blob/master/reveal.js-fullscreen-code.js
 */
 
+/**
+ * code-fullscreen
+ * A filter that add a fullscreen button in code chunk.
+ * 
+ * MIT License
+ * Copyright (c) 2023 Shafayet Khan Shafee.
+ */
+
 function fullscreen_code() {
   // creating the fullscreen box
   $('body').append("<div id='fullscreen-box'><pre class='sourceCode numberSource number-lines'><code class='sourceCode'></code></pre></div>" );
@@ -27,7 +35,8 @@ function fullscreen_code() {
           $('div#fullscreen-box pre code').html(code);
           $('div#fullscreen-box').toggleClass('visible');
           fullscreenBoxVisible = true;
-          let box_height = Math.max($('div#fullscreen-box pre').outerHeight(), $(document).height())
+          var box_height = Math.max($('div#fullscreen-box pre').outerHeight(), $(document).height());
+          $('div#fullscreen-box pre').height(box_height);
           $('div#fullscreen-box').height(box_height);
           // attach links for html (not revealjs)
           if (!$('div.reveal').length) {

diff --git a/docs/example.html b/docs/example.html
@@ -7,7 +7,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 
 <meta name="author" content="Shafayet Khan Shafee">
-<meta name="dcterms.date" content="2023-02-15">
+<meta name="dcterms.date" content="2023-02-17">
 
 <title>Code-fullscreen Example</title>
 <style>
@@ -2629,7 +2629,8 @@
           $('div#fullscreen-box pre code').html(code);
           $('div#fullscreen-box').toggleClass('visible');
           fullscreenBoxVisible = true;
-          let box_height = Math.max($('div#fullscreen-box pre').outerHeight(), $(document).height())
+          var box_height = Math.max($('div#fullscreen-box pre').outerHeight(), $(document).height());
+          $('div#fullscreen-box pre').height(box_height);
           $('div#fullscreen-box').height(box_height);
           // attach links for html (not revealjs)
           if (!$('div.reveal').length) {
@@ -2653,7 +2654,7 @@
   fullscreen_code();
 });
 </script>
-<link href="data:text/css,%20pre%20%2Efullscreen%2Dbutton%20%7Bz%2Dindex%3A%205%3Bposition%3A%20absolute%3Btop%3A%200%3Bright%3A%2030px%3Bborder%3A%200%3Bmargin%2Dtop%3A%207px%3Bmargin%2Dright%3A%205px%3Bbackground%2Dcolor%3A%20transparent%3Bdisplay%3A%20none%3B%7Ddiv%23fullscreen%2Dbox%20pre%20%2Efullscreen%2Dbutton%20%7Bposition%3A%20fixed%3Bright%3A%200%3B%7D%2Ereveal%2Dfull%2Dpage%20pre%20%2Efullscreen%2Dbutton%20%7Bmargin%2Dtop%3A%205px%3B%7D%2Ereveal%2Dfull%2Dpage%20div%23fullscreen%2Dbox%20pre%20%2Efullscreen%2Dbutton%20%7Bposition%3A%20fixed%3Bmargin%2Dtop%3A%207px%3Bright%3A%2015px%3B%7Dpre%3Ahover%20%2Efullscreen%2Dbutton%20%7Bdisplay%3A%20block%3B%7Ddiv%23fullscreen%2Dbox%3Ahover%20%2Efullscreen%2Dbutton%20%7Bdisplay%3A%20block%3B%7Dpre%20%2Efullscreen%2Dbutton%20%2Efullscreen%2Dicon%20%7Bcontent%3A%20url%28%27data%3Aimage%2Fsvg%2Bxml%2C%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi%2Dfullscreen%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M1%2E5%201a%2E5%2E5%200%200%200%2D%2E5%2E5v4a%2E5%2E5%200%200%201%2D1%200v%2D4A1%2E5%201%2E5%200%200%201%201%2E5%200h4a%2E5%2E5%200%200%201%200%201h%2D4zM10%20%2E5a%2E5%2E5%200%200%201%20%2E5%2D%2E5h4A1%2E5%201%2E5%200%200%201%2016%201%2E5v4a%2E5%2E5%200%200%201%2D1%200v%2D4a%2E5%2E5%200%200%200%2D%2E5%2D%2E5h%2D4a%2E5%2E5%200%200%201%2D%2E5%2D%2E5zM%2E5%2010a%2E5%2E5%200%200%201%20%2E5%2E5v4a%2E5%2E5%200%200%200%20%2E5%2E5h4a%2E5%2E5%200%200%201%200%201h%2D4A1%2E5%201%2E5%200%200%201%200%2014%2E5v%2D4a%2E5%2E5%200%200%201%20%2E5%2D%2E5zm15%200a%2E5%2E5%200%200%201%20%2E5%2E5v4a1%2E5%201%2E5%200%200%201%2D1%2E5%201%2E5h%2D4a%2E5%2E5%200%200%201%200%2D1h4a%2E5%2E5%200%200%200%20%2E5%2D%2E5v%2D4a%2E5%2E5%200%200%201%20%2E5%2D%2E5z%22%2F%3E%3C%2Fsvg%3E%27%29%3B%7Ddiv%23fullscreen%2Dbox%20pre%20%2Efullscreen%2Dbutton%20%2Efullscreen%2Dexit%2Dicon%20%7Bcontent%3A%20url%28%27data%3Aimage%2Fsvg%2Bxml%2C%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi%2Dfullscreen%2Dexit%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M5%2E5%200a%2E5%2E5%200%200%201%20%2E5%2E5v4A1%2E5%201%2E5%200%200%201%204%2E5%206h%2D4a%2E5%2E5%200%200%201%200%2D1h4a%2E5%2E5%200%200%200%20%2E5%2D%2E5v%2D4a%2E5%2E5%200%200%201%20%2E5%2D%2E5zm5%200a%2E5%2E5%200%200%201%20%2E5%2E5v4a%2E5%2E5%200%200%200%20%2E5%2E5h4a%2E5%2E5%200%200%201%200%201h%2D4A1%2E5%201%2E5%200%200%201%2010%204%2E5v%2D4a%2E5%2E5%200%200%201%20%2E5%2D%2E5zM0%2010%2E5a%2E5%2E5%200%200%201%20%2E5%2D%2E5h4A1%2E5%201%2E5%200%200%201%206%2011%2E5v4a%2E5%2E5%200%200%201%2D1%200v%2D4a%2E5%2E5%200%200%200%2D%2E5%2D%2E5h%2D4a%2E5%2E5%200%200%201%2D%2E5%2D%2E5zm10%201a1%2E5%201%2E5%200%200%201%201%2E5%2D1%2E5h4a%2E5%2E5%200%200%201%200%201h%2D4a%2E5%2E5%200%200%200%2D%2E5%2E5v4a%2E5%2E5%200%200%201%2D1%200v%2D4z%22%2F%3E%3C%2Fsvg%3E%27%29%3B%7D%20div%23fullscreen%2Dbox%20%7Bmargin%3A%200%3Bpadding%3A%200%3Bz%2Dindex%3A%209999%3Bposition%3A%20absolute%3Btop%3A%200%3Bright%3A%200%3Bwidth%3A%20100vw%3Bheight%3A%20100svmax%3Bdisplay%3A%20none%3Bbackground%2Dcolor%3A%20rgba%28233%2C236%2C239%29%3B%7Ddiv%23fullscreen%2Dbox%2Evisible%7Bdisplay%3A%20block%3B%7Ddiv%23fullscreen%2Dbox%20pre%2EsourceCode%20%7Bbackground%2Dcolor%3A%20rgba%28233%2C236%2C239%29%3B%7Ddiv%23fullscreen%2Dbox%20code%20%7Bpadding%2Dtop%3A%200%2E3rem%20%3Bpadding%2Dbottom%3A%201%2E5rem%3B%7Ddiv%23fullscreen%2Dbox%20pre%20code%20span%20a%20%7Bpointer%2Devents%3A%20none%3B%7Ddiv%23fullscreen%2Dbox%20code%20%7Bfont%2Dfamily%3A%20var%28%2D%2Dr%2Dcode%2Dfont%29%3B%7Ddiv%23fullscreen%2Dbox%20pre%2EnumberSource%20code%20%3E%20span%20%3E%20a%3Afirst%2Dchild%3A%3Abefore%20%7Bleft%3A%20%2D1%2E2em%20%21important%3B%7Ddiv%23fullscreen%2Dbox%20pre%2EnumberSource%20%7Bborder%2Dleft%3A%201px%20solid%20%23aaaaaa%20%21important%3Bborder%2Dradius%3A%200%3Bmargin%2Dleft%3A%204em%3B%7Dbody%2Ereveal%2Dviewport%3Ahas%28div%23fullscreen%2Dbox%29%20%7Boverflow%3A%20overlay%3B%7D%2Ereveal%2Dfull%2Dpage%20div%23fullscreen%2Dbox%20%7Bheight%3A%20unset%20%21important%3B%7D%2Ereveal%2Dfull%2Dpage%20div%23fullscreen%2Dbox%20pre%2EnumberSource%20%7Bborder%2Dleft%3A%201px%20solid%20%23aaaaaa%20%21important%3Bborder%2Dradius%3A%200%3Bmargin%2Dleft%3A%203em%3B%7D" rel="stylesheet">
+<link href="data:text/css,%20pre%20%2Efullscreen%2Dbutton%20%7Bz%2Dindex%3A%205%3Bposition%3A%20absolute%3Btop%3A%200%3Bright%3A%2030px%3Bborder%3A%200%3Bmargin%2Dtop%3A%207px%3Bmargin%2Dright%3A%205px%3Bbackground%2Dcolor%3A%20transparent%3Bdisplay%3A%20none%3B%7Ddiv%23fullscreen%2Dbox%20pre%20%2Efullscreen%2Dbutton%20%7Bposition%3A%20fixed%3Bright%3A%200%3B%7D%2Ereveal%2Dfull%2Dpage%20pre%20%2Efullscreen%2Dbutton%20%7Bmargin%2Dtop%3A%205px%3B%7D%2Ereveal%2Dfull%2Dpage%20div%23fullscreen%2Dbox%20pre%20%2Efullscreen%2Dbutton%20%7Bposition%3A%20fixed%3Bmargin%2Dtop%3A%207px%3Bright%3A%2015px%3B%7Dpre%3Ahover%20%2Efullscreen%2Dbutton%20%7Bdisplay%3A%20block%3B%7Ddiv%2EsourceCode%2Ecell%2Dcode%3Ahover%20%2Efullscreen%2Dbutton%20%7Bdisplay%3A%20block%3B%7Ddiv%23fullscreen%2Dbox%3Ahover%20%2Efullscreen%2Dbutton%20%7Bdisplay%3A%20block%3B%7Dpre%20%2Efullscreen%2Dbutton%20%2Efullscreen%2Dicon%20%7Bcontent%3A%20url%28%27data%3Aimage%2Fsvg%2Bxml%2C%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi%2Dfullscreen%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M1%2E5%201a%2E5%2E5%200%200%200%2D%2E5%2E5v4a%2E5%2E5%200%200%201%2D1%200v%2D4A1%2E5%201%2E5%200%200%201%201%2E5%200h4a%2E5%2E5%200%200%201%200%201h%2D4zM10%20%2E5a%2E5%2E5%200%200%201%20%2E5%2D%2E5h4A1%2E5%201%2E5%200%200%201%2016%201%2E5v4a%2E5%2E5%200%200%201%2D1%200v%2D4a%2E5%2E5%200%200%200%2D%2E5%2D%2E5h%2D4a%2E5%2E5%200%200%201%2D%2E5%2D%2E5zM%2E5%2010a%2E5%2E5%200%200%201%20%2E5%2E5v4a%2E5%2E5%200%200%200%20%2E5%2E5h4a%2E5%2E5%200%200%201%200%201h%2D4A1%2E5%201%2E5%200%200%201%200%2014%2E5v%2D4a%2E5%2E5%200%200%201%20%2E5%2D%2E5zm15%200a%2E5%2E5%200%200%201%20%2E5%2E5v4a1%2E5%201%2E5%200%200%201%2D1%2E5%201%2E5h%2D4a%2E5%2E5%200%200%201%200%2D1h4a%2E5%2E5%200%200%200%20%2E5%2D%2E5v%2D4a%2E5%2E5%200%200%201%20%2E5%2D%2E5z%22%2F%3E%3C%2Fsvg%3E%27%29%3B%7Ddiv%23fullscreen%2Dbox%20pre%20%2Efullscreen%2Dbutton%20%2Efullscreen%2Dexit%2Dicon%20%7Bcontent%3A%20url%28%27data%3Aimage%2Fsvg%2Bxml%2C%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi%2Dfullscreen%2Dexit%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M5%2E5%200a%2E5%2E5%200%200%201%20%2E5%2E5v4A1%2E5%201%2E5%200%200%201%204%2E5%206h%2D4a%2E5%2E5%200%200%201%200%2D1h4a%2E5%2E5%200%200%200%20%2E5%2D%2E5v%2D4a%2E5%2E5%200%200%201%20%2E5%2D%2E5zm5%200a%2E5%2E5%200%200%201%20%2E5%2E5v4a%2E5%2E5%200%200%200%20%2E5%2E5h4a%2E5%2E5%200%200%201%200%201h%2D4A1%2E5%201%2E5%200%200%201%2010%204%2E5v%2D4a%2E5%2E5%200%200%201%20%2E5%2D%2E5zM0%2010%2E5a%2E5%2E5%200%200%201%20%2E5%2D%2E5h4A1%2E5%201%2E5%200%200%201%206%2011%2E5v4a%2E5%2E5%200%200%201%2D1%200v%2D4a%2E5%2E5%200%200%200%2D%2E5%2D%2E5h%2D4a%2E5%2E5%200%200%201%2D%2E5%2D%2E5zm10%201a1%2E5%201%2E5%200%200%201%201%2E5%2D1%2E5h4a%2E5%2E5%200%200%201%200%201h%2D4a%2E5%2E5%200%200%200%2D%2E5%2E5v4a%2E5%2E5%200%200%201%2D1%200v%2D4z%22%2F%3E%3C%2Fsvg%3E%27%29%3B%7D%20div%23fullscreen%2Dbox%20%7Bmargin%3A%200%3Bpadding%3A%200%3Bz%2Dindex%3A%209999%3Bposition%3A%20absolute%3Btop%3A%200%3Bright%3A%200%3Bwidth%3A%20100vw%3Bheight%3A%20100svmax%3Bdisplay%3A%20none%3Bbackground%2Dcolor%3A%20rgba%28233%2C236%2C239%29%3B%7Ddiv%23fullscreen%2Dbox%2Evisible%7Bdisplay%3A%20block%3B%7Ddiv%23fullscreen%2Dbox%20pre%2EsourceCode%20%7Bbackground%2Dcolor%3A%20rgba%28233%2C236%2C239%29%3B%7Ddiv%23fullscreen%2Dbox%20code%20%7Bpadding%2Dtop%3A%200%2E3rem%20%3Bpadding%2Dbottom%3A%201%2E5rem%3B%7Ddiv%23fullscreen%2Dbox%20pre%20code%20span%20a%20%7Bpointer%2Devents%3A%20none%3B%7Ddiv%23fullscreen%2Dbox%20code%20%7Bfont%2Dfamily%3A%20var%28%2D%2Dr%2Dcode%2Dfont%29%3B%7Ddiv%23fullscreen%2Dbox%20pre%2EnumberSource%20code%20%3E%20span%20%3E%20a%3Afirst%2Dchild%3A%3Abefore%20%7Bleft%3A%20%2D1%2E2em%20%21important%3B%7Ddiv%23fullscreen%2Dbox%20pre%2EnumberSource%20%7Bborder%2Dleft%3A%201px%20solid%20%23aaaaaa%20%21important%3Bborder%2Dradius%3A%200%3Bmargin%2Dleft%3A%204em%3B%7Dbody%2Ereveal%2Dviewport%3Ahas%28div%23fullscreen%2Dbox%29%20%7Boverflow%3A%20overlay%3B%7D%2Ereveal%2Dfull%2Dpage%20div%23fullscreen%2Dbox%20%7Bheight%3A%20unset%20%21important%3B%7D%2Ereveal%2Dfull%2Dpage%20div%23fullscreen%2Dbox%20pre%2EnumberSource%20%7Bborder%2Dleft%3A%201px%20solid%20%23aaaaaa%20%21important%3Bborder%2Dradius%3A%200%3Bmargin%2Dleft%3A%203em%3B%7D%40media%20only%20screen%20and%20%28max%2Dwidth%3A%20992px%29%20%7Bdiv%23fullscreen%2Dbox%20%7Bfont%2Dsize%3A%201%2E5vw%3B%7D%7D%40media%20only%20screen%20and%20%28max%2Dwidth%3A%20500px%29%20%7Bdiv%23fullscreen%2Dbox%20pre%2EnumberSource%20code%20%3E%20span%20%7Bleft%3A%20%2D5em%20%21important%3B%7D%7D%40media%20only%20screen%20and%20%28min%2Dwidth%3A%20501px%29%20and%20%28max%2Dwidth%3A%20768px%29%20%7Bdiv%23fullscreen%2Dbox%20pre%2EnumberSource%20code%20%3E%20span%20%7Bleft%3A%20%2D4%2E5em%20%21important%3B%7D%7D" rel="stylesheet">
 
 
 </head>
@@ -2683,7 +2684,7 @@
     <div>
     <div class="quarto-title-meta-heading">Published</div>
     <div class="quarto-title-meta-contents">
-      <p class="date">February 15, 2023</p>
+      <p class="date">February 17, 2023</p>
     </div>
   </div>