forked from Botanical/BotanJS
		
	Checkbox should wrapped with labels
This commit is contained in:
		@@ -14,3 +14,8 @@
 | 
			
		||||
.smartbar-candidates .cn[data-selected="1"] {
 | 
			
		||||
	background-color: orangered;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.cn .desc {
 | 
			
		||||
	margin-left: 0.5em;
 | 
			
		||||
	opacity: 0.65;
 | 
			
		||||
}
 | 
			
		||||
@@ -26,73 +26,6 @@
 | 
			
		||||
	/** @type {Astro.Blog.Config} */
 | 
			
		||||
	var Config                                  = __import( "Astro.Blog.Config" );
 | 
			
		||||
 | 
			
		||||
	var __cands = [];
 | 
			
		||||
	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] ) ) );
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		return __cands;
 | 
			
		||||
	};
 | 
			
		||||
 | 
			
		||||
	var ResetCandidates = function()
 | 
			
		||||
	{
 | 
			
		||||
		var Cands = GetCandidates();
 | 
			
		||||
		for( var i in Cands )
 | 
			
		||||
		{
 | 
			
		||||
			var c = IDOMElement( Cands[i] );
 | 
			
		||||
			c.setAttribute( new DataKey( "selected", 0 ) );
 | 
			
		||||
		}
 | 
			
		||||
	};
 | 
			
		||||
 | 
			
		||||
	var FilteredCandidates = function()
 | 
			
		||||
	{
 | 
			
		||||
		var Cands = GetCandidates();
 | 
			
		||||
		var selected = [];
 | 
			
		||||
		for( var i in Cands )
 | 
			
		||||
		{
 | 
			
		||||
			var c = IDOMElement( Cands[i] );
 | 
			
		||||
			c.setAttribute( new DataKey( "selected", 0 ) );
 | 
			
		||||
 | 
			
		||||
			if( c.style.display != "none" )
 | 
			
		||||
			{
 | 
			
		||||
				selected.push( c );
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		return selected;
 | 
			
		||||
	};
 | 
			
		||||
 | 
			
		||||
	var SelectedCandidate = function()
 | 
			
		||||
	{
 | 
			
		||||
		var Cands = GetCandidates();
 | 
			
		||||
		for( var i in Cands )
 | 
			
		||||
		{
 | 
			
		||||
			var c = IDOMElement( Cands[i] );
 | 
			
		||||
			if( c.getDAttribute( "selected" ) == "1" )
 | 
			
		||||
			{
 | 
			
		||||
				return c;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		return null;
 | 
			
		||||
	};
 | 
			
		||||
 | 
			
		||||
	var KeyHandler = function( sender, handler )
 | 
			
		||||
	{
 | 
			
		||||
		return function( e )
 | 
			
		||||
@@ -105,15 +38,84 @@
 | 
			
		||||
		};
 | 
			
		||||
	};
 | 
			
		||||
 | 
			
		||||
	var CandidateCycle = -1;
 | 
			
		||||
	var KeywordTyped = 0;
 | 
			
		||||
	var shiftTabbed = false;
 | 
			
		||||
 | 
			
		||||
	/** @param {Astro.Blog.AstroEdit.Visualizer} */
 | 
			
		||||
	var SmartInput = function ( 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;
 | 
			
		||||
 | 
			
		||||
			for( var i in Cands )
 | 
			
		||||
			{
 | 
			
		||||
				/** @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;
 | 
			
		||||
		};
 | 
			
		||||
 | 
			
		||||
		var ResetCandidates = function()
 | 
			
		||||
		{
 | 
			
		||||
			var Cands = GetCandidates();
 | 
			
		||||
			for( var i in Cands )
 | 
			
		||||
			{
 | 
			
		||||
				var c = IDOMElement( Cands[i] );
 | 
			
		||||
				c.setAttribute( new DataKey( "selected", 0 ) );
 | 
			
		||||
			}
 | 
			
		||||
		};
 | 
			
		||||
 | 
			
		||||
		var FilteredCandidates = function()
 | 
			
		||||
		{
 | 
			
		||||
			var Cands = GetCandidates();
 | 
			
		||||
			var selected = [];
 | 
			
		||||
			for( var i in Cands )
 | 
			
		||||
			{
 | 
			
		||||
				var c = IDOMElement( Cands[i] );
 | 
			
		||||
				c.setAttribute( new DataKey( "selected", 0 ) );
 | 
			
		||||
 | 
			
		||||
				if( c.style.display != "none" )
 | 
			
		||||
				{
 | 
			
		||||
					selected.push( c );
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			return selected;
 | 
			
		||||
		};
 | 
			
		||||
 | 
			
		||||
		var SelectedCandidate = function()
 | 
			
		||||
		{
 | 
			
		||||
			var Cands = GetCandidates();
 | 
			
		||||
			for( var i in Cands )
 | 
			
		||||
			{
 | 
			
		||||
				var c = IDOMElement( Cands[i] );
 | 
			
		||||
				if( c.getDAttribute( "selected" ) == "1" )
 | 
			
		||||
				{
 | 
			
		||||
					return c;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			return null;
 | 
			
		||||
		};
 | 
			
		||||
 | 
			
		||||
		var HandleInput = function( sender, e )
 | 
			
		||||
		{
 | 
			
		||||
@@ -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 t = Cand.textContent;
 | 
			
		||||
						var Cand = IDOMElement( c[i] );
 | 
			
		||||
						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 ) );
 | 
			
		||||
						}
 | 
			
		||||
					}
 | 
			
		||||
			}
 | 
			
		||||
		};
 | 
			
		||||
@@ -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"
 | 
			
		||||
 
 | 
			
		||||
@@ -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"
 | 
			
		||||
 
 | 
			
		||||
@@ -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({
 | 
			
		||||
 
 | 
			
		||||
@@ -22,9 +22,9 @@
 | 
			
		||||
		, handler = function ()
 | 
			
		||||
		{
 | 
			
		||||
			// Input fields
 | 
			
		||||
			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_expanded = Dand.wrapna('input', new IKey("type", "checkbox"))
 | 
			
		||||
			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_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)
 | 
			
		||||
						],
 | 
			
		||||
						[
 | 
			
		||||
 
 | 
			
		||||
@@ -26,16 +26,15 @@
 | 
			
		||||
		, handler = function ()
 | 
			
		||||
		{
 | 
			
		||||
			// Input fields
 | 
			
		||||
			var input_w = 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_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_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"))
 | 
			
		||||
			var input_w = 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_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_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"))
 | 
			
		||||
			, 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'
 | 
			
		||||
					, Dand.wrapc('v_description'
 | 
			
		||||
					temp =  Dand.wrapc("v_box"
 | 
			
		||||
					, 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)
 | 
			
		||||
@@ -120,7 +119,7 @@
 | 
			
		||||
						, new DataKey("desc", desc)
 | 
			
		||||
						, new DataKey("preview", preview)
 | 
			
		||||
						, new DataKey("useExtAPI", extAPI)
 | 
			
		||||
						
 | 
			
		||||
 | 
			
		||||
						, new IKey
 | 
			
		||||
						(
 | 
			
		||||
							"style"
 | 
			
		||||
 
 | 
			
		||||
@@ -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;
 | 
			
		||||
							
								
								
									
										2
									
								
								botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										2
									
								
								botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,2 @@
 | 
			
		||||
/** @type {Object} */
 | 
			
		||||
Astro.Blog.AstroEdit.SmartInput = {};
 | 
			
		||||
		Reference in New Issue
	
	Block a user