Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Easy Way to Add the Gestures API to Muse

Avatar

Level 3

Howdy!

I've seen a number of questions on this forum looking for a way for non-developers to add the AEMM Gestures API to Muse, so that the navigation will toggle when the screen is tapped. I developed a .mucow widget for us to use at Bates Creative for just this purpose.

It's really easy to use: you just File > Place the .mucow file into your Master page, and when the HTML exports, it adds the necessary JS to your index.html.

You can find the .mucow file and more info here: GitHub - asheabbott/aem-mobile-gestures-api-for-muse: This Muse Configurable Options Widget (mucow) ...

I hope this is helpful!

40 Replies

Avatar

Level 3

How very awesome! Thanks so much for letting me know.

Avatar

Level 2

We've been implementing the MuCow into a few 'real' pages

and noticed one drawback so far:

Touching the thumbnails of a Slideshow toggles the navbar;

touching trigger areas of a Composition doesn't toggle it.

(The obvious behavior would be to not let it toggle.)

Avatar

Level 3

Yes, unfortunately that is expected behavior. We are basically calling the tap to toggle nav functionality on the whole page, so we then need to disable that functionality on individual elements that don't require it. I've included code to disable it for links, but they are a standardized element. Once we get into slideshows and other plugins, the code would need to be customized, as those elements are not at all standardized (meaning there's no standardized "slideshow" tag for me to grab, for example, and ids and classes would vary).

That said, I could look into disabling it for the slideshows functionality that comes with Muse, as that should be standardized enough, but I'd never be able to cover all the possibilities of third party plugins.

I'll update you once I'm able to look into that.

Avatar

Level 2

I understand very well that Muse's code can be quite a hindrance in addressing all possible 'hot spots'. As it turns out, the Slideshow's thumbnail is already a different type of tag than the trigger area of a Composition. The latter is playing nice with your script, while the former is not responding to the link tag.

Avatar

Level 3

I've released an update — version 1.4 should provide functionality to NOT toggle the nav when tapping thumbnails for the built in Muse slideshows.

Let me know how it works for you!

GitHub - asheabbott/aem-mobile-gestures-api-for-muse: This Muse Configurable Options Widget (mucow) ...

Avatar

Level 2

And it works – again another step forward !

I'm very carefully conducting the project at hand to stay clear of any non-standard widgets or nested interactions. But a slideshow should be the least of features to work correctly. So now we're both waiting to discover what's the next culprit to tackle ?

Avatar

Level 4

This .mucow is working great for me, except when the article is viewed on the iPhone. The same article works perfect on the iPad and Android, but when viewed on an iPhone 6, the AEM Mobile "chrome" can only be displayed with a "long tap" on the screen. Weird. FWIW, this is a dual-orientation app on the iPhone. Perhaps that has something to do with it? I guess I'm just checking to see if anyone has this working successfully on iPhone dual orientation apps?

Avatar

Level 3

That's interesting, Keith! Thanks for letting me know. We haven't as yet created any dual orientation AEMM projects using Muse, so I haven't had the opportunity to examine that setup. I'll be quite interested in hearing about experiences or insight anyone has with this, as well.

Avatar

Level 4

FWIW, I was never able to get version 1.4 or 1.3 to work with content on an iPhone. Worked great with the same HTML article on an iPad. I tried all kinds of sneaky things to see if I could get it to work, but never figured it out. I ended up using version 1.2, and that worked for the project at hand.

Avatar

Level 3

Thanks for the info, Keith! Was that specifically with the dual orientation setup? Did 1.2 work for the dual orientation?

Avatar

Level 4

Ashe, 1.2 worked for the iPhone dual orientation app.

I did some testing with 1.4 in a simple, fresh file with 2 breakpoints with just a single orientation test app also, and couldn't get it to work there either. Did all my testing on an iPhone 6 in case that matters.

Avatar

Level 3

Thanks so much, guys! I'll play around with it.

Avatar

Level 3

I just tested 1.4 on an iPhone 5S and an iPhone 6 and it's working fine for me on both of them. This is just in the AEMM Preflight app, though. Was there any difference for you in the functionality of it on the preflight app vs a non-preflight app?

If anyone is interested, I can send you the Muse file I've been using to test things, and you can see if it'll work for you, to help troubleshoot the implementation, in case that's the issue.

We're about to use 1.4 for a project, so that will allow me to get broader testing in a bunch of different article setups, so hopefully if there is an issue I'm currently unable to replicate, we'll discover it in the next few weeks.

Thanks again for keeping me posted on these issues!

Avatar

Level 1

I won't have time to mess with it until next week, but I would appreciate the opportuntiy to do so.

I was testing in an app that we built for testing, I have not tried it in Preflight. I am also using an iPhone 6 iOS 9.3.5.

Thanks a million!

Rachel

Avatar

Level 1

Keith, you have restored my sanity. I am having the exact same problem, although we are not dealing with dual orientation, only vertical. Due to pressing deadlines I gave up and just did the layout in InDesign. Not good for the company Muse evangalist!

Avatar

Level 3

Good to know, Rachel, thanks! I'll look into this issue more when I have some time and see if I can replicate the problem.

Avatar

Level 3

I was finally able to reproduce the issue you guys were having with iPhone functionality, since our aforementioned project provided me with a broader scope of testing. I think I've figured out the issue, and hopefully resolved it with v1.5, which is on GitHub now. If you get a chance to try it out, please let me know if it resolves your issue. Thanks!

GitHub - asheabbott/aem-mobile-gestures-api-for-muse: This Muse Configurable Options Widget (mucow) ...

Avatar

Level 4

Peter, I tested this last week, and had a similar experience. It didn't work at first, and I even verified that the AEMM code was preset in the Muse-generated HTML. BUT...then it all of a sudden began working, and has worked ever since! Unfortunately, I was changing so many things at once, that I'm not sure what the trigger that made it work was.

However, one (stupid) mistake I made is that I was mistakenly still using the old DPS-era HTML Article packager, instead of the new AEMMobilePackager.app. Both seem to do exactly the same thing, and the old packager produces valid packages that can be consumed by AEM. But, it may have been after I began packaging with the AEM Mobile Packager that things began working.