BrainMinder/assets/static/js/main.js

if (typeof(registerServiceWorker) === undefined) {
const registerServiceWorker = async () => {
  if ("serviceWorker" in navigator) {
      try {
          const registration = await navigator.serviceWorker.register("/static/js/serviceWorker.js", {
              scope: "/",
          });
          if (registration.installing) {
              console.log("Service worker installing");
          } else if (registration.waiting) {
              console.log("Service worker installed");
          } else if (registration.active) {
              console.log("Service worker active");
          }
      } catch (error) {
          console.error("Registration failed with ${error}");
      }
  }
};
registerServiceWorker();
}

//Variable for gestures
if (typeof(_bm_xDown) == undefined) {
  let _bm_xDown;
}

if (typeof(_bm_yDown) == undefined) {
  let _bm_yDown;
}

function bm_toggle_dropdown(list_id) {
  var list = document.getElementById(list_id);
  if (list.className.indexOf("w3-show") === -1) {
    list.className += " w3-show";
  } else {
    list.className = list.className.replace(" w3-show", "");
  }
}

function bm_overlay_off(sidebar_id) {
  document.getElementById("overlay").style.display = "none";
  bm_hide_sidebar(sidebar_id);
}

function bm_toggle_sidebar(sidebar_id) {
  sidebar = document.getElementById(sidebar_id);
  if (sidebar.style.display === "block") {
    document.getElementById("overlay").style.display = "none";
    sidebar.style.display = "none";
    sidebar.classList.remove("mobile-sidebar");
  } else {
    document.getElementById("overlay").style.display = "block";
    sidebar.style.display = "block";
    sidebar.classList.add("mobile-sidebar");
  }
}

function bm_hide_sidebar(sidebar_id) {
  document.getElementById("overlay").style.display = "none";
  sidebar = document.getElementById(sidebar_id);
  sidebar.style.display = "none";
  sidebar.classList.remove("mobile-sidebar")
}

function bm_sidebar_click(sidebar_id) {
  sidebar = document.getElementById(sidebar_id);
  if(sidebar.classList.contains("mobile-sidebar")) {
    bm_hide_sidebar(sidebar_id);
    bm_hide_quickbox();
  }
}

function bm_toggle_visibility(element_id) {
  element = document.getElementById(element_id);
  if (element.classList.contains("hidden")) {
    element.classList.remove("hidden");
  } else {
    element.classList.add("hidden");
  }

  var x = document.getElementsByClassName(element_id);
  for (var i = 0; i < x.length; i++) {
    if (x[i].classList.contains("hidden")) {
      x[i].classList.remove("hidden");
    } else {
      x[i].classList.add("hidden");
    }
  }
}

function bm_toggle_visibility_list_search(element_id) {
  element = document.getElementById(element_id);
  if (element.classList.contains("hidden")) {
    element.classList.remove("hidden");
  } else {
    element.classList.add("hidden");
  }

  var x = document.getElementsByClassName("stickyheader");
  for (var i = 0; i < x.length; i++) {
    if (x[i].classList.contains("searchopened")) {
      x[i].classList.remove("searchopened");
    } else {
      x[i].classList.add("searchopened");
    }
  }
}

function bm_open_tab(element, tab_button_class, tab_class, tab_id) {
  var x = document.getElementsByClassName("tab-button");
  for (var i = 0; i < x.length; i++) {
    x[i].classList.remove("active");
  }
  element.classList.add("active");
  var x = document.getElementsByClassName("tab");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tab_id).style.display = "block"; 
}

function bm_show_quickbox() {
  htmx.ajax('GET', '/quickbox/all', {target:'#quickbox-notes', swap:'innerHTML'})
  document.getElementById("quickbox").style.display = "block";
}

function bm_hide_quickbox() {
  document.getElementById("quickbox").style.display = "none";
}

function bm_toggle_quickbox() {
  quickbox = document.getElementById("quickbox");
  console.log(quickbox);
  if(quickbox.style.display == "block") {
    bm_hide_quickbox();
  }
  else {
    bm_show_quickbox();
  }
}

