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 2

Helpful ??

My dear, you just saved a whole project !

And Adobe's reputation...

THANK YOU !

Avatar

Level 4

Very helpful. Can't wait to try it! This has been on my "to-do" list for a long time to figure this out, but now I don't have to. I know many people that will find this very useful. Thanks for sharing!

Avatar

Level 2

Awesome! Look forward to trying it out. You folks at Bates are really on the ball!

Avatar

Level 3

Thanks, guys! Very happy to help.

Avatar

Level 2

Thanks so much for this. Do you know if this, or something like this will work with articles that are created in AEM? We are having the same issue with those. I tested your script using a Muse article like you described and it worked.

Avatar

Level 3

I'm afraid I don't know, as we don't do much in AEM proper. If there's a way to add JS in the AEM interface, in theory you could paste in the relevant code from the .mucow file (the code between the opening

<bodyEndHTML>

<![CDATA[

and closing

]]>

</bodyEndHTML>

tags) and it should work.

But, again, that's totally untested. I just think that, since all this is doing is putting the JS into the index.html file (before the closing </body> tag), if you could copy and paste the relevant code into an "insert JS" box or something, it might work.

Avatar

Level 1

Thank you for finding and posting! Without it, designing in Muse was not going to be a viable option. VERY helpful.

Avatar

Level 3

Hey guys!

Just released v1.2, which has reworked code to trigger navigation toggle on everything except "a" links and "a span" links. We found that with the previous version, if we clicked a link in the article, which opens the in-app browser, it would toggle the nav and cover the "Done" button within the in-app browser. This should fix that issue.

Still located in the same place, just look for the .mucow file that ends in 1.2.

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

Avatar

Level 2

After a holiday and some other jobs, I finally had the chance of testing this solution in the project at hand. But I'm sorry to say that it doesn't seem to work - yet.

I placed the MuCow (1.2) file in the Master page, moved the little [ < > ] element somewhere at the top of the canvas, saved the Muse file and exported the HTML folder, processes the folder through the AEM Mobile Packager, and added it to an AEM project. But when viewed in the Previewer app on my iPad, the screen still won't reveal the navigation when I touch any part of the page.

I guess I must be forgetting something or doing something wrong...

Avatar

Level 3

So strange! It's entirely conceivable that it won't work with every kind of Muse project, as the different widgets and things can interact, but I haven't run into any trouble yet myself.

For troubleshooting purposes, I would recommend the following tests, in whatever order you deem most efficient:

  • Make sure your AEMM article is actually updating. If it's a new article, that won't be the issue, but if you're just updating the article file in an existing article, it sometimes doesn't actually update properly, and you can force it to push the change by adding or removing something from a collection, or reorganizing things, and preflighting again.
  • Unzip your .article file, then open index.html of your article in a browser, view the source code, and then search for "aemm" to make sure the code is actually in there and converting properly. The code is commented with <!-- AEMM Gesture API --> for ease in locating it.
  • Open index.html of your exported Muse project in a browser, view the source code, and then search for "aemm" to make sure the code is actually in there and exporting properly.
  • If it's in there, but still not working, try the process with a new, blank or very simple (just text and images) Muse file. If the Muse file is new and empty, and the tap to toggle nav functionality works, that likely means something in your original file is conflicting with the script.

There are probably other things you can check, but that should get you started, and hopefully you'll discover the issue along the way.

Avatar

Level 2

I tested it with a fairly simple existing page and a brand new page (Muse 2015.2), with just two colored rectangles as a header and footer and a few paragraphs of plain text in between. Note: both pages have been set up to be "fluid" ! Both pages refuse to display the app navigation. To be sure, I also tested a non-fluid version of another freshly build simple page, but again, in vain.

I checked to see if the custom script was still present in all pages, and it was. It wasn't commented with <-- AEMM something, but contained the introduction code below:

The rest of the code seemed pretty much to have something to do with setting gesture sensitivity for iOS devices.

I had no other widgets in use and I see no other unusual script code resident or referenced in the page.

Could you send me one of your working article files (being created with Muse and your MuCow) to test and hopefully rule out some possible causes ? peter@studea.nl

Avatar

Level 3

Ohhh, yes. I had forgotten I had changed the way it was commented, so // AEMM Gesture API is correct.

I believe I've discovered the problem. The code I wrote targets the .breakpoint class, but that doesn't exist without adding at least one additional breakpoint. If the Muse project is purely fluid, without additional breakpoints, that class doesn't exist for the code to find, and therefore it does nothing.

In my original version, I targeted the body tag, but a Muse update broke that for us, so I changed how I was doing it.

Stay tuned for an update while I figure out a better element to target.

Avatar

Level 4

Yes, I think you nailed it, because in my first tests, I didn't have any additional breakpoints. Once I added breakpoints is when it started working.

Avatar

Level 3

Okay, my friends! Let's try version 1.3. It should (fingers crossed) work with or without breakpoints. I also reworked the code in a way I like better, so hopefully that didn't mess anything up.

It is working successfully in my tests.

Let me know how it goes!

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

Avatar

Level 2

Sounds like a plausible cause and fix.

I'll give it a try, when I get my hands on my Mac...

Thanks in advance - I'll keep you posted.

Avatar

Level 2

Houston, we lost the problem...

The navigation appears and reappears nicely when the screen is ticked anywhere.

We'll be testing more complex pages the next days, so I hope this version holds up.

Thanks for your very swift and adequate help, again !

I'm going to push some corporate Adobe buttons, to implement it into the packager

or offer some other structural solution "at the source". After all, it's their software.

And I'll be crediting you all the way !!

Avatar

Level 3

So glad it's working for you! Keep me posted.

And that would be awesome, thanks!

Avatar

Level 2

I noticed your MuCow now made it into an official Adobe AEM Help page !

So it might be considered as the officially advised and endorsed procedure.

I hope updates will follow swiftly, if new versions require certain adaptations.