From d0980cecc5b7d07ff4fa8fe34646c058745d0060 Mon Sep 17 00:00:00 2001 From: Sven Slootweg Date: Wed, 9 Oct 2013 17:02:33 +0200 Subject: [PATCH] Autocompletion for property names --- .../modules/autocomplete/propertyname.php | 32 ++++++++++++++ public_html/rewrite.php | 4 ++ public_html/static/css/openng.css | 32 +++++++++----- public_html/static/js/jquery-autocomplete.js | 25 +++++++++-- public_html/static/js/openng.js | 9 ++-- public_html/templates/index.tpl | 14 ++++++ public_html/templates/nodes/create.tpl | 2 +- scss/openng.scss | 44 +++++++++++++------ 8 files changed, 128 insertions(+), 34 deletions(-) create mode 100644 public_html/modules/autocomplete/propertyname.php diff --git a/public_html/modules/autocomplete/propertyname.php b/public_html/modules/autocomplete/propertyname.php new file mode 100644 index 0000000..4cec8e3 --- /dev/null +++ b/public_html/modules/autocomplete/propertyname.php @@ -0,0 +1,32 @@ + "%{$_GET['q']}%")); +} +catch (NotFoundException $e) +{ + $sNodes = array(); +} + +$sData = array(); + +foreach($sNodes as $sNode) +{ + $sData[] = array( + "value" => $sNode->sName + ); +} diff --git a/public_html/rewrite.php b/public_html/rewrite.php index d80585f..da196e3 100644 --- a/public_html/rewrite.php +++ b/public_html/rewrite.php @@ -40,6 +40,10 @@ $router->routes = array( "^/autocomplete/search$" => array( "target" => "modules/autocomplete/search.php", "_json" => true + ), + "^/autocomplete/propertyname$" => array( + "target" => "modules/autocomplete/propertyname.php", + "_json" => true ) ) ); diff --git a/public_html/static/css/openng.css b/public_html/static/css/openng.css index 28861f7..dd0a93a 100644 --- a/public_html/static/css/openng.css +++ b/public_html/static/css/openng.css @@ -29,30 +29,33 @@ form.inline { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } -#autocomplete_search { +.autocompleter { display: none; position: absolute; - width: 400px; + /* TODO: set this in the JS! */ + z-index: 9999999; + -webkit-font-smoothing: antialiased; + font-family: 'Istok Web'; background-color: white; border: 1px solid #5a6dbb; border-radius: 0px 0px 3px 3px; - border-top: none; - -webkit-font-smoothing: antialiased; - font-family: 'Istok Web'; - z-index: 9999999; } + border-top: none; } + .autocompleter .entry { + color: #393939; } + .autocompleter .entry.selected { + background-color: #4253B6; + color: white; } + +#autocomplete_search { + width: 400px; } #autocomplete_search .entry { border-bottom: 1px solid #c2c2c2; - padding: 7px 9px; - color: #393939; } + padding: 7px 9px; } #autocomplete_search .entry:last-child { border-bottom: none; } -#autocomplete_search .entry.selected { - background-color: #4253B6; - color: white; } - #autocomplete_search .entry .name { font-size: 18px; font-weight: bold; } @@ -216,6 +219,11 @@ i.notification { margin: 4px 0px; padding-left: 48px; } +#autocomplete_propertyname { + font-size: 13px; } + #autocomplete_propertyname .entry, #autocomplete_propertyname .noresults, #autocomplete_propertyname .loading { + padding: 4px 6px; } + .window-inner .header, .window-inner h1, .window-inner h2 { margin: 4px 0px; } .window-inner .lower-header, .window-inner h2 { diff --git a/public_html/static/js/jquery-autocomplete.js b/public_html/static/js/jquery-autocomplete.js index 264259b..5ccf1d0 100644 --- a/public_html/static/js/jquery-autocomplete.js +++ b/public_html/static/js/jquery-autocomplete.js @@ -247,8 +247,18 @@ AutoCompleterInstance.prototype.show = function() { .off('selectstart'); }; - $.fn.autoComplete = function(autocompleter, source, callback) { - this.on("input.autocomplete_hook", function(){ + $.fn.autoComplete = function(autocompleter, source, selector, callback) { + if(typeof selector === "string") + { + var persistent = true; + } + else + { + var persistent = false; + callback = selector; // Shift arguments + } + + var event = function(){ if(!$(this).data("attached-autocomplete")) { var instance = autocompleter.spawn(new source($(this))); @@ -259,7 +269,16 @@ AutoCompleterInstance.prototype.show = function() { instance._updateItems(); $(this).attr("autocomplete", "off"); } - }); + }; + + if(persistent === true) + { + this.on("input.autocomplete_hook", selector, event); + } + else + { + this.on("input.autocomplete_hook", event); + } return this; }; diff --git a/public_html/static/js/openng.js b/public_html/static/js/openng.js index 46db71f..0458bd8 100644 --- a/public_html/static/js/openng.js +++ b/public_html/static/js/openng.js @@ -97,9 +97,6 @@ function placeHooksForWindow(win) console.log("Hooking", this, "using callback", callback); hookSubmitEvent($(this), window[callback], window[error_callback]); } - - /*$ - $("#thing").autoComplete(autocompleter_propertyname, new PropertyNameCompletionSource($("#thing")));*/ }); } @@ -294,6 +291,10 @@ $(function(){ this.target.val(""); }); + autocompleter_propertyname = new AutoCompleter("propertyname"); + + $("body").autoComplete(autocompleter_propertyname, PropertyNameCompletionSource, "input.input-propertyname"); + $("body").keydown(function(event){ switch(event.which) { @@ -314,5 +315,3 @@ $(function(){ } }); }); - -autocompleter_propertyname = new AutoCompleter("propertyname"); diff --git a/public_html/templates/index.tpl b/public_html/templates/index.tpl index b2a4076..3daaeaf 100644 --- a/public_html/templates/index.tpl +++ b/public_html/templates/index.tpl @@ -79,6 +79,20 @@ +
+
+
+ Property name +
+
+
+ No results. +
+
+ Searching... +
+
+
diff --git a/public_html/templates/nodes/create.tpl b/public_html/templates/nodes/create.tpl index e2f6724..a1c1b80 100644 --- a/public_html/templates/nodes/create.tpl +++ b/public_html/templates/nodes/create.tpl @@ -31,7 +31,7 @@
- +
diff --git a/scss/openng.scss b/scss/openng.scss index 4ec5b3e..32e1d66 100644 --- a/scss/openng.scss +++ b/scss/openng.scss @@ -45,25 +45,39 @@ form.inline border-bottom-left-radius: 0px; } -#autocomplete_search +.autocompleter { display: none; - position: absolute; - width: 400px; + position: absolute; /* TODO: set this in the JS! */ + z-index: 9999999; + -webkit-font-smoothing: antialiased; + font-family: 'Istok Web'; background-color: white; border: 1px solid #5A6DBB; border-radius: 0px 0px 3px 3px; border-top: none; - -webkit-font-smoothing: antialiased; - font-family: 'Istok Web'; - z-index: 9999999; + + .entry + { + color: #393939; + + &.selected + { + background-color: #4253B6; + color: white; + } + } +} + +#autocomplete_search +{ + width: 400px; } #autocomplete_search .entry { border-bottom: 1px solid #C2C2C2; padding: 7px 9px; - color: #393939; } #autocomplete_search .entry:last-child @@ -71,12 +85,6 @@ form.inline border-bottom: none; } -#autocomplete_search .entry.selected -{ - background-color: #4253B6; - color: white; -} - #autocomplete_search .entry .name { font-size: 18px; @@ -314,6 +322,16 @@ i.notification padding-left: 48px; } +#autocomplete_propertyname +{ + font-size: 13px; + + .entry, .noresults, .loading + { + padding: 4px 6px; + } +} + .window-inner { .header