Raw Source Toggle Dropdown

• Minified Source

mawiseman / Miro Project Filter

// ==UserScript==
// @name         Miro Project Filter
// @author       Mark Wiseman
// @namespace    https://openuserjs.org/users/mawiseman
// @description  Adds a filter to the list of projects in a miro team
// @icon         https://miro.com/favicon.ico
// @copyright    2022, wiseman.net.au
// @version      1.0.2
// @license      MIT
// @grant        none
// @match        https://miro.com/*
// ==/UserScript==

var selectedTeamTooltip = "";

var observer = new MutationObserver(MutationCallback);
observer.observe(document.body, {
  childList: true,
  subtree: true
});

function MutationCallback(mutations) {
  if (location.href.indexOf('https://miro.com/app/dashboard/') > -1) {
    
    AddMiroProjectFilter();
  }
}

function AddMiroProjectFilter() {
  //check that the project header exsits... if it doesn't we are probably on the wrong page
  var projectsHeaderDiv = document.getElementsByClassName("dashboard-projects__header")[0];
  if (projectsHeaderDiv == null) {
    return;
  }

  var projectFilterInputId = "projectFilter";
  var projectFilterInput = document.getElementById(projectFilterInputId);
  
  // if the filter already exists
  if (projectFilterInput != null) {
      
    // if the team has changed, clear the filter
    var nextSelectedTeam = document.getElementsByClassName("spaces-list__item--selected")[0];
    var nextSelectedTeamTooltip = nextSelectedTeam.getAttribute("tooltip");
    
    if(nextSelectedTeamTooltip != selectedTeamTooltip) {
        selectedTeamTooltip = nextSelectedTeamTooltip;
        projectFilterInput.value = "";
    }
      
    // make sure we re-filter the results
    FilterMiroProjects(projectFilterInput.value);
    return;
  }

  projectFilterInput = document.createElement("input");
  projectFilterInput.type = "text";
  projectFilterInput.id = projectFilterInputId;
  projectFilterInput.autocomplete = "off";
  projectFilterInput.placeholder = "Filter";

  projectsHeaderDiv.appendChild(projectFilterInput);

  projectFilterInput.oninput = function () {
    FilterMiroProjects(this.value);
  }
}

function FilterMiroProjects(query) {
  var filter = query.toLowerCase();

  var ul = document.getElementsByClassName("dashboard-projects__items")[0];
  var li = ul.getElementsByTagName("li");

  for (var i = 0; i < li.length; i++) {
    var span = li[i].getElementsByTagName("span")[0];
    var txtValue = span.textContent || span.innerText;

    if (txtValue.toLowerCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    }
    else {
      li[i].style.display = "none";
    }
  }
}