Merge pull request #5 from Designory/test/increase-coverage-v1

Tests - Tests all options / API

README.md

@@ -223,7 +223,7 @@ yamodal({
 
 ```js
 yamodal({
-    template: event => `<div>This was opened via ${event.type === 'yamodal.open' ? 'the open() API' : 'a click'}</div>`,
+    template: event => `<div>This was opened via ${event.type === 'open.yamodal' ? 'the open() API' : 'a click'}</div>`,
     context(trigger_node, event) {
         return event;
     },
@@ -537,7 +537,7 @@ _Type:_ `Function`
 
 When `isOpen()` is run, it returns `true` if the current modal is open, `false` if otherwise.
 
-#### Return `open(event = new CustomEvent('yamodal.open'))`
+#### Return `open(event = new CustomEvent('open.yamodal'))`
 
 _Type:_ `Function`
 
@@ -546,7 +546,7 @@ This means that any `beforeInsertIntoDom`, `onAppend`, or `afterInsertIntoDom`
 functions will also run.
 
 Since usually the modal is opened by a click event, programmatic openings have a
-"placeholder" event passed in. This event will have a type of `'yamodal.open'`.
+"placeholder" event passed in. This event will have a type of `'open.yamodal'`.
 Optionally, you can send your own custom event to the open handler.
 
 ```js
@@ -555,15 +555,15 @@ var my_modal = yamodal({ ... });
 setTimeout(() => my_modal.open(), 1000);
 ```
 
-#### Return `close(event = new CustomEvent('yamodal.close'))`
+#### Return `close(event = new CustomEvent('close.yamodal'))`
 
 _Type:_ `Function`
 
 When `close()` is run it triggers the same handler that runs when a close element is clicked.
 This means that any `beforeRemoveFromDom`, or `afterRemoveFromDom` functions will also run.
 
 Since the modal is usually closed by a click event, programmatic closings have a
-"placeholder" event passed in. This event will have a type of `'yamodal.close'`.
+"placeholder" event passed in. This event will have a type of `'close.yamodal'`.
 Optionally, you can send your own custom event to the close handler.
 
 #### Return `destroy()`

docs/examples.iife.js

@@ -289,8 +289,12 @@
       if (modal_is_dynamic) {
         modal_node = createModalNode(trigger_node, event); // Always check for the default close selector if none was specified for a dynamic modal
 
-        if (no_close_selector_specified && modal_node.querySelector(default_close_selector)) {
-          close_selector = default_close_selector;
+        if (no_close_selector_specified) {
+          if (modal_node.querySelector(default_close_selector)) {
+            close_selector = default_close_selector;
+          } else {
+            close_selector = undefined;
+          }
         }
       }
 
@@ -377,11 +381,11 @@
       },
 
       open: function open() {
-        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : createEmptyCustomEvent('yamodal.open');
+        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : createEmptyCustomEvent('open.yamodal');
         return onTriggerOpen(event);
       },
       close: function close() {
-        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : createEmptyCustomEvent('yamodal.close');
+        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : createEmptyCustomEvent('close.yamodal');
         return onTriggerClose(event);
       },
       isOpen: function isOpen() {
@@ -459,7 +463,7 @@
   };
 
   var template$9 = function template(event) {
-    return "\n<div class=\"overlay\">\n    <div class=\"modal\">\n        <div>\n        This modal was opened via ".concat(event.type === 'yamodal.open' ? 'the <code>open()</code> API' : 'a click', "\n        </div>\n        <button data-modal-close>\xD7</button>\n    </div>\n</div>");
+    return "\n<div class=\"overlay\">\n    <div class=\"modal\">\n        <div>\n        This modal was opened via ".concat(event.type === 'open.yamodal' ? 'the <code>open()</code> API' : 'a click', "\n        </div>\n        <button data-modal-close>\xD7</button>\n    </div>\n</div>");
   };
 
   initializeModalListener({

examples/templates/dynamic-context-reading-event.js

@@ -3,7 +3,7 @@ const template = (event) => `
     <div class="modal">
         <div>
         This modal was opened via ${
-            event.type === 'yamodal.open' ? 'the <code>open()</code> API' : 'a click'
+            event.type === 'open.yamodal' ? 'the <code>open()</code> API' : 'a click'
         }
         </div>
         <button data-modal-close>×</button>

package.json

@@ -29,17 +29,18 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/register": "^7.10.5",
     "@rollup/plugin-babel": "^5.2.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
     "global-jsdom": "^6.1.0",
     "jsdom": "^16.3.0",
     "mocha": "^8.1.1",
     "nyc": "^15.1.0",
     "rollup": "^2.23.0",
     "rollup-plugin-filesize": "^9.0.0",
-    "rollup-plugin-livereload": "^1.0.4",
+    "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^6.1.0"
+    "rollup-plugin-terser": "^7.0.2",
+    "sinon": "^9.0.2"
   },
   "keywords": [
     "modal",

src/yamodal.js

@@ -120,8 +120,12 @@ const initializeModalListener = ({
 			modal_node = createModalNode(trigger_node, event);
 
 			// Always check for the default close selector if none was specified for a dynamic modal
-			if (no_close_selector_specified && modal_node.querySelector(default_close_selector)) {
-				close_selector = default_close_selector;
+			if (no_close_selector_specified) {
+				if (modal_node.querySelector(default_close_selector)) {
+					close_selector = default_close_selector;
+				} else {
+					close_selector = undefined;
+				}
 			}
 		}
 
@@ -206,10 +210,10 @@ const initializeModalListener = ({
 		get modal_node() {
 			return modal_node;
 		},
-		open(event = createEmptyCustomEvent('yamodal.open')) {
+		open(event = createEmptyCustomEvent('open.yamodal')) {
 			return onTriggerOpen(event);
 		},
-		close(event = createEmptyCustomEvent('yamodal.close')) {
+		close(event = createEmptyCustomEvent('close.yamodal')) {
 			return onTriggerClose(event);
 		},
 		isOpen() {

test/templates.js

@@ -1,3 +1,4 @@
 export const basic = () => `<div id="modal">Hello</div>`;
-export const basicWithClose = (close_btn = `<button data-modal-close="">x</button>`) =>
+export const basicWithClose = (close_btn = `<button id="close" data-modal-close="">x</button>`) =>
 	`<div id="modal">Hello${close_btn}</div>`;
+export const basicWithContext = (val = '') => `<div id="modal">${val}</div>`;