autocomplete and metric search (996aa137) · Commits · github_fork / Clip

fnordmetric-webui/Makefile

+1 −0

Original line number	Diff line number	Diff line
		@@ -20,6 +20,7 @@ build:
		fnordmetric-webui-visualeditorview.js \
		fnordmetric-webui-queryresultview.js \
		fnordmetric-webui-singlemetricview.js \
		fnordmetric-webui-autocomplete.js \
		codemirror.js \
		) > fnordmetric-webui.js

fnordmetric-webui/fnordmetric-webui-autocomplete.js

0 → 100644

+119 −0

Original line number	Diff line number	Diff line
		/**
		* This file is part of the "FnordMetric" project
		* Copyright (c) 2014 Laura Schlimmer
		* Copyright (c) 2014 Paul Asmuth, Google Inc.
		*
		* FnordMetric is free software: you can redistribute it and/or modify it under
		* the terms of the GNU General Public License v3.0. You should have received a
		* copy of the GNU General Public License along with this program. If not, see
		* <http://www.gnu.org/licenses/>.
		*/
		if (FnordMetric === undefined) {
		FnordMetric = {};
		}

		if (FnordMetric.views === undefined) {
		FnordMetric.views = {};
		}

		FnordMetric.util.Autocomplete = function(elem, input, callback) {
		var source = [];
		// /metrics
		var position;
		var list = document.createElement("ul");
		var items;
		var list_items = [];
		var current_value;
		list.className = "autocomplete";

		function renderListItems() {
		list_items = [];
		items.map(function(item) {
		var li = document.createElement("li");
		li.innerHTML = "<a href='#'>"+item+"</href>";
		list.appendChild(li);
		list_items.push(li);
		});
		}

		function keyNavigation(list_items, i) {
		if (i < list_items.length) {
		if (i > 0) {
		list_items[i - 1].className = "";
		}
		if (i+1 < list_items.length) {
		list_items[i+1].className = "";
		}
		list_items[i].className = "hover";
		}
		}

		function resetList() {
		list.innerHTML = "";
		position = -1;
		current_value = "";
		}

		function init() {

		input.addEventListener('focus', function() {
		resetList();
		renderListItems();
		elem.appendChild(list);
		}, false);

		input.addEventListener('blur', function() {
		elem.removeChild(list);
		}, false);

		input.addEventListener('input', function() {
		items = FnordMetric.util.filterStringArray(
		source, input.value);
		resetList();
		renderListItems();
		elem.appendChild(list);
		}, false);

		input.addEventListener('keydown', function(e) {
		switch (e.keyCode) {
		case 13:
		e.preventDefault();
		if (current_value.length > 0){
		input.value = current_value;
		resetList();
		} else {
		callback(input.value);
		}
		break;
		case 38:
		position--;
		keyNavigation(
		list_items, position);
		current_value = items[position];
		break;
		case 40:
		position++;
		keyNavigation(
		list_items, position);
		current_value = items[position];
		break;
		default:
		break;
		}
		}, false);
		}

		FnordMetric.httpGet("/metrics", function(r) {
		if (r.status == 200) {
		var json = JSON.parse(r.response);
		json.metrics.map(function(metric) {
		source.push(metric.key);
		});
		items = source;
		init();
		}
		});


		}

fnordmetric-webui/fnordmetric-webui-layout.js

+8 −2

Original line number	Diff line number	Diff line
		@@ -39,6 +39,12 @@ FnordMetric.WebUI = function() {
		});
		}

		function setSearchUrl(input) {
		var input = FnordMetric.util.htmlEscape(input);
		FnordMetric.WebUI.singleton.openUrl(
		"metric_list?search="+input);
		}

		function addSearchBar() {
		var searchbar = document.createElement("div");
		searchbar.className = "searchbar";
		@@ -46,8 +52,8 @@ FnordMetric.WebUI = function() {
		searchbar.innerHTML = "<i class='fa fa-search'></i>";
		searchbar.appendChild(searchinput);
		headbar.appendChild(searchbar);
		FnordMetric.util.Autocomplete(searchbar,searchinput, ["foo", "bar"]);

		FnordMetric.util.Autocomplete(
		searchbar,searchinput, setSearchUrl);
		}

		function init() {

fnordmetric-webui/fnordmetric-webui-util.js

+0 −83

Original line number	Diff line number	Diff line
		@@ -362,87 +362,4 @@ FnordMetric.util.filterStringArray = function(strings, filter) {
		return data;
		}

		FnordMetric.util.autocompleteKeyNav = function(list_items, i) {
		if (i < list_items.length) {
		if (i > 0) {
		list_items[i - 1].className = "";
		}
		if (i+1 < list_items.length) {
		list_items[i+1].className = "";
		}
		list_items[i].className = "hover";
		}
		}



		FnordMetric.util.Autocomplete = function(elem, input, source) {
		var position;
		var list = document.createElement("ul");
		var items = source;
		var list_items = [];
		var current_value;
		list.className = "autocomplete";

		function renderListItems() {
		list_items = [];
		items.map(function(item) {
		var li = document.createElement("li");
		li.innerHTML = item;
		list.appendChild(li);
		list_items.push(li);
		});
		}

		input.addEventListener('focus', function() {
		list.innerHTML = "";
		renderListItems();
		elem.appendChild(list);
		position = -1;
		}, false);

		input.addEventListener('blur', function() {
		elem.removeChild(list);
		}, false);

		input.addEventListener('input', function() {
		items = FnordMetric.util.filterStringArray(source, input.value);
		list.innerHTML = "";
		renderListItems();
		elem.appendChild(list);
		position = -1;
		}, false);

		input.addEventListener('keydown', function(e) {
		switch (e.keyCode) {
		case 13:
		e.preventDefault();
		input.value = current_value;
		list.innerHTML = "";
		position = -1;
		if (current_value.length > 0){
		console.log("onSubmit");
		}
		/*
		TODO
		callback function onSubmit
		*/
		break;
		case 38:
		position--;
		FnordMetric.util.autocompleteKeyNav(
		list_items, position);
		current_value = items[position];
		break;
		case 40:
		position++;
		FnordMetric.util.autocompleteKeyNav(
		list_items, position);
		current_value = items[position];
		break;
		default:
		break;
		}
		}, false);
		}

fnordmetric-webui/fnordmetric-webui.css

+3 −2

Original line number	Diff line number	Diff line
		@@ -588,8 +588,9 @@ input {

		ul.autocomplete {
		position: absolute;
		margin-top: 32px;
		width: 208px;
		top: 28px;
		margin-left: 27px;
		width: 360px;
		z-index: 999;
		padding-left: 0px;
		}

Admin message