penguin/AstroJS

Javascript framework for my blog

botanjs/src/Astro/Penguin/Layout/MainFrame.js

raw ยท 4066 bytes

(function(){
	var ns = __namespace( "Astro.Penguin.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 {System.utils.DataKey} */
	var DataKey                                       = __import( "System.utils.DataKey" );
	/** @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" );

	// __import( "Dandelion.CSSReset" ); CSS_RESERVATION
	// __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION
	// __import( "Astro.Blog.SharedStyle" ); CSS_RESERVATION
	// __import( "Astro.Blog.Element.Layer" ); CSS_RESERVATION

	var main;
	var header;
	var main_h;

	// menu and horizon
	var horizon;
	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 );
	};

	var topButtons = [];
	var initTopButton = function()
	{
		// init params
		header = Dand.id( "header" );
		horizon = Dand.id( "horizon" );
		main = Dand.id( "mbody" );

		collapse_panel = Dand.id( "collapse_panel" );

		horizon.style.backgroundColor
			= fhorizon.style.backgroundColor
			= "navy";

		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 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.2 && 1.2 < rspd_ratio ) || ( 1.2 < ratio && rspd_ratio < 1.2 ) || override )
		{
			rspd_ratio = ratio;
			debug.Info( "Responsive Event: R = " + ratio );

			BotanJS.dispatchEvent( new BotanEvent( "Responsive", { "ratio": ratio } ) );
		}
	};


	Bootstrap.regInit( init );
})();