select-your-own-seat

Expand History Expand History
Collapse History Collapse History

Persist map across page loads

The <svg> element that serves as the seats#index and seats#show seat map includes more than 1,000 elements per floor. Parsing, rendering, and discarding the DOM Nodes that represent the map takes time and could be wasteful.

Additionally, now that the application is capable of panning and zooming, it’s important to preserve that state as our users interact with the map, so that they’re not surprised or disrupted.

This commit annotates the <svg> element that includes the page’s seat map elements with data-turbolinks-permanent to persist it across page loads. In order to persist the element across page loads, it requires an id attribute, so declare it as "map".

There is an exception to this optimization: navigating between the floors of our venue. When switching floors, preserving the map’s current zoom and pan would be a surprise.

When navigating to a separate Floor in a Venue, the clicked <a> element will fire a turbolinks:click event.

This commit decorates the <a> elements with data-action attributes that route the events to the seats#discardMap function. The discardMap function removes the data-turbolinks-permanent attribute, preventing it from being retained during the imminent page transition.

The presence or absence of the data-turbolinks-permanent attribute represents whether or not the seats controller should discard the map.

Therefore do not destroy the map when navigating between pages while the map is being retained.