IMPR: Refactoried to Vanilla JS

This commit is contained in:
Tony Air 2021-08-04 00:55:06 +02:00
parent 6af892ecfc
commit 13f77bed79
16 changed files with 1136 additions and 1270 deletions

View File

@ -3,7 +3,8 @@
[
"@babel/preset-env",
{
"targets": {
"targets":
{
"node": "6.10",
"esmodules": true
}
@ -21,7 +22,9 @@
]
],
"plugins": [
"@babel/plugin-syntax-top-level-await",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-syntax-jsx"
"@babel/plugin-syntax-jsx",
"@babel/plugin-proposal-class-properties"
]
}

1
dist/css/app.css vendored
View File

@ -1 +0,0 @@
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.meta-MetaWindow{position:fixed}.meta-MetaWindow .meta-error,.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{display:none;align-items:center;justify-content:center;z-index:2;text-align:center}.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{font-size:2rem;color:#fff;font-weight:700;text-transform:uppercase;position:absolute;left:0;right:0;top:0;bottom:0}.meta-MetaWindow .meta-spinner_embed{display:flex}.meta-MetaWindow-overlay{background:rgba(0,0,0,.8);display:none;position:fixed;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;z-index:98}.meta-MetaWindow-overlay__loading .meta-spinner,.meta-MetaWindow-overlay__open{display:flex}.meta-MetaWindow-overlay__error .meta-content{justify-content:center}.meta-MetaWindow-overlay__error .meta-error{display:flex}.meta-MetaWindow .meta-nav{font-size:2rem;color:#fff;text-shadow:#000 0 0 .25em;border:0;background:none;z-index:2}.meta-MetaWindow .meta-nav:focus,.meta-MetaWindow .meta-nav:hover{color:#fff}.meta-MetaWindow .meta-nav:hover{color:#eceff1;background:none;text-shadow:none;text-decoration:none}.meta-MetaWindow .meta-nav-arrow{position:absolute;bottom:0;top:auto;display:flex;justify-content:center;align-items:center;font-size:2.5rem;padding:.25rem .5rem;z-index:2}.meta-MetaWindow .meta-nav-arrow:focus .fa,.meta-MetaWindow .meta-nav-arrow:focus .fab,.meta-MetaWindow .meta-nav-arrow:focus .far,.meta-MetaWindow .meta-nav-arrow:focus .fas,.meta-MetaWindow .meta-nav-arrow:hover .fa,.meta-MetaWindow .meta-nav-arrow:hover .fab,.meta-MetaWindow .meta-nav-arrow:hover .far,.meta-MetaWindow .meta-nav-arrow:hover .fas{transform:scale(1.5)}@media (min-width:992px){.meta-MetaWindow .meta-nav-arrow{top:0;bottom:0}}.meta-MetaWindow .meta-nav-arrow__next{right:0}.meta-MetaWindow .meta-nav-arrow__prev{left:0}@media (min-width:992px){.meta-MetaWindow .meta-nav-arrow__next{right:-3rem}.meta-MetaWindow .meta-nav-arrow__prev{left:-3rem}}.meta-MetaWindow .meta-close{position:absolute;top:-3rem;right:0;width:1.25em}.meta-MetaWindow .meta-close:hover .fa,.meta-MetaWindow .meta-close:hover .fab,.meta-MetaWindow .meta-close:hover .far,.meta-MetaWindow .meta-close:hover .fas{transform:rotate(-180deg)}@media (min-width:992px){.meta-MetaWindow .meta-close{top:-3rem;right:-3rem}}.meta-MetaWindow .meta-content{position:relative;width:100%;height:80%;display:flex;flex-direction:column;z-index:1}@media (min-width:992px){.meta-MetaWindow .meta-content{width:90%;height:90%;width:calc(90% - 3rem);height:calc(90% - 3rem)}}.meta-MetaWindow .meta-wrap{max-height:100%;max-width:100%;width:100%;overflow:auto;word-break:break-word;margin:0 auto}.meta-MetaWindow .meta-wrap img{object-fit:cover;max-width:100%;max-height:100%}.meta-MetaWindow__text .meta-content{background:#fff;color:#000;padding:1rem 0 1rem 1rem}.meta-MetaWindow__text .meta-wrap{padding-right:1rem}.meta-MetaWindow__image .meta-wrap,.meta-MetaWindow__image .typography,.meta-MetaWindow__video .meta-wrap,.meta-MetaWindow__video .typography{overflow:hidden;display:flex;justify-content:center;align-items:center;flex-direction:column;max-height:100%;max-width:100%;min-height:100%}.meta-MetaWindow__image .meta-wrap img,.meta-MetaWindow__image .typography img,.meta-MetaWindow__video .meta-wrap img,.meta-MetaWindow__video .typography img{margin:0}.meta-MetaWindow__embed:before,.meta-MetaWindow__video:before{content:"";display:block;position:relative;width:100%;padding-top:56.25%}.meta-MetaWindow__embed a[rel="nofollow noreferrer noopener"],.meta-MetaWindow__video a[rel="nofollow noreferrer noopener"]{color:#fff;font-size:1.2rem;font-weight:700}.meta-MetaWindow__embed a[rel="nofollow noreferrer noopener"]:before,.meta-MetaWindow__video a[rel="nofollow noreferrer noopener"]:before{content:"Unable to load. Please follow the provided link: ";display:block}.meta-MetaWindow__embed iframe,.meta-MetaWindow__video iframe{position:absolute;top:0;left:0;width:100%;height:100%}

2
dist/index.html vendored
View File

@ -1,3 +1,3 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="Meta Lightbox"/><meta name="author" content="Tony Air"/><title>Meta-lightbox Demo</title><style>.wrapper {
padding: 2rem;
}</style><link href="css/app.css" rel="stylesheet"></head><body><div class="wrapper"><h1>Meta-lightbox Demo</h1>NODE_ENV: production<style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><div id="MetaLightboxContainer"><div class="typography"><h2>Loading data</h2><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="That's first link">Load an Image</a><br/><a href="../src/test.json" data-toggle="lightbox">Load JSON</a></p><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><br/><a href="../src/test-pajax.html" data-toggle="lightbox">Load Partial AJAX HTML</a><br/><a href="../src/not-found.html" data-toggle="lightbox">Not Found test</a><p></p><h2>Embeds</h2><p><a href="https://www.youtube.com/watch?v=WYvZZYthDRI" data-toggle="lightbox" data-embed="true">Embed Youtube link</a><br/><a href="https://vimeo.com/26216129" data-toggle="lightbox" data-embed="true">Embed Vimeo link</a><br/><a href="https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones" data-toggle="lightbox" data-embed="true">Embed SoundCloud link</a><br/><a href="https://www.instagram.com/p/CKl5n87hf7R/" data-toggle="lightbox" data-embed="true">Embed Instagram</a></p><h2>Other</h2><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-gallery="demo">Use [data-toggle="lightbox"] attribute to attach lightbox action and [href] to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on regular elements. <b>Click me!</b></p></div><div id="MetaLightboxApp"></div></div><div id="App"></div></div><script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"/><script src="js/app.js"></script></body></html>
}</style><script defer="defer" src="js/app.js"></script></head><body><div class="wrapper"><h1>Meta-lightbox Demo</h1>NODE_ENV: production<style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><div id="MetaLightboxContainer"><div class="typography"><h2>Loading data</h2><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="That's first link">Load an Image</a><br/><a href="../src/test.json" data-toggle="lightbox">Load JSON</a></p><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><br/><a href="../src/test-pajax.html" data-toggle="lightbox">Load Partial AJAX HTML</a><br/><a href="../src/not-found.html" data-toggle="lightbox">Not Found test</a><p></p><h2>Embeds</h2><p><a href="https://www.youtube.com/watch?v=WYvZZYthDRI" data-toggle="lightbox" data-embed="true">Embed Youtube link</a><br/><a href="https://vimeo.com/26216129" data-toggle="lightbox" data-embed="true">Embed Vimeo link</a><br/><a href="https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones" data-toggle="lightbox" data-embed="true">Embed SoundCloud link</a><br/><a href="https://www.instagram.com/p/CKl5n87hf7R/" data-toggle="lightbox" data-embed="true">Embed Instagram</a></p><h2>Other</h2><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-gallery="demo">Use [data-toggle="lightbox"] attribute to attach lightbox action and [href] to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on regular elements. <b>Click me!</b></p></div><div id="MetaLightboxApp"></div></div><div id="App"></div></div><script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"/></body></html>

2
dist/js/app.js vendored

File diff suppressed because one or more lines are too long

150
dist/records.json vendored
View File

