items-df.qmd

---
format: 
  html:
    page-layout: custom
---

```{js, echo=FALSE}
var search = new URLSearchParams(window.location.search);

document.addEventListener('DOMContentLoaded', function() {
    var inputElement = document.querySelector("#DataTables_Table_0_filter input[type='search']");
    
    if(inputElement) {
        inputElement.value = search.get('query');
        inputElement.focus();
        inputElement.click();
        
        // Emulate mouse release (mouseup event)
            var mouseUpEvent = new MouseEvent('mouseup', {
                bubbles: true,
                cancelable: true,
                view: window
            });
            inputElement.dispatchEvent(mouseUpEvent);
    }
});
```

::: itembank
# Itembank Search

```{r, include=FALSE}
## Short functions for creating links per item that are used below in the table.
zip_link <- function(folder, name){
  tmp_link <- paste0('https://github.com/ShareStats/itembank/raw/packages/packages/',
                     'zip/', folder,'.zip')
}
tv_link <- function(folder, name){
  tmp_link <- paste0('https://github.com/ShareStats/itembank/raw/packages/packages/',
                     'tv/', folder,'-tv.zip')
}
qti_link <- function(folder, name){
  tmp_link <- paste0('https://github.com/ShareStats/itembank/raw/packages/packages/',
                     'qti/', folder,'-qti.zip')
}
html_link <- function(folder, name){
  tmp_link <- paste0('https://sharestats.github.io/itembank/', folder, '/', name, '1.html')
}
```

```{r, include = FALSE}
# Install and load necessary R packages
library(DT)
library(tidyverse)
```

```{r read-file-from-url, include = FALSE}
# Create the columns containing the 'View' and 'Download' buttons
data.path <- "https://sharestats.github.io/itembank/sharestats_website.csv"
dat <- read_csv(data.path) 
```

```{r, include = FALSE}
dat <- dat %>% 
  dplyr::select(-1) %>% 

# New offcanvas view button:
mutate(View = paste0(
    '<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample',id+1,'" role="button" aria-controls="offcanvasExample',id+1,'">
  ↗
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample',id+1,'" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">',name,'</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
<embed src="',html_link(folder, name),'" width="100%" height="90%">
  </div>
</div>'
    )) %>% 
  # Dropdown Files button
  mutate(Files = paste0(
    '<div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        📁
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="">
        <li><a class="dropdown-item" href="',zip_link(folder, name),'">ZIP Folder</a></li>
        <li><a class="dropdown-item" href="',qti_link(folder, name),'">QTI</a></li>
        <li><a class="dropdown-item" href="',tv_link(folder, name),'">TestVision</a></li>
      </ul>
    </div>'
  )) %>% 
  
  mutate(`Item Name` = name, .before = 1)

  
#%>% 
  # checkbox (REMOVED-Commented)
#  mutate("✔️"=paste('<fieldset class="form-group">
#      <div class="form-check">
#        <input class="form-check-input" type="checkbox" #value="" id="flexCheckDefault">
#        <label class="form-check-label" for#="flexCheckDefault">
#        </label>
#      </div>
#    </fieldset>'), .before = 1)

```

```{r, echo = FALSE, warning=FALSE, eval=TRUE}

# Create an interactive table using the DT package
dat %>% dplyr::select(-name, -question, -folder, -id) %>% 
datatable(., filter = "top", 
          options = list(pageLength = 10), 
          style = 'bootstrap', selection = 'multiple', 
          escape = FALSE
          )
```
:::