<commit_before># three-finger-tap-js

[![release](https://img.shields.io/github/release/sidthesloth92/three-finger-tap-js.svg)](https://github.com/sidthesloth92/three-finger-tap-js/releases/tag/v1.0.1)
[![build](https://img.shields.io/travis/sidthesloth92/three-finger-tap-js.svg)](https://travis-ci.org/sidthesloth92/three-finger-tap-js/builds)
[![dependencies](https://david-dm.org/sidthesloth92/three-finger-tap-js.svg)](https://david-dm.org/sidthesloth92/three-finger-tap-js)
[![NPM Downloads](https://img.shields.io/npm/dt/https://github.com/sidthesloth92/three-finger-tap-js.svg)](https://www.npmjs.com/package/https://github.com/sidthesloth92/three-finger-tap-js)



A small (actually really small, around 1KB) library, that attempts to mimic the three finger tap behaviour exhibited when you 
tap on a URL with three fingers in Safari.

In Safari, when the user taps on a hyperlink using three fingers, a small preview window opens that shows the webpage the
link would have taken the use to. This library attempts to mimic that behaviour. But instead of using the three finger tap gesture to
open the URL preview window (as it is not available on all hardware), the library makes use of timed hover gesture to achieve
the same.

## Preview

![alt text](https://s19.postimg.org/ivqm47ddv/ezgif_com_video_to_gif_1.gif "Snippets Preview")

## Demo

You have a look at the demo [here](https://sidthesloth92.github.io/three-finger-tap-js/demo.html).

## Installation
You can install the library as a dependency over NPM or you can simply download the release from the dist folder [here](https://github.com/sidthesloth92/three-finger-tap-js/tree/master/dist).

    npm i three-finger-tap-js

## Usage

1. Assign an appropriate class name to all the `<a>` (anchor) tags for which you wish to add the hover effect to.
```html
<a href="https://wikipedia.org" class="three-finger-tap">Link</a>
```
2. Add references to `threeFingerTap.min.js` and `threeFingerTap.min.css` to the HTML page.
```html

<link rel="stylesheet" href="../dist/css/threeFingerTap.min.css">

<script type="text/javascript" src="../dist/js/threeFingerTap.min.js"></script>
    
```
3. Call the library using the init method and see the magic happen.
```javascript
threeFingerTap.init({ 
    name : 'three-finger-tap', 
    hoverTimeout : 1000
})
```
## API

### Methods

`init`

Initializes the library and adds it to the window object with the name threeFingerTap. Use this method only once when you
load the page.

**Parameters** 

An object with name, hoverTimeout and customLoadingBackground as keys.

| Name | Description | Type | Required | Default |<commit_msg>chore(documentation): updated readme with proper bullets<commit_after># three-finger-tap-js

[![release](https://img.shields.io/github/release/sidthesloth92/three-finger-tap-js.svg)](https://github.com/sidthesloth92/three-finger-tap-js/releases/tag/v1.0.1)
[![build](https://img.shields.io/travis/sidthesloth92/three-finger-tap-js.svg)](https://travis-ci.org/sidthesloth92/three-finger-tap-js/builds)
[![dependencies](https://david-dm.org/sidthesloth92/three-finger-tap-js.svg)](https://david-dm.org/sidthesloth92/three-finger-tap-js)
[![NPM Downloads](https://img.shields.io/npm/dt/https://github.com/sidthesloth92/three-finger-tap-js.svg)](https://www.npmjs.com/package/https://github.com/sidthesloth92/three-finger-tap-js)



A small (actually really small, around 1KB) library, that attempts to mimic the three finger tap behaviour exhibited when you 
tap on a URL with three fingers in Safari.

In Safari, when the user taps on a hyperlink using three fingers, a small preview window opens that shows the webpage the
link would have taken the use to. This library attempts to mimic that behaviour. But instead of using the three finger tap gesture to
open the URL preview window (as it is not available on all hardware), the library makes use of timed hover gesture to achieve
the same.

## Preview

![alt text](https://s19.postimg.org/ivqm47ddv/ezgif_com_video_to_gif_1.gif "Snippets Preview")

## Demo

You have a look at the demo [here](https://sidthesloth92.github.io/three-finger-tap-js/demo.html).

## Installation
You can install the library as a dependency over NPM or you can simply download the release from the dist folder [here](https://github.com/sidthesloth92/three-finger-tap-js/tree/master/dist).

    npm i three-finger-tap-js

## Usage

1.Assign an appropriate class name to all the `<a>` (anchor) tags for which you wish to add the hover effect to.
```html
<a href="https://wikipedia.org" class="three-finger-tap">Link</a>
```
2.Add references to `threeFingerTap.min.js` and `threeFingerTap.min.css` to the HTML page.
```html

<link rel="stylesheet" href="../dist/css/threeFingerTap.min.css">

<script type="text/javascript" src="../dist/js/threeFingerTap.min.js"></script>
    
```
3.Call the library using the init method and see the magic happen.
```javascript
threeFingerTap.init({ 
    name : 'three-finger-tap', 
    hoverTimeout : 1000
})
```
## API

### Methods

`init`

Initializes the library and adds it to the window object with the name threeFingerTap. Use this method only once when you
load the page.

**Parameters** 

An object with name, hoverTimeout and customLoadingBackground as keys.

| Name | Description | Type | Required | Default |
{'fraction_non_alphanumeric': 0.12913533834586466, 'fraction_numerical': 0.013533834586466165, 'mean_word_length': 4.468653648509764, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 28, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 5, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2027696', 'n_tokens_mistral': 1850, 'n_tokens_neox': 1679, 'n_words': 508}