29 |

30 |

Welcome to the Xiao demo page

31 |

Xiao is a small, accessible, framework agnostic, browser-driven routing system. Make single page applications with progressive enhancement. This demo is an incomplete exploration of Xiao. See the Github repository for more.

32 |

This is the default route, home, and just contains static content, loaded with the web page from the server. Note the id="home" attribution in the HTML:

33 |

<div id="home">
 34 |   <h1>A demo built with Xiao</h1>
 35 |   <p>Xiao is a small, accessible, framework agnostic, browser-driven routing system. Make single page applications with progressive enhancement and without the complexity.</p>
 36 |   <p>This is the default route, <code>home</code>, and just contains static content, loaded with the web page from the server. Note the <code>id="home"</code> attribution in the HTML:</p>
 37 | </div>

38 |

To make Xiao recognize this element as a route element, you add it to a routes array when you instantiate the app.

39 |

var app = new Xiao([{ id: 'home', label: 'Home'  }], 'home')

40 |

The second argument defines the default route, which will be activated if no route hash is provided in the web address on page load.

41 |

Accessibility semantics

42 |

Route elements are given assistive technology-accessible information when a Xiao app is initialized. Note role="region" and aria-label="Home" (the value of which is taken from either the route element's first heading or the route object's label property):

43 |

<div id="home" role="region" aria-label="Home">
 44 |   <h1>A demo built with Xiao</h1>
 45 |   <p>Xiao is a small, accessible, framework agnostic, browser-driven routing system. Make single-page applications with progressive enhancement and without the complexity.</p>
 46 |   <p>This is the default route, <code>home</code>, and just contains static content, loaded with the web page from the server. Note the <code>id="home"</code> attribution in the HTML:</p>
 47 | </div>

48 |

Focus management

49 |

Whenever the hash changes in a Xiao routed app's URL, Xiao determines if it corresponds to a route or an element inside a route. If so, it will move focus to that element. This will move keyboard users into the correct position, and elicit the announcement of accessibility information in screen readers. For example: "main, region, home".

50 |

Try opening developer tools, clicking this Subsections link, then entering document.activeElement into your console. The active element is the focused element.

51 |

52 |

53 |

Route lifecycles

54 |

Routes have a lifecycle that begins with the user's arrival at the route and ends with their departure. You can tap into these lifecycle events with the arrived and departed methods.

55 |

For example, I can record the arrival time as a timestamp and write it to the page, like this:

56 |

id: 'lifecycle',
 57 | label: 'Route lifecycle',
 58 | arrived(elem) {
 59 |   var time = Date.now();
 60 |   var timeElem = elem.querySelector('.timestamp')
 61 |   timeElem.textContent = `Route arrival timestamp: ${time}`
 62 | }

63 |

64 |

If you refresh the page, the timestamp updates. It also updates when you move to another route and come back. Obviously, this is a silly example. You're more likely to use the arrived method to load XHR content and/or compile some templates. That sort of thing.

65 |

The departed method

66 |

The departed method fires when the user leaves the route. One use may be to save some route-related data to localStorage. Below, you should see the message "Welcome!" if it is your first time at this route or "Welcome back!" if you've been here before.

67 |

68 |

We set the storage item on departed…

69 |

departed(elem) {
 70 |   window.localStorage.setItem('visited', true)
 71 | }
 72 |

73 |

…and retrieve it on arrived.

74 |

arrived(elem) {
 75 |   var visited = window.localStorage.getItem('visited')
 76 |   var msg = visited ? "Welcome back!" : "Welcome!"
 77 |   elem.querySelector('.welcome').textContent = msg
 78 | }
 79 |

80 |

(Note that the departed function only executes when the page's URL changes, not when the page is reloaded.)

81 |

Parameters

82 |

In these examples, we just used the elem parameter. There are three parameters you can supply to the lifecycle functions in total. In order:

83 |

elem: the route element (the element carrying the route id and containing the route content)
params: any params passed to the route in a query string, converted to an object
routes: the whole routes object for convenience

88 |

89 |

90 |

Subsections

91 |

When you link to a subsection from within a route that is already active, it just behaves as a basic hash fragment and no JavaScript is fired.

92 |

A subsection

93 |

Alternatively, if you link to a subsection in a different route, like the subsection about focus management on the Home page, the route is revealed, events and methods fired, and the subsection brought into view.

94 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim molestie diam. Integer fermentum nisi eget vehicula tristique. Vivamus leo justo, pharetra quis euismod ac, vestibulum non neque. Ut eget est sem. Ut quis ultricies mauris. Donec mauris tortor, posuere non mi ac, accumsan rutrum sapien.

95 |

Phasellus suscipit libero blandit sapien feugiat, vel mattis velit venenatis. Aenean eu ligula viverra tellus accumsan cursus ut et lorem. Donec non laoreet ex. In vitae turpis felis. Nam sollicitudin sit amet orci et hendrerit. Nulla congue dictum finibus.

96 |

Ut ut ligula porttitor purus dictum faucibus. Aliquam suscipit dui in augue pharetra, sed pellentesque dolor fringilla. Donec ornare est eget sapien tristique rutrum. Nulla facilisi. Praesent nec euismod leo. Morbi nunc dui, rhoncus quis massa ut, mollis gravida mauris. Praesent quis nisl ut ipsum ultrices mollis. Vivamus at ex orci.

97 |

98 |

99 |

Using params

100 |

The point of single-page applications is that different routes have access to the same working data. But sometimes you'll want to pass specific pieces of data between routes, based on user choices. This is what query strings are for. Just add them in the URL of a route link:

101 |

<a href="?up=down&left=right#params">params</a>

102 |

Xiao converts the query string into an object and makes it available in the route object's arrived and departed methods.

103 |

{
104 |   id: 'params',
105 |   arrived(elem, params, routes) {
106 |     var paramsElem = elem.querySelector('.params-object')
107 |     paramsElem.textContent = JSON.stringify(params)
108 |   }
109 | }

110 |

Try changing the params in the URL and refreshing the page to affect the live result below:

111 |

112 |

113 |

` or `