PTP Universal Search

// ==UserScript==
// @name     PTP Universal Search
// @namespace https://gist.github.com/TMD20/083466d92a44b5c78a86156aeb88c16d
// @version  2.5
// @grant    none
// @run-at document-start
// @require https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js
// @require https://passthepopcorn.me/static/functions/autocomplete.js?v=1604212366
// @match https://*.passthepopcorn.me/*
// ==/UserScript==

const DEFAULT_VALUE="Movies" //VALID OPTIONS: Movies,People,Requests,Collections,Forums,Users,Log
const SEARCH_BAR_MENU="MORE_MENU" //VALID OPTIONS: MORE_MENU,USER_MINOR,USER_MAJOR
//
//CSS OPTIONS
//For Unit INformation
//SEE: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

//one SEARCHBAR_MENUITEM value should probably be zero
const SEARCHBAR_MENUITEM_MARGIN_RIGHT="1em"
const SEARCHBAR_MENUITEM_PADDING_RIGHT="0px"

const SEARCHBAR_TEXTALIGN="center"
//one TOPBAR_MENUITEM value should probably be zero
const TOPBAR_MENUITEM_MARGIN_RIGHT="1px"
const TOPBAR_MENUITEM_PADDING_RIGHT="0px"

const SEARCH_BOX_MARGIN_RIGHT="10px"
const SEARCH_BOX_WIDTH="15%"

//one SELECTIONMENU value should probably be zero
const SELECTIONMENU_PADDING_RIGHT="0px"
const SELECTIONMENU_MARGIN_RIGHT="10px"


//
//CODE
//

async function setStyle() {
 const stylesheet = new CSSStyleSheet()
await stylesheet.replace('.search-bar__search-field {display: none;}')
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
  }
setStyle()


document.addEventListener('DOMContentLoaded',()=>{
let searchContainerDict=getSearchDict()

console.log(searchContainerDict)
function initFunction(){
setSelector()
 moveMenus()
document.querySelector(".search-bar").style.textAlign=SEARCHBAR_TEXTALIGN
document.querySelector(".search-bar__list").style.display="inline"
setSearch()

}



function setSearch(placeholder=DEFAULT_VALUE,value=""){
let searchContainer=searchContainerDict[placeholder]
searchContainer.style.display="inline-block"
searchContainer.style.width=SEARCH_BOX_WIDTH
searchContainer.style.marginRight=SEARCH_BOX_MARGIN_RIGHT
let searchNode=searchContainer.querySelector('.search-bar__search-field__input')
searchNode.style.width="100%"
  searchNode.value=value
  switch(placeholder){
      case "Movies":
         autocomp.start('torrents');
         autocomp.get(value)
         break
    case "People":
         autocomp.start('artist');
         autocomp.get(value)
    default:
      break
  }
  }








function getSearchDict(){
  let searchNodes=Array.from(document.querySelectorAll(".search-bar__search-field"))
let searchContainerDict=searchNodes.reduce(
  (accumulator, currentValue, currentIndex)=>{
   let searchNode=currentValue.querySelector(".search-bar__search-field__input")

   accumulator[searchNode.placeholder]=currentValue
   return accumulator

  },{})
return searchContainerDict
}

function setSelector(){
  let node=document.createElement("select")
  node.innerHTML=
  `
    <option value="Movies">Movies</option>
    <option value="Requests">Requests</option>
    <option value="People">People</option>
<option value="Collections">Collections</option>
<option value="Forums">Forums</option>
<option value="Log">Log</option>
<option value="Users">Users</option>



  `
  node.setAttribute("id","universal-search-selector")
  node.setAttribute("selected",DEFAULT_VALUE)
  node.style.paddingRight=SELECTIONMENU_PADDING_RIGHT
  node.style.marginRight=SELECTIONMENU_MARGIN_RIGHT
  node.addEventListener('change', (e) => {
  let oldValue=document.querySelector('.search-bar__search-field[style*="display: inline-block"] .search-bar__search-field__input').value
  hideSearch()
   setSearch(placeholder=e.target.value,value=oldValue)
  });




  document.querySelector(".search-bar__list").appendChild(node)


}
function hideSearch(){
  Object.entries( searchContainerDict).forEach((e)=>e[1].style.display = 'none')
}
function moveMenus(){

  switch(SEARCH_BAR_MENU){
    case "USER_MINOR":
      moveUserMinor()
      break
    case "USER_MAJOR":
      moveUserMajor()
      break
    case "MORE_MENU":
      moveMoreMenu()
      break
    default:
      break
  }
  // document.querySelector(".search-bar__list").appendChild(fragment)




}
function moveUserMinor(){
        document.querySelectorAll("#userinfo_minor>*").forEach((e)=>{
      e.style.paddingRight=SEARCHBAR_MENUITEM_PADDING_RIGHT
      e.style.marginRight=SEARCH_BOX_MARGIN_RIGHT
      })
      document.querySelector(".search-bar__list").append(...document.querySelectorAll("#userinfo_minor>*"))
      document.querySelectorAll(".user-info-bar__drop-down-menu__item>a").forEach((e)=>{
      e.style.display="inline"
      e.style.paddingRight=TOPBAR_MENUITEM_PADDING_RIGHT
      e.style.marginRight=TOPBAR_MENUITEM_MARGIN_RIGHT
      })
       document.querySelector("#userinfo_minor").append(...document.querySelectorAll(".user-info-bar__drop-down-menu__item>a"))
    document.querySelector("#nav_more").remove()
}

  function moveUserMajor(){
        document.querySelectorAll("#userinfo_major>*,#userinfo_stats>*").forEach((e)=>{
      e.style.paddingRight=SEARCHBAR_MENUITEM_PADDING_RIGHT
      e.style.marginRight=SEARCH_BOX_MARGIN_RIGHT
      })
      document.querySelector(".search-bar__list").append(...document.querySelectorAll("#userinfo_major>*,#userinfo_stats>*"))
      document.querySelectorAll(".user-info-bar__drop-down-menu__item>a").forEach((e)=>{
      e.style.display="inline"
      e.style.paddingRight=TOPBAR_MENUITEM_PADDING_RIGHT
      e.style.marginRight=TOPBAR_MENUITEM_MARGIN_RIGHT
      })
       document.querySelector("#userinfo_minor").append(...document.querySelectorAll(".user-info-bar__drop-down-menu__item>a"))
    document.querySelector("#nav_more").remove()


}
function moveMoreMenu(){
    let fragment=new DocumentFragment()
  Array.from(document.querySelectorAll(".user-info-bar__drop-down-menu__item>a")).forEach((e)=>{
    e.style.display="inline"
    e.style.marginRight=SEARCHBAR_MENUITEM_MARGIN_RIGHT
    e.style.paddingRight=SEARCHBAR_MENUITEM_PADDING_RIGHT
  fragment.appendChild(e)
  })
    document.querySelector(".search-bar__list").appendChild(fragment)
      document.querySelector("#nav_more").remove()

}

initFunction()
})

Rev 4
Fix issues with some style sheet
Add option to move more menu down

Rev 5
Improve Hidding menu options performance
Some Cleanup

Rev 6
Keep input
add autocomplete

rev 7 const added
rev 8 mistake
rev 9
Added even more const
Switched to margin instead of padding

rev 10
Added more CSS constants

rev 11
even more CSS constants
added ability to select which menu to move

rev 12
Just added some more information about the different const values

rev 13
fix syntax error