Spatial Navigation Demo

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My Awesome Smart-TV -app!</title>
        <link rel="stylesheet" type="text/css" href="./css/styles.css" />
        <script type="text/javascript" language="javascript">
            document.addEventListener("DOMContentLoaded", function(event) {
                createApp();
            });
        </script>
        <script src="./js/app.js"></script>
        <script src="https://luke-chang.github.io/js-spatial-navigation/spatial_navigation.js"></script> 
    </head>
    <body>
        <div id="app"></div>
        <div id="navigationGrid">
            <div id="topLeft" class="focusable">TOP LEFT</div>
            <div id="topRight" class="focusable">TOP RIGHT</div>
            <div id="bottomRight" class="focusable">BOTTOM RIGHT</div>
            <div id="bottomLeft" class="focusable">BOTTOM LEFT</div>
        </div>
    </body>
</html>

CSS

body {
  background-color: #FFF;
  cursor: pointer;
}

#playButton {
  display: block;
  width: 80px;
  height: 60px;
  border: 2px solid;
  text-align: center;
}

#navigationGrid {
  position: absolute;
  display: flex;
  top: 25%;
  left: 25%;
  height: 300px;
  width: 500px;
}

.focusable {
  padding: 20px;
  border: solid;
}

#topLeft {
  position: absolute;
  left: 0;
  top: 0;
}
#topRight {
  position: absolute;
  right: 0;
  top: 0;
}
#bottomRight {
  position: absolute;
  right: 0;
  bottom: 0;
}
#bottomLeft {
  position: absolute;
  left: 0;
  bottom: 0;
}
:focus {
  outline: 5px solid red;
}

JavaScript

/**
 * A remote control key variables
 */
let RC_LEFT,RC_UP,RC_RIGHT,RC_DOWN,RC_ENTER,RC_BACK,RC_EXIT;

/**
 * Pointer click event variable
 */
let POINTER_CLICK;

/**
 * The root html element
 */
let root = null;

/**
 * Function for creating the application and getting it ready for the users to use
 */
function createApp() {
  console.log("Creating the app...");
  initSpatialNavigation();
}

function initSpatialNavigation() {
      console.log("init spatial navigation")
      SpatialNavigation.init();
      SpatialNavigation.add({
        selector: '.focusable',
        defaultElement: "#topLeft"
      });
      SpatialNavigation.makeFocusable();
      SpatialNavigation.focus();
}