Skip to content

Commit

Permalink
fixes and new features
Browse files Browse the repository at this point in the history
  • Loading branch information
@signalkuppe
signalkuppe committed Apr 19, 2016
1 parent e8f5730 commit 0705c37
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 66 deletions.
9 changes: 7 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,11 @@ Type: `String`

The object property to display in the suggestions (ignored when using a custom template)

#### btc-keepselection
Type: `String`

Keeps the result label as the value of the input: suggested for an item field

#### btc-placeholder
Type: `String`

Expand All @@ -122,12 +127,12 @@ search function
#### btc-callback
Type: `String`

callback function
callback function fired after the selection: the full result is passed as paramter

#### btc-noresults
Type: `String`

String to display when the are no results (default: Your search yielded no results)
String to display when the are no results (default: Your search yielded no results, ignored when using a custom template)

#### btc-template
Type: `String`
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bootcomplete",
"version": "0.0.5",
"version": "0.0.6",
"authors": [
"Matteo Leoni <[email protected]>"
],
Expand Down
96 changes: 55 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -9,77 +10,89 @@

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-cloak>
</head>

<body ng-cloak>
<div class="container" ng-controller="autocomplete">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<div class="page-header">
<h1>Bootcomplete <small>dev</small></h1>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<label for="" class="control-label">Google maps api</label>
<bootcomplete
btc-minlength="1"
btc-maxresults="5"
btc-size="md"
btc-label="formatted_address"
btc-placeholder="Search a city..."
btc-query="citySearch"
btc-noresults="No results!"
btc-callback="cityCallback"
ng-model="city"></bootcomplete>
<label for="" class="control-label">Basic usage, Google maps api</label>
<bootcomplete btc-minlength="1" btc-maxresults="5" btc-size="md" btc-label="formatted_address" btc-placeholder="Search a city..." btc-query="citySearch" btc-noresults="No results!" btc-callback="cityCallback" ng-model="city"></bootcomplete>
</div>
<div class="col-md-12" ng-show="selected_city">
<span class="label label-info">{{selected_city}}</span>
</div>
</div>
<div class="row" ng-if="city">
<div class="row">
<div class="col-md-12">
<hr />
<p><strong>Result:</strong> <a href="" ng-click="reset()">Clear</a></p>
<pre>{{city | json}}</pre>
</div>
</div>
<!--/cities-->
<!--/example1-->

<div class="row">
<div class="col-md-12"><hr /></div>
<div class="col-md-12">
<label for="" class="control-label">Basic usage, Google maps api with keepselection</label>
<bootcomplete btc-minlength="1" btc-maxresults="5" btc-size="md" btc-label="formatted_address" btc-placeholder="Search a city..." btc-query="citySearch" btc-noresults="No results!" btc-keepselection="true" ng-model="city2"></bootcomplete>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="" class="control-label">openweathermap.org api</label>
<bootcomplete
btc-minlength="1"
btc-maxresults="3"
btc-size="md"
btc-placeholder="get 3 hour forecast for..."
btc-query="forecastSearch"
btc-noresults="No results!"
btc-callback="forecastCallback"
btc-template="/src/forecast.html"
ng-model="forecast"></bootcomplete>
<hr />
</div>
</div>
<!--/example2-->

<div class="row">
<div class="col-md-12">
<label for="" class="control-label">Custom template openweathermap.org api</label>
<bootcomplete btc-minlength="1" btc-maxresults="3" btc-size="md" btc-placeholder="get 3 hour forecast for..." btc-query="forecastSearch" btc-callback="forecastCallback" btc-template="/src/forecast.html" ng-model="forecast"></bootcomplete>
</div>
<div class="col-md-12" ng-show="forecast_detail">
<hr />
<a href="" ng-click="forecast_detail=false">Clear</a>
<pre>{{forecast_detail | json}}</pre>
</div>
</div>
<div class="row" ng-if="forecast">
<div class="row">
<div class="col-md-12">
<hr />
<p><strong>Result:</strong> <a href="" ng-click="reset()">Clear</a></p>
<pre>{{forecast | json}}</pre>
</div>
</div>
<!--/example3-->

<div class="row">
<div class="col-md-12">
<label for="" class="control-label">Custom template with Google maps api</label>
<bootcomplete btc-minlength="1" btc-maxresults="5" btc-size="md" btc-placeholder="Search a city..." btc-query="citySearch" btc-template="/src/cities.html" btc-callback="cityCallback2" ng-model="city3"></bootcomplete>
</div>
<div class="col-md-12" ng-show="selected_city2">
<span class="label label-info">{{selected_city2}}</span>
</div>
</div>
<!--/forecast-->

<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<!--/example3-->

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
Expand All @@ -91,5 +104,6 @@ <h1>Bootcomplete <small>dev</small></h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.2/angular-resource.min.js"></script>
<script src="/src/bootcomplete.js"></script>
<script src="/src/app.js"></script>
</body>
</body>

