Exercises for Customizing Vendor Systems

Chapter 7: JavaScript Examples

OPAC Holdings Table

Many OPAC holdings tables are not designed for quick scanning by users. But with JavaScript, we can fix this. Here is the sample holdings table from Chapter 7.

<table class="bib_items">
	<tbody>
		<tr class="bibItemsHeader">
			<th width="38%" class="bibItemsHeader">Location</th>
			<th width="38%" class="bibItemsHeader">Call No.</th>
			<th width="24%" class="bibItemsHeader">Status</th>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Mary Idema Pew - 3rd Floor</td>
			<td width="38%">PS3562.E353 G6 2015</td>
			<td width="24%">DUE 09-17-15 +2 HOLDS</td>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Steelcase Popular Reading</td>
			<td width="38%">PS3562.E353 G6 2015 c.2</td>
			<td width="24%">AVAILABLE</td>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Mary Idema Pew - Popular Reading (1st Floor)</td>
			<td width="38%">PS3562.E353 G6 2015 c.3</td>
			<td width="24%">DUE 10-07-15</td>
		</tr>
	</tbody>
</table>

The following code scrapes the data from the table and builds a new <ul> element with the data. It also changes the styles of the availability statement depending on whether the item is currently available or not.

var newList = document.createElement('ul');
newList.id = 'availability-list';
var rows = document.querySelectorAll('table.bib_items tr.bibItemsEntry');
for(var i = 0; i < rows.length; i++) {
  // Save content to variables
  var content = rows[i].getElementsByTagName('td');
  
  var availableText = content[2].textContent;

  // Set color of availability statement
  var avail_classes = 'availability';
  if(availableText.indexOf('AVAILABLE') > -1) {
    avail_classes += ' avail';
  } else {
    avail_classes += ' unavail';
  }

  // Build new list item
  var newListItem = document.createElement('li');
  newListItem.innerHTML = '<span class="' + avail_classes + '">' + content[2].textContent +'</span>'
    + ' <span class="location">' + content[0].textContent + '</span>'
    + ' <span class="callno">' + content[1].textContent + '</span>';
  // Add to list
  newList.appendChild(newListItem);
}
var table = document.querySelector('table.bib_items');
var tableBody = table.querySelector('tbody');
table.removeChild(tableBody);
table.style.display = 'block';
table.appendChild(newList);

ILL Registration Form

Below is the drop-down <select> element we use in Illiad to allow users to change default pickup locations. The three letter code at the top in generated automatically by Illiad.

<label for="NVTGC">Preferred Pickup Location</label>
<select id="NVTGC" name="NVTGC">
  <optgroup label="Current pickup location">
    <option value="<#PARAM name="NVTGC">" selected><#PARAM name="NVTGC"></option>
  </optgroup>
  <optgroup label="Select new pickup location">
    <option value="LIB"> Mary Idema Pew Library @ Allendale</option>
    <option value="STEEL">Steelcase Library @ DeVos</option>
    <option value="FREY">Frey Learning Center @ CHS</option>
  </optgroup>
  <optgroup label="Distance Education?">
    <option value="OCS">Ship Books to me</option>
  </optgroup>
</select>

We want to change the text of the three letter code to something understandable by our users, so we can use this JavaScript to run a set of conditionals against the selected value:

var pickupLocation = document.getElementById('NVTGC').options[0];

if(pickupLocation.value == 'LIB') {
	pickupLocation.text = "Mary Idema Pew Library @ Allendale";
}
if(pickupLocation.value == 'STEEL') {
	pickupLocation.text = "Steelcase Library @ DeVos";
}
if(pickupLocation.value == 'FREY') {
	pickupLocation.text = "Frey Learning Center @ CHS";
}
if(pickupLocation.value == 'OCS') {
	pickupLocation.text = "Ship Books to Me";
}

Sometimes we need to hide an address until it is needed. Try running the following code in the console, and then select "Ship Books to Me" from the <select> above:

// Hide the address fields
document.getElementById('address-fields').style.display = 'none';

// Listen for changes, show or hide address fields
document.getElementById('NVTGC').addEventListener('change', function() {
	if(this.value == 'OCS') {
		document.getElementById('address-fields').style.display = 'block';
	} else {
		document.getElementById('address-fields').style.display = 'none';
	}
});

We found that many of our users on mobile devices expected to have a "clear" button on each <input> to make it easier to clear out the contents of a field. Below are the First and Last Name fields from a form.

<label for="FirstName">First Name</label>
<input id="FirstName" name="FirstName" tabindex="1" type="text" value="<#PARAM name="FirstName">">
<span class="FirstName-clear"></span>

<label for="LastName">Last Name</label>
<input id="LastName" name="LastName" tabindex="2" type="text" value="<#PARAM name="LastName">">
<span class="LastName-clear"></span>

To add the clear buttons, we can run the following code in the console. It also applies the styles to the page that position the buttons properly.

function addClearButton(id) {
	if(document.getElementById(id)) {
		var inputField = document.getElementById(id);
		var clearspan = document.getElementById(id + '-clear');
		clearspan.innerHTML = 'X';
		clearspan.className = 'clear-button';

		clearspan.addEventListener('mousedown', function() {
 			inputField.value = '';
			inputField.focus();
		});
	}
}
// Add the clear buttons to the inputs
addClearButton('FirstName');
addClearButton('LastName');

// Add the styles
var newStyles = document.createElement('link');
newStyles.rel = 'stylesheet';
newStyles.type = 'text/css';
newStyles.href = 'css/clearbuttons.css';
document.head.appendChild(newStyles);