@ -3,23 +3,25 @@
{
"chunks": {
"byName": {
"HtmlWebpackPlugin_0": 443
"HtmlWebpackPlugin_0-0": 563
},
"bySource": {
"0 HtmlWebpackPlugin_0": 443
"0 HtmlWebpackPlugin_0-0": 563
},
"usedIds": [
443
563
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.45.1/node_modules/html-loader/dist/cjs.js!./src/html/meta-lightbox.html": 288,
"./node_modules/.pnpm/html-webpack-plugin@4.5.2_webpack@5.45.1/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 987
"./node_modules/.pnpm/html-loader@2.1.2_webpack@5.48.0/node_modules/html-loader/dist/cjs.js!./src/html/meta-lightbox.html": 688,
"./node_modules/.pnpm/html-webpack-plugin@5.3.2_webpack@5.48.0/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 255,
"javascript/esm|data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;": 163
},
"usedIds": [
288,
987
163,
255,
688
]
}
}
@ -37,88 +39,64 @@
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/index.js": 131,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/adapters/xhr.js": 309,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/axios.js": 190,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/Cancel.js": 24,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/CancelToken.js": 90,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/isCancel.js": 780,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/Axios.js": 985,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/InterceptorManager.js": 370,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/buildFullPath.js": 876,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/createError.js": 817,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/dispatchRequest.js": 235,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/enhanceError.js": 28,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/mergeConfig.js": 398,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/settle.js": 567,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/transformData.js": 788,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/defaults.js": 849,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/bind.js": 34,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/buildURL.js": 450,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/combineURLs.js": 229,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/cookies.js": 971,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isAbsoluteURL.js": 482,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isAxiosError.js": 69,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isURLSameOrigin.js": 364,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/normalizeHeaderName.js": 655,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/parseHeaders.js": 105,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/spread.js": 506,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/utils.js": 193,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/balanced-match@1.0.2/node_modules/balanced-match/index.js": 359,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/brace-expansion@2.0.1/node_modules/brace-expansion/index.js": 464,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/keyboardjs@2.6.4/node_modules/keyboardjs/dist/keyboard.js": 711,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch/minimatch.js": 962,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/prop-types@15.7.2/node_modules/prop-types/factoryWithThrowingShims.js": 761,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/prop-types@15.7.2/node_modules/prop-types/index.js": 977,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/prop-types@15.7.2/node_modules/prop-types/lib/ReactPropTypesSecret.js": 617,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/react-easy-swipe@0.0.21/node_modules/react-easy-swipe/lib/index.js": 329,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/react-easy-swipe@0.0.21/node_modules/react-easy-swipe/lib/react-swipe.js": 9,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/react-tiny-oembed@1.1.0_react-dom@17.0.2+react@17.0.2/node_modules/react-tiny-oembed/lib/index.js": 123,
"./node_modules/.pnpm/babel-loader@8.2.2_83afa9dfc9d2abf24d72ba2d4f88c1d9/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/_index.js|14056f186fa0be4fe4b8cf54ad4f081b": 658,
"external \"React\"": 804,
"ignored|./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch|path": 61
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/index.js": 163,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/adapters/xhr.js": 641,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/axios.js": 900,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/cancel/Cancel.js": 215,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/cancel/CancelToken.js": 269,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/cancel/isCancel.js": 989,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/Axios.js": 947,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/InterceptorManager.js": 462,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/buildFullPath.js": 972,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/createError.js": 224,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/dispatchRequest.js": 216,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/enhanceError.js": 872,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/mergeConfig.js": 545,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/settle.js": 658,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/transformData.js": 824,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/defaults.js": 840,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/bind.js": 813,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/buildURL.js": 588,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/combineURLs.js": 20,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/cookies.js": 194,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/isAbsoluteURL.js": 877,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/isAxiosError.js": 749,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/isURLSameOrigin.js": 980,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/normalizeHeaderName.js": 904,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/parseHeaders.js": 33,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/spread.js": 115,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/utils.js": 233,
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|4a63aef513028d871fff28ba08c40b98": 858
},
"usedIds": [
9,
24,
28,
34,
61,
69,
90,
105,
123,
131,
190,
193,
229,
235,
309,
329,
359,
364,
370,
398,
450,
464,
482,
506,
567,
617,
655,
20,
33,
115,
163,
194,
215,
216,
224,
233,
269,
462,
545,
588,
641,
658,
711,
761,
780,
788,
804,
817,
849,
876,
962,
971,
977,
985
749,
813,
824,
840,
858,
872,
877,
900,
904,
947,
972,
980,
989
]
}
}

