frontello-ui-modal - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

modal.js

 class Modal {
-	constructor(title, closable = true)
+	constructor(title, config = {})
 	{
@@ -11,8 +11,28 @@ this.container = null;
 		this.foot = null;
-		
-		this.closable = closable;
-		
+
+		this.config = Object.assign({
+			debug: false,
+			closable: true,
+			fullPage: false,
+			autoOpening: true,
+			actionCloseLabel: 'Close',
+			actionCopyUrlLabel: 'Copy URL',
+			actionOpenUrlLabel: 'Open in new tab',
+			actionDownloadLabel: 'Download',
+			keyClosing: 27, // Escape
+		}, config);
+
 		this._build();
 
+		this._keyboadControls();
+
 		this.setTitle(title);
+
+		if (this.config.autoOpening) {
+			this.open();
+		}
+		
+		if (this.config.fullPage) {
+			this.fullPage(true);
+		}
 	}
@@ -24,3 +44,2 @@
 		this.container.classList.add('frontello-ui-modal');
-		this.container.classList.add('full-page');
 		document.querySelector('body').append(this.container);
@@ -35,2 +54,4 @@
 		this._buildFoot();
+		
+		if (this.config.debug) console.log('Build');
 	}
@@ -52,5 +73,6 @@
 
-		if (this.closable) {
+		if (this.config.closable) {
 			let close = document.createElement('a');
 			close.classList.add('close');
+			close.innerHTML = this.config.actionCloseLabel;
 			this.actions.append(close);
@@ -78,5 +100,27 @@
 	
+	_keyboadControls()
+	{
+		document.addEventListener('keydown', (event) => {
+			switch (event.which) {
+				case this.config.keyClosing:
+					if (this.config.closable) {
+						this.close();
+	
+						event.preventDefault();
+	
+						if (this.config.debug) console.log('Key closing');
+					}
+				break;
+			}
+		});
+	}
+	
 	setTitle(title)
 	{
 		this.title.innerHTML = title;
+		
+		if (this.config.debug) console.log('Set title :');
+		if (this.config.debug) console.log(title);
+		
+		return this;
 	}
@@ -87,2 +131,7 @@
 		this.body.innerText = text;
+		
+		if (this.config.debug) console.log('Set body from text :');
+		if (this.config.debug) console.log(text);
+		
+		return this;
 	}
@@ -93,2 +142,7 @@
 		this.body.innerHTML = html;
+		
+		if (this.config.debug) console.log('Set body from HTML :');
+		if (this.config.debug) console.log(html);
+		
+		return this;
 	}
@@ -101,2 +155,7 @@
 		this.body.append(iframe);
+		
+		if (this.config.debug) console.log('Set body from iframe :');
+		if (this.config.debug) console.log(url);
+		
+		return this;
 	}
@@ -107,2 +166,4 @@
 		this.container.classList.add('opened');
+		
+		return this;
 	}
@@ -113,4 +174,23 @@
 		this.container.classList.remove('opened');
+		
+		setTimeout(() => {
+			this.container.remove();
+		}, 150);
+		
+		if (this.config.debug) console.log('Close');
+		
+		return this;
 	}
 	
+	fullPage(fullPage)
+	{
+		if (fullPage) {
+			this.container.classList.add('full-page');
+		} else {
+			this.container.classList.remove('full-page');
+		}
+		
+		return this;
+	}
+	
 	addActionOpenUrl(url)
@@ -120,2 +200,3 @@ {
 		openUrl.classList.add('open-url');
+		openUrl.innerHTML = this.config.actionOpenUrlLabel;
 		this.actions.append(openUrl);
@@ -128,3 +209,7 @@
 			link.click();
+			
+			if (this.config.debug) console.log('Open URL');
 		});
+		
+		return this;
 	}
@@ -136,2 +221,3 @@
 		copyUrl.classList.add('copy-url');
+		copyUrl.innerHTML = this.config.actionCopyUrlLabel;
 		this.actions.append(copyUrl);
@@ -148,11 +234,9 @@
 			textarea.select();
+			document.execCommand('copy');
+			document.body.removeChild(textarea);
 			
-			try {
-				this.success = document.execCommand('copy');
-			} catch (err) {
-				console.error('Fallback: Oops, unable to copy', err);
-			}
-			
-			document.body.removeChild(textarea);
+			if (this.config.debug) console.log('Copy URL');
 		});
+		
+		return this;
 	}
@@ -164,2 +248,3 @@
 		download.classList.add('download');
+		download.innerHTML = this.config.actionDownloadLabel;
 		this.actions.append(download);
@@ -183,57 +268,10 @@
 					URL.revokeObjectURL(href);
+					
+					if (this.config.debug) console.log('Download');
 				});
 			});
 		});
-	}
-	
-	static makeFromText(title, text, closable = true, open = true)
-	{
-		let modal = new Modal(title, true);
-		modal.setBodyText(text);
 		
-		if (open) {
-			modal.open();
-		}
-	
-		return modal;
+		return this;
 	}
-	
-	static makeFromHtml(title, text, closable = true, open = true)
-	{
-		let modal = new Modal(title, true);
-		modal.setBodyHtml(text);
-		
-		if (open) {
-			modal.open();
-		}
-	
-		return modal;
-	}
-	
-	static makeUrlPage(title, url)
-	{
-		let modal = new Modal(title, true, open = true);
-		modal.setBodyIframe(url);
-		modal.addActionOpenUrl(url);
-		modal.addActionCopyUrl(url);
-
-		if (open) {
-			modal.open();
-		}
-
-		return modal;
-	}
-	
-	static makeUrlDocument(title, url, fileName = null, open = true)
-	{
-		let modal = new Modal(title, true);
-		modal.setBodyIframe(url);
-		modal.addActionDownload(url, fileName);
-
-		if (open) {
-			modal.open();
-		}
-
-		return modal;
-	}
 }

package.json

 {
 	"name": "frontello-ui-modal",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "UI modal",
@@ -5,0 +5,0 @@ "main": "modal.js",

README.md

@@ -1,1 +0,35 @@
-# Modal
+# Modal
+
+Easy to use.
+
+## NPM install
+
+`npm i frontello-ui-modal`
+
+
+## Usage
+
+### Form exemple
+
+```html
+<a href="htts://wikipedia.org" id="my-link">Open page</a>
+```
+
+### Init
+
+```html
+<link rel="stylesheet" href="modal.css">
+<script src="modal.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+	let myLink = document.querySelector('#my-link');
+	
+	myLink.addEventListener('click', (event) => {
+		let url = myLink.href;
+		let modal = (new Modal(myLink.innerText, {
+			fullPage: true,
+		})).setBodyIframe(url).addActionOpenUrl(url).addActionCopyUrl(url);
+	});
+});
+</script>
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15157

increased by14.67%

Lines of code

307

increased by5.86%

Number of lines in readme file

36

increased by3500%

No dependency changes