Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 7 CREATING RESPONSIVE WEB APPSI have to be careful not to apply the swipe history when the web app is displayed on a small screenin the landscape orientation. I removed the category buttons in this device configuration, meaning thatthere is no way for the user to generate a history for me to navigate through. In all other deviceconfigurations, I am able to respond to the swipe by changing the value of the index and selecting thecorresponding historic category. The result is that the user can navigate between categories using thenavigation buttons and swiping moves backward or forward through the recent selections.Integrating with the Application RoutesThe last tweak I want to make is to respond to the swipe events through the web app’s URL routes. In thelast listing, I took the shortcut of changing the observable data item directly, but this means I will bypassany code that is generated as a result of a URL change, including integration with the HTML5 History API(which I describe in Chapter 4). The changes are shown in Listing 7-17.Listing 7-17. Responding to Swipe Events Through the Application Routesfunction advanceCategory(e, dir) {if (cheeseModel.device.smallScreen() && cheeseModel.device.landscape()) {var cIndex = -1;for (var i = 0; i < cheeseModel.products.length; i++) {if (cheeseModel.products[i].category == cheeseModel.selectedCategory()) {cIndex = i;break;}}cIndex = (dir == "left" ? cIndex-1 : cIndex + 1) % (cheeseModel.products.length);if (cIndex < 0) {cIndex = cheeseModel.products.length -1;}cheeseModel.selectedCategory(cheeseModel.products[cIndex].category)}} else {var history = cheeseModel.history;if (dir == "left" && history.index > 0) {location.href = "#category/" + history.categories[--history.index];} else if (dir == "right" && history.index < history.categories.length -1) {location.href = "#category/" + history.categories[++history.index];}}I have used the browser location object to change the URL that the browser displays. Since I havespecified relative URLs, the browser will not navigate away from the web app, and my routes will be ableto match the URLs. By doing this, I ensure that my response to swipe events is consistent with otherforms of navigation.193www.it-ebooks.info