@springernature/global-popup - npm Package Compare versions

Comparing version 0.4.2 to 1.0.0

__tests__/index.spec.js

@@ -48,5 +48,28 @@ import {popup} from '../js/index';
 		expect(Popup).toHaveBeenCalledTimes(2);
-		expect(Popup).toHaveBeenNthCalledWith(1, trigger, 'popupContent1');
-		expect(Popup).toHaveBeenNthCalledWith(2, trigger2, 'popupContent2');
+		expect(Popup).toHaveBeenNthCalledWith(1, trigger, 'popupContent1', {});
+		expect(Popup).toHaveBeenNthCalledWith(2, trigger2, 'popupContent2', {});
 	});
+
+	it('should use data attr option if present in DOM', () => {
+		// Given
+		document.body.innerHTML = `
+		<div class="test-selector">
+			<div>
+				<span data-popup data-popup-hook=".test-selector" data-popup-target="popupContent3"></span>
+				<div id="popupContent3" class="c-popup">
+					<p>Some popup text</p>
+				</div>	
+			</div>
+		</div>
+		`;
+
+		// When
+		popup();
+		const trigger = document.querySelector('[data-popup]');
+		trigger.click();
+
+		// Then
+		expect(Popup).toHaveBeenCalledTimes(1);
+		expect(Popup).toHaveBeenNthCalledWith(1, trigger, 'popupContent3', {HOOK: '.test-selector'});
+	});
 });

__tests__/popup.spec.js

@@ -13,3 +13,3 @@ import {Popup} from '../js/popup';
 			<span data-test-trigger></span>
-			<div id="popupContent1">
+			<div id="popupContent1" class="c-popup">
 				<p>Some popup text</p>
@@ -44,5 +44,3 @@ </div>
 		expect(spy).toHaveBeenCalled();
-		expect(typeof spy.mock.results[0].value.left).toBe('number');
 		expect(typeof spy.mock.results[0].value.top).toBe('number');
-		expect(typeof spy.mock.results[0].value.right).toBe('number');
 
@@ -163,2 +161,11 @@ });
 	});
+
+	it('should set css style if passed in as option', () => {
+		new Popup(trigger, 'popupContent1', { MAX_WIDTH: "600px" });
+
+		trigger.click();
+		const popup = document.querySelector('.c-popup');
+
+		expect(popup.style.maxWidth).toBe("600px");
+	});
 });

HISTORY.md

 # History
 
+## 1.0.0 (2020-07-31)
+    * Removes min-width and max-width from css and sets in js as option.
+    * Adds width: auto to css.
+    * Adds logic and option for hook which inserts popup in to parent of trigger unless specified in option.
+
 ## 0.4.2 (2020-07-29)
@@ -4,0 +9,0 @@ * Bump global-expander to 2.0.2

js/index.js

@@ -1,4 +0,12 @@
-import {makeArray} from '../../global-javascript/src/helpers';
+import {makeArray, getDataOptions} from '../../global-javascript/src/helpers';
 import {Popup} from './popup';
 
+const DATA_COMPONENT = 'data-popup';
+
+const optionSelectors = {
+	MIN_WIDTH: DATA_COMPONENT + '-min-width',
+	MAX_WIDTH: DATA_COMPONENT + '-max-width',
+	HOOK: DATA_COMPONENT + '-hook'
+};
+
 /**
@@ -21,4 +29,6 @@ * Data Attribute API
 		}
+
+		const dataOptions = getDataOptions(trigger, optionSelectors);
 		/* eslint-disable no-new */
-		new Popup(trigger, targetElementSelector);
+		new Popup(trigger, targetElementSelector, Object.assign({}, dataOptions));
 		/* eslint-enable no-new */
@@ -25,0 +35,0 @@ });

