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
})

| Setting | Description | | ------------- |:----------------------| | type | {string} It tells whether the url is video or an image | | sourceUrl | {string} The image that needs to have hotspots | | hotspots | {Array} array of hotspot objects |

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);

| hotspot | Description | | ------------- |:----------------------| | id | {number} id of the hotspot | | hotspotX | {number} The X co-ordinate of the hotspot | | hotspotY | {number} The Y co-ordinate of the hotspot | | label | {string} Name of hotspot | | link | {string} Add a url to link the hotspot | | isActive | {boolean} Add if the hotspot should be active or not. |

clearCanvas ☔️

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