4
dist/report.html vendored
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>@a2nt/meta-lightbox-react [3 Aug 2021 at 21:56]</title>
<title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [4 Aug 2021 at 00:14]</title>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
<script>
@ -30,7 +30,7 @@
<body>
<div id="app"></div>
<script>
window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":161397,"parsedSize":74826,"gzipSize":21988,"groups":[{"label":"node_modules/.pnpm","path":"./node_modules/.pnpm","statSize":136140,"groups":[{"label":"axios@0.21.1/node_modules/axios","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios","statSize":42138,"groups":[{"id":131,"label":"index.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/index.js","statSize":40,"parsedSize":33,"gzipSize":53},{"label":"lib","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib","statSize":42098,"groups":[{"label":"adapters","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/adapters","statSize":5769,"groups":[{"id":309,"label":"xhr.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/adapters/xhr.js","statSize":5769,"parsedSize":2023,"gzipSize":1018}],"parsedSize":2023,"gzipSize":1018},{"id":190,"label":"axios.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/axios.js","statSize":1504,"parsedSize":460,"gzipSize":283},{"label":"cancel","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel","statSize":1725,"groups":[{"id":24,"label":"Cancel.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/Cancel.js","statSize":383,"parsedSize":205,"gzipSize":153},{"id":90,"label":"CancelToken.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/CancelToken.js","statSize":1241,"parsedSize":522,"gzipSize":287},{"id":780,"label":"isCancel.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/isCancel.js","statSize":101,"parsedSize":84,"gzipSize":97}],"parsedSize":811,"gzipSize":381},{"label":"core","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core","statSize":12130,"groups":[{"id":985,"label":"Axios.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/Axios.js","statSize":2649,"parsedSize":1205,"gzipSize":557},{"id":370,"label":"InterceptorManager.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/InterceptorManager.js","statSize":1253,"parsedSize":469,"gzipSize":241},{"id":876,"label":"buildFullPath.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/buildFullPath.js","statSize":697,"parsedSize":115,"gzipSize":123},{"id":817,"label":"createError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/createError.js","statSize":625,"parsedSize":123,"gzipSize":114},{"id":235,"label":"dispatchRequest.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/dispatchRequest.js","statSize":1806,"parsedSize":843,"gzipSize":383},{"id":28,"label":"enhanceError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/enhanceError.js","statSize":1050,"parsedSize":398,"gzipSize":234},{"id":398,"label":"mergeConfig.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/mergeConfig.js","statSize":2830,"parsedSize":1414,"gzipSize":646},{"id":567,"label":"settle.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/settle.js","statSize":671,"parsedSize":213,"gzipSize":169},{"id":788,"label":"transformData.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/transformData.js","statSize":549,"parsedSize":139,"gzipSize":124}],"parsedSize":4919,"gzipSize":1749},{"id":849,"label":"defaults.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/defaults.js","statSize":2541,"parsedSize":1383,"gzipSize":691},{"label":"helpers","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers","statSize":9191,"groups":[{"id":34,"label":"bind.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/bind.js","statSize":257,"parsedSize":174,"gzipSize":147},{"id":450,"label":"buildURL.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/buildURL.js","statSize":1615,"parsedSize":694,"gzipSize":435},{"id":229,"label":"combineURLs.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/combineURLs.js","statSize":371,"parsedSize":119,"gzipSize":121},{"id":971,"label":"cookies.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/cookies.js","statSize":1284,"parsedSize":659,"gzipSize":378},{"id":482,"label":"isAbsoluteURL.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isAbsoluteURL.js","statSize":562,"parsedSize":108,"gzipSize":117},{"id":69,"label":"isAxiosError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isAxiosError.js","statSize":720,"parsedSize":370,"gzipSize":190},{"id":364,"label":"isURLSameOrigin.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isURLSameOrigin.js","statSize":2074,"parsedSize":742,"gzipSize":397},{"id":655,"label":"normalizeHeaderName.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/normalizeHeaderName.js","statSize":356,"parsedSize":194,"gzipSize":166},{"id":105,"label":"parseHeaders.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/parseHeaders.js","statSize":1389,"parsedSize":573,"gzipSize":367},{"id":506,"label":"spread.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/spread.js","statSize":563,"parsedSize":103,"gzipSize":99}],"parsedSize":3736,"gzipSize":1554},{"id":193,"label":"utils.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/utils.js","statSize":9238,"parsedSize":2884,"gzipSize":973}],"parsedSize":16216,"gzipSize":5316}],"parsedSize":16249,"gzipSize":5322},{"label":"balanced-match@1.0.2/node_modules/balanced-match","path":"./node_modules/.pnpm/balanced-match@1.0.2/node_modules/balanced-match","statSize":1220,"groups":[{"id":359,"label":"index.js","path":"./node_modules/.pnpm/balanced-match@1.0.2/node_modules/balanced-match/index.js","statSize":1220,"parsedSize":657,"gzipSize":380}],"parsedSize":657,"gzipSize":380},{"label":"brace-expansion@2.0.1/node_modules/brace-expansion","path":"./node_modules/.pnpm/brace-expansion@2.0.1/node_modules/brace-expansion","statSize":4795,"groups":[{"id":464,"label":"index.js","path":"./node_modules/.pnpm/brace-expansion@2.0.1/node_modules/brace-expansion/index.js","statSize":4795,"parsedSize":2209,"gzipSize":1016}],"parsedSize":2209,"gzipSize":1016},{"label":"keyboardjs@2.6.4/node_modules/keyboardjs/dist","path":"./node_modules/.pnpm/keyboardjs@2.6.4/node_modules/keyboardjs/dist","statSize":35812,"groups":[{"id":711,"label":"keyboard.js","path":"./node_modules/.pnpm/keyboardjs@2.6.4/node_modules/keyboardjs/dist/keyboard.js","statSize":35812,"parsedSize":18735,"gzipSize":5270}],"parsedSize":18735,"gzipSize":5270},{"label":"minimatch@3.0.4/node_modules/minimatch","path":"./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch","statSize":25440,"groups":[{"id":962,"label":"minimatch.js","path":"./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch/minimatch.js","statSize":25440,"parsedSize":7939,"gzipSize":3053}],"parsedSize":7939,"gzipSize":3053},{"label":"prop-types@15.7.2/node_modules/prop-types","path":"./node_modules/.pnpm/prop-types@15.7.2/node_modules/prop-types","statSize":2621,"groups":[{"id":761,"label":"factoryWithThrowingShims.js","path":"./node_modules/.pnpm/prop-types@15.7.2/node_modules/prop-types/factoryWithThrowingShims.js","statSize":1603,"parsedSize":843,"gzipSize":435},{"id":977,"label":"index.js","path":"./node_modules/.pnpm/prop-types@15.7.2/node_modules/prop-types/index.js","statSize":707,"parsedSize":35,"gzipSize":55},{"label":"lib","path":"./node_modules/.pnpm/prop-types@15.7.2/node_modules/prop-types/lib","statSize":311,"groups":[{"id":617,"label":"ReactPropTypesSecret.js","path":"./node_modules/.pnpm/prop-types@15.7.2/node_modules/prop-types/lib/ReactPropTypesSecret.js","statSize":311,"parsedSize":82,"gzipSize":102}],"parsedSize":82,"gzipSize":102}],"parsedSize":960,"gzipSize":504},{"label":"react-easy-swipe@0.0.21/node_modules/react-easy-swipe/lib","path":"./node_modules/.pnpm/react-easy-swipe@0.0.21/node_modules/react-easy-swipe/lib","statSize":12288,"groups":[{"id":329,"label":"index.js","path":"./node_modules/.pnpm/react-easy-swipe@0.0.21/node_modules/react-easy-swipe/lib/index.js","statSize":712,"parsedSize":304,"gzipSize":222},{"id":9,"label":"react-swipe.js","path":"./node_modules/.pnpm/react-easy-swipe@0.0.21/node_modules/react-easy-swipe/lib/react-swipe.js","statSize":11576,"parsedSize":6275,"gzipSize":2048}],"parsedSize":6579,"gzipSize":2083},{"label":"react-tiny-oembed@1.1.0_react-dom@17.0.2+react@17.0.2/node_modules/react-tiny-oembed/lib","path":"./node_modules/.pnpm/react-tiny-oembed@1.1.0_react-dom@17.0.2+react@17.0.2/node_modules/react-tiny-oembed/lib","statSize":11826,"groups":[{"id":123,"label":"index.js","path":"./node_modules/.pnpm/react-tiny-oembed@1.1.0_react-dom@17.0.2+react@17.0.2/node_modules/react-tiny-oembed/lib/index.js","statSize":11826,"parsedSize":7513,"gzipSize":2898}],"parsedSize":7513,"gzipSize":2898}],"parsedSize":60841,"gzipSize":18752},{"label":"src","path":"./src","statSize":25257,"groups":[{"label":"js","path":"./src/js","statSize":21130,"groups":[{"id":658,"label":"_index.js + 4 modules (concatenated)","path":"./src/js/_index.js + 4 modules (concatenated)","statSize":21130,"parsedSize":13932,"gzipSize":4023,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/_index.js + 4 modules (concatenated)/src/js","statSize":21088,"groups":[{"id":null,"label":"_index.js","path":"./src/js/_index.js + 4 modules (concatenated)/src/js/_index.js","statSize":61,"parsedSize":40,"gzipSize":11,"inaccurateSizes":true},{"id":null,"label":"app.js","path":"./src/js/_index.js + 4 modules (concatenated)/src/js/app.js","statSize":1891,"parsedSize":1246,"gzipSize":360,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/_index.js + 4 modules (concatenated)/src/js/_events.js","statSize":1333,"parsedSize":878,"gzipSize":253,"inaccurateSizes":true},{"id":null,"label":"_window.jsx","path":"./src/js/_index.js + 4 modules (concatenated)/src/js/_window.jsx","statSize":17803,"parsedSize":11738,"gzipSize":3389,"inaccurateSizes":true}],"parsedSize":13904,"gzipSize":4015,"inaccurateSizes":true}]}],"parsedSize":13932,"gzipSize":4023},{"label":"scss","path":"./src/scss","statSize":4127,"groups":[{"id":null,"label":"_window.scss","path":"./src/scss/_window.scss","statSize":4127}],"parsedSize":0,"gzipSize":0}],"parsedSize":13932,"gzipSize":4023}]}];
window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":56244,"parsedSize":24465,"gzipSize":7837,"groups":[{"label":"node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios","statSize":42110,"groups":[{"id":163,"label":"index.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/index.js","statSize":40,"parsedSize":33,"gzipSize":53},{"label":"lib","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib","statSize":42070,"groups":[{"label":"adapters","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/adapters","statSize":5769,"groups":[{"id":641,"label":"xhr.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/adapters/xhr.js","statSize":5769,"parsedSize":2022,"gzipSize":1006}],"parsedSize":2022,"gzipSize":1006},{"id":900,"label":"axios.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/axios.js","statSize":1504,"parsedSize":464,"gzipSize":280},{"label":"cancel","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/cancel","statSize":1725,"groups":[{"id":215,"label":"Cancel.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/cancel/Cancel.js","statSize":383,"parsedSize":205,"gzipSize":153},{"id":269,"label":"CancelToken.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/cancel/CancelToken.js","statSize":1241,"parsedSize":523,"gzipSize":289},{"id":989,"label":"isCancel.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/cancel/isCancel.js","statSize":101,"parsedSize":84,"gzipSize":97}],"parsedSize":812,"gzipSize":383},{"label":"core","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core","statSize":12130,"groups":[{"id":947,"label":"Axios.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/Axios.js","statSize":2649,"parsedSize":1205,"gzipSize":555},{"id":462,"label":"InterceptorManager.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/InterceptorManager.js","statSize":1253,"parsedSize":469,"gzipSize":241},{"id":972,"label":"buildFullPath.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/buildFullPath.js","statSize":697,"parsedSize":114,"gzipSize":122},{"id":224,"label":"createError.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/createError.js","statSize":625,"parsedSize":124,"gzipSize":114},{"id":216,"label":"dispatchRequest.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/dispatchRequest.js","statSize":1806,"parsedSize":843,"gzipSize":384},{"id":872,"label":"enhanceError.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/enhanceError.js","statSize":1050,"parsedSize":398,"gzipSize":234},{"id":545,"label":"mergeConfig.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/mergeConfig.js","statSize":2830,"parsedSize":1414,"gzipSize":643},{"id":658,"label":"settle.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/settle.js","statSize":671,"parsedSize":213,"gzipSize":169},{"id":824,"label":"transformData.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/core/transformData.js","statSize":549,"parsedSize":139,"gzipSize":123}],"parsedSize":4919,"gzipSize":1744},{"id":840,"label":"defaults.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/defaults.js","statSize":2541,"parsedSize":1383,"gzipSize":690},{"label":"helpers","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers","statSize":9191,"groups":[{"id":813,"label":"bind.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/bind.js","statSize":257,"parsedSize":174,"gzipSize":147},{"id":588,"label":"buildURL.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/buildURL.js","statSize":1615,"parsedSize":694,"gzipSize":429},{"id":20,"label":"combineURLs.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/combineURLs.js","statSize":371,"parsedSize":119,"gzipSize":121},{"id":194,"label":"cookies.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/cookies.js","statSize":1284,"parsedSize":659,"gzipSize":380},{"id":877,"label":"isAbsoluteURL.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/isAbsoluteURL.js","statSize":562,"parsedSize":108,"gzipSize":117},{"id":749,"label":"isAxiosError.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/isAxiosError.js","statSize":720,"parsedSize":370,"gzipSize":190},{"id":980,"label":"isURLSameOrigin.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/isURLSameOrigin.js","statSize":2074,"parsedSize":742,"gzipSize":396},{"id":904,"label":"normalizeHeaderName.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/normalizeHeaderName.js","statSize":356,"parsedSize":194,"gzipSize":165},{"id":33,"label":"parseHeaders.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/parseHeaders.js","statSize":1389,"parsedSize":573,"gzipSize":364},{"id":115,"label":"spread.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/helpers/spread.js","statSize":563,"parsedSize":103,"gzipSize":99}],"parsedSize":3736,"gzipSize":1550},{"id":233,"label":"utils.js","path":"./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/lib/utils.js","statSize":9210,"parsedSize":2885,"gzipSize":974}],"parsedSize":16221,"gzipSize":5293}],"parsedSize":16254,"gzipSize":5301},{"label":"src/js","path":"./src/js","statSize":14134,"groups":[{"id":858,"label":"app.js + 2 modules (concatenated)","path":"./src/js/app.js + 2 modules (concatenated)","statSize":14134,"parsedSize":8211,"gzipSize":2784,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/app.js + 2 modules (concatenated)/src/js","statSize":14134,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 2 modules (concatenated)/src/js/app.js","statSize":530,"parsedSize":307,"gzipSize":104,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 2 modules (concatenated)/src/js/_events.js","statSize":1333,"parsedSize":774,"gzipSize":262,"inaccurateSizes":true},{"id":null,"label":"_window.js","path":"./src/js/app.js + 2 modules (concatenated)/src/js/_window.js","statSize":12271,"parsedSize":7128,"gzipSize":2417,"inaccurateSizes":true}],"parsedSize":8211,"gzipSize":2784,"inaccurateSizes":true}]}],"parsedSize":8211,"gzipSize":2784}]}];
window.defaultSizes = "parsed";
</script>
</body>

