• David Bowden

Lectora Hacks: Swipes For Tablet, Clicks For Desktop

Hack: Customise Lectora’s default swipe action to the device being used.

Problem - and solution

We have a set of courses which are designed to be used on tablets as well as desktops and laptops. These are Lectora Online non-responsive titles. For previous/next navigation we want something different for tablet users than desktop or laptop users:

  • Desktop: Mouse clicks on buttons

  • Tablets: Swipe right/left

But using Lectora Online's default Swipe actions has three results I don't want. These are:

  • Tablets As I swipe there is no animation to indicate that something is happening. Normally I would expect some sort of drag animation to go with my finger movement, to show that if I drag my finger far and fast enough, the page will change.

  • Desktops By default, a mouse click-drag will be interpreted as a swipe. Sometimes we use interactions which involve filling in fields. A normal interaction would be to select a piece of text by clicking and dragging with your mouse. If you do that with swipe actions on the title - you will go to the next or previous page and lose what you entered in the fields!

  • Desktops I can reduce the pain of the previous issue by putting a condition on the swipe action, so that a mouse click-drag does not swipe in desktop mode. But this does not prevent the code capturing the click-drag of the mouse and turning it into a swipe (albeit with no action). This means I can't select or highlight text on the page using the mouse, and I'd like users to be able to do that.

Here's a video illustrating those problem behaviours:

And here's my solution!

Watch this video to see it in action, and find out how it's done below. I've also built a non-responsive demo for you to see this working for yourself. Try it on desktop, and then on a tablet or a mobile.

The nitty-gritty detail

You can implement this hack yourself in three easy steps.

1. Download the hammer.min.js library from http://hammerjs.github.io/dist/hammer.min.js. Rename it to be just hammer.js. Attach the file to the Lectora title and add an External HTML object with type Meta Tags containing the following:

<script src="hammer.js"></script>

2. Add a couple of Arrow Shapes to animate your swiping. I made mine 550w x 375h. These should be Initially Hidden, Always on Top. The demo shows two examples, one using shapes and the other using clipart graphics.

3. Now to the main event. We need to add a Run Javascript Action on page show with this script (download a pdf here). The minimum you need to know about this script is how to configure it to control your Arrow Shapes or other objects that you want to use to animate the drag action. There are two lines to edit in the script:

a. var lTarget = shape95;

b. ar rTarget = shape94;

The underlined text must be replaced with the element ID of your animation objects. Be sure to add a semicolon after the ID for correct JavaScript syntax (Ace editor prompts you to do this by displaying a small 'i' in the left hand margin if you forget). Here's a video showing how to find out these IDs and replace them in the script. Here I am replacing the Shape Ids with the Clipart Image Ids; you can see the result of that here

And it's as simple as that! A few more observations/tips for you:

  • Sometimes you want to prevent swiping to the next or previous page. To do this edit the script and change the third variable:

var directions = 'both'; // swipe will work in both directions var directions = 'right'; // you will only be able to swipe right var directions = 'left'; // you will only be able to swipe left

  • A subtlety of this script is that as you drag (Hammer calls this 'panning') it increases the opacity of the drag object just to give some visual indication that something is about to happen (the swipe). You can play with this to modify it or add other effects.

  • This particular implementation is not friendly to drag and drop exercises, since the touchable area is defined as the 'body' element in the DOM and every descendant thereof. Lectora attaches to the wndPage object, which is Lectora's all encapsulating object just inside the body element, so in effect no different. One approach to take is to use a transparent text box over the entire screen area which sits below the drag and drop activity. Give the text box a css style property of, say, "swipeObject". Then change the var touchItem = document.body; statement to point to that text element. Anything in front of it will not respond to touch.

  • My example here is for a non-responsive title, but the same technique partially works for responsive titles. You can add a drag animation but you cannot "turn off" touch interception for a mouse user. A critical step is attaching a new v2 hammer.js file, as this will overwrite the Hammer v1 file that automatically loads with a Lectora responsive title.

  • Swipe works best when your Lectora content (or 'touchable' area) is occupying the entire screen area. So it may not recognise a swipe in the bottom part of the screen in portrait mode if your pages are short.

  • Future Lectora releases will most likely make this hack obsolete (which will be a good thing)!

I'd be happy to talk with you about anything I've mentioned here - give me a call on 01959 543900.

#mobile #responsivedesign #elearningdesign


home  |  how we help  |  showcase  |  video interact  |  insight  |  tools  |  legal  |  get in touch  |

+44 (0)1959 543900 | enquiry@transition.co.uk

© Transition Associates Ltd. 2019. All rights reserved