botanjs/src/Astro/Blog/Layout/MainFrame.js
raw ยท 8534 bytes
(function(){
var ns = __namespace( "Astro.Blog.Layout.MainFrame" );
/** @type {System.Cycle} */
var Cycle = __import( "System.Cycle" );
/** @type {System.Cycle.Trigger} */
var Trigger = __import( "System.Cycle.Trigger" );
/** @type {System.utils.IKey} */
var IKey = __import( "System.utils.IKey" );
/** @type {Dandelion} */
var Dand = __import( "Dandelion" );
/** @type {Dandelion.IDOMObject} */
var IDOMObject = __import( "Dandelion.IDOMObject" );
/** @type {Dandelion.IDOMElement} */
var IDOMElement = __import( "Dandelion.IDOMElement" );
/** @type {Dandelion.Window} */
var wsupp = __import( "Dandelion.Window" );
/** @type {System.Debug} */
var debug = __import( "System.Debug" );
/** @type {Astro.Bootstrap} */
var Bootstrap = __import( "Astro.Bootstrap" );
/** @type {Astro.Mechanism.CharacterCloud} */
var CharacterCloud = __import( "Astro.Mechanism.CharacterCloud" );
/** @type {Astro.Mechanism.Parallax} */
var Parallax = __import( "Astro.Mechanism.Parallax" );
// __import( "Dandelion.CSSReset" ); CSS_RESERVATION
// __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION
// __import( "Astro.Blog.Element.Layer" ); CSS_RESERVATION
/** @function {System.Net.getData} */
var getData = __import( "System.Net.getData" );
var main;
var header;
var main_h;
// menu and horizon
var horizon;
var contact;
var contaht_page;
var collapse_panel;
var c_expand = false;
var savedPath;
var init = function ()
{
// Footer at bottom
var padder = Dand.wrap();
var begin_wrapper = Dand.id( "begin-wrapper" );
var content_wrapper = Dand.id( "mbody" );
var footer = Dand.tag( "footer" );
var fhorizon = Dand.id( "fhorizon" );
if( footer.length )
{
footer = footer[0];
var fheight = footer.scrollHeight || footer.offsetHeight;
var hheight = fhorizon.scrollHeight || fhorizon.offsetHeight;
padder.style.height = ( fheight + hheight ) + "px";
begin_wrapper.style.marginBottom = "-" + fheight + "px";
}
content_wrapper.appendChild( padder );
IDOMObject( window ).addEventListener( "Resize", responsify );
initTopButton();
navControl();
responsify( null, true );
initBackgroundParallax();
};
var topButtons = [];
var initTopButton = function()
{
// init params
header = Dand.id( "header" );
horizon = Dand.id( "horizon" );
main = Dand.id( "mbody" );
contact_page = Dand.id( "contact" );
collapse_panel = Dand.id( "collapse_panel" );
horizon.style.backgroundColor
= fhorizon.style.backgroundColor
= "purple";
contact = Dand.id( "menu_cont", true );
contact.addEventListener( "Click", loadContactForm );
Dand.id( "menu", true ).foreach(
1, function( e )
{
topButtons.push( e );
if( e.getAttribute( "active" ) !== null )
{
e.setAttribute( "master", true );
}
}
);
};
var loadContactForm = function( e )
{
getData( "/ajax/get-snippet/ContactForm", function( data )
{
var data = JSON.parse( data );
var wrapper = IDOMElement( contact_page ).first( 1 );
if ( wrapper )
{
wrapper.innerHTML = data["mesg"];
Cycle.next( function()
{
expandContact( e );
wrapper.style.marginTop = .5 * ( 400 - wrapper.clientHeight ) + "px";
} );
}
} );
};
var navControl = function ()
{
// Page control
/** @type {Dandelion.IDOMElement} */
var page_control = Dand.id( "top_control", true );
var bottom_control = Dand.id( "bottom_control" );
if ( page_control && bottom_control )
{
var appendp = function( elem, self )
{
var clone = elem.cloneNode( true );
if( clone.className == "p_navigation" )
{
IDOMElement( clone ).reverseChild();
}
bottom_control.appendChild( clone );
return true;
};
page_control.last( document.ELEMENT_NODE, appendp );
page_control.first( document.ELEMENT_NODE, appendp );
}
};
/** @type {Dandelion.IDOMElement} */
var rspd_ratio = 0;
var responsify = function( e, override )
{
// Ratio changes would trigger content
var ratio = wsupp.clientWidth / wsupp.clientHeight;
// Swap only on ration changes from 1 < x OR x < 1
if( ( ratio < 1 && 1 < rspd_ratio ) || ( 1 < ratio && rspd_ratio < 1 ) || override )
{
rspd_ratio = ratio;
debug.Info( "Responsive Event: R = " + ratio );
BotanJS.dispatchEvent( new BotanEvent( "Responsive", { "ratio": ratio } ) );
}
};
/////// Menu
// Contact
var expandContact = function ()
{
// disable click event on the button
contact.removeEventListener( "Click", loadContactForm );
// enable click event for collapse
collapse_panel.onclick = doCollapse;
// Expand contact panel
contact.style.cursor = "default";
contact_page.style.height = "400px";
header.style.marginTop = "400px";
// Save horizon color to collapse panel
collapse_panel.style.backgroundColor = horizon.style.backgroundColor;
horizon.style.backgroundColor = "dimgray";
for( var i in topButtons ) topButtons[i].removeAttribute( "active" );
contact.setAttribute( "active", "" );
c_expand = true;
};
var doCollapse = function ()
{
// disable click event for collapse
collapse_panel.onclick = null;
Trigger.height( contact_page, 0, function()
{
// enable click event on the button
contact.addEventListener( "Click", loadContactForm );
} );
// Reverting states
contact_page.style.height
= contact.style.color
= contact.style.cursor
= header.style.marginTop
= "";
// Apply saved color to horizon
horizon.style.backgroundColor = collapse_panel.style.backgroundColor;
for( var i in topButtons )
{
if( topButtons[i].getAttribute( "master" ) )
{
topButtons[i].setAttribute( "active", "" );
}
else
{
topButtons[i].removeAttribute( "active" );
}
}
c_expand = false;
};
var initBackgroundParallax = function ()
{
var bg = Dand.id("main_background");
if( !bg )
{
debug.Info( "Parallax Container is not available" );
return;
}
// far from observer
var slide_1 = { lowerLimit: 70, upperLimit: 100 }
// bottom cloud, concentrated
, slide_2a = { lowerLimit: 0, upperLimit: 200 }
, slide_2b = { lowerLimit: 0, upperLimit: 200 }
, slide_2c = { lowerLimit: 0, upperLimit: 200 }
, slide_3 = { lowerLimit: 20, upperLimit: 100 }
, slide_4 = { lowerLimit: 70, upperLimit: 100 }
, cloudRange_1 = { lowerLimit: 0, upperLimit: 100, leftLimit: -10, rightLimit: 110 }
, cloudRange_2a = { lowerLimit: 180, upperLimit: 200, leftLimit: -10, rightLimit: 110 }
, cloudRange_2b = { lowerLimit: 290, upperLimit: 300, leftLimit: -10, rightLimit: 110 }
, cloudRange_2c = { lowerLimit: 390, upperLimit: 400, leftLimit: -10, rightLimit: 110 }
, cloudRange_3 = { lowerLimit: 0, upperLimit: 300, leftLimit: -10, rightLimit: 110 }
, cloudRange_4 = { lowerLimit: 80, upperLimit: 100, leftLimit: -10, rightLimit: 110 }
, cCloudSymbol = ["\u25CF", "\u25CF", "\u25CF", "\u25CB", "\u25CB"]
, cCloudSymbol2 = ["\u25CC" ]
, colors = ["FF1D25", "662D91", "3FA9F5", "7AC943", "FF7BAC", "603813", "FF931E"]
, i = new Date().getDay()
, cCloud_1 = CharacterCloud.create( cCloudSymbol2, null, 10, cloudRange_1 )
, cCloud_2a = CharacterCloud.create( cCloudSymbol, null, 10, cloudRange_2a )
, cCloud_2b = CharacterCloud.create( cCloudSymbol, null, 20, cloudRange_2b, 10 )
, cCloud_2c = CharacterCloud.create( cCloudSymbol, null, 40, cloudRange_2c, 5 )
, cCloud_3 = CharacterCloud.create( cCloudSymbol2, "spin", 0, cloudRange_3 )
, cCloud_4 = CharacterCloud.create( cCloudSymbol2, "spin cw", 0, cloudRange_4 );
bg.appendChild( Parallax.cssSlide( cCloud_1, 0, slide_1 ) );
bg.appendChild( Parallax.cssSlide( cCloud_2a, 1, slide_2a ) );
bg.appendChild( Parallax.cssSlide( cCloud_2b, 1, slide_2b ) );
bg.appendChild( Parallax.cssSlide( cCloud_2c, 1, slide_2c ) );
bg.appendChild( Parallax.cssSlide( cCloud_3, 2, slide_3 ) );
bg.appendChild( Parallax.cssSlide( cCloud_4, 3, slide_4 ) );
IDOMElement( bg ).foreach( 1, function(e)
{
e.style.color = "#" + colors[i ++];
if (colors.length < i) i = 0;
});
Parallax.attach( window, wsupp, 0.2 );
};
Bootstrap.regInit( init );
})();