├── .DS_Store ├── .Rproj.user ├── FFB26621 │ ├── pcs │ │ ├── debug-breakpoints.pper │ │ ├── files-pane.pper │ │ ├── packages-pane.pper │ │ ├── source-pane.pper │ │ ├── windowlayoutstate.pper │ │ └── workbench-pane.pper │ ├── persistent-state │ ├── rmd-outputs │ ├── saved_source_markers │ └── sources │ │ └── prop │ │ ├── 1E53CDC0 │ │ ├── 1F8A23A7 │ │ ├── 2A9B8308 │ │ ├── 38A911A1 │ │ ├── 53CF1175 │ │ ├── 5A2E7950 │ │ ├── 600D85C1 │ │ ├── 6AC055BB │ │ ├── 835C780 │ │ ├── 8DCAC31D │ │ ├── 8DE83026 │ │ ├── AFDE9AEF │ │ ├── C20DBC41 │ │ ├── C8E159CE │ │ ├── CDB99092 │ │ ├── FBD854FC │ │ ├── FC94C023 │ │ └── INDEX └── shared │ └── notebooks │ ├── AC636FDD-index │ └── 1 │ │ ├── FFB2662132C700D6 │ │ └── chunks.json │ │ ├── FFB266213751604D │ │ └── chunks.json │ │ └── s │ │ └── chunks.json │ ├── patch-chunk-names │ └── paths ├── .gitignore ├── alittlejs.Rproj ├── css ├── .DS_Store ├── styles.css └── xaringan-themer.css ├── images ├── .DS_Store ├── css.png ├── github-inputbinding.png ├── js2r.png ├── r2js.png └── server_ui.png ├── index.Rmd ├── index.html ├── shiny_examples ├── .DS_Store ├── circleInput │ ├── .DS_Store │ ├── custom_binding │ │ ├── .DS_Store │ │ ├── app.R │ │ ├── circleInput.R │ │ └── inst │ │ │ ├── .DS_Store │ │ │ └── circleInput.js │ └── input_value │ │ ├── .DS_Store │ │ ├── app.R │ │ ├── circleInput.R │ │ └── inst │ │ ├── .DS_Store │ │ └── circles.js ├── intro_app │ └── app.R └── toggle_buttons │ ├── app.R │ ├── source.R │ └── www │ └── source.js └── xaringan-themer.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/.DS_Store -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/pcs/debug-breakpoints.pper: -------------------------------------------------------------------------------- 1 | { 2 | "debugBreakpointsState" : { 3 | "breakpoints" : [ 4 | ] 5 | } 6 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/pcs/files-pane.pper: -------------------------------------------------------------------------------- 1 | { 2 | "path" : "~/Documents/alittlejs/shiny_examples/circleInput/custom_binding/inst", 3 | "sortOrder" : [ 4 | { 5 | "ascending" : true, 6 | "columnIndex" : 2 7 | } 8 | ] 9 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/pcs/packages-pane.pper: -------------------------------------------------------------------------------- 1 | { 2 | "installOptions" : { 3 | "installDependencies" : true, 4 | "installFromRepository" : true, 5 | "libraryPath" : "/Library/Frameworks/R.framework/Versions/4.0/Resources/library" 6 | } 7 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/pcs/source-pane.pper: -------------------------------------------------------------------------------- 1 | { 2 | "activeTab" : 0 3 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/pcs/windowlayoutstate.pper: -------------------------------------------------------------------------------- 1 | { 2 | "left" : { 3 | "panelheight" : 640, 4 | "splitterpos" : 270, 5 | "topwindowstate" : "NORMAL", 6 | "windowheight" : 678 7 | }, 8 | "right" : { 9 | "panelheight" : 640, 10 | "splitterpos" : 405, 11 | "topwindowstate" : "NORMAL", 12 | "windowheight" : 678 13 | } 14 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/pcs/workbench-pane.pper: -------------------------------------------------------------------------------- 1 | { 2 | "TabSet1" : 0, 3 | "TabSet2" : 0, 4 | "TabZoom" : { 5 | } 6 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/persistent-state: -------------------------------------------------------------------------------- 1 | build-last-errors="[]" 2 | build-last-errors-base-dir="" 3 | build-last-outputs="[]" 4 | compile_pdf_state="{\"errors\":[],\"output\":\"\",\"running\":false,\"tab_visible\":false,\"target_file\":\"\"}" 5 | files.monitored-path="" 6 | find-in-files-state="{\"handle\":\"\",\"input\":\"\",\"path\":\"\",\"regex\":true,\"results\":{\"file\":[],\"line\":[],\"lineValue\":[],\"matchOff\":[],\"matchOn\":[]},\"running\":false}" 7 | imageDirtyState="1" 8 | saveActionState="0" 9 | -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/rmd-outputs: -------------------------------------------------------------------------------- 1 | ~/Documents/alittlejs/index.html 2 | ~/Documents/alittlejs/index.html 3 | ~/Documents/alittlejs/index.html 4 | ~/Documents/alittlejs/index.html 5 | ~/Documents/alittlejs/index.html 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/saved_source_markers: -------------------------------------------------------------------------------- 1 | {"active_set":"","sets":[]} -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/1E53CDC0: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "12,3", 3 | "scrollLine" : "0", 4 | "tempName" : "Untitled1" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/1F8A23A7: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "28,21", 3 | "scrollLine" : "18", 4 | "tempName" : "Untitled1" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/2A9B8308: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "19,0", 3 | "scrollLine" : "14" 4 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/38A911A1: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "3,12", 3 | "scrollLine" : "0", 4 | "tempName" : "Untitled1" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/53CF1175: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "0,0", 3 | "scrollLine" : "0", 4 | "tempName" : "Untitled1" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/5A2E7950: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "0,0", 3 | "scrollLine" : "0", 4 | "tempName" : "Untitled1" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/600D85C1: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "726,1", 3 | "last_setup_crc32" : "43FA2D92dda5d859", 4 | "scrollLine" : "715", 5 | "tempName" : "Untitled1" 6 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/6AC055BB: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/835C780: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "35,80", 3 | "scrollLine" : "3" 4 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/8DCAC31D: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "11,0", 3 | "scrollLine" : "0", 4 | "tempName" : "Untitled1" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/8DE83026: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "17,20", 3 | "scrollLine" : "3" 4 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/AFDE9AEF: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "11,18", 3 | "scrollLine" : "0", 4 | "tempName" : "Untitled1" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/C20DBC41: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/C8E159CE: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "6,1", 3 | "scrollLine" : "0" 4 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/CDB99092: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "13,16", 3 | "scrollLine" : "0" 4 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/FBD854FC: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "511,0", 3 | "scrollLine" : "0" 4 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/FC94C023: -------------------------------------------------------------------------------- 1 | { 2 | "cursorPosition" : "5,0", 3 | "scrollLine" : "0" 4 | } -------------------------------------------------------------------------------- /.Rproj.user/FFB26621/sources/prop/INDEX: -------------------------------------------------------------------------------- 1 | ~%2FDesktop%2FUntitled.Rmd="1E53CDC0" 2 | ~%2FDesktop%2Fbkg_img.rmd="FBD854FC" 3 | ~%2FDesktop%2Ftest%2Fstyling_DT%2Fapp.R="7BE687C7" 4 | ~%2FDocuments%2Falittlejs%2FcircleInput%2Fapp.R="5A2E7950" 5 | ~%2FDocuments%2Falittlejs%2FcircleInput%2FcircleInput.R="1F8A23A7" 6 | ~%2FDocuments%2Falittlejs%2FcircleInput%2FcircleInput.js="AFDE9AEF" 7 | ~%2FDocuments%2Falittlejs%2FcircleInput%2Finst%2FcircleInput.js="835C780" 8 | ~%2FDocuments%2Falittlejs%2FcircleInput%2Finst%2Fcircles.js="53CF1175" 9 | ~%2FDocuments%2Falittlejs%2Fcss%2Fstyles.css="6B9935CA" 10 | ~%2FDocuments%2Falittlejs%2Fexample%2Fapp.R="FC94C023" 11 | ~%2FDocuments%2Falittlejs%2Fexample%2Fsource.R="2A9B8308" 12 | ~%2FDocuments%2Falittlejs%2Fexample%2Fsource.js="8DCAC31D" 13 | ~%2FDocuments%2Falittlejs%2Findex.Rmd="600D85C1" 14 | ~%2FDocuments%2Falittlejs%2Fshiny_examples%2FcircleInput%2Fcustom_binding%2Fapp.R="6AC055BB" 15 | ~%2FDocuments%2Falittlejs%2Fshiny_examples%2FcircleInput%2Fcustom_binding%2FcircleInput.R="CDB99092" 16 | ~%2FDocuments%2Falittlejs%2Fshiny_examples%2FcircleInput%2Fcustom_binding%2Finst%2FcircleInput.js="F7771229" 17 | ~%2FDocuments%2Falittlejs%2Fshiny_examples%2FcircleInput%2Finput_value%2Fapp.R="C8E159CE" 18 | ~%2FDocuments%2Falittlejs%2Fshiny_examples%2FcircleInput%2Finput_value%2FcircleInput.R="8DE83026" 19 | ~%2FDocuments%2Falittlejs%2Fshiny_examples%2FcircleInput%2Finput_value%2Finst%2Fcircles.js="C20DBC41" 20 | ~%2FDocuments%2Falittlejs%2Fshiny_examples%2Fintro_app%2Fapp.R="7337F289" 21 | ~%2FDocuments%2Falittlejs%2Fsource.R="38A911A1" 22 | -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/AC636FDD-index/1/FFB2662132C700D6/chunks.json: -------------------------------------------------------------------------------- 1 | {"chunk_definitions":[],"doc_write_time":1614549774} -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/AC636FDD-index/1/FFB266213751604D/chunks.json: -------------------------------------------------------------------------------- 1 | {"chunk_definitions":[],"doc_write_time":1614572796} -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/AC636FDD-index/1/s/chunks.json: -------------------------------------------------------------------------------- 1 | {"chunk_definitions":[{"chunk_id":"csetup_chunk","chunk_label":"setup","document_id":"377DBF39","expansion_state":0,"options":{"engine":"r","include":false,"label":"setup"},"row":33,"row_count":1,"visible":true}],"default_chunk_options":{"highlight":true},"doc_write_time":1624222694,"working_dir":null} -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/patch-chunk-names: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/.Rproj.user/shared/notebooks/patch-chunk-names -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/paths: -------------------------------------------------------------------------------- 1 | /Users/mayagans/Desktop/test/styling_DT/app.R="631E0361" 2 | /Users/mayagans/Documents/alittlejs/css/styles.css="95F527F1" 3 | /Users/mayagans/Documents/alittlejs/index.Rmd="AC636FDD" 4 | /Users/mayagans/Documents/alittlejs/shiny_examples/circleInput/custom_binding/app.R="6BF2A84D" 5 | /Users/mayagans/Documents/alittlejs/shiny_examples/circleInput/custom_binding/circleInput.R="789CFBA8" 6 | /Users/mayagans/Documents/alittlejs/shiny_examples/circleInput/custom_binding/inst/circleInput.js="FF12D5DD" 7 | /Users/mayagans/Documents/alittlejs/shiny_examples/circleInput/input_value/app.R="5B1B379A" 8 | /Users/mayagans/Documents/alittlejs/shiny_examples/circleInput/input_value/circleInput.R="78F48975" 9 | /Users/mayagans/Documents/alittlejs/shiny_examples/circleInput/input_value/inst/circles.js="C0F9E7E2" 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | .Ruserdata 5 | -------------------------------------------------------------------------------- /alittlejs.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | -------------------------------------------------------------------------------- /css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/css/.DS_Store -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | .remark-code-line.remark-code-line-highlighted { 2 | background-color: #8FC1E2; 3 | } 4 | 5 | .another-pull-left { 6 | float: left; 7 | width: 60%; 8 | } 9 | 10 | .another-pull-right { 11 | float: right; 12 | width: 40%; 13 | text-align: center; 14 | } 15 | 16 | .another-pull-right img { 17 | width: 50%; 18 | filter: drop-shadow(0 0 0.75rem black); 19 | } 20 | 21 | .blue .remark-code { 22 | background: #8FC1E2 !important; 23 | } 24 | 25 | .under { 26 | position: absolute; 27 | bottom: 180px; 28 | right: 70px; 29 | } 30 | 31 | .hljs-github .hljs-comment, .hljs-github .hljs-quote { 32 | color: #7ADFEA; 33 | font-style: italic; 34 | } 35 | 36 | .htmldep { 37 | margin-top: -60px; 38 | text-align: left; 39 | font-size: 15px; 40 | } 41 | 42 | .btn { 43 | padding: 20px 50px; 44 | text-decoration: none; 45 | background: #FF71C3; 46 | border-radius: 3px; 47 | cursor: pointer; 48 | border: solid 1px #FF71C3; 49 | margin-left: 150px; 50 | font-size: 1em; 51 | } 52 | 53 | h2#a-little-js-goes-a-long-way { 54 | width: 30%; 55 | float: right; 56 | } 57 | 58 | .hljs-github .hljs-string, .hljs-github .hljs-doctag { 59 | color: #FFF; 60 | } 61 | 62 | .hljs-github .hljs { 63 | display: block; 64 | overflow-x: auto; 65 | padding: .5em; 66 | color: #333; 67 | background: #FF71C3; 68 | } 69 | 70 | h1 { 71 | color: white; 72 | } 73 | 74 | .btn:hover, 75 | .btn:focus { 76 | box-shadow: 0 0.5em 0.5em -0.4em black; 77 | } 78 | 79 | .btn-default { 80 | color: #333; 81 | background-color: #fff; 82 | border-color: #ccc; 83 | } 84 | 85 | .btn:disabled, 86 | button[disabled]{ 87 | cursor: not-allowed; 88 | opacity: 0.5; 89 | } 90 | 91 | .btn:disabled, 92 | button[disabled]:hover { 93 | cursor: not-allowed; 94 | opacity: 0.5; 95 | background: #FF71C3; 96 | border: solid 1px #FF71C3; 97 | color: black; 98 | box-shadow: 0 0.5em 0.5em -0.4em white; 99 | } 100 | 101 | .header { 102 | position: absolute; 103 | top: 0px; 104 | left: 0px; 105 | width: 100%; 106 | background-color: var(--header-color); 107 | padding-left: 3%; 108 | } 109 | 110 | .content { 111 | padding-top: 20%; 112 | } 113 | 114 | .contentimg { 115 | padding-top: 10%; 116 | } 117 | 118 | .content-right { 119 | position: absolute; 120 | top: 0; 121 | height: 100%; 122 | padding-left: 40%; 123 | padding-top: 5%; 124 | width: 50%; 125 | } 126 | 127 | .content2 { 128 | padding-top: 15%; 129 | } 130 | 131 | .content2 a { 132 | color: hotpink; 133 | } 134 | 135 | .content2 a:hover { 136 | color: var(--header-color); 137 | } 138 | 139 | .header-left { 140 | position: absolute; 141 | background-color: var(--header-color); 142 | width: 30%; 143 | padding-left: 10%; 144 | padding-top: 20%; 145 | top: 0; 146 | left: 0; 147 | height: 100%; 148 | } 149 | 150 | .cardbox { 151 | display: flex; 152 | align-items: center; 153 | justify-content: center; 154 | } 155 | 156 | .scroll-up { 157 | height: 300px; 158 | overflow: hidden; 159 | position: relative; 160 | } 161 | 162 | .scroll-up .inner { 163 | position: absolute; 164 | width: 100%; 165 | height: 100%; 166 | margin: 0; 167 | line-height: 50px; 168 | text-align: center; 169 | /* Starting position */ 170 | -moz-transform:translateY(100%); 171 | -webkit-transform:translateY(100%); 172 | transform:translateY(100%); 173 | /* Apply animation to this element */ 174 | -moz-animation: scroll-up 10s linear infinite; 175 | -webkit-animation: scroll-up 10s linear infinite; 176 | animation: scroll-up 10s linear infinite; 177 | } 178 | /* Move it (define the animation) */ 179 | @-moz-keyframes scroll-up { 180 | 0% { -moz-transform: translateY(-100%); } 181 | 100% { -moz-transform: translateY(-100%); } 182 | } 183 | @-webkit-keyframes scroll-up { 184 | 0% { -webkit-transform: translateY(100%); } 185 | 100% { -webkit-transform: translateY(-100%); } 186 | } 187 | @keyframes scroll-up { 188 | 0% { 189 | -moz-transform: translateY(100%); /* Browser bug fix */ 190 | -webkit-transform: translateY(100%); /* Browser bug fix */ 191 | transform: translateY(100%); 192 | } 193 | 100% { 194 | -moz-transform: translateY(-100%); /* Browser bug fix */ 195 | -webkit-transform: translateY(-100%); /* Browser bug fix */ 196 | transform: translateY(-100%); 197 | } 198 | } 199 | 200 | #div_demo { 201 | margin-top: 20px; 202 | margin-left: -40px; 203 | text-align: center; 204 | } 205 | 206 | .flip-card { 207 | background-color: transparent; 208 | width: 300px; 209 | height: 300px; 210 | perspective: 1000px; 211 | margin: 10px; 212 | } 213 | 214 | .flip-card-inner { 215 | position: relative; 216 | width: 100%; 217 | height: 100%; 218 | text-align: center; 219 | transition: transform 0.6s; 220 | transform-style: preserve-3d; 221 | box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 222 | } 223 | 224 | .flip-card:hover .flip-card-inner { 225 | transform: rotateY(180deg); 226 | } 227 | 228 | .flip-card-front, .flip-card-back { 229 | position: absolute; 230 | width: 100%; 231 | height: 100%; 232 | -webkit-backface-visibility: hidden; 233 | backface-visibility: hidden; 234 | } 235 | 236 | .flip-card-front { 237 | background-color: #fff; 238 | border: solid 2px #FF71C3; 239 | text-align: center; 240 | color: var(--header-color); 241 | font-weight: bold; 242 | } 243 | 244 | .flip-card-back { 245 | background-color: #FF71C3; 246 | color: white; 247 | transform: rotateY(180deg); 248 | } -------------------------------------------------------------------------------- /css/xaringan-themer.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.3.0 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Karla:300,300i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Poppins:600&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Fira+Code&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: Karla; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Poppins; 33 | --header-font-is-google: 1; 34 | --code-font-family: 'Fira Code'; 35 | --code-font-is-google: 1; 36 | --base-font-size: 20px; 37 | --text-font-size: 24px; 38 | --code-font-size: 0.7em; 39 | --code-inline-font-size: 1em; 40 | --header-h1-font-size: 2.75rem; 41 | --header-h2-font-size: 2.25rem; 42 | --header-h3-font-size: 1.75rem; 43 | 44 | /* Colors */ 45 | --text-color: #18273F; 46 | --header-color: #23395b; 47 | --background-color: #fff; 48 | --link-color: #23395b; 49 | --text-bold-color: #23395b; 50 | --code-highlight-color: rgba(255,255,0,0.5); 51 | --inverse-text-color: #fff; 52 | --inverse-background-color: #23395b; 53 | --inverse-header-color: #fff; 54 | --title-slide-background-color: #23395b; 55 | --title-slide-text-color: #fff; 56 | --header-background-color: #23395b; 57 | --header-background-text-color: #fff; 58 | --base: #23395b; 59 | --white: #fff; 60 | --black: #18273F; 61 | } 62 | 63 | html { 64 | font-size: var(--base-font-size); 65 | } 66 | 67 | body { 68 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 69 | font-weight: 300; 70 | color: var(--text-color); 71 | } 72 | h1, h2, h3 { 73 | font-family: var(--header-font-family); 74 | font-weight: 600; 75 | color: var(--header-color); 76 | } 77 | .remark-slide-content { 78 | background-color: var(--background-color); 79 | font-size: 24px; 80 | padding: 16px 64px 16px 64px; 81 | width: 100%; 82 | height: 100%; 83 | } 84 | .remark-slide-content h1 { 85 | font-size: var(--header-h1-font-size); 86 | } 87 | .remark-slide-content h2 { 88 | font-size: var(--header-h2-font-size); 89 | } 90 | .remark-slide-content h3 { 91 | font-size: var(--header-h3-font-size); 92 | } 93 | .remark-code, .remark-inline-code { 94 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 95 | } 96 | .remark-code { 97 | font-size: var(--code-font-size); 98 | } 99 | .remark-inline-code { 100 | font-size: var(--code-inline-font-size); 101 | color: #23395b; 102 | } 103 | .remark-slide-number { 104 | color: #23395b; 105 | opacity: 1; 106 | font-size: 0.9em; 107 | } 108 | strong { color: var(--text-bold-color); } 109 | a, a > code { 110 | color: var(--link-color); 111 | text-decoration: none; 112 | } 113 | .footnote { 114 | position: absolute; 115 | bottom: 60px; 116 | padding-right: 4em; 117 | font-size: 0.9em; 118 | } 119 | .remark-code-line-highlighted { 120 | background-color: var(--code-highlight-color); 121 | } 122 | .inverse { 123 | background-color: var(--inverse-background-color); 124 | color: var(--inverse-text-color); 125 | 126 | } 127 | .inverse h1, .inverse h2, .inverse h3 { 128 | color: var(--inverse-header-color); 129 | } 130 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 131 | color: var(--title-slide-text-color); 132 | } 133 | .title-slide { 134 | background-color: var(--title-slide-background-color); 135 | } 136 | .title-slide .remark-slide-number { 137 | display: none; 138 | } 139 | /* Two-column layout */ 140 | .left-column { 141 | width: 20%; 142 | height: 92%; 143 | float: left; 144 | } 145 | .left-column h2, .left-column h3 { 146 | color: #23395b99; 147 | } 148 | .left-column h2:last-of-type, .left-column h3:last-child { 149 | color: #23395b; 150 | } 151 | .right-column { 152 | width: 75%; 153 | float: right; 154 | padding-top: 1em; 155 | } 156 | .pull-left { 157 | float: left; 158 | width: 47%; 159 | } 160 | .pull-right { 161 | float: right; 162 | width: 47%; 163 | } 164 | .pull-right ~ * { 165 | clear: both; 166 | } 167 | img, video, iframe { 168 | max-width: 100%; 169 | } 170 | blockquote { 171 | border-left: solid 5px #23395b80; 172 | padding-left: 1em; 173 | } 174 | .remark-slide table { 175 | margin: auto; 176 | border-top: 1px solid #666; 177 | border-bottom: 1px solid #666; 178 | } 179 | .remark-slide table thead th { 180 | border-bottom: 1px solid #ddd; 181 | } 182 | th, td { 183 | padding: 5px; 184 | } 185 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 186 | background: #D3D7DE; 187 | } 188 | table.dataTable tbody { 189 | background-color: var(--background-color); 190 | color: var(--text-color); 191 | } 192 | table.dataTable.display tbody tr.odd { 193 | background-color: var(--background-color); 194 | } 195 | table.dataTable.display tbody tr.even { 196 | background-color: #D3D7DE; 197 | } 198 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 199 | background-color: rgba(255, 255, 255, 0.5); 200 | } 201 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 202 | color: var(--text-color); 203 | } 204 | .dataTables_wrapper .dataTables_paginate .paginate_button { 205 | color: var(--text-color) !important; 206 | } 207 | 208 | /* Slide Header Background for h1 elements */ 209 | .remark-slide-content.header_background > h1 { 210 | display: block; 211 | position: absolute; 212 | top: 0; 213 | left: 0; 214 | width: 100%; 215 | background: var(--header-background-color); 216 | color: var(--header-background-text-color); 217 | padding: 2rem 64px 1.5rem 64px; 218 | margin-top: 0; 219 | box-sizing: border-box; 220 | } 221 | .remark-slide-content.header_background { 222 | padding-top: 7rem; 223 | } 224 | 225 | @page { margin: 0; } 226 | @media print { 227 | .remark-slide-scaler { 228 | width: 100% !important; 229 | height: 100% !important; 230 | transform: scale(1) !important; 231 | top: 0 !important; 232 | left: 0 !important; 233 | } 234 | } 235 | 236 | .base { 237 | color: var(--base); 238 | } 239 | .bg-base { 240 | background-color: var(--base); 241 | } 242 | .white { 243 | color: var(--white); 244 | } 245 | .bg-white { 246 | background-color: var(--white); 247 | } 248 | .black { 249 | color: var(--black); 250 | } 251 | .bg-black { 252 | background-color: var(--black); 253 | } 254 | 255 | -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/images/.DS_Store -------------------------------------------------------------------------------- /images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/images/css.png -------------------------------------------------------------------------------- /images/github-inputbinding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/images/github-inputbinding.png -------------------------------------------------------------------------------- /images/js2r.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/images/js2r.png -------------------------------------------------------------------------------- /images/r2js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/images/r2js.png -------------------------------------------------------------------------------- /images/server_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MayaGans/alittlejs/4ad9f1785b54739791272d8e20827a3b1ff3af3d/images/server_ui.png -------------------------------------------------------------------------------- /index.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Xaringan Demo" 3 | author: "Maya Gans" 4 | date: "`r Sys.Date()`" 5 | output: 6 | xaringan::moon_reader: 7 | seal: false 8 | lib_dir: libs 9 | css: [css/xaringan-themer.css, css/styles.css] 10 | nature: 11 | titleSlideClass: ["bottom", "left"] 12 | slideNumberFormat: "%current%" 13 | highlightStyle: github 14 | highlightLines: true 15 | ratio: "16:9" 16 | countIncrementalSlides: true 17 | --- 18 | 19 | class: right middle hide-count 20 | background-color: white 21 | background-image: url(https://images.unsplash.com/photo-1557672172-298e090bd0f1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cGF0dGVybnxlbnwwfHwwfA%3D%3D&auto=format&fit=crop&w=800&q=60) 22 | background-position: left 23 | 24 | ## A Little JS Goes a Long Way 25 |
26 | By Maya Gans
27 | @Mayacelium 28 |
29 | 30 | 31 | ```{r setup, include=FALSE} 32 | options(htmltools.dir.version = FALSE) 33 | knitr::opts_chunk$set(highlight = TRUE) 34 | ``` 35 | 36 | ```{r xaringan-themer, include=FALSE} 37 | library(xaringanthemer) 38 | mono_light( 39 | white_color = "#fff", 40 | header_font_google = google_font("Poppins", "600"), 41 | text_font_google = google_font("Karla", "300", "300i"), 42 | code_font_google = google_font("Fira Code"), 43 | text_font_size = "24px", 44 | code_font_size = "0.7em" 45 | ) 46 | ``` 47 | 48 | --- 49 | 50 | .header[ 51 | #R + JS = <3 52 | ] 53 | 54 | .content[ 55 | ### Shiny Under the Hood 56 | ### R to JS 57 | ### JS to R 58 | ] 59 | 60 | --- 61 | 62 | background-color: var(--header-color) 63 | 64 |

But first:
A Shiny Explanation


65 | 66 | DEMO APP 70 | 71 | --- 72 | .header[ 73 |

Behind every shiny app is a computer running R

74 | ] 75 | 76 | .contentimg[ 77 | ### Shiny apps Have TWO components 78 | 79 | !["bidirectional arrows pointing to a computer and webpage with a shiny application open"](images/server_ui.png) 80 | ] 81 | 82 | --- 83 | 84 | .header-left[ 85 | # UI 86 | ] 87 | 88 | .content-right[ 89 | ```{r, eval=FALSE} 90 | ui <- fluidPage( 91 | titlePanel("Intro to Shiny"), 92 | 93 | sidebarLayout( 94 | sidebarPanel( 95 | selectInput("xvar", 96 | "X Variable", 97 | choices = numericPenguins), 98 | selectInput("yvar", 99 | "Y Variable", 100 | choices = numericPenguins) 101 | ), 102 | mainPanel( 103 | plotOutput("penguinPlot") 104 | ) 105 | ) 106 | ) 107 | ``` 108 | ] 109 | 110 | --- 111 | 112 | .header-left[ 113 | # Server 114 | ] 115 | 116 | .content-right[ 117 | ```{r, eval=FALSE} 118 | server <- function(input, output) { 119 | # call the output of our plot input 120 | output$penguinPlot <- renderPlot({ 121 | # use the input values 122 | # xvar and yvar to create our plot 123 | # note: 124 | # pass in x and y as strings! 125 | ggplot(penguins, 126 | aes_string(x = input$xvar, 127 | y = input$yvar, 128 | color = 'species')) + 129 | geom_point() 130 | } 131 | 132 | ``` 133 | ] 134 | 135 | --- 136 | 137 | background-color: var(--header-color) 138 | 139 |

Put it together:


140 | 141 |

shinyApp(ui = ui, server = server)


142 | 143 | --- 144 | 145 | .header[ 146 | # Shiny is a wrapper 147 | ] 148 | 149 | 156 | 157 | .content[ 158 | 159 | .pull-left[ 160 | ```{r, eval=FALSE} 161 | library(shiny) 162 | 163 | ui <- fluidPage( 164 | actionButton("btn_demo", "CLICK") #<< 165 | ) 166 | 167 | server <- function(input, output) { 168 | observeEvent(input$btn_demo, { 169 | print("Button Clicked") 170 | }) 171 | } 172 | 173 | shinyApp(ui, server) 174 | ``` 175 | ] 176 | 177 | .pull-right[ 178 | 179 | 180 |
181 | ] 182 | ] 183 | 184 | --- 185 | 186 | .header[ 187 | # Shiny is a wrapper 188 | ] 189 | 190 | .content[ 191 | .cardbox[ 192 |
193 |
194 |
195 |

HTML

196 |
197 |
198 |

Hypertext Markup Language

199 | <button>CLICK</button> 200 |
201 |
202 |
203 | 204 |
205 |
206 |
207 |

CSS

208 |
209 |
210 |

Cascading Style Sheets

211 |
212 |  button {
213 |     background-color: pink;
214 |  } 215 |
216 |
217 |
218 |
219 | 220 |
221 |
222 |
223 |

JavaScript

224 |
225 |
226 |

The Language of the Internet!

227 |
228 | function change() {
229 | document.getElementById('div_demo')
230 | .innerHTML = "Button Clicked";
231 | } 232 |
233 |
234 |
235 |
236 | ] 237 | ] 238 | 239 | --- 240 | 241 | .header[ 242 | # HTML 243 | ] 244 | 245 | 246 | .content[ 247 | ```{r, eval=FALSE} 248 | shiny::actionButton 249 | 250 | function (inputId, label, icon = NULL, width = NULL, ...) 251 | { 252 | value <- restoreInput(id = inputId, default = NULL) 253 | tags$button(id = inputId, style = if (!is.null(width)) #<< 254 | paste0("width: ", validateCssUnit(width), ";"), type = "button", 255 | class = "btn btn-default action-button", `data-val` = value, 256 | list(validateIcon(icon), label), ...) 257 | } 258 | 259 | 260 | shiny::tags$button #<< 261 | 262 | 263 | ``` 264 | ] 265 | 266 | --- 267 | 268 | .header[ 269 | # CSS 270 | ] 271 | 272 | .content[ 273 | 274 | .another-pull-left[ 275 | ```{r, eval=FALSE} 276 | function (inputId, label, icon = NULL, width = NULL, ...) 277 | { 278 | value <- restoreInput(id = inputId, default = NULL) 279 | tags$button(id = inputId, style = if (!is.null(width)) 280 | paste0("width: ", validateCssUnit(width), ";"), type = "button", 281 | class = "btn btn-default action-button", `data-val` = value, 282 | list(validateIcon(icon), label), ...) 283 | } 284 | ``` 285 | ] 286 | 287 | .another-pull-right[ 288 | ![css_screenshot](images/css.png) 289 | ] 290 | 291 | ] 292 | 293 | 294 | --- 295 | 296 | .header[ 297 | # JavaScript 298 | ] 299 | 300 | .content[ 301 |