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!
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!
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.
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
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.
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.
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...
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:
There are probably other things you can check, but that should get you started, and hopefully you'll discover the issue along the way.
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 ? firstname.lastname@example.org
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.
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.
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!
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.
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 !!
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.