Paul Hammant's Blog: Slideshow HTML App, using Angular
This was a project a couple of days ago for colleague Andrew Dean, and attendees for the Dallas GeekNight Meetup Make a HTML slideshow using Angular
Context
Martin Fowler (ThoughtWorks Chief-Scientist) occasionally uses slide-shows on his blog/wiki (bliki) - martinfowler.com. I’ve not dived into Martin’s implementation, but I’m wanting to see if Angular makes for an effective equivalent. Martin wrote about his “Infodeck” concept here and in that page there are two links to examples. One’s a PDF, that isn’t as elastic in an iPhone view as you’d wish for, in that all the pages are displayed beneath each other. The second is a HTML one, with some effects that are touch-screens, and keyboard left and right for desktop. Martin has more InfoDecks since that blog entry was originally published.
What he has with that, delivers the following functionality:
- Blog mountable slideshow
- Fits user interface in question (desktop vs mobile devices)
- Affordances for touch screens
- Transition effects on mobile devices
Trying to do the same with Angular
As mentioned, the GeekNight gang coded accepted the challenge, with me Skyping in from Ohio for moral support.
Here’s the slideshow itself. You can go to that in a desktop browser, but it’s only four colored slides with the slide number in words on it. It is actually four SVG files exported from OmniGraffle (also checked in). They are displayable in modern browsers in multiple ways, including <img/> tags as we’ve used. Here are the four slides for those who can’t click:
Seriously go to the application, and click “prev” and or “next” (desktop browsers), or swipe left and right (mobile browsers). One slide is shown at a time, and the next/prev performs as you’d expect it to. Try to change the browser window size, on a desktop system. If you’re testing on a mobile platform, be sure to email the link to this article to yourself (that’s easier than retyping right ?).
Under the hood.
Here’s the source for that. You really just need to click into the index.html (that’s the direct link on GitHub) file, to see the whole application.
Note for Angular we’re trying to stay idiomatically correct, in that the ng-markup attributes are used extensively. The model that supports the view, has a few variables, which directly shape the view.
CurrentSlide
The slide number currently showing.
Height and Width
The with and height of the display of the phone/pad/desktop in question
TableStyle and ImgStyle
Some dynamic style for the image, and the encompassing table.
IsTouchScreen
A boolean for whether the device supports fingers-on-screen as an input mechanism.
Things we tried to ‘hit’ in terms of functionality
Indexable by the Google search-bot, complete with preview
Specifically all (or however many fit in the preview) slides are shown in a vertical column in the preview. Google has JavaScript turned off, so the view can only be defined in HTML and CSS.
We’re no sure whether this worked or not, and are waiting for the google search-bot to kick in and and make that preview image.
Feb 16 update - the Google searchbot didn’t pickup the page as there was no text in the body - a title is not enough :-(
Mar 6 update - Google’s search-bot did find it, but it’s not what was expected:
Search for “Dallas GeekNight Angular Slideshow”. Here’s the listing (complete with unprocessed Angular fields):
Here’s the preview:
That being blank is not what we wanted. Maybe it can’t process the SVG, but that does not feel to be a complete explanation.
Uses Angular to reduce the ‘slides visible at a time’ to one
The prev/next navigation links should appear below the single slide for desktop users. There’ll be no ‘next’ button when you’re at the end. Similarly, there will be no ‘prev’ button on the first slide.
Resizes appropriately for mobile devices and Desktop
That means portrait and landscape.
Is touch/swipe aware for mobile devices
Swipe for prev/next on touch-screen. The row with the next/prev links in it, should disappear.
The Result?
It works of course. There’s a snafu in terms of the size of ‘jquery-mobile-angular-adapter-standalone-1.2.1-SNAPSHOT.js’ in that it’s much bigger than Angular on its own. It’s 311,871 bytes, which is very big, and causes a noticeable delay over slower connections.
That said, we’re ready to go for main-stream usage of this, as well as refinements donated by GitHub Pull-Request :)
We numbered the slides (SVG). I mean we the files that form the images end in a number suffix (1..4). We could have reduced the HTML by 50% if we had a ng-repeat for the slide progression, but we’d have lost the Google Search-bot preview.