RVA Registry API Search + Vocabulary Widget

by ands_services

HTML

<link rel="stylesheet" href="https://vocabs.ardc.edu.au/apps/assets/vocab_widget/css/vocab_widget_v2.css">
<script src="https://vocabs.ardc.edu.au/apps/assets/vocab_widget/js/vocab_widget_v2.js"></script>
<!-- Dropdown for vocabulary list -->
<select id="vocabulary-dropdown" name="locality" onchange="loadVocabulary(this)"></select>

<!-- H3 to display selected vocabulary title -->
<h3 id="vocabulary-title" />

<div>
  <!-- Span to display selected vocabulary description -->
  <span id="vocabulary-description" />
</div>


<script>
  //Variable to store the titles and descriptions of the vocabularies returned from the Vocabulary Registry API Search
  var vocabularies = {};

  // Loads the selected vocabulary into the vocabulary widget
  function loadVocabulary(selectElement) {

    let repository = selectElement.options[selectElement.selectedIndex].value;
    let titleH3 = document.getElementById("vocabulary-title")
    let descriptionSpan = document.getElementById("vocabulary-description")
    let newDescSpan = document.createElement("span");
    let txt;
    let parentDiv;


    // give the newDescSpan the correct id
    newDescSpan.id = "vocabulary-description";

    //Create span content in a textNode
    txt = document.createTextNode(vocabularies[selectElement.options[selectElement.selectedIndex].text]);

    // add textNode to the newDescSpan
    newDescSpan.appendChild(txt);

    //get the parent div of the description
    parentDiv = descriptionSpan.parentNode;

    //Replace the descriptionSpan with the newDescSpan
    parentDiv.replaceChild(newDescSpan, descriptionSpan);

    //Update the title to the selected vocabulary title
    txt = document.createTextNode(selectElement.options[selectElement.selectedIndex].text);
    titleH3.replaceChild(txt, titleH3.childNodes[0]);


    //Clear the vocab-tree div before loading the vocabulary to avoid appending vocabularies
    $("#vocab-tree").empty();
    
    //Remove any existing method handlers to prevent...

CSS

div {
  font-size: 20px;
  padding: 10px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: normal;
}

h3 {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
}

select {
  border: solid 1px #3d4044;
  padding: 10px;
  margin: 15px;
  font-size: 20px;
  background: #c8cfd1;
}

body {
  background: lightgrey;
  margin: 15px;
}

JavaScript

// Get a reference to the vocabulary dropdown element
let dropdown = $('#vocabulary-dropdown');

//Empty the dropdown before loading values to avoid appending data to existing list
dropdown.empty();

//Add default option to dropdown
dropdown.append('<option selected="true" disabled>Choose a vocabulary</option>');
dropdown.prop('selectedIndex', 0);

// Vocabulary Registry API Search endpoint
const url = 'https://vocabs.ardc.edu.au/registry/api/services/search';

// Create search filters as JSON object
var jsonPostData = {
  "filtersJson": "{\"q\": \"\",\"publisher\": \"Geoscience Australia\",\"widgetable\":true}"
};

// Perform POST request to API to perform search
$.ajax(url, {
  'method': 'POST',
  'contentType': 'application/x-www-form-urlencoded',
  'data': jsonPostData,
  success: function(data) { 

  let title;

  // Populate dropdown with list of vocabularies
  for (let i = 0; i < data.response.docs.length; i++) {

    title = data.response.docs[i].title;
    dropdown.append($('<option></option>').attr('value', data.response.docs[i].sissvoc_endpoint).text(title));

    // Populate vocabularies object with title and description of each vocabulary returned.
    vocabularies[title] = data.response.docs[i].description;

  }
}});