Package Exports

citruslight
citruslight/citruslight.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (citruslight) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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