View File

@ -1,12 +1,12 @@
{
"name": "@a2nt/meta-lightbox",
"version": "3.1.6",
"description": "Vanilla JS: Universal Lightbox window",
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
"version": "4.0.8",
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
"author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause",
"repository": {
"type": "git",
"url": "git+https://github.com/a2nt/meta-lightbox.git"
"url": "git+https://github.com/a2nt/webpack-bootstrap-ui-kit.git"
},
"private": false,
"engines": {
@ -14,7 +14,7 @@
"yarn": ">= 1.22.0"
},
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --https --config webpack.config.serve.js",
"start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.serve.js",
"dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.serve.js",
"build": "cross-env NODE_ENV=production webpack --progress --stats-all",
"lint:check": "eslint ./src --config eslint.config.json && sass-lint ./src --config sass-lint.yml -v -q",
@ -26,7 +26,8 @@
"prunecaches": "rimraf ./node_modules/.cache/",
"postinstall": "npm run prunecaches",
"postuninstall": "npm run prunecaches",
"preinstall": "npx only-allow pnpm"
"preinstall": "npx only-allow pnpm",
"update": "npx msw init ./src/_graphql"
},
"directories": {
"assets": {
@ -49,94 +50,106 @@
],
"dependencies": {
"axios": "^0.21.1",
"balanced-match": "^1.0.2",
"bootstrap": "^4.6.0",
"brace-expansion": "^2.0.1",
"font-awesome": "^4.7.0",
"keyboardjs": "^2.6.4",
"material-design-color": "^2.3.2",
"minimatch": "^3.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-easy-swipe": "^0.0.21",
"react-tiny-oembed": "^1.1.0",
"setimmediate": "^1.0.5"
"es6-template": "^1.0.4"
},
"devDependencies": {
"@a2nt/image-sprite-webpack-plugin": "^0.2.5",
"@babel/core": "^7.14.6",
"@babel/eslint-parser": "^7.14.7",
"@babel/core": "^7.14.8",
"@babel/eslint-parser": "^7.14.9",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-object-rest-spread": "^7.14.7",
"@babel/plugin-syntax-jsx": "^7.14.5",
"@babel/plugin-transform-react-jsx": "^7.14.5",
"@babel/preset-env": "^7.14.7",
"@babel/plugin-syntax-top-level-await": "^7.14.5",
"@babel/plugin-transform-react-jsx": "^7.14.9",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/preset-env": "^7.14.9",
"@babel/preset-react": "^7.14.5",
"@babel/runtime": "^7.14.6",
"@babel/runtime": "^7.14.8",
"@googlemaps/markerclustererplus": "*",
"@sucrase/webpack-loader": "^2.0.0",
"@ungap/global-this": "^0.4.4",
"@wry/context": "^0.6.0",
"@wry/equality": "^0.5.1",
"@wry/trie": "^0.3.0",
"animate.css": "^4.1.1",
"ansi-html": "^0.0.7",
"ansi-regex": "^5.0.0",
"ansi-regex": "^6.0.0",
"autoprefixer": "^10.3.1",
"babel-loader": "^8.2.2",
"classnames": "^2.3.1",
"copy-webpack-plugin": "^7.0.0",
"copy-webpack-plugin": "^9.0.1",
"croppie": "^2.6.5",
"cross-env": "^7.0.3",
"css-loader": "^5.2.7",
"eslint": "^7.31.0",
"css-loader": "^6.2.0",
"css-minimizer-webpack-plugin": "^3.0.2",
"debug": "^4.3.2",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jquery": "^1.5.1",
"eslint-plugin-react": "^7.24.0",
"events": "^3.3.0",
"exif-js": "^2.3.0",
"exports-loader": "^2.0.0",
"exports-loader": "^3.0.0",
"fast-json-stable-stringify": "^2.1.0",
"fast-levenshtein": "^3.0.0",
"fastest-levenshtein": "^1.0.12",
"favicons-webpack-plugin": "github:jantimon/favicons-webpack-plugin#benkostr-webpack-5",
"favicons": "^6.2.2",
"favicons-webpack-plugin": "5.0.2",
"file-loader": "^6.2.0",
"graphql-tag": "^2.12.5",
"hoist-non-react-statics": "^3.3.2",
"html-dom-parser": "^1.0.1",
"html-entities": "^1.4.0",
"html-loader": "^1.3.2",
"html-entities": "^2.3.2",
"html-loader": "^2.1.2",
"html-react-parser": "^1.2.7",
"html-webpack-plugin": "^4.5.2",
"image-minimizer-webpack-plugin": "^2.2.0",
"imagemin-jpegtran": "^7.0.0",
"html-webpack-plugin": "^5.3.2",
"img-optimize-loader": "^1.0.7",
"loglevel": "^1.7.1",
"mini-css-extract-plugin": "^1.6.2",
"node-sass": "^5.0.0",
"mini-css-extract-plugin": "^2.1.0",
"ms": "^2.1.3",
"msw": "^0.33.2",
"node-fetch": "^2.6.1",
"node-sass": "^6.0.1",
"object-assign": "^4.1.1",
"optimize-css-assets-webpack-plugin": "^5.0.8",
"postcss-loader": "^4.3.0",
"optimism": "^0.16.1",
"postcss-loader": "^6.1.1",
"prop-types": "^15.7.2",
"punycode": "^2.1.1",
"querystring": "^0.2.1",
"raw-loader": "^4.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0",
"react-is": "^17.0.2",
"react-lifecycles-compat": "^3.0.4",
"resolve-url-loader": "^3.1.4",
"regenerator-runtime": "^0.13.9",
"resolve-url-loader": "^4.0.0",
"rimraf": "^3.0.2",
"routie": "0.0.1",
"sass-lint": "^1.13.1",
"sass-lint-fix": "^1.12.1",
"sass-loader": "^10.2.0",
"sass-loader": "^12.1.0",
"scheduler": "^0.20.2",
"shallowequal": "^1.1.0",
"strip-ansi": "^6.0.0",
"style-loader": "^2.0.0",
"strip-ansi": "^7.0.0",
"style-loader": "^3.2.1",
"sucrase": "^3.20.0",
"svg-url-loader": "^7.1.1",
"symbol-observable": "^4.0.0",
"terser-webpack-plugin": "^5.1.4",
"ts-invariant": "^0.9.0",
"tslib": "^2.3.0",
"url": "^0.11.0",
"url-loader": "^4.1.1",
"webpack": "^5.45.1",
"webpack": "^5.48.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.0.0-beta.3",
"webpack-manifest-plugin": "^3.1.1",
"webpack-dev-server": "^4.0.0-rc.0",
"webpack-manifest-plugin": "^4.0.2",
"webpack-merge": "^5.8.0",
"yarn": "^1.22.10"
"yarn": "^1.22.11",
"zen-observable": "^0.8.15",
"zen-observable-ts": "^1.1.0"
},
"stylelint": {
"rules": {

View File

@ -1,108 +1,59 @@
<style>
[data-toggle='lightbox']:hover,
[data-toggle='lightbox']:focus {
[data-toggle='lightbox']:hover,
[data-toggle='lightbox']:focus {
text-decoration: underline;
}
</style>
}
</style>
<div id="MetaLightboxContainer">
<div class="typography">
<h2>Loading data</h2>
<p>
<a
href="../src/img/photo1.png"
data-toggle="lightbox"
data-gallery="demo"
data-title="That's first link"
>Load an Image</a
>
<a href="public/src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="That's first link">Load an Image</a>
<br />
<a href="../src/test.json" data-toggle="lightbox">
Load JSON </a
><style>
<a href="public/src/test.json" data-toggle="lightbox">
Load JSON </a>
<style>
[data-toggle='lightbox']:hover,
[data-toggle='lightbox']:focus {
text-decoration: underline;
}
</style>
<br />
<a href="../src/test-pajax.html" data-toggle="lightbox">
Load Partial AJAX HTML </a
><br />
<a href="../src/not-found.html" data-toggle="lightbox">
<a href="public/src/test-pajax.html" data-toggle="lightbox">
Load Partial AJAX HTML </a><br />
<a href="public/src/not-found.html" data-toggle="lightbox">
Not Found test
</a>
</p>
<h2>Embeds</h2>
<p>
<a
href="https://www.youtube.com/watch?v=WYvZZYthDRI"
data-toggle="lightbox"
data-embed="true"
>Embed Youtube link</a
>
<a href="https://www.youtube.com/watch?v=WYvZZYthDRI" data-toggle="lightbox" data-embed="true">Embed Youtube link</a>
<br />
<a
href="https://vimeo.com/26216129"
data-toggle="lightbox"
data-embed="true"
>Embed Vimeo link</a
>
<a href="https://vimeo.com/26216129" data-toggle="lightbox" data-embed="true">Embed Vimeo link</a>
<br />
<a
href="https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones"
data-toggle="lightbox"
data-embed="true"
>Embed SoundCloud link</a
><br />
<a
href="https://www.instagram.com/p/CKl5n87hf7R/"
data-toggle="lightbox"
data-embed="true"
>Embed Instagram</a
>
<a href="https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones" data-toggle="lightbox" data-embed="true">Embed SoundCloud link</a><br />
<a href="https://www.instagram.com/p/CKl5n87hf7R/" data-toggle="lightbox" data-embed="true">Embed Instagram</a>
</p>
<h2>Other</h2>
<p>
<a
href="../src/img/photo2.jpg"
data-toggle="lightbox"
data-gallery="demo"
>
<a href="public/src/img/photo2.jpg" data-toggle="lightbox" data-gallery="demo">
Use [data-toggle="lightbox"] attribute to attach lightbox action
and [href] to specify URL.
</a>
</p>
<p>
<a
href="../src/img/photo1.png"
data-toggle="lightbox"
data-gallery="demo"
data-title="Use data-title attribute to specify lightbox title"
>
<a href="public/src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="Use data-title attribute to specify lightbox title">
Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with
next/prev arrows
</a>
</p>
<p
data-toggle="lightbox"
data-href="https://youtu.be/GgnClrx8N2k"
data-gallery="demo"
data-title="Yes you can link vimeo and youtube videos as long as AJAX content"
>
<p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">
Use [data-toggle="lightbox"] + [data-href] attribute to toggle
lightbox on regular elements.
<b>Click me!</b>
</p>
</div>
<div id="MetaLightboxApp"></div>
</div>

View File

@ -1,11 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Meta Lightbox" />
<meta name="author" content="Tony Air" />
<title>Meta-lightbox Demo</title>
@ -13,31 +11,26 @@
.wrapper {
padding: 2rem;
}
</style>
</head>
<body>
</head>
<body>
<div class="wrapper">
<h1>Meta-lightbox Demo</h1>
NODE_ENV: <%= NODE_ENV %> <%=
require('html-loader!./html/meta-lightbox.html') %>
NODE_ENV:
<%= NODE_ENV %>
<%=
require('html-loader!./html/meta-lightbox.html').default %>
<div id="App"></div>
</div>
<!-- React is required -->
<%= REACT_SCRIPTS %>
<!-- That's optional dependencies -->
<!-- jQuery -->
<!-- script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" />
</body>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
/>
</body>
</html>

View File

@ -3,78 +3,11 @@
*/
import Events from './_events';
import {
Component
} from 'react';
import Swipe from 'react-easy-swipe';
import KeyboardJS from 'keyboardjs';
import Embed, {
defaultProviders
} from 'react-tiny-oembed';
const W = window;
const InstagramProvider = {
provider_name: 'Instagram',
provider_url: 'https://instagram.com',
endpoints: [{
schemes: [
'http://instagram.com/*/p/*,',
'http://www.instagram.com/*/p/*,',
'https://instagram.com/*/p/*,',
'https://www.instagram.com/*/p/*,',
'http://instagram.com/p/*',
'http://instagr.am/p/*',
'http://www.instagram.com/p/*',
'http://www.instagr.am/p/*',
'https://instagram.com/p/*',
'https://instagr.am/p/*',
'https://www.instagram.com/p/*',
'https://www.instagr.am/p/*',
'http://instagram.com/tv/*',
'http://instagr.am/tv/*',
'http://www.instagram.com/tv/*',
'http://www.instagr.am/tv/*',
'https://instagram.com/tv/*',
'https://instagr.am/tv/*',
'https://www.instagram.com/tv/*',
'https://www.instagr.am/tv/*',
],
url: 'https://graph.facebook.com/v9.0/instagram_oembed',
formats: ['json'],
},
{
schemes: [
'http://instagram.com/*/p/*,',
'http://www.instagram.com/*/p/*,',
'https://instagram.com/*/p/*,',
'https://www.instagram.com/*/p/*,',
'http://instagram.com/p/*',
'http://instagr.am/p/*',
'http://www.instagram.com/p/*',
'http://www.instagr.am/p/*',
'https://instagram.com/p/*',
'https://instagr.am/p/*',
'https://www.instagram.com/p/*',
'https://www.instagr.am/p/*',
'http://instagram.com/tv/*',
'http://instagr.am/tv/*',
'http://www.instagram.com/tv/*',
'http://www.instagr.am/tv/*',
'https://instagram.com/tv/*',
'https://instagr.am/tv/*',
'https://www.instagram.com/tv/*',
'https://www.instagr.am/tv/*',
],
url: 'https://api.instagram.com/oembed',
formats: ['json'],
}, ],
};
const axios = require('axios');
class MetaWindow extends Component {
class MetaWindow {
state = {
content: '',
type: [],
@ -84,11 +17,57 @@ class MetaWindow extends Component {
embed: false,
collections: [],
current: null,
target: null,
};
constructor(props) {
super(props);
init(target) {
const ui = this;
console.log(`MetaWindow: [links] init`);
ui.state.target = target;
// reset collections
ui.state.collections = {};
// collect new collections
document.querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]').forEach((el) => {
const gallery = el.getAttribute('data-gallery');
if (gallery) {
ui.state.collections[gallery] = [];
document
.querySelectorAll(
`[data-toggle="lightbox"][data-gallery="${gallery}"]`,
)
.forEach((el) => {
ui.state.collections[gallery].push(el);
});
}
// click handler
el.addEventListener('click', (e) => {
e.preventDefault();
console.log(`MetaWindow: [link] click`);
const el = e.currentTarget;
const link =
el.getAttribute('href') || el.getAttribute('data-href');
const embed = el.getAttribute('data-embed');
ui.state.current = el;
if (embed) {
ui.embed(link);
} else {
ui.load(link);
}
const title = el.getAttribute('data-title');
if (title) {
ui.setCaption(title);
}
});
});
}
constructor(props) {
const ui = this;
ui.name = ui.constructor.name;
console.log(`${ui.name}: init`);
@ -97,12 +76,24 @@ class MetaWindow extends Component {
W.dispatchEvent(new Event(`{ui.name}.init`));
}
_currIndex = () => {
show = () => {
const ui = this;
const el = ui.state.current;
const gallery = el.getAttribute('data-gallery');
console.log(`${ui.name}: show`);
return ui.state.collections[gallery].indexOf(el);
ui.setState({
shown: true,
});
W.dispatchEvent(new Event(`{ui.name}.show`));
};
hide = () => {
const ui = this;
console.log(`${ui.name}: hide`);
ui.setState({
shown: false,
});
W.dispatchEvent(new Event(`{ui.name}.hide`));
};
next = () => {
@ -154,40 +145,13 @@ class MetaWindow extends Component {
});
};
embed = (link) => {
const ui = this;
console.log(`${ui.name}: embed`);
ui.reset();
ui.setState({
embed: link,
loading: false,
type: ['embed', 'video'],
});
ui.show();
};
setCaption = (title) => {
const ui = this;
console.log(`${ui.name}: setCaption`);
ui.state.caption = title;
};
getCaption = () => {
const ui = this;
return {
__html: ui.state.caption
};
}
load = (link) => {
const ui = this;
const axios = ui.axios;
ui.reset();
ui.setState({
loading: true
loading: true,
});
ui.show();
@ -200,6 +164,7 @@ class MetaWindow extends Component {
console.log(
`${ui.name}: response content-type: ${resp.headers['content-type']}`,
);
let json = false;
switch (resp.headers['content-type']) {
case 'image/jpeg':
@ -212,10 +177,9 @@ class MetaWindow extends Component {
// irregular types:
case 'image/jpg':
case 'image/svg':
//json = JSON.parse(ui._abToString(resp.data));
ui.setContent(
`<img src="data:${
resp.headers['content-type']
};base64,${ui._imageEncode(resp.data)}" />`,
`<img src="data:${resp.headers['content-type']};base64,${ui._imageEncode(resp.data)}" />`,
'image',
);
break;
@ -223,7 +187,6 @@ class MetaWindow extends Component {
case 'application/ld+json':
// irregular types:
case 'application/json; charset=UTF-8':
const json = JSON.parse(ui._abToString(resp.data));
ui.setContent(`${json['Content']}`, 'text html json');
break;
@ -272,28 +235,61 @@ class MetaWindow extends Component {
}
ui.setState({
error: msg
error: msg,
});
W.dispatchEvent(new Event(`{ui.name}.error`));
})
.then(() => {
ui.setState({
loading: false
loading: false,
});
});
};
_currIndex = () => {
const ui = this;
const el = ui.state.current;
const gallery = el.getAttribute('data-gallery');
return ui.state.collections[gallery].indexOf(el);
};
embed = (link) => {
const ui = this;
console.log(`${ui.name}: embed`);
ui.reset();
ui.setState({
embed: link,
loading: false,
type: ['embed', 'video'],
});
ui.show();
};
setCaption = (title) => {
const ui = this;
console.log(`${ui.name}: setCaption`);
ui.state.caption = title;
};
getCaption = () => {
const ui = this;
return ui.state.caption;
}
_abToString = (arrayBuffer) => {
return String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));
};
_imageEncode = (arrayBuffer) => {
let u8 = new Uint8Array(arrayBuffer);
let b64encoded = btoa(
const u8 = new Uint8Array(arrayBuffer);
const b64encoded = btoa(
[].reduce.call(
new Uint8Array(arrayBuffer),
function(p, c) {
(p, c) => {
return p + String.fromCharCode(c);
},
'',
@ -314,166 +310,117 @@ class MetaWindow extends Component {
ui.setState({
content: html,
type: typeArr
type: typeArr,
});
};
show = () => {
const ui = this;
console.log(`${ui.name}: show`);
ui.setState({
shown: true
});
W.dispatchEvent(new Event(`{ui.name}.show`));
};
hide = () => {
const ui = this;
console.log(`${ui.name}: hide`);
KeyboardJS.withContext(name, () => {
KeyboardJS.unbind('left', ui.prev);
KeyboardJS.unbind('right', ui.next);
});
KeyboardJS.setContext('index');
ui.setState({
shown: false
});
W.dispatchEvent(new Event(`{ui.name}.hide`));
};
getHtml = () => {
const ui = this;
return {
__html: ui.state.content
};
return ui.state.content;
};
onSwipeMove(position, event) {
const ui = this.ui;
const x = position.x;
if (ui.locked || Math.abs(x) < 50) {
return;
setState(newState) {
const ui = this;
ui.state = Object.assign({}, ui.state, newState);
ui.render();
}
ui.locked = true;
setTimeout(() => {
ui.locked = false;
}, 1000);
if (x > 0) {
console.log(`${ui.name}: swipe right`);
ui.prev();
} else {
console.log(`${ui.name}: swipe left`);
ui.next();
}
}
render() {
const ui = this;
const name = ui.name;
let navs = null;
const navs = null;
const el = ui.state.current;
KeyboardJS.setContext(name);
KeyboardJS.withContext(name, () => {
KeyboardJS.unbind('left', ui.prev);
KeyboardJS.unbind('right', ui.next);
ui.state.target.innerHTML = '';
const meta = document.createElement('div');
meta.classList.add(`meta-${name}`, `meta-${name}__${ui.state.type.join(` meta-${name}__`)}`);
ui.state.target.append(meta);
const metaOverlay = document.createElement('div');
metaOverlay.classList.add(`meta-${name}-overlay`);
if (ui.state.shown) {
metaOverlay.classList.add(`meta-${name}-overlay__open`);
}
if (ui.state.loading) {
metaOverlay.classList.add(`meta-${name}-overlay__loading`);
}
if (ui.state.error) {
metaOverlay.classList.add(`meta-${name}-overlay__error`);
}
meta.append(metaOverlay);
const metaContent = document.createElement('div');
metaContent.classList.add('meta-content');
metaOverlay.append(metaContent);
const btnClose = document.createElement('button');
btnClose.classList.add('meta-nav', 'meta-close', 'a');
btnClose.innerHTML =
'<i class="icon fa fas fa-times"></i>' +
' <span class="visually-hidden">Close</span>';
btnClose.addEventListener('click', (e) => {
e.preventDefault();
ui.hide();
});
metaContent.append(btnClose);
if (el) {
const gallery = el.getAttribute('data-gallery');
if (gallery && ui.state.collections[gallery].length > 1) {
navs = (
<nav className="meta-navs">
<button
className="meta-nav meta-nav-arrow meta-nav-arrow__prev a"
onClick={ui.prev}
>
<i className="fa fas fa-chevron-left"></i>
<span className="sr-only">Previous</span>
</button>
<button
className="meta-nav meta-nav-arrow meta-nav-arrow__next a"
onClick={ui.next}
>
<i className="fa fas fa-chevron-right"></i>
<span className="sr-only">Next</span>
</button>
</nav>
);
const navs = document.createElement('nav');
navs.classList.add('meta-navs');
KeyboardJS.withContext(name, () => {
KeyboardJS.bind('left', ui.prev);
KeyboardJS.bind('right', ui.next);
const prevBtn = document.createElement('button');
prevBtn.classList.add('meta-nav', 'meta-nav-arrow', 'meta-nav-arrow__prev', 'a');
prevBtn.innerHTML = '<i class="icon fa fas fa-chevron-left"></i>' +
' <span class="visually-hidden">Previous</span>';
prevBtn.addEventListener('click', (e) => {
e.preventDefault();
ui.prev();
});
navs.append(prevBtn);
const nextBtn = document.createElement('button');
nextBtn.classList.add('meta-nav', 'meta-nav-arrow', 'meta-nav-arrow__prev', 'a');
nextBtn.innerHTML = '<i class="icon fa fas fa-chevron-right"></i>' +
' <span class="visually-hidden">Next</span>';
nextBtn.addEventListener('click', (e) => {
e.preventDefault();
ui.next();
});
navs.append(nextBtn);
metaContent.append(navs);
}
}
const content = ui.state.embed ? (
<section className="meta-wrap typography">
<Embed
url={ui.state.embed}
providers={[...defaultProviders, InstagramProvider]}
LoadingFallbackElement=<div className="meta-spinner_embed">
... Loading ...
</div>
/>
</section>
) : (
<section
className="meta-wrap typography"
dangerouslySetInnerHTML={ui.getHtml()}
></section>
);
let content = '';
if (ui.state.embed) {
content = '<section class="meta-wrap typography">' +
'<Embed url={ui.state.embed} providers={[...defaultProviders, InstagramProvider]}' +
' LoadingFallbackElement=<div className="meta-spinner_embed"> ... Loading ... </div>' +
'</section>';
} else {
const content = document.createElement('section');
content.classList.add('meta-wrap', 'typography');
content.innerHTML = ui.getHtml();
metaContent.append(content);
}
const className = `meta-${name} meta-${name}__${ui.state.type.join(
` meta-${name}__`,
)}`;
if (ui.state.error) {
const error = document.createElement('div');
error.classList.add('meta-error');
error.innerHTML = ui.state.error;
metaContent.append(error);
} else if (ui.state.caption) {
const caption = document.createElement('div');
caption.classList.add('meta-caption');
caption.innerHTML = ui.getCaption();
metaContent.append(caption);
}
const overlayClassName = `meta-${name}-overlay${
ui.state.shown ? ` meta-${name}-overlay__open` : ''
}${ui.state.loading ? ` meta-${name}-overlay__loading` : ''}${
ui.state.error ? ` meta-${name}-overlay__error` : ''
}`;
const caption = ui.state.caption ?
<div className="meta-caption" dangerouslySetInnerHTML={ui.getCaption()}></div> :
'';
return (
<Swipe className={className} ui={ui} onSwipeMove={ui.onSwipeMove}>
<div className={overlayClassName}>
<article className="meta-content">
{navs}
<button
className="meta-nav meta-close a"
onClick={ui.hide}
>
<i className="fa fas fa-times"></i>
<span className="sr-only">Close</span>
</button>
<div className="meta-spinner">... Loading ...</div>
<div className="meta-error alert alert-danger">
{ui.state.error}
</div>
{content}
{caption}
</article>
</div>
</Swipe>
);
return ui;
}
}

View File

@ -5,69 +5,28 @@
*/
import Events from './_events';
import MetaWindow from './_window';
import React from 'react';
import ReactDOM from 'react-dom';
import MetaWindow from './_window.jsx';
const ui = new MetaWindow();
const container = document.getElementById('MetaLightboxApp');
if (!container) {
console.log(`MetaWindow: missing container`);
}
const AppUI = ((W) => {
const MetaLightbox = ReactDOM.render(
<MetaWindow />,
document.getElementById('MetaLightboxApp'),
);
const init = () => {
ui.init(container);
};
const initMetaWindowLinks = () => {
const ui = MetaLightbox;
console.log(`MetaWindow: [links] init`);
window.addEventListener(`${Events.LOADED}`, init);
window.addEventListener(`${Events.AJAX}`, init);
window.addEventListener(`MetaWindow.initLinks`, init);
document.querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]').forEach((el) => {
// collections
const gallery = el.getAttribute('data-gallery');
if (gallery) {
ui.state.collections[gallery] = [];
document
.querySelectorAll(
`[data-toggle="lightbox"][data-gallery="${gallery}"]`,
)
.forEach((el) => {
ui.state.collections[gallery].push(el);
});
}
function importAll(r) {
return r.keys().map(r);
}
// click handler
el.addEventListener('click', (e) => {
e.preventDefault();
console.log(`MetaWindow: [link] click`);
const images = importAll(
require.context('../img/', false, /\.(png|jpe?g|svg)$/),
);
const el = e.currentTarget;
const link =
el.getAttribute('href') || el.getAttribute('data-href');
const embed = el.getAttribute('data-embed');
ui.state.current = el;
if (embed) {
ui.embed(link);
} else {
ui.load(link);
}
const title = el.getAttribute('data-title');
if (title) {
ui.setCaption(title);
}
});
});
};
W.addEventListener(`${Events.LOADED}`, initMetaWindowLinks);
W.addEventListener(`${Events.AJAX}`, initMetaWindowLinks);
W.addEventListener(`MetaWindow.initLinks`, initMetaWindowLinks);
return MetaLightbox;
})(window);
export default AppUI;
// display custom HTML content manually using JS
//M.setContent('<b>ZZZZZZZZZAAAA11<a href="/">BBBB</a>122</b>');
//M.show();
export default ui;

View File

@ -2,13 +2,42 @@
* Common Environment
*/
const webpack = require('webpack');
const commonVariables = require('./webpack.configuration');
const conf = commonVariables.configuration;
const YML_PATH = './webpack.yml';
const CONF_VAR = 'App\\Templates\\WebpackTemplateProvider';
const path = require('path');
const filesystem = require('fs');
const fs = require('fs');
const yaml = require('js-yaml');
const webpack = require('webpack');
/*
* Load webpack configuration from webpack.yml
*/
const yml = yaml.load(
fs.readFileSync(path.join(__dirname, YML_PATH), 'utf8'),
);
const conf = yml[CONF_VAR]
let themes = [];
// add themes
if (conf.THEMESDIR) {
const themeDir = conf.THEMESDIR;
const dir = path.resolve(__dirname, themeDir);
if (fs.existsSync(dir)) {
fs.readdirSync(dir).forEach((file) => {
filePath = path.join(themeDir, file);
const stat = fs.statSync(filePath);
if (stat && stat.isDirectory()) {
themes.push(filePath);
}
});
}
}
/* Setup Entries */
const includes = {};
const modules = [
path.resolve(__dirname, conf.APPDIR, conf.SRC),
@ -28,10 +57,10 @@ const _addAppFiles = (theme) => {
themeName = 'app';
}
if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'js', '_index.js'))) {
includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'js', '_index.js');
if (fs.existsSync(path.join(dirPath, conf.SRC, 'js', 'app.js'))) {
includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'js', 'app.js');
} else if (
filesystem.existsSync(path.join(dirPath, conf.SRC, 'scss', 'app.scss'))
fs.existsSync(path.join(dirPath, conf.SRC, 'scss', 'app.scss'))
) {
includes[`${themeName}`] = path.join(
dirPath,
@ -50,13 +79,13 @@ const _addAppFiles = (theme) => {
const dirPath = path.resolve(__dirname, dir);
let results = [];
filesystem.readdirSync(dirPath).forEach((file) => {
fs.readdirSync(dirPath).forEach((file) => {
if (file.charAt(0) === '_') {
return;
}
const filePath = path.join(dirPath, file);
const stat = filesystem.statSync(filePath);
const stat = fs.statSync(filePath);
if (stat && stat.isDirectory() && includeSubFolders) {
results = results.concat(
@ -72,7 +101,7 @@ const _addAppFiles = (theme) => {
// add page specific scripts
const typesJSPath = path.join(theme, conf.TYPESJS);
if (filesystem.existsSync(typesJSPath)) {
if (fs.existsSync(typesJSPath)) {
const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
pageScripts.forEach((file) => {
includes[`${themeName}_${path.basename(file, '.js')}`] = file;
@ -81,7 +110,7 @@ const _addAppFiles = (theme) => {
// add page specific scss
const typesSCSSPath = path.join(theme, conf.TYPESSCSS);
if (filesystem.existsSync(typesSCSSPath)) {
if (fs.existsSync(typesSCSSPath)) {
const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
scssIncludes.forEach((file) => {
includes[`${themeName}_${path.basename(file, '.scss')}`] = file;
@ -91,28 +120,44 @@ const _addAppFiles = (theme) => {
_addAppFiles(conf.APPDIR);
// remove some backend includes
delete includes['app_editor'];
delete includes['app_cms'];
delete includes['app_order'];
// add themes
commonVariables.themes.forEach((theme) => {
themes.forEach((theme) => {
_addAppFiles(theme);
});
module.exports = {
configuration: conf,
themes: themes,
webpack: {
entry: includes,
externals: {
jquery: 'jQuery',
// comment out jQuery if you don't use it to prevent bootstrap thinking that there's jQuery present
//jquery: 'jQuery',
react: 'React',
'react-dom': 'ReactDOM',
},
resolve: {
modules: modules,
alias: {
'window.jQuery': require.resolve('jquery'),
// comment out jQuery if you don't use it to prevent bootstrap thinking that there's jQuery present
/*'window.jQuery': require.resolve('jquery'),
$: require.resolve('jquery'),
jquery: require.resolve('jquery'),
jQuery: require.resolve('jquery'),
jQuery: require.resolve('jquery'),*/
react: require.resolve('react'),
'react-dom': require.resolve('react-dom'),
},
fallback: { path: false },
fallback: {
path: false
},
},
experiments: {
topLevelAwait: true,
},
}
};

View File

@ -1,41 +1,48 @@
/*
* Production assets generation
*/
const webpack = require('webpack');
const commonVariables = require('./webpack.configuration');
const conf = commonVariables.configuration;
const { merge } = require('webpack-merge');
const common = require('./webpack.config.common.js');
const conf = common.configuration;
const filesystem = require('fs');
const webpack = require('webpack');
const {
merge
} = require('webpack-merge');
const fs = require('fs');
const path = require('path');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageminPlugin = require('image-minimizer-webpack-plugin');
const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
//const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UIInfo = require('./package.json');
const UIVERSION = JSON.stringify(UIInfo.version);
const UIMetaInfo = require('./package.json');
const NODE_ENV = conf.NODE_ENV || process.env.NODE_ENV;
const COMPRESS = NODE_ENV === 'production' ? true : false;
const IP = process.env.IP || conf.HOSTNAME;
const PORT = process.env.PORT || conf.PORT;
console.log('NODE_ENV: ' + NODE_ENV);
console.log('COMPRESS: ' + COMPRESS);
console.log('WebP images: ' + conf['webp']);
console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
let plugins = [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
react: 'React',
'react-dom': 'ReactDOM',
/*$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default'],
Util: 'exports-loader?Util!bootstrap/js/dist/util',
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
@ -47,7 +54,7 @@ let plugins = [
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',*/
}),
new webpack.DefinePlugin({
'process.env': {
@ -56,6 +63,11 @@ let plugins = [
UINAME: JSON.stringify(UIInfo.name),
UIVERSION: UIVERSION,
UIAUTHOR: JSON.stringify(UIInfo.author),
UIMetaNAME: JSON.stringify(UIMetaInfo.name),
UIMetaVersion: JSON.stringify(UIMetaInfo.version),
GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
BASE_HREF: JSON.stringify(''),
}),
new webpack.LoaderOptionsPlugin({
minimize: COMPRESS,
@ -68,56 +80,9 @@ let plugins = [
];
if (COMPRESS) {
plugins.push(
new OptimizeCssAssetsPlugin({
//assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default'],
},
cssProcessorOptions: {
zindex: true,
cssDeclarationSorter: true,
reduceIdents: false,
mergeIdents: true,
mergeRules: true,
mergeLonghand: true,
discardUnused: true,
discardOverridden: true,
discardDuplicates: true,
discardComments: {
removeAll: true,
},
},
canPrint: true,
}),
);
plugins.push(require('autoprefixer'));
plugins.push(
new ImageminPlugin({
minimizerOptions: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 5 }],
[
'svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
],
},
}),
);
plugins.push(
/*plugins.push(
new ImageSpritePlugin({
exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/,
commentOrigin: false,
@ -129,28 +94,29 @@ if (COMPRESS) {
outputFilename: 'img/sprite-[hash].png',
padding: 0,
}),
);
);*/
}
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
if (filesystem.existsSync(indexPath)) {
if (fs.existsSync(indexPath)) {
plugins.push(
new HtmlWebpackPlugin({
publicPath: '',
template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
templateParameters: {
NODE_ENV: NODE_ENV,
REACT_SCRIPTS:
NODE_ENV === 'production'
? '<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>'
: '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
GRAPHQL_URL: conf['GRAPHQL_URL'],
STATIC_URL: conf['STATIC_URL'],
REACT_SCRIPTS: NODE_ENV === 'production' ?
'<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
},
xhtml: true,
}),
);
}
const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
if (filesystem.existsSync(faviconPath)) {
if (fs.existsSync(faviconPath)) {
plugins.push(
new FaviconsWebpackPlugin({
title: 'Webpack App',
@ -182,9 +148,9 @@ if (filesystem.existsSync(faviconPath)) {
}
// add themes favicons
commonVariables.themes.forEach((theme) => {
common.themes.forEach((theme) => {
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
if (filesystem.existsSync(faviconPath)) {
if (fs.existsSync(faviconPath)) {
plugins.push(
new FaviconsWebpackPlugin({
title: 'Webpack App',
@ -225,7 +191,7 @@ plugins.push(
}),
);
const cfg = merge(common, {
const cfg = merge(common.webpack, {
mode: NODE_ENV,
cache: {
type: 'filesystem',
@ -281,6 +247,32 @@ const cfg = merge(common, {
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
}),
new CssMinimizerPlugin({
parallel: true,
minimizerOptions: [{
preset: [
'default',
{
discardComments: {
removeAll: true
},
zindex: true,
cssDeclarationSorter: true,
reduceIdents: false,
mergeIdents: true,
mergeRules: true,
mergeLonghand: true,
discardUnused: true,
discardOverridden: true,
discardDuplicates: true,
},
],
}, ],
minify: [
CssMinimizerPlugin.cssnanoMinify,
//CssMinimizerPlugin.cleanCssMinify,
]
}),
],
},
@ -291,13 +283,13 @@ const cfg = merge(common, {
},
module: {
rules: [
{
rules: [{
test: /\.jsx?$/,
//exclude: /node_modules/,
use: {
loader: 'babel-loader',
loader: 'babel-loader', //'@sucrase/webpack-loader',
options: {
//transforms: ['jsx']
presets: [
'@babel/preset-env',
'@babel/react',
@ -307,7 +299,9 @@ const cfg = merge(common, {
],
},
], //Preset used for env setup
plugins: [['@babel/transform-react-jsx']],
plugins: [
['@babel/transform-react-jsx']
],
cacheDirectory: true,
cacheCompression: true,
},
@ -315,8 +309,7 @@ const cfg = merge(common, {
},
{
test: /\.s?css$/,
use: [
{
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
@ -333,39 +326,33 @@ const cfg = merge(common, {
options: {
sourceMap: !COMPRESS,
},
},
],
}, ],
},
{
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [
{
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: '../fonts/',
},
},
],
}, ],
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
use: [
{
test: /\.(ttf|otf|eot|woff(2)?)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: '../fonts/',
},
},
],
}, ],
},
{
test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
use: [
{
use: [{
loader: 'img-optimize-loader',
options: {
name: '[name].[ext]',
@ -376,15 +363,32 @@ const cfg = merge(common, {
mode: 'low', // 'lossless', 'high', 'low'
disableOnDevelopment: true,
webp: conf['webp'],
// loseless compression for png
optipng: {
optimizationLevel: 4,
},
// lossy compression for png. This will generate smaller file than optipng.
pngquant: {
quality: [0.2, 0.8],
},
// Compression for svg.
svgo: true,
// Compression for gif.
gifsicle: {
optimizationLevel: 3,
},
// Compression for jpg.
mozjpeg: {
progressive: true,
quality: 60,
},
},
inline: {
limit: 1,
},
},
},
],
},
],
}, ],
}, ],
},
plugins: plugins,

View File

@ -1,23 +1,27 @@
/*
* Development assets generation
*/
const common = require('./webpack.config.common.js');
const conf = common.configuration;
const path = require('path');
const fs = require('fs');
//const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const {
merge
} = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.config.common.js');
const commonVariables = require('./webpack.configuration');
const conf = commonVariables.configuration;
const IP = process.env.IP || conf.HOSTNAME;
const PORT = process.env.PORT || conf.PORT;
const UIInfo = require('./package.json');
const UIVERSION = JSON.stringify(UIInfo.version);
const UIMetaInfo = require('./package.json');
const NODE_ENV = 'development'; //conf.NODE_ENV || process.env.NODE_ENV;
const COMPRESS = NODE_ENV === 'production' ? true : false;
@ -25,8 +29,50 @@ const COMPRESS = NODE_ENV === 'production' ? true : false;
console.log('NODE_ENV: ' + NODE_ENV);
console.log('COMPRESS: ' + COMPRESS);
console.log('WebP images: ' + conf['webp']);
console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
console.log('HTTPS: ' + conf['HTTPS']);
const config = merge(common, {
const plugins = [
new webpack.ProvidePlugin({
react: 'React',
'react-dom': 'ReactDOM',
/*$: 'jquery',
jQuery: 'jquery',*/
}),
new webpack.DefinePlugin({
UINAME: JSON.stringify(UIInfo.name),
UIVERSION: UIVERSION,
UIAUTHOR: JSON.stringify(UIInfo.author),
UIMetaNAME: JSON.stringify(UIMetaInfo.name),
UIMetaVersion: JSON.stringify(UIMetaInfo.version),
GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
BASE_HREF: JSON.stringify(
`http${conf['HTTPS'] ? 's' : ''}://${IP}:${PORT}`,
),
}),
//new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(),
];
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
if (fs.existsSync(indexPath)) {
plugins.push(
new HtmlWebpackPlugin({
publicPath: '',
template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
templateParameters: {
NODE_ENV: NODE_ENV,
GRAPHQL_URL: conf['GRAPHQL_URL'],
STATIC_URL: conf['STATIC_URL'],
REACT_SCRIPTS: NODE_ENV === 'production' ?
'<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
},
}),
);
}
const config = merge(common.webpack, {
mode: 'development',
entry: {
@ -41,34 +87,41 @@ const config = merge(common, {
path: path.join(__dirname),
filename: '[name].js',
// necessary for HMR to know where to load the hot update chunks
publicPath: 'https://' + conf.HOSTNAME + ':' + conf.PORT + '/',
publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${
conf.PORT
}/`,
},
module: {
rules: [
{
rules: [{
test: /\.jsx?$/,
//exclude: /node_modules/,
use: {
loader: 'babel-loader',
loader: '@sucrase/webpack-loader', //'babel-loader',
options: {
presets: [
transforms: ['jsx']
/*presets: [
'@babel/preset-env',
'@babel/react',
{
plugins: ['@babel/plugin-proposal-class-properties'],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-syntax-top-level-await',
],
},
], //Preset used for env setup
plugins: [['@babel/transform-react-jsx']],
plugins: [
['@babel/transform-react-jsx'],
['@babel/plugin-syntax-top-level-await'],
],
cacheDirectory: true,
cacheCompression: true,
cacheCompression: true,*/
},
},
},
{
test: /\.s?css$/,
use: [
{
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
@ -85,90 +138,41 @@ const config = merge(common, {
options: {
sourceMap: false,
},
},
],
}, ],
},
{
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [
{
use: [{
loader: 'url-loader',
},
],
}, ],
},
{
test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/,
use: [
{
use: [{
loader: 'file-loader',
options: {
name(file) {
return 'public/[path][name].[ext]';
},
},
}, ],
}, ],
},
],
},
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
Util: 'exports-loader?Util!bootstrap/js/dist/util',
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
Button: 'exports-loader?Button!bootstrap/js/dist/button',
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
}),
new webpack.DefinePlugin({
UINAME: JSON.stringify(UIInfo.name),
UIVERSION: JSON.stringify(UIInfo.version),
UIAUTHOR: JSON.stringify(UIInfo.author),
}),
//new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
publicPath: '',
template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
templateParameters: {
NODE_ENV: NODE_ENV,
REACT_SCRIPTS:
NODE_ENV === 'production'
? '<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>'
: '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
},
}),
],
plugins: plugins,
devServer: {
host: IP,
port: PORT,
historyApiFallback: false,
//hot: true,
/*clientLogLevel: 'info',
disableHostCheck: true,
contentBase: [
path.resolve(__dirname, 'public'),
path.resolve(__dirname, 'public', 'resources'),
path.resolve(__dirname, 'public', 'resources', conf.APPDIR, conf.DIST),
'node_modules',
],*/
//watchContentBase: true,
overlay: {
warnings: true,
errors: true,
},
static: path.resolve(__dirname, conf['APPDIR'], conf['SRC']),
https: conf['HTTPS'],
hot: false,
//injectClient: conf['injectClient'],
headers: {
'Access-Control-Allow-Origin': '*',
'Referrer-Policy': 'unsafe-url',
'service-worker-allowed': '/',
},
},
});

View File

@ -1,35 +0,0 @@
/*
* Load webpack configuration from app/_config/webpack.yml
*/
const path = require('path');
const filesystem = require('fs');
const fs = require('fs');
const yaml = require('js-yaml');
const conf = yaml.safeLoad(
fs.readFileSync(path.join(__dirname, '/webpack.yml'), 'utf8'),
);
let themes = [];
// add themes
if (conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR) {
const themeDir = conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR;
const dir = path.resolve(__dirname, themeDir);
if (filesystem.existsSync(dir)) {
filesystem.readdirSync(dir).forEach((file) => {
filePath = path.join(themeDir, file);
const stat = filesystem.statSync(filePath);
if (stat && stat.isDirectory()) {
themes.push(filePath);
}
});
}
}
module.exports = {
configuration: conf['Site\\Templates\\WebpackTemplateProvider'],
themes: themes,
};

View File

@ -2,14 +2,19 @@
# with all configuration variables presented
# Cuz WebPack compiling script use it to set configuration
Site\Templates\WebpackTemplateProvider:
App\Templates\WebpackTemplateProvider:
APPDIR: ./
THEMESDIR: themes
HOSTNAME: 127.0.0.1
PORT: 3000
PORT: 3001
SRC: src
DIST: dist
TYPESJS: src/js/types
TYPESSCSS: src/scss/types
NODE_ENV: production #production,development
webp: false
NODE_ENV: production #production,development
HTTPS: false
injectClient: true # disable it to test caching service worker
GRAPHQL_URL: 'http://127.0.0.1/graphql'
GRAPHQL_API_KEY: 'ApKrRSjySO4JAmX3E2Z7HvrBD0m8xdDlAiXyh4IbH3w'
STATIC_URL: 'http://127.0.0.1'