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.