Historical Will Annotation Continued: A WP API Experiment

The Judah Will Project (now with new URL!) has continued to grow as Ryan has been putting in serious work on the research and writing side of things. I have no choice but to step up my game and it’s been an interesting learning experience as it’s the first time I’ve tried anything sophisticated with WP providing the writing/data side of things while presenting that information somewhere else entirely. Headless?

So here’s a recap of changes since the last update.

More Obvious

I talked to Jim about the project a few days ago. It became clear to me that it wasn’t obvious that the names in the will transcription were clickable prior to actually clicking on one. I fixed that with a simple dashed underline. This was one of those times where I was trying to keep the visual elements minimal but ended up going too far.


I also threw in a modal popup for initial directions to make things more obvious. I just used this simple modal jquery plugin.

It immediately drove me crazy by popping up all the time. So I looked around and found a solution to set cookies which I’d never done before.

//COOKIE STUFF
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1);
    if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  }
  return "";
}

I also used a modal for the ever-growing family tree. When you have 12 kids in a generation, things get pretty wide.

Permanent URLs

Since this is a single page with data being loaded on the fly from the JSON API I had to build a way to track and reference the user interactions so people could send a link to the Family Tree page rather saying ‘go to this URL and then click on this …’

So I needed two things to happen – button clicks (events if we want to be fancy) need to write something to the URL (hash parameter) to reference and that URL had to be checked to see if there was anything there that it needed to know.

//HIGHLIGHT THE PERSON
function hlPerson(person) {
  for (var i = 0; i < _people.length; i++) {
    var thePerson = _people[i].dataset.person;
    if (thePerson == person) {
      _people[i].classList.add(thePerson);
        window.location.hash = thePerson;//sets the hash to the person variable
    }
  }
}
//GET THE HASH VARIABLE FROM URL 
function urlHash(){
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
        return hash;
      // hash found
  } else {
      // No hash found
      return 'about'; //defaults to the about page if there's no hash given
  }
}

I then figured out that hitting the back button didn’t work. That was irritating but fixable . . . I didn’t get the vanilla js version working the way I thought it should but StackOverflow provided a jQuery version.1

/lets you do the back and forward properly -- I failed on the regular js version 
$(window).on('hashchange', function() {
  console.log('fire');
  setPages(urlHash());
  activePage(urlHash());
});

WordPress URLS

One of the thing I overlooked was that the links in the WordPress site that would be intuitive for Ryan to make . . . would bring the user out of the js front end and to the blog itself. Not good.2 I had a variety of options to fix this (including just redoing them by hand) but I decided since this was an exercise to learn more about js . . . I ought to see what I could do that.

I had a variety of variables to worry about. There were at least two URL patterns (judahwill.rampages.us and rampages.us/judahwill) to re-write and I needed to avoid messing up any non-Judah Will related URLs.

function urlFix(){
  var theLinks = document.getElementsByClassName('person');//get all the links in the wp post that have the class person
  console.log(theLinks);//just checking
  var pageSlug;
  for(var i=0; i<theLinks.length; i++) {
    if (! theLinks[i].getAttribute('data-person')) { //see if it already has the data attribute set, if not ...
      if (theLinks[i].href.search("judahwill.rampages")>0){ //does the url have judahwill.rampages in it? if so . . . 
         pageSlug = theLinks[i].href.substring(30); 
      } else {
        pageSlug = theLinks[i].href.substring(36).slice(0, -1); //this is our other pattern rampages.us/judahwill
      }
      theLinks[i].dataset.person = pageSlug;
      theLinks[i].setAttribute('href', 'http://judahwill.rampages.us/#' + pageSlug);//set the new url
   }
  }

}


1 It could also be that I got it working and confused myself. The mix of Chrome caching js and a dev environment that occasionally kicks my links through to the real page leads to me getting confused just at times. There is likely a smart way around this . . .

2 And rather obvious in retrospect . . . but hey. I continue to learn.