An Ionic service for searching an image from the web with an endless scroll, similar to Whatsapps Search web
feature when defining image for group.
npm: npm install ion-image-search bower: bower install ion-image-search
Demo can be seen in app:
- Ionic 1.*
- You can either add the basic CSS and JS to the project and then each provider separately:
<link rel="stylesheet" href="wherever-you-put-it/ionImageSearch.css">
<script type="text/javascript" src="wherever-you-put-it/searchProviders/*Provider.js"></script>
<script type="text/javascript" src="wherever-you-put-it/ionImageSearch.js"></script>
Or just add the minified version:
<link rel="stylesheet" href="wherever-you-put-it/ionImageSearch.min.css">
<script type="text/javascript" src="wherever-you-put-it/ionImageSearch.min.js"></script>
- Add the configuration file required by providers and ionImageSearch:
<script src="wherever-you-put-it/ionImageSearch.config.js"></script>
- Add dependencies on the
ion-image-search
AngularJS module:
angular.module('myApp', ['ion-image-search']);
Inject $webImageSelector and call show
to display the modal view:
$webImageSelector.show(configuration);
The show
method receives one optional configuration parameter and returns an object with 2 fields: image
and searchString
image
- The image object selected, has property url
which is url of the image
searchString
- The search string used to retrieve the image
The configuration attributes and default values can be found in the ionImageSearch.config.js
file
maxSuccessiveFails
- Maximum number of seccesive search fails till infinite scroll stops or moving to next service provider if array supplied (see below). default is5
imgSize
- the size of image we want. Default issmall
fileType
- the image file extension. Default isjpg
searchProviders
- An array that Specifies search providers to use. If more than one is supplied to the array than loads from each service provider in order if service provider failed succesively the configuration value ofmaxSuccessiveFails
number of times. Default out of the box is set to useGoogle, Bing, Flickr
in that order
You're more than invited to extend the image provider list and even request a merge to inlarge our list of image providers with API. It is recommended the provider will conform to the existing providers structure, but it is mandatory that it will have at least the following structure:
* Constructor that will receive configuration explained above
* `query(searchText, startIndex)` - an async query method to be called to do the actual query which receives two parameters:
* searchText - the text to actually do the search with
* startIndex - the starting index for this search
* `getPageSize()` - a method which returns the number of items the query retrieves
Don't forget to enter your own keys to the different search providers. you can request them at the following locations:
Google -
Bing - go to azure and get a key. To get auth value take the app key previously aquired add ':' to the start and transform it into base64 with a leading. This value will be set using: 'Basic' authetication, e.g if your key is x set in the ionImageSearch.config.js file auth: 'basic x'. See (here)[http://stackoverflow.com/questions/27311286/what-are-the-ajax-authorization-headers-for-a-bing-api-request/27315449#27315449] for additional info
Flickr -
TBD. Currently only manually
As AngularJS itself, this module is released under the permissive MIT license. Your contributions are always welcome.