Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add some features #18

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add some features #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ed5aef
1st push-request
gatorliu Sep 10, 2015
f5f843d
modify try to passs travis-ci test
gatorliu Sep 11, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/angular-advanced-searchbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@

.advancedSearchBox .search-parameter-input {
display: inline-block;
width: auto;
width: 100px;
height: 24px;
border: 0;
margin: 0;
Expand Down Expand Up @@ -107,4 +107,4 @@
cursor: pointer;
background-color: #bdbdbd;
color: #fff;
}
}
110 changes: 67 additions & 43 deletions src/angular-advanced-searchbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,68 @@
<div class="advancedSearchBox" ng-class="{active:focus}" ng-init="focus = false" ng-click="!focus ? setSearchFocus = true : null">
<span ng-show="searchParams.length < 1 && searchQuery.length === 0" class="search-icon glyphicon glyphicon-search"></span>
<a ng-href="" ng-show="searchParams.length > 0 || searchQuery.length > 0" ng-click="removeAll()" role="button">
<span class="remove-all-icon glyphicon glyphicon-trash"></span>
</a>
<div>
<div class="search-parameter" ng-repeat="searchParam in searchParams">
<a ng-href="" ng-click="removeSearchParam($index)" role="button">
<span class="remove glyphicon glyphicon-trash"></span>
</a>
<div class="key">{{searchParam.name}}:</div>
<div class="value">
<span ng-if="!searchParam.editMode" ng-click="enterEditMode($index)">{{searchParam.value}}</span>
<input name="value"
type="text"
nit-auto-size-input
nit-set-focus="searchParam.editMode"
ng-keydown="keydown($event, $index)"
ng-blur="leaveEditMode($index)"
ng-if="searchParam.editMode"
ng-change="searchParamValueChanged(searchParam)"
ng-model="searchParam.value"
placeholder="{{searchParam.placeholder}}" />
</div>
</div>
<input name="searchbox"
class="search-parameter-input"
type="text"
nit-auto-size-input
nit-set-focus="setSearchFocus"
ng-keydown="keydown($event)"
placeholder="{{placeholder}}"
ng-focus="focus = true"
ng-blur="focus = false"
typeahead-on-select="typeaheadOnSelect($item, $model, $label)"
typeahead="parameter as parameter.name for parameter in parameters | filter:isUnsedParameter | filter:{name:$viewValue} | limitTo:8"
ng-change="searchQueryChanged(searchQuery)"
ng-model="searchQuery" />
</div>
<div class="search-parameter-suggestions" ng-show="parameters && focus">
<span class="title">Parameter Suggestions:</span>
<span class="search-parameter" ng-repeat="param in parameters | filter:isUnsedParameter | limitTo:8" ng-mousedown="addSearchParam(param)">{{param.name}}</span>
</div>
</div>
<form ng-submit="Enter()">
<span ng-show="isDefault() && searchQuery.length === 0" class="search-icon fa fa-search"></span>
<a ng-href="" ng-hide="isDefault() && searchQuery.length === 0" ng-click="removeAll()" role="button">
<span class="remove-all-icon fa fa-refresh"></span>
</a>
<div>
<div class="search-parameter" ng-repeat="searchParam in searchParams">
<a ng-href="" ng-click="removeSearchParam($index)" role="button" ng-hide="searchParam.required">
<span class="remove fa fa-trash"></span>
</a>
<a ng-href="" ng-click="" role="button" ng-show="searchParam.required">
<span class="remove"></span>
</a>
<div class="key">{{searchParam.name}}:</div>
<div class="value" ng-if="searchParam.type != 'list'">
<span ng-if="!searchParam.editMode" ng-click="enterEditMode($index)">&nbsp;{{(searchParam.type == 'date') ? (searchParam.value| date: "yyyy-MM-dd"): searchParam.value}}</span>
<input name="value"
type="{{searchParam.type}}"
ng-model-options="{ timezone: '+0000' }"
nit-set-focus="searchParam.editMode"
ng-keydown="keydown($event, $index)"
ng-blur="leaveEditMode($index)"
ng-if="searchParam.editMode"
ng-change="searchParamValueChanged(searchParam)"
ng-model="searchParam.value"
placeholder="{{searchParam.placeholder}}" />
<!--
ng-model-options="{ timezone : '+0000'}"
nit-auto-size-input
-->
</div>
<div class="value" ng-if="searchParam.type == 'list'">
<span ng-if="!searchParam.editMode" ng-click="enterEditMode($index)">&nbsp;{{searchParam.value.cname || searchParam.value.name}}</span>
<select
nit-set-focus="searchParam.editMode"
ng-keydown="keydown($event, $index)"
ng-blur="leaveEditMode($index)"
ng-if="searchParam.editMode"
ng-change="searchParamValueChanged(searchParam)"
ng-model="searchParam.value"
ng-options="m.cname || m.name for m in searchParam.options"
/>
<!-- ng-init="searchParam.value = searchParam.options[0]" -->

