in partnership with mediatemple

Ticket #428 (closed defect: invalid)

Opened 9 months ago

Last modified 2 days ago

opacity-only Accordion (alwaysHide type, toggler) does not complete execution

Reported by: weaver Owned by:
Type: defect Priority: major
Milestone: Component: Core
Keywords: accordion, opacity Cc:

Description

This is with the public release of mootools v1.11 (I did not check this with any dev builds)

Using a standard instance of an Accordion, in the 'toggler' flavor, and just allowing 'opacity', Accordion does not function correctly. User-defined functions, if present, such as onActive, etc... do not fire and actually do not complete. So I could not even develop a workaround function as the triggers are not fired when clicked or a transition is finished.

var accordion = new Accordion('h3.atStart', 'div.atStart', {
	opacity: false,
	height: false,
	alwaysHide: true
});

Original conditional in 'display' method (highlighting comments added)

display: function(index){
		index = ($type(index) == 'element') ? this.elements.indexOf(index) : index;
		if ((this.timer && this.options.wait) || (index === this.previous && !this.options.alwaysHide)) return this;
		this.previous = index;
		var obj = {};
		this.elements.each(function(el, i){
			obj[i] = {};
			
			//xcxcxcxcxcxcxcx
			var hide = (i != index) || (this.options.alwaysHide && (el.offsetHeight > 0));
			//xcxcxcxcxcxcxcx
			
			this.fireEvent(hide ? 'onBackground' : 'onActive', [this.togglers[i], el]);
			for (var fx in this.effects) obj[i][fx] = hide ? 0 : el[this.effects[fx]];
		}, this);
		return this.start(obj);
	},

I think that the conditional below works better and allows for opacity only 'toggle':

var hide = (i != index) || (this.options.alwaysHide && ((el.offsetHeight > 0 && this.options.height) || (el.style.opacity > 0 && this.options.opacity)));

changes - pseudo-code: '(am I concerned with height, AND is it too big?) OR (am I concerned with opacity AND is it visible)' either/or is sufficient to trigger the hiding action.

I believe this possibility needs to be accounted for, as it is not a 'cosmetic' issue that the effect just does not work. The script is actually not completing execution.

Kudos on the library, keep it up. I hope this is not a duplication and is useful.
Thanks

Change History

Changed 8 months ago by tomocchino

  • milestone set to Mootools version 1.3

Changed 2 days ago by tomocchino

  • status changed from new to closed
  • resolution set to invalid
  • component set to Core

the accordion was actually never meant to function without the height transitions (hence, the accordion name). perhaps after the 1.2 release we will add a tabbed container plugin which does what you describe, since the accordion depends on offsetHeight / offsetWidth.

Note: See TracTickets for help on using tickets.