@springernature/global-popup
Advanced tools
Comparing version
@@ -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'}); | ||
}); | ||
}); |
@@ -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 | ||
## 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 |
@@ -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 @@ }); |
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 @@ }; |
{ | ||
"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", |
@@ -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> | ||
``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
17804
14.06%326
13.59%1
-50%65
32.65%