</html>
17 changes: 8 additions & 9 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,17 @@ app
app
.controller('autocomplete', function ($scope, ENDPOINT) {

$scope.reset = function () {
$scope.city = $scope.forecast = undefined;
};

$scope.citySearch = function (searchstring) {
return ENDPOINT.city({
address: searchstring,
sensor: false
}).$promise;
};

$scope.cityCallback = function () {
console.log('city callback fired!');
$scope.cityCallback = function (value) {
$scope.selected_city = value.formatted_address;
};


$scope.forecastSearch = function (searchstring) {
return ENDPOINT.forecast({
q: searchstring,
Expand All @@ -55,7 +50,11 @@ app
}).$promise;
};

$scope.forecastCallback = function () {
console.log('forecast callback fired!');
$scope.forecastCallback = function (value) {
$scope.forecast_detail = value;
};

$scope.cityCallback2 = function (value) {
$scope.selected_city2 = value.formatted_address;
};
});
37 changes: 27 additions & 10 deletions src/bootcomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ directive('bootcomplete', ["$compile", "$templateRequest", "$timeout", "$sce", f
btcPlaceholder: '@',
btcMaxresults: '@',
btcNoresults: '@',
btcKeepselection: '@',
btcQuery: '=',
btcCallback: '='
btcCallback: '=',
bindModel: '=ngModel'
},
template: "<div class='input-group input-group-{{btcSize}}'>\n" +
"<input placeholder='{{btcPlaceholder}}' type='text' class='form-control' ng-blur='blur($event)' autocomplete=\"off\"/>\n" +
"<input placeholder='{{btcPlaceholder}}' type='text' class='form-control' ng-model='bindModel' ng-blur='blur($event)' autocomplete=\"off\"/>\n" +
"<span class='input-group-addon'><i class='fa fa-refresh' ng-class=\"{'fa-spin': loading }\"></i></span>\n" +
"</div>",
link: function (scope, element, attrs, controller) {
Expand Down Expand Up @@ -47,31 +49,46 @@ directive('bootcomplete', ["$compile", "$templateRequest", "$timeout", "$sce", f
scope.minlength = scope.btcMinlength || 1;
scope.noresultsMsg = scope.btcNoresults || 'Your search yielded no results';

_getCords();
scope.$watch("visible", function (newValue, oldValue) {
if (newValue === false) {
return;
}
_getCords();
});

// select item
scope.select = function (index) {

if (!scope.btcTemplate)
delete scope.results[index].btclabel; // delete label from object

// clear input if we don't want to display the selection
if (!scope.btcKeepselection) {
input.value = '';
}
// otherwise update the input with the selected value, and get out of focus
else {
input.value = scope.results[index][scope.btcLabel];
input.blur();
}
// call the callback with the result as parameter
if (scope.btcCallback)
scope.btcCallback.call(null, scope.results[index]);

element.controller('ngModel').$setViewValue(scope.results[index]);
scope.btcCallback.call();
scope.close();
};

// close autocomplete
scope.close = function () {
scope.visible = false;
scope.selectedIndex = -1;
input.value = '';
};

// close on blur
scope.blur = function (e) {
setTimeout(function () {
var focused = document.activeElement;
if (focused.tagName !== 'A' && focused.className.indexOf('btc-clickLink') === -1) {
if (focused.tagName !== 'A' || focused.className.indexOf('btc-clickLink') === -1) {
scope.close();
scope.$apply();
} // check the elemnt with focus
Expand All @@ -83,7 +100,6 @@ directive('bootcomplete', ["$compile", "$templateRequest", "$timeout", "$sce", f
document.body.appendChild(html);
};


input.onkeyup = function (e) {
scope.search = e.target.value;
if (scope.search.length >= scope.minlength && e.keyCode !== 40 && e.keyCode !== 38) {
Expand All @@ -94,6 +110,7 @@ directive('bootcomplete', ["$compile", "$templateRequest", "$timeout", "$sce", f
// max result length
scope.results = scope.btcMaxresults ? results.slice(0, scope.btcMaxresults) : results;


// results label
if (!scope.btcTemplate) {
scope.results.map(function (result) {
Expand Down Expand Up @@ -158,7 +175,7 @@ directive('bootcomplete', ["$compile", "$templateRequest", "$timeout", "$sce", f
scope.makeDom(compiledhtml);
});
} else {

var output = wrapper + suggestionTemplate + wrapper_closure,
compiledhtml = $compile(output)(scope)[0];

Expand Down
16 changes: 16 additions & 0 deletions src/cities.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@

<div class="alert alert-warning" ng-if="!results.length">Location not found</div>
<table class="table table-condensed table-bordered" ng-if="results.length" style="background: white;">
<thead>
<th>Location</th>
<th>Lat</th>
<th>Long</th>
</thead>
<tbody>
<tr ng-repeat="result in results" ng-class="{'bg-primary':selectedIndex === $index}">
<td>{{result.formatted_address}}</td>
<td>{{result.geometry.location.lat}}</td>
<td>{{result.geometry.location.lng}}</td>
</tr>
</tbody>
</table>
10 changes: 7 additions & 3 deletions src/forecast.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="panel panel-default">
<div class="panel panel-default" ng-if="results.length">
<div class="panel-body">
<span class="h4"><small>Next 3 hours forecast for </small>{{results[0].city.name}} ({{results[0].city.country}})</span>
<hr />
<div class="media" ng-repeat="result in results">
<div class="media" ng-repeat="result in results" ng-class="{'bg-info':selectedIndex === $index}" style="padding: 10px;">
<div class="media-left text-center">
{{result.dt * 1000 | date:'HH:mm'}}
<img ng-src="http://openweathermap.org/img/w/{{result.weather[0].icon}}.png">
Expand All @@ -14,7 +14,11 @@
<h5 class="media-heading">{{result.weather[0].description}} </h5>
<span>{{result.main.temp}}°C {{result.main.humidity}}%</span>
</div>
<hr style="margin:0;" ng-show="!$last" />
</div>
</div>
</div>
<div class="panel panel-default" ng-if="!results.length">
<div class="panel-body">
<div class="alert alert-warning">Location not found</div>
</div>
</div>

0 comments on commit 0705c37

Please sign in to comment.