@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 --saveImport
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-elementsand source thenative-shim.jsas 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 cleanBuild
npm run buildwithout linting and cleaning:
npm run -- build --no-lint --no-cleanwith UMD bundling (incl. minimization):
npm run -- build --prepackwith UMD bundling (excl. minimization):
npm run -- build --prepack --no-minifyLint
npm run lintwith auto-fixing:
npm run -- lint --fixTest
npm run testwithout linting, cleaning and (re-)building:
npm run -- test --no-lint --no-clean --no-buildCover
npm run coverwithout linting, cleaning and (re-)building:
npm run -- cover --no-lint --no-clean --no-buildDocumentation
npm run docsPublication
npm publishinitially (if public):
npm publish --access=publicCopyright
© 2021 dizmo AG