User:TheTVExpert/searchForSection.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

function autocomplete(inp, arr) {
  
  var currentFocus;
  
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      
      this.parentNode.appendChild(a);
      
      for (i = 0; i < arr.length; i++) {
        
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          
          b = document.createElement("DIV");
          
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          
          b.addEventListener("click", function(e) {
              
              inp.value = this.getElementsByTagName("input")[0].value;
              
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        
        currentFocus++;
        
        addActive(x);
      } else if (e.keyCode == 38) { 
        
        currentFocus--;
        
        addActive(x);
      } else if (e.keyCode == 13) {
        
        e.preventDefault();
        if (currentFocus > -1) {
          
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    
    if (!x) return false;
    
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}

var makeInput = function(plain,other)
{
var div = document.createElement("DIV");
div.setAttribute("class", "autocomplete");
div.style.width = "300px";

var input = document.createElement("INPUT");
input.setAttribute("id", "input");
input.setAttribute("type", "text");
input.setAttribute("placeholder", "Enter a Section Name and Press Enter");

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    for(i=0;i<plain.length;i++){
    	if(plain[i]==this.value)
    	{
    		window.open("#"+other[i],"_self");
    		this.value = "";
    		document.getElementById("modal").style.display = "none";
    		break;
    	}
    }
  }
});
input.style.left = "20%";
div.appendChild(input);
document.getElementById("modalContent").appendChild(div);

var style = document.createElement("STYLE");
style.innerHTML = `
* { box-sizing: border-box; }
.autocomplete {
  
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  
  background-color: DodgerBlue !important;
  color: #ffffff;
}
`;
document.head.appendChild(style);
};

var makeModal = function(title)
{
var modal = document.createElement("DIV");
modal.id = "modal";
modal.style.display = "none";
modal.style.position = "fixed";
modal.style.zIndex = "1";
modal.style.left = "0";
modal.style.top = "0";
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.overflow = "auto";
modal.style.backgroundColor = "rgb(0,0,0)";
modal.style.backgroundColor = "rgba(0,0,0,0.4)";

var content = document.createElement("DIV");
content.id = "modalContent";
content.style.backgroundColor = "#fefefe";
content.style.margin = "15% auto";
content.style.padding = "20px";
content.style.border = "1px solid #888";
content.style.width = "340px";

var name = document.createElement("H3");
name.innerHTML = title;
name.style.textAlign = "center";
name.style.textDecoration = "underline";

content.appendChild(name);
modal.appendChild(content);
document.body.appendChild(modal);

//modal.style.display = "block";

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};
};

var listSections = function(title,read)
{
var result;
var list = [];

$('.mw-headline').each(function() {
	result = this.id;
	if(read)
	{
	result = result.replace(/_/g," ");
	}
    //alert( result );
    list.push(result);
});

/*alert(title);

for(i=0;i<list.length;i++)
{
	alert(list[i]);
	console.log(list[i]);
}*/
return list;
};

var check = document.getElementsByClassName('mw-headline')[0];

if(check !== undefined && !document.getElementById("wikiPreview"))
{
var first = true;
var page = mw.config.get('wgPageName');
var pageNoUnderscores = page.replace(/_/g," ");
var plain;
var other;

/*var intervalId = setInterval(function(){
	var x = document.activeElement.id;
	if(x == "input"){
		//alert("");
	}
})*/
	
var button = document.createElement("BUTTON");
button.id = "button";
button.style.position = "fixed";
button.style.zIndex = "1";
button.style.left = "0";
button.style.bottom = "0";
button.innerHTML = "Search for a section.";
document.body.appendChild(button);

$("button").click(function()
{
	if(first)
	{
    plain = listSections(pageNoUnderscores,true);
    other = listSections(pageNoUnderscores,false);
    makeModal(pageNoUnderscores);
    first = false;
    makeInput(plain,other);
	}
    document.getElementById("modal").style.display = "block";
    document.getElementById("input").focus();
	autocomplete(document.getElementById("input"), plain);
});

document.onkeyup = function(e) {
	if (e.altKey && e.shiftKey && e.which == 65) {
		if(first)
		{
    	plain = listSections(pageNoUnderscores,true);
    	other = listSections(pageNoUnderscores,false);
    	makeModal(pageNoUnderscores);
    	first = false;
    	makeInput(plain,other);
		}
    	document.getElementById("modal").style.display = "block";
    	document.getElementById("input").focus();
    	autocomplete(document.getElementById("input"), plain);
	}
};
}
//Autocomplete and Modal design from W3Schools