Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 17, 2015 10:27
Show Gist options
  • Save anonymous/739d118a244c76f3a144 to your computer and use it in GitHub Desktop.
Save anonymous/739d118a244c76f3a144 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kofule
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-app="app">
<div ng-controller="invenioSearchController as vm">
Search Query: {{ vm.invenioSearchQuery }} <br />
<invenio-search
search-endpoint="http://localhost:3000"
>
<invenio-search-bar
search-placeholder="Type something"
></invenio-search-bar>
</invenio-search>
</div>
</div>
<script id="jsbin-javascript">
function invenioSearchController($scope, invenioSearchHandler) {
var vm = this;
vm.invenioSearchQuery = 'a';
vm.invenioSearchArgs = {
method: 'GET',
params: {
page: 1,
size: 20,
}
};
// Helper return all arguments in the url
vm.invenioSearchParseURLArgs = function() {
return invenioSearchHandler.get();
};
// Helper apply arguments changes
vm.invenioSearchPutURLArgs = function(args) {
invenioSearchHandler.set(args);
};
// Every time that the location changes fire search
$scope.$on('$locationChangeStart', function(a, next, current) {
console.log('changed');
// Get the parameters
var parameters = {
params: vm.invenioSearchParseURLArgs()
};
// Merge with the main searchQuery
vm.invenioSearchArgs = angular.merge(
vm.invenioSearchArgs,
parameters
);
});
}
invenioSearchController.$inject = ['$scope', 'invenioSearchHandler'];
function invenioSearch() {
return {
restrict: 'AE',
scope: false,
controller: 'invenioSearchController',
controllerAs: 'vm',
link: function(scope, element, attrs, vm) {
// Update search parameters
var collectedArgs = {
url: attrs.searchEndpoint,
method: attrs.searchMethod || 'GET',
};
// Add any extra parameters
var extraParams = {
params: JSON.parse(attrs.searchExtraParams || '{}')
};
var urlParams = {
params: vm.invenioSearchParseURLArgs()
};
// Update arguments
vm.invenioSearchArgs = angular.merge(
vm.invenioSearchArgs,
collectedArgs,
extraParams,
urlParams
);
}
};
}
function invenioSearchBar($timeout) {
return {
scope: false,
require: '^invenioSearch',
link: function(scope, element, attrs, vm) {
// Add some logic
scope.$watch('vm.invenioSearchQuery', function(newValue, oldValue) {
console.log('aloha');
if (!angular.equals(newValue, oldValue)) {
vm.invenioSearchPutURLArgs({
q: vm.invenioSearchQuery
});
}
});
},
template: ["<input ng-model='vm.invenioSearchQuery'",
"ng-model-options='{ debounce: { 'default': 1500, 'blur': 0 } }' />"].join()
};
}
function invenioSearchHandler($rootScope, $location) {
return {
get: function() {
return $location.search();
},
set: function(params) {
$location.search(params);
}
};
}
invenioSearchHandler.$inject = ['$rootScope', '$location'];
angular
.module('app', [])
.service('invenioSearchHandler', invenioSearchHandler)
.directive('invenioSearch', invenioSearch)
.directive('invenioSearchBar', invenioSearchBar)
.controller('invenioSearchController', invenioSearchController);
</script>
<script id="jsbin-source-javascript" type="text/javascript">function invenioSearchController($scope, invenioSearchHandler) {
var vm = this;
vm.invenioSearchQuery = 'a';
vm.invenioSearchArgs = {
method: 'GET',
params: {
page: 1,
size: 20,
}
};
// Helper return all arguments in the url
vm.invenioSearchParseURLArgs = function() {
return invenioSearchHandler.get();
};
// Helper apply arguments changes
vm.invenioSearchPutURLArgs = function(args) {
invenioSearchHandler.set(args);
};
// Every time that the location changes fire search
$scope.$on('$locationChangeStart', function(a, next, current) {
console.log('changed');
// Get the parameters
var parameters = {
params: vm.invenioSearchParseURLArgs()
};
// Merge with the main searchQuery
vm.invenioSearchArgs = angular.merge(
vm.invenioSearchArgs,
parameters
);
});
}
invenioSearchController.$inject = ['$scope', 'invenioSearchHandler'];
function invenioSearch() {
return {
restrict: 'AE',
scope: false,
controller: 'invenioSearchController',
controllerAs: 'vm',
link: function(scope, element, attrs, vm) {
// Update search parameters
var collectedArgs = {
url: attrs.searchEndpoint,
method: attrs.searchMethod || 'GET',
};
// Add any extra parameters
var extraParams = {
params: JSON.parse(attrs.searchExtraParams || '{}')
};
var urlParams = {
params: vm.invenioSearchParseURLArgs()
};
// Update arguments
vm.invenioSearchArgs = angular.merge(
vm.invenioSearchArgs,
collectedArgs,
extraParams,
urlParams
);
}
};
}
function invenioSearchBar($timeout) {
return {
scope: false,
require: '^invenioSearch',
link: function(scope, element, attrs, vm) {
// Add some logic
scope.$watch('vm.invenioSearchQuery', function(newValue, oldValue) {
console.log('aloha');
if (!angular.equals(newValue, oldValue)) {
vm.invenioSearchPutURLArgs({
q: vm.invenioSearchQuery
});
}
});
},
template: ["<input ng-model='vm.invenioSearchQuery'",
"ng-model-options='{ debounce: { 'default': 1500, 'blur': 0 } }' />"].join()
};
}
function invenioSearchHandler($rootScope, $location) {
return {
get: function() {
return $location.search();
},
set: function(params) {
$location.search(params);
}
};
}
invenioSearchHandler.$inject = ['$rootScope', '$location'];
angular
.module('app', [])
.service('invenioSearchHandler', invenioSearchHandler)
.directive('invenioSearch', invenioSearch)
.directive('invenioSearchBar', invenioSearchBar)
.controller('invenioSearchController', invenioSearchController);</script></body>
</html>
Raw
jsbin.kofule.js
function invenioSearchController($scope, invenioSearchHandler) {
var vm = this;
vm.invenioSearchQuery = 'a';
vm.invenioSearchArgs = {
method: 'GET',
params: {
page: 1,
size: 20,
}
};
// Helper return all arguments in the url
vm.invenioSearchParseURLArgs = function() {
return invenioSearchHandler.get();
};
// Helper apply arguments changes
vm.invenioSearchPutURLArgs = function(args) {
invenioSearchHandler.set(args);
};
// Every time that the location changes fire search
$scope.$on('$locationChangeStart', function(a, next, current) {
console.log('changed');
// Get the parameters
var parameters = {
params: vm.invenioSearchParseURLArgs()
};
// Merge with the main searchQuery
vm.invenioSearchArgs = angular.merge(
vm.invenioSearchArgs,
parameters
);
});
}
invenioSearchController.$inject = ['$scope', 'invenioSearchHandler'];
function invenioSearch() {
return {
restrict: 'AE',
scope: false,
controller: 'invenioSearchController',
controllerAs: 'vm',
link: function(scope, element, attrs, vm) {
// Update search parameters
var collectedArgs = {
url: attrs.searchEndpoint,
method: attrs.searchMethod || 'GET',
};
// Add any extra parameters
var extraParams = {
params: JSON.parse(attrs.searchExtraParams || '{}')
};
var urlParams = {
params: vm.invenioSearchParseURLArgs()
};
// Update arguments
vm.invenioSearchArgs = angular.merge(
vm.invenioSearchArgs,
collectedArgs,
extraParams,
urlParams
);
}
};
}
function invenioSearchBar($timeout) {
return {
scope: false,
require: '^invenioSearch',
link: function(scope, element, attrs, vm) {
// Add some logic
scope.$watch('vm.invenioSearchQuery', function(newValue, oldValue) {
console.log('aloha');
if (!angular.equals(newValue, oldValue)) {
vm.invenioSearchPutURLArgs({
q: vm.invenioSearchQuery
});
}
});
},
template: ["<input ng-model='vm.invenioSearchQuery'",
"ng-model-options='{ debounce: { 'default': 1500, 'blur': 0 } }' />"].join()
};
}
function invenioSearchHandler($rootScope, $location) {
return {
get: function() {
return $location.search();
},
set: function(params) {
$location.search(params);
}
};
}
invenioSearchHandler.$inject = ['$rootScope', '$location'];
angular
.module('app', [])
.service('invenioSearchHandler', invenioSearchHandler)
.directive('invenioSearch', invenioSearch)
.directive('invenioSearchBar', invenioSearchBar)
.controller('invenioSearchController', invenioSearchController);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment