AstroJS/botanjs/src/Astro/Blog/Components/Notification.js

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

	/** @type {System.Debug} */
	var debug                                   = __import( "System.Debug" );
	/** @type {System.Cycle} */
	var Cycle                                   = __import( "System.Cycle" );
	/** @type {function(...?): Dandelion.IDOMElement} */
	var IDOMElement                             = __import( "Dandelion.IDOMElement" );
	/** @type {System.utils.IKey} */
	var IKey                                    = __import( "System.utils.IKey" );
	/** @type {System.utils.DataKey} */
	var DataKey                                 = __import( "System.utils.DataKey" );
	/** @type {System.utils.EventKey} */
	var EventKey                                = __import( "System.utils.EventKey" );
	/** @type {typeof Dandelion} */
	var Dand                                    = __import( "Dandelion" );
	/** @type {Components.MessageBox} */
	var MessageBox                              = __import( "Components.MessageBox" );
	/** @type {Components.Mouse.ContextMenu} */
	var ContextMenu                             = __import( "Components.Mouse.ContextMenu" );
	/** @type {Astro.Bootstrap} */
	var Bootstrap                               = __import( "Astro.Bootstrap" );
	/** @type {Astro.Blog.Config} */
	var Config                                  = __import( "Astro.Blog.Config" );
	/** @type {Astro.utils.Date} */
	var XDate                                   = __import( "Astro.utils.Date" );

	var postData                                = __import( "System.Net.postData" );
	var smstamp                                 = __import( "Astro.utils.Date.smstamp" );

	var init = function ()
	{
		var stage = Dand.id( "notifications" );
		var bodyStyle = Dand.id( "nt_body" ).style;

		/** @type {_AstConf_.Notification} */
		var conf = Config.get( "Notification" );

		var processor = conf.processor;
		var contextMenu;

		var itemsMenu;

		var nError = function( e ) {
			// TODO: Do something on error
			debug.Info( e );
		};

		var followLink = function(e)
		{
			window.location = this.link;
		};

		var toggleFollow = function(e)
		{
			var _action = "enable";
			if( this.item.getAttribute( "active" ) )
			{
				_action = "disable";
				if(
					0 < IDOMElement( this.count ).getDAttribute( "count" )
					&& !confirm( "All followed notifications of this type will be unfollowed. Continue?" )
				) return;
			}

			postData(
				processor
				, {
					"action": _action
					, "tid": IDOMElement( this.item ).getDAttribute( "tid" )
					, "cid": 0
				}
				, toggleSuccess.bind(this)
				, nError
			);
		};

		var toggleSuccess = function(e)
		{
			if( this.item.getAttribute( "active" ) )
			{
				this.item.removeAttribute( "active" );
				this.count.innerHTML = "N/A";
			}
			else
			{
				this.item.setAttribute( "active", 1 );
				this.count.innerHTML = "0";
			}

		};

		var showSettings = function( e )
		{
			// Create list <ul> <li> ... </ul>
			var ul = Dand.wrap("ul", "nt_imenu", "nt_smenu");

			for( var i in e.data )
			{
				var data = e.data[i];
				var li
					, li_s = [
							// On/off toggle
							Dand.wrap( "span", null, "nt_switch" )
							, Dand.wrap( "span", null, "nt_tname", data.name )
						]
					, keys = [ new DataKey( "tid", data.type ) ]
				;

				if( data.hasOwnProperty("count") )
				{
					// type count
					li_s[2] = Dand.wrap(
						"span"
						, null
						, "nt_tcount"
						, e.data[i].count + ""
						, new DataKey( "count", data.count )
					);
					// Active
					keys[ keys.length ] = new IKey( "active", 1 );
				}
				else
				{
					li_s[2] = Dand.wrap( "span", null, "nt_tcount", "N/A" );
				}

				// Create li element
				li = Dand.wrapne( "li", li_s, keys );
				ul.appendChild( li );

				IDOMElement( li ).addEventListener(
					"Click"
					, toggleFollow.bind({ item: li, count: li_s[2] })
				);

			}

			var msgBox = new MessageBox( "Notification Settings", ul, "Close" ).show();
		};

		var popupSettings = function()
		{
			postData( processor, { action: "getSettings" }, showSettings, nError );
		};

		var readNotification = function(e)
		{
			postData( processor, { action: "read", id: this.id }, followLink.bind( this ), nError );
		};
		// functions
		var createContextMenu = function(e)
		{
			var items = [], menuShow = false;
			var hasNotis = 0 < e.data.length;

			for( var n in e.data )
			{
				/** @type {_AstJson_.AJaxGetNotis} */
				var data = e.data[n];
				// Create items
				items[ items.length ] = new IKey(
					data.mesg
					, new EventKey(
						"m_" + data.id
						, readNotification.bind( data )
					)
				);
			}

			Dand.glass( "nt_icon_settings", true )[0].addEventListener( "Click", popupSettings );

			contextMenu = new ContextMenu(
				Dand.id( "nt_open_menu" )
				, items
				, "LMB"
				, nt_body
				// showMenu/hideMenu overrides style settings
				, {
					"class": "nt_container"
					, "showMenu": function( stage, event )
					{
						if( stage.className == "nt_date" ) return;
						if( !hasNotis || menuShow ) return;
						bodyStyle.marginLeft = "1em";
						bodyStyle.marginRight = "-1em";
						bodyStyle.opacity = 0;
						bodyStyle.display = "block";
						Cycle.next(function()
						{
							bodyStyle.marginLeft
							= bodyStyle.marginRight = 0;

							bodyStyle.opacity = 1;
							menuShow = true;
						});
					}
					, "hideMenu": function( stage )
					{
						if( stage.className == "nt_date" ) return;
						if( !menuShow ) return;
						bodyStyle.marginLeft = "1em";
						bodyStyle.marginRight = "-1em";
						bodyStyle.opacity = 0;

						Cycle.delay(function()
						{
							bodyStyle.display = "none";
							// cubic 200, we set delay to 200
							menuShow = false;
						}, 200);
					}
					// Prevent default subnode chaining
					, "chainHide": function( stage ) { }
					, "chainShow": function( stage ) { }
				}
			);

			for( n in e.data )
			{
				/** @type {_AstJson_.AJaxGetNotis} */
				var data = e.data[n];

				var li = contextMenu.getItemByKey( "m_" + data.id ).stage;
				li.appendChild(
					Dand.wrapc(
						"nt_date"
						, smstamp( new Date( data.date ) )
					)
				);
			}
		};

		postData( processor, { "action": "get" }, createContextMenu );
	};

	Bootstrap.regInit( init );

})();