# @sil/pointer

> Create an alternate pointer in your interface, or a specific pointer for a button. This directive makes it easily possible by adding it to the element. The directive throws you back two custom-properties which you can use to animate anything.

Latest version **0.0.19** (published 2019-04-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install @sil/pointer
pnpm add @sil/pointer
yarn add @sil/pointer
bun add @sil/pointer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2019-04-08 |
| First published | 2019-01-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sil van Diepen |
| Maintainers | hacobvandipyan, silvandiepen |

## Links

- npm: https://www.npmjs.com/package/@sil/pointer
- npm.io page: https://npm.io/package/@sil/pointer

## Recent versions

- 0.0.19 (latest) — 2019-04-08
- 0.0.18 — 2019-04-08
- 0.0.17 — 2019-04-08
- 0.0.16 — 2019-04-08
- 0.0.15 — 2019-03-21
- 0.0.14 — 2019-03-21
- 0.0.13 — 2019-03-21
- 0.0.12 — 2019-03-21
- 0.0.11 — 2019-03-21
- 0.0.10 — 2019-03-21
- 0.0.9 — 2019-03-21
- 0.0.8 — 2019-03-21
- 0.0.7 — 2019-03-21
- 0.0.6 — 2019-03-20
- 0.0.5 — 2019-03-19
- … 3 more at https://npm.io/package/@sil/pointer/versions

## README

# Pointer

Create an alternate pointer in your interface, or a specific pointer for a button. This directive makes it easily possible by adding it to the element. The directive throws you back two custom-properties which you can use to animate anything.

## Install

Install the package
```bash
npm install @sil/pointer 
```

Import the package

```js
import Pointer from '~/@sil/pointer 
```

Define the component:

```js
Vue.directive(Pointer);
```

Use the component with default values:

```html
<any-element v-pointer />
```

## About

When the directive is added, it will give you back a `--x` and a `--y` which are the values of your pointer relative to the viewport. 
You can use for instance for a pointer or animated background.

## Options

By default the directive will return you with the current x and why on the page. 


| option | default   | description                                                                    |
| ------ | --------- | ------------------------------------------------------------------------------ |
| center | false     | Calculate the value based on the center of the element                         |
| box    | `element` | Calculate values based on either the `element`, `viewport` or the whole `page` |
| type   | `pixel`   | See below                                                                      |
| min    | null      | Minimum return value for x and y                                               |
| min_x  | null      | Minimum return value for x                                                     |
| min_y  | null      | Minimum return value for y                                                     |
| max    | null      | Maximum return value for x and y                                               |
| max_x  | null      | Maximum return value for x                                                     |
| max_y  | null      | Maximum return value for y                                                     |
| var_x  | `--x`     | Property name for X to place value on.                                         |
| var_y  | `--y`     | Property name for Y to place value on.                                         |


*Type options:*

| type           | output                         |
| -------------- | ------------------------------ |
| default: pixel | Returns a value in pixels      |
| percentage     | Returns a value in percentage  |
| scale          | Returns a value between 0 to 1 |


#### Percentage

You can also choose type percentage, in this case directive will return the position of the pointer relative to the element which has the directive.
When pointing in the ultimate center of the element the `--x` and `--y` will be `50%`.

```html
<any-element v-pointer="{ type: 'percentage' }">
```
#### Min / Max values

Give a min and max value to make sure the value doesn't go over the top. 

```html
<any-element v-pointer="{ type: 'percentage', min: 0, max: 100 }">
```
In this case the pointer won't give any value bigger than 100% and smaller than 0%. 


#### Custom variables

By default the directive returns you a `--x` and `--y`. You can alter these by setting:
(Make sure you add the `--` otherwise your custom property won't work. )

```html
<any-element v-pointer="{ x_var: '--horizontal', y_var: '--vertical' }">
```

This will return:

```html
<any-element style="--horizontal: 50%; --vertical: 50%">
```



## Examples

#### Button Background

```html
<button v-pointer>Hoi</button>
```

```css
button {
	display: inline-block;
	padding: 1rem 2rem;

	background-color: blue;
	border: none;

	font-family: sans-serif;
	font-size: 1rem;
	color: white;
}
button::before {
	content: '';

	position: absolute;
	top: var(
		--y,
		50%
	); /* --y comes from the directive, the 50% is just a fallback */
	left: var(--x, 50%);

	display: block;
	width: 200%;
	height: 200%;

	background-image: radial-gradient(
		closest-side,
		rgba(0, 0, 0, 1),
		rgba(0, 0, 0, 0)
	);
}
```

#### Body Pointer

With this your pointer will be just a black dot.

```html
<body v-pointer>
	<!-- Your html here -->
</body>
```

```css
body {
	pointer: none;
}
body::before {
	content: '';

	position: absolute;
	top: var(
		--y,
		50%
	); /* --y comes from the directive, the 50% is just a fallback */
	left: var(--x, 50%);

	display: block;
	width: 1rem;
	height: 1rem;

	background-image: radial-gradient(
		closest-side,
		rgba(0, 0, 0, 1) 100%,
		rgba(0, 0, 0, 0)
	);
}
```

---
_Source: https://npm.io/package/@sil/pointer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._