in partnership with mediatemple

Ticket #823 (new defect)

Opened 3 months ago

Last modified 3 weeks ago

Accordion addSection Method doesn't allow insertion into last position

Reported by: VirtuosiMedia Owned by:
Type: defect Priority: major
Milestone: Mootools version 1.2 Component: Plugins
Keywords: Accordion addSection Cc:

Description

The addSection Method for the Accordion class does not allow insertion of a new section into the last position of the array. In an array of 2 , [0, 1], either 0 or 1 may be passed as arguments to add a third section, but not 2. If no argument is passed, the new section defaults to the second to last position rather than the last. I was able to fix this in v1.11 by changing:

		if (len && (!test || pos)){
			pos = $pick(pos, len - 1);
			toggler.injectBefore(this.togglers[pos]);
			element.injectAfter(toggler);
		} else if (this.container && !test){
			toggler.inject(this.container);
			element.inject(this.container);
		}

to:

		if (len && (!test || pos)){
			pos = $pick(pos, len - 1);
			toggler.injectAfter(this.elements[pos]);
			element.injectAfter(toggler);
		} else if (this.container && !test){
			toggler.inject(this.container);
			element.inject(this.container);
		}

However, simply changing 'before' to 'after' in version 1.2b2 does not work. Here is an example of my code:

<script type="text/javascript">
window.addEvent('domready', function() {
	var menu = new Accordion('.toggle', '.element', {
		display: 1,
		fixedHeight: 300,
		alwaysHide: true,
		duration: 2500,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#CCC');
		},
	 
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#000');
		}
	  }
	);

	var thirdMenuToggler = new Element('div', {'class': 'toggle'}).setHTML('Menu 3');

	var thirdMenuElement = new Element('div', {'class': 'element'}).setHTML('<ul><li><a href=“#”>Link 6</a></li><li><a href=“#”>Link 7</a></li></ul>');

	menu.addSection(thirdMenuToggler, thirdMenuElement);
	
});
</script>
<div id="menu">
	<div class="toggle">Menu 1</div>
	<div class="element">
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
		</ul>
	</div>
	<div class="toggle">Menu 2</div>
	<div class="element">
		<ul>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>			
		</ul>
	</div>
</div>

Change History

Changed 3 weeks ago by knownwanderer

I changed the following to get it to work, but this probably isn't the best idea.

toggler.inject(this.togglers[pos].getNext(), 'after');
//toggler.inject(this.togglers[pos], 'before');
Note: See TracTickets for help on using tickets.