Complete revise (#7)

* First major cleanup.

* More refactoring.

* Fixed a spelling error.

* Fixed an error with `classList.add`

* Unfolded basicTasks and removed dependency.

* Welcome to the modern world :-)

* Next try

* Update src/scripts/main.js

Co-authored-by: Kamil Iskra <[email protected]>

* Update src/scripts/main.js

Co-authored-by: Kamil Iskra <[email protected]>

* Incorporated PR #2 to handle no selections.

* Added pointer to dialog to ready callback.

* Forgotten compilation.

* Removed unnessary and bothering CSS settings which are likely to be overriden anyway.

* Fixed demo to new use new interface.

Co-authored-by: Kamil Iskra <[email protected]>

Author: nagmat84

README.md

@@ -263,3 +263,31 @@ basicModal.show({
 
 })
 ```
+
+## Contributing
+
+### Installing the development dependencies
+
+Run
+
+    npm install
+
+## Compilation
+
+Run
+
+    npm run compile
+
+it will create a minimized version of the JS code and a CSS style file from the SASS sources in `./dist`.
+
+## Browser Compatibility
+
+The build system uses [Gulp Babel](https://babeljs.io) to "transpile" modern ECMA Script code for older browsers.
+The build system reads `babel.config.json` for a list of minimum supported browser versions.
+This file should be updated once in a while.
+According to [Babel Docs | Config Options | Tagets](https://babeljs.io/docs/en/options#targets) the following targets are supported: `android`, `chrome`, `edge`, `electron`, `firefox`, `ie`, `ios`, `node`, `opera`, `rhino`, `safari`, and `samsung`.
+A list of browser versions can be obtained via 
+
+    npx browserslist --mobile-to-desktop ">0.5%, not dead"
+
+(see [Babel Docs | @babel/preset-env](https://babeljs.io/docs/en/babel-preset-env.html)).

babel.config.json

@@ -0,0 +1,12 @@
+{
+  "targets": {
+    "chrome": "93",
+    "edge": "96",
+    "firefox": "95",
+    "ie": "11",
+    "ios": "12",
+    "opera": "82",
+    "safari": "14",
+    "samsung": "16"
+  }
+}

bower.json

@@ -58,7 +58,10 @@
 
 	<script>
 
-		var popup = {
+		/**
+		 * @type ModalDialogConfiguration
+		 */
+		const popup = {
 			body: '<p>This is a dead-simple popup!<br>The message can be filled with anything you want.</p>',
 			buttons: {
 				cancel: {
@@ -69,9 +72,12 @@
 			}
 		}
 
-		var callback = {
+		/**
+		 * @type ModalDialogConfiguration
+		 */
+		const callback = {
 			body: '<p>Take a look at the console to see if the callback has been executed.</p>',
-			callback: function() { console.log('callback fired') },
+			readyCB: function() { console.log('callback fired') },
 			buttons: {
 				cancel: {
 					title: 'Dismiss',
@@ -81,7 +87,10 @@
 			}
 		}
 
-		var alert = {
+		/**
+		 * @type ModalDialogConfiguration
+		 */
+		const alert = {
 			body: '<p>This is a dead-simple alert!<br>The message can be filled with anything you want.</p>',
 			buttons: {
 				action: {
@@ -91,7 +100,10 @@
 			}
 		}
 
-		var longAlert = {
+		/**
+		 * @type ModalDialogConfiguration
+		 */
+		const longAlert = {
 			body: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quaerat, autem quia nulla modi esse voluptatum placeat laborum ab. Aliquid iure, saepe totam delectus, debitis nesciunt facilis ex cumque. Obcaecati natus ad asperiores necessitatibus perferendis repellat, vitae quo ex, sapiente officiis, assumenda et ipsam commodi sint blanditiis temporibus inventore? Maiores obcaecati nesciunt perferendis, explicabo, sapiente sed ad veritatis reiciendis, labore iusto fugiat. Optio doloribus, dolor aut! A cumque quam neque corporis, dignissimos earum distinctio aut? Perferendis ipsa dolores, fugiat temporibus asperiores nemo aliquam modi officia animi facere quam tenetur aspernatur quasi quisquam, porro consequatur, iure eos nihil mollitia corporis reiciendis. Aliquid hic, consectetur dignissimos porro quasi atque, animi, quod voluptatem unde ex, iure impedit laborum ad optio debitis delectus iste. Voluptates, dolorem quod sit alias. Quisquam fugit, impedit nam placeat nemo fugiat consequatur, velit error sint vel quaerat repellat quis tenetur? Minus culpa aperiam atque quam dolores suscipit delectus ipsum officia esse, nobis reprehenderit, maiores tempora, pariatur enim, sed blanditiis fuga ad exercitationem quo voluptas. Placeat officiis cum autem molestiae libero, vero quod earum iste ut voluptas ipsam delectus optio aliquam quasi impedit illum magni maxime? Optio aut reprehenderit pariatur saepe quia necessitatibus distinctio, architecto assumenda nihil nesciunt. Quod architecto sapiente officiis dicta corporis vitae quas laboriosam veritatis numquam quae quis obcaecati iste, incidunt natus quisquam! Numquam cum fugiat harum vero ad sit cupiditate possimus, voluptatem ea illo, repellendus provident perferendis iste aut iure esse nobis assumenda natus laboriosam, quidem doloribus nisi saepe accusantium officia. Iste, recusandae, ipsum. Dicta at quia aliquid, fugit tenetur voluptatum ipsa quam explicabo numquam illo reprehenderit voluptas, eius perferendis maxime voluptates ducimus inventore accusantium minima! Eos dolore accusamus, quasi quos, possimus, fuga, qui maiores non consectetur quisquam atque reprehenderit ullam! Quaerat, cupiditate voluptates at eaque, asperiores minima praesentium officiis expedita neque ratione error consequuntur saepe nisi, possimus vitae dicta. Ullam delectus accusantium, ipsam nesciunt, reiciendis corporis tempore sequi quibusdam natus maxime debitis laudantium voluptate ipsum esse tempora. Alias aliquid, rerum quas eius soluta accusamus incidunt ducimus voluptas esse eligendi distinctio hic voluptates odit, natus unde asperiores sit officia velit, corporis placeat consectetur quidem exercitationem. Perspiciatis ex aliquam non soluta vero aliquid corrupti laudantium, animi saepe nemo neque, quia quis magnam id dolores iste dolore, dolor sit quidem veniam impedit consequatur, ullam nostrum expedita? Earum blanditiis nulla ex, facilis! Nihil quae ducimus consectetur aliquam quo deleniti quisquam mollitia aspernatur. Libero commodi, ipsam perspiciatis obcaecati deleniti cupiditate voluptate, ratione explicabo accusantium quis adipisci magnam, sed. Amet, nemo accusantium. Ut veritatis, porro reprehenderit sunt itaque, beatae recusandae distinctio maxime nulla animi ab ullam. Quibusdam accusamus ipsum sunt incidunt, fugit esse necessitatibus optio ducimus odio, non totam numquam, repellat architecto molestias quos? Nulla aliquid enim aliquam sequi accusantium repudiandae hic delectus quam atque dicta soluta fuga blanditiis incidunt esse neque sunt voluptas sint ullam animi illum, repellat eligendi! Temporibus dolorem et ducimus perferendis ea omnis, eligendi placeat maxime sapiente alias repudiandae magni vel veniam illo ex voluptas natus necessitatibus porro sed in magnam accusamus quas dignissimos? Est, id, fuga.</p>',
 			buttons: {
 				action: {
@@ -101,7 +113,10 @@
 			}
 		}
 
-		var prompt = {
+		/**
+		 * @type ModalDialogConfiguration
+		 */
+		const prompt = {
 			body: '<p>This type of modal can be used to ask the user questions. Are you sure you want to continue?</p>',
 			buttons: {
 				cancel: {
@@ -115,7 +130,10 @@
 			}
 		}
 
-		var input = {
+		/**
+		 * @type ModalDialogConfiguration
+		 */
+		const input = {
 			body: '<p>This type of modal can be used to ask the user questions. Please enter your name:</p><input class="basicModal__text" type="text" name="name" placeholder="Jane Doe">',
 			buttons: {
 				cancel: {
@@ -125,18 +143,21 @@
 				action: {
 					title: 'Continue',
 					fn: function(data) {
-
-						if (data.name.length<1) return basicModal.error('name')
-
-						console.log(data)
-						basicModal.close()
-
+						if (data.name.length<1) {
+							basicModal.focusError('name')
+						} else {
+							console.log(data)
+							basicModal.close()
+						}
 					}
 				}
 			}
 		}
 
-		var select = {
+		/**
+		 * @type ModalDialogConfiguration
+		 */
+		const select = {
 			body: '<p>This type of modal can be used to ask the user questions.</p><select name="options"><option disabled selected>Choose an option...</option><option>Option A</option><option>Option B</option></select>',
 			buttons: {
 				cancel: {
@@ -146,43 +167,40 @@
 				action: {
 					title: 'Continue',
 					fn: function(data) {
-
-						if (data.options==='Choose an option...') return basicModal.error('options')
-
-						console.log(data)
-						basicModal.close()
-
+						if (data.options==='Choose an option...') {
+							basicModal.focusError('options')
+						} else {
+							console.log(data)
+							basicModal.close()
+						}
 					}
 				}
 			}
 		}
 
-		var login = {
+		/**
+		 * @type ModalDialogConfiguration
+		 */
+		const login = {
 			body: '<p style="margin: 5% 0 14%; color: #666;"><strong style="display: block; margin: 0 0 5%; color: #444; text-transform: uppercase; letter-spacing: 2px;">Login</strong>Login with username "admin" and password "1234". Invalid input will be highlighted.</p><input class="basicModal__text" type="text" placeholder="username" name="username"><input class="basicModal__text" type="password" placeholder="password" name="password">',
 			class: basicModal.THEME.small,
 			buttons: {
 				cancel: {
 					title: 'Cancel',
-					class: basicModal.THEME.xclose,
+					classList: [basicModal.THEME.xclose],
 					fn: basicModal.close
 				},
 				action: {
 					title: 'Login',
 					fn: function(data) {
-
 						if (data.username!=='admin') {
-							basicModal.error('username')
-							return false
+							basicModal.focusError('username')
+						} else if (data.password!=='1234') {
+							basicModal.focusError('password')
+						} else {
+							console.log(data)
+							basicModal.close()
 						}
-
-						if (data.password!=='1234') {
-							basicModal.error('password')
-							return false
-						}
-
-						console.log(data)
-						basicModal.close()
-
 					}
 				}
 			}