Turning the menu proxy into an accordion menu

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

The project I posted last year works for me. Is yours set up like this?
Dave Lee wrote:There's an example project here for smartmenus:
www.ukauthor.esy.es/SmartmenusMenuProxy/SmartmenusMenuProxy.flprjzip

It has two targets:
* Smartmenus accordion: Displays the TOC as an accordion in your topics.
* Smartmenus reponsive: Displays the TOC as a top menu on large screens, and as an accordion on small screens (toggled via the menu link at the top).

The accordion will also expand to show the selected topic.
vsunder
Jr. Propeller Head
Posts: 7
Joined: Wed Aug 13, 2014 4:18 pm
Location: Sydney, Australia

Re: Turning the menu proxy into an accordion menu

Post by vsunder »

Hello Dave,

I don't have access to your web site at work. The URL is blocked. The only difference from your earlier post with details of changes to the Master Page and details of the initialise.js is that I have downloaded SmartMenus version 1.0.1 whereas yours is Beta.

I'm experiencing some bizarre behaviour here. After several attempts to rectify the TOC depth, I ended up the TOC displaying only a single level, as opposed to the three it was displaying earlier.

Still at it. Hope we're able to identify why this is happening. Fingers crossed!

Thanks.
Daniel Lemke
Propeller Head
Posts: 42
Joined: Tue Jan 21, 2014 11:55 am

Re: Turning the menu proxy into an accordion menu

Post by Daniel Lemke »

Dave, this is fantastic! Thanks for posting it. I got the main part working and now just need to get in and fix the styles to match ours.

Everyone, I've entered an enhancement request with MadCap to add a horizontal menu proxy (#83849). If you think this would benefit you, please let them know to add your company to the list of folks who want this implemented.
Dan Lemke of Thomson Reuters
Image
aspruck
Jr. Propeller Head
Posts: 8
Joined: Thu Jul 07, 2016 7:47 am

Re: Turning the menu proxy into an accordion menu

Post by aspruck »

Which guide did you follow? I tried using straygoat's guide to the T and I was using it in an internal environment that unfortunately had an out of date browser. When I tested it in production, it stopped working.
Daniel Lemke
Propeller Head
Posts: 42
Joined: Tue Jan 21, 2014 11:55 am

Re: Turning the menu proxy into an accordion menu

Post by Daniel Lemke »

aspruck wrote:Which guide did you follow? I tried using straygoat's guide to the T and I was using it in an internal environment that unfortunately had an out of date browser. When I tested it in production, it stopped working.
Whatever I had working was based on this: viewtopic.php?f=9&t=21607#p110108
However, 2017r2 broke what I had and I ended up having to abandon it because of a combination of it not working and our UX team preferring a vertical menu.
Dan Lemke of Thomson Reuters
Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

Flare 2017r2 will break any of the menu customisation mentioned in this thread that uses scripts.

The menu proxy in 2017r2 is different because MadCap's scripts now dynamically generate the menu content at run time, so this (and other scripts) tend to fail because they are running too early, before MadCap's scripts have generated the menu content. So any customisation script like this would need to run after MadCap's scripts have finished, but the problem is that nobody has found (or at least not shared) a solution of how to detect when MadCap's scripts have finished.
KayJay
Propeller Head
Posts: 23
Joined: Tue Nov 29, 2016 7:19 am

Re: Turning the menu proxy into an accordion menu

Post by KayJay »

Hi all,

I've been hacking my way past this "Flare 2017 r2 breaks javascript" problem all week.
My (so far working but very hacky) solution that should hopefully inspire someone to improve it is:

Code: Select all

