Merge pull request #33 from casualcoders/conditionalRunExitAndBumps

casualcoders · Dec 16, 2020 · be69a11 · be69a11
2 parents fb61d42 + cdf1ecd
commit be69a11
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 48 deletions.
diff --git a/Readme.MD b/Readme.MD
@@ -35,45 +35,80 @@ Example breakpointConfig:
 
 ```javascript
 [
-    { label: 'small', min: 0, max: 575 },
-    { label: 'mobile', min: 576, max: 767 },
-    { label: 'tablet', min: 768, max: 991 },
-    { label: 'desktop', min: 992, max: 1199 },
-    { label: 'big', min: 1200, max: 9999 }
+  { label: 'small', min: 0, max: 575 },
+  { label: 'mobile', min: 576, max: 767 },
+  { label: 'tablet', min: 768, max: 991 },
+  { label: 'desktop', min: 992, max: 1199 },
+  { label: 'big', min: 1200, max: 9999 }
 ]
 ```
 
 If you only require one Responder you can call:
 
 ```javascript
-ResponderFactory.createResponder(breakpointArray, callbackToRunOnEntry, callbackToRunOnExit)
+const responder =  ResponderFactory.createResponder(
+  breakpointArray,                    //Required
+  callbackToRunOnEntry,               //Optional
+  callbackToRunOnExit,                //Optional
+  shouldRunExitOnSetupIfMatchFails    //Optional default = true
+)
 ```
 
 If you require multiple Responders you can define them by calling:
 
 ```javascript
-ResponderFactory.createResponders(responderConfigs)
+const responders = ResponderFactory.createResponders(responderConfigs)
+```
+
+Example functions to run
+
+```javascript
+const firstExampleCallbackToRunOnEntry = () => {
+  console.log("firstExampleCallbackToRunOnEntry", "small", "medium");
+};
+
+const firstExampleCallbackToRunOnExit = () => {
+  console.log("firstExampleCallbackToRunOnExit", "small", "medium");
+};
+
+const secondExampleCallbackToRunOnEntry = () => {
+  console.log("secondExampleCallbackToRunOnEntry", "desktop");
+};
+
+const secondExampleCallbackToRunOnExit = () => {
+  console.log("secondExampleCallbackToRunOnExit", "big");
+};
+
+const thirdExampleCallbackToRunOnEntry = () => {
+  console.log("thirdExampleCallbackToRunOnEntry", "big");
+};
+
+const thirdExampleCallbackToRunOnExit = () => {
+  console.log("thirdExampleCallbackToRunOnExit", "desktop");
+};
+
 ```
 
 Example responder Configs:
 
 ```javascript
 [
-    {
-      viewports: ["small", "medium"],
-      enterFn: firtsExampleCallbackToRunOnEntry,
-      exitFn: firtsExampleCallbackToRunOnExit,
-    },
-    {
-      viewports: ["desktop"],
-      enterFn: secondExampleCallbackToRunOnEntry,
-      exitFn: secondexampleCallbackToRunOnExit,
-    },
-    {
-      viewports: ["big"],
-      enterFn: thirdExampleCallbackToRunOnEntry,
-      exitFn: thirdExampleCallbackToRunOnExit,
-    }
+  {
+    viewports: ["small", "medium"],             //Required
+    enterFn: firstExampleCallbackToRunOnEntry,  //Optional
+    exitFn: firstExampleCallbackToRunOnExit,    //Optional
+    shouldRunExitOnSetupIfMatchFails: false     //Optional default = true
+  },
+  {
+    viewports: ["desktop"],
+    enterFn: secondExampleCallbackToRunOnEntry,
+    exitFn: secondexampleCallbackToRunOnExit,
+  },
+  {
+    viewports: ["big"],
+    enterFn: thirdExampleCallbackToRunOnEntry,
+    exitFn: thirdExampleCallbackToRunOnExit,
+  }
 ]
 ```
 
@@ -82,46 +117,64 @@ Example responder Configs:
 ```javascript
 import { Responder } from "@casualcoders/responder";
 
-Responder = new Responder(viewportConfig, viewportsToRespondTo, callbackToRunOnEntry, callbackToRunOnExit)
+responder = new Responder(
+  viewportConfig,                   //Required
+  viewportsToRespondTo,             //Required
+  callbackToRunOnEntry,             //Optional
+  callbackToRunOnExit,              //Optional
+  shouldRunExitOnSetupIfMatchFails  //Optional default = true
+)
 ```
 
-Example viewportsToRespondTo array:
+Example viewportConfig array:
 
 ```javascript
 [
-    'small',
-    'medium'
+  { label: 'small', min: 0, max: 575 },
+  { label: 'mobile', min: 576, max: 767 },
+  { label: 'tablet', min: 768, max: 991 },
+  { label: 'desktop', min: 992, max: 1199 },
+  { label: 'big', min: 1200, max: 9999 }
 ]
 ```
 
-Example viewportConfig array:
+Example viewportsToRespondTo array:
+
+```javascript
+[
+  'small',
+  'medium'
+]
+```
 
 ### Initialisation
 