js/popup.js

 import {Expander} from '@springernature/global-expander/js/expander';
 
 const Popup = class {
-	constructor(trigger, id) {
+	constructor(trigger, id, options = {}) {
 		this._trigger = trigger;
 		this._id = id;
+		this._options = options;
 		this._content = document.querySelector(`#${this._id}`);
@@ -25,3 +26,10 @@ this._className = 'c-popup';
 		this._content.insertAdjacentHTML('beforeend', this._closeButton + this._arrow);
-		document.body.appendChild(this._content);
+		let hook = this._trigger.parentNode;
+
+		if (document.querySelector(this._options.HOOK)) {
+			hook = document.querySelector(this._options.HOOK);
+		}
+
+		hook.appendChild(this._content);
+		hook.style.position = 'relative';
 	}
@@ -36,6 +44,10 @@
 
-		var pos = this._calcPositioning();
+		const pos = this._calcPositioning();
 		this._content.style.top = this._px(pos.top);
-		this._content.style.left = this._px(pos.left);
-		this._content.style.right = this._px(pos.right);
+		if (this._options.MAX_WIDTH) {
+			this._content.style.maxWidth = this._options.MAX_WIDTH;
+		}
+		if (this._options.MIN_WIDTH) {
+			this._content.style.minWidth = this._options.MIN_WIDTH;
+		}
 	}
@@ -128,4 +140,2 @@
 		return {
-			left: (windowWidth < 600) ? 5 : offset.left,
-			right: 5, // grow across page (width of popup controlled by css max-width)
 			top: (position === 'above') ? abovePositioning : belowPositioning
@@ -132,0 +142,0 @@ };

package.json

 {
   "name": "@springernature/global-popup",
-  "version": "0.4.2",
+  "version": "1.0.0",
   "description": "Builds and styles a popup that can be opened and closed",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -5,3 +5,3 @@ # Global Popup
 
-Popups are absolutely positioned either above or below the trigger, based on a calculation of space in the viewport. Defaults to above.
+Popups are absolutely positioned either above or below the trigger, based on a calculation of space in the viewport. Defaults to above. By default the popups calculate their width based on their contents.
 
@@ -22,9 +22,12 @@ ## Usage
 ```html
-<span data-popup data-popup-target="popupContent1">Popup trigger</span>
-<div id="popupContent1">
-    <p>Some popup text</p>
-</div>			
+<div class="hook-selector">
+    <span data-popup data-popup-hook="hook-selector" data-popup-target="popupContent1">Popup trigger</span>
+    <div id="popupContent1">
+        <p>Some popup text</p>
+    </div>
+</div>
+
 ```
 
-Two data attribute are required:
+Two data attributes are required:
 
@@ -36,2 +39,10 @@ | Data attribute     | Type    | Description |
 
+There are also options (add these to trigger element):
+
+| Data attribute        | Type    | Description |
+|-----------------------|---------|-------------|
+| data-popup-min-width  | String  | Sets a min-width in css on the popup, e.g. "100px" |
+| data-popup-max-width  | String  | Sets a max-width in css on the popup, e.g. "600px" |
+| data-popup-hook       | String  | CSS selector. A popup will be inserted in to and positioned relative to this element. If this option is ommitted it defaults to the parent of the trigger. |
+
 #### Directly
@@ -43,10 +54,15 @@
 const trigger = document.querySelector('span');
-new Popup(trigger, 'popupContent1');
+new Popup(trigger, 'popupContent1', { MIN_WIDTH: "100px", MAX_WIDTH: "600px", HOOK: ".some-classname" });
 ```
 
 ```html
-<span>Popup trigger</span>
-<div id="popupContent1">
-    <p>Some popup text</p>
-</div>			
+<div class="some-classname">
+    <div>
+        <span>Popup trigger</span>
+        <div id="popupContent1">
+            <p>Some popup text</p>
+        </div>
+    </div>
+</div>
+			
 ```

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17804

14.06%

Lines of code

326

13.59%

Number of low quality alerts

1

-50%

Number of lines in readme file

65

32.65%

No dependency changes