penguin/AstroJS

botanjs/src/Astro/Blog/Components/Bubble.js

raw · 3068 bytes

(function(){
	var ns = __namespace( "Astro.Blog.Components" );

	/** @type {System.Cycle} */
	var Cycle                            = __import( "System.Cycle" );
	/** @type {System.utils.EventKey} */
	var EventKey                         = __import( "System.utils.EventKey" );
	/** @type {typeof Dandelion} */
	var Dand                             = __import( "Dandelion" );
	/** @type {function(...?): Dandelion.IDOMElement} */
	var IDOMElement                      = __import( "Dandelion.IDOMElement" );

	var Bubble = function () {
		this.stage = null;
		this.bubble = null;

		//// default is somewhat purple
		this.bgColor = "#662D91";

		this.blowInner = function ()
		{
			var b_style = this.bubble.style
				, s_style = this.stage.style;

			b_style.margin = "10px 10px";
			b_style.width = "150px";
			b_style.height = "150px";

			s_style.width = "170px";
			s_style.height = "170px";
			s_style.bottom = "20px";
			s_style.right = "20px";
		};

		this.blowOuter = function ()
		{
			var b_style = this.bubble.style
				, s_style = this.stage.style;

			b_style.margin = "100px 100px";

			s_style.width = "200px";
			s_style.height = "200px";
			s_style.bottom = "10px";
			s_style.right = "10px";

			Cycle.delay( this.blowInner.bind(this), 250 );
		};

		this.Void = function ()
		{
			this.stage.style.display = "none";
		};

		// Set Bindings
		this.init = this.init.bind(this);
		this.blurp = this.blurp.bind(this);
		this.pop = this.pop.bind(this);
		this.setColor = this.setColor.bind(this);
	};

	var wrapc = function( aClass )
	{
		return Dand.wrapc( "comp " + aClass );
	};

	Bubble.prototype.init = function ()
	{
		this.stage = wrapc( "bubble" );
		this.bubble = wrapc( "innerBubble" );

		var b_style = this.bubble.style
			, s_style = this.stage.style;


		b_style.margin = "85px 85px";
		b_style.width = "0px";
		b_style.height = "0px";
		b_style.background = this.bgColor;
		b_style.overflow = "hidden";

		this.bubble.appendChild(
			this.message = wrapc( "bInner flsf" )
		);

		this.stage.appendChild(this.bubble);

		s_style.display = "none";
		s_style.width = "10px";
		s_style.height = "10px";
		s_style.bottom = "85px";
		s_style.right = "85px";


		// onClick handle to prevent persistent bubble
		IDOMElement( this.stage ).addEventListener( new EventKey( "Click", this.blurp ) );
		return this.stage;
	};

	Bubble.prototype.setColor = function (color)
	{
		this.bubble.style.background = color;
	};

	Bubble.prototype.blurp = function ()
	{
		var b_style = this.bubble.style
			, s_style = this.stage.style;

		b_style.margin = "0 0";
		b_style.width = "0px";
		b_style.height = "0px";
		b_style.overflow = "hidden";


		s_style.position = "fixed";
		s_style.width = "10px";
		s_style.height = "10px";
		s_style.bottom = "85px";
		s_style.right = "85px";

		Cycle.delay( this.Void.bind(this), 250 );
	};

	Bubble.prototype.pop = function (message)
	{
		this.message.innerHTML = message;
		this.stage.style.display = "block";
		Cycle.delay( this.blowOuter.bind(this), 100 );
	};

	ns[ NS_EXPORT ]( EX_CLASS, "Bubble", Bubble );
})();