Initialize learnitdown features in an R Markdown document
Source:R/learnitdown_init.R
learnitdown_init.RdThis function must be called in a script run by before_chapter_script entry
in _bookdown.yml to create required style.css and header.html files.
learnitdown_init(
shiny = TRUE,
h5p = TRUE,
use.query = FALSE,
iframe.links = TRUE,
details.css = TRUE,
baseurl = "https://example.org",
institutions = c("institution1", "institution2"),
courses = c("course1", "course2", "course3"),
style = "style.css",
style0 = "style0.css",
header = "header.html",
header0 = "header0.html",
hide.code.msg = "See code"
)Arguments
- shiny
Do we use Shiny applications and do we want to pass parameters and or launch the application on a click?
- h5p
Do we use H5P served from a Wordpress site in the same domain as our R Markdown document? The H5P integration plugin, and the H5PxAPIkatchu Wordpress plugins must be installed in order to serve H5P apps and to record the H5P events through the xAPI interface.
- use.query
Do we collect user/course/institution data through the URL query string (the part after the question mark in the URL).
- iframe.links
If our document is displayed in an iframe, external link should better target their parent window. With this option, external links with no defined target are automatically retargeted when the page loads.
- details.css
Do we want to enhance the
<details>section with a summary surrounded by a light gray box in order to better evidence it.- baseurl
The URL where the site is server from (for H5P integration), it is also the base URL for the associated Wordpress server with H5P plugin. Provide it without the trailing /!
- institutions
The list of possible institutions that have specific sections in this document.
- courses
The list of courses with specific sections in this document.
- style
The path to the 'style.css' file.
- style0
The path to a file with additional content to add to the 'style.css' file.
- header
The path to the 'header.html' file.
- header0
The path to a file with additional content to add to 'header.html'.
- hide.code.msg
The message to display for hidden code.
Value
A list with css and html components with the content that was
added to respective files is returned invisibly for debugging purposes '(the
function is mainly used for its side effect of creating style.css and
header.html files for the bookdown format).
Examples
# This is better placed in a setup R chunk or an R inline expression on its
# own line. To see the code injected, use `cat()` at the R prompt:
odir <- setwd(tempdir())
dir.create("temp")
setwd("temp")
# Create fake style0.css and header0.html files to see what happens
cat("\n/* Content from style0.css */\n", file = "style0.css")
cat("\n<!-- Content from header0.html -->\n", file = "header0.html")
# Create style.css and header.html files
(learnitdown_init())
#> $style
#> [1] "\n.institution1, .institution2 {\n display: none;\n}\n\n.noinstitution {\n display: block;\n}\n\n.course1, .course2, .course3 {\n display: none;\n}\n\n.nocourse {\n display: block;\n}\n\nsummary {\n background: #f5f5f5;\n border: 1px solid #ccc;\n}\n\n.shiny-img {\n filter: brightness(80%);\n}\n\n\n/* Content from style0.css */"
#>
#> $html
#> [1] "<script>\nfunction getParameterByName(name, url) {\n name = name.replace(/[\\[\\]]/g,\"\\\\$&\");\n // Try to get the value from local storage\n if (window.localStorage) {\n return localStorage.getItem(name);\n } else {\n return '';\n }\n}\n\n// Collect parameters and store their values (as passed by Moodle/Wordpress)\nvar login = getParameterByName('login');\nvar email = getParameterByName('email');\nvar displayname = getParameterByName('displayname');\nvar firstname = getParameterByName('firstname');\nvar lastname = getParameterByName('lastname');\nvar iemail = getParameterByName('iemail');\nvar iid = getParameterByName('iid');\nvar ifirstname = getParameterByName('ifirstname');\nvar ilastname = getParameterByName('ilastname');\nvar institution = getParameterByName('institution');\nvar icourse = getParameterByName('icourse');\nvar ictitle = getParameterByName('ictitle');\nvar iurl = getParameterByName('iurl');\nvar iref = getParameterByName('iref');\n\nlet institutions = ['institution1', 'institution2', 'noinstitution'];\nlet courses = ['course1', 'course2', 'course3', 'nocourse'];\n\nfunction toggleDisplay(item, target) {\n var style = item == target ? 'block' : 'none';\n var elems = document.getElementsByClassName(item);\n for (i = 0; i < elems.length; i++) {\n var elem = elems[i];\n elem.style.display = style;\n }\n}\n\nfunction toggleInstitution(name) {\n // Disable all institutions except that one\n // Since they are already all hidden, just reenable it and hide noinstitution\n toggleDisplay('noinstitution', name);\n toggleDisplay(name, name);\n}\n\nfunction toggleCourse(name) {\n // Disable all courses except that one\n // Since they are already all hidden, just reenable it and hide nocourse\n toggleDisplay('nocourse', name);\n toggleDisplay(name, name);\n}\n\nfunction processParameters() {\n // Content related to an institution\n if (institution !== null) {\n toggleInstitution(institution);\n }\n // Content relative to a course\n if (icourse !== null) {\n toggleCourse(icourse);\n }\n // Process other parameters too here...\n // ...\n}\n\n\nfunction hideCode() {\n //var codes = document.querySelectorAll('pre:not([class])');\n var codes = document.getElementsByClassName('hidden-code');\n var code, i, d, s, p;\n for (i = 0; i < codes.length; i++) {\n // We want to place the parent div into details instead\n code = codes[i].parentNode;\n p = code.parentNode;\n d = document.createElement('details');\n s = document.createElement('summary');\n s.innerText = 'See code';\n //<details><summary>hide.code.msg</summary></details>\n d.appendChild(s);\n // move the code into <details>\n p.replaceChild(d, code);\n d.appendChild(code);\n }\n}\n\n\nfunction retargetLinks() {\n // If displayed in an iframe, open external links into parent\n // Adapted from Yihui Xie blog\n var links = document.getElementsByTagName('a');\n for (var i = 0; i < links.length; i++) {\n if (/^(https?:)?\\/\\//.test(links[i].getAttribute('href')) &&\n (links[i].target == null || links[i].target == '')) {\n links[i].target = '_parent';\n }\n }\n};\n\nwindow.onload = function() {processParameters(); hideCode(); retargetLinks();};\n\nfunction encodeQueryParam(name, first = false) {\n var value = localStorage.getItem(name);\n if (value === null || value == '') return '';\n var sep = first ? '' : '&';\n return sep + encodeURIComponent(name) + '=' + encodeURIComponent(value);\n}\n\nfunction encodeQueryString() {\n // We got data from localStorage. So, if no data, no query string!\n if (!window.localStorage) return('');\n query = encodeQueryParam('login', true);\n query += encodeQueryParam('email') + encodeQueryParam('displayname');\n query += encodeQueryParam('firstname') + encodeQueryParam('lastname');\n query += encodeQueryParam('iemail') + encodeQueryParam('iid');\n query += encodeQueryParam('ifirstname') + encodeQueryParam('ilastname');\n query += encodeQueryParam('institution');\n query += encodeQueryParam('icourse') + encodeQueryParam('ictitle');\n query += encodeQueryParam('iurl') + encodeQueryParam('iref');\n // Detect if we have the Sepia or Night theme\n // TODO: refine this because it is *always* detected\n //if (document.getElementsByClassName('color-theme-1')) {\n // if (query == '') {\n // query = 'theme=Sepia';\n // } else {\n // query += '&theme=Sepia';\n // }\n //}\n //if (document.getElementsByClassName('color-theme-22')) {\n // if (query == '') {\n // query = 'theme=Night';\n // } else {\n // query += '&theme=Night';\n // }\n //}\n return query;\n}\n\n//var params = window.location.toString().split('?')[1];\nvar params = encodeQueryString();\n\nif (params !== undefined && params != '') {\n var apps = document.getElementsByClassName('app');\n for (i = 0; i < apps.length; i++) {\n var appitem = apps[i];\n appitem.src = appitem.src + '?' + params;\n }\n\n //var h5ps = document.getElementsByClassName('h5p');\n //for (i = 0; i < h5ps.length; i++) {\n // var h5pitem = h5ps[i];\n // h5pitem.src = h5pitem.src + '&' + params;\n //}\n}\n\nlaunchApp = function(id, src) {\n //var params = window.location.toString().split('?')[1];\n var params = encodeQueryString();\n if (params !== undefined && params != '') {\n if (src.includes('?')) {\n // There is already a search string => append parameters to it\n src = src + '&' + params;\n } else {\n // Add a search string\n src = src + '?' + params;\n }\n }\n var img = document.getElementById('img' + id);\n var app = document.getElementById(id);\n app.src = src;\n app.style.display='block';\n img.style.display='none';\n}\n\nvar H5PIntegration = parent.H5PIntegration;\nvar wpAJAXurl = 'https:\\/\\/example.org\\/wp-admin\\/admin-ajax.php';\nvar debugEnabled = '0';\nvar captureAllH5pContentTypes = '1';\nvar h5pContentTypes = [''];\n</script>\n\n<link rel='stylesheet' id='h5p-core-styles-h5p-css' href='https://example.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p.css' media='all' />\n<link rel='stylesheet' id='h5p-core-styles-h5p-confirmation-dialog-css' href='https://example.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p-confirmation-dialog.css' media='all' />\n<link rel='stylesheet' id='h5p-core-styles-h5p-core-button-css' href='https://example.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p-core-button.css' media='all' />\n\n<script src='https://example.org/wp-includes/js/wp-embed.min.js'></script>\n\n<!--\n<script src='https://example.org/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>\n<script src='https://example.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>\n-->\n\n<script src='https://example.org/wp-content/plugins/h5pxapikatchu/js/h5pxapikatchu-variables.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/jquery.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-event-dispatcher.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-x-api-event.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-x-api.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-content-type.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-confirmation-dialog.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-action-bar.js'></script>\n<script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/request-queue.js'></script>\n\n\n<!-- Content from header0.html -->"
#>
cat(readLines('style.css'), sep = "\n")
#>
#> .institution1, .institution2 {
#> display: none;
#> }
#>
#> .noinstitution {
#> display: block;
#> }
#>
#> .course1, .course2, .course3 {
#> display: none;
#> }
#>
#> .nocourse {
#> display: block;
#> }
#>
#> summary {
#> background: #f5f5f5;
#> border: 1px solid #ccc;
#> }
#>
#> .shiny-img {
#> filter: brightness(80%);
#> }
#>
#>
#> /* Content from style0.css */
cat(readLines('header.html'), sep = "\n")
#> <script>
#> function getParameterByName(name, url) {
#> name = name.replace(/[\[\]]/g,"\\$&");
#> // Try to get the value from local storage
#> if (window.localStorage) {
#> return localStorage.getItem(name);
#> } else {
#> return '';
#> }
#> }
#>
#> // Collect parameters and store their values (as passed by Moodle/Wordpress)
#> var login = getParameterByName('login');
#> var email = getParameterByName('email');
#> var displayname = getParameterByName('displayname');
#> var firstname = getParameterByName('firstname');
#> var lastname = getParameterByName('lastname');
#> var iemail = getParameterByName('iemail');
#> var iid = getParameterByName('iid');
#> var ifirstname = getParameterByName('ifirstname');
#> var ilastname = getParameterByName('ilastname');
#> var institution = getParameterByName('institution');
#> var icourse = getParameterByName('icourse');
#> var ictitle = getParameterByName('ictitle');
#> var iurl = getParameterByName('iurl');
#> var iref = getParameterByName('iref');
#>
#> let institutions = ['institution1', 'institution2', 'noinstitution'];
#> let courses = ['course1', 'course2', 'course3', 'nocourse'];
#>
#> function toggleDisplay(item, target) {
#> var style = item == target ? 'block' : 'none';
#> var elems = document.getElementsByClassName(item);
#> for (i = 0; i < elems.length; i++) {
#> var elem = elems[i];
#> elem.style.display = style;
#> }
#> }
#>
#> function toggleInstitution(name) {
#> // Disable all institutions except that one
#> // Since they are already all hidden, just reenable it and hide noinstitution
#> toggleDisplay('noinstitution', name);
#> toggleDisplay(name, name);
#> }
#>
#> function toggleCourse(name) {
#> // Disable all courses except that one
#> // Since they are already all hidden, just reenable it and hide nocourse
#> toggleDisplay('nocourse', name);
#> toggleDisplay(name, name);
#> }
#>
#> function processParameters() {
#> // Content related to an institution
#> if (institution !== null) {
#> toggleInstitution(institution);
#> }
#> // Content relative to a course
#> if (icourse !== null) {
#> toggleCourse(icourse);
#> }
#> // Process other parameters too here...
#> // ...
#> }
#>
#>
#> function hideCode() {
#> //var codes = document.querySelectorAll('pre:not([class])');
#> var codes = document.getElementsByClassName('hidden-code');
#> var code, i, d, s, p;
#> for (i = 0; i < codes.length; i++) {
#> // We want to place the parent div into details instead
#> code = codes[i].parentNode;
#> p = code.parentNode;
#> d = document.createElement('details');
#> s = document.createElement('summary');
#> s.innerText = 'See code';
#> //<details><summary>hide.code.msg</summary></details>
#> d.appendChild(s);
#> // move the code into <details>
#> p.replaceChild(d, code);
#> d.appendChild(code);
#> }
#> }
#>
#>
#> function retargetLinks() {
#> // If displayed in an iframe, open external links into parent
#> // Adapted from Yihui Xie blog
#> var links = document.getElementsByTagName('a');
#> for (var i = 0; i < links.length; i++) {
#> if (/^(https?:)?\/\//.test(links[i].getAttribute('href')) &&
#> (links[i].target == null || links[i].target == '')) {
#> links[i].target = '_parent';
#> }
#> }
#> };
#>
#> window.onload = function() {processParameters(); hideCode(); retargetLinks();};
#>
#> function encodeQueryParam(name, first = false) {
#> var value = localStorage.getItem(name);
#> if (value === null || value == '') return '';
#> var sep = first ? '' : '&';
#> return sep + encodeURIComponent(name) + '=' + encodeURIComponent(value);
#> }
#>
#> function encodeQueryString() {
#> // We got data from localStorage. So, if no data, no query string!
#> if (!window.localStorage) return('');
#> query = encodeQueryParam('login', true);
#> query += encodeQueryParam('email') + encodeQueryParam('displayname');
#> query += encodeQueryParam('firstname') + encodeQueryParam('lastname');
#> query += encodeQueryParam('iemail') + encodeQueryParam('iid');
#> query += encodeQueryParam('ifirstname') + encodeQueryParam('ilastname');
#> query += encodeQueryParam('institution');
#> query += encodeQueryParam('icourse') + encodeQueryParam('ictitle');
#> query += encodeQueryParam('iurl') + encodeQueryParam('iref');
#> // Detect if we have the Sepia or Night theme
#> // TODO: refine this because it is *always* detected
#> //if (document.getElementsByClassName('color-theme-1')) {
#> // if (query == '') {
#> // query = 'theme=Sepia';
#> // } else {
#> // query += '&theme=Sepia';
#> // }
#> //}
#> //if (document.getElementsByClassName('color-theme-22')) {
#> // if (query == '') {
#> // query = 'theme=Night';
#> // } else {
#> // query += '&theme=Night';
#> // }
#> //}
#> return query;
#> }
#>
#> //var params = window.location.toString().split('?')[1];
#> var params = encodeQueryString();
#>
#> if (params !== undefined && params != '') {
#> var apps = document.getElementsByClassName('app');
#> for (i = 0; i < apps.length; i++) {
#> var appitem = apps[i];
#> appitem.src = appitem.src + '?' + params;
#> }
#>
#> //var h5ps = document.getElementsByClassName('h5p');
#> //for (i = 0; i < h5ps.length; i++) {
#> // var h5pitem = h5ps[i];
#> // h5pitem.src = h5pitem.src + '&' + params;
#> //}
#> }
#>
#> launchApp = function(id, src) {
#> //var params = window.location.toString().split('?')[1];
#> var params = encodeQueryString();
#> if (params !== undefined && params != '') {
#> if (src.includes('?')) {
#> // There is already a search string => append parameters to it
#> src = src + '&' + params;
#> } else {
#> // Add a search string
#> src = src + '?' + params;
#> }
#> }
#> var img = document.getElementById('img' + id);
#> var app = document.getElementById(id);
#> app.src = src;
#> app.style.display='block';
#> img.style.display='none';
#> }
#>
#> var H5PIntegration = parent.H5PIntegration;
#> var wpAJAXurl = 'https:\/\/example.org\/wp-admin\/admin-ajax.php';
#> var debugEnabled = '0';
#> var captureAllH5pContentTypes = '1';
#> var h5pContentTypes = [''];
#> </script>
#>
#> <link rel='stylesheet' id='h5p-core-styles-h5p-css' href='https://example.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p.css' media='all' />
#> <link rel='stylesheet' id='h5p-core-styles-h5p-confirmation-dialog-css' href='https://example.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p-confirmation-dialog.css' media='all' />
#> <link rel='stylesheet' id='h5p-core-styles-h5p-core-button-css' href='https://example.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p-core-button.css' media='all' />
#>
#> <script src='https://example.org/wp-includes/js/wp-embed.min.js'></script>
#>
#> <!--
#> <script src='https://example.org/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
#> <script src='https://example.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
#> -->
#>
#> <script src='https://example.org/wp-content/plugins/h5pxapikatchu/js/h5pxapikatchu-variables.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/jquery.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-event-dispatcher.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-x-api-event.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-x-api.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-content-type.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-confirmation-dialog.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-action-bar.js'></script>
#> <script src='https://example.org/wp-content/plugins/h5p/h5p-php-library/js/request-queue.js'></script>
#>
#>
#> <!-- Content from header0.html -->
setwd("..")
unlink("temp")
setwd(odir)
rm(odir)