tonyair/meta-lightbox
1
0
Fork 0
mirror of https://github.com/a2nt/meta-lightbox.git synced 2024-10-22 17:05:53 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: Refactoried to Vanilla JS

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
babel.config.json
View File

@ -3,7 +3,8 @@
[ [
"@babel/preset-env", "@babel/preset-env",
{ {
"targets": { "targets":
{
"node": "6.10", "node": "6.10",
"esmodules": true "esmodules": true
} }
@ -21,7 +22,9 @@
] ]
], ],
"plugins": [ "plugins": [
"@babel/plugin-syntax-top-level-await",
"@babel/plugin-proposal-object-rest-spread", "@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%}

4
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 { <!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; 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
View File

File diff suppressed because one or more lines are too long

150
dist/records.json vendored
View File

@ -3,23 +3,25 @@
{ {
"chunks": { "chunks": {
"byName": { "byName": {
"HtmlWebpackPlugin_0": 443 "HtmlWebpackPlugin_0-0": 563
}, },
"bySource": { "bySource": {
"0 HtmlWebpackPlugin_0": 443 "0 HtmlWebpackPlugin_0-0": 563
}, },
"usedIds": [ "usedIds": [
443 563
] ]
}, },
"modules": { "modules": {
"byIdentifier": { "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-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@4.5.2_webpack@5.45.1/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 987 "./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": [ "usedIds": [
288, 163,
987 255,
688
] ]
} }
} }
@ -37,88 +39,64 @@
}, },
"modules": { "modules": {
"byIdentifier": { "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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|4a63aef513028d871fff28ba08c40b98": 858
"./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
}, },
"usedIds": [ "usedIds": [
9, 20,
24, 33,
28, 115,
34, 163,
61, 194,
69, 215,
90, 216,
105, 224,
123, 233,
131, 269,
190, 462,
193, 545,
229, 588,
235, 641,
309,
329,
359,
364,
370,
398,
450,
464,
482,
506,
567,
617,
655,
658, 658,
711, 749,
761, 813,
780, 824,
788, 840,
804, 858,
817, 872,
849, 877,
876, 900,
962, 904,
971, 947,
977, 972,
985 980,
989
] ]
} }
} }

4
dist/report.html vendored
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <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" /> <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> <script>
@ -30,7 +30,7 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <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"; window.defaultSizes = "parsed";
</script> </script>
</body> </body>

377
package.json
View File

