simple_blog/common/page_format.js

//
function format_page(){//Set the title of the page based on the main header, <h1>, tag.le != '' )){
  if ( document.getElementsByTagName('h1').length !== 0){
    document.title = document.getElementsByTagName('h1')[0].innerText;
  }
  //Detect if the page contains code blocks to be highlighted and loads the 
  //prisim.js and prism.css files if codeblocks are found.
  code_tag = document.getElementsByTagName('code').length;
  if ( code_tag !== 0 ){
    var script = document.createElement('script');
    var style_sheet = document.createElement('link');
    script.type = 'text/javascript';
    script.src = '/common/prisim/prism.js';
    style_sheet.type = 'text/css';
    style_sheet.href = '/common/prisim/prism.css';
    style_sheet.rel = 'stylesheet';
    document.head.appendChild(script);
    document.head.appendChild(style_sheet);
  }
  //Sets the displayed fontsize.
  //This functionality won't work without JavaScript enabled. For this reason the  
  //buttons won't be shown if this script isn't run.
  if ( document.getElementById("font_btns") ){//Show the font selection buttons. 
    document.getElementById("font_btns").style.display = 'inline';
    var font_size = read_cookie("font_size");//reads a saved value for fontsize from the site cookie
    if ( font_size != "" || font_size != "medium" ){
      font_set(font_size);//insure a sane default
    }
  }
  if ( document.getElementById("search_inputs") ){//Show the search box and button on the tags page.
    var search_box = document.getElementById("search_inputs")
    search_box.style.display = 'block';
    focus_element("tag_sort");
  }
  if (document.getElementById('modal_gallery')){//Display image modal on pages with this element
    var modalEle = document.querySelector(".modal_gal");
    var modalImage = document.querySelector(".gallery_img");
    var captionText = document.getElementById("modal_img_caption");
    Array.from(document.querySelectorAll("img")).forEach(item => {
      item.addEventListener("click", event => {
        modalEle.style.display = "block";
        modalImage.src = event.target.src;
        captionText.innerHTML = item.alt;
      });
    });
    document.querySelector(".close_modal").addEventListener("click", () => {
      modalEle.style.display = "none";
    });
  }
}
function font_set(size_to_set){//Set a cookie to remember the fontsize selection.
  document.getElementById("article").style.fontSize = size_to_set;
  set_cookie("font_size",size_to_set);
}
function focus_element(element_id){
  var ele_to_focus = document.getElementById(element_id);
  ele_to_focus.focus();
  ele_to_focus.select();
}
function tag_search(){//searches in the avaliable tags and displays all articles matching the searched tag.
  var search_input, filter, tag_list, li, a, i;
  search_input = document.getElementById("tag_sort");
  filter = search_input.value.toUpperCase();
  tag_list = document.getElementById("tag_menu");
  li = tag_list.getElementsByTagName("li");
  for(i = 0;i < li.length;i++){
    a = li[i].innerHTML.toString();
    if(a.toUpperCase().indexOf(filter) > -1){
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
function title_search(){//searches for matches in the article titles rather than tags. Allows more granular search
  var search_input, filter, tag_list, li_list, ol, a, i;
  search_input = document.getElementById("title_sort");
  filter = search_input.value.toUpperCase();
  tag_list = document.getElementById("tag_menu");
  li_list = tag_list.getElementsByTagName("li");
  for (i = 0;i < li_list.lentgh;i++){
    li_list[i].style.display = "none";
  }
  ol = tag_list.getElementsByTagName("ol");
  for(i = 0;i < ol.length;i++){
    a = ol[i].innerHTML.toString();
    if(a.toUpperCase().indexOf(filter) > -1){
      ol[i].style.display = "list-item";
    } else {
      ol[i].style.display = "none";
    }
  }
  
}
function search_toggle(){//Toggles if the unit being sorted on is the article title or tag
  if (document.getElementById("tag_sort")){
    document.getElementById("tag_sort").placeholder = "Search Titles";
    document.getElementById("tag_sort").onkeyup = function() {title_search()};
    document.getElementById("tag_sort").id = "title_sort";
    document.getElementById("search_toggle").value = "Search Tags";
    document.getElementById("page_title").innerHTML = "Posts by Title";
    document.title = "Posts by Title";
    focus_element("title_sort");
  } else if (document.getElementById("title_sort")){
    document.getElementById("title_sort").placeholder = "Search Tags";
    document.getElementById("title_sort").onkeyup = function() {tag_search()};
    document.getElementById("title_sort").id = "tag_sort";
    document.getElementById("search_toggle").value = "Search Titles";
    document.getElementById("page_title").innerHTML = "Posts by Tag";
    document.title = "Posts by Tag";
    focus_element("tag_sort");    
  }
}
function set_cookie(prop_name, prop_value){//sets a passed cookie property and value.
  document.cookie = prop_name + "=" + prop_value + ";path=/;SameSite=Strict;";
}
function read_cookie(cname){//reads a property value 
  let prop_name = cname + '=';
  let decoded_cookie = decodeURIComponent(document.cookie);
  let split_cookie = decoded_cookie.split(';');
  for ( let i = 0; i < split_cookie.length;i++){
    let split = split_cookie[i];
    while (split.charAt(0) == ' '){
      split = split.substring(1);
    }
    if ( split.indexOf(prop_name) == 0 ){
      return split.substring(prop_name.length, split.length);
    }
  }
  return "";
}
function printDiv(divName) {//Formats the page for printing.
  var printContents = document.getElementById(divName).innerHTML;
  w=window.open();
  w.document.write(printContents);
  w.print();
  w.close();
}
window.onload = format_page;//loades the page formatting script.