@springernature/global-popup - npm Package Compare versions

Comparing version 1.1.3 to 2.0.0

__tests__/popup.spec.js

		@@ -33,3 +33,3 @@ import {Popup} from '../js/popup';

		it('should calculate number values for popup positioning', () => {
		it('should calculate number values for popup positioning', done => {
		const popup = new Popup(trigger, 'popupContent1');
		@@ -40,7 +40,10 @@ const spy = jest.spyOn(popup, '_calcPositioning');
		// mock global expander's sending of event
		const event = new CustomEvent('globalExpander:focusEvent');
		const event = new CustomEvent('globalExpander:open');
		trigger.dispatchEvent(event);

		expect(spy).toHaveBeenCalled();
		expect(typeof spy.mock.results[0].value.top).toBe('number');
		setTimeout(() => {
		expect(spy).toHaveBeenCalled();
		expect(typeof spy.mock.results[0].value.top).toBe('number');
		done();
		},100)

		@@ -128,3 +131,3 @@ });
		// mock global expander's sending of event
		const event = new CustomEvent('globalExpander:focusEvent');
		const event = new CustomEvent('globalExpander:open');
		trigger.dispatchEvent(event);
		@@ -163,10 +166,17 @@

		it('should set css style if passed in as option', () => {
		it('should set css style if passed in as option', done => {
		new Popup(trigger, 'popupContent1', { MAX_WIDTH: "600px" });

		trigger.click();
		const popup = document.querySelector('.c-popup');

		expect(popup.style.maxWidth).toBe("600px");
		// mock global expander's sending of event
		const event = new CustomEvent('globalExpander:open');
		trigger.dispatchEvent(event);

		setTimeout(() => {
		const popup = document.querySelector('.c-popup');
		expect(popup.style.maxWidth).toBe("600px");
		done();
		},100)
		});
		});

HISTORY.md

		# History

		## 2.0.0 (2020-10-19)
		* Removes use Global Expander AUTOFOCUS, FOCUS_EVENT and CLOSE_EVENT options
		* Uses Global Expander's new OPEN_EVENT option
		* Global Popup now waits until the next tick using rAF before positioning the popup to allow the popup to finish rendering before calculating it's height
		* Global Popup now focuses on the popup once Global Expander has finished opening it

		## 1.1.3 (2020-08-14)
		@@ -4,0 +10,0 @@ * A better fix for an issue with border colours not being found

js/popup.js

		@@ -20,3 +20,3 @@ import {Expander} from '@springernature/global-expander/js/expander';
		this._build();
		this._expander = new Expander(this._trigger, this._content, {AUTOFOCUS: 'target', FOCUS_EVENT: true, CLOSE_EVENT: true});
		this._expander = new Expander(this._trigger, this._content, {OPEN_EVENT: true});
		this._bindEvents();
		@@ -37,5 +37,2 @@ }

		const pos = this._calcPositioning();
		this._content.style.top = this._px(pos.top);
		this._content.style.transform = `translateX(${pos.left}px)`;
		if (this._options.MAX_WIDTH) {
		@@ -47,2 +44,5 @@ this._content.style.maxWidth = this._options.MAX_WIDTH;
		}
		const pos = this._calcPositioning();
		this._content.style.top = this._px(pos.top);
		this._content.style.transform = `translateX(${pos.left}px)`;
		}
		@@ -63,3 +63,3 @@

		this._trigger.addEventListener('globalExpander:focusTarget', event => {
		this._trigger.addEventListener('globalExpander:open', event => {
		event.preventDefault();
		@@ -70,3 +70,7 @@
		}
		this._positionPopup();
		requestAnimationFrame(() => {
		this._positionPopup();
		this._content.focus();
		});

		window.addEventListener('resize', this._closeHandler);
		@@ -73,0 +77,0 @@ });

package.json

		{
		"name": "@springernature/global-popup",
		"version": "1.1.3",
		"version": "2.0.0",
		"description": "Builds and styles a popup that can be opened and closed",
		@@ -11,4 +11,4 @@ "license": "MIT",
		"@springernature/global-javascript": "^2.3.0",
		"@springernature/global-expander": "^2.0.2"
		"@springernature/global-expander": "^3.0.0"
		}
		}

New alerts