index.html

<!DOCTYPE html>
<html lang="en"><head>
<script src="index_files/libs/clipboard/clipboard.min.js"></script>
<script src="index_files/libs/quarto-html/tabby.min.js"></script>
<script src="index_files/libs/quarto-html/popper.min.js"></script>
<script src="index_files/libs/quarto-html/tippy.umd.min.js"></script>
<link href="index_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="index_files/libs/quarto-html/quarto-html.min.css" rel="stylesheet" data-mode="light">
<link href="index_files/libs/quarto-html/quarto-syntax-highlighting-dark.css" rel="stylesheet" id="quarto-text-highlighting-styles"><meta charset="utf-8">
  <meta name="generator" content="quarto-1.2.269">

  <meta name="author" content="Ashley Baldry">
  <title>Creating a JavaScript Library for your Shiny Application</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
  <link rel="stylesheet" href="index_files/libs/revealjs/dist/reset.css">
  <link rel="stylesheet" href="index_files/libs/revealjs/dist/reveal.css">
  <style>
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    div.columns{display: flex; gap: min(4vw, 1.5em);}
    div.column{flex: auto; overflow-x: auto;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    ul.task-list{list-style: none;}
    ul.task-list li input[type="checkbox"] {
      width: 0.8em;
      margin: 0 0.8em 0.2em -1.6em;
      vertical-align: middle;
    }
    pre > code.sourceCode { white-space: pre; position: relative; }
    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
    pre > code.sourceCode > span:empty { height: 1.2em; }
    .sourceCode { overflow: visible; }
    code.sourceCode > span { color: inherit; text-decoration: inherit; }
    div.sourceCode { margin: 1em 0; }
    pre.sourceCode { margin: 0; }
    @media screen {
    div.sourceCode { overflow: auto; }
    }
    @media print {
    pre > code.sourceCode { white-space: pre-wrap; }
    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
    }
    pre.numberSource code
      { counter-reset: source-line 0; }
    pre.numberSource code > span
      { position: relative; left: -4em; counter-increment: source-line; }
    pre.numberSource code > span > a:first-child::before
      { content: counter(source-line);
        position: relative; left: -1em; text-align: right; vertical-align: baseline;
        border: none; display: inline-block;
        -webkit-touch-callout: none; -webkit-user-select: none;
        -khtml-user-select: none; -moz-user-select: none;
        -ms-user-select: none; user-select: none;
        padding: 0 4px; width: 4em;
      }
    pre.numberSource { margin-left: 3em;  padding-left: 4px; }
    div.sourceCode
      { color: #f8f8f2;  }
    @media screen {
    pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
    }
    code span { color: #f8f8f2; } /* Normal */
    code span.al { color: #f07178; background-color: #2a0f15; font-weight: bold; } /* Alert */
    code span.an { color: #d4d0ab; } /* Annotation */
    code span.at { color: #00e0e0; } /* Attribute */
    code span.bn { color: #d4d0ab; } /* BaseN */
    code span.bu { color: #abe338; } /* BuiltIn */
    code span.cf { color: #ffa07a; font-weight: bold; } /* ControlFlow */
    code span.ch { color: #abe338; } /* Char */
    code span.cn { color: #ffd700; } /* Constant */
    code span.co { color: #f8f8f2; font-style: italic; } /* Comment */
    code span.cv { color: #ffd700; } /* CommentVar */
    code span.do { color: #f8f8f2; } /* Documentation */
    code span.dt { color: #ffa07a; } /* DataType */
    code span.dv { color: #d4d0ab; } /* DecVal */
    code span.er { color: #f07178; text-decoration: underline; } /* Error */
    code span.ex { color: #00e0e0; font-weight: bold; } /* Extension */
    code span.fl { color: #d4d0ab; } /* Float */
    code span.fu { color: #ffa07a; } /* Function */
    code span.im { color: #abe338; } /* Import */
    code span.in { color: #d4d0ab; } /* Information */
    code span.kw { color: #ffa07a; font-weight: bold; } /* Keyword */
    code span.op { color: #ffa07a; } /* Operator */
    code span.ot { color: #00e0e0; } /* Other */
    code span.pp { color: #dcc6e0; } /* Preprocessor */
    code span.re { color: #00e0e0; background-color: #f8f8f2; } /* RegionMarker */
    code span.sc { color: #abe338; } /* SpecialChar */
    code span.ss { color: #abe338; } /* SpecialString */
    code span.st { color: #abe338; } /* String */
    code span.va { color: #00e0e0; } /* Variable */
    code span.vs { color: #abe338; } /* VerbatimString */
    code span.wa { color: #dcc6e0; } /* Warning */
  </style>
  <link rel="stylesheet" href="index_files/libs/revealjs/dist/theme/quarto.css" id="theme">
  <link href="index_files/libs/revealjs/plugin/quarto-line-highlight/line-highlight.css" rel="stylesheet">
  <link href="index_files/libs/revealjs/plugin/reveal-menu/menu.css" rel="stylesheet">
  <link href="index_files/libs/revealjs/plugin/reveal-menu/quarto-menu.css" rel="stylesheet">
  <link href="index_files/libs/revealjs/plugin/quarto-support/footer.css" rel="stylesheet">
  <style type="text/css">

  .callout {
    margin-top: 1em;
    margin-bottom: 1em;  
    border-radius: .25rem;
  }

  .callout.callout-style-simple { 
    padding: 0em 0.5em;
    border-left: solid #acacac .3rem;
    border-right: solid 1px silver;
    border-top: solid 1px silver;
    border-bottom: solid 1px silver;
    display: flex;
  }

  .callout.callout-style-default {
    border-left: solid #acacac .3rem;
    border-right: solid 1px silver;
    border-top: solid 1px silver;
    border-bottom: solid 1px silver;
  }

  .callout .callout-body-container {
    flex-grow: 1;
  }

  .callout.callout-style-simple .callout-body {
    font-size: 1rem;
    font-weight: 400;
  }

  .callout.callout-style-default .callout-body {
    font-size: 0.9rem;
    font-weight: 400;
  }

  .callout.callout-captioned.callout-style-simple .callout-body {
    margin-top: 0.2em;
  }

  .callout:not(.callout-captioned) .callout-body {
      display: flex;
  }

  .callout:not(.no-icon).callout-captioned.callout-style-simple .callout-content {
    padding-left: 1.6em;
  }

  .callout.callout-captioned .callout-header {
    padding-top: 0.2em;
    margin-bottom: -0.2em;
  }

  .callout.callout-captioned .callout-caption  p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
    
  .callout.callout-captioned.callout-style-simple .callout-content  p {
    margin-top: 0;
  }

  .callout.callout-captioned.callout-style-default .callout-content  p {
    margin-top: 0.7em;
  }

  .callout.callout-style-simple div.callout-caption {
    border-bottom: none;
    font-size: .9rem;
    font-weight: 600;
    opacity: 75%;
  }

  .callout.callout-style-default  div.callout-caption {
    border-bottom: none;
    font-weight: 600;
    opacity: 85%;
    font-size: 0.9rem;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .callout.callout-style-default div.callout-content {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .callout.callout-style-simple .callout-icon::before {
    height: 1rem;
    width: 1rem;
    display: inline-block;
    content: "";
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

  .callout.callout-style-default .callout-icon::before {
    height: 0.9rem;
    width: 0.9rem;
    display: inline-block;
    content: "";
    background-repeat: no-repeat;
    background-size: 0.9rem 0.9rem;
  }

  .callout-caption {
    display: flex
  }
    
  .callout-icon::before {
    margin-top: 1rem;
    padding-right: .5rem;
  }

  .callout.no-icon::before {
    display: none !important;
  }

  .callout.callout-captioned .callout-body > .callout-content > :last-child {
    margin-bottom: 0.5rem;
  }

  .callout.callout-captioned .callout-icon::before {
    margin-top: .5rem;
    padding-right: .5rem;
  }

  .callout:not(.callout-captioned) .callout-icon::before {
    margin-top: 1rem;
    padding-right: .5rem;
  }

  /* Callout Types */

  div.callout-note {
    border-left-color: #4582ec !important;
  }

  div.callout-note .callout-icon::before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAEU0lEQVRYCcVXTWhcVRQ+586kSUMMxkyaElstCto2SIhitS5Ek8xUKV2poatCcVHtUlFQk8mbaaziwpWgglJwVaquitBOfhQXFlqlzSJpFSpIYyXNjBNiTCck7x2/8/LeNDOZxDuEkgOXe++553zfefee+/OYLOXFk3+1LLrRdiO81yNqZ6K9cG0P3MeFaMIQjXssE8Z1JzLO9ls20MBZX7oG8w9GxB0goaPrW5aNMp1yOZIa7Wv6o2ykpLtmAPs/vrG14Z+6d4jpbSKuhdcSyq9wGMPXjonwmESXrriLzFGOdDBLB8Y6MNYBu0dRokSygMA/mrun8MGFN3behm6VVAwg4WR3i6FvYK1T7MHo9BK7ydH+1uurECoouk5MPRyVSBrBHMYwVobG2aOXM07sWrn5qgB60rc6mcwIDJtQrnrEr44kmy+UO9r0u9O5/YbkS9juQckLed3DyW2XV/qWBBB3ptvI8EUY3I9p/67OW+g967TNr3Sotn3IuVlfMLVnsBwH4fsnebJvyGm5GeIUA3jljERmrv49SizPYuq+z7c2H/jlGC+Ghhupn/hcapqmcudB9jwJ/3jvnvu6vu5lVzF1fXyZuZZ7U8nRmVzytvT+H3kilYvH09mLWrQdwFSsFEsxFVs5fK7A0g8gMZjbif4ACpKbjv7gNGaD8bUrlk8x+KRflttr22JEMRUbTUwwDQScyzPgedQHZT0xnx7ujw2jfVfExwYHwOsDTjLdJ2ebmeQIlJ7neo41s/DrsL3kl+W2lWvAga0tR3zueGr6GL78M3ifH0rGXrBC2aAR8uYcIA5gwV8zIE8onoh8u0Fca/ciF7j1uOzEnqcIm59sEXoGc0+z6+H45V1CvAvHcD7THztu669cnp+L0okAeIc6zjbM/24LgGM1gZk7jnRu1aQWoU9sfUOuhrmtaPIO3YY1KLLWZaEO5TKUbMY5zx8W9UJ6elpLwKXbsaZ4EFl7B4bMtDv0iRipKoDQT2sNQI9b1utXFdYisi+wzZ/ri/1m7QfDgEuvgUUEIJPq3DhX/5DWNqIXDOweC2wvIR90Oq3lDpdMIgD2r0dXvGdsEW5H6x6HLRJYU7C69VefO1x8Gde1ZFSJLfWS1jbCnhtOPxmpfv2LXOA2Xk2tvnwKKPFuZ/oRmwBwqRQDcKNeVQkYcOjtWVBuM/JuYw5b6isojIkYxyYAFn5K7ZBF10fea52y8QltAg6jnMqNHFBmGkQ1j+U43HMi2xMar1Nv0zGsf1s8nUsmUtPOOrbFIR8bHFDMB5zL13Gmr/kGlCkUzedTzzmzsaJXhYawnA3UmARpiYj5ooJZiUoxFRtK3X6pgNPv+IZVPcnwbOl6f+aBaO1CNvPW9n9LmCp01nuSaTRF2YxHqZ8DYQT6WsXT+RD6eUztwYLZ8rM+rcPxamv1VQzFUkzFXvkiVrySGQgJNvXHJAxiU3/NwiC03rSf05VBaPtu/Z7/B8Yn/w7eguloAAAAAElFTkSuQmCC');
  }

  div.callout-note.callout-style-default .callout-caption {
    background-color: #dae6fb
  }

  div.callout-important {
    border-left-color: #d9534f !important;
  }

  div.callout-important .callout-icon::before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAEKklEQVRYCcVXTWhcVRS+575MJym48A+hSRFr00ySRQhURRfd2HYjk2SSTokuBCkU2o0LoSKKraKIBTcuFCoidGFD08nkBzdREbpQ1EDNIv8qSGMFUboImMSZd4/f9zJv8ibJMC8xJQfO3HPPPef7zrvvvnvviIkpC9nsw0UttFunbUhpFzFtarSd6WJkStVMw5xyVqYTvkwfzuf/5FgtkVoB0729j1rjXwThS7Vio+Mo6DNnvLfahoZ+i/o32lULuJ3NNiz7q6+pyAUkJaFF6JwaM2lUJlV0MlnQn5aTRbEu0SEqHUa0A4AdiGuB1kFXRfVyg5d87+Dg4DL6m2TLAub60ilj7A1Ec4odSAc8X95sHh7+ZRPCFo6Fnp7HfU/fBng/hi10CjCnWnJjsxvDNxWw0NfV6Rv5GgP3I3jGWXumdTD/3cbEOP2ZbOZp69yniG3FQ9z1jD7bnBu9Fc2tKGC2q+uAJOQHBDRiZX1x36o7fWBs7J9ownbtO+n0/qWkvW7UPIfc37WgT6ZGR++EOJyeQDSb9UB+DZ1G6DdLDzyS+b/kBCYGsYgJbSQHuThGKRcw5xdeQf8YdNHsc6ePXrlSYMBuSIAFTGAtQo+VuALo4BX83N190NWZWbynBjhOHsmNfFWLeL6v+ynsA58zDvvAC8j5PkbOcXCMg2PZFk3q8MjI7WAG/Dp9AwP7jdGBOOQkAvlFUB+irtm16I1Zw9YBcpGTGXYmk3kQIC/Cds55l+iMI3jqhjAuaoe+am2Jw5GT3Nbz3CkE12NavmzN5+erJW7046n/CH1RO/RVa8lBLozXk9uqykkGAyRXLWlLv5jyp4RFsG5vGVzpDLnIjTWgnRy2Rr+tDKvRc7Y8AyZq10jj8DqXdnIRNtFZb+t/ZRtXcDiVnzpqx8mPcDWxgARUqx0W1QB9MeUZiNrV4qP+Ehc+BpNgATsTX8ozYKL2NtFYAHc84fG7ndxUPr+AR/iQSns7uSUufAymwDOb2+NjK27lEFocm/EE2WpyIy/Hi66MWuMKJn8RvxIcj87IM5Vh9663ziW36kR0HNenXuxmfaD8JC7tfKbrhFr7LiZCrMjrzTeGx+PmkosrkNzW94ObzwocJ7A1HokLolY+AvkTiD/q1H0cN48c5EL8Crkttsa/AXQVDmutfyku0E7jShx49XqV3MFK8IryDhYVbj7Sj2P2eBxwcXoe8T8idsKKPRcnZw1b+slFTubwUwhktrfnAt7J++jwQtLZcm3sr9LQrjRzz6cfMv9aLvgmnAGvpoaGLxM4mAEaLV7iAzQ3oU0IvD5x9ix3yF2RAAuYAOO2f7PEFWCXZ4C9Pb2UsgDeVnFSpbFK7/IWu7TPTvBqzbGdCHOJQSxiEjt6IyZmxQyEJHv6xyQsYk//moVFsN2zP6fRImjfq7/n/wFDguUQFNEwugAAAABJRU5ErkJggg==');
  }

  div.callout-important.callout-style-default .callout-caption {
    background-color: #f7dddc
  }

  div.callout-warning {
    border-left-color: #f0ad4e !important;
  }

  div.callout-warning .callout-icon::before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAETklEQVRYCeVWW2gcVRg+58yaTUnizqbipZeX4uWhBEniBaoUX1Ioze52t7sRq6APio9V9MEaoWlVsFasRq0gltaAPuxms8lu0gcviE/FFOstVbSIxgcv6SU7EZqmdc7v9+9mJtNks51NTUH84ed889/PP+cmxP+d5FIbMJmNbpREu4WUkiTtCicKny0l1pIKmBzovF2S+hIJHX8iEu3hZJ5lNZGqyRrGSIQpq15AzF28jgpeY6yk6GVdrfFqdrD6Iw+QlB8g0YS2g7dyQmXM/IDhBhT0UCiRf59lfqmmDvzRt6kByV/m4JjtzuaujMUM2c5Z2d6JdKrRb3K2q6mA+oYVz8JnDdKPmmNthzkAk/lN63sYPgevrguc72aZX/L9C6x09GYyxBgCX4NlvyGUHOKELlm5rXeR1kchuChJt4SSwyddZRXgvwMGvYo4QSlk3/zkHD8UHxwVJA6zjZZqP8v8kK8OWLnIZtLyCAJagYC4rTGW/9Pqj92N/c+LUaAj27movwbi19tk/whRCIE7Q9vyI6yvRpftAKVTdUjOW40X3h5OXsKCdmFcx0xlLJoSuQngnrJe7Kcjm4OMq9FlC7CMmScQANuNvjfP3PjGXDBaUQmbp296S5L4DrpbrHN1T87ZVEZVCzg1FF0Ft+dKrlLukI+/c9ENo+TvlTDbYFvuKPtQ9+l052rXrgKoWkDAFnvh0wTOmYn8R5f4k/jN/fZiCM1tQx9jQQ4ANhqG4hiL0qIFTGViG9DKB7GYzgubnpofgYRwO+DFjh0Zin2m4b/97EDkXkc+f6xYAPX0KK2I/7fUQuwzuwo/L3AkcjugPNixC8cHf0FyPjWlItmLxWw4Ou9YsQCr5fijMGoD/zpdRy95HRysyXA74MWOnscpO4j2y3HAVisw85hX5+AFBRSHt4ShfLFkIMXTqyKFc46xdzQM6XbAi702a7sy04J0+feReMFKp5q9esYLCqAZYw/k14E/xcLLsFElaornTuJB0svMuJINy8xkIYuL+xPAlWRceH6+HX7THJ0djLUom46zREu7tTkxwmf/FdOZ/sh6Q8qvEAiHpm4PJ4a/doJe0gH1t+aHRgCzOvBvJedEK5OFE5jpm4AGP2a8Dxe3gGJ/pAutug9Gp6he92CsSsWBaEcxGx0FHytmIpuqGkOpldqNYQK8cSoXvd+xLxXADw0kf6UkJNFtdo5MOgaLjiQOQHcn+A6h5NuL2s0qsC2LOM75PcF3yr5STuBSAcGG+meA14K/CI21HcS4LBT6tv0QAh8Dr5l93AhZzG5ZJ4VxAqdZUEl9z7WJ4aN+svMvwHHL21UKTd1mqvChH7/Za5xzXBBKrUcB0TQ+Ulgkfbi/H/YT5EptrGzsEK7tR1B7ln9BBwckYfMiuSqklSznIuoIIOM42MQO+QnduCoFCI0bpkzjCjddHPN/F+2Yu+sd9bKNpVwHhbS3LluK/0zgfwD0xYI5dXuzlQAAAABJRU5ErkJggg==');
  }

  div.callout-warning.callout-style-default .callout-caption {
    background-color: #fcefdc
  }

  div.callout-tip {
    border-left-color: #02b875 !important;
  }

  div.callout-tip .callout-icon::before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAADr0lEQVRYCe1XTWgTQRj9ZjZV8a9SPIkKgj8I1bMHsUWrqYLVg4Ue6v9BwZOxSYsIerFao7UiUryIqJcqgtpimhbBXoSCVxUFe9CTiogUrUp2Pt+3aUI2u5vdNh4dmMzOzHvvezuz8xNFM0mjnbXaNu1MvFWRXkXEyE6aYOYJpdW4IXuA4r0fo8qqSMDBU0v1HJUgVieAXxzCsdE/YJTdFcVIZQNMyhruOMJKXYFoLfIfIvVIMWdsrd+Rpd86ZmyzzjJmLStqRn0v8lzkb4rVIXvnpScOJuAn2ACC65FkPzEdEy4TPWRLJ2h7z4cArXzzaOdKlbOvKKX25Wl00jSnrwVxAg3o4dRxhO13RBSdNvH0xSARv3adTXbBdTf64IWO2vH0LT+cv4GR1DJt+DUItaQogeBX/chhbTBxEiZ6gftlDNXTrvT7co4ub5A6gp9HIcHvzTa46OS5fBeP87Qm0fQkr4FsYgVQ7Qg+ZayaDg9jhg1GkWj8RG6lkeSacrrHgDaxdoBiZPg+NXV/KifMuB6//JmYH4CntVEHy/keA6x4h4CU5oFy8GzrBS18cLJMXcljAKB6INjWsRcuZBWVaS3GDrqB7rdapVIeA+isQ57Eev9eCqzqOa81CY05VLd6SamW2wA2H3SiTbnbSxmzfp7WtKZkqy4mdyAlGx7ennghYf8voqp9cLSgKdqNfa6RdRsAAkPwRuJZNbpByn+RrJi1RXTwdi8RQF6ymDwGMAtZ6TVE+4uoKh+MYkcLsT0Hk8eAienbiGdjJHZTpmNjlbFJNKDVAp2fJlYju6IreQxQ08UJDNYdoLSl6AadO+fFuCQqVMB1NJwPm69T04Wv5WhfcWyfXQB+wXRs1pt+nCknRa0LVzSA/2B+a9+zQJadb7IyyV24YAxKp2Jqs3emZTuNnKxsah+uabKbMk7CbTgJx/zIgQYErIeTKRQ9yD9wxVof5YolPHqaWo7TD6tJlh7jQnK5z2n3+fGdggIOx2kaa2YI9QWarc5Ce1ipNWMKeSG4DysFF52KBmTNMmn5HqCFkwy34rDg05gDwgH3bBi+sgFhN/e8QvRn8kbamCOhgrZ9GJhFDgfcMHzFb6BAtjKpFhzTjwv1KCVuxHvCbsSiEz4CANnj84cwHdFXAbAOJ4LTSAawGWFn5tDhLMYz6nWeU2wJfIhmIJBefcd/A5FWQWGgrWzyORZ3Q6HuV+Jf0Bj+BTX69fm1zWgK7By1YTXchFDORywnfQ7GpzOo6S+qECrsx2ifVQAAAABJRU5ErkJggg==');
  }

  div.callout-tip.callout-style-default .callout-caption {
    background-color: #ccf1e3
  }

  div.callout-caution {
    border-left-color: #fd7e14 !important;
  }

  div.callout-caution .callout-icon::before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAACV0lEQVRYCdVWzWoUQRCuqp2ICBLJXgITZL1EfQDBW/bkzUMUD7klD+ATSHBEfAIfQO+iXsWDxJsHL96EHAwhgzlkg8nBg25XWb0zIb0zs9muYYWkoKeru+vn664fBqElyZNuyh167NXJ8Ut8McjbmEraKHkd7uAnAFku+VWdb3reSmRV8PKSLfZ0Gjn3a6Xlcq9YGb6tADjn+lUfTXtVmaZ1KwBIvFI11rRXlWlatwIAAv2asaa9mlB9wwygiDX26qaw1yYPzFXg2N1GgG0FMF8Oj+VIx7E/03lHx8UhvYyNZLN7BwSPgekXXLribw7w5/c8EF+DBK5idvDVYtEEwMeYefjjLAdEyQ3M9nfOkgnPTEkYU+sxMq0BxNR6jExrAI31H1rzvLEfRIdgcv1XEdj6QTQAS2wtstEALLG1yEZ3QhH6oDX7ExBSFEkFINXH98NTrme5IOaaA7kIfiu2L8A3qhH9zRbukdCqdsA98TdElyeMe5BI8Rs2xHRIsoTSSVFfCFCWGPn9XHb4cdobRIWABNf0add9jakDjQJpJ1bTXOJXnnRXHRf+dNL1ZV1MBRCXhMbaHqGI1JkKIL7+i8uffuP6wVQAzO7+qVEbF6NbS0LJureYcWXUUhH66nLR5rYmva+2tjRFtojkM2aD76HEGAD3tPtKM309FJg5j/K682ywcWJ3PASCcycH/22u+Bh7Aa0ehM2Fu4z0SAE81HF9RkB21c5bEn4Dzw+/qNOyXr3DCTQDMBOdhi4nAgiFDGCinIa2owCEChUwD8qzd03PG+qdW/4fDzjUMcE1ZpIAAAAASUVORK5CYII=');
  }

  div.callout-caution.callout-style-default .callout-caption {
    background-color: #ffe5d0
  }

  </style>
  <style type="text/css">
    .reveal div.sourceCode {
      margin: 0;
      overflow: auto;
    }
    .reveal div.hanging-indent {
      margin-left: 1em;
      text-indent: -1em;
    }
    .reveal .slide:not(.center) {
      height: 100%;
    }
    .reveal .slide.scrollable {
      overflow-y: auto;
    }
    .reveal .footnotes {
      height: 100%;
      overflow-y: auto;
    }
    .reveal .slide .absolute {
      position: absolute;
      display: block;
    }
    .reveal .footnotes ol {
      counter-reset: ol;
      list-style-type: none; 
      margin-left: 0;
    }
    .reveal .footnotes ol li:before {
      counter-increment: ol;
      content: counter(ol) ". "; 
    }
    .reveal .footnotes ol li > p:first-child {
      display: inline-block;
    }
    .reveal .slide ul,
    .reveal .slide ol {
      margin-bottom: 0.5em;
    }
    .reveal .slide ul li,
    .reveal .slide ol li {
      margin-top: 0.4em;
      margin-bottom: 0.2em;
    }
    .reveal .slide ul[role="tablist"] li {
      margin-bottom: 0;
    }
    .reveal .slide ul li > *:first-child,
    .reveal .slide ol li > *:first-child {
      margin-block-start: 0;
    }
    .reveal .slide ul li > *:last-child,
    .reveal .slide ol li > *:last-child {
      margin-block-end: 0;
    }
    .reveal .slide .columns:nth-child(3) {
      margin-block-start: 0.8em;
    }
    .reveal blockquote {
      box-shadow: none;
    }
    .reveal .tippy-content>* {
      margin-top: 0.2em;
      margin-bottom: 0.7em;
    }
    .reveal .tippy-content>*:last-child {
      margin-bottom: 0.2em;
    }
    .reveal .slide > img.stretch.quarto-figure-center,
    .reveal .slide > img.r-stretch.quarto-figure-center {
      display: block;
      margin-left: auto;
      margin-right: auto; 
    }
    .reveal .slide > img.stretch.quarto-figure-left,
    .reveal .slide > img.r-stretch.quarto-figure-left  {
      display: block;
      margin-left: 0;
      margin-right: auto; 
    }
    .reveal .slide > img.stretch.quarto-figure-right,
    .reveal .slide > img.r-stretch.quarto-figure-right  {
      display: block;
      margin-left: auto;
      margin-right: 0; 
    }
  </style>
</head>
<body class="quarto-dark">
  <div class="reveal">
    <div class="slides">

<section id="title-slide" data-background-image="./images/camille-couvez-H5PnIYI_1I0-unsplash.jpeg" class="center">
  <img src="images/Ascent_logo_white.png" class="title-logo">
  <h1 class="title">Creating a JavaScript Library for your Shiny Application</h1>
  <p class="author">Ashley Baldry</p>
</section>
<section id="shiny-javascript" class="slide level2">
<h2>Shiny &amp; JavaScript</h2>
<div>
<ul>
<li class="fragment"><code>{shiny} + JS =</code> <span class="emoji" data-emoji="heart">❤️</span></li>
<li class="fragment"><code>tags$script(HTML("</code><br> &nbsp;&nbsp;&nbsp;&nbsp;<code>$(document).ready(function() {</code><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code>$('[data-toggle="tooltip"]').tooltip()</code><br> &nbsp;&nbsp;&nbsp;&nbsp;<code>})</code><br> <code>"))</code></li>
<li class="fragment"><code>tags$script(src="custom.js")</code></li>
<li class="fragment"><code>Shiny.inputBindings.register(inputBinding, "your.inputBinding")</code></li>
<li class="fragment"><span class="emoji" data-emoji="shrug">🤷</span></li>
</ul>
</div>
<aside class="notes">
<ul>
<li>JavaScript can easily be included into shiny applications to enhance the capabilities already present within shiny</li>
<li>Adding your first custom JavaScript feels like a massive milestone, and as you try out different JavaScript commands, you start adding more to your shiny application</li>
<li>Then you write enough to add it into its own separate script</li>
<li>Eventually you get comfortable enough to create custom inputs and outputs for shiny application in JavaScript, and the codebase continues to grow</li>
<li>But what is the next step after that?</li>
</ul>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="motivation" class="slide level2">
<h2>Motivation</h2>
<div class="quarto-figure quarto-figure-center">
<figure>
<p><video data-src="images/designer_app.mp4" controls=""><a href="images/designer_app.mp4">Video</a></video></p>
<p></p><figcaption>Demo of the {designer} application</figcaption><p></p>
</figure>
</div>
<div class="footer">
<p>Latest version: <a href="https://ashbaldry.shinyapps.io/designer/">https://ashbaldry.shinyapps.io/designer/</a></p>
</div>
<aside class="notes">
<ul>
<li>Why I needed to learn to create a JavaScript library</li>
<li>This is the application within the designer package. It allows a code-free way to template the UI of shiny applications.</li>
</ul>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="motivation-1" class="slide level2">
<h2>Motivation</h2>

<img data-src="images/designer-0-1-js.png" class="r-stretch quarto-figure-center"><p class="caption">Structure of the JavaScript code in the {designer} package for version 0.1.0</p><div>
<ul>
<li class="fragment">Adding more components would make the code harder to read</li>
<li class="fragment">Lots of duplicated code that could be simplified</li>
</ul>
</div>
<aside class="notes">
<ul>
<li>In the initial release of the designer package, there are 4 JavaScript files:
<ul>
<li>Three that are between 50 and 100 lines
<ul>
<li>A custom input for the content of the template (canvas-page-input.js)</li>
<li>Behaviour to trigger on application load (designer-app-setup.js)</li>
<li>Helper functions for the initial set-up (designer-app-utils.js)</li>
</ul></li>
<li>The fourth (create-element.js) is 650 lines - most amount of JS I’ve written
<ul>
<li>How to create each type of component</li>
</ul></li>
</ul></li>
<li>In the second iteration I was including some bs4Dash components to the application, and adding them to that file was becoming unmanageable</li>
<li>Most of the code in that file was functionality about adding a new draggable element that was copying and pasting code from other components</li>
</ul>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="javascript-library" class="slide level2 q-a-slide">
<h2>JavaScript Library</h2>
</section>
<section id="library-set-up" class="slide level2">
<h2>Library Set-Up</h2>
<div>
<ul>
<li class="fragment">Choose your IDE of choice</li>
<li class="fragment">Create a directory in your project for JS code
<ul>
<li class="fragment">Standard name: <code>srcjs</code></li>
<li class="fragment">If included in an R package, add folder to <code>.Rbuildignore</code></li>
</ul></li>
<li class="fragment">Download and install <a href="https://nodejs.org/">Node.js</a></li>
<li class="fragment">Open <code>srcjs</code> directory up in your IDE</li>
<li class="fragment">Run <code>npm init</code> in the terminal and initialise your project</li>
</ul>
</div>
<div class="footer">
<p>Top IDEs: <a href="https://www.tabnine.com/blog/best-ides-for-javascript/">https://www.tabnine.com/blog/best-ides-for-javascript/</a></p>
</div>
<aside class="notes">
<ul>
<li>(IDE) In R, we tend to have one or two products/packages that are much more salient and well used for any given task. JS tends to have at least 10 of anything you want to use - so it’s always useful to search for “top x in JavaScript” for some listicles</li>
<li>Personally like VS Code, it comes with loads of extensions that help with developing JavaScript (formatting, snippets, linting), plus the debugging functionality is particularly nice to use</li>
<li>“src” stands for “source”</li>
<li>If you are including the application in the package then it won’t need to be included in the published version of the package</li>
<li>Node is the runtime for JavaScript, it allows to run JavaScript code without having to be in a browser. It is much more powerful than that, it includes <code>npm</code>, a package manager to install all the required dependencies for your JS code</li>
</ul>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="library-set-up-1" class="slide level2">
<h2>Library Set-Up</h2>
<div class="quarto-figure quarto-figure-center">
<figure>
<p><video data-src="images/npm_init.mp4" controls=""><a href="images/npm_init.mp4">Video</a></video></p>
<p></p><figcaption>Running <code>npm init</code> in VS Code</figcaption><p></p>
</figure>
</div>
<aside class="notes">
<ul>
<li><code>npm init</code> will ask a series of questions around the package like name, version and description. It will add this all into the package.json file</li>
<li>The package.json file is the JS version of the description file</li>
<li>Two key differences:
<ul>
<li>“main” is the entry point of the library. It is a single file where all of exported code is available to call or run.</li>
</ul></li>
<li>“scripts” is a list of commands that can be used in the terminal
<ul>
<li>Run by calling <code>npm run test</code>
<ul>
<li>Dependency package commands can be used, or <code>node file.js</code> to run like <code>Rscript file.R</code></li>
<li>One of the options that is asked when running <code>npm init</code> is the testing command.</li>
</ul></li>
</ul></li>
<li>Anything defined in this list can be performed in the terminal with the prefix “node”</li>
<li>Speaking of dependencies…</li>
</ul>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
<!--
## Libaray Set-Up

```{.json .code-overflow-wrap code-line-numbers="5-8"}
{
  "name": "designer",
  "version": "0.2.0",
  "description": "JS for designer app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "MIT"
}
```

- "main" is the entry point of the library
- "scripts" is a list of commands that can be used in the terminal
  - Run by calling `npm run test`
  - Dependency package commands can be used, or `node file.js` to run like `Rscript file.R`
-->
</section>
<section id="dependency-management" class="slide level2">
<h2>Dependency Management</h2>
<div>
<ul>
<li class="fragment">Node.js includes a package manager, <code>npm</code>, within its installation
<ul>
<li class="fragment">This works like {renv}, including a lock file within the project</li>
</ul></li>
<li class="fragment">Include shiny and jQuery as dependencies
<ul>
<li class="fragment"><code>npm install github:rstudio/shiny</code></li>
<li class="fragment"><code>npm install @types/jquery@3.5.14</code></li>
</ul></li>
<li class="fragment">Project specific dependencies can also be added here</li>
</ul>
</div>
<div class="fragment">
<div class="callout callout-important callout-captioned callout-style-default">
<div class="callout-body">
<div class="callout-caption">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<p><strong>Important</strong></p>
</div>
<div class="callout-content">
<p>Create a .gitignore in your JavaScript directory and include <code>node_modules</code></p>
</div>
</div>
</div>
</div>
<aside class="notes">
<p>Unlike renv, npm doesn’t cache the dependencies, it adds them all within the node_modules sub-directory. Unless you want to add all these files on your remote Git repository, add this file to your gitignore at the first opportunity</p>
<p>The shiny repository has the package.json in the top level of the repository, making it easy for us to grab the JavaScript part of it through <code>npm install</code>. This helps us not have issues with using the Shiny object for custom messages and sending input values to the UI within our own JavaScript</p>
<p>Baked into shiny, so they are used for development process</p>
<p>Specifying the version of jQuery so that it matches the version available in shiny. The types refers to TypeScript</p>
<p>Mention that additional libraries can be installed with npm install</p>
<p>Twice I’ve contributed to packages with JavaScript and twice we’ve forgotten to include this file.</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="dependency-management-1" class="slide level2">
<h2>Dependency Management</h2>


<!--
```{.json code-line-numbers="8-12"}
{
  "name": "designer",
  "version": "0.2.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@types/jquery": "^3.5.14",
    "@types/rstudio-shiny": "github:rstudio/shiny",
    "sortablejs": "^1.15.0"
  }
}
```
-->
<img data-src="images/package_json_deps.png" class="r-stretch quarto-figure-center"><p class="caption">JS library structure after installing required dependencies</p><aside class="notes">
<p>You can now see the dependencies specified within the package.json file</p>
<p>Heavily dependent on sortable js in my project, so included as a dependency</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="bundlingminifying-code" class="slide level2">
<h2>Bundling/Minifying Code</h2>
<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript"><span id="cb1-1"><a href="#cb1-1"></a><span class="im">import</span> { build } <span class="im">from</span> <span class="st">'esbuild'</span></span>
<span id="cb1-2"><a href="#cb1-2"></a></span>
<span id="cb1-3"><a href="#cb1-3"></a><span class="fu">build</span>({</span>
<span id="cb1-4"><a href="#cb1-4"></a>  <span class="dt">entryPoints</span><span class="op">:</span> [<span class="st">'index.js'</span>]<span class="op">,</span></span>
<span id="cb1-5"><a href="#cb1-5"></a>  <span class="dt">bundle</span><span class="op">:</span> <span class="kw">true</span><span class="op">,</span></span>
<span id="cb1-6"><a href="#cb1-6"></a>  <span class="dt">sourcemap</span><span class="op">:</span> <span class="kw">true</span><span class="op">,</span></span>
<span id="cb1-7"><a href="#cb1-7"></a>  <span class="dt">outfile</span><span class="op">:</span> <span class="st">'../inst/app/www/designer.min.js'</span><span class="op">,</span></span>
<span id="cb1-8"><a href="#cb1-8"></a>  <span class="dt">platform</span><span class="op">:</span> <span class="st">'node'</span><span class="op">,</span></span>
<span id="cb1-9"><a href="#cb1-9"></a>  <span class="dt">minify</span><span class="op">:</span> <span class="kw">true</span></span>
<span id="cb1-10"><a href="#cb1-10"></a>})<span class="op">.</span><span class="fu">catch</span>(</span>
<span id="cb1-11"><a href="#cb1-11"></a>  () <span class="kw">=&gt;</span> <span class="bu">process</span><span class="op">.</span><span class="fu">exit</span>(<span class="dv">1</span>)</span>
<span id="cb1-12"><a href="#cb1-12"></a>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div>
<ul>
<li class="fragment"><code>npm install esbuild --save-dev</code>
<ul>
<li class="fragment"><code>--save-dev</code> only includes package for development purposes</li>
</ul></li>
<li class="fragment">Include a source map to help debug errors in console</li>
</ul>
</div>
<aside class="notes">
<p>As a start, we can add all the code in the scripts into a single index.js file.</p>
<p>Several bundlers available, however when searching found that esbuild is significantly quicker, and have rarely seen it take longer than 0.5 seconds to bundle my JavaScript code.</p>
<p>Save dev is an option that will add the library to a development dependency, sort of like a Suggets in the DESCRIPTION, but this will never need to be installed by the end user.</p>
<p>The minifying will reduce all variable names you set into single letters. This makes it really hard to know what is going on in the console when debugging shiny applications. By including a source map you can at least see what code is being run when it errors. Alternatively include a build option that doesn’t minify the code.</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="bundlingminifying-code-1" class="slide level2">
<h2>Bundling/Minifying Code</h2>


<!--
```{.json .full-height-js-code code-line-numbers="5,8,15-17"}
{
  "name": "designer",
  "version": "0.2.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node build.js"
  },
  "dependencies": {
    "@types/jquery": "^3.5.14",
    "@types/rstudio-shiny": "github:rstudio/shiny",
    "sortablejs": "^1.15.0"
  },
  "devDependencies": {
    "esbuild": "^0.17.10"
  }
}
```
-->
<img data-src="images/package_json_build.png" class="r-stretch quarto-figure-center"><p class="caption">JS library structure after installing bundling library</p><aside class="notes">
<p>Might notice the “type” option added to the package.json file. This is required for esbuild to bundle up the JS code.</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="linting" class="slide level2">
<h2>Linting</h2>
<div>
<ul>
<li class="fragment">Linting helps improve code quality and consistency</li>
<li class="fragment"><code>npm install eslint --save-dev</code>
<ul>
<li class="fragment">Extension in VS Code that applies the eslint linting standards</li>
<li class="fragment">Customisable by adding own rules into <code>.eslintrc.yml</code></li>
</ul></li>
</ul>
</div>
<aside class="notes">
<p>Big believer that all projects should include linting from the offset Lints in JS that wasn’t aware of before: - No longer requiring “;” at the end of calls</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="linting-1" class="slide level2">
<h2>Linting</h2>


<!--
```{.json .full-height-js-code code-line-numbers="17"}
{
  "name": "designer",
  "version": "0.2.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node build.js"
  },
  "dependencies": {
    "@types/jquery": "^3.5.14",
    "@types/rstudio-shiny": "github:rstudio/shiny",
    "sortablejs": "^1.15.0"
  },
  "devDependencies": {
    "esbuild": "^0.17.10",
    "eslint": "^8.35.0"
  }
}
```
-->
<img data-src="images/package_json_lint.png" class="r-stretch quarto-figure-center"><p class="caption">JS library structure after installing linting</p></section>
<section id="communication-between-files" class="slide level2">
<h2>Communication Between Files</h2>
<div class="columns">
<div class="column">
<div>
<ul>
<li class="fragment">JavaScript files work in a modular fashion</li>
<li class="fragment">Only exported objects are accessible in other modules</li>
<li class="fragment">Objects have to be explicitly imported before use</li>
<li class="fragment">Add <code>"type": "module"</code> to package.json to enable <code>import</code> to work</li>
</ul>
</div>
</div><div class="column">
<div class="sourceCode" id="cb2" data-code-line-numbers="1-2,13-16"><pre class="sourceCode numberSource js full-height-js-code number-lines code-with-copy"><code class="sourceCode javascript"><span id="cb2-1"><a href="#cb2-1"></a><span class="co">// component/component.js</span></span>
<span id="cb2-2"><a href="#cb2-2"></a><span class="im">export</span> <span class="kw">class</span> Component {</span>
<span id="cb2-3"><a href="#cb2-3"></a>  html <span class="op">=</span> <span class="st">'&lt;div&gt;&lt;/div&gt;'</span></span>
<span id="cb2-4"><a href="#cb2-4"></a>  <span class="fu">constructor</span> () {</span>
<span id="cb2-5"><a href="#cb2-5"></a>    <span class="co">// runs when class is created</span></span>
<span id="cb2-6"><a href="#cb2-6"></a>  }</span>
<span id="cb2-7"><a href="#cb2-7"></a>  </span>
<span id="cb2-8"><a href="#cb2-8"></a>  <span class="fu">createComponent</span> () {</span>
<span id="cb2-9"><a href="#cb2-9"></a>    <span class="cf">return</span> <span class="kw">this</span><span class="op">.</span><span class="at">html</span></span>
<span id="cb2-10"><a href="#cb2-10"></a>  }</span>
<span id="cb2-11"><a href="#cb2-11"></a>}</span>
<span id="cb2-12"><a href="#cb2-12"></a></span>
<span id="cb2-13"><a href="#cb2-13"></a><span class="co">// component/button.js</span></span>
<span id="cb2-14"><a href="#cb2-14"></a><span class="im">import</span> {Component} <span class="im">from</span> <span class="st">'./Component'</span></span>
<span id="cb2-15"><a href="#cb2-15"></a></span>
<span id="cb2-16"><a href="#cb2-16"></a><span class="kw">class</span> Button <span class="kw">extends</span> Component {</span>
<span id="cb2-17"><a href="#cb2-17"></a>  html <span class="op">=</span> <span class="st">'&lt;button ...&gt;...&lt;/button&gt;'</span></span>
<span id="cb2-18"><a href="#cb2-18"></a>  <span class="fu">constructor</span> () {</span>
<span id="cb2-19"><a href="#cb2-19"></a>    <span class="co">// runs Component constructor</span></span>
<span id="cb2-20"><a href="#cb2-20"></a>    <span class="kw">super</span>()</span>
<span id="cb2-21"><a href="#cb2-21"></a>  }</span>
<span id="cb2-22"><a href="#cb2-22"></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</div>
<aside class="notes">
<p>R is one of the few languages where the location of a file in a package doesn’t matter, it is all bundled into a single namespace. JavaScript assumes that nothing has been imported in the script, so any call to another function object will result in an error.</p>
<p>If you’ve ever used the {box} package (one of the dependencies of the {rhino} application infrastructure) then it is similar in how it works.</p>
<p>Whilst this might cause some time to split out your JavaScript into several files and reference using import/export methods will make it a lot easier to manage your code in the long run.</p>
<p>If you want to use the import calls, then you will need to add the type field to the package.json file in order for it to bundle</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="class-inheritance" class="slide level2">
<h2>Class Inheritance</h2>
<div class="columns">
<div class="column">
<div>
<ul>
<li class="fragment">A way to reduce duplicated code</li>
<li class="fragment">Extremely useful when creating 20+ components
<ul>
<li class="fragment"><code>Component</code> class contains several methods accessible to individual components</li>
<li class="fragment">Overwrite methods when needed</li>
</ul></li>
</ul>
</div>
</div><div class="column">
<div class="sourceCode" id="cb3" data-code-line-numbers="2-11,16-22"><pre class="sourceCode numberSource js full-height-js-code number-lines code-with-copy"><code class="sourceCode javascript"><span id="cb3-1"><a href="#cb3-1"></a><span class="co">// component/component.js</span></span>
<span id="cb3-2"><a href="#cb3-2"></a><span class="im">export</span> <span class="kw">class</span> Component {</span>
<span id="cb3-3"><a href="#cb3-3"></a>  html <span class="op">=</span> <span class="st">'&lt;div&gt;&lt;/div&gt;'</span></span>
<span id="cb3-4"><a href="#cb3-4"></a>  <span class="fu">constructor</span> () {</span>
<span id="cb3-5"><a href="#cb3-5"></a>    <span class="co">// runs when class is created</span></span>
<span id="cb3-6"><a href="#cb3-6"></a>  }</span>
<span id="cb3-7"><a href="#cb3-7"></a>  </span>
<span id="cb3-8"><a href="#cb3-8"></a>  <span class="fu">createComponent</span> () {</span>
<span id="cb3-9"><a href="#cb3-9"></a>    <span class="cf">return</span> <span class="kw">this</span><span class="op">.</span><span class="at">html</span></span>
<span id="cb3-10"><a href="#cb3-10"></a>  }</span>
<span id="cb3-11"><a href="#cb3-11"></a>}</span>
<span id="cb3-12"><a href="#cb3-12"></a></span>
<span id="cb3-13"><a href="#cb3-13"></a><span class="co">// component/button.js</span></span>
<span id="cb3-14"><a href="#cb3-14"></a><span class="im">import</span> {Component} <span class="im">from</span> <span class="st">'./Component'</span></span>
<span id="cb3-15"><a href="#cb3-15"></a></span>
<span id="cb3-16"><a href="#cb3-16"></a><span class="kw">class</span> Button <span class="kw">extends</span> Component {</span>
<span id="cb3-17"><a href="#cb3-17"></a>  html <span class="op">=</span> <span class="st">'&lt;button ...&gt;...&lt;/button&gt;'</span></span>
<span id="cb3-18"><a href="#cb3-18"></a>  <span class="fu">constructor</span> () {</span>
<span id="cb3-19"><a href="#cb3-19"></a>    <span class="co">// runs Component constructor</span></span>
<span id="cb3-20"><a href="#cb3-20"></a>    <span class="kw">super</span>()</span>
<span id="cb3-21"><a href="#cb3-21"></a>  }</span>
<span id="cb3-22"><a href="#cb3-22"></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</div>
<aside class="notes">
<ul>
<li>R is predominantly a functional language</li>
<li>Most programming languages, including JavaScript, are more object orientated - similar to how {R6} works</li>
<li>Use class inheritance to avoid the repeating code to create the different UI components in the designer application</li>
<li>Component class included methods to generate random IDs, or validating the CSS unit string</li>
<li>Also included the method to initialise the dragging behaviour from sortable JS</li>
<li>Usually overwrote a method that created the the HTML, as most components have options that can be set by the user</li>
</ul>
<p>Other things that I have used the inheritance</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="library-structure" class="slide level2">
<h2>Library Structure</h2>

<img data-src="images/index_js_mod.png" class="r-stretch quarto-figure-center"><p class="caption">JS library structure after modularising code</p></section>
<section id="unit-testing" class="slide level2">
<h2>Unit Testing</h2>
<div>
<ul>
<li class="fragment">Many testing frameworks available in JS</li>
<li class="fragment"><a href="https://jestjs.io/">Jest</a> has similar structure to {testthat}
<ul>
<li class="fragment">Add tests to <code>__tests__</code> directory</li>
<li class="fragment">Suffix filename with <code>.test.js</code></li>
</ul></li>
<li class="fragment"><code>npm install --save-dev jest</code></li>
<li class="fragment"><code>npm install --save-dev @babel/plugin-transform-modules-commonjs</code>
<ul>
<li class="fragment">Required to run tests using modular format</li>
</ul></li>
</ul>
</div>
<aside class="notes">
<p>Many different testing frameworks available in JavaScript, each with their own syntaxes Using Jest as was recommended due to it having a very similar structure as {testthat} Define the test name in the first argument, then run the test in the second. Individual tests used as expect().to() Other unit testing packages include MochaJS, ChaiJS and Cypress.io</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="unit-testing-1" class="slide level2">
<h2>Unit Testing</h2>
<div class="sourceCode" id="cb4" data-code-line-numbers="12,15-18"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript"><span id="cb4-1"><a href="#cb4-1"></a><span class="co">// component/button.js</span></span>
<span id="cb4-2"><a href="#cb4-2"></a><span class="im">import</span> Component <span class="im">from</span> <span class="st">'Component'</span></span>
<span id="cb4-3"><a href="#cb4-3"></a></span>
<span id="cb4-4"><a href="#cb4-4"></a><span class="kw">class</span> Button <span class="kw">extends</span> Component {</span>
<span id="cb4-5"><a href="#cb4-5"></a>  html <span class="op">=</span> <span class="st">'&lt;button ...&gt;...&lt;/button&gt;'</span></span>
<span id="cb4-6"><a href="#cb4-6"></a>  constructor <span class="op">=</span> {</span>
<span id="cb4-7"><a href="#cb4-7"></a>    <span class="co">// runs Component constructor</span></span>
<span id="cb4-8"><a href="#cb4-8"></a>    <span class="kw">super</span>()</span>
<span id="cb4-9"><a href="#cb4-9"></a>  }</span>
<span id="cb4-10"><a href="#cb4-10"></a>}</span>
<span id="cb4-11"><a href="#cb4-11"></a></span>
<span id="cb4-12"><a href="#cb4-12"></a><span class="co">// component/__tests__/Button.test.js</span></span>
<span id="cb4-13"><a href="#cb4-13"></a><span class="im">import</span> { Button } <span class="im">from</span> <span class="st">'../Button'</span></span>
<span id="cb4-14"><a href="#cb4-14"></a></span>
<span id="cb4-15"><a href="#cb4-15"></a><span class="fu">test</span>(<span class="st">'sanity test - button constructs successfully'</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
<span id="cb4-16"><a href="#cb4-16"></a>  <span class="kw">const</span> button <span class="op">=</span> <span class="kw">new</span> <span class="fu">Button</span>()</span>
<span id="cb4-17"><a href="#cb4-17"></a>  <span class="fu">expect</span>(button<span class="op">.</span><span class="at">html</span>)<span class="op">.</span><span class="fu">toBe</span>(<span class="st">'&lt;button ...&gt;...&lt;/button&gt;'</span>)</span>
<span id="cb4-18"><a href="#cb4-18"></a>})</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<!--
## Unit Testing

Add to `.babelrc`:

```{.yaml}
{
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

```
-->
</section>
<section id="unit-testing-2" class="slide level2">
<h2>Unit Testing</h2>
<div class="quarto-figure quarto-figure-center">
<figure>
<p><video data-src="images/npm_test.mp4" controls=""><a href="images/npm_test.mp4">Video</a></video></p>
<p></p><figcaption>Running <code>npm run test</code> in VS Code</figcaption><p></p>
</figure>
</div>
</section>
<section id="continuous-integration-ci" class="slide level2">
<h2>Continuous Integration (CI)</h2>
<div class="fragment">
<p>Include JavaScript unit tests as part of your GitHub Actions</p>
</div>
<div class="fragment">
<div class="sourceCode" id="cb5"><pre class="sourceCode numberSource yaml number-lines code-with-copy"><code class="sourceCode yaml"><span id="cb5-1"><a href="#cb5-1"></a><span class="fu">name</span><span class="kw">:</span><span class="at"> Run JS Tests (Jest)</span></span>
<span id="cb5-2"><a href="#cb5-2"></a><span class="fu">on</span><span class="kw">:</span></span>
<span id="cb5-3"><a href="#cb5-3"></a><span class="at">  </span><span class="fu">push</span><span class="kw">:</span></span>
<span id="cb5-4"><a href="#cb5-4"></a><span class="at">    </span><span class="fu">branches</span><span class="kw">:</span><span class="at"> </span><span class="kw">[</span><span class="at">dev</span><span class="kw">,</span><span class="at"> main</span><span class="kw">]</span></span>
<span id="cb5-5"><a href="#cb5-5"></a><span class="at">  </span><span class="fu">pull_request</span><span class="kw">:</span></span>
<span id="cb5-6"><a href="#cb5-6"></a><span class="at">    </span><span class="fu">branches</span><span class="kw">:</span><span class="at"> </span><span class="kw">[</span><span class="at">dev</span><span class="kw">,</span><span class="at"> main</span><span class="kw">]</span></span>
<span id="cb5-7"><a href="#cb5-7"></a><span class="fu">defaults</span><span class="kw">:</span></span>
<span id="cb5-8"><a href="#cb5-8"></a><span class="at">  </span><span class="fu">run</span><span class="kw">:</span></span>
<span id="cb5-9"><a href="#cb5-9"></a><span class="at">    </span><span class="fu">working-directory</span><span class="kw">:</span><span class="at"> srcjs</span></span>
<span id="cb5-10"><a href="#cb5-10"></a><span class="fu">jobs</span><span class="kw">:</span></span>
<span id="cb5-11"><a href="#cb5-11"></a><span class="at">  </span><span class="fu">js-unit-tests</span><span class="kw">:</span></span>
<span id="cb5-12"><a href="#cb5-12"></a><span class="at">    </span><span class="fu">runs-on</span><span class="kw">:</span><span class="at"> ubuntu-latest</span></span>
<span id="cb5-13"><a href="#cb5-13"></a><span class="at">    </span><span class="fu">steps</span><span class="kw">:</span></span>
<span id="cb5-14"><a href="#cb5-14"></a><span class="at">    </span><span class="kw">-</span><span class="at"> </span><span class="fu">uses</span><span class="kw">:</span><span class="at"> actions/checkout@v2</span></span>
<span id="cb5-15"><a href="#cb5-15"></a><span class="at">    </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> Install modules</span></span>
<span id="cb5-16"><a href="#cb5-16"></a><span class="at">      </span><span class="fu">run</span><span class="kw">:</span><span class="at"> npm install</span></span>
<span id="cb5-17"><a href="#cb5-17"></a><span class="at">    </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> Run tests</span></span>
<span id="cb5-18"><a href="#cb5-18"></a><span class="at">      </span><span class="fu">run</span><span class="kw">:</span><span class="at"> npm run test </span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<aside class="notes">
<p>I have found when running unit tests through GH actions that certain JS libraries are pre-installed on the build servers, so no steps are required prior to installing the dependencies for your own JavaScript code.</p>
<p>The whole process takes little over a minute</p>
<style type="text/css">
        span.MJX_Assistive_MathML {
          position:absolute!important;
          clip: rect(1px, 1px, 1px, 1px);
          padding: 1px 0 0 0!important;
          border: 0!important;
          height: 1px!important;
          width: 1px!important;
          overflow: hidden!important;
          display:block!important;
      }</style></aside>
</section>
<section id="ci-results" class="slide level2">
<h2>CI Results</h2>
<div class="columns" style="display: flex; height: max-content; align-items: center">
<div class="column">
<p><img data-src="images/designer-js-unit-tests.png"></p>
</div><div class="column">
<p>JavaScript unit test results of the {designer} package</p>
<p><br></p>
<pre><code>Test Suites: 32 passed, 32 total
Tests:       38 passed, 38 total
Snapshots:   0 total
Time:        5.948 s
Ran all test suites.
Done in 6.82s.</code></pre>
</div>
</div>
</section>
<section id="finished-result" class="slide level2">
<h2>Finished Result</h2>

<img data-src="images/package_json_final.png" class="r-stretch quarto-figure-center"><p class="caption">Structure of JavaScript code of the {designer} package</p></section>
<section id="finished-result-1" class="slide level2">
<h2>Finished Result</h2>

<img data-src="images/designer-dev-js.png" class="r-stretch quarto-figure-center"><p class="caption">Minified JavaScript file in the dev branch of the {designer} package</p></section>
<section id="qa." class="slide level2 q-a-slide">
<h2>Q&amp;A.</h2>
<div class="footer footer-default">

</div>
</section>
    </div>
  </div>

  <script>window.backupDefine = window.define; window.define = undefined;</script>
  <script src="index_files/libs/revealjs/dist/reveal.js"></script>
  <!-- reveal.js plugins -->
  <script src="index_files/libs/revealjs/plugin/quarto-line-highlight/line-highlight.js"></script>
  <script src="index_files/libs/revealjs/plugin/pdf-export/pdfexport.js"></script>
  <script src="index_files/libs/revealjs/plugin/reveal-menu/menu.js"></script>
  <script src="index_files/libs/revealjs/plugin/reveal-menu/quarto-menu.js"></script>
  <script src="index_files/libs/revealjs/plugin/quarto-support/support.js"></script>
  

  <script src="index_files/libs/revealjs/plugin/notes/notes.js"></script>
  <script src="index_files/libs/revealjs/plugin/search/search.js"></script>
  <script src="index_files/libs/revealjs/plugin/zoom/zoom.js"></script>
  <script src="index_files/libs/revealjs/plugin/math/math.js"></script>
  <script>window.define = window.backupDefine; window.backupDefine = undefined;</script>

  <script>

      // Full list of configuration options available at:
      // https://revealjs.com/config/
      Reveal.initialize({
'controlsAuto': true,
'previewLinksAuto': false,
'smaller': false,
'pdfSeparateFragments': false,
'autoAnimateEasing': "ease",
'autoAnimateDuration': 1,
'autoAnimateUnmatched': true,
'menu': {"side":"left","useTextContentForMissingTitles":true,"markers":false,"loadIcons":false,"custom":[{"title":"Tools","icon":"<i class=\"fas fa-gear\"></i>","content":"<ul class=\"slide-menu-items\">\n<li class=\"slide-tool-item active\" data-item=\"0\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.fullscreen(event)\"><kbd>f</kbd> Fullscreen</a></li>\n<li class=\"slide-tool-item\" data-item=\"1\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.speakerMode(event)\"><kbd>s</kbd> Speaker View</a></li>\n<li class=\"slide-tool-item\" data-item=\"2\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.overview(event)\"><kbd>o</kbd> Slide Overview</a></li>\n<li class=\"slide-tool-item\" data-item=\"3\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.overview(event)\"><kbd>e</kbd> PDF Export Mode</a></li>\n<li class=\"slide-tool-item\" data-item=\"4\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.keyboardHelp(event)\"><kbd>?</kbd> Keyboard Help</a></li>\n</ul>"}],"openButton":false},
'smaller': false,
 
        // Display controls in the bottom right corner
        controls: false,

        // Help the user learn the controls by providing hints, for example by
        // bouncing the down arrow when they first encounter a vertical slide
        controlsTutorial: false,

        // Determines where controls appear, "edges" or "bottom-right"
        controlsLayout: 'edges',

        // Visibility rule for backwards navigation arrows; "faded", "hidden"
        // or "visible"
        controlsBackArrows: 'faded',

        // Display a presentation progress bar
        progress: true,

        // Display the page number of the current slide
        slideNumber: false,

        // 'all', 'print', or 'speaker'
        showSlideNumber: 'all',

        // Add the current slide number to the URL hash so that reloading the
        // page/copying the URL will return you to the same slide
        hash: true,

        // Start with 1 for the hash rather than 0
        hashOneBasedIndex: false,

        // Flags if we should monitor the hash and change slides accordingly
        respondToHashChanges: true,

        // Push each slide change to the browser history
        history: true,

        // Enable keyboard shortcuts for navigation
        keyboard: true,

        // Enable the slide overview mode
        overview: true,

        // Disables the default reveal.js slide layout (scaling and centering)
        // so that you can use custom CSS layout
        disableLayout: false,

        // Vertical centering of slides
        center: false,

        // Enables touch navigation on devices with touch input
        touch: true,

        // Loop the presentation
        loop: false,

        // Change the presentation direction to be RTL
        rtl: false,

        // see https://revealjs.com/vertical-slides/#navigation-mode
        navigationMode: 'linear',

        // Randomizes the order of slides each time the presentation loads
        shuffle: false,

        // Turns fragments on and off globally
        fragments: true,

        // Flags whether to include the current fragment in the URL,
        // so that reloading brings you to the same fragment position
        fragmentInURL: false,

        // Flags if the presentation is running in an embedded mode,
        // i.e. contained within a limited portion of the screen
        embedded: false,

        // Flags if we should show a help overlay when the questionmark
        // key is pressed
        help: true,

        // Flags if it should be possible to pause the presentation (blackout)
        pause: true,

        // Flags if speaker notes should be visible to all viewers
        showNotes: false,

        // Global override for autoplaying embedded media (null/true/false)
        autoPlayMedia: null,

        // Global override for preloading lazy-loaded iframes (null/true/false)
        preloadIframes: null,

        // Number of milliseconds between automatically proceeding to the
        // next slide, disabled when set to 0, this value can be overwritten
        // by using a data-autoslide attribute on your slides
        autoSlide: 0,

        // Stop auto-sliding after user input
        autoSlideStoppable: true,

        // Use this method for navigation when auto-sliding
        autoSlideMethod: null,

        // Specify the average time in seconds that you think you will spend
        // presenting each slide. This is used to show a pacing timer in the
        // speaker view
        defaultTiming: null,

        // Enable slide navigation via mouse wheel
        mouseWheel: false,

        // The display mode that will be used to show slides
        display: 'block',

        // Hide cursor if inactive
        hideInactiveCursor: true,

        // Time before the cursor is hidden (in ms)
        hideCursorTime: 5000,

        // Opens links in an iframe preview overlay
        previewLinks: false,

        // Transition style (none/fade/slide/convex/concave/zoom)
        transition: 'none',

        // Transition speed (default/fast/slow)
        transitionSpeed: 'default',

        // Transition style for full page slide backgrounds
        // (none/fade/slide/convex/concave/zoom)
        backgroundTransition: 'none',

        // Number of slides away from the current that are visible
        viewDistance: 3,

        // Number of slides away from the current that are visible on mobile
        // devices. It is advisable to set this to a lower number than
        // viewDistance in order to save resources.
        mobileViewDistance: 2,

        // The "normal" size of the presentation, aspect ratio will be preserved
        // when the presentation is scaled to fit different resolutions. Can be
        // specified using percentage units.
        width: 1200,

        height: 700,

        // Factor of the display size that should remain empty around the content
        margin: 0.1,

        math: {
          mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
          config: 'TeX-AMS_HTML-full',
          tex2jax: {
            inlineMath: [['\\(','\\)']],
            displayMath: [['\\[','\\]']],
            balanceBraces: true,
            processEscapes: false,
            processRefs: true,
            processEnvironments: true,
            preview: 'TeX',
            skipTags: ['script','noscript','style','textarea','pre','code'],
            ignoreClass: 'tex2jax_ignore',
            processClass: 'tex2jax_process'
          },
        },

        // reveal.js plugins
        plugins: [QuartoLineHighlight, PdfExport, RevealMenu, QuartoSupport,

          RevealMath,
          RevealNotes,
          RevealSearch,
          RevealZoom
        ]
      });
    </script>
    <script id="quarto-html-after-body" type="application/javascript">
    window.document.addEventListener("DOMContentLoaded", function (event) {
      const toggleBodyColorMode = (bsSheetEl) => {
        const mode = bsSheetEl.getAttribute("data-mode");
        const bodyEl = window.document.querySelector("body");
        if (mode === "dark") {
          bodyEl.classList.add("quarto-dark");
          bodyEl.classList.remove("quarto-light");
        } else {
          bodyEl.classList.add("quarto-light");
          bodyEl.classList.remove("quarto-dark");
        }
      }
      const toggleBodyColorPrimary = () => {
        const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
        if (bsSheetEl) {
          toggleBodyColorMode(bsSheetEl);
        }
      }
      toggleBodyColorPrimary();  
      const tabsets =  window.document.querySelectorAll(".panel-tabset-tabby")
      tabsets.forEach(function(tabset) {
        const tabby = new Tabby('#' + tabset.id);
      });
      const clipboard = new window.ClipboardJS('.code-copy-button', {
        target: function(trigger) {
          return trigger.previousElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        // button target
        const button = e.trigger;
        // don't keep focus
        button.blur();
        // flash "checked"
        button.classList.add('code-copy-button-checked');
        var currentTitle = button.getAttribute("title");
        button.setAttribute("title", "Copied!");
        let tooltip;
        if (window.bootstrap) {
          button.setAttribute("data-bs-toggle", "tooltip");
          button.setAttribute("data-bs-placement", "left");
          button.setAttribute("data-bs-title", "Copied!");
          tooltip = new bootstrap.Tooltip(button, 
            { trigger: "manual", 
              customClass: "code-copy-button-tooltip",
              offset: [0, -8]});
          tooltip.show();    
        }
        setTimeout(function() {
          if (tooltip) {
            tooltip.hide();
            button.removeAttribute("data-bs-title");
            button.removeAttribute("data-bs-toggle");
            button.removeAttribute("data-bs-placement");
          }
          button.setAttribute("title", currentTitle);
          button.classList.remove('code-copy-button-checked');
        }, 1000);
        // clear code selection
        e.clearSelection();
      });
      function tippyHover(el, contentFn) {
        const config = {
          allowHTML: true,
          content: contentFn,
          maxWidth: 500,
          delay: 100,
          arrow: false,
          appendTo: function(el) {
              return el.closest('section.slide') || el.parentElement;
          },
          interactive: true,
          interactiveBorder: 10,
          theme: 'quarto-reveal',
          placement: 'bottom-start'
        };
          config['offset'] = [0,0];
          config['maxWidth'] = 700;
        window.tippy(el, config); 
      }
      const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
      for (var i=0; i<noterefs.length; i++) {
        const ref = noterefs[i];
        tippyHover(ref, function() {
          // use id or data attribute instead here
          let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
          try { href = new URL(href).hash; } catch {}
          const id = href.replace(/^#\/?/, "");
          const note = window.document.getElementById(id);
          return note.innerHTML;
        });
      }
      const findCites = (el) => {
        const parentEl = el.parentElement;
        if (parentEl) {
          const cites = parentEl.dataset.cites;
          if (cites) {
            return {
              el,
              cites: cites.split(' ')
            };
          } else {
            return findCites(el.parentElement)
          }
        } else {
          return undefined;
        }
      };
      var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
      for (var i=0; i<bibliorefs.length; i++) {
        const ref = bibliorefs[i];
        const citeInfo = findCites(ref);
        if (citeInfo) {
          tippyHover(citeInfo.el, function() {
            var popup = window.document.createElement('div');
            citeInfo.cites.forEach(function(cite) {
              var citeDiv = window.document.createElement('div');
              citeDiv.classList.add('hanging-indent');
              citeDiv.classList.add('csl-entry');
              var biblioDiv = window.document.getElementById('ref-' + cite);
              if (biblioDiv) {
                citeDiv.innerHTML = biblioDiv.innerHTML;
              }
              popup.appendChild(citeDiv);
            });
            return popup.innerHTML;
          });
        }
      }
    });
    </script>
    

</body></html>