Citrus light

ES2015 module for shining spotlight on UI element.

typo in gif, but whatever

Usage

Basic

// script.js
import { citruslight } from 'citruslight'

(() => {
  // get a reference to the target DOM element
  const el = document.getElementById('important-element')

  // highlight the said element
  const dismissCb = citruslight(el)

  // dismiss the highlight after 2s
  setTimeout(() => {
    dismissCb()
  }, 2000)
})()

<!-- index.html -->

<!-- truncated for brevity -->
<h1>Title</h1>
  <span id="important-element">hello world</span>
  <i id="other-things">Other things</i>
  <script type="module" src="script.js"></script>
<!-- truncated for brevity -->

In console

To use/import in console/non module script:

import('https://cdn.jsdelivr.net/npm/citruslight@latest/citruslight.js').then(m => {
  const { citruslight } = m

  const el = document.getElementById('important-element')
  const dismissCb = citruslight(el)
})

Dismiss on click

import { citruslight } from 'citruslight'

(() => {

  let cb

  // get a reference to the target DOM element
  const el = document.getElementById('important-element')

  // highlight the said element
  cb = citruslight(el, {
    eventHandlers: [{
      name: 'click',
      handler: () => {
        if (cb) cb()
      }
    }]
  })
})()

Custom width/height

import { citruslight } from 'citruslight'

(() => {

  // get a reference to the target DOM element
  const el = document.getElementById('important-element')

  // highlight the said element with width 50px height 50px
  citruslight(el, {
    width: 50,   // px
    height: 50,  // px
  })
})()

Custom location

import { citruslight } from 'citruslight'

(() => {

  // highlight the said element with width 50px height 50px
  citruslight(null, {
    center: {
      x: 150,
      y: 150,
    },
    width: 50,   // px
    height: 50,  // px
  })
})()

Develop

$ git clone https://github.com/xgui3783/citruslight.git && cd citruslight
$ npx http-server

License

MIT