Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac elementum mi. Fusce lacinia cursus lacus, in ullamcorper odio. Pellentesque dictum rutrum libero eu gravida. Etiam at malesuada nibh, eget pharetra orci. Vestibulum eu vehicula dui. Sed efficitur magna nec libero aliquam, ut condimentum neque dignissim. Cras id tortor et lectus viverra ultrices. Duis non gravida eros, eu vehicula nisi. Donec in lectus at dui vestibulum sagittis.
Note: clicking the "Reset All Templates" link above will reset everything to this default view.
The "Click Me" button on the left should change 4 panes simultaneously: A, B, C, and this Main Content Area
This is done by mapping the HTML page elements to data contained inside of <template> tags in this page.
The JSON file named routemap.json looks like this:
The "linktarg" value defines the default target for single links. The rest of the items in the JSON file define the ID of the element being clicked, the template data to load, and the target element (where to load them to). Let's break down what happens and how it works:
Let's see how this works by using the "Click Me" button on the left as an example:
This HTML page that you're reading contains the UI layout. The relevant code looks like this:
The HTML page calls 2 Javascript files when it loads:
<script src="router.js"></script> <script src="experiment1.js"></script>
The router.js file first checks to see if we have a copy of the data in local storage. If not, it loads the routemap.json file and stores the data in local storage. The experiment1.js file loads the default template data and writes it to the page elements (boxa, boxb, boxc, and right). Then it starts the router functionality. After all the scripts load, clicking a link or a button calls the "route()" function inside the router.js file. Using our example of the "Click Me" button, here is what the HTML code looks like (the important part is highlighted with bold text):
<button id="button1" onclick="route(this)" title="Click To Load Multiple Templates" class="clickme">Click Me</button>
See that? The onclick action for the button is set to "route(this)".
In fact, all the links and buttons in this HTML page follow the same syntax. Here's a sample anchor link from the top navigation bar:
<a href="javascript:void(0)" id="link1" onclick="route(this)" title="Load One Template">Load One Template</a>
So, whether you're clicking a link, or a button, you're calling the "route()" function from router.js and passing the 'this' keyword as an argument to the function.
The route() function then inspects the object being passed (this) and tries to get the id of that object. So, in our example of the "Click Me" button: when a user clicks the button, the value of this.id is "button1". The route() function checks the routemap in local storage to see if we have an element named "button1" then, if we do have an element with that id, it loads the appropriate template(s) as defined in the routemap (initially loaded from the routemap.json file). So, if you scroll up and look at the JSON data again, you'll see that we have this information:
"button1": {
"boxa": "templateA",
"boxb": "templateB",
"boxc": "templateC",
"right": "new_content"
}
When the "Click Me" button is clicked, the route() function knows that we have an element with the id "button1". Then, it loads the corresponding templates to the elements which are defined in the JSON data above. So, in the "boxa" element we load the data from <template id="templateA">. In the "boxb" element, we load the data from <template id="templateB">. In the "boxc" element, we load the data from <template id="templateC">. And, in the "right" DIV element (this main area of the page that you're reading), we load the data from <template id="new_content">. So, 4 element ids and 4 corresponding template ids are passed to the function which loops through them and loads the data.
The template element data which is embedded in this HTML page (and hidden by your browser by default) looks like this:
So, the routemap.json file defines the ids of the clickable elements (links or buttons), the ids of the target elements (usually <div> tags), and the ids of the template data to load into those target elements. If only a single element id is being passed, the Javascript function uses the element defined with "linktarg" (in the JSON file) to know which <div> to load the template data to. To see this in action, click the "Load One Template" link in the navigation bar above. If you inspect the JSON file above, you'll see that this is defined on this line here: "link1": "singletpl",
In this particular case, only the id of the clickable element ("link1") and the id of the template element to load ("singletpl") are being passed to the function. There is no id for the target <div> being passed. In these cases, the route() function just uses the target element defined in "linktarg" to know where to load the template data to. This only works for single template links. If multiple templates are being loaded, then each template id to be loaded must have a corresponding target element id to know where to load the data.
You can download this entire example (in .zip format) here: Javascript Experiment 1
Open it in your favorite editor and take a look at what is going on with the code.