JavaScript Combines Structure and Content

This post will focus on how JavaScript combines structure and content.

JavaScript integrates content and structure for web pages to create a dynamic user experience. You use arrays to store content, and you use templates to define structure. JavaScript combines the two.

If you have an image gallery, and you click on one of the photo albums, you need write code that remembers what the currently selected album is. This is important because if the user clicks on slide show, you want to show a slide show of the currently selected album.

Wk4SwitchDisplay1

In this case, you can create a gallery.js file. This will contain all the code that maps content data to the templates. This code needs to know what to display, and when to display it.

Wk4SwitchDisplay2

Look at the above picture. The first thing you see are a bunch of variables. These variables represent the templates. Here, you compile them at the beginning, so they can be used later. You also see variables for the current album and current photo.

The function show template is going to take a template, apply data to it, and display it to the HTML. This process is encapsulated into a single function so it can be easily reused.

A very important rule for large, dynamic sites, is you want all the page to load before you run any JavaScript. This is the purpose of the function $(document).ready, which calls an anonymous function. The anonymous function contains everything you need to make your website work.

You start by loading and compiling all your templates. You have your templates saved as variables, so you can easily call them later.

Next you will have click functions for your albums, photos, and slide show tabs. These are the three main tabs on your web page. Clicking each of those tabs will cause a distinct template to be loaded.

Wk4SwitchDisplay3

Later down in the code you want to grab all the elements with the class “album-thumbnail”, and give them a click function. You grab the data id and use that to select the correct album out of the array, and then show that album by the photos template. You also save it in the variable current_album. Again, it is important for your code to know what the current album is. The last thing is some code showing what to display when you click on a photo thumbnail.

Wk4SwitchDisplay4

Use an HTML Template to Represent Data

This post will focus on how you can use an HTML template to represent data for an image gallery.

A typical image gallery may have photo albums, with each album containing photos, and then there is data associated with each photo.

Take a look at this screenshot from the index.html file, which contains the templates. The following shows the HTML template for the albums template. This template matches up with the albums.js file, which was shown in the previous post.

Wk4WriteTemplate1

  • The {{#each albums}} template expression matches up and displays the content associated with the albums member variable from the albums.js file.
  • That “data id” attribute allows you to click on the thumbnail and bring up the whole album.
  • the {{photos.length}} expression gives you the size of the array, which tells you how many photos are in that particular album.

Additionally pictured below are the photos template and a photo template, the latter is used for a large display of an individual photo.

Wk4WriteTemplate2

Wk4WriteTemplate3

The next template is for the slide show carousel. It uses some built-in jQuery and bootstrap to give it some rather nice features.

Wk4WriteTemplate4

Lots of the template is fairly boilerplate. The important thing is how to get the photo data into the slide show. The following bit of code, from the template, shows how to do that.

Wk4WriteTemplate5

The {{#if @first}} is true if the current item in the template is the same as the first item in the array you are display. This handlebar template will ensure the first photo is displayed in your carousel.

You can see that the index.html contains a number of templates that you can use in different contexts to display different aspects of the data.

The screenshots in this post show only snippets of the code. Feel free to download the complete image gallery source code.

 

A Close Look at Data Structure of an Image Gallery

This post will examine the data structure of a complete image gallery.

Pictured below is a basic image gallery. The first page you see is the page of photo albums. Each album has a cover photo, with a title, and the number of pictures in each album is shown.

Wk4Data1

If you were to click on one of the album’s cover photo, English Winter for example, it would bring up the photos of that album.

Wk4Data2

If you were to click on one of the individual photos in the album, it should bring up a large display of that photo.

You also have the option of displaying the entire photos as a slide show.

Wk4Data3

Building the Content

Next you will see how to represent the content in terms of arrays and images. You will see how to create the structure in terms of templates. Finally, you will see the JavaScript you need to put the content and structure together.

The image gallery is a multi-level content site. You have an array that stores the albums, and then for each album you have an array that stores photos for that album. For this to work, you need to have arrays inside arrays. Pictured below is an array called “albums”, which stores all the albums for your site. Within the “albums” array, you see another array called “photos” that will store all the photos for the “travels” album.

Wk4Data4

Take a look at part of the file structure for the website. Inside the js folder, you still have the standard libraries for bootstrap, jQuery, and handlebars, but you see that separate pages were added for albums and gallery. You can also see that the css, fonts, and images are separated into separate folders. This gives you a folder structure that represents all the elements of your webpage. You can work with them separately without having to deal with a massive HTML file.

Wk4Data5

Pictured below is a screenshot of the albums.js file. It is basically the same as the array inside an array example above, but with all the complete metadata.

Wk4Data6

 

 

How to Implement a Search Feature

Implementing a search feature should be standard fare for almost any type of dynamic website. If you have an image gallery, for example, a search feature could return any photos that match the title or author of the photo. In order to implement a search feature, there are three basic things you have to do

  1. You have to recognize and know when the user is typing in a search query.
  2. You have to search through all images in the array and find images that match the search query.
  3. You have to put all matching images in a new array, and re-display them.

Wk4aSearchIn the example code pictured, you see use of the jQuery function “keypress”. This function tells us when the user presses any key. This function does not terminate until the user presses the return key. This is demonstrated in the second line with the conditional “if” statement. The return key, by default, is assigned the number 13. Thus, the function will terminate if the user presses the return key. The variable “e” is an event variable that is passed into functions every time you call an event.

Wk4bSearchNow you have to search for matching images, and put them in a new array. As demonstrated in the next picture, first you should create a new array. The new array should be created as an object that contains a single member variable, which itself is an array. The new array takes data objects from that original images array that are filtered with matches from the filter function. The filter function goes through every image in the array. It matches “True” with an image if there is a match to the search string, and “false” if it does not. To that you need a set of conditionals as shown in the next picture.

Wk4cSearchThe conditionals should be fairly self-explanatory. The only strange bit is the “> -1” operation. Remember that index values for arrays or strings start at zero and only go up through positive integers. Therefore, an object position inside a string can not have a negative index value. If there is a match with the search query, then the position of the match will always have an index value that is “> -1”.

Once you have created this new array, then you can pass it through the template, and display it in the content <div>.

 

Dynamically Display JavaScript Objects

This post will examine the details of how to dynamically display JavaScript objects from an array.

Consider an image gallery website that shows a modal display when you click on any of the photos. Pictured below is the modal template you would use to show the modal display. However, the problem is knowing exactly what data to pass into the template. Your array will have many image objects. It’s not practical to make a template for every image object in the array. Thus, you need a way for the template to know what image you are trying to grab for the modal display.

Wk4aDynamic

The key thing to remember is, if you want to grab an image out of an array, then you need to grab it by its index number. Therefore, your main problem is finding a way from your template, and the jQuery callback code, to get the index value of the image object that you click on.

The solution to this problem is shown in picture below.

Wk4bDynamic

The highlighted text is a special template expression that gives you the current index value in the array. This index value gets saved into a variable called “imgNum”. You can then pass that value into the template, create HTML, and then add the HTML into the DOM. A complete example of this process is as follows:

Wk4cDynamic