var runtimes = 0;
var interval = setInterval(function(){
	runtimes += 1;
	// try your thing here, but don't cause an error if it fails or runs multiple times

	// if there is a ul.mc-component.nocontent on the page
       var ex = $('ul.menu.mc-component.nocontent').length > 0;
       //said menu component exists and has children and there are no placeholder items (on dynamic TOCs)
	var popl = $('ul.menu.mc-component.nocontent').children(':not(.placeholder)').length > 0 	&& $('li.placeholder').length == 0;
       // script has run too long already or it is not the case that dymanic menus exist but are not populated
	if (runtimes >= 10 || (document.readyState == 'complete' && !(ex && !popl) && runtimes > 2 )){
		clearInterval(interval);
	}
}, 700);
This repeats the code every 700ms, and keeps running until either the script has run ten times (because if MadCap's JS hasn't finished after 7 seconds, then I have no idea what's gone wrong), OR checks that there are no yet-unpopulated dynamic items, making sure this runs twice so they are all at least somewhat loaded first.

Alternatively, you can create a class in your Skin file and add that as a "Style class" to TOC items, so you could go down a different route and check whether one TOC item in particular has so far been rendered. (Perhaps it's a bug but) this only works for me on the lowest-level of a TOC (classes on li.has-children are not passed through, so don't use a top-level topic for this).

It would be great if someone would help improve this, but it's a start!

Best,
Kristy
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

Great - any suggestions are helpful.

I spent a little time looking at this, and "MutationObserver" looked quite promising, since it detects changes in the HTML (DOM).
I got close to getting it working, I could easily detect the HTML changes in the menu occurring, I just wasn't sure how to detect when the MadCap scripts had finished making those changes (i.e. when to start my own script).
Perhaps just a simple delay might have worked.

But at that point I realised I could just use CSS to fix my menus without needing any JS, so I didn't take it any further.

Anyway, if you Google for something like "mutationobserver dom change", there there are good examples of how to detect HTML changes.
cwilkinson
Jr. Propeller Head
Posts: 2
Joined: Mon Oct 17, 2011 2:11 pm

Re: Turning the menu proxy into an accordion menu

Post by cwilkinson »

Hi Dave / Straygoat,

I followed the tutorial on setting up an accordion menu with Foundation, and it *almost* works - the 2 problems I have are:
(1) there are no icons to indicate open/closed accordions. Not sure why, but they don't appear at all.
(2) None of the parent topics will open their linked topics. They expand/close the sub-menu, but never open the topic at their location.

I noticed that Foundation 6.4.2 now includes an accordion drop-down menu plugin. I was wondering if you've had a chance to take a look at that, and if there might be a simpler way to implement it into Flare than the tutorial on Straygoat's blog series? (I am a novice with JavaScript, so I'm a little nervous about trying to customize it myself.)

FTR, I'm building my output with Flare 12 to avoid the JavaScript problems in 2017r2.

Thanks in advance,
Cindy
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Just noting that I added my name to the list of users who would like this feature to be implemented in Flare. Everyone here is expending a lot of time and energy on something that should be part of the product, so hopefully they're listening and coming up with a native solution. If you haven't already done so, be sure to pile on here: https://www.madcapsoftware.com/feedback ... quest.aspx
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

In Flare 2017r3 there's a solution to the problem of detecting when the menu proxy is ready (is populated with menu items).

See KB article: http://kb.madcapsoftware.com/Content/Mi ... _Menus.htm

MadCap have added a "loaded" jQuery event, so you can check for this before running your own script.

I've tried it and it appears to work, but I did have two observations:

1) The code needs to be run when the document is ready, e.g.:

Code: Select all

$(document).ready(function(){
   $(".menu").on("loaded", function () { 
   [YOUR CUSTOM JAVASCRIPT]
   });
};
2) If you use the selector ".menu", then the code will fire at least twice, because the slide-on 'hamburger' menu also has a ".menu" class, in addition to the menu proxy.
So you'd probably want to make the selector more specific, so it only selects the menu proxy.

For example, I used the following script to detect when the menu proxy, top menu, and off-canvas menu were ready:

Code: Select all

$(document).ready(function(){
       
        $(".menu.mc-component").on("loaded", function () {
            console.log("menu proxy ready!");
        });
       
        $("ul.navigation").on("loaded", function () {
            console.log("top menu ready!");
        });
       
        $(".menu.off-canvas-list").on("loaded", function () {
            console.log("off canvas menu ready!");
        });
});
It appears that "loaded" can be used like this for the other types of menu - although it's not documented.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

Dave Lee wrote:It appears that "loaded" can be used like this for the other types of menu - although it's not documented.
MadCap have confirmed that the "loaded" event works for the other menus that are populated - the top navigation drop down menu (desktop), slide-on "hamburger" menu (for tablet and mobile), in addition to the menu proxy.

The cheeky scamps have also used my examples for their KB article ;o)
http://kb.madcapsoftware.com/Content/Mi ... _Menus.htm
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Thanks, Dave, for staying on top of this, and providing examples. I will be working on implementing this shortly (with thanks to Straygoat for his exhaustive blog posts) , and may come back here if I have questions.
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

So, I'm back.

