Checkbox should wrapped with labels

botanjs/src/Astro/Blog/AstroEdit/SmartInput/_this.css

@@ -14,3 +14,8 @@
 .smartbar-candidates .cn[data-selected="1"] {
 	background-color: orangered;
 }
+
+.cn .desc {
+	margin-left: 0.5em;
+	opacity: 0.65;
+}

botanjs/src/Astro/Blog/AstroEdit/SmartInput/_this.js

@@ -26,25 +26,49 @@
 	/** @type {Astro.Blog.Config} */
 	var Config                                  = __import( "Astro.Blog.Config" );
 
+	var KeyHandler = function( sender, handler )
+	{
+		return function( e )
+		{
+			e = e || window.event;
+			if ( e.keyCode ) code = e.keyCode;
+			else if ( e.which ) code = e.which;
+
+			handler( sender, e );
+		};
+	};
+
+	/** @param {Astro.Blog.AstroEdit.Visualizer} */
+	var SmartInput = function ( visualizer, CandidatesOvd )
+	{
+		var SBarPresent = false;
+		var insert = function() { return Dand.textNode( "" ); };
 		var __cands = [];
+
+		var CandidateCycle = -1;
+		var KeywordTyped = 0;
+		var shiftTabbed = false;
+
+		var Cands = CandidatesOvd || {
+			"Article Reference": { module: "ArticleReference", desc: "Article reference link" }
+			, "facts": { module: "Facts", desc: "Facts, a fact bubble popup when mouseover" }
+			, "footnote": { module: "Footnote", desc: "Footnote, a footnote displayed at the end of article" }
+			, "h1": { module: "Heading", options: 1, desc: "Heading, size 1" }
+			, "h2": { module: "Heading", options: 2, desc: "Heading, size 2" }
+			, "h3": { module: "Heading", options: 3, desc: "Heading, size 3" }
+			, "h4": { module: "Heading", options: 4, desc: "Heading, size 4" }
+			, "h5": { module: "Heading", options: 5, desc: "Heading, size 5" }
+		};
+
 		var GetCandidates = function()
 		{
 			if( __cands.length ) return __cands;
 
-		var Cands = {
-			"Article Reference": "Ref"
-			, "facts": "T"
-			, "text": "T"
-			, "h1": "h1"
-			, "h2": "h2"
-			, "h3": "h3"
-			, "h4": "h4"
-			, "h5": "h5"
-		};
-
 			for( var i in Cands )
 			{
-			__cands.push( Dand.wrapc( "cn", i, new DataKey( "key", Cands[i] ) ) );
+				/** @param {Astro.Blog.AstroEdit.SmartInput.Definition} */
+				var c = Cands[i];
+				__cands.push( Dand.wrapc( "cn", [ i, Dand.wrapc( "desc", c.desc ) ], new DataKey( "key", i ) ) );
 			}
 
 			return __cands;
@@ -93,28 +117,6 @@
 			return null;
 		};
 
-	var KeyHandler = function( sender, handler )
-	{
-		return function( e )
-		{
-			e = e || window.event;
-			if ( e.keyCode ) code = e.keyCode;
-			else if ( e.which ) code = e.which;
-
-			handler( sender, e );
-		};
-	};
-
-	var CandidateCycle = -1;
-	var KeywordTyped = 0;
-	var shiftTabbed = false;
-
-	/** @param {Astro.Blog.AstroEdit.Visualizer} */
-	var SmartInput = function ( visualizer )
-	{
-		var SBarPresent = false;
-		var insert = function() { return Dand.textNode( "" ); };
-
 		var HandleInput = function( sender, e )
 		{
 			// Don't handle if holding shift or ctrl key
@@ -131,17 +133,18 @@
 				case 192: // `
 					// Closing the quote, that means this is a block-quoted text
 					e.preventDefault();
+					insert = undefined;
 
 					// Hitting ` twice escapes the ` character itself
 					var v = sender.value.substr( 1 );
 					if( v == "" ) insert = function() { return Dand.textNode( "`" ); };
 
-					insert = undefined;
 					sender.BindingBox.close( true );
 
 					// Insert the code snippet with inline flag
 					visualizer.insertSnippet( "code", { "inline": "on", "lang": "plain", "value": v } );
 					break;
+
 				case 13: // Enter
 					// Not closing the quote, either a direct text or the first matched action
 					e.preventDefault();
@@ -150,7 +153,10 @@
 					// Check if matched an action first
 					if( selected )
 					{
+						insert = undefined;
 
+
+						sender.BindingBox.close();
 					}
 					else
 					{
@@ -160,9 +166,11 @@
 						sender.BindingBox.close( true );
 					}
 					break;
+
 				case 27: // Esc
 					sender.BindingBox.close();
 					break;
+
 				case 9: // Tab
 					// Hitting tab will cycle around the candidates
 					e.preventDefault();
@@ -185,11 +193,12 @@
 					var ThisCandidate = c[ CandidateCycle ];
 					ThisCandidate.setAttribute( new DataKey( "selected", 1 ) );
 
-					var CyclingKeyword = ThisCandidate.element.textContent;
+					var CyclingKeyword = ThisCandidate.getDAttribute( "key" );
 
 					sender.value = "`" + CyclingKeyword;
 					sender.setSelectionRange( KeywordTyped, sender.value.length );
 					break;
+
 				default:
 					FilteredCandidates();
 					CandidateCycle = -1;
@@ -224,9 +233,15 @@
 					var keyword = sender.value.substr( 1 );
 					for( var i in c )
 					{
-						var Cand = c[i];
+						var Cand = IDOMElement( c[i] );
-						var t = Cand.textContent;
+						var t = Cand.getDAttribute( "key" );
 						Cand.style.display = t.match( new RegExp( "^" + keyword, "i" ) ) ? "" : "none";
+
+						// Highlight the exact match
+						if( t.match( new RegExp( "^" + keyword + "$", "i" ) ) )
+						{
+							Cand.setAttribute( new DataKey( "selected", 1 ) );
+						}
 					}
 			}
 		};

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

@@ -57,7 +57,7 @@
 			// 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") );
+				, input_inline = Dand.wrapna( "input", new IKey( "type", "checkbox" ) );
 			
 			if ( this._stage )
 			{
@@ -90,7 +90,7 @@
 					, [
 						Dand.wrapc( "v_instruction", v_codelang )
 						, v_snippetInput
-						, Dand.wrape([ input_inline, Dand.textNode( "Inline" ) ])
+						, Dand.wrape( Dand.wrapne( "label", [ input_inline, "Inline" ] ) )
 					]
 				)
 				, "OK", "Cancel"

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

@@ -28,7 +28,7 @@
 			, input_a = Dand.wrap(
 				"input", null, "v_snippet_input_single", null, new IKey( "type", "text" )
 			)
-			, input_preferred = Dand.wrapna('input', new IKey("type", "checkbox"))
+			, input_preferred = Dand.wrapna( "input", new IKey( "type", "checkbox" ) )
 			;
 			
 			if ( this._stage )
@@ -46,7 +46,7 @@
 						, input_url
 						, Dand.wrapc( "v_instruction flsf", "Ancohr link(optional):" )
 						, input_a
-						, Dand.wrape([ input_preferred, Dand.textNode( "Preferred" ) ])
+						, Dand.wrape( Dand.wrapne( "label", [ input_preferred, "Preferred" ] ) )
 					]
 				)
 				, "OK", "Cancel"

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

