Implemented autocomplete

This commit is contained in:
Devine Lu Linvega 2017-11-15 15:24:37 +13:00
parent ab7bc9cf42
commit 5c7e5a1512
6 changed files with 85 additions and 28 deletions

View File

@ -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; }

View File

@ -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);

View File

@ -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>";

View File

@ -23,7 +23,7 @@ function Keyboard()
if(e.key == "tab" || e.keyCode == 9){
e.preventDefault();
ronin.commander.focus();
ronin.commander.autocomplete();
return;
}

View File

@ -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];

View File

@ -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; }