I painstakingly worked my way through Straygoat's multi-part blog post (thanks so much for that huge effort, Straygoat!) only to discover that things weren't working as expected because I unthinkingly downloaded and installed the latest version of Foundation (6.4.2), and his write-up (and Dave Lee's script) is based on 6.2.1. It turns out that there are significant changes in the new version, not least of which is the use of the XY Grid.

After being sure I had done everything exactly as instructed in the tutorial and being completely flummoxed as to why the grid layout was simply not working, I asked one of our full stack developers to take a look, and he noticed that the Foundation CSS defined a .grid-x class instead of a .row class, so all those divs classed as 'row' with child divs classed with small/medium/large sizes were essentially being ignored. As soon as he classed the 'row' div with 'grid-x' in the Google inspector, the page magically fell into line.

So, I have two questions:
  1. Does anyone know what version of Foundation the latest version of Flare (2017r3) is using, and is it necessary or recommended to use the same version to make sure nothing else breaks?
  2. If the answer to the previous question is that it doesn't matter, is there any reason not to move to the latest version of Foundation (on the basis of keeping current) assuming I can get everything working in my new layout/menu?
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

One other thing I discovered, which happens even in the sample project that Straygoat has available to download from his blog post, is that the menu entries that are books only function to expand/collapse the submenus beneath them and don't display the topic to which they are linked. If you don't include a non-book entry for that topic, there is no way to bring it up from the menu.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

Rona Kwestel wrote:So, I have two questions:
  1. Does anyone know what version of Foundation the latest version of Flare (2017r3) is using, and is it necessary or recommended to use the same version to make sure nothing else breaks?
  2. If the answer to the previous question is that it doesn't matter, is there any reason not to move to the latest version of Foundation (on the basis of keeping current) assuming I can get everything working in my new layout/menu?
1. Flare 2017r2 has a file foundation.6.2.3_custom.js. I can't use 2017r3, so I don't know if that's different. You can find that out by building a target that includes a skin, and checking the Output\Resources\Scripts folder.

2. It doesn't matter, since the idea is that you're not using MadCap's custom version of Foundation, and including the full version of Foundation yourself. MadCap's custom Foundation version is only included if you use a skin, and we're not using a skin (or at least that's how it worked in 2015 when I posted about this). So it's up to you what version of Foundation you want to use, and what features you want to use from it. The same principles apply from SG's post - find the Foundation control you want to use, see how that's formatted, and use a script to modify the HTML code for the menu proxy accordingly.
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Thanks so much, Dave! That's exactly what I needed to understand. I've got more learning to do about Foundation, but you and Straygoat have given the foundation. ; - )
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

For the record, 2017r3 is still using Foundation 6.2.3.

And regarding the book level menu entries being able to both display their associated topic and toggle the menu, I found that I needed to add the data-submenu-toggle attribute to the foundation-menu-off-canvas-initialization.js (yes, I Americanized the spelling of initialization :P) script:

Code: Select all

$("#nav-accordion>ul").addClass("menu vertical").attr("data-accordion-menu", "").attr("data-multi-open", "true")].attr("data-submenu-toggle", "true");
		/* Set Foundation styles for accordion menu (the top level ul) - add attributes data-accordion-menu="" and data-multi-open="true" */
This displays the little arrow buttons, whose click function toggles the menu, while clicking on the menu text displays the topic.

One ugly thing is that when I click on a menu entry, it loads the new page contents, then draws the script-processed menu on the left, pushing the page contents to the right. It takes long enough that you see this happen and it looks very unpolished. I'll check with our developer if there is a way to minimize that effect and report back if I find a solution.
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

