Animated Popup Control

edited March 2012 in Enyo 2
Currently the Popup control displays a show/hide hard-transition behavior. I tend to like animations a bit better, so I took a page from @MaKleSoft & his animated toggle buttons ( http://forums.enyojs.com/discussion/comment/1065 ), and modified the Popup controls so that they fade in/out smoothly.

Demo: http://www.variablelimit.com/enyo/lib/onyx/examples/Samples/popup.html

By default, the Popup control has a display block/none property, which can't be animated. Since I don't want to edit the actual control itself (and we don't need to) we need to set the opacity to 0 when the popup gets displayed & let CSS take care of the animation. Then when we fade out, we set a transitionEnd listener that lets us know when the transition ends. Once it ends, we set the display to none - retaining the way the actual Popup control works.

This works as expected in everything except IE9 and lower, in which case it just retains the default hard show/hide behavior.

To try it out, open up the popup.html file located in "onyx/examples/Samples/" and change it to look like this:

<!doctype html>


	onyx popup sample
	
	
	


	.big {
		font-size: 30px;
		padding: 10px;
	}
	.onyx-popup {
		opacity: 0;
		-webkit-transition: opacity 0.2s linear;
	    -moz-transition: opacity 0.2s linear;
	    -o-transition: opacity 0.2s linear;
	    -ms-transition: opacity 0.2s linear;
	}


	
		new (enyo.kind({
			name: "App",
			kind: "Control",
			classes: "onyx enyo-fit",
			components: [
				{classes: "onyx-toolbar-inline", components: [
					{kind: "onyx.Button", content: "Popup...", ontap: "showPopup", popup: "popup"},
					{name: "popup", kind: "onyx.Popup", centered: true, floating: true, classes: "big", content: "Popup...", onHide: "hidePopup"},
					
					{kind: "onyx.Button", content: "Modal Popup...", ontap: "showPopup", popup: "modalPopup"},
					{name: "modalPopup", kind: "onyx.Popup", centered: true, modal: true, floating: true, classes: "big", content: "Modal Popup...", onHide: "hidePopup"}
				]}
			],
			showPopup: function(inSender) {
				var p = this.$[inSender.popup];
				if (p) {
					p.show();
				}
				p.applyStyle("opacity", 1);
				
				var transitionEvent = this.whichTransitionEvent();
				
				if (transitionEvent !== undefined) {
					var listener = function( event ) {
						p.node.removeEventListener( transitionEvent, listener );
					}
					p.node.addEventListener( transitionEvent, listener );
				}
				
			},
			hidePopup: function(inSender) {
				
				var transitionEvent = this.whichTransitionEvent();
				
				if (transitionEvent !== undefined) {
					inSender.applyStyle("display", "block");
					inSender.applyStyle("opacity", 0);
					
					var listener = function( event ) {
						inSender.applyStyle("display", "none");
						inSender.node.removeEventListener( transitionEvent, listener );
					}
					inSender.node.addEventListener( transitionEvent, listener );
					
				}
			},
			whichTransitionEvent: function(){
			    var t;
			    var el = document.createElement('el');
			    var transitions = {
			      'transition':'transitionEnd',
			      'OTransition':'oTransitionEnd',
			      'MSTransition':'msTransitionEnd',
			      'MozTransition':'transitionend',
			      'WebkitTransition':'webkitTransitionEnd'
			    }
			
			    for(t in transitions){
			        if( el.style[t] !== undefined ){
			            return transitions[t];
			        }
			    }
			}
			
		}))().write();
	




All that changed:
1) We added some extra CSS properties for .onyx-popup
2) Added onHide events to our popups
3) Modified the showPopup function - fades in & displays the popup
4) Added the hidePopup function - fades out & hides the popup
5) Added whichTransitionEvent function - tells us what transitionEnd our browser supports

Comments

Sign In or Register to comment.