Make a mobile app with WordPress & Phonegap: Part 2 – Page Transitions

In part 2 of this series, we’ll learn how to add different views with page transitions.

Views are basically pages, but they work different than website pages. We are creating a single page app, so there aren’t really pages per se, but the content that is in view will change. That’s why it’s called a view.

Today we will add a feature where users can click on a post in the post list, and it will transition into a single post view. There will also be a back button to return to the post list.

Download tutorial files

Adding page transitions

Here’s what our page transitions will look like:

This is part 2 of our series on building a mobile app with WordPress and Phonegap, in part 1 we talked about hooking up the JSON REST API.

If you followed that tutorial, you have an app that gets a custom post type from WordPress and displays a list of them. To take this a step further, we will want to add more features, like page transitions, menus, etc.

Let’s add a single post view and a nice page transition for it, shall we?

The page transitions will be hardware accelerated CSS, which is faster than javascript animation. We will use the PageSlider library by Christophe Conraets due to it’s simplicity.

To do that, we will add pageslider.js to our /js folder, and then use some code to integrate the transitions in our app.js file.

Hashes and Post IDs

Before we dive into the code, let me explain how this is all going to work.

We are going to use hash links that correspond to Post IDs on each post, which look like this:

<a href="#2602">Post here</a>

When clicked, it turns into this url:

/index.html#2602

Since this is an app, not a website, the url will not actually change. We use hashes to tell our app what page to display, kind of like a url tells a website what page to display.

The whole process goes like this:

1. Get posts from WordPress, add hash link with post ID
2. When link is clicked, transition page
3. Display the full post content on new page, based on Post ID hash

The hash is going to be dynamically generated so that we can reuse the code for other post types, categories, etc.

Confused yet? I hope not 😉

New Code + Explanation

Here are the code changes since the last tutorial, with explanations.

index.html

Not a whole lot changed here, we added links to the pageslider.js and pageslider.css libraries to handle the page transitions.

I have removed the topcoat list in favor of loading that dynamically, now that we have multiple pages you want to remove anything that won’t be in every view. Now there is just an empty #container div where we can load all of our content dynamically.

app.js

This is where the magic happens.

app.init()

init: function() {

	var hash = window.location.hash.replace(/^.*?#/,'');

	if (hash == '') {
		app.getPosts();
	}

},

You’ll notice I added the hash variable, which gets the hash value at the end of the url. That hash variable is the Post ID, so we know what post to load.

Below that, the if statement says that if there is no hash, run app.getPosts(), which loads the main post list. That makes sure we load the main post list only when we are in main view.

app.getPosts()

getPosts: function() {
	console.log('app.getPosts');
	var rootURL = 'http://www.wp4.dev/wp-json';

	$.ajax({
		type: 'GET',
		url: rootURL + '/posts?type=news',
		dataType: 'json',
		success: function(data){
			
			$.each(data, function(index, value) {
		      $('ul.topcoat-list').append('<li class="topcoat-list__item">' +
		      	'<a class="view-link" href="#'+value.ID+'">' +
		      	'<img src="'+value.featured_image.attachment_meta.sizes.medium.url+'" /></a><br>' +
		      	'<h3>'+value.title+'</h3>' +
		      	'<p>'+value.excerpt+'</p></li>');
		    });
		},
		error: function(error){
			console.log(error);
		}

	});

},

The only change here is adding the link to the single post view

<a class="view-link" href="#'+value.ID+'">

The hash link will be dynamically generated with the post ID, which we can use later.

app.getSinglePost()

getSinglePost: function(postID) {

	var rootURL = 'http://www.wp4.dev/wp-json';

	$.ajax({
		type: 'GET',
		url: rootURL + '/posts/' + postID,
		dataType: 'json',
		success: function(data){

			$('.single-post .title').append(data.title);
			$('.single-post .content').append(data.content);

		},
		error: function(error){
			console.log(error);
		}

	});

},

This is a new function that will handle our single post view. It gets the data from WordPress similarly to app.getPosts, but we are appending the post ID to the ajax url so we just get data from that post.

You’ll notice we pass in postID to the function, because we’ll be getting that from the hash value dynamically.

The success function is just adding the post title and content to the page using .append().

app.route()

route: function(event) {
	var homePage =
		'<div><ul class="topcoat-list"></ul></div>';

	var singlePost =
	    '<div><article class="single-post">' +
	    '<a class="topcoat-button" href="#">Back</a>' +
	    '<h2 class="title"></h2>' +
	    '<div class="content"></div>' +
	    '</article></div>';

	var page,
    hash = window.location.hash.replace(/^.*?#/,'');

    if (hash != '') {
    	page = singlePost;
    	app.getSinglePost(hash);
    } else {
	page = homePage;
	app.init();
    }

	slider.slidePage($(page));
}

Now that we have multiple pages, things get a little more complex, and we need routing.

Routing tells our app when, where, and how to display each page. At the top of the function, we are adding markup for each page. For the home page, we need the list markup. For the single post page, we need title, content, and back button.

Next we define our page and hash variables. The if statement says if the hash is not empty, display the single post page. We pass in the hash value to our app.getSinglePost function, which handles getting the content from WordPress via ajax. In any other circumstance, we display the home page.

Next we slide transition the page using the pageslider.js function, by passing it the page we want to display.

The back button is just an empty hash link, which transitions back to our home view. Simple!

At the bottom of app.js, we have some code that is used by pageslider.js.

Conclusion

You should now have an app that pulls in data from WordPress, displays it in a list view, and links to a single post view with a nice page transition.

There’s still a lot more we can do with this app, stay tuned for the next tutorial.

Check back for Part 3 next week, adding menus! Sign up below to get an update.