@ -1,184 +1,197 @@
{ {
"name": "@a2nt/meta-lightbox", "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
"version": "3.1.6", "version": "4.0.8",
"description": "Vanilla JS: Universal Lightbox window", "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>", "author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause", "license": "BSD-2-Clause",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/a2nt/meta-lightbox.git" "url": "git+https://github.com/a2nt/webpack-bootstrap-ui-kit.git"
}, },
"private": false, "private": false,
"engines": { "engines": {
"node": ">= 12", "node": ">= 12",
"yarn": ">= 1.22.0" "yarn": ">= 1.22.0"
}, },
"scripts": { "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", "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", "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", "lint:check": "eslint ./src --config eslint.config.json && sass-lint ./src --config sass-lint.yml -v -q",
"lint:fix": "eslint ./src --config eslint.config.json --fix && sass-lint ./src --config sass-lint.yml -v -q --fix", "lint:fix": "eslint ./src --config eslint.config.json --fix && sass-lint ./src --config sass-lint.yml -v -q --fix",
"lint:js": "eslint ./src --config eslint.config.json", "lint:js": "eslint ./src --config eslint.config.json",
"lint:sass": "sass-lint ./src --config sass-lint.yml -v -q", "lint:sass": "sass-lint ./src --config sass-lint.yml -v -q",
"prebuild": "yarn lint:fix && rimraf dist", "prebuild": "yarn lint:fix && rimraf dist",
"prepare": "yarn lint:fix && yarn build", "prepare": "yarn lint:fix && yarn build",
"prunecaches": "rimraf ./node_modules/.cache/", "prunecaches": "rimraf ./node_modules/.cache/",
"postinstall": "npm run prunecaches", "postinstall": "npm run prunecaches",
"postuninstall": "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": { "directories": {
"css": [ "assets": {
"dist/css/app.css" "css": [
], "dist/css/app.css"
"js": [ ],
"dist/js/app.js" "js": [
] "dist/js/app.js"
} ]
}, }
"main": "./dist/js/app.js", },
"browser": { "main": "./dist/js/app.js",
"app": "./dist/js/app.js" "browser": {
}, "app": "./dist/js/app.js"
"module": "./src/js/app.js", },
"browserslist": [ "module": "./src/js/app.js",
"defaults", "browserslist": [
"ie>=11" "defaults",
], "ie>=11"
"dependencies": { ],
"axios": "^0.21.1", "dependencies": {
"balanced-match": "^1.0.2", "axios": "^0.21.1",
"bootstrap": "^4.6.0", "es6-template": "^1.0.4"
"brace-expansion": "^2.0.1", },
"font-awesome": "^4.7.0", "devDependencies": {
"keyboardjs": "^2.6.4", "@a2nt/image-sprite-webpack-plugin": "^0.2.5",
"material-design-color": "^2.3.2", "@babel/core": "^7.14.8",
"minimatch": "^3.0.4", "@babel/eslint-parser": "^7.14.9",
"react": "^17.0.2", "@babel/plugin-proposal-class-properties": "^7.14.5",
"react-dom": "^17.0.2", "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
"react-easy-swipe": "^0.0.21", "@babel/plugin-syntax-jsx": "^7.14.5",
"react-tiny-oembed": "^1.1.0", "@babel/plugin-syntax-top-level-await": "^7.14.5",
"setimmediate": "^1.0.5" "@babel/plugin-transform-react-jsx": "^7.14.9",
}, "@babel/plugin-transform-runtime": "^7.14.5",
"devDependencies": { "@babel/preset-env": "^7.14.9",
"@a2nt/image-sprite-webpack-plugin": "^0.2.5", "@babel/preset-react": "^7.14.5",
"@babel/core": "^7.14.6", "@babel/runtime": "^7.14.8",
"@babel/eslint-parser": "^7.14.7", "@googlemaps/markerclustererplus": "*",
"@babel/plugin-proposal-class-properties": "^7.14.5", "@sucrase/webpack-loader": "^2.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.14.7", "@ungap/global-this": "^0.4.4",
"@babel/plugin-syntax-jsx": "^7.14.5", "@wry/context": "^0.6.0",
"@babel/plugin-transform-react-jsx": "^7.14.5", "@wry/equality": "^0.5.1",
"@babel/preset-env": "^7.14.7", "@wry/trie": "^0.3.0",
"@babel/preset-react": "^7.14.5", "animate.css": "^4.1.1",
"@babel/runtime": "^7.14.6", "ansi-html": "^0.0.7",
"@googlemaps/markerclustererplus": "*", "ansi-regex": "^6.0.0",
"animate.css": "^4.1.1", "autoprefixer": "^10.3.1",
"ansi-html": "^0.0.7", "babel-loader": "^8.2.2",
"ansi-regex": "^5.0.0", "classnames": "^2.3.1",
"autoprefixer": "^10.3.1", "copy-webpack-plugin": "^9.0.1",
"babel-loader": "^8.2.2", "croppie": "^2.6.5",
"classnames": "^2.3.1", "cross-env": "^7.0.3",
"copy-webpack-plugin": "^7.0.0", "css-loader": "^6.2.0",
"croppie": "^2.6.5", "css-minimizer-webpack-plugin": "^3.0.2",
"cross-env": "^7.0.3", "debug": "^4.3.2",
"css-loader": "^5.2.7", "eslint": "^7.32.0",
"eslint": "^7.31.0", "eslint-plugin-import": "^2.23.4",
"eslint-plugin-import": "^2.23.4", "eslint-plugin-jquery": "^1.5.1",
"eslint-plugin-jquery": "^1.5.1", "eslint-plugin-react": "^7.24.0",
"eslint-plugin-react": "^7.24.0", "events": "^3.3.0",
"events": "^3.3.0", "exif-js": "^2.3.0",
"exif-js": "^2.3.0", "exports-loader": "^3.0.0",
"exports-loader": "^2.0.0", "fast-json-stable-stringify": "^2.1.0",
"fast-levenshtein": "^3.0.0", "fast-levenshtein": "^3.0.0",
"fastest-levenshtein": "^1.0.12", "fastest-levenshtein": "^1.0.12",
"favicons-webpack-plugin": "github:jantimon/favicons-webpack-plugin#benkostr-webpack-5", "favicons": "^6.2.2",
"file-loader": "^6.2.0", "favicons-webpack-plugin": "5.0.2",
"hoist-non-react-statics": "^3.3.2", "file-loader": "^6.2.0",
"html-dom-parser": "^1.0.1", "graphql-tag": "^2.12.5",
"html-entities": "^1.4.0", "hoist-non-react-statics": "^3.3.2",
"html-loader": "^1.3.2", "html-dom-parser": "^1.0.1",
"html-react-parser": "^1.2.7", "html-entities": "^2.3.2",
"html-webpack-plugin": "^4.5.2", "html-loader": "^2.1.2",
"image-minimizer-webpack-plugin": "^2.2.0", "html-react-parser": "^1.2.7",
"imagemin-jpegtran": "^7.0.0", "html-webpack-plugin": "^5.3.2",
"img-optimize-loader": "^1.0.7", "img-optimize-loader": "^1.0.7",
"loglevel": "^1.7.1", "loglevel": "^1.7.1",
"mini-css-extract-plugin": "^1.6.2", "mini-css-extract-plugin": "^2.1.0",
"node-sass": "^5.0.0", "ms": "^2.1.3",
"object-assign": "^4.1.1", "msw": "^0.33.2",
"optimize-css-assets-webpack-plugin": "^5.0.8", "node-fetch": "^2.6.1",
"postcss-loader": "^4.3.0", "node-sass": "^6.0.1",
"prop-types": "^15.7.2", "object-assign": "^4.1.1",
"punycode": "^2.1.1", "optimism": "^0.16.1",
"querystring": "^0.2.1", "postcss-loader": "^6.1.1",
"react-hot-loader": "^4.13.0", "prop-types": "^15.7.2",
"react-is": "^17.0.2", "punycode": "^2.1.1",
"react-lifecycles-compat": "^3.0.4", "querystring": "^0.2.1",
"resolve-url-loader": "^3.1.4", "raw-loader": "^4.0.2",
"rimraf": "^3.0.2", "react": "^17.0.2",
"routie": "0.0.1", "react-dom": "^17.0.2",
"sass-lint": "^1.13.1", "react-hot-loader": "^4.13.0",
"sass-lint-fix": "^1.12.1", "react-is": "^17.0.2",
"sass-loader": "^10.2.0", "react-lifecycles-compat": "^3.0.4",
"scheduler": "^0.20.2", "regenerator-runtime": "^0.13.9",
"shallowequal": "^1.1.0", "resolve-url-loader": "^4.0.0",
"strip-ansi": "^6.0.0", "rimraf": "^3.0.2",
"style-loader": "^2.0.0", "routie": "0.0.1",
"svg-url-loader": "^7.1.1", "sass-lint": "^1.13.1",
"terser-webpack-plugin": "^5.1.4", "sass-lint-fix": "^1.12.1",
"url": "^0.11.0", "sass-loader": "^12.1.0",
"url-loader": "^4.1.1", "scheduler": "^0.20.2",
"webpack": "^5.45.1", "shallowequal": "^1.1.0",
"webpack-bundle-analyzer": "^4.4.2", "strip-ansi": "^7.0.0",
"webpack-cli": "^4.7.2", "style-loader": "^3.2.1",
"webpack-dev-server": "^4.0.0-beta.3", "sucrase": "^3.20.0",
"webpack-manifest-plugin": "^3.1.1", "svg-url-loader": "^7.1.1",
"webpack-merge": "^5.8.0", "symbol-observable": "^4.0.0",
"yarn": "^1.22.10" "terser-webpack-plugin": "^5.1.4",
}, "ts-invariant": "^0.9.0",
"stylelint": { "tslib": "^2.3.0",
"rules": { "url": "^0.11.0",
"block-no-empty": null, "url-loader": "^4.1.1",
"color-no-invalid-hex": true, "webpack": "^5.48.0",
"comment-empty-line-before": [ "webpack-bundle-analyzer": "^4.4.2",
"always", "webpack-cli": "^4.7.2",
{ "webpack-dev-server": "^4.0.0-rc.0",
"ignore": [ "webpack-manifest-plugin": "^4.0.2",
"stylelint-commands", "webpack-merge": "^5.8.0",
"after-comment" "yarn": "^1.22.11",
] "zen-observable": "^0.8.15",
} "zen-observable-ts": "^1.1.0"
], },
"declaration-colon-space-after": "always", "stylelint": {
"indentation": [ "rules": {
4, "block-no-empty": null,
{ "color-no-invalid-hex": true,
"except": [ "comment-empty-line-before": [
"value" "always",
] {
} "ignore": [
], "stylelint-commands",
"max-empty-lines": 2, "after-comment"
"rule-empty-line-before": [ ]
"always", }
{ ],
"except": [ "declaration-colon-space-after": "always",
"first-nested" "indentation": [
], 4,
"ignore": [ {
"after-comment" "except": [
] "value"
} ]
], }
"unit-whitelist": [ ],
"em", "max-empty-lines": 2,
"rem", "rule-empty-line-before": [
"%", "always",
"s", {
"px" "except": [
] "first-nested"
} ],
} "ignore": [
"after-comment"
]
}
],
"unit-whitelist": [
"em",
"rem",
"%",
"s",
"px"
]
}
}
} }