-After being created, each Responder needs the .setup() function to be called in the browser when you wish for the responsive js to begin. This method aggregates the viewports and sets up the matchMedia listeners.
+After being created, you need to run .setup() for each of the responders **inside the browser** when you wish for the responsive js to begin. This method aggregates the viewports and sets up the matchMedia listeners. This can be done directly if you only created one:
 
 ```javascript
-[
-    { label: 'small', min: 0, max: 575 },
-    { label: 'mobile', min: 576, max: 767 },
-    { label: 'tablet', min: 768, max: 991 },
-    { label: 'desktop', min: 992, max: 1199 },
-    { label: 'big', min: 1200, max: 9999 }
-]
+responder.setup()
 ```
 
+Or by looping through them:
+
+```javascript
+for (let i = 0; i < responders.length; i++) {
+  responders[i].setup();
+}
+```
+
+## How to contribute
+
+If you wish to contribute there are several ways to do so. You can raise a feature request or a bug report as an issue on Github, or if you would like to contribute to the repository you can find our guidelines in the [wiki](https://github.com/casualcoders/responder/wiki/how-to-contribute).
+
 ### Running tests
 
 ```bash
 npm run test
 ```
 
-or a wash task is also available:
+or a watch task is also available:
 
 ```bash
 npm run watch
 ```
-
-## How to contribute
-
-If you wish to contribute there are several ways to do so. You can raise a feature request or a bug report as an issue on Github, or if you would like to contribute to the repository you can find our guidelines in the [wiki](https://github.com/casualcoders/responder/wiki/how-to-contribute).
diff --git a/global.d.ts b/global.d.ts
@@ -1,2 +1,2 @@
 interface breakpoint { label: string, min: number, max: number }
-interface ResponderConfig { viewports: Array < string >, enterFn: Function, exitFn: Function}
+interface ResponderConfig { viewports: Array < string >, enterFn: null | Function, exitFn: null | Function, shouldRunExitOnSetupIfMatchFails: null | boolean}
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@casualcoders/responder",
-  "version": "0.4.1",
+  "version": "1.0.0",
   "description": "A dependencyless page responsiveness package in js built using typescript",
   "main": "./lib/index.js",
   "directories": {

diff --git a/src/Factory/ResponderFactory.ts b/src/Factory/ResponderFactory.ts
@@ -5,15 +5,15 @@ class ResponderFactory {
     constructor(breakpoints: Array < breakpoint >) {
         this.breakpoints = breakpoints;
     }
-    createResponder(viewports: Array < String > , enterFunction: any, exitFunction: any): Responder {
-        return new Responder(this.breakpoints, viewports, enterFunction, exitFunction)
+    createResponder(viewports: Array < String > , enterFunction:  null | Function, exitFunction:  null | Function, shouldRunExitOnSetupIfMatchFails:  null | boolean): Responder {
+        return new Responder(this.breakpoints, viewports, enterFunction, exitFunction, shouldRunExitOnSetupIfMatchFails)
     }
 
     createResponders(responderConfigs: Array < ResponderConfig >): Array < Responder > {
         let ResponderInstances: Array < Responder > = []
 
         responderConfigs.forEach(responderConfig => {
-            ResponderInstances.push(new Responder(this.breakpoints, responderConfig.viewports, responderConfig.enterFn, responderConfig.exitFn)) 
+            ResponderInstances.push(new Responder(this.breakpoints, responderConfig.viewports, responderConfig?.enterFn, responderConfig?.exitFn, responderConfig?.shouldRunExitOnSetupIfMatchFails)) 
         });
 
         return ResponderInstances

diff --git a/src/Responder/Responder.ts b/src/Responder/Responder.ts
@@ -5,14 +5,16 @@ class Responder {
     viewports: Array < String >;
     enterFunction: any;
     exitFunction: any;
+    shouldRunExitOnSetupIfMatchFails: boolean;
 
-    constructor( config: Array < breakpoint >, viewports: Array < String > , enterFunction: any, exitFunction: any) {
+    constructor( config: Array < breakpoint >, viewports: Array < String > , enterFunction:  null | Function, exitFunction: null | Function, shouldRunExitOnSetupIfMatchFails: null | boolean = true) {
         this.config = config;
         this.viewports = viewports;
         this.enterFunction = enterFunction ?? function() {};
         this.exitFunction = exitFunction ?? function() {};
         this.minimumDomWidth = 0;
         this.maximumDomWidth = Number.MAX_SAFE_INTEGER;
+        this.shouldRunExitOnSetupIfMatchFails = shouldRunExitOnSetupIfMatchFails ?? false;
         if (!this.isValid()) {
             throw new Error("the viewports array contains strings not found in the breakpoint config");
         }
@@ -22,7 +24,9 @@ class Responder {
         this.setMaximumDomWidth()
         this.setMinimumDomWidth()
         const mediaQueryList = this.createMatchMediaObject();
-        this.defineFunctionToRun(mediaQueryList.matches)
+        if (mediaQueryList.matches || this.shouldRunExitOnSetupIfMatchFails) {
+            this.defineFunctionToRun(mediaQueryList.matches)
+        }
         mediaQueryList.addEventListener('change', this.defineFunctionToRunEvent)
     }
 
@@ -71,7 +75,6 @@ class Responder {
 
     defineFunctionToRunEvent = (event: MediaQueryListEvent) => {
         this.defineFunctionToRun(event.matches)
-        //hopefully this should fix the scope issue where 'this' is the MediaQueryList. If this doesnt work then might need to pass this through 
     }
 
     defineFunctionToRun(matches: boolean): void {