https://github.com/bree7e/ngx-spotlight

An angular directive to highlight 🔦 DOM element by adding a overlay layer to the rest of the page
https://github.com/bree7e/ngx-spotlight

angular angular2 typescript

Last synced: about 2 months ago
JSON representation

An angular directive to highlight 🔦 DOM element by adding a overlay layer to the rest of the page

• Host: GitHub
• URL: https://github.com/bree7e/ngx-spotlight
• Owner: bree7e
• Created: 2020-04-12T18:44:10.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-06-03T02:46:18.000Z (over 2 years ago)
• Last Synced: 2023-03-03T03:22:45.723Z (almost 2 years ago)
• Topics: angular, angular2, typescript
• Language: TypeScript
• Homepage:
• Size: 772 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NGX Spotlight

An angular directive to highlight 🔦 DOM element by adding a overlay layer to the rest of the page

[Demo application](https://bree7e.github.io/ngx-spotlight/)

## Installation

To install this library, run:

```bash

$ npm install ngx-spotlight ngx-window-token --save

```

and then import module:

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxSpotlightModule } from 'ngx-spotlight'; // <===

@NgModule({

  declarations: [AppComponent],

  imports: [

    BrowserModule,

    NgxSpotlightModule, // <===

  ],

  providers: [],

  bootstrap: [AppComponent],

})

export class AppModule {}

```

## Usage

Simple case

```html



  ...



```


Advanced case

```html



  Toggle



```


Directive can be shown using `SpotlightService`.

```ts

constructor(private spotlightService: SpotlightService) {}

this.spotlightService.getById('some-id').show();

this.spotlightService.getById('some-id').hide();

```

### Inputs

| Name         | Type    | Default                      | Description                                                   |

| ------------ | ------- | ---------------------------- | ------------------------------------------------------------- |

| ngxSpotlight | string  | 'spotlight*at*' + Date.now() | id                                                            |

| border       | boolean | false                        | draw border around spotlight element                          |

| borderWidth  | number  | 4                            | border width in 'px'                                          |

| indent       | number  | 0                            | space around spotlight element                                |

| overlay      | boolean | false                        | disable click on spotlight element, fire spotlightClick event |

| auto         | boolean | false                        | highlight element after view init                             |

### Outputs

There is a `spotlightClick` event that occurs when a user click on directive elements.

```ts

type SpotlightElementName =

  | 'container'

  | 'backdrop-top'

  | 'backdrop-bottom'

  | 'backdrop-left'

  | 'backdrop-right'

  | 'overlay'

  | 'border-top'

  | 'border-bottom'

  | 'border-left'

  | 'border-right';

interface SpotlightClick {

  piece: SpotlightElementName;

  mouse: MouseEvent;

}

```

## Customization

Variables should be declared for a global scope (:root or the body selector).

| CSS variable                             | Default value         | Description                         |

| ---------------------------------------- | --------------------- | ----------------------------------- |

| --color\_\_spotlight-backdrop_background | rgba(52, 74, 94, 0.8) | Color of the backdrop               |

| --color\_\_spotlight-border              | #c9c9c9               | Border color of highlighted element |

```css

body {

  --color__spotlight-backdrop_background: black;

  --color__spotlight-border: lightgreen;

}

```