@cwilkinson (trying to tag someone doesn't seem to work, or am I doing it wrong?), I just noticed your earlier post about the same two issues I was having - the lack of accordion menu toggle buttons, and the inability to display the linked topic on a book-level menu entry. My post prior to this one had a solution - simply add .attr("data-submenu-toggle", "true") to the $("#nav-accordion > ul").addclass line in the script. So it should appear as follows:

Code: Select all

$("#nav-accordion > ul").addClass("menu vertical").attr("data-accordion-menu", "").attr("data-multi-open", "true").attr("data-submenu-toggle", "true");
Meanwhile, the performance lag of drawing the menus is really significant. When you click on a link to display a new page, you see the page contents occupy all the space, then a second or two later, the menu draws itself and the rest of the page shifts over to the right. Is anyone else seeing this?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

Rona Kwestel wrote:Meanwhile, the performance lag of drawing the menus is really significant. When you click on a link to display a new page, you see the page contents occupy all the space, then a second or two later, the menu draws itself and the rest of the page shifts over to the right. Is anyone else seeing this?
The script can take a short while to add the links to the menu proxy.
That means the menu proxy doesn't initially contain any content, so it has zero size and doesn't occupy any space.

At a guess, I think your problem is that you float the the menu proxy to the left of the rest of the page. The menu proxy initially has zero size, and then when it's populated it will expand and shift the rest of the page to the right. So maybe modify your CSS to set a size for the menu proxy container, so it isn't zero size.
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Thanks, Dave. I'm not sure I'm following you, but I tried adding both width and min-width properties to the #nav-accordion id in my CSS, and I didn't notice any difference.

Part of the problem may also stem from the way we're serving the pages, at least in our test environment. They're in an S3 bucket, and the EC2 server mounts the bucket to the local file system, and something about that arrangement makes the pages load slowly altogether, which exacerbates any visual lag issues. I'll have to talk to the dev team about how we have this set up and see if there's a better solution.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

Rona Kwestel wrote:Thanks, Dave. I'm not sure I'm following you, but I tried adding both width and min-width properties to the #nav-accordion id in my CSS, and I didn't notice any difference.
Ok, but how are you positioning this on the page? - using float, a foundation grid, something else?
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Using a Foundation grid, specifically, grid-x. Here's the master page code.

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="10" MadCap:lastHeight="608" MadCap:lastWidth="1175">
    <head>
        <link href="../Foundation/css/foundation.css" rel="stylesheet" type="text/css" />
        <!--<link href="../Foundation-icons/foundation-icons.css" rel="stylesheet" type="text/css" />-->
        <link href="../Stylesheets/OurStyleSheet.css" rel="stylesheet" type="text/css" />
	</head>
    <body>
        <div class="off-canvas-wrapper">
			<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper="">
				<div class="title-bar hide-for-medium">
					<div class="title-bar-left">
						<button class="menu-icon" type="button" data-open="offCanvasLeft">
						</button><span class="title-bar-title">Menu</span>
					</div>
				</div>
				<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas="">
					<div id="nav-drilldown">
					</div>
				</div>
				<div class="off-canvas-content" data-off-canvas-content="">
					<section id="page-content">
						<div class="row" id="header-area">
							<div id="header-title">
								<img src="../Images/Skin/logo.png" />
							</div>
							<div id="header-search">
								<MadCap:searchBarProxy />
							</div>
						</div>
						<div class="grid-x">
							<div class="show-for-medium medium-4 large-3 columns" id="nav-accordion">
								<MadCap:menuProxy data-mc-skin="/Project/Skins/Menu.flskn" mc-linked-toc="/Project/TOCs/OurTOC.fltoc" style="mc-toc-depth: -1;mc-context-sensitive: False;" />
							</div>
							<div class="small-12 medium-8 large-9 columns content" id="topic-content">
								<MadCap:topicToolbarProxy />
								<!--<MadCap:breadcrumbsProxy />-->
								<MadCap:bodyProxy />
							</div>
						</div>
						<div class="grid-x" id="footer-area">
							<div class="small-12 medium-4 large-4 columns centerText"><MadCap:variable name="OurCompany.CopyrightNotice" />
							</div>
							<div class="small-12 medium-4 large-4 columns centerText"><MadCap:variable name="OurCompany.Confidential" />
							</div>
							<div class="small-12 medium-4 large-4 columns right centerText"><a class="footer" href="https://ourcompany.com" target="_blank">ourcompany.com</a>
							</div>
						</div>
					</section>
				</div>
			</div>
		</div>
        <script type="text/javascript" src="../Foundation/js/vendor/what-input.js"></script>
        <script type="text/javascript" src="../Foundation/js/vendor/foundation.js"></script>
        <script type="text/javascript" src="../Scripts/foundation-menu-off-canvas-initialization.js"></script>
    </body>
</html>
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

Rona Kwestel wrote:Using a Foundation grid, specifically, grid-x. Here's the master page code.
Ok - that's important to know.

Have you tested this to check whether or not the delay is related to the Foundation code?

For example, you could build and publish a version of your project that doesn't include the menu proxy, and just includes some placeholder text instead. If the drawing lag is still a problem, then you know it's the Foundation code and not the menu proxy.
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Well that's interesting. If I comment out the menuProxy and add just a <p> element inside that div, it doesn't show up at all; the bodyProxy content just takes the entire 12 columns.

Code: Select all

<div class="grid-x">
    <div class="show-for-medium medium-4 large-3 columns" id="nav-accordion">
        <!--<MadCap:menuProxy data-mc-skin="/Project/Skins/Menu.flskn" mc-linked-toc="/Project/TOCs/OurTOC.fltoc" style="mc-toc-depth: -1;mc-context-sensitive: False;" />-->
        <p>This is where the accordion menu would go.</p>
    </div>
    <div class="small-12 medium-8 large-9 columns content" id="topic-content">
        <MadCap:topicToolbarProxy />
        <!--<MadCap:breadcrumbsProxy />-->
        <MadCap:bodyProxy />
    </div>
</div>
I even tried commenting out the call to the script that adds the various classes that Foundation needs to treat the menu as an accordion, and it made no difference. Then I thought maybe it just needed the one line that initializes Foundation on the whole document, so I put in a test script with just that one line, and still no difference.

Code: Select all

$(document).foundation();
Maybe I need to watch some Foundation videos. : - |
Post Reply