Form's Toggle show/hide UX

medhi

I've been thinking about forms' toggle UX. Its show/hide behavior is little bit confusing, because it's very easy to miss the showing or hiding part of a form. I would prefer a more UX-friendly effect, like sliding. Goal is to make the user notice, that something was hidden or shown.

What do you think?

David Grudl

I prefer sliding too. It can be created using CSS3 transitions.

Jan Tvrdík

Or you can set Nette.toggle to custom function which can do whatever you prefer.

David Grudl

CSS3 transitions requires own Nette.toggle too. Toggling property display should be changed to toggling class.

David Grudl

What about enhance native Nette.toggle with class names toggling? It can be enabled via:

$form->elementPrototype->attrs['data-nette-toggle-class'] = TRUE;

and styled:

form.toggleName-on input {
	opacity: 0;
}

form.toggleName-off input {
	opacity: 1;
	transition: opacity 2s;
}

Nette.toggle = function(id, visible, form) {
	if (form.getAttribute('data-nette-toggle-class') !== null) {
		form.className = form.className.replace(new RegExp('\\s*\\b' + id + '-o(n|ff)\\b', 'g'), '') + ' ' + id + (visible ? '-on' : '-off');
	} else if (elem = document.getElementById(id)) {
		var elem;
		elem.style.display = visible ? '' : 'none';
	}
};

Jan Tvrdík

That seems useful, I'm just not sure if it is wise to base the class name on id.

medhi

Are we talking about something, which will be integrated into the framework or I have to set this on my own? Because I don't understand it :)

Jan Tvrdík

@medhi: For now you need to implement different toggle behavior on you own. @David is suggesting that it may be useful to implement support for class toggling directly in the framework.