Spotlight

Sometimes we like to highlight some texts、elements to audience at web pages. We might just selected them or use cursor to point them. Audience can't catch up the highlights once they sit far away from the stage.

Allow me to introduce <msc-spotlight /> for you. <msc-spotlight /> is a web component to help us highlight specific part at web page.

All we need to is just active it and click the part you like to highlight and everything will be all set. Once the spotlight show, user could also use keyboard ↑、↓ or +、- to expand / shrink spotlight.

You could also tap the following button to active / disable <msc-spotlight /> to see the real effect.

Basic Usage

<msc-spotlight /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-spotlight />'s html structure and everything will be all set.

Required Script

<script 
    async
    name="msc-spotlight"
    src="https://your-domain//pack-loader.js"
    data-required="https://your-domain/class-msc-spotlight.js,https://your-domain/wcl.js">
</script>

Structure

Developers could set attributes to modify to <msc-spotlight /> functions. Such as type、scale and radius

<msc-spotlight
  type="manual"
  scale="2"
  radius="50"
>
</msc-spotlight>

JavaScript Instantiation

<msc-spotlight /> could also use JavaScript to create DOM element. Here comes some examples.

<script>
  var nodeAPI, nodeClasses;

  // use DOM api
  nodeAPI = document.createElement('msc-spotlight');
  nodeAPI.type = 'auto';
  nodeAPI.scale = 2.5;
  document.body.appendChild(nodeAPI);

  // new Classes
  nodeClasses = new MscSpotlight();
  nodeClasses.type = 'manual';
  nodeClasses.scale = 2.5;
  nodeClasses.radius = 100;
  document.body.appendChild(nodeClasses);
</script>

Style Customization

<msc-spotlight /> uses CSS variables to hook the overlay's display. That means developer could easy change it into the lookup you like.

<style>
msc-spotlight {
  --overlay: rgba(0,0,0,.75);
}
</style>

Attributes

<msc-spotlight /> supports some attribute to let it become more convenience & useful.

Type: auto

It is the default value for spotlight. Spotlight's size will depand on the element's size which user clicked.

<msc-spotlight type="auto"/>

Type: manual

Spotlight will has fixed size to display. Develops could use attribute scale or radius to set the spotlight.

<msc-spotlight
  type="manual"
  radius="50"
/>

Scale:

This attribute could set spotlight's scale ratio. Default is 2.5.

<msc-spotlight
  type="auto"
  scale="3"
/>

Radius:

This attribute could set spotlight's radius (in pixel). It's only work with type is set with manual.

<msc-spotlight
  type="manual"
  radius="100"
/>

Active:

<msc-spotlight /> will active once append to DOM tree with attribute - active has set value.

<msc-spotlight
  type="manual"
  active="true"
/>

Keyboard shortcut

<msc-spotlight /> also comes with keyboard shortcut. I believe this will make <msc-spotlight /> more vivid & more useful.

↑、↑、↓、↓、←、→、←、→:

<msc-spotlight /> will active / disable once user press these key sequence. There will be a check sign appear when the key sequence has been accepted.

ctrl m、ctrl M:

Spotlight could change type between "auto" and "manual". There will be a check sign appear when the key sequence has been accepted. This key only work when <msc-spotlight /> is active.

↑、+:

Spotlight could be expand once user press ↑、+. These key only work when spotlight has showed up.

↓、-:

Spotlight could be shrink once user press ↓、-. These key only work when spotlight has showed up.

esc:

Spotlight could be turned off once user press escape. This key only work when spotlight has showed up.

Properties

Event

Something you need to know

Workflow

Before use <msc-spotlight />, user must be active it first. User could set its attribute active or property active to true.

Once <msc-spotlight /> active. it will take control on all click event. That means all of your event handler will be cancel and useless after <msc-spotlight /> active.

The only way to turn off <msc-spotlight /> is remove its attribute active or set property active to false.

Escape from <msc-spotlight />

Once <msc-spotlight /> active. it will take control on all click event. Develpers could use CSS hook to escape this situation. All we need to do is just add esc-spotlight on elements you do want to escape from spotlight.

<a href="#escape" class="esc-spotlight">
  ESCAPE from Spotlight
</a>