@dizmo/elements-addons-mask

v2.0.26

Published

3 years ago

mask web component

Downloads

0High
0Medium
0Low

dizmo-user

hsk81

component module

@dizmo/elements-addons-mask

A web component module to mask the current view: it can be integrated into a project either via webpack or a <script> tag; see the examples below.

Usage

Installation

npm install @dizmo/elements-addons-mask --save

Import

import { Mask } from '@dizmo/elements-addons-mask';

Example integration via webpack

index.html:

<body>
  <dizmo-mask class="dizmo-mask"></dizmo-mask>
</body>

style.scss:

.dizmo-mask {
  background-color: gray; // *optional* customization
}

index.ts:

const mask = document.querySelector('dizmo-mask') as Mask;

mask.show(); // or: mask.dispatchEvent(new Event('show'));
mask.hide(); // or: mask.dispatchEvent(new Event('hide'));

webpack.config.js:

module.exports = {
    entry: {
        main: [
            '@babel/polyfill',
            '@webcomponents/custom-elements/src/native-shim.js',
            '@dizmo/elements-addons-mask',
            './src/index.ts'
        ]
    }, ..
}

..where including the @dizmo/elements-addons-mask entry takes care of both the component's script and default stylesheets.

Also note, that at the moment – if you want to use the addon within a minified dizmo in dizmoWeb – then you need to install @webcomponents/custom-elements and source the native-shim.js as shown above:

npm i @webcomponents/custom-elements --save

Example integration via a `<script>` tag

index.html:

<head>
  <script src="/scripts/dizmoelements-mask-2.0.js"></script>
</head>
<body>
  <dizmo-mask class="dizmo-mask"></dizmo-mask>
</body>

..where sourcing the dizmoelements-mask-2.0.js file takes care of again both the component's script and default stylesheets. There is no need to explicity use a <link href="/styles/dizmoelements-mask-2.0.css"> tag!

Development

Clean

npm run clean

Build

npm run build

without linting and cleaning:

npm run -- build --no-lint --no-clean

with UMD bundling (incl. minimization):

npm run -- build --prepack

with UMD bundling (excl. minimization):

npm run -- build --prepack --no-minify

Lint

npm run lint

with auto-fixing:

npm run -- lint --fix

Test

npm run test

without linting, cleaning and (re-)building:

npm run -- test --no-lint --no-clean --no-build

Cover

npm run cover

without linting, cleaning and (re-)building:

npm run -- cover --no-lint --no-clean --no-build

Documentation

npm run docs

Publication

npm publish

initially (if public):

npm publish --access=public

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@dizmo/elements-addons-mask

Usage

Installation

Import

Example integration via webpack

Example integration via a <script> tag

Development

Clean

Build

without linting and cleaning:

with UMD bundling (incl. minimization):

with UMD bundling (excl. minimization):

Lint

with auto-fixing:

Test

without linting, cleaning and (re-)building:

Cover

without linting, cleaning and (re-)building:

Documentation

Publication

initially (if public):

Copyright

Example integration via a `<script>` tag