157
src/html/meta-lightbox.html
View File

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

65
src/index.html
View File

@ -1,43 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>
</head>
<body>
<div class="wrapper">
<h1>Meta-lightbox Demo</h1>
NODE_ENV: <%= NODE_ENV %> <%=
require('html-loader!./html/meta-lightbox.html') %>
<div id="App"></div>
</div>
<!-- React is required --> <head>
<%= REACT_SCRIPTS %> <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;
}
<!-- That's optional dependencies --> </style>
</head>
<!-- jQuery --> <body>
<!-- script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script --> <div class="wrapper">
<h1>Meta-lightbox Demo</h1>
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> </html>

437
src/js/_window.jsx → src/js/_window.js
View File

@ -3,78 +3,11 @@
*/ */
import Events from './_events'; 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 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'); const axios = require('axios');
class MetaWindow extends Component { class MetaWindow {
state = { state = {
content: '', content: '',
type: [], type: [],
@ -84,11 +17,57 @@ class MetaWindow extends Component {
embed: false, embed: false,
collections: [], collections: [],
current: null, current: null,
target: null,
}; };
constructor(props) { init(target) {
super(props); 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; const ui = this;
ui.name = ui.constructor.name; ui.name = ui.constructor.name;
console.log(`${ui.name}: init`); console.log(`${ui.name}: init`);
@ -97,12 +76,24 @@ class MetaWindow extends Component {
W.dispatchEvent(new Event(`{ui.name}.init`)); W.dispatchEvent(new Event(`{ui.name}.init`));
} }
_currIndex = () => { show = () => {
const ui = this; const ui = this;
const el = ui.state.current; console.log(`${ui.name}: show`);
const gallery = el.getAttribute('data-gallery');
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 = () => { 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) => { load = (link) => {
const ui = this; const ui = this;
const axios = ui.axios; const axios = ui.axios;
ui.reset(); ui.reset();
ui.setState({ ui.setState({
loading: true loading: true,
}); });
ui.show(); ui.show();
@ -200,6 +164,7 @@ class MetaWindow extends Component {
console.log( console.log(
`${ui.name}: response content-type: ${resp.headers['content-type']}`, `${ui.name}: response content-type: ${resp.headers['content-type']}`,
); );
let json = false;
switch (resp.headers['content-type']) { switch (resp.headers['content-type']) {
case 'image/jpeg': case 'image/jpeg':
@ -212,10 +177,9 @@ class MetaWindow extends Component {
// irregular types: // irregular types:
case 'image/jpg': case 'image/jpg':
case 'image/svg': case 'image/svg':
//json = JSON.parse(ui._abToString(resp.data));
ui.setContent( ui.setContent(
`<img src="data:${ `<img src="data:${resp.headers['content-type']};base64,${ui._imageEncode(resp.data)}" />`,
resp.headers['content-type']
};base64,${ui._imageEncode(resp.data)}" />`,
'image', 'image',
); );
break; break;
@ -223,7 +187,6 @@ class MetaWindow extends Component {
case 'application/ld+json': case 'application/ld+json':
// irregular types: // irregular types:
case 'application/json; charset=UTF-8': case 'application/json; charset=UTF-8':
const json = JSON.parse(ui._abToString(resp.data));
ui.setContent(`${json['Content']}`, 'text html json'); ui.setContent(`${json['Content']}`, 'text html json');
break; break;
@ -272,28 +235,61 @@ class MetaWindow extends Component {
} }
ui.setState({ ui.setState({
error: msg error: msg,
}); });
W.dispatchEvent(new Event(`{ui.name}.error`)); W.dispatchEvent(new Event(`{ui.name}.error`));
}) })
.then(() => { .then(() => {
ui.setState({ 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) => { _abToString = (arrayBuffer) => {
return String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)); return String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));
}; };
_imageEncode = (arrayBuffer) => { _imageEncode = (arrayBuffer) => {
let u8 = new Uint8Array(arrayBuffer); const u8 = new Uint8Array(arrayBuffer);
let b64encoded = btoa( const b64encoded = btoa(
[].reduce.call( [].reduce.call(
new Uint8Array(arrayBuffer), new Uint8Array(arrayBuffer),
function(p, c) { (p, c) => {
return p + String.fromCharCode(c); return p + String.fromCharCode(c);
}, },
'', '',
@ -314,166 +310,117 @@ class MetaWindow extends Component {
ui.setState({ ui.setState({
content: html, 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 = () => { getHtml = () => {
const ui = this; const ui = this;
return { return ui.state.content;
__html: ui.state.content
};
}; };
setState(newState) {
onSwipeMove(position, event) { const ui = this;
const ui = this.ui; ui.state = Object.assign({}, ui.state, newState);
const x = position.x; ui.render();
if (ui.locked || Math.abs(x) < 50) {
return;
}
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() { render() {
const ui = this; const ui = this;
const name = ui.name; const name = ui.name;
let navs = null; const navs = null;
const el = ui.state.current; const el = ui.state.current;
KeyboardJS.setContext(name);
KeyboardJS.withContext(name, () => { ui.state.target.innerHTML = '';
KeyboardJS.unbind('left', ui.prev); const meta = document.createElement('div');
KeyboardJS.unbind('right', ui.next); 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) { if (el) {
const gallery = el.getAttribute('data-gallery'); const gallery = el.getAttribute('data-gallery');
if (gallery && ui.state.collections[gallery].length > 1) { if (gallery && ui.state.collections[gallery].length > 1) {
navs = ( const navs = document.createElement('nav');
<nav className="meta-navs"> navs.classList.add('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>
);
KeyboardJS.withContext(name, () => { const prevBtn = document.createElement('button');
KeyboardJS.bind('left', ui.prev); prevBtn.classList.add('meta-nav', 'meta-nav-arrow', 'meta-nav-arrow__prev', 'a');
KeyboardJS.bind('right', ui.next); 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 ? ( let content = '';
<section className="meta-wrap typography"> if (ui.state.embed) {
<Embed content = '<section class="meta-wrap typography">' +
url={ui.state.embed} '<Embed url={ui.state.embed} providers={[...defaultProviders, InstagramProvider]}' +
providers={[...defaultProviders, InstagramProvider]} ' LoadingFallbackElement=<div className="meta-spinner_embed"> ... Loading ... </div>' +
LoadingFallbackElement=<div className="meta-spinner_embed"> '</section>';
... Loading ... } else {
</div> const content = document.createElement('section');
/> content.classList.add('meta-wrap', 'typography');
</section> content.innerHTML = ui.getHtml();
) : ( metaContent.append(content);
<section }
className="meta-wrap typography"
dangerouslySetInnerHTML={ui.getHtml()}
></section>
);
const className = `meta-${name} meta-${name}__${ui.state.type.join( if (ui.state.error) {
` meta-${name}__`, 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${ return ui;
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>
);
} }
} }

79
src/js/app.js
View File

@ -5,69 +5,28 @@
*/ */
import Events from './_events'; import Events from './_events';
import MetaWindow from './_window';
import React from 'react'; const ui = new MetaWindow();
import ReactDOM from 'react-dom'; const container = document.getElementById('MetaLightboxApp');
import MetaWindow from './_window.jsx'; if (!container) {
console.log(`MetaWindow: missing container`);
}
const AppUI = ((W) => { const init = () => {
const MetaLightbox = ReactDOM.render( ui.init(container);
<MetaWindow />, };
document.getElementById('MetaLightboxApp'),
);
const initMetaWindowLinks = () => { window.addEventListener(`${Events.LOADED}`, init);
const ui = MetaLightbox; window.addEventListener(`${Events.AJAX}`, init);
console.log(`MetaWindow: [links] init`); window.addEventListener(`MetaWindow.initLinks`, init);
document.querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]').forEach((el) => { function importAll(r) {
// collections return r.keys().map(r);
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 const images = importAll(
el.addEventListener('click', (e) => { require.context('../img/', false, /\.(png|jpe?g|svg)$/),
e.preventDefault(); );
console.log(`MetaWindow: [link] click`);
const el = e.currentTarget; export default ui;
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();

103
webpack.config.common.js
View File

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

688
webpack.config.js
View File

@ -1,393 +1,397 @@
/* /*
* Production assets generation * 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 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 path = require('path');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const TerserPlugin = require('terser-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 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 HtmlWebpackPlugin = require('html-webpack-plugin');
const UIInfo = require('./package.json'); const UIInfo = require('./package.json');
const UIVERSION = JSON.stringify(UIInfo.version); const UIVERSION = JSON.stringify(UIInfo.version);
const UIMetaInfo = require('./package.json');
const NODE_ENV = conf.NODE_ENV || process.env.NODE_ENV; const NODE_ENV = conf.NODE_ENV || process.env.NODE_ENV;
const COMPRESS = NODE_ENV === 'production' ? true : false; 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('NODE_ENV: ' + NODE_ENV);
console.log('COMPRESS: ' + COMPRESS); console.log('COMPRESS: ' + COMPRESS);
console.log('WebP images: ' + conf['webp']); console.log('WebP images: ' + conf['webp']);
console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
let plugins = [ let plugins = [
new webpack.ProvidePlugin({ new webpack.ProvidePlugin({
$: 'jquery', react: 'React',
jQuery: 'jquery', 'react-dom': 'ReactDOM',
react: 'React', /*$: 'jquery',
'react-dom': 'ReactDOM', jQuery: 'jquery',
Popper: ['popper.js', 'default'], Popper: ['popper.js', 'default'],
Util: 'exports-loader?Util!bootstrap/js/dist/util', Util: 'exports-loader?Util!bootstrap/js/dist/util',
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert', Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
Button: 'exports-loader?Button!bootstrap/js/dist/button', Button: 'exports-loader?Button!bootstrap/js/dist/button',
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel', Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse', Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown', Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal', Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip', Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover', Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy', 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({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
NODE_ENV: JSON.stringify(NODE_ENV), NODE_ENV: JSON.stringify(NODE_ENV),
}, },
UINAME: JSON.stringify(UIInfo.name), UINAME: JSON.stringify(UIInfo.name),
UIVERSION: UIVERSION, UIVERSION: UIVERSION,
UIAUTHOR: JSON.stringify(UIInfo.author), UIAUTHOR: JSON.stringify(UIInfo.author),
}), UIMetaNAME: JSON.stringify(UIMetaInfo.name),
new webpack.LoaderOptionsPlugin({ UIMetaVersion: JSON.stringify(UIMetaInfo.version),
minimize: COMPRESS, GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
debug: !COMPRESS, SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
}), BASE_HREF: JSON.stringify(''),
new MiniCssExtractPlugin({ }),
filename: 'css/[name].css', new webpack.LoaderOptionsPlugin({
//allChunks: true, minimize: COMPRESS,
}), debug: !COMPRESS,
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
//allChunks: true,
}),
]; ];
if (COMPRESS) { if (COMPRESS) {
plugins.push( plugins.push(require('autoprefixer'));
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({ new ImageSpritePlugin({
exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/, exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/,
commentOrigin: false, commentOrigin: false,
compress: COMPRESS, compress: COMPRESS,
extensions: ['png'], extensions: ['png'],
indent: '', indent: '',
log: true, log: true,
//outputPath: path.join(__dirname, conf.APPDIR, conf.DIST), //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
outputFilename: 'img/sprite-[hash].png', outputFilename: 'img/sprite-[hash].png',
padding: 0, padding: 0,
}), }),
); );*/
} }
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html'); const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
if (filesystem.existsSync(indexPath)) { if (fs.existsSync(indexPath)) {
plugins.push( plugins.push(
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
publicPath: '', publicPath: '',
template: path.join(conf.APPDIR, conf.SRC, 'index.html'), template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
templateParameters: { templateParameters: {
NODE_ENV: NODE_ENV, NODE_ENV: NODE_ENV,
REACT_SCRIPTS: GRAPHQL_URL: conf['GRAPHQL_URL'],
NODE_ENV === 'production' STATIC_URL: conf['STATIC_URL'],
? '<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>' REACT_SCRIPTS: NODE_ENV === 'production' ?
: '<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>', '<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'); const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
if (filesystem.existsSync(faviconPath)) { if (fs.existsSync(faviconPath)) {
plugins.push( plugins.push(
new FaviconsWebpackPlugin({ new FaviconsWebpackPlugin({
title: 'Webpack App', title: 'Webpack App',
logo: faviconPath, logo: faviconPath,
prefix: '/icons/', prefix: '/icons/',
emitStats: false, emitStats: false,
persistentCache: true, persistentCache: true,
inject: false, inject: false,
statsFilename: path.join( statsFilename: path.join(
conf.APPDIR, conf.APPDIR,
conf.DIST, conf.DIST,
'icons', 'icons',
'iconstats.json', 'iconstats.json',
), ),
icons: { icons: {
android: true, android: true,
appleIcon: true, appleIcon: true,
appleStartup: true, appleStartup: true,
coast: true, coast: true,
favicons: true, favicons: true,
firefox: true, firefox: true,
opengraph: true, opengraph: true,
twitter: true, twitter: true,
yandex: true, yandex: true,
windows: true, windows: true,
}, },
}), }),
); );
} }
// add themes favicons // add themes favicons
commonVariables.themes.forEach((theme) => { common.themes.forEach((theme) => {
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png'); const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
if (filesystem.existsSync(faviconPath)) { if (fs.existsSync(faviconPath)) {
plugins.push( plugins.push(
new FaviconsWebpackPlugin({ new FaviconsWebpackPlugin({
title: 'Webpack App', title: 'Webpack App',
logo: faviconPath, logo: faviconPath,
prefix: '/' + theme + '-icons/', prefix: '/' + theme + '-icons/',
emitStats: false, emitStats: false,
persistentCache: true, persistentCache: true,
inject: false, inject: false,
statsFilename: path.join( statsFilename: path.join(
conf.APPDIR, conf.APPDIR,
conf.DIST, conf.DIST,
theme + '-icons', theme + '-icons',
'iconstats.json', 'iconstats.json',
), ),
icons: { icons: {
android: true, android: true,
appleIcon: true, appleIcon: true,
appleStartup: true, appleStartup: true,
coast: true, coast: true,
favicons: true, favicons: true,
firefox: true, firefox: true,
opengraph: true, opengraph: true,
twitter: true, twitter: true,
yandex: true, yandex: true,
windows: true, windows: true,
}, },
}), }),
); );
} }
}); });
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin; .BundleAnalyzerPlugin;
plugins.push( plugins.push(
new BundleAnalyzerPlugin({ new BundleAnalyzerPlugin({
analyzerMode: 'static', analyzerMode: 'static',
openAnalyzer: false, openAnalyzer: false,
}), }),
); );
const cfg = merge(common, { const cfg = merge(common.webpack, {
mode: NODE_ENV, mode: NODE_ENV,
cache: { cache: {
type: 'filesystem', type: 'filesystem',
}, },
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'), recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
optimization: { optimization: {
//removeAvailableModules: false, //removeAvailableModules: false,
//realContentHash: false, //realContentHash: false,
splitChunks: { splitChunks: {
name: 'vendor', name: 'vendor',
minChunks: 2, minChunks: 2,
}, },
concatenateModules: true, //ModuleConcatenationPlugin concatenateModules: true, //ModuleConcatenationPlugin
minimizer: [ minimizer: [
new TerserPlugin({ new TerserPlugin({
terserOptions: { terserOptions: {
module: false, module: false,
parse: { parse: {
// we want terser to parse ecma 8 code. However, we don't want it // we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code // to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output' // into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe // sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234 // https://github.com/facebook/create-react-app/pull/4234
ecma: 8, ecma: 8,
}, },
compress: { compress: {
ecma: 5, ecma: 5,
warnings: false, warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code: // Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376 // https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation: // Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011 // https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false, comparisons: false,
}, },
keep_fnames: true, keep_fnames: true,
keep_classnames: true, keep_classnames: true,
mangle: { mangle: {
safari10: true, safari10: true,
keep_fnames: true, keep_fnames: true,
keep_classnames: true, keep_classnames: true,
reserved: ['$', 'jQuery', 'jquery'], reserved: ['$', 'jQuery', 'jquery'],
}, },
output: { output: {
ecma: 5, ecma: 5,
comments: false, comments: false,
// Turned on because emoji and regex is not minified properly using default // Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488 // https://github.com/facebook/create-react-app/issues/2488
ascii_only: true, ascii_only: true,
}, },
}, },
// Use multi-process parallel running to improve the build speed // Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1 // Default number of concurrent runs: os.cpus().length - 1
parallel: true, 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,
]
}),
],
},
output: { output: {
publicPath: path.join(conf.APPDIR, conf.DIST), publicPath: path.join(conf.APPDIR, conf.DIST),
path: path.join(__dirname, conf.APPDIR, conf.DIST), path: path.join(__dirname, conf.APPDIR, conf.DIST),
filename: path.join('js', '[name].js'), filename: path.join('js', '[name].js'),
}, },
module: { module: {
rules: [ rules: [{
{ test: /\.jsx?$/,
test: /\.jsx?$/, //exclude: /node_modules/,
//exclude: /node_modules/, use: {
use: { loader: 'babel-loader', //'@sucrase/webpack-loader',
loader: 'babel-loader', options: {
options: { //transforms: ['jsx']
presets: [ presets: [
'@babel/preset-env', '@babel/preset-env',
'@babel/react', '@babel/react',
{ {
plugins: [ plugins: [
'@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-class-properties',
], ],
}, },
], //Preset used for env setup ], //Preset used for env setup
plugins: [['@babel/transform-react-jsx']], plugins: [
cacheDirectory: true, ['@babel/transform-react-jsx']
cacheCompression: true, ],
}, cacheDirectory: true,
}, cacheCompression: true,
}, },
{ },
test: /\.s?css$/, },
use: [ {
{ test: /\.s?css$/,
loader: MiniCssExtractPlugin.loader, use: [{
}, loader: MiniCssExtractPlugin.loader,
{ },
loader: 'css-loader', {
options: { loader: 'css-loader',
sourceMap: !COMPRESS, options: {
}, sourceMap: !COMPRESS,
}, },
{ },
loader: 'resolve-url-loader', {
}, loader: 'resolve-url-loader',
{ },
loader: 'sass-loader', {
options: { loader: 'sass-loader',
sourceMap: !COMPRESS, options: {
}, sourceMap: !COMPRESS,
}, },
], }, ],
}, },
{ {
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [ use: [{
{ loader: 'file-loader',
loader: 'file-loader', options: {
options: { name: '[name].[ext]',
name: '[name].[ext]', outputPath: 'fonts/',
outputPath: 'fonts/', publicPath: '../fonts/',
publicPath: '../fonts/', },
}, }, ],
}, },
], {
}, test: /\.(ttf|otf|eot|woff(2)?)$/,
{ use: [{
test: /\.(ttf|otf|eot|svg|woff(2)?)$/, loader: 'file-loader',
use: [ options: {
{ name: '[name].[ext]',
loader: 'file-loader', outputPath: 'fonts/',
options: { publicPath: '../fonts/',
name: '[name].[ext]', },
outputPath: 'fonts/', }, ],
publicPath: '../fonts/', },
}, {
}, test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
], use: [{
}, loader: 'img-optimize-loader',
{ options: {
test: /\.(png|webp|jpg|jpeg|gif|svg)$/, name: '[name].[ext]',
use: [ outputPath: 'img/',
{ publicPath: '../img/',
loader: 'img-optimize-loader', compress: {
options: { // This will take more time and get smaller images.
name: '[name].[ext]', mode: 'low', // 'lossless', 'high', 'low'
outputPath: 'img/', disableOnDevelopment: true,
publicPath: '../img/', webp: conf['webp'],
compress: { // loseless compression for png
// This will take more time and get smaller images. optipng: {
mode: 'low', // 'lossless', 'high', 'low' optimizationLevel: 4,
disableOnDevelopment: true, },
webp: conf['webp'], // lossy compression for png. This will generate smaller file than optipng.
}, pngquant: {
inline: { quality: [0.2, 0.8],
limit: 1, },
}, // Compression for svg.
}, svgo: true,
}, // Compression for gif.
], gifsicle: {
}, optimizationLevel: 3,
], },
}, // Compression for jpg.
mozjpeg: {
progressive: true,
quality: 60,
},
},
inline: {
limit: 1,
},
},
}, ],
}, ],
},
plugins: plugins, plugins: plugins,
}); });
console.log(cfg); console.log(cfg);

286
webpack.config.serve.js
View File

@ -1,23 +1,27 @@
/* /*
* Development assets generation * Development assets generation
*/ */
const common = require('./webpack.config.common.js');
const conf = common.configuration;
const path = require('path'); const path = require('path');
const fs = require('fs');
//const autoprefixer = require('autoprefixer'); //const autoprefixer = require('autoprefixer');
const webpack = require('webpack'); const webpack = require('webpack');
const { merge } = require('webpack-merge'); const {
merge
} = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-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 IP = process.env.IP || conf.HOSTNAME;
const PORT = process.env.PORT || conf.PORT; const PORT = process.env.PORT || conf.PORT;
const UIInfo = require('./package.json'); 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 NODE_ENV = 'development'; //conf.NODE_ENV || process.env.NODE_ENV;
const COMPRESS = NODE_ENV === 'production' ? true : false; const COMPRESS = NODE_ENV === 'production' ? true : false;
@ -25,152 +29,152 @@ const COMPRESS = NODE_ENV === 'production' ? true : false;
console.log('NODE_ENV: ' + NODE_ENV); console.log('NODE_ENV: ' + NODE_ENV);
console.log('COMPRESS: ' + COMPRESS); console.log('COMPRESS: ' + COMPRESS);
console.log('WebP images: ' + conf['webp']); 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 = [
mode: 'development',
entry: {
/*hot: [
'react-hot-loader/patch',
'webpack-dev-server/?https://' + conf.HOSTNAME + ':' + conf.PORT,
'webpack/hot/only-dev-server',
],*/
},
output: {
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 + '/',
},
module: {
rules: [
{
test: /\.jsx?$/,
//exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/react',
{
plugins: ['@babel/plugin-proposal-class-properties'],
},
], //Preset used for env setup
plugins: [['@babel/transform-react-jsx']],
cacheDirectory: true,
cacheCompression: true,
},
},
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: !COMPRESS,
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
},
},
],
},
{
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [
{
loader: 'url-loader',
},
],
},
{
test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/,
use: [
{
loader: 'file-loader',
options: {
name(file) {
return 'public/[path][name].[ext]';
},
},
},
],
},
],
},
plugins: [
new webpack.ProvidePlugin({ new webpack.ProvidePlugin({
$: 'jquery', react: 'React',
jQuery: 'jquery', 'react-dom': 'ReactDOM',
'window.jQuery': 'jquery', /*$: 'jquery',
Popper: ['popper.js', 'default'], jQuery: 'jquery',*/
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({ new webpack.DefinePlugin({
UINAME: JSON.stringify(UIInfo.name), UINAME: JSON.stringify(UIInfo.name),
UIVERSION: JSON.stringify(UIInfo.version), UIVERSION: UIVERSION,
UIAUTHOR: JSON.stringify(UIInfo.author), 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 webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(), 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>',
},
}),
],
devServer: { const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
host: IP, if (fs.existsSync(indexPath)) {
port: PORT, plugins.push(
historyApiFallback: false, new HtmlWebpackPlugin({
//hot: true, publicPath: '',
/*clientLogLevel: 'info', template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
disableHostCheck: true, templateParameters: {
contentBase: [ NODE_ENV: NODE_ENV,
path.resolve(__dirname, 'public'), GRAPHQL_URL: conf['GRAPHQL_URL'],
path.resolve(__dirname, 'public', 'resources'), STATIC_URL: conf['STATIC_URL'],
path.resolve(__dirname, 'public', 'resources', conf.APPDIR, conf.DIST), REACT_SCRIPTS: NODE_ENV === 'production' ?
'node_modules', '<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>',
],*/ },
//watchContentBase: true, }),
overlay: { );
warnings: true, }
errors: true,
const config = merge(common.webpack, {
mode: 'development',
entry: {
/*hot: [
'react-hot-loader/patch',
'webpack-dev-server/?https://' + conf.HOSTNAME + ':' + conf.PORT,
'webpack/hot/only-dev-server',
],*/
}, },
headers: {
'Access-Control-Allow-Origin': '*', output: {
path: path.join(__dirname),
filename: '[name].js',
// necessary for HMR to know where to load the hot update chunks
publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${
conf.PORT
}/`,
},
module: {
rules: [{
test: /\.jsx?$/,
//exclude: /node_modules/,
use: {
loader: '@sucrase/webpack-loader', //'babel-loader',
options: {
transforms: ['jsx']
/*presets: [
'@babel/preset-env',
'@babel/react',
{
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-syntax-top-level-await',
],
},
], //Preset used for env setup
plugins: [
['@babel/transform-react-jsx'],
['@babel/plugin-syntax-top-level-await'],
],
cacheDirectory: true,
cacheCompression: true,*/
},
},
},
{
test: /\.s?css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: !COMPRESS,
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
},
}, ],
},
{
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [{
loader: 'url-loader',
}, ],
},
{
test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/,
use: [{
loader: 'file-loader',
options: {
name(file) {
return 'public/[path][name].[ext]';
},
},
}, ],
}, ],
},
plugins: plugins,
devServer: {
host: IP,
port: PORT,
historyApiFallback: false,
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': '/',
},
}, },
},
}); });
module.exports = config; module.exports = config;

35
webpack.configuration.js
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,
};

11
webpack.yml
View File

@ -2,14 +2,19 @@
# with all configuration variables presented # with all configuration variables presented
# Cuz WebPack compiling script use it to set configuration # Cuz WebPack compiling script use it to set configuration
Site\Templates\WebpackTemplateProvider: App\Templates\WebpackTemplateProvider:
APPDIR: ./ APPDIR: ./
THEMESDIR: themes THEMESDIR: themes
HOSTNAME: 127.0.0.1 HOSTNAME: 127.0.0.1
PORT: 3000 PORT: 3001
SRC: src SRC: src
DIST: dist DIST: dist
TYPESJS: src/js/types TYPESJS: src/js/types
TYPESSCSS: src/scss/types TYPESSCSS: src/scss/types
NODE_ENV: production #production,development
webp: false 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'