diff --git a/botanjs/src/Astro/Blog/AstroEdit/SmartInput.css b/botanjs/src/Astro/Blog/AstroEdit/SmartInput/_this.css similarity index 84% rename from botanjs/src/Astro/Blog/AstroEdit/SmartInput.css rename to botanjs/src/Astro/Blog/AstroEdit/SmartInput/_this.css index 0951ceb..232a14c 100644 --- a/botanjs/src/Astro/Blog/AstroEdit/SmartInput.css +++ b/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; +} diff --git a/botanjs/src/Astro/Blog/AstroEdit/SmartInput.js b/botanjs/src/Astro/Blog/AstroEdit/SmartInput/_this.js similarity index 72% rename from botanjs/src/Astro/Blog/AstroEdit/SmartInput.js rename to botanjs/src/Astro/Blog/AstroEdit/SmartInput/_this.js index 4c0dc08..538e933 100644 --- a/botanjs/src/Astro/Blog/AstroEdit/SmartInput.js +++ b/botanjs/src/Astro/Blog/AstroEdit/SmartInput/_this.js @@ -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 ) ); + } } } }; diff --git a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Code.js b/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Code.js index 6271c37..71dc3b5 100644 --- a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Code.js +++ b/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" diff --git a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Image.js b/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Image.js index 7f72294..4bb0284 100644 --- a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Image.js +++ b/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" diff --git a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/SiteFile.js b/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/SiteFile.js index 9384f87..073bbe4 100644 --- a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/SiteFile.js +++ b/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({ diff --git a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Spoiler.js b/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Spoiler.js index 7fd6313..061974c 100644 --- a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Spoiler.js +++ b/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") - , 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) ], [ diff --git a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Swf.js b/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Swf.js index 4222f66..7b6e702 100644 --- a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Swf.js +++ b/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")) - , 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" diff --git a/botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.Definition.js b/botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.Definition.js new file mode 100644 index 0000000..baa0b1c --- /dev/null +++ b/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; diff --git a/botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.js b/botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.js new file mode 100644 index 0000000..ee3eaa9 --- /dev/null +++ b/botanjs/src/externs/Astro.Blog.AstroEdit.SmartInput.js @@ -0,0 +1,2 @@ +/** @type {Object} */ +Astro.Blog.AstroEdit.SmartInput = {};