Clickable Tasklist/Checkbox that wont be reset

[SPyofgame]

Context

If we have this clickable_checkbox, it is usually discouraged to use it alone.

Yet, can I somehow customize or we somehow implement such convenient features that the users can have certain storage for those boxes?

Issue Description

Expected Behaviour

The clickable checkbox will be saved even if the user refreshes the page

Actual Behaviour

Any of the checkbox will always be reset each time the user refreshes the page

Minimal Base Yaml

image: python:latest
pages:
  stage: deploy
  script:
    - pip install git<private link>
    - mkdocs build --site-dir public
  artifacts:
    paths:
      - public
  rules:
    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'

markdown_extensions:
  - def_list
  - pymdownx.tasklist:
      custom_checkbox: true
      clickable_checkbox: true

Related Links

https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/?h=tasklist
https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/?h=tasklist#tasklist

Configuration

Latest version mkdocs.
Latest version insider pymdown.

Local-host: Acer Nitro 5 Laptop
Online-host: Gitlab
System: Window
Browser: Chrome

Suggestion

I suggest to use a specific storage system (a certain directory that can be customized) somehow that is convenient for the writer to learn how to do, as well as easy for the reader to use the feature.

Interactable Checkbox
[ ]:text - Unclickable Disabled Checkbox
[_]:text - Clickable Disabled Checkbox
[X]:text - Unclickable Enabled Checkbox
[*]:text - Clickable Enabled Checkbox
[$]:text - Unclickable Removed Checkbox Line (straight through the text and add little shady effect)
[~]:text - Clickable Removed Checkbox Line (straight through the text and add little shady effect)
[!]:text - Unclickable Highlight Checkbox Line
[@]:text - Clickable Anchor Checkbox Line
[%]:text - Unclickable Draggable Checkbox Line
[&]:text - Clickable Draggable Checkbox Line
[?]{ reset="false" }:text - If writer want to reset the checkbox upon user's refresh (recommended for clickable checkbox)
Note: [?] means any of above 10 basic properties [ ] [_] [X] [*] [$] [~] [!] [@] [%] [&]
_Those last 4 (~$@!) might be niche and should not be prioritized
Might be incompatibilities with admonitions, abbr

Feedback Button
[:icon:] - Make a feedback button with visible counters
[!:icon:] - Make a feedback button with invisible counters
[:icon:#id] - Use #... for specific index, for example #2702
[:icon:+] - Share the id information, + for incremental from the last (making another one)
[:icon:=] - Share the id information, = for the exact from the last
[:icon:-] - Share the id information, - for incremental from the last (go back to previous one)
[:icon:]{ hover="..." } Text upon hovering
Using yaml to use directory path/to/dir/*.icon
Those last 3 (discremental, hover, yaml) might be niche and should not be prioritized

If both button share id, only one can be counted, for example:

How do you rate the problem ? [:sad:+] [:neutral:=] [:happy:=]
Do you like this feature ? [:upvote:+] [:downvote:=]

Application

Specifically saying, I am writing a wiki for an algorithm, and I have a list of problems that users can try. Intendedly I wanna use checkbox to help the user mark the problems they have solved so far, as there will be many hard problems that need a long time to think.

Also, it might improve the interactivity of the feedback on the pages (Might be overengineering if spamming).

Before Startings The Discussions

• I've read the contribution guidelines and partially agree. I am not good enough to do certain advanced implementations, so I want to start the discussion to get advice on how to do so if it isn't worth being added to master (for the sake of overall functionality).
• I have search for similar discussions
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure you that I have removed all customizations before submitting this suggestion report.
• The documentation does not mention anything about my problem
• There are no open or closed issues that are related to my problem.

[squidfunk]

Thanks for suggesting – you're proposing changes to Markdown processing, which is an upstream issue and as we already stated in one of your other feature suggestions 😊 Regarding storage of checkbox state – this could be implemented by persisting it to local storage, but is considered out-of-scope for this project, because of its rather limited use. Custom JavaScript to the rescue!

[SPyofgame]

Do you have any recommendations for such a custom javascript ? (eg: versatility, extensibility, or performance)

Hope we can have some kind of feedback features soon, as in recent months I have seen some of my favorite websites start implementing them and it is kinda good for certain cases (eg: competitive problems, editorials, ... )

[squidfunk]

I'm sorry, but I'm not able to help each and every user with their customization requests 🙁 I have to cleverly invest my time to work on this project in a way that helps the most users by fixing bugs and implementing new features. Customizations only help one or a handful of users. Maybe some other user can share a recipe that worked and you can build upon that.

[SPyofgame]

Oh ok, if I have well-implemented javascript one day then I will make a pull request back for you👀

[luisfontes19]

In case it helps I wrote a quick script to achieve this.

How it works

It stores an array in localstorage with the checked checkboxes.

Each item has a key composed of: url_path:checkbox_list_index:checkbox_text

This key structure allows me to have multiple items in the same (or different) page with the same text. Also allows to add more items to the list without loosing the right selected items.

Note

If the text changes or you add more lists in the same webpage that not after the existing checklists, the selected values will disappear or be in conflict

Implementation

in mkdocs load the custom script:

extra_javascript:
- script.js

Save the custom script

// script.js
// Logic to keep the checkboxes state

const allLists = Array.from(document.querySelectorAll(".task-list"))
const LOCALSTORAGE_KEY = "checkedItems"

window.addEventListener('load', () => {
    const path = window.location.pathname
    let checkedItems = localStorage.getItem(LOCALSTORAGE_KEY)

    if (!checkedItems)
        checkedItems = []
    else
        checkedItems = JSON.parse(checkedItems)

    allLists.forEach((list, listIndex) => {
        const items = Array.from(list.querySelectorAll(".task-list-item"))
        items.forEach((item) => {
            const text = item.textContent
            const itemKey = `${path}:${listIndex}:${text}`

            if (checkedItems.includes(itemKey)) {
                const checkbox = item.querySelector('input[type="checkbox"]')
                checkbox.checked = true
            }
        })
    })
})

document.body.addEventListener('click', (e) => {
    if (!e.target.matches('.task-list-item label input'))
        return

    const checkbox = e.target
    const checked = checkbox.checked
    const li = checkbox.parentElement.parentElement
    const text = li.textContent
    const list = li.parentElement
    const listIndex = allLists.indexOf(list)
    const path = window.location.pathname

    const itemKey = `${path}:${listIndex}:${text}`

    let checkedItems = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY))

    if (!checkedItems)
        checkedItems = []

    // Ensure we don't have duplicates by always removing the item first
    checkedItems = checkedItems.filter(i => i !== itemKey)

    if (checked)
        checkedItems.push(itemKey)

    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(checkedItems))
})