@@ -38,7 +38,7 @@
 		{
 			// Input fields
 			var v_snippetInput = Dand.wrap("input", null, "v_snippet_input_single", null, new IKey("type", "text"))
-				, input_preferred = Dand.wrapna('input', new IKey("type", "checkbox"))
+				, input_preferred = Dand.wrapna( "input", new IKey( "type", "checkbox" ) )
 				;
 
 			if ( this._stage )
@@ -52,7 +52,7 @@
 				"Insert site file"
 				, Dand.wrape([
 					v_snippetInput
-					, Dand.wrape([ input_preferred, Dand.textNode( "Preferred" ) ])
+					, Dand.wrape( Dand.wrapne( "label", [ input_preferred, "Preferred" ] ) )
 				])
 				, "OK", "Cancel"
 				, visualizer.bind({

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

@@ -22,9 +22,9 @@
 		, handler = function ()
 		{
 			// Input fields
-			var v_snippetInput = Dand.wrap('textarea', null, "v_snippet_input")
+			var v_snippetInput = Dand.wrap("textarea", null, "v_snippet_input")
-			, input_title = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"))
+			, input_title = Dand.wrap("input", null, "v_snippet_input_single", null, new IKey("type", "text"))
-			, input_expanded = Dand.wrapna('input', new IKey("type", "checkbox"))
+			, input_expanded = Dand.wrapna("input", new IKey("type", "checkbox"))
 			
 			if (this._stage)
 			{
@@ -42,7 +42,7 @@
 						, Dand.wrapc("v_instruction flsf", "Content")
 						, v_snippetInput
 						
-						, Dand.wrape([ input_expanded, Dand.textNode( "Expanded" ) ])
+						, Dand.wrape( Dand.wrapne( "label", [ input_expanded, "Expanded" ] ) )
 					]
 				)
 			, "OK", "Cancel", visualizer.bind({title: input_title, content:v_snippetInput, expanded: input_expanded, stage: this._stage})).show();
@@ -75,10 +75,10 @@
 					if (!content) return;
 					
 					// Visualize component
-					temp =  Dand.wrapc('v_box',
+					temp =  Dand.wrapc("v_box",
 						[
 							// caption
-							Dand.wrapc('v_caption', i)
+							Dand.wrapc("v_caption", i)
 							, Dand.textNode(content)
 						],
 						[

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

@@ -26,16 +26,15 @@
 		, handler = function ()
 		{
 			// Input fields
-			var input_w = Dand.wrapna('input', new IKey("type", "number"))
+			var input_w = Dand.wrapna("input", new IKey("type", "number"))
-			, input_h = Dand.wrapna('input', new IKey("type", "number"))
+			, input_h = Dand.wrapna("input", new IKey("type", "number"))
-			, input_title = Dand.wrap('input', null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
+			, input_title = Dand.wrap("input", null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
-			, input_desc = Dand.wrap('input', null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
+			, input_desc = Dand.wrap("input", null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
-			, input_api = Dand.wrapna('input', new IKey("type", "checkbox"))
+			, input_api = Dand.wrapna("input", new IKey("type", "checkbox"))
-			, input_preview = Dand.wrap('input', null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
+			, input_preview = Dand.wrap("input", null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
-			, input_src = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"))
+			, input_src = Dand.wrap("input", null, "v_snippet_input_single", null, new IKey("type", "text"))
 			, stage = this._stage;
 
-			
 			if (stage)
 			{
 				input_src.value = this._src;
@@ -64,7 +63,7 @@
 						, Dand.wrapc("v_instruction flsf", "Link to swf:")
 						, input_src
 						
-						, Dand.wrape([ input_api, Dand.textNode("Use external API") ] )
+						, Dand.wrape( Dand.wrapne( "label", [ input_api, "Use external API" ] ) )
 					]
 				)
 			, "OK", "Cancel", visualizer.bind({src:input_src, width:input_w, height:input_h, title: input_title, desc: input_desc, extAPI: input_api, preview: input_preview, stage: this._stage})).show();
@@ -103,14 +102,14 @@
 				{
 					// Visualize component
 					
-					temp =  Dand.wrapc('v_box'
+					temp =  Dand.wrapc("v_box"
-					, Dand.wrapc('v_description'
+					, Dand.wrapc("v_description"
 							, [
-								Dand.wrap('span', null, 'fls', title)
+								Dand.wrap("span", null, "fls", title)
 								, Dand.textNode("	")
-								, Dand.wrap('span', null, 'v_caption_desc flsf', desc)
+								, Dand.wrap("span", null, "v_caption_desc flsf", desc)
 							  ]
-							, new IKey('style', 'font-size: 2em')
+							, new IKey("style", "font-size: 2em")
 						)
 					, [
 						new DataKey("value", src)

botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.Definition.js

@@ -0,0 +1,8 @@
+/** @type {object} */
+Astro.Blog.AstroEdit.SmartInput.Definition = {};
+/** @type {String} */
+Astro.Blog.AstroEdit.SmartInput.Definition.desc;
+/** @type {String} */
+Astro.Blog.AstroEdit.SmartInput.Definition.module;
+/** @type {object} */
+Astro.Blog.AstroEdit.SmartInput.Definition.option;

botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.js

@@ -0,0 +1,2 @@
+/** @type {Object} */
+Astro.Blog.AstroEdit.SmartInput = {};