penguin/AstroJS

Javascript framework for my blog

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Code.js

raw ยท 5119 bytes

(function ()
{
	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );

	/** @type {System.utils.IKey} */
	var IKey                              = __import( "System.utils.IKey" );
	/** @type {System.utils.DataKey} */
	var DataKey                           = __import( "System.utils.DataKey" );
	/** @type {Dandelion.IDOMElement} */
	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
	/** @type {Dandelion} */
	var Dand                              = __import( "Dandelion" );
	/** @type {Components.MessageBox} */
	var MessageBox                        = __import( "Components.MessageBox" );

	var escapeStr = ns[ NS_INVOKE ]( "escapeStr" );
	var compileProp = ns[ NS_INVOKE ]( "compileProp" );
	
	var code = function ( insertSnippet, snippetWrap, createContext, override )
	{
		var temp, i, j
		, codeLangs = IKey.quickDef(
			  "Plain text" , "plain"
			, "AS3"        , "as3"
			, "bash"       , "bash"
			, "C#"         , "csharp"
			, "C/C++"      , "cpp"
			, "CSS"        , "css"
			, "php"        , "php"
			, "Python"     , "python"
			, "Perl"       , "perl"
			, "Ruby"       , "ruby"
			, "Html/Xml"   , "html"
			, "Java"       , "java"
			, "JavaScript" , "js"
			, "SQL"        , "sql"
		)

		// Private methods
		, compileListItems = function ()
		{
			var arr = [];
			for ( i in codeLangs )
			{
				arr[ arr.length ] = Dand.wrapne(
					"option"
					, codeLangs[i].keyName
					, new IKey( "value", codeLangs[i].keyValue )
				);
			}
			return arr;
		}
		
		// Snippet Class structure: handler & visualizer
		, handler = function ()
		{
			// Input fields
			var v_snippetInput = Dand.wrap( "textarea", null, "v_snippet_input" )
				, v_codelang = Dand.wrap( "select", null, "v_select flsf", compileListItems() )
				, input_inline = Dand.wrapna('input', new IKey("type", "checkbox") );
			
			if ( this._stage )
			{
				if ( this._lang )
				{
					for ( i = 0; i < codeLangs.length; i ++ )
					{
						if ( codeLangs[i].keyValue == this._lang )
						{
							v_codelang.selectedIndex = i;
						}
					}
				}

				v_snippetInput.value = this._content || "";
				input_inline.checked = ( this._inline == "on" );
			}
			else
			{
				// Remember the last choice
				if ( typeof( this.pSnippeCodeChoice ) == "number" )
					v_codelang.selectedIndex = this.pSnippeCodeChoice;
			}
			
			// Popup MessageBox
			new MessageBox(
				( this._stage ? "Edit" : "Insert" ) + " code snippet"
				, Dand.wrapc(
					"v_trimmer"
					, [
						Dand.wrapc( "v_instruction", v_codelang )
						, v_snippetInput
						, Dand.wrape([ input_inline, Dand.textNode( "Inline" ) ])
					]
				)
				, "OK", "Cancel"
				// Switcher
				, visualizer.bind({ code:v_snippetInput, inline: input_inline, lang: v_codelang, stage: this._stage })
			).show();
		}

		, visualizer = function ( submitted, override )
		{
			var lang, code, inline
			, stage = this.stage;
			
			if ( override )
			{
				lang = override.lang;
				code = override.value;
				inline = override.inline;
			}
			else
			{
				lang = this.lang[this.pSnippeCodeChoice = this.lang.selectedIndex].value;
				code = this.code.value;
				inline = this.inline.checked ? "on" : "";
			}

			var langName;
			for( var i in codeLangs )
			{
				if( codeLangs[i].keyValue == lang )
				{
					langName = codeLangs[i].keyName;
					break;
				}
			}

			if ( submitted && code )
			{
				if ( !stage )
				{
					// Visualize component
					temp =  Dand.wrapc(
						"v_box"
						, [
							Dand.wrapne( "pre", code )
							, Dand.wrapc( "v_description", "Script language: " + langName )
						]
						, [
							new DataKey( "value", code )
							, new DataKey( "lang", lang )
							, new DataKey( "inline", inline )
						]
					);

					insertSnippet( j = snippetWrap( "Code", temp ), Boolean( override ) );
				}
				else
				{
					IDOMElement( stage ).setAttribute(
						[
							new DataKey( "value", code )
							, new DataKey( "lang", lang )
							, new DataKey( "inline", inline )
						]
					);

					temp = stage.firstChild;
					temp.removeChild( temp.firstChild );
					stage.firstChild.appendChild( Dand.textNode( code ) );
					
					temp = stage.lastChild;
					temp.removeChild( temp.firstChild );
					temp.appendChild( Dand.textNode( "Script language: " + langName ) );
					
					temp = stage;
					
				}

				i = { _inline: inline, _lang: lang, _content: code, _stage: temp };

				// Set the inline style
				IDOMElement( j ).setAttribute( new DataKey( "inline", inline ) );

				// Set context menu
				createContext( i, j, handler );
			}
		}
		;
		
		if ( override )
		{
			visualizer( true, override );
			override = false;
		}
		else
		{
			return handler;
		}
		return true;
	};
	
	var compile = function ( stage )
	{
		// [code lang=\"" + lang + "\"]" + code + "[/code]"
		var element = IDOMElement( stage )
		, props= [ "lang", "inline" ];
		
		return "[code"
			+ compileProp( element, props )
			+  "]"
			+ escapeStr( element.getDAttribute( "value" ) )
			+ "[/code]"
			;
	};

	__static_method( code, "compile", compile );

	ns[ NS_EXPORT ]( EX_CLASS, "Code", code );
})();