webcimes-modal 1.0.1 → 1.1.1

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "webcimes-modal",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Simply create and animate modals. It works with vanilla javascript + html + css.",
-  "main": "webcimes-modal.js",
+  "main": "./dist/js/udm/webcimes-modal.udm.min.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack --config webpack.config.ts --node-env=production",
+    "build:dev": "webpack --config webpack.config.ts --node-env=development"
   },
   "repository": {
     "type": "git",
@@ -24,5 +25,16 @@
   "bugs": {
     "url": "https://github.com/WebCimes/webcimes-modal/issues"
   },
-  "homepage": "https://github.com/WebCimes/webcimes-modal#readme"
+  "homepage": "https://github.com/WebCimes/webcimes-modal#readme",
+  "devDependencies": {
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "remove-files-webpack-plugin": "^1.5.0",
+    "ts-loader": "^9.4.4",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
+  }
 }

package/src/css/webcimes-modal.css

@@ -0,0 +1,416 @@
+/**
+ * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)
+ * MIT License - https://choosealicense.com/licenses/mit/
+ * Date: 2023-03-25
+ */
+
+/*
+-----------------------
+    WEBCIMES MODAL
+-----------------------
+*/
+
+.webcimesModals,
+.webcimesModals *,
+.webcimesModals *::before,
+.webcimesModals *::after
+{ 
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.webcimesModals
+{
+	--webcimes-modals-background: rgba(0,0,0,0.8);
+	--webcimes-modals-z-index: 5;
+
+	position: fixed;
+	background: var(--webcimes-modals-background);
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: var(--webcimes-modals-z-index);
+}
+.webcimesModals > .modal
+{
+	--modal-color: inherit;
+	--modal-background: #fff;
+	--modal-border-color: #ddd;
+	--modal-box-shadow: 1px 1px 3px 0px #444;
+	--modal-title-font-size: 24px;
+	--modal-button-cancel-background: rgba(102,102,102,1);
+	--modal-button-cancel-background-hover: rgba(102,102,102,0.7);
+	--modal-button-cancel-color: #fff;
+	--modal-button-cancel-color-hover: #fff;
+	--modal-button-confirm-background: rgba(0,0,0,1);
+	--modal-button-confirm-background-hover: rgba(0,0,0,0.7);
+	--modal-button-confirm-color: #fff;
+	--modal-button-confirm-color-hover: #fff;
+	
+	position: absolute;
+	border-radius: 5px;
+	overflow:auto;
+	color: var(--modal-color);
+	background: var(--modal-background);
+	-webkit-box-shadow: var(--modal-box-shadow);
+	-moz-box-shadow: var(--modal-box-shadow);
+	-o-box-shadow: var(--modal-box-shadow);
+	box-shadow: var(--modal-box-shadow);
+}
+.webcimesModals > .modal button
+{
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	border: none;
+	background: none;
+}
+.webcimesModals > .modal > .modalHeader
+{
+	position: relative;
+	background: var(--modal-background);
+	padding: 20px 40px;
+	border-bottom: 1px solid var(--modal-border-color);
+	display: flex;
+	align-items: center;
+}
+.webcimesModals > .modal > .modalHeader.sticky
+{
+	position: sticky;
+	top: 0;
+}
+.webcimesModals > .modal > .modalHeader.movable
+{
+	cursor: move;
+	touch-action: none;
+}
+.webcimesModals > .modal > .modalHeader > .title
+{
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: var(--modal-title-font-size);
+}
+.webcimesModals > .modal > .modalHeader > .close
+{
+	position: absolute;
+	height: 20px;
+	width: 12px;
+	right: 15px;
+	top: 50%;
+	margin-top: -10px;
+	background-image: url("../images/times.svg");
+    cursor: pointer;
+	opacity: 1;
+    -webkit-transition: opacity 0.6s ease 0s;
+    -moz-transition: opacity 0.6s ease 0s;
+    -o-transition: opacity 0.6s ease 0s;
+    transition: opacity 0.6s ease 0s;
+}
+.webcimesModals > .modal > .modalHeader > .close:hover
+{
+	opacity: 0.5;
+}
+.webcimesModals > .modal > .modalBody
+{
+	padding: 20px 40px;
+}
+.webcimesModals > .modal > .modalBody.movable
+{
+	cursor: move;
+}
+.webcimesModals > .modal > .modalFooter
+{
+	background: var(--modal-background);
+	padding: 20px 40px;
+	border-top: 1px solid var(--modal-border-color);
+	display: flex;
+	justify-content: flex-end;
+	flex-wrap: wrap;
+}
+.webcimesModals > .modal > .modalFooter.sticky
+{
+	position: sticky;
+	bottom: 0;
+}
+.webcimesModals > .modal > .modalFooter.movable
+{
+	cursor: move;
+	touch-action: none;
+}
+.webcimesModals > .modal > .modalFooter button
+{
+	max-width: 100%;
+	flex: 0 0 auto;
+	border-radius: 5px;
+	padding: 10px 30px;
+	margin: 5px;
+	cursor: pointer;
+	text-overflow: ellipsis;
+	overflow: hidden;
+    -webkit-transition: color 0.6s ease 0s, background 0.6s ease 0s;
+    -moz-transition: color 0.6s ease 0s, background 0.6s ease 0s;
+    -o-transition: color 0.6s ease 0s, background 0.6s ease 0s;
+    transition: color 0.6s ease 0s, background 0.6s ease 0s;
+}
+.webcimesModals > .modal > .modalFooter button.cancel
+{
+	background: var(--modal-button-cancel-background);
+	color: var(--modal-button-cancel-color);
+}
+.webcimesModals > .modal > .modalFooter button.cancel:hover
+{
+	background: var(--modal-button-cancel-background-hover);
+	color: var(--modal-button-cancel-color-hover);
+}
+.webcimesModals > .modal > .modalFooter button.confirm
+{
+	background: var(--modal-button-confirm-background);
+	color: var(--modal-button-confirm-color);
+}
+.webcimesModals > .modal > .modalFooter button.confirm:hover
+{
+	background: var(--modal-button-confirm-background-hover);
+	color: var(--modal-button-confirm-color-hover);
+}
+
+/* ANIMATIONS */
+
+@-webkit-keyframes animFadeIn
+{
+	0%
+	{
+		opacity: 0;
+	} 
+	100%
+	{
+		opacity: 1;
+	}
+}
+@keyframes animFadeIn
+{
+	0%
+	{
+		opacity:0;
+	} 
+	100%
+	{
+		opacity:1;
+	}
+}
+.animFadeIn
+{
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-name: animFadeIn;
+	animation-name: animFadeIn;
+}
+
+@-webkit-keyframes animFadeOut
+{
+	0%
+	{
+		opacity: 1;
+	} 
+	100%
+	{
+		opacity: 0;
+	}
+}
+@keyframes animFadeOut
+{
+	0%
+	{
+		opacity: 1;
+	} 
+	100%
+	{
+		opacity: 0;
+	}
+}
+.animFadeOut
+{
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-name: animFadeOut;
+	animation-name: animFadeOut;
+}
+
+@-webkit-keyframes animDropDown
+{
+	0%
+	{
+		-webkit-transform: translateY(-20vh);
+		-moz-transform: translateY(-20vh);
+		-ms-transform: translateY(-20vh);
+		-o-transform: translateY(-20vh);
+		transform: translateY(-20vh);
+		opacity: 0;
+	} 
+	100%
+	{
+		-webkit-transform: translateY(0);
+		-moz-transform: translateY(0);
+		-ms-transform: translateY(0);
+		-o-transform: translateY(0);
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes animDropDown
+{
+	0%
+	{
+		-webkit-transform: translateY(-20vh);
+		-moz-transform: translateY(-20vh);
+		-ms-transform: translateY(-20vh);
+		-o-transform: translateY(-20vh);
+		transform: translateY(-20vh);
+		opacity: 0;
+	} 
+	100%
+	{
+		-webkit-transform: translateY(0);
+		-moz-transform: translateY(0);
+		-ms-transform: translateY(0);
+		-o-transform: translateY(0);
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+.animDropDown
+{
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-name: animDropDown;
+	animation-name: animDropDown;
+}
+
+@-webkit-keyframes animDropUp
+{
+	0%
+	{
+		-webkit-transform: translateY(0);
+		-moz-transform: translateY(0);
+		-ms-transform: translateY(0);
+		-o-transform: translateY(0);
+		transform: translateY(0);
+		opacity: 1;
+	} 
+	100%
+	{
+		-webkit-transform: translateY(-20vh);
+		-moz-transform: translateY(-20vh);
+		-ms-transform: translateY(-20vh);
+		-o-transform: translateY(-20vh);
+		transform: translateY(-20vh);
+		opacity: 0;
+	}
+}
+
+@keyframes animDropUp
+{
+	0%
+	{
+		-webkit-transform: translateY(0);
+		-moz-transform: translateY(0);
+		-ms-transform: translateY(0);
+		-o-transform: translateY(0);
+		transform: translateY(0);
+		opacity: 1;
+	} 
+	100%
+	{
+		-webkit-transform: translateY(-20vh);
+		-moz-transform: translateY(-20vh);
+		-ms-transform: translateY(-20vh);
+		-o-transform: translateY(-20vh);
+		transform: translateY(-20vh);
+		opacity: 0;
+	}
+}
+.animDropUp
+{
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-name: animDropUp;
+	animation-name: animDropUp;
+}
+
+@-webkit-keyframes animGrowShrink
+{
+	0%
+	{
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+	50%
+	{
+		-webkit-transform: scale(1.2);
+		-moz-transform: scale(1.2);
+		-ms-transform: scale(1.2);
+		-o-transform: scale(1.2);
+		transform: scale(1.2);
+	}
+	100%
+	{
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+}
+
+@keyframes animGrowShrink
+{
+	0%
+	{
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+	50%
+	{
+		-webkit-transform: scale(1.1);
+		-moz-transform: scale(1.1);
+		-ms-transform: scale(1.1);
+		-o-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	100%
+	{
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+}
+.animGrowShrink
+{
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-name: animGrowShrink;
+	animation-name: animGrowShrink;
+}

package/src/images/times.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>

package/{webcimes-modal.ts → src/ts/webcimes-modal.ts}

@@ -73,8 +73,8 @@ interface Options {
  */
 export class WebcimesModal
 {
-	private webcimesModals: HTMLElement;
-	private modal: HTMLElement;
+	public webcimesModals: HTMLElement;
+	public modal: HTMLElement;
 	private options: Options;
 	private eventCancelButton: () => void = () => {
 		// Callback on cancel button
@@ -187,6 +187,11 @@ export class WebcimesModal
 			e.preventDefault();
 		}
 	};
+	private eventResize: () => void = () => {
+		this.modal.style.removeProperty("left");
+		this.modal.style.removeProperty("top");
+		
+	};
 
 	/**
 	 * Create modal
@@ -284,15 +289,9 @@ export class WebcimesModal
 			this.webcimesModals = <HTMLElement>document.querySelector(".webcimesModals");
 		}
 	
-		// Callback before show modal
-		if(typeof this.options.beforeShow === 'function')
-		{
-			this.options.beforeShow();
-		}
-	
 		// Create modal
 		this.webcimesModals.insertAdjacentHTML("beforeend", 
-			`<div class="modal `+(this.options.setClass?this.options.setClass:'')+` `+this.options.animationOnShow+`" `+(this.options.setClass?'id="'+this.options.setId+'"':'')+`>
+			`<div class="modal `+(this.options.setClass?this.options.setClass:'')+` `+this.options.animationOnShow+`" `+(this.options.setId?'id="'+this.options.setId+'"':'')+`>
 				`+(this.options.titleHtml||this.options.showCloseButton?
 					`<div class="modalHeader `+(this.options.stickyHeader?'sticky':'')+` `+(this.options.moveFromHeader?'movable':'')+`">
 						`+(this.options.titleHtml?'<div class="title">'+this.options.titleHtml+'</div>':'')+`
@@ -314,6 +313,15 @@ export class WebcimesModal
 		);
 		this.modal = <HTMLElement>this.webcimesModals.lastElementChild;
 		
+		// Callback before show modal
+		if(typeof this.options.beforeShow === 'function')
+		{
+			// Set a timeout of zero, to wait for some dom to load
+			setTimeout(() => {
+				this.options.beforeShow();
+			}, 0);
+		}
+		
 		// Set animation duration for modal
 		this.modal.style.setProperty("animation-duration", this.options.animationDuration+"ms");
 		
@@ -416,6 +424,9 @@ export class WebcimesModal
 
 			document.addEventListener("selectstart", this.eventPreventSelectText);
 		}
+
+		// When resizing window, reset modal position to center
+		window.addEventListener("resize", this.eventResize);
     }
 
 	/**
@@ -487,6 +498,8 @@ export class WebcimesModal
 						document.removeEventListener("selectstart", this.eventPreventSelectText);
 					}
 
+					window.removeEventListener("resize", this.eventResize);
+					
 					// Remove webcimesModals or modal according the number of modal
 					(document.querySelectorAll(".modal").length>1?this.modal:this.webcimesModals).remove();
 				}

package/tsconfig.json

@@ -1,13 +1,20 @@
 {
     "compilerOptions": {
-      "module": "ES6",
-      "target": "ES6",
-      "removeComments": false,
-      "sourceMap": true,
-      "noImplicitAny": true,
-      "strictNullChecks": true,
+        "module": "ESNext",
+        "target": "ESNext",
+        "removeComments": false,
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true
+    },
+    "ts-node": {
+        "compilerOptions": {
+            "module": "CommonJS"
+        }
     },
     "files": [
-      "webcimes-modal.ts",
+        "src/ts/webcimes-modal.ts",
     ]
-  }
+}

package/webpack.config.ts

@@ -0,0 +1,147 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+import path from 'path';
+import webpack from "webpack";
+import TerserPlugin from "terser-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
+import RemovePlugin from "remove-files-webpack-plugin";
+
+const isProduction = process.env.NODE_ENV == 'production';
+
+// Config UDM
+const configUDM: webpack.Configuration = {
+    mode: (isProduction ? "production" : "development"),
+    // devtool: (isProduction ? false : "source-map"),
+    devtool: "source-map",
+    entry: {
+        "webcimes-modal.udm": "./src/ts/webcimes-modal.ts",
+        "webcimes-modal.udm.min": "./src/ts/webcimes-modal.ts",
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                test: /\.min\.js$/i,
+                extractComments: false,
+            }),
+        ],
+    },
+    output: {
+        filename: "js/udm/[name].js",
+        path: path.resolve(__dirname, "dist"),
+        // publicPath: "/dist/",
+        libraryTarget: "umd",
+        clean: false, // Clean the output directory before emit.
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(ts)$/i,
+                use: "ts-loader",
+            },
+        ],
+    },
+};
+
+// Config ESM
+const configESM: webpack.Configuration = {
+    mode: (isProduction ? "production" : "development"),
+    // devtool: (isProduction ? false : "source-map"),
+    devtool: "source-map",
+    entry: {
+        "webcimes-modal.esm": "./src/ts/webcimes-modal.ts",
+        "webcimes-modal.esm.min": "./src/ts/webcimes-modal.ts",
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                test: /\.min\.js$/i,
+                extractComments: false,
+            }),
+        ],
+    },
+    experiments: {
+        outputModule: true,
+    },
+    output: {
+        filename: "js/esm/[name].js",
+        path: path.resolve(__dirname, "dist"),
+        // publicPath: "/dist/",
+        libraryTarget: "module",
+        clean: false, // Clean the output directory before emit.
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(ts)$/i,
+                use: "ts-loader",
+            },
+        ],
+    },
+};
+
+// Config CSS + Remove plugin
+const configCSS: webpack.Configuration = {
+    mode: (isProduction ? "production" : "development"),
+    // devtool: (isProduction ? false : "source-map"),
+    devtool: "source-map",
+    entry: {
+        "webcimes-modal": "./src/css/webcimes-modal.css",
+        "webcimes-modal.min": "./src/css/webcimes-modal.css",
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new CssMinimizerPlugin({
+                test: /\.min\.css$/i,
+            }),
+        ],
+    },
+    output: {
+        filename: "css/[name].js",
+        path: path.resolve(__dirname, "dist"),
+        // publicPath: "/dist/",
+        clean: false, // Clean the output directory before emit.
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                // use: ['style-loader', 'css-loader'],
+                use: [MiniCssExtractPlugin.loader, "css-loader"],
+            },
+            {
+                test: /\.(svg|png|jpg|jpeg|gif)$/i,
+                type: 'asset/resource',
+                generator: {
+                    filename: 'images/[name][ext][query]', // Correct bug asset/ressource url wrong path with css files subfolder https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1005
+                },
+            },
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin({filename: "css/[name].css"}),
+        new RemovePlugin({
+            before: {
+                include: [
+                    './dist' // Delete dist folder before running webpack build
+                ]
+            },
+            after: {
+                test: [
+                    {
+                        folder: './dist/css',
+                        method: (absoluteItemPath) => {
+                            return new RegExp(/(\.js|\.js\.map)$/, 'm').test(absoluteItemPath); // Delete extra empty js file (can't ouput directly css)
+                        },
+                    }
+                ],
+            }
+        }),
+    ],
+};
+
+// Export
+export default [configUDM, configESM, configCSS];