</select>
</div>
</div>
<input name="searchbox"
class="search-parameter-input"
type="text"
nit-auto-size-input
nit-set-focus="setSearchFocus"
ng-keydown="keydown($event)"
placeholder="{{placeholder}}"
ng-focus="focus = true"
ng-blur="focus = false"
typeahead-on-select="typeaheadOnSelect($item, $model, $label)"
typeahead="parameter as parameter.name for parameter in parameters | filter:isUnsedParameter | filter:{name:$viewValue} | limitTo:8"
ng-change="searchQueryChanged(searchQuery)"
ng-model="searchQuery" />
</div>
<div class="search-parameter-suggestions" ng-show="(parameters | filter:isUnsedParameter).length && focus">
<span class="title">Parameter Suggestions:</span>
<span class="search-parameter" ng-repeat="param in parameters | filter:isUnsedParameter | limitTo:8" ng-mousedown="addSearchParam(param)">{{param.name}}</span>
</div>
</form>
</div>
65 changes: 59 additions & 6 deletions src/angular-advanced-searchbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ angular.module('angular-advanced-searchbox', [])
scope: {
model: '=ngModel',
parameters: '=',
defaultparams: '=',
enter: '=',
placeholder: '@'
},
replace: true,
Expand All @@ -29,11 +31,23 @@ angular.module('angular-advanced-searchbox', [])
$scope.searchParams = [];
$scope.searchQuery = '';
$scope.setSearchFocus = false;
$scope.Enter = $scope.enter;
var searchThrottleTimer;
var changeBuffer = [];
if ($scope.defaultparams) {
if (!$scope.defaultparams.query) {
$scope.defaultparams.query = '';
}
} else {
$scope.defaultparams = {};
}
$scope.model = angular.copy($scope.defaultparams);

$scope.$watch('model', function (newValue, oldValue) {
$scope.$watch('defaultparams', function () {
$scope.model = angular.copy($scope.defaultparams);
});

$scope.$watch('model', function (newValue, oldValue) {
if(angular.equals(newValue, oldValue))
return;

Expand Down Expand Up @@ -62,6 +76,9 @@ angular.module('angular-advanced-searchbox', [])
});
}, true);

$scope.isDefault = function () {
return angular.equals($scope.defaultparams, $scope.model);
};
$scope.searchParamValueChanged = function (param) {
updateModel('change', param.key, param.value);
};
Expand All @@ -76,6 +93,7 @@ angular.module('angular-advanced-searchbox', [])

var searchParam = $scope.searchParams[index];
searchParam.editMode = true;
$scope.focus = true; // by GatorLiu
};

$scope.leaveEditMode = function(index) {
Expand Down Expand Up @@ -112,11 +130,18 @@ angular.module('angular-advanced-searchbox', [])
key: searchParam.key,
name: searchParam.name,
placeholder: searchParam.placeholder,
type: searchParam.type, // GatorLiu
options : searchParam.options, // GatorLiu
required:searchParam.required,
value: value || '',
editMode: enterEditModel
}
);

if (value === undefined) {
$timeout( function(){
$scope.focus = true;
});
}
updateModel('add', searchParam.key, value);
};

Expand All @@ -125,6 +150,7 @@ angular.module('angular-advanced-searchbox', [])
return;

var searchParam = $scope.searchParams[index];
if (searchParam.required) return;
$scope.searchParams.splice(index, 1);

updateModel('delete', searchParam.key);
Expand All @@ -135,17 +161,23 @@ angular.module('angular-advanced-searchbox', [])
$scope.searchQuery = '';

$scope.model = {};
$scope.model= angular.copy($scope.defaultparams);
$scope.focus = false;
};

$scope.editPrevious = function(currentIndex) {
if (currentIndex !== undefined)
$scope.leaveEditMode(currentIndex);

//TODO: check if index == 0 -> what then?
//console.log(currentIndex)
if (currentIndex > 0) {
$scope.enterEditMode(currentIndex - 1);
//} else if (currentIndex === undefined) {
// $scope.enterEditMode($scope.searchParams.length - 1);
} else if ($scope.searchParams.length > 0) {
$scope.enterEditMode($scope.searchParams.length - 1);
// $scope.setSearchFocus = true;
}
};

Expand All @@ -167,12 +199,32 @@ angular.module('angular-advanced-searchbox', [])
var handledKeys = [8, 9, 13, 37, 39];
if (handledKeys.indexOf(e.which) === -1)
return;

var cursorPosition = getCurrentCaretPosition(e.target);
/*
* Most browsers( IE, firefox, safari..) not suport html5 input type 'date',
if (e.target.type == 'date'){
if (e.which == 13) { // enter
$scope.editNext(searchParamIndex);
}
return;
}
*/
var notSupportType;
var cursorPosition;
try{
notSupportType = false;
cursorPosition = getCurrentCaretPosition(e.target);
} catch(err) {
notSupportType = true;
}

if (e.which == 8) { // backspace
if (cursorPosition === 0)
$scope.editPrevious(searchParamIndex);
if ( notSupportType || cursorPosition === 0) {
e.preventDefault();
if (searchParamIndex === 0)
$scope.editNext(searchParamIndex);
else
$scope.editPrevious(searchParamIndex);
}

} else if (e.which == 9) { // tab
if (e.shiftKey) {
Expand Down Expand Up @@ -236,6 +288,7 @@ angular.module('angular-advanced-searchbox', [])
});

changeBuffer.length = 0;
//$scope.focus = true; // by GatorLiu for <select> Click
}, 500);
}

Expand Down