I see this kind of thing on blogs all the time, and wondered to do it. Particularly, how do I anticipate the user leaving the site? Browsers prohibit using modals and tooltips when listening for document.unload events. I could listen for when the user loses focus on the browser window (ie. $('body').on('mouseout'...)) but that wouldn’t work on phones.

How do I gracefully and respectfully grab the attention of the user without impacting on usability?

As with any solutions, there are user-friendly solutions, and solutions that are intrusive. The solutions that I liked involved a modal showing, fading out the rest of the site, and easily dismisible. It grabs my attention, but simply goes away and shuts up if I don’t want to engage.

It was an interesting problem. At the very least, the problem was a useful challenge as I continue to grow my Angular JS skills. How do I gracefully and respectfully grab the attention of the user without impacting on usability?

While I waited for the client to figure out what he wanted, I took time for myself to explore how I could use AngularJS to solve the problem swirling in my head. I decided I wanted an object that created a mechanism that listened to the user’s behavior, and fired an event if the user goes idle. Once the user goes idle, I would listen for the user to make another move and use that event to fire my call to action.

The Solution

Inspired by this post on StackOverflow, I created a Factory object that listened for idle behavior. I knew I needed two pieces of functionality. One piece would manage a timeout with the ability to create a timeout, and fire an event when the timeout ended. Also needed was the ability to “interrupt” the timeout by canceling the existing timeout and starting a new timeout on every user action. The second piece needed was the listening for the user interaction, forwarding those events to the timeout object, and to stop listening if the timeout ended.

See the Pen Idle Timeout with AngularJS by Jeff Wilkerson (@stljeff1) on CodePen.

Some other examples solving similar problems that I saw used $rootScope and variable watches. I understand that approach conceptually, however I am still confused on the whole Digest Cycle thing in Angular JS, and for this little exercise, I wanted to avoid using $rootScope to propagate events.

And 9 months later, I’m finally documenting the project! Better late than never, I reckon!

My countdown was largely inspired by a codepen I found by Garth Weaver. However I didn’t fully agree with his implementation. I thought there should be a controller that held the data for the countdown, and I thought the directive should use data binding instead of using jQuery DOM manipulations. Additionally, I needed to stop the countdown once time left equalled 0, which Garth’s directive does not. I did, however, appreciate his use of a factory to calculate the time left.

The Solution

See the Pen Countdown Using AngularJS 1.5 by Jeff Wilkerson (@stljeff1) on CodePen.

Sadly, however…

It will take some extra work to get this script to handle timezones. Timezones aren’t really important when calculating something relative like the end of the day. But, timezones are crucial when calculating a specific time, like the start of a baseball game.

The Objective

The client has buttons linking to Youtube videos throughout the site. Each link was going directly to the external Youtube page. The client wanted to keep the buttons, but have the videos launch a modal window taking up as much screen space as possible. Some pages had one link, other pages had many links. The site is using AngularJS and Bootstrap.

The Process

First, as with many projects, I surveyed Google to see if anyone had created what I needed. I found many tutorials showing how to create modals (see Ben Nadel). I also found this widget that uses the Youtube Developer API inside an AngularJS Directive, but no examples showing how to use the Youtube Developer API to load a video in a modal window. Nonetheless, I found Ben Nadel’s blog and Fran Dios’s jukebox app valuable as I continue to learn how to organize my AngularJS moduler.

The Results

View the full demo here.

This project taught me about module.run(), and how to compile templates inside directives.