jQuery Tapatar – A lightweight, extensible plugin, that lets users pick an avatar from a social network, disk, or other source
Tapatar is a lightweight, extensible jQuery plugin, that lets users pick an avatar from a social network, disk, or other source. By default, Gravatar, Local and Facebook sources are included. Tapatar has been built to make it very easy to add additional sources.
Getting started
First download Tapatar and add it to your project. Next initiate Tapatar, by attaching it to a hidden input:
$('input.tapatar').tapatar({ sources: { gravatar: { email: 'foo@bar.com' }, facebook: { appId: 1657455811156921 } }});After the user has succesfully picked an avatar from one of the sources, the image will be set as a data uri to the value of the input to which Tapatar was bound.
Tapatar options
The Tapatar object provides the following properties and methods.
Properties
| Property | Type | Description |
|---|---|---|
| sources | object | Each object key represents a source |
| sources.sourceName | object | Each object key represents a source |
| sources.sourceName.enabled | boolean | Wheter or not this source is enabled |
| sources.sourceName.order | int | The position at which this source will be showed in the picker |
| image_url_prefix | string | The path to the folder that contains the images for Tapatar. Default: ‘img/’ |
| default_image | string|function | Either a path, or a function returning a path to the default image. |
| templates | object | An object containing the templates for the widget, overlay, picker and source. See source for more info |
Methods
| Method | Description |
|---|---|
| registerSource(TapatarSource) | Use this method to add a new source at runtime |
| pickSource(TapatarSource) | Set a specific source as the picked source. This is method is usually called from within the actual source (which has the Tapatar object set as its delegate) |
| imageDataSet(TapatarSource, pick) | Set the image data for the input. This is method is usually called from within the actual source (which has the Tapatar object set as its delegate) |
Creating your own avatar source
The TapatarSource object provides a common base to create additional sources.
Tptr.sources.placeKitten = new Tptr.TapatarSource({ id: 'placeKitten', title: 'Placekitten', action: { content: 'Pick', onClick: function(evt) { if (this.image_data) { this.setImageData(this.image_data, true); } } }, onAdd: function() { var url = 'https://placekitten.com/g/200/300'; var self = this; this.downloadImage(url, function(dataUri){ if (dataUri) { self.setImageData(dataUri); } else { try { self.delegate.options.sources.placeKitten.enabled = false; } catch(err) {} } }) },});Properties
| Property | Type | Description |
|---|---|---|
| id | string | The id for this source. This should correspond to the object key in the options.sources object for this source |
| title | string | The source’s title |
| action.content | string | The text on the “pick” button for this source |
| action.onClick | function | The click handler for the “pick” button for this source. |
| onAdd | function | This callback is called when the source is added to the inited. Here you can do preliminary work, like checking if an image is available at a certain url |
| Inherited properties | ||
| delegate | Tptr | A reference back to the Tptr object |
| image_data | string | The downloaded image data. This can be set through the setImageData() method |
| icon | string|function | Either a path, or a function returning a path to the icon for this source. |
Methods
| Method | Description |
|---|---|
| setImageData(data, pick) | Set the downloaded image data for this source |
| pick() | Set this source as the picked source |
| downloadImage(url, callback) | Download image data from a url |
Website: https://tapfiliate.com/open-source/tapatar/
Source : https://github.com/tapfiliate/tapatar/archive/master.zip
Demo: https://tapfiliate.com/open-source/tapatar/demo/
Thanks for reading,
Nabeel Shahid.
Recent Comments