msc-zoom

<msc-zoom /> is a web component which provide zoom-in / zoom-out effects for image closing watch. Users could just tap the part they like to have a closing watch.

Basic Usage

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

• Required Script

<script
  type="module"
  src="https://your-domain/wc-msc-zoom.js">        
</script>

• Structure

Put img[slot="msc-zoom-vision"] inside <msc-zoom /> as its child. It will use it as source.

<msc-zoom>
  <script type="application/json">
    {
      "active": false,
      "duration": 300,
      "scale": 2
    }
  </script>
  <img src="https://picsum.photos/id/26/1000/670" alt="mas-zoom image" slot="msc-zoom-vision" />
</msc-zoom>

JavaScript Instantiation

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

<script type="module">
import { MscZoom } from 'https://your-domain/wc-msc-zoom.js';

const content = document.querySelector('img[slot="msc-zoom-vision"]');

// use DOM api
const nodeA = document.createElement('msc-zoom');
nodeA.appendChild(content.cloneNode(true));
document.body.appendChild(nodeA);
nodeA.scale = 2;

// new instance with Class
const nodeB = new MscZoom();
nodeB.appendChild(content.cloneNode(true));
document.body.appendChild(nodeB);
nodeB.scale = 3;

// new instance with Class & default config
const config = {
  scale: 3.5,
  duration: 500
};
const nodeC = new MscZoom(config);
nodeC.appendChild(content.cloneNode(true));
document.body.appendChild(nodeC);
</script>

Style Customization

Developers could apply styles to decorate img[slot="msc-zoom-vision"].

<style>
img[slot="msc-zoom-vision"] {
  object-fit: cover;
}
</style>

Attributes

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

• active

Set active for <msc-zoom />. It will zoom-in once set true. Default is false (not set).

<msc-zoom
  active
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-zoom-vision" />
</msc-zoom>

• duration

Set duration for <msc-zoom /> zoom-in / zoom-out animation. Default is 300 (ms).

<msc-zoom
  duration="300"
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-zoom-vision" />
</msc-zoom>

• scale

Set scale for <msc-zoom />. Default is 2.

<msc-zoom
  scale="2"
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-zoom-vision" />
</msc-zoom>

Properties

Property Name	Type	Description
active	Boolean	Getter / Setter for active. It will turn on / off zoom effects.
duration	Number	Getter / Setter for duration. The zoom animation's duration will apply this value with unit ms. Default is 300.
scale	Number	Getter / Setter for scale. The scale rate will apply this value. Default is 2.

Event

Event Signature	Description
msc-zoom-click	Fired when <msc-zoom /> has been clicked. Developers could get mode through event.detail.

Reference

• <msc-zoom />