mapp.utils.userIndexedDB

This indexedDB implementation allows to store, get, and update a locale object from the 'locales' object store in a user indexedDB.

There are many different operations that the indexedDB can handle. Typically the operations are CRUD.

The userIndexDB methods have all been moved to the mapp.utils object.

The logic for initialisation for the userIndexedDB object is the following:

• userIndexedDB.open(store) will open a DB with the following name `${mapp.user.email} - {mapp.user.title}.
• The database will not be created if there is a pre-existing DB.
• The creation will trigger the onupgradeneeded event which checks whether the request store exists in the userIndexedDB.

The process.env.TITLE will be added to the user object in the cookie module. The user.title is required to generate a unique indexedDB for each user[email/instance[title]]

All object stores use the key value as a keypath for object indicies.

Adding the url parameter useridb=true will ask the default script to get the keyed locale from the user indexedDB. The userLocale will be assigned as locale if available.

  if (mapp.hooks.current.useridb) {

    let userLocale = await mapp.utils.userIndexedDB.get('locales', locale.key)

    if (!userLocale) {
      await mapp.utils.userIndexedDB.add('locales', locale)
    } else {
      locale = userLocale
    }
  }

The userIDB plugin adds a button to put [update] the locale in the user indexedDB.

export function userIDB(plugin, mapview) {

  // Find the btnColumn element.
  const btnColumn = document.getElementById('mapButton');

  if (!btnColumn) return;

  // Append the plugin btn to the btnColumn.
  btnColumn.append(mapp.utils.html.node`
    <button
      title="Update userIDB locale"
      onclick=${()=>{

        mapp.utils.userIndexedDB.put('locales', mapview.locale)

      }}>
      <div class="mask-icon" style="mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/rule_settings/default/24px.svg)">`);
}

This can be tested but updating the mapview.locale in another plugin, e.g. dark_mode

The enabled status will be stored with the local applying the setting when the locale is loaded with the useridb=true url param.

mapp.plugins.dark_mode = (plugin, mapview) => {

  // Get the map button
  const mapButton = document.getElementById("mapButton");

  // If mapbutton doesn't exist, return (for custom views).
  if (!mapButton) return;

  // toggle dark_mode if enabled in config.
  mapview.locale.dark_mode.enabled && toggleDarkMode()

  // If the button container exists, append the dark mode button.
  mapButton.append(mapp.utils.html.node`
    <button
      title="Color Mode"
      class="btn-color-mode"
      onclick=${()=>{
        mapview.locale.dark_mode.enabled = toggleDarkMode()
      }}>
      <div class="mask-icon">`);
}