DIR : /home/kozerus/public_html/pn/uize/site-source/js/Uize/Widget/Fleeting.js

/home/kozerus/public_html/pn/uize/site-source/js/Uize/Widget

/*______________
|       ______  |   U I Z E    J A V A S C R I P T    F R A M E W O R K
|     /      /  |   ---------------------------------------------------
|    /    O /   |    MODULE : Uize.Widget.Fleeting Class
|   /    / /    |
|  /    / /  /| |    ONLINE : http://www.uize.com
| /____/ /__/_| | COPYRIGHT : (c)2006-2016 UIZE
|           |__ |   LICENSE : Available under MIT License or GNU General Public License
|_______________|             http://www.uize.com/license.html
*/

/* Module Meta Data
	type: Class
	importance: 4
	codeCompleteness: 100
	docCompleteness: 2
*/

/*?
	Introduction
		The =Uize.Widget.Fleeting= class implements a fleeting message behavior with a configurable display lifespan and a JavaScript animation fade out effect.

		*DEVELOPERS:* `Jan Borgersen`, `Ben Ilegbodu`
*/

Uize.module ({
	name:'Uize.Widget.Fleeting',
	required:'Uize.Fade',
	builder:function (_superclass) {
		'use strict';

		var
			/*** Variables for Scruncher Optimization ***/
				_undefined
		;

		/*** Private Instance Methods ***/
			function _updateUiText (m) {
				m._text != _undefined && m.isWired && m.setNodeInnerHtml ('text',m._text);
				/*?
					DOM Nodes
						text DOM Node
							An optional node whose contents will be replaced with the value of the =text= state property, if this property's value is not =null= or =undefined=.

							The =innerHTML= value of the =text DOM Node= will be updated to reflect the value of the =text= state property whenever the value of this property is changed, is not =null= or =undefined=, and the instance is wired up.

							NOTES
							- this DOM node is optional
				*/
			}

		return _superclass.subclass ({
			alphastructor:function () {
				var m = this;

				/*** Private Instance Properties ***/
					m._lifeTimeout = null;
					m._showFade = Uize.Fade ({
						curve:Uize.Fade.celeration (0,1),
						duration:750
					});
					m._showFade.wire ({
						Start:function () {
							m._shown
								&& m.displayNode ('',m._shown)
							},
						'Changed.value':function () {
							m.setNodeOpacity ('', m._showFade)
							},
						Done:function () {
							!m._shown
								&& m.displayNode ('', m._shown)
							}
					});
			},

			instanceMethods:{
				show:function () {
					var m = this;

					if (m._lifeTimeout != null) {
						clearTimeout (m._timeout);
						m._timeout = null;
					}

					m.set ({_shown:true});
				},

				updateUi:function () {
					var m = this;

					if (m.isWired) {
						_updateUiText (m);
						_superclass.doMy (m,'updateUi');
					}
				},

				wireUi:function () {
					var m = this;
					if (!m.isWired) {
						var _rootNode = m._rootNode = m.getNode ();
						if (_rootNode) {
							/*** initialize text value if undefined ***/
								m._text == _undefined
									&& m.set ({_text:m.getNodeValue('text')})
								;

							/*** click to dismiss ***/
								m.wireNode('', 'click', function () {
									if (m._clickToDismiss)
										m.set({ _shown: false });
								});

							_superclass.doMy (m,'wireUi');
						}
					}
				}
			},

			stateProperties: {
				_clickToDismiss: {
					name: 'clickToDismiss',
					value: false
				},
				_maxOpacity:{
					name:'maxOpacity',
					value:1
				},
				_lifeSpan:{
					name:'lifeSpan',
					value:5000
				},
				_shown:{
					name:'shown',
					onChange:function () {
						var m = this;

						if (m.isWired) {
							m._shown
								&& m.fire ('Before Show');

						m._showFade.start ({
							startValue: m._shown ? 0 : m._maxOpacity,
								endValue:m._shown ? m._maxOpacity : 0
						});

							if (m._shown)
								m._lifeTimeout = setTimeout(
									function () { m.set({_shown:false}) },
									m._lifeSpan
								)
							;

							!m._shown
								&& m.fire('After Hide');
						}
					},
					value:false
				},
				_text:{
					name:'text',
					onChange:function () {_updateUiText (this)}
					/*?
						State Properties
							text
								A string, whose value will be used to set the value of the =innerHTML= property of the =text DOM Node=.

								The =innerHTML= value of the =text DOM Node= will be updated to reflect the value of the =text= state property whenever the value of this property is changed, is not =null= or =undefined=, and the instance is wired up.

								NOTES
								- the initial value is =undefined=
					*/
				}
			}
		});
	}
});