Inventory of JavaScript libraries and files
JavaScript is required for the browser to display Enchanting the Desert. Several open-source libraries and three custom JavaScript files determine site display and behavior. All .js files are located on the server (rather than being called remotely). This page documents what each library and .js file does.
JavaScript libraries
- Backbone — framework for page modeling and “routing." Requires:
- jQuery — animation, event handling
- Underscore — programming helpers
- Bootstrap — interface elements, behaviors
- FlowType — responsive typography
- Image Map Resizer — resizes image maps to fit containers
- imagesLoaded — detects when images are loaded
- Raphaël — vector graphics (used for arrows on map)
- Simple Player — audio player (used for narration mp3s)
Custom JavaScript files
Additionally, some custom JavaScript was written for the project, under the custom theme "Singularity":- data.js — contains arrays of:
- essay and photo titles
- photo dates
- essay order (different from slide order)
- chapter titles and essay contents
- links from each photo image to image layers with tints, landmarks, trail names, narrations MP3s, and narration texts
- footnotes (called sidenotes)
- HTML with JavaScript functions for each photo, used for the image map of landmarks
- HTML with JavaScript functions for each photo, used for the image map of trail names
- items to pre-load (e.g., the base map and small versions of photos, photos with tints, station point icons and their hover states, and multiple images for the Bravo Window if the essay mentioned several slides
- singularity.js — contains functions for:
- page and page element loading
- settings for the table of contents
- initial state-setting for the map and its layers
- canvas sizing (for the map)
- page and element sizing
- behaviors for Alpha, Bravo, Charlie, and Delta windows (called nodes) — for instance, what happens when the map is clicked (Charlie window shrinks, and map is shown in Alpha window)
- previous/next arrows for Bravo and Delta windows
- navigation behaviors, including highlighting current chapter and slide
- map behaviors for the Alpha Window, including zoom, reset, layer behaviors, animated arrows, composite viewshed (also called the heat map)
- photo behaviors for the Alpha Window, including layer behaviors
- essay behaviors for the Alpha Window, including cite/share/print buttons, sidenote display and behaviors
- launches the Backbone router
- router.js — Backbone router settings (for navigation between photos, maps, and essays)