Implemented autocomplete
This commit is contained in:
parent
ab7bc9cf42
commit
5c7e5a1512
@ -13,8 +13,11 @@ yu { display:block; }
|
||||
|
||||
#ronin { background:#eee; height: 100vh; width:100vw; }
|
||||
#commander, #hint { position: fixed;bottom: 0px;left: 0px;width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px;}
|
||||
#commander { z-index: 9000 }
|
||||
#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: white; margin-left:20px; }
|
||||
#hint { background:black; color:#666; padding-left:20px;}
|
||||
#commander { z-index: 9000; background:black; }
|
||||
#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: white; margin-left:20px; z-index: 9000;position: relative; }
|
||||
#hint { color:#666; padding-left:20px;}
|
||||
#hint b { font-family: 'input_mono_regular'; color:#999;}
|
||||
#hint i { font-style: italic; }
|
||||
#hint i { font-style: italic; }
|
||||
#hint .autocomplete { background:white; color:black; }
|
||||
|
||||
#cursor_hint { position: absolute;top: 0px;right: 20px;color: white; }
|
@ -77,6 +77,23 @@ function Commander()
|
||||
ronin.guide.update();
|
||||
}
|
||||
|
||||
this.autocomplete = function()
|
||||
{
|
||||
var target_module = ronin.commander.query().module;
|
||||
|
||||
if(ronin.modules[target_module]){
|
||||
var ac = ronin.hint.find_autocomplete(ronin.modules[target_module].methods,":");
|
||||
}
|
||||
else{
|
||||
var ac = ronin.hint.find_autocomplete(ronin.modules," ");
|
||||
}
|
||||
|
||||
if(ac.lenght < 1 || !ac[0]){ return; }
|
||||
|
||||
this.append(ac[0]);
|
||||
this.focus();
|
||||
}
|
||||
|
||||
this.on_input = function(e)
|
||||
{
|
||||
ronin.commander.update();
|
||||
@ -103,6 +120,12 @@ function Commander()
|
||||
ronin.commander.update();
|
||||
}
|
||||
|
||||
this.append = function(str)
|
||||
{
|
||||
ronin.commander.input_el.value += str;
|
||||
ronin.commander.update();
|
||||
}
|
||||
|
||||
this.query = function()
|
||||
{
|
||||
return new Query(ronin.commander.input_el.value);
|
||||
|
@ -2,11 +2,29 @@ function Hint()
|
||||
{
|
||||
this.el = document.createElement('yu');
|
||||
this.el.id = "hint";
|
||||
this.cursor_hint_el = document.createElement('yu');
|
||||
this.cursor_hint_el.id = "cursor_hint";
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
ronin.el.appendChild(this.el);
|
||||
this.el.innerHTML = "";
|
||||
ronin.commander.el.appendChild(this.el);
|
||||
ronin.commander.el.appendChild(this.cursor_hint_el);
|
||||
this.cursor_hint_el.innerHTML = "Hello";
|
||||
}
|
||||
|
||||
this.find_autocomplete = function(collection,append = "")
|
||||
{
|
||||
var target = ronin.commander.query().last;
|
||||
var a = [];
|
||||
|
||||
for(id in collection){
|
||||
var name = collection[id].name;
|
||||
if(name && name.substr(0,target.length) == target){
|
||||
a.push(name.substr(target.length,20)+append)
|
||||
}
|
||||
}
|
||||
|
||||
return a;
|
||||
}
|
||||
|
||||
this.update = function(e = null)
|
||||
@ -25,20 +43,32 @@ function Hint()
|
||||
this.el.innerHTML = html;
|
||||
}
|
||||
else if(ronin.modules[target_module] && ronin.modules[target_module].methods[target_method]){
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+ronin.modules[target_module].methods[target_method].docs();
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" "+ronin.modules[target_module].methods[target_method].docs();
|
||||
}
|
||||
else if(ronin.modules[target_module]){
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+ronin.modules[target_module].hint();
|
||||
var ac = this.find_autocomplete(ronin.modules[target_module].methods,":");
|
||||
if(ac.length > 0){
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+"<span class='autocomplete'>"+ac[0]+"</span> > Press tab to autocomplete."
|
||||
}
|
||||
else{
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" "+ronin.modules[target_module].hint();
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" > Idle."
|
||||
var ac = this.find_autocomplete(ronin.modules);
|
||||
if(ac.length > 0){
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+"<span class='autocomplete'>"+ac[0]+"</span> > Press tab to autocomplete."
|
||||
}
|
||||
else{
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" > Unknown command."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.pad = function(input)
|
||||
{
|
||||
var s = "";
|
||||
for (i = 0; i < input.length+1; i++){
|
||||
for (i = 0; i < input.length; i++){
|
||||
s += "_";
|
||||
}
|
||||
return "<span style='color:RGBA(0,0,0,0)'>"+s+"</span>";
|
||||
|
@ -23,7 +23,7 @@ function Keyboard()
|
||||
|
||||
if(e.key == "tab" || e.keyCode == 9){
|
||||
e.preventDefault();
|
||||
ronin.commander.focus();
|
||||
ronin.commander.autocomplete();
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -7,6 +7,7 @@ function Query(query_str = "")
|
||||
this.methods = {};
|
||||
this.settings = {};
|
||||
this.routes = {};
|
||||
this.last = query_str.indexOf(" ") > -1 ? query_str.split(" ")[query_str.split(" ").length-1] : query_str;
|
||||
|
||||
for(part_id in parts){
|
||||
var part = parts[part_id];
|
||||
|
@ -4,17 +4,6 @@ function Path()
|
||||
|
||||
this.settings = {thickness:4,color:"white",cap:"square"};
|
||||
|
||||
this.methods.svg = new Method("svg","M0,0 L100,100","",function(q){
|
||||
var path = ronin.commander.query().raw.replace("svg:","").trim();
|
||||
var ctx = ronin.render.context();
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.path.settings.thickness;
|
||||
ctx.strokeStyle = ronin.path.settings.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
|
||||
this.methods.stroke = new Method("stroke","x,y&","",function(q){
|
||||
ronin.preview.clear();
|
||||
|
||||
@ -23,9 +12,9 @@ function Path()
|
||||
var ctx = ronin.render.context();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = r.path.settings.cap;
|
||||
ctx.lineWidth = r.path.settings.thickness;
|
||||
ctx.strokeStyle = r.path.settings.color;
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.path.settings.thickness;
|
||||
ctx.strokeStyle = ronin.path.settings.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
@ -38,13 +27,24 @@ function Path()
|
||||
var ctx = ronin.render.context();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = r.path.settings.cap;
|
||||
ctx.lineWidth = r.path.settings.thickness;
|
||||
ctx.strokeStyle = r.path.settings.color;
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.path.settings.thickness;
|
||||
ctx.fillStyle = ronin.path.settings.color;
|
||||
ctx.fill(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
|
||||
this.methods.svg = new Method("svg","M0,0 L100,100","",function(q){
|
||||
var path = ronin.commander.query().raw.replace("svg:","").trim();
|
||||
var ctx = ronin.render.context();
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.path.settings.thickness;
|
||||
ctx.strokeStyle = ronin.path.settings.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
if(!q.methods.stroke){ return; }
|
||||
|
Loading…
x
Reference in New Issue
Block a user