From 5c7e5a1512982cbb24bf8c084143ca099b5a890d Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 15 Nov 2017 15:24:37 +1300 Subject: [PATCH] Implemented autocomplete --- sources/links/main.css | 11 +++++--- sources/scripts/core/commander.js | 23 +++++++++++++++++ sources/scripts/core/hint.js | 42 ++++++++++++++++++++++++++----- sources/scripts/core/keyboard.js | 2 +- sources/scripts/core/query.js | 1 + sources/scripts/modules/path.js | 34 ++++++++++++------------- 6 files changed, 85 insertions(+), 28 deletions(-) diff --git a/sources/links/main.css b/sources/links/main.css index f479b67..36afb4b 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -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; } \ No newline at end of file +#hint i { font-style: italic; } +#hint .autocomplete { background:white; color:black; } + +#cursor_hint { position: absolute;top: 0px;right: 20px;color: white; } \ No newline at end of file diff --git a/sources/scripts/core/commander.js b/sources/scripts/core/commander.js index 7689c8b..2b0a59c 100644 --- a/sources/scripts/core/commander.js +++ b/sources/scripts/core/commander.js @@ -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); diff --git a/sources/scripts/core/hint.js b/sources/scripts/core/hint.js index 80ac373..0a7bda9 100644 --- a/sources/scripts/core/hint.js +++ b/sources/scripts/core/hint.js @@ -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)+""+ac[0]+" > 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)+""+ac[0]+" > 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 ""+s+""; diff --git a/sources/scripts/core/keyboard.js b/sources/scripts/core/keyboard.js index ac5f658..9fb669e 100644 --- a/sources/scripts/core/keyboard.js +++ b/sources/scripts/core/keyboard.js @@ -23,7 +23,7 @@ function Keyboard() if(e.key == "tab" || e.keyCode == 9){ e.preventDefault(); - ronin.commander.focus(); + ronin.commander.autocomplete(); return; } diff --git a/sources/scripts/core/query.js b/sources/scripts/core/query.js index ae3f523..699138e 100644 --- a/sources/scripts/core/query.js +++ b/sources/scripts/core/query.js @@ -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]; diff --git a/sources/scripts/modules/path.js b/sources/scripts/modules/path.js index 1de4924..7b9a7df 100644 --- a/sources/scripts/modules/path.js +++ b/sources/scripts/modules/path.js @@ -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; }