forked from Botanical/BotanJS
Checkbox should wrapped with labels
This commit is contained in:
parent
e2cda7ca2c
commit
7be076461a
@ -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 = {};
|
Loading…
Reference in New Issue
Block a user