function bm_show_confirm(sender, title, message) {
  document.querySelector("#modal-confirm-dialog h5").innerHTML = title;
  document.querySelector("#modal-confirm-dialog p").innerHTML = message;
  let btn_ok = document.getElementById("modal-confirm-ok");
  document.getElementById("modal-confirm-ok").addEventListener('click', (event) => {
      htmx.trigger(sender, 'confirmed', null);
    document.getElementById("modal-confirm-dialog").style.display = "none";
  });

  document.getElementById("modal-confirm-dialog").style.display = "block";
}

function bm_item_field_add(type_field_id, widget) {
  let template = Handlebars.templates['items/field-' + widget]
  let fields_list = document.getElementById('fields-' + type_field_id);
  let counter = parseInt(document.getElementById('fields-' + type_field_id + '-counter').innerHTML);
  fields_list.insertAdjacentHTML('beforeend', template({type_field_id:type_field_id,counter:counter, value:""}));
  document.getElementById('fields-' + type_field_id + '-counter').innerHTML = (counter + 1).toString();
}

document.addEventListener("DOMContentLoaded", function(event){
  // const easyMDE = new EasyMDE({autosave: {enabled: true, uniqueId: 'eMDE-item-descriotion'}, element: document.getElementById('item-description')});
  /*
  //Swipe on body, disabled due to conflicts
  document.querySelector('body')
  .addEventListener(
      'touchstart',
      bm_handleTouchStart,
      false
  );
  document.querySelector('body')
  .addEventListener(
      'touchmove',
      bm_handleTouchMove,
      false
  );
  */

  document.body.addEventListener("quickboxNoteClear", function(evt){
    document.getElementById("quickbox-note").value = ''
  });

  document.body.addEventListener("closeQuickboxTransformModal", function(evt){
    document.getElementById("modal").remove();
    if(evt.detail.keepQuickNote == 0){
      htmx.ajax('DELETE', '/quickbox/delete/' + evt.detail.quickNoteId, {target:'#quicknote-' + evt.detail.quickNoteId, swap:'outerHTML swap:1s'})
    }
  });

  document.body.addEventListener("activateEasyMDE", function(evt){
    const easyMDE = new EasyMDE({element: document.getElementById(evt.detail.value), forceSync: true});
  });

  new SlimSelect({select: '.slim-select'});

  htmx.on('htmx:afterSettle', (event) => {
    new SlimSelect({select: '.slim-select'});
  });

});

function bm_ignoreSwipe(event) {
    // if some touches come from elements with ignoreswipe class > ignore
    return Array.from(event.touches).some((t) =>
        t.target.classList.contains('noswipe')
    );
}

function bm_handleTouchStart(event) {
    if (bm_ignoreSwipe(event)) {
        _bm_xDown = undefined;
        _bm_yDown = undefined;
        return;
    }

    const firstTouch = event.touches[0];
    _bm_xDown = firstTouch.clientX;
    _bm_yDown = firstTouch.clientY;
}

function bm_handleTouchMove(event) {

    if (!_bm_xDown || !_bm_yDown) {
        return;
    }

    const xUp = event.touches[0].clientX;
    const yUp = event.touches[0].clientY;

    const xDiff = _bm_xDown - xUp;
    const yDiff = _bm_yDown - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
        /*most significant*/
        if (xDiff > 1) {
            /* left swipe */
            //console.log('app: left swipe ', true);
            bm_show_quickbox();
        } else {
            /* right swipe */
            //console.log('app: right swipe ', true);
            bm_toggle_sidebar("main-sidebar");
        }
    } else {
        if (yDiff > 1) {
            /* up swipe */
            console.log('app: up swipe ', true);
        } else {
            /* down swipe */
            console.log('app: down swipe ', true);
        }
    }

    /* reset values */
    _bm_xDown = null;
    _bm_yDown = null;
}