134 lines
3.0 KiB
JavaScript
134 lines
3.0 KiB
JavaScript
(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 {Dandelion} */
|
|
var Dand = __import( "Dandelion" );
|
|
/** @type {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, elem )
|
|
{
|
|
return Dand.wrapc( "comp " + aClass, elem );
|
|
};
|
|
|
|
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 );
|
|
})();
|