@springernature/global-expander - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

__tests__/expander.spec.js

@@ -361,4 +361,30 @@ import {Expander} from '../js/expander';
 		});
+
+		test('Should not fire focus event by default', () => {
+			// Given
+			const button = document.querySelector('[data-expander]');
+			const spy = jest.spyOn(button, 'dispatchEvent');
+			const expander = new Expander(element.BUTTON, element.TARGET, {});
+			expander.init();
+			// When
+			element.BUTTON.click();
+			// Then
+			expect(spy).not.toHaveBeenCalled();
+		});
+
+		test('Should fire event if FOCUS_EVENT: true option passed to constructor', () => {
+			// Given
+			const button = document.querySelector('[data-expander]');
+			const spy = jest.spyOn(button, 'dispatchEvent');
+			const expander = new Expander(element.BUTTON, element.TARGET, {
+				FOCUS_EVENT: true
+			});
+			expander.init();
+			// When
+			element.BUTTON.click();
+			// Then
+			expect(spy).toHaveBeenCalled();
+		});
 	});
 });
 

__tests__/index.spec.js

@@ -53,3 +53,4 @@ import {Expander} from '../js/expander';
 			CLOSE_ON_CLICKOFF: false,
-			AUTOFOCUS: true
+			AUTOFOCUS: true,
+			FOCUS_EVENT: false
 		};
@@ -71,3 +72,4 @@
 			CLOSE_ON_CLICKOFF: false,
-			AUTOFOCUS: true
+			AUTOFOCUS: true,
+			FOCUS_EVENT: false
 		};
@@ -84,5 +86,6 @@
 			CLOSE_ON_CLICKOFF: 'true',
-			AUTOFOCUS: 'false'
+			AUTOFOCUS: 'false',
+			FOCUS_EVENT: false
 		});
 	});
 });

HISTORY.md

 # History
 
+## 1.1.0 (2020-06-30)
+    * Adds option to fire custom event just before expander focuses on target
+
 ## 1.0.0 (2020-05-13)
@@ -4,0 +7,0 @@ * Use @springernature/global-javascript instead of deprecated global-context

js/expander.js

@@ -1,2 +0,2 @@
-import {makeArray} from '@springernature/global-javascript/src/helpers';
+import {makeArray, createEvent} from '@springernature/global-javascript/src/helpers';
 
@@ -12,3 +12,4 @@ /**
 	CLOSE_ON_FOCUS_OUT: true,
-	AUTOFOCUS: false
+	AUTOFOCUS: false,
+	FOCUS_EVENT: false
 };
@@ -144,2 +145,9 @@
 
+		if (this._options.FOCUS_EVENT) {
+			const event = createEvent('focusTarget', 'globalExpander', {
+				bubbles: false
+			});
+			this._triggerEl.dispatchEvent(event);
+		}
+
 		if (this._options.AUTOFOCUS) {
@@ -146,0 +154,0 @@ if (this._targetTabbableItems.length > 0) {

js/index.js

@@ -11,3 +11,4 @@ import {makeArray, getDataOptions} from '@springernature/global-javascript/src/helpers';
 	CLOSE_ON_CLICKOFF: DATA_COMPONENT + '-close-on-clickoff',
-	AUTOFOCUS: DATA_COMPONENT + '-autofocus'
+	AUTOFOCUS: DATA_COMPONENT + '-autofocus',
+	FOCUS_EVENT: DATA_COMPONENT + '-focus-event'
 };
@@ -14,0 +15,0 @@

package.json

 {
   "name": "@springernature/global-expander",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Frontend package for expanding a target when clicking a toggle",
   "license": "MIT",
   "dependencies": {
-    "@springernature/global-javascript": "^2.0.0"
+    "@springernature/global-javascript": "^2.1.0"
   }
 }

README.md

@@ -40,2 +40,3 @@ # Global Expander
 | AUTOFOCUS          | false         | Boolean | Set focus on the first tabbable element inside the target (will highlight text if appropriate, e.g. input with value) |
+| FOCUS_EVENT          | false         | Boolean | Dispatch custom event on trigger just before expander focuses on target |
 
@@ -49,2 +50,3 @@ The data attribute options are the same, but are lowercase and hyphenated (and strings where the option is a boolean):
 - `data-expander-autofocus`
+- `data-expander-focus-event`
 
@@ -51,0 +53,0 @@ Note: data attribute options will take precedence over any options set during initialisation.

No alert changes

Improved metrics

Total package byte prevSize

24445

increased by5.9%

Lines of code

621

increased by5.97%

Number of lines in readme file

56

increased by3.7%

Dependency changes

• Updated@springernature/global-javascript@^2.1.0