hotspot-js v2.6.3

Hotspot JS

Hotspot JS is a pack of pure javascript non-jquery functions exported as Node.js modules.

Installation

$ yarn add hotspot-js
$ npm i hotspot-js

Supported modules

Hotspots ⚓️

Creates a hotspot circle at any position you click your mouse. You can place in multiple hotspots and setup hotspots on page load.

import { setupCanvas, clearCanvas, editHotspot } from 'hotspot-js';

`OR`

const { setupCanvas, clearCanvas, editHotspot } = require('hotspot-js');

// Default settings
const settings = {
  sourceUrl: null,
  type: 'img',
  hotspots: [
    {
      hotspotX:null,
      hostpotY: null,
      isActive: false
    },
  ],
  mode: 'multi/single' //multiple hotspot or single hotspot update
};

// You can use the default function to act on all triggers
setupCanvas(settings);

// add event listener to your canvas element
canvas.addEventListener('hotspot-added', (e) => {
  const hotspot = e.detail;
  // ... do something
})

updateHotspot 🍪

Updates the hotspots position using the hotspot id.

import { editHotspot } from 'hotspot-js';

// hotspot to update
const hotspot = {
      id: null,
      label: '',
      link: '',
      hotspotX: null,
      hotspotY: null,
      isActive: true
};

editHotspot(hostpot);

clearCanvas ☔️

// Clears the canvas and all it's hotspots at once
clearCanvas();