forked from Botanical/BotanJS
254 lines
7.6 KiB
JavaScript
254 lines
7.6 KiB
JavaScript
(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.DataKey} */
|
|
var DataKey = __import( "System.utils.DataKey" );
|
|
/** @type {Dandelion} */
|
|
var Dand = __import( "Dandelion" );
|
|
/** @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.SharedStyle" ); CSS_RESERVATION
|
|
// __import( "Astro.Starfall.Element.Layer" ); CSS_RESERVATION
|
|
|
|
/** @function {System.Net.getData} */
|
|
var getData = __import( "System.Net.getData" );
|
|
|
|
var header;
|
|
|
|
// menu and horizon
|
|
var horizon;
|
|
var contact;
|
|
var contact_page;
|
|
var collapse_panel;
|
|
var c_expand = false;
|
|
|
|
var init = function ()
|
|
{
|
|
initTopButton();
|
|
navControl();
|
|
initBackgroundParallax();
|
|
};
|
|
|
|
var topButtons = [];
|
|
var initTopButton = function()
|
|
{
|
|
var fhorizon = Dand.id( "fhorizon" );
|
|
// init params
|
|
header = Dand.id( "header" );
|
|
horizon = Dand.id( "horizon" );
|
|
|
|
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 )
|
|
{
|
|
e = IDOMElement( e );
|
|
topButtons.push( e );
|
|
if( e.getDAttribute( "active" ) !== null )
|
|
{
|
|
e.setAttribute( new DataKey( "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 );
|
|
}
|
|
};
|
|
|
|
/////// 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( "data-active" );
|
|
contact.setAttribute( new DataKey( "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].getDAttribute( "master" ) )
|
|
{
|
|
topButtons[i].setAttribute( new DataKey( "active" ) );
|
|
}
|
|
else
|
|
{
|
|
topButtons[i].removeAttribute( "data-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"]
|
|
, colors = ["FF1D25", "662D91", "7AC943", "FF7BAC", "603813", "FF931E"]
|
|
, i = new Date().getDay()
|
|
|
|
, cCloud_1 = CharacterCloud.create( cCloudSymbol2, "spin", 5, 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, 30, cloudRange_2c, 5 )
|
|
, cCloud_3 = CharacterCloud.create( cCloudSymbol2, "spin cw", 5, cloudRange_3 )
|
|
, cCloud_4 = CharacterCloud.create( cCloudSymbol, null, 5, 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.5 );
|
|
|
|
var cp = 0;
|
|
var bWrapper = Dand.id( "begin-wrapper" );
|
|
Cycle.perma(
|
|
"MainBackground"
|
|
, function()
|
|
{
|
|
var p = wsupp.scrollTop / ( wsupp.scrollHeight - wsupp.clientHeight );
|
|
cp = 0.75 * cp + 0.25 * p;
|
|
bWrapper.style.backgroundPosition = "50% " + ( cp * 100 ).toFixed( 2 ) + "%";
|
|
}
|
|
, 15
|
|
);
|
|
};
|
|
|
|
Bootstrap.regInit( init );
|
|
})();
|