The South Africa Big 5

Hello!

I'm currently sitting in Joburg Airport, waiting for my flight back to the UK after a terrific week in South Africa with New Leaf Technologies.

After the Learning Indaba, I was very fortunate to spend some time with the team at Kwalata Game Lodge in Dinokeng Game Reserve.

Inspired by that experience, here's my demo for this week's Accordion Challenge.

This demo uses JavaScript to 'shuffle' the five parts of the accordion, reordering their z-index positions, so that the selected part always appears beneath the other four.

var player = GetPlayer();
var animalValue = player.GetVar("ANIMAL");

var ids = {
  GrassFgd: "6HxcFGzoBsU",
  ELEPHANT: "6YFFSsUIcdG",
  RHINO:    "6f62e0IMC4F",
  LION:     "5ohBXuBxrO4",
  BUFFALO:  "6moj2Qru7Il",
  LEOPARD:  "6DwuJlPK3xT",
  GrassBgd: "64KgCoIDN33"
};

// Priority order: index 0 = highest z-index (frontmost)
var animalOrder = ["ELEPHANT", "RHINO", "LION", "BUFFALO", "LEOPARD"];

function getEl(id) {
  return document.querySelector('[data-model-id="' + id + '"]');
}

function getZ(id) {
  var el = getEl(id);
  if (!el) return 0;
  return parseInt(window.getComputedStyle(el).zIndex) || 0;
}

function setZ(id, z) {
  var el = getEl(id);
  if (el) el.style.zIndex = z;
}

var zBgd = getZ(ids.GrassBgd);
var zFgd = getZ(ids.GrassFgd);
var zBase = zBgd + 1;

// zBase+0 = selected (back), zBase+1..4 = others low to high
// So Elephant (highest priority) gets zBase+4 when not selected, etc.

if (!animalValue || animalValue.trim() === "") {
  // Reset: Elephant highest, Leopard lowest in the group
  for (var i = 0; i < animalOrder.length; i++) {
    // i=0 (Elephant) gets highest: zBase+4, i=4 (Leopard) gets zBase+0
    setZ(ids[animalOrder[i]], zBase + (animalOrder.length - 1 - i));
  }
} else {
  var selected = animalValue.trim().toUpperCase();

  // Selected goes to the very back of the group
  setZ(ids[selected], zBase);

  // Remaining animals keep their relative order, stacked above
  var zCounter = zBase + 1;
  // Walk from lowest priority to highest (Leopard up to Elephant)
  // so that Elephant ends up with the highest z-index
  for (var i = animalOrder.length - 1; i >= 0; i--) {
    if (animalOrder[i] !== selected) {
      setZ(ids[animalOrder[i]], zCounter);
      zCounter++;
    }
  }
}

// Re-pin grass layers
setZ(ids.GrassBgd, zBgd);
setZ(ids.GrassFgd, zFgd);

Each section of the accordion is also made using an SVG image, as the transparent areas of a PNG image would have blocked users from clicking any sections beneath it.

Right! I have a flight to catch!

Visit the Game Reserve here:
https://bit.ly/elhc544