mirror of
https://github.com/RaidMax/IW4M-Admin.git
synced 2025-06-13 00:28:10 -05:00
migrated to ASP.Net Core
This commit is contained in:
RaidMax
219
WebfrontCore/wwwroot/lib/popper.js/packages/popper/README.md
Normal file
219
WebfrontCore/wwwroot/lib/popper.js/packages/popper/README.md
Normal file
@ -0,0 +1,219 @@
|
||||
<!-- IGNORE THE HTML BLOCK BELOW, THE INTERESTING PART IS AFTER IT -->
|
||||
|
||||
<h1 align="center">Popper.js</h1>
|
||||
|
||||
<p align="center">
|
||||
<strong>A library used to position poppers in web applications.</strong>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://travis-ci.org/FezVrasta/popper.js/branches" target="_blank"><img src="https://travis-ci.org/FezVrasta/popper.js.svg?branch=master" alt="Build Status"/></a>
|
||||
<img src="http://img.badgesize.io/https://unpkg.com/popper.js/dist/popper.min.js?compression=gzip" alt="Stable Release Size"/>
|
||||
<a href="https://www.bithound.io/github/FezVrasta/popper.js"><img src="https://www.bithound.io/github/FezVrasta/popper.js/badges/score.svg" alt="bitHound Overall Score"></a>
|
||||
<a href="https://codeclimate.com/github/FezVrasta/popper.js/coverage"><img src="https://codeclimate.com/github/FezVrasta/popper.js/badges/coverage.svg" alt="Istanbul Code Coverage"/></a>
|
||||
<a href="https://gitter.im/FezVrasta/popper.js" target="_blank"><img src="https://img.shields.io/gitter/room/nwjs/nw.js.svg" alt="Get support or discuss"/></a>
|
||||
<br />
|
||||
<a href="https://saucelabs.com/u/popperjs" target="_blank"><img src="https://badges.herokuapp.com/browsers?labels=none&googlechrome=latest&firefox=latestµsoftedge=latest&iexplore=11,10&safari=latest&iphone=latest" alt="SauceLabs Reports"/></a>
|
||||
</p>
|
||||
|
||||
<img src="https://raw.githubusercontent.com/FezVrasta/popper.js/master/popperjs.png" align="right" width=250 />
|
||||
|
||||
<!-- 🚨 HEY! HERE BEGINS THE INTERESTING STUFF 🚨 -->
|
||||
|
||||
## Wut? Poppers?
|
||||
|
||||
A popper is an element on the screen which "pops out" from the natural flow of your application.
|
||||
Common examples of poppers are tooltips, popovers and drop-downs.
|
||||
|
||||
|
||||
## So, yet another tooltip library?
|
||||
|
||||
Well, basically, **no**.
|
||||
Popper.js is a **positioning engine**, its purpose is to calculate the position of an element
|
||||
to make it possible to position it near a given reference element.
|
||||
|
||||
The engine is completely modular and most of its features are implemented as **modifiers**
|
||||
(similar to middlewares or plugins).
|
||||
The whole code base is written in ES2015 and its features are automatically tested on real browsers thanks to [SauceLabs](https://saucelabs.com/) and [TravisCI](https://travis-ci.org/).
|
||||
|
||||
Popper.js has zero dependencies. No jQuery, no LoDash, nothing.
|
||||
It's used by big companies like [Twitter in Bootstrap v4](https://getbootstrap.com/), [Microsoft in WebClipper](https://github.com/OneNoteDev/WebClipper) and [Atlassian in AtlasKit](https://aui-cdn.atlassian.com/atlaskit/registry/).
|
||||
|
||||
### Popper.js
|
||||
|
||||
This is the engine, the library that computes and, optionally, applies the styles to
|
||||
the poppers.
|
||||
|
||||
Some of the key points are:
|
||||
|
||||
- Position elements keeping them in their original DOM context (doesn't mess with your DOM!);
|
||||
- Allows to export the computed informations to integrate with React and other view libraries;
|
||||
- Supports Shadow DOM elements;
|
||||
- Completely customizable thanks to the modifiers based structure;
|
||||
|
||||
Visit our [project page](https://fezvrasta.github.io/popper.js) to see a lot of examples of what you can do with Popper.js!
|
||||
|
||||
Find [the documentation here](/docs/_includes/popper-documentation.md).
|
||||
|
||||
|
||||
### Tooltip.js
|
||||
|
||||
Since lots of users just need a simple way to integrate powerful tooltips in their projects,
|
||||
we created **Tooltip.js**.
|
||||
It's a small library that makes it easy to automatically create tooltips using as engine Popper.js.
|
||||
Its API is almost identical to the famous tooltip system of Bootstrap, in this way it will be
|
||||
easy to integrate it in your projects.
|
||||
The tooltips generated by Tooltip.js are accessible thanks to the `aria` tags.
|
||||
|
||||
Find [the documentation here](/docs/_includes/tooltip-documentation.md).
|
||||
|
||||
|
||||
## Installation
|
||||
Popper.js is available on the following package managers and CDNs:
|
||||
|
||||
| Source | |
|
||||
|:-------|:---------------------------------------------------------------------------------|
|
||||
| npm | `npm install popper.js --save` |
|
||||
| yarn | `yarn add popper.js` |
|
||||
| NuGet | `PM> Install-Package popper.js` |
|
||||
| Bower | `bower install popper.js --save` |
|
||||
| unpkg | [`https://unpkg.com/popper.js`](https://unpkg.com/popper.js) |
|
||||
| cdnjs | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) |
|
||||
|
||||
Tooltip.js as well:
|
||||
|
||||
| Source | |
|
||||
|:-------|:---------------------------------------------------------------------------------|
|
||||
| npm | `npm install tooltip.js --save` |
|
||||
| yarn | `yarn add tooltip.js` |
|
||||
| Bower* | `bower install tooltip.js=https://unpkg.com/tooltip.js --save` |
|
||||
| unpkg | [`https://unpkg.com/tooltip.js`](https://unpkg.com/tooltip.js) |
|
||||
| cdnjs | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) |
|
||||
|
||||
\*: Bower isn't officially supported, it can be used to install Tooltip.js only trough the unpkg.com CDN. This method has the limitation of not being able to define a specific version of the library. Bower and Popper.js suggests to use npm or Yarn for your projects.
|
||||
For more info, [read the related issue](https://github.com/FezVrasta/popper.js/issues/390).
|
||||
|
||||
### Dist targets
|
||||
|
||||
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
|
||||
|
||||
- UMD - Universal Module Definition: AMD, RequireJS and globals;
|
||||
- ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
|
||||
- ESNext: Available in `dist/`, can be used with webpack and `babel-preset-env`;
|
||||
|
||||
Make sure to use the right one for your needs. If you want to import it with a `<script>` tag, use UMD.
|
||||
|
||||
## Usage
|
||||
|
||||
Given an existing popper DOM node, ask Popper.js to position it near its button
|
||||
|
||||
```js
|
||||
var reference = document.querySelector('.my-button');
|
||||
var popper = document.querySelector('.my-popper');
|
||||
var anotherPopper = new Popper(
|
||||
reference,
|
||||
popper,
|
||||
{
|
||||
// popper options here
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### Callbacks
|
||||
|
||||
Popper.js supports two kinds of callbacks, the `onCreate` callback is called after
|
||||
the popper has been initalized. The `onUpdate` one is called on any subsequent update.
|
||||
|
||||
```js
|
||||
const reference = document.querySelector('.my-button');
|
||||
const popper = document.querySelector('.my-popper');
|
||||
new Popper(reference, popper, {
|
||||
onCreate: (data) => {
|
||||
// data is an object containing all the informations computed
|
||||
// by Popper.js and used to style the popper and its arrow
|
||||
// The complete description is available in Popper.js documentation
|
||||
},
|
||||
onUpdate: (data) => {
|
||||
// same as `onCreate` but called on subsequent updates
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Writing your own modifiers
|
||||
|
||||
Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".
|
||||
A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks.
|
||||
|
||||
To learn how to create a modifier, [read the modifiers documentation](docs/_includes/popper-documentation.md#modifiers--object)
|
||||
|
||||
|
||||
### React, Vue.js, Angular, AngularJS, Ember.js (etc...) integration
|
||||
|
||||
Integrating 3rd party libraries in React or other libraries can be a pain because
|
||||
they usually alter the DOM and drive the libraries crazy.
|
||||
Popper.js limits all its DOM modifications inside the `applyStyle` modifier,
|
||||
you can simply disable it and manually apply the popper coordinates using
|
||||
your library of choice.
|
||||
|
||||
For a comprehensive list of libraries that let you use Popper.js into existing
|
||||
frameworks, visit the [MENTIONS](/MENTIONS.md) page.
|
||||
|
||||
Alternatively, you may even override your own `applyStyles` with your custom one and
|
||||
integrate Popper.js by yourself!
|
||||
|
||||
```js
|
||||
function applyReactStyle(data) {
|
||||
// export data in your framework and use its content to apply the style to your popper
|
||||
};
|
||||
|
||||
const reference = document.querySelector('.my-button');
|
||||
const popper = document.querySelector('.my-popper');
|
||||
new Popper(reference, popper, {
|
||||
modifiers: {
|
||||
applyStyle: { enabled: false },
|
||||
applyReactStyle: {
|
||||
enabled: true,
|
||||
fn: applyReactStyle,
|
||||
order: 800,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### Migration from Popper.js v0
|
||||
|
||||
Since the API changed, we prepared some migration instructions to make it easy to upgrade to
|
||||
Popper.js v1.
|
||||
|
||||
https://github.com/FezVrasta/popper.js/issues/62
|
||||
|
||||
Feel free to comment inside the issue if you have any questions.
|
||||
|
||||
### Performances
|
||||
|
||||
Popper.js is very performant. It usually takes 0.5ms to compute a popper's position (on an iMac with 3.5G GHz Intel Core i5).
|
||||
This means that it will not cause any [jank](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/anatomy-of-jank), leading to a smooth user experience.
|
||||
|
||||
## Notes
|
||||
|
||||
### Libraries using Popper.js
|
||||
|
||||
The aim of Popper.js is to provide a stable and powerful positioning engine ready to
|
||||
be used in 3rd party libraries.
|
||||
|
||||
Visit the [MENTIONS](/MENTIONS.md) page for an updated list of projects.
|
||||
|
||||
|
||||
### Credits
|
||||
I want to thank some friends and projects for the work they did:
|
||||
|
||||
- [@AndreaScn](https://github.com/AndreaScn) for his work on the GitHub Page and the manual testing he did during the development;
|
||||
- [@vampolo](https://github.com/vampolo) for the original idea and for the name of the library;
|
||||
- [Sysdig](https://github.com/Draios) for all the awesome things I learned during these years that made it possible for me to write this library;
|
||||
- [Tether.js](http://github.hubspot.com/tether/) for having inspired me in writing a positioning library ready for the real world;
|
||||
- [The Contributors](https://github.com/FezVrasta/popper.js/graphs/contributors) for their much appreciated Pull Requests and bug reports;
|
||||
- **you** for the star you'll give to this project and for being so awesome to give this project a try 🙂
|
||||
|
||||
### Copyright and license
|
||||
Code and documentation copyright 2016 **Federico Zivolo**. Code released under the [MIT license](LICENSE.md). Docs released under Creative Commons.
|
||||
@ -0,0 +1,27 @@
|
||||
#!/bin/sh
|
||||
|
||||
# Get version from package.json
|
||||
version="$(cat package.json | jq -r '.version')"
|
||||
|
||||
# Bower doesn't support Lerna multi-packages, we sacrificy flexibity
|
||||
# making Bower use the whole repository just for the Popper.js release
|
||||
rm -rf ../../dist
|
||||
cp -R dist ../../
|
||||
cp bower.json ../../bower.json
|
||||
git add -f ../../dist/*
|
||||
git add ../../bower.json
|
||||
git add package.json # In case we directly bump version during publish
|
||||
|
||||
# Commit the dist files
|
||||
git commit --no-verify -m "chore(automatic): v${version} (dist files)"
|
||||
# Create a tag which will reference the previous commit containing dist files
|
||||
git tag -a v${version} -m "chore(automatic): v${version} (tag release)"
|
||||
|
||||
# Delete dist files and the copied `bower.json` root file
|
||||
git rm ../../dist/**/*
|
||||
git rm ../../dist/*
|
||||
git rm ../../bower.json
|
||||
|
||||
# Create a git commit to get rid of the dist files from the repository
|
||||
# they will still be accessible referencing the just created tag
|
||||
git commit --no-verify -m "chore(automatic): v${version} (dist files cleanup)"
|
||||
@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "popper.js",
|
||||
"description": "A kickass library to manage your poppers",
|
||||
"main": "dist/umd/popper.js",
|
||||
"authors": [
|
||||
"Contributors (https://github.com/FezVrasta/popper.js/graphs/contributors)"
|
||||
],
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"popperjs",
|
||||
"component",
|
||||
"drop",
|
||||
"tooltip",
|
||||
"popover",
|
||||
"position",
|
||||
"attached"
|
||||
],
|
||||
"homepage": "https://popper.js.org",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
47
WebfrontCore/wwwroot/lib/popper.js/packages/popper/bundle.js
Normal file
47
WebfrontCore/wwwroot/lib/popper.js/packages/popper/bundle.js
Normal file
@ -0,0 +1,47 @@
|
||||
const bundle = require('@popperjs/bundle');
|
||||
|
||||
const banner = `/**!
|
||||
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
||||
* @version ${require('./package.json').version}
|
||||
* @license
|
||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/`;
|
||||
|
||||
const miniBanner = `/*
|
||||
Copyright (C) Federico Zivolo ${new Date().getFullYear()}
|
||||
Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
|
||||
*/`
|
||||
|
||||
bundle({
|
||||
name: 'Popper',
|
||||
input: 'src/index.js',
|
||||
file: 'popper.js',
|
||||
banner,
|
||||
miniBanner,
|
||||
});
|
||||
|
||||
bundle({
|
||||
name: 'PopperUtils',
|
||||
input: 'src/utils/index.js',
|
||||
file: 'popper-utils.js',
|
||||
banner,
|
||||
miniBanner,
|
||||
});
|
||||
131
WebfrontCore/wwwroot/lib/popper.js/packages/popper/index.d.ts
vendored
Normal file
131
WebfrontCore/wwwroot/lib/popper.js/packages/popper/index.d.ts
vendored
Normal file
@ -0,0 +1,131 @@
|
||||
// Type definitions for popper.js 1.10
|
||||
// Project: https://github.com/FezVrasta/popper.js/
|
||||
// Definitions by: edcarroll <https://github.com/edcarroll>, ggray <https://github.com/giladgray>, rhysd <https://rhysd.github.io>, joscha <https://github.com/joscha>, seckardt <https://github.com/seckardt>, marcfallows <https://github.com/marcfallows>
|
||||
|
||||
// This file only declares the public portions of the API.
|
||||
// It should not define internal pieces such as utils or modifier details.
|
||||
|
||||
declare namespace Popper {
|
||||
export type Position = 'top' | 'right' | 'bottom' | 'left';
|
||||
|
||||
export type Placement = 'auto-start'
|
||||
| 'auto'
|
||||
| 'auto-end'
|
||||
| 'top-start'
|
||||
| 'top'
|
||||
| 'top-end'
|
||||
| 'right-start'
|
||||
| 'right'
|
||||
| 'right-end'
|
||||
| 'bottom-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'left-end'
|
||||
| 'left'
|
||||
| 'left-start';
|
||||
|
||||
export type Boundary = 'scrollParent' | 'viewport' | 'window';
|
||||
|
||||
export type ModifierFn = (data: Data, options: Object) => Data;
|
||||
|
||||
export interface BaseModifier {
|
||||
order?: number;
|
||||
enabled?: boolean;
|
||||
fn?: ModifierFn;
|
||||
}
|
||||
|
||||
export interface Modifiers {
|
||||
shift?: BaseModifier;
|
||||
offset?: BaseModifier & {
|
||||
offset?: number | string,
|
||||
};
|
||||
preventOverflow?: BaseModifier & {
|
||||
priority?: Position[],
|
||||
padding?: number,
|
||||
boundariesElement?: Boundary | Element,
|
||||
escapeWithReference?: boolean
|
||||
};
|
||||
keepTogether?: BaseModifier;
|
||||
arrow?: BaseModifier & {
|
||||
element?: string | Element,
|
||||
};
|
||||
flip?: BaseModifier & {
|
||||
behavior?: 'flip' | 'clockwise' | 'counterclockwise' | Position[],
|
||||
padding?: number,
|
||||
boundariesElement?: Boundary | Element,
|
||||
};
|
||||
inner?: BaseModifier;
|
||||
hide?: BaseModifier;
|
||||
applyStyle?: BaseModifier & {
|
||||
onLoad?: Function,
|
||||
gpuAcceleration?: boolean,
|
||||
};
|
||||
computeStyle?: BaseModifier & {
|
||||
gpuAcceleration?: boolean;
|
||||
x?: 'bottom' | 'top',
|
||||
y?: 'left' | 'right'
|
||||
};
|
||||
[name: string]: (BaseModifier & Record<string, any>) | undefined;
|
||||
}
|
||||
|
||||
export interface Offset {
|
||||
top: number;
|
||||
left: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface Data {
|
||||
instance: Popper;
|
||||
placement: Placement;
|
||||
originalPlacement: Placement;
|
||||
flipped: boolean;
|
||||
hide: boolean;
|
||||
arrowElement: Element;
|
||||
styles: CSSStyleDeclaration;
|
||||
boundaries: Object;
|
||||
offsets: {
|
||||
popper: Offset,
|
||||
reference: Offset,
|
||||
arrow: {
|
||||
top: number,
|
||||
left: number,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export interface PopperOptions {
|
||||
placement?: Placement;
|
||||
eventsEnabled?: boolean;
|
||||
modifiers?: Modifiers;
|
||||
removeOnDestroy?: boolean;
|
||||
onCreate?(data: Data): void;
|
||||
onUpdate?(data: Data): void;
|
||||
}
|
||||
|
||||
export interface ReferenceObject {
|
||||
clientHeight: number;
|
||||
clientWidth: number;
|
||||
getBoundingClientRect(): ClientRect;
|
||||
}
|
||||
}
|
||||
|
||||
declare class Popper {
|
||||
static modifiers: (Popper.BaseModifier & { name: string })[];
|
||||
static placements: Popper.Placement[];
|
||||
static Defaults: Popper.PopperOptions;
|
||||
|
||||
options: Popper.PopperOptions;
|
||||
|
||||
constructor(reference: Element | Popper.ReferenceObject, popper: Element, options?: Popper.PopperOptions);
|
||||
|
||||
destroy(): void;
|
||||
update(): void;
|
||||
scheduleUpdate(): void;
|
||||
enableEventListeners(): void;
|
||||
disableEventListeners(): void;
|
||||
}
|
||||
|
||||
declare module 'popper.js' {
|
||||
export default Popper;
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "popper.js",
|
||||
"version": "1.12.9",
|
||||
"description": "A kickass library to manage your poppers",
|
||||
"homepage": "https://popper.js.org",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/FezVrasta/popper.js.git"
|
||||
},
|
||||
"author": "Federico Zivolo <federico.zivolo@gmail.com>",
|
||||
"contributors": [
|
||||
"Contributors (https://github.com/FezVrasta/popper.js/graphs/contributors)"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/FezVrasta/popper.js/issues"
|
||||
},
|
||||
"keywords": [
|
||||
"popperjs",
|
||||
"component",
|
||||
"drop",
|
||||
"tooltip",
|
||||
"popover",
|
||||
"position",
|
||||
"attached"
|
||||
],
|
||||
"main": "dist/umd/popper.js",
|
||||
"module": "dist/esm/popper.js",
|
||||
"types": "index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "yarn build",
|
||||
"postpublish": "nuget-publish && ./bower-publish.sh",
|
||||
"prebuild": "yarn lint",
|
||||
"pretest": "yarn lint",
|
||||
"build": "node bundle.js",
|
||||
"lint": "eslint .",
|
||||
"test": "popper-karma",
|
||||
"test:dev": "BROWSERS=Chrome NODE_ENV=development yarn test",
|
||||
"coverage": "COVERAGE=true yarn test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@popperjs/bundle": "^1.0.2",
|
||||
"@popperjs/eslint-config-popper": "^1.0.0",
|
||||
"@popperjs/test": "^1.0.0",
|
||||
"@popperjs/test-utils": "^1.0.0",
|
||||
"eslint": "^4.1.1",
|
||||
"nuget-publish": "^1.0.3"
|
||||
},
|
||||
"resolutions": {
|
||||
"micromatch": "^3.0.3"
|
||||
}
|
||||
}
|
||||
154
WebfrontCore/wwwroot/lib/popper.js/packages/popper/src/index.js
Normal file
154
WebfrontCore/wwwroot/lib/popper.js/packages/popper/src/index.js
Normal file
@ -0,0 +1,154 @@
|
||||
// Utils
|
||||
import debounce from './utils/debounce';
|
||||
import isFunction from './utils/isFunction';
|
||||
|
||||
// Methods
|
||||
import update from './methods/update';
|
||||
import destroy from './methods/destroy';
|
||||
import enableEventListeners from './methods/enableEventListeners';
|
||||
import disableEventListeners from './methods/disableEventListeners';
|
||||
import Defaults from './methods/defaults';
|
||||
import placements from './methods/placements';
|
||||
|
||||
export default class Popper {
|
||||
/**
|
||||
* Create a new Popper.js instance
|
||||
* @class Popper
|
||||
* @param {HTMLElement|referenceObject} reference - The reference element used to position the popper
|
||||
* @param {HTMLElement} popper - The HTML element used as popper.
|
||||
* @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
|
||||
* @return {Object} instance - The generated Popper.js instance
|
||||
*/
|
||||
constructor(reference, popper, options = {}) {
|
||||
// make update() debounced, so that it only runs at most once-per-tick
|
||||
this.update = debounce(this.update.bind(this));
|
||||
|
||||
// with {} we create a new object with the options inside it
|
||||
this.options = { ...Popper.Defaults, ...options };
|
||||
|
||||
// init state
|
||||
this.state = {
|
||||
isDestroyed: false,
|
||||
isCreated: false,
|
||||
scrollParents: [],
|
||||
};
|
||||
|
||||
// get reference and popper elements (allow jQuery wrappers)
|
||||
this.reference = reference && reference.jquery ? reference[0] : reference;
|
||||
this.popper = popper && popper.jquery ? popper[0] : popper;
|
||||
|
||||
// Deep merge modifiers options
|
||||
this.options.modifiers = {};
|
||||
Object.keys({
|
||||
...Popper.Defaults.modifiers,
|
||||
...options.modifiers,
|
||||
}).forEach(name => {
|
||||
this.options.modifiers[name] = {
|
||||
// If it's a built-in modifier, use it as base
|
||||
...(Popper.Defaults.modifiers[name] || {}),
|
||||
// If there are custom options, override and merge with default ones
|
||||
...(options.modifiers ? options.modifiers[name] : {}),
|
||||
};
|
||||
});
|
||||
|
||||
// Refactoring modifiers' list (Object => Array)
|
||||
this.modifiers = Object.keys(this.options.modifiers)
|
||||
.map(name => ({
|
||||
name,
|
||||
...this.options.modifiers[name],
|
||||
}))
|
||||
// sort the modifiers by order
|
||||
.sort((a, b) => a.order - b.order);
|
||||
|
||||
// modifiers have the ability to execute arbitrary code when Popper.js get inited
|
||||
// such code is executed in the same order of its modifier
|
||||
// they could add new properties to their options configuration
|
||||
// BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!
|
||||
this.modifiers.forEach(modifierOptions => {
|
||||
if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {
|
||||
modifierOptions.onLoad(
|
||||
this.reference,
|
||||
this.popper,
|
||||
this.options,
|
||||
modifierOptions,
|
||||
this.state
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// fire the first update to position the popper in the right place
|
||||
this.update();
|
||||
|
||||
const eventsEnabled = this.options.eventsEnabled;
|
||||
if (eventsEnabled) {
|
||||
// setup event listeners, they will take care of update the position in specific situations
|
||||
this.enableEventListeners();
|
||||
}
|
||||
|
||||
this.state.eventsEnabled = eventsEnabled;
|
||||
}
|
||||
|
||||
// We can't use class properties because they don't get listed in the
|
||||
// class prototype and break stuff like Sinon stubs
|
||||
update() {
|
||||
return update.call(this);
|
||||
}
|
||||
destroy() {
|
||||
return destroy.call(this);
|
||||
}
|
||||
enableEventListeners() {
|
||||
return enableEventListeners.call(this);
|
||||
}
|
||||
disableEventListeners() {
|
||||
return disableEventListeners.call(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule an update, it will run on the next UI update available
|
||||
* @method scheduleUpdate
|
||||
* @memberof Popper
|
||||
*/
|
||||
scheduleUpdate = () => requestAnimationFrame(this.update);
|
||||
|
||||
/**
|
||||
* Collection of utilities useful when writing custom modifiers.
|
||||
* Starting from version 1.7, this method is available only if you
|
||||
* include `popper-utils.js` before `popper.js`.
|
||||
*
|
||||
* **DEPRECATION**: This way to access PopperUtils is deprecated
|
||||
* and will be removed in v2! Use the PopperUtils module directly instead.
|
||||
* Due to the high instability of the methods contained in Utils, we can't
|
||||
* guarantee them to follow semver. Use them at your own risk!
|
||||
* @static
|
||||
* @private
|
||||
* @type {Object}
|
||||
* @deprecated since version 1.8
|
||||
* @member Utils
|
||||
* @memberof Popper
|
||||
*/
|
||||
static Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;
|
||||
|
||||
static placements = placements;
|
||||
|
||||
static Defaults = Defaults;
|
||||
}
|
||||
|
||||
/**
|
||||
* The `referenceObject` is an object that provides an interface compatible with Popper.js
|
||||
* and lets you use it as replacement of a real DOM node.<br />
|
||||
* You can use this method to position a popper relatively to a set of coordinates
|
||||
* in case you don't have a DOM node to use as reference.
|
||||
*
|
||||
* ```
|
||||
* new Popper(referenceObject, popperNode);
|
||||
* ```
|
||||
*
|
||||
* NB: This feature isn't supported in Internet Explorer 10
|
||||
* @name referenceObject
|
||||
* @property {Function} data.getBoundingClientRect
|
||||
* A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
|
||||
* @property {number} data.clientWidth
|
||||
* An ES6 getter that will return the width of the virtual reference element.
|
||||
* @property {number} data.clientHeight
|
||||
* An ES6 getter that will return the height of the virtual reference element.
|
||||
*/
|
||||
@ -0,0 +1,73 @@
|
||||
import modifiers from '../modifiers/index';
|
||||
|
||||
/**
|
||||
* Default options provided to Popper.js constructor.<br />
|
||||
* These can be overriden using the `options` argument of Popper.js.<br />
|
||||
* To override an option, simply pass as 3rd argument an object with the same
|
||||
* structure of this object, example:
|
||||
* ```
|
||||
* new Popper(ref, pop, {
|
||||
* modifiers: {
|
||||
* preventOverflow: { enabled: false }
|
||||
* }
|
||||
* })
|
||||
* ```
|
||||
* @type {Object}
|
||||
* @static
|
||||
* @memberof Popper
|
||||
*/
|
||||
export default {
|
||||
/**
|
||||
* Popper's placement
|
||||
* @prop {Popper.placements} placement='bottom'
|
||||
*/
|
||||
placement: 'bottom',
|
||||
|
||||
/**
|
||||
* Whether events (resize, scroll) are initially enabled
|
||||
* @prop {Boolean} eventsEnabled=true
|
||||
*/
|
||||
eventsEnabled: true,
|
||||
|
||||
/**
|
||||
* Set to true if you want to automatically remove the popper when
|
||||
* you call the `destroy` method.
|
||||
* @prop {Boolean} removeOnDestroy=false
|
||||
*/
|
||||
removeOnDestroy: false,
|
||||
|
||||
/**
|
||||
* Callback called when the popper is created.<br />
|
||||
* By default, is set to no-op.<br />
|
||||
* Access Popper.js instance with `data.instance`.
|
||||
* @prop {onCreate}
|
||||
*/
|
||||
onCreate: () => {},
|
||||
|
||||
/**
|
||||
* Callback called when the popper is updated, this callback is not called
|
||||
* on the initialization/creation of the popper, but only on subsequent
|
||||
* updates.<br />
|
||||
* By default, is set to no-op.<br />
|
||||
* Access Popper.js instance with `data.instance`.
|
||||
* @prop {onUpdate}
|
||||
*/
|
||||
onUpdate: () => {},
|
||||
|
||||
/**
|
||||
* List of modifiers used to modify the offsets before they are applied to the popper.
|
||||
* They provide most of the functionalities of Popper.js
|
||||
* @prop {modifiers}
|
||||
*/
|
||||
modifiers,
|
||||
};
|
||||
|
||||
/**
|
||||
* @callback onCreate
|
||||
* @param {dataObject} data
|
||||
*/
|
||||
|
||||
/**
|
||||
* @callback onUpdate
|
||||
* @param {dataObject} data
|
||||
*/
|
||||
@ -0,0 +1,29 @@
|
||||
import isModifierEnabled from '../utils/isModifierEnabled';
|
||||
import getSupportedPropertyName from '../utils/getSupportedPropertyName';
|
||||
|
||||
/**
|
||||
* Destroy the popper
|
||||
* @method
|
||||
* @memberof Popper
|
||||
*/
|
||||
export default function destroy() {
|
||||
this.state.isDestroyed = true;
|
||||
|
||||
// touch DOM only if `applyStyle` modifier is enabled
|
||||
if (isModifierEnabled(this.modifiers, 'applyStyle')) {
|
||||
this.popper.removeAttribute('x-placement');
|
||||
this.popper.style.left = '';
|
||||
this.popper.style.position = '';
|
||||
this.popper.style.top = '';
|
||||
this.popper.style[getSupportedPropertyName('transform')] = '';
|
||||
}
|
||||
|
||||
this.disableEventListeners();
|
||||
|
||||
// remove the popper if user explicity asked for the deletion on destroy
|
||||
// do not use `remove` because IE11 doesn't support it
|
||||
if (this.options.removeOnDestroy) {
|
||||
this.popper.parentNode.removeChild(this.popper);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import removeEventListeners from '../utils/removeEventListeners';
|
||||
|
||||
/**
|
||||
* It will remove resize/scroll events and won't recalculate popper position
|
||||
* when they are triggered. It also won't trigger onUpdate callback anymore,
|
||||
* unless you call `update` method manually.
|
||||
* @method
|
||||
* @memberof Popper
|
||||
*/
|
||||
export default function disableEventListeners() {
|
||||
if (this.state.eventsEnabled) {
|
||||
cancelAnimationFrame(this.scheduleUpdate);
|
||||
this.state = removeEventListeners(this.reference, this.state);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import setupEventListeners from '../utils/setupEventListeners';
|
||||
|
||||
/**
|
||||
* It will add resize/scroll events and start recalculating
|
||||
* position of the popper element when they are triggered.
|
||||
* @method
|
||||
* @memberof Popper
|
||||
*/
|
||||
export default function enableEventListeners() {
|
||||
if (!this.state.eventsEnabled) {
|
||||
this.state = setupEventListeners(
|
||||
this.reference,
|
||||
this.options,
|
||||
this.state,
|
||||
this.scheduleUpdate
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
/**
|
||||
* List of accepted placements to use as values of the `placement` option.<br />
|
||||
* Valid placements are:
|
||||
* - `auto`
|
||||
* - `top`
|
||||
* - `right`
|
||||
* - `bottom`
|
||||
* - `left`
|
||||
*
|
||||
* Each placement can have a variation from this list:
|
||||
* - `-start`
|
||||
* - `-end`
|
||||
*
|
||||
* Variations are interpreted easily if you think of them as the left to right
|
||||
* written languages. Horizontally (`top` and `bottom`), `start` is left and `end`
|
||||
* is right.<br />
|
||||
* Vertically (`left` and `right`), `start` is top and `end` is bottom.
|
||||
*
|
||||
* Some valid examples are:
|
||||
* - `top-end` (on top of reference, right aligned)
|
||||
* - `right-start` (on right of reference, top aligned)
|
||||
* - `bottom` (on bottom, centered)
|
||||
* - `auto-right` (on the side with more space available, alignment depends by placement)
|
||||
*
|
||||
* @static
|
||||
* @type {Array}
|
||||
* @enum {String}
|
||||
* @readonly
|
||||
* @method placements
|
||||
* @memberof Popper
|
||||
*/
|
||||
export default [
|
||||
'auto-start',
|
||||
'auto',
|
||||
'auto-end',
|
||||
'top-start',
|
||||
'top',
|
||||
'top-end',
|
||||
'right-start',
|
||||
'right',
|
||||
'right-end',
|
||||
'bottom-end',
|
||||
'bottom',
|
||||
'bottom-start',
|
||||
'left-end',
|
||||
'left',
|
||||
'left-start',
|
||||
];
|
||||
@ -0,0 +1,69 @@
|
||||
import computeAutoPlacement from '../utils/computeAutoPlacement';
|
||||
import getReferenceOffsets from '../utils/getReferenceOffsets';
|
||||
import getPopperOffsets from '../utils/getPopperOffsets';
|
||||
import runModifiers from '../utils/runModifiers';
|
||||
|
||||
/**
|
||||
* Updates the position of the popper, computing the new offsets and applying
|
||||
* the new style.<br />
|
||||
* Prefer `scheduleUpdate` over `update` because of performance reasons.
|
||||
* @method
|
||||
* @memberof Popper
|
||||
*/
|
||||
export default function update() {
|
||||
// if popper is destroyed, don't perform any further update
|
||||
if (this.state.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
let data = {
|
||||
instance: this,
|
||||
styles: {},
|
||||
arrowStyles: {},
|
||||
attributes: {},
|
||||
flipped: false,
|
||||
offsets: {},
|
||||
};
|
||||
|
||||
// compute reference element offsets
|
||||
data.offsets.reference = getReferenceOffsets(
|
||||
this.state,
|
||||
this.popper,
|
||||
this.reference
|
||||
);
|
||||
|
||||
// compute auto placement, store placement inside the data object,
|
||||
// modifiers will be able to edit `placement` if needed
|
||||
// and refer to originalPlacement to know the original value
|
||||
data.placement = computeAutoPlacement(
|
||||
this.options.placement,
|
||||
data.offsets.reference,
|
||||
this.popper,
|
||||
this.reference,
|
||||
this.options.modifiers.flip.boundariesElement,
|
||||
this.options.modifiers.flip.padding
|
||||
);
|
||||
|
||||
// store the computed placement inside `originalPlacement`
|
||||
data.originalPlacement = data.placement;
|
||||
|
||||
// compute the popper offsets
|
||||
data.offsets.popper = getPopperOffsets(
|
||||
this.popper,
|
||||
data.offsets.reference,
|
||||
data.placement
|
||||
);
|
||||
data.offsets.popper.position = 'absolute';
|
||||
|
||||
// run the modifiers
|
||||
data = runModifiers(this.modifiers, data);
|
||||
|
||||
// the first `update` will call `onCreate` callback
|
||||
// the other ones will call `onUpdate` callback
|
||||
if (!this.state.isCreated) {
|
||||
this.state.isCreated = true;
|
||||
this.options.onCreate(data);
|
||||
} else {
|
||||
this.options.onUpdate(data);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
import setStyles from '../utils/setStyles';
|
||||
import setAttributes from '../utils/setAttributes';
|
||||
import getReferenceOffsets from '../utils/getReferenceOffsets';
|
||||
import computeAutoPlacement from '../utils/computeAutoPlacement';
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by `update` method
|
||||
* @argument {Object} data.styles - List of style properties - values to apply to popper element
|
||||
* @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The same data object
|
||||
*/
|
||||
export default function applyStyle(data) {
|
||||
// any property present in `data.styles` will be applied to the popper,
|
||||
// in this way we can make the 3rd party modifiers add custom styles to it
|
||||
// Be aware, modifiers could override the properties defined in the previous
|
||||
// lines of this modifier!
|
||||
setStyles(data.instance.popper, data.styles);
|
||||
|
||||
// any property present in `data.attributes` will be applied to the popper,
|
||||
// they will be set as HTML attributes of the element
|
||||
setAttributes(data.instance.popper, data.attributes);
|
||||
|
||||
// if arrowElement is defined and arrowStyles has some properties
|
||||
if (data.arrowElement && Object.keys(data.arrowStyles).length) {
|
||||
setStyles(data.arrowElement, data.arrowStyles);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the x-placement attribute before everything else because it could be used
|
||||
* to add margins to the popper margins needs to be calculated to get the
|
||||
* correct popper offsets.
|
||||
* @method
|
||||
* @memberof Popper.modifiers
|
||||
* @param {HTMLElement} reference - The reference element used to position the popper
|
||||
* @param {HTMLElement} popper - The HTML element used as popper.
|
||||
* @param {Object} options - Popper.js options
|
||||
*/
|
||||
export function applyStyleOnLoad(
|
||||
reference,
|
||||
popper,
|
||||
options,
|
||||
modifierOptions,
|
||||
state
|
||||
) {
|
||||
// compute reference element offsets
|
||||
const referenceOffsets = getReferenceOffsets(state, popper, reference);
|
||||
|
||||
// compute auto placement, store placement inside the data object,
|
||||
// modifiers will be able to edit `placement` if needed
|
||||
// and refer to originalPlacement to know the original value
|
||||
const placement = computeAutoPlacement(
|
||||
options.placement,
|
||||
referenceOffsets,
|
||||
popper,
|
||||
reference,
|
||||
options.modifiers.flip.boundariesElement,
|
||||
options.modifiers.flip.padding
|
||||
);
|
||||
|
||||
popper.setAttribute('x-placement', placement);
|
||||
|
||||
// Apply `position` to popper before anything else because
|
||||
// without the position applied we can't guarantee correct computations
|
||||
setStyles(popper, { position: 'absolute' });
|
||||
|
||||
return options;
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
import getClientRect from '../utils/getClientRect';
|
||||
import getOuterSizes from '../utils/getOuterSizes';
|
||||
import isModifierRequired from '../utils/isModifierRequired';
|
||||
import getStyleComputedProperty from '../utils/getStyleComputedProperty';
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by update method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function arrow(data, options) {
|
||||
// arrow depends on keepTogether in order to work
|
||||
if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
|
||||
return data;
|
||||
}
|
||||
|
||||
let arrowElement = options.element;
|
||||
|
||||
// if arrowElement is a string, suppose it's a CSS selector
|
||||
if (typeof arrowElement === 'string') {
|
||||
arrowElement = data.instance.popper.querySelector(arrowElement);
|
||||
|
||||
// if arrowElement is not found, don't run the modifier
|
||||
if (!arrowElement) {
|
||||
return data;
|
||||
}
|
||||
} else {
|
||||
// if the arrowElement isn't a query selector we must check that the
|
||||
// provided DOM node is child of its popper node
|
||||
if (!data.instance.popper.contains(arrowElement)) {
|
||||
console.warn(
|
||||
'WARNING: `arrow.element` must be child of its popper element!'
|
||||
);
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
const placement = data.placement.split('-')[0];
|
||||
const { popper, reference } = data.offsets;
|
||||
const isVertical = ['left', 'right'].indexOf(placement) !== -1;
|
||||
|
||||
const len = isVertical ? 'height' : 'width';
|
||||
const sideCapitalized = isVertical ? 'Top' : 'Left';
|
||||
const side = sideCapitalized.toLowerCase();
|
||||
const altSide = isVertical ? 'left' : 'top';
|
||||
const opSide = isVertical ? 'bottom' : 'right';
|
||||
const arrowElementSize = getOuterSizes(arrowElement)[len];
|
||||
|
||||
//
|
||||
// extends keepTogether behavior making sure the popper and its
|
||||
// reference have enough pixels in conjuction
|
||||
//
|
||||
|
||||
// top/left side
|
||||
if (reference[opSide] - arrowElementSize < popper[side]) {
|
||||
data.offsets.popper[side] -=
|
||||
popper[side] - (reference[opSide] - arrowElementSize);
|
||||
}
|
||||
// bottom/right side
|
||||
if (reference[side] + arrowElementSize > popper[opSide]) {
|
||||
data.offsets.popper[side] +=
|
||||
reference[side] + arrowElementSize - popper[opSide];
|
||||
}
|
||||
data.offsets.popper = getClientRect(data.offsets.popper);
|
||||
|
||||
// compute center of the popper
|
||||
const center = reference[side] + reference[len] / 2 - arrowElementSize / 2;
|
||||
|
||||
// Compute the sideValue using the updated popper offsets
|
||||
// take popper margin in account because we don't have this info available
|
||||
const css = getStyleComputedProperty(data.instance.popper);
|
||||
const popperMarginSide = parseFloat(css[`margin${sideCapitalized}`], 10);
|
||||
const popperBorderSide = parseFloat(css[`border${sideCapitalized}Width`], 10);
|
||||
let sideValue =
|
||||
center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
|
||||
|
||||
// prevent arrowElement from being placed not contiguously to its popper
|
||||
sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
|
||||
|
||||
data.arrowElement = arrowElement;
|
||||
data.offsets.arrow = {
|
||||
[side]: Math.round(sideValue),
|
||||
[altSide]: '', // make sure to unset any eventual altSide value from the DOM node
|
||||
};
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
import getSupportedPropertyName from '../utils/getSupportedPropertyName';
|
||||
import find from '../utils/find';
|
||||
import getOffsetParent from '../utils/getOffsetParent';
|
||||
import getBoundingClientRect from '../utils/getBoundingClientRect';
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by `update` method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function computeStyle(data, options) {
|
||||
const { x, y } = options;
|
||||
const { popper } = data.offsets;
|
||||
|
||||
// Remove this legacy support in Popper.js v2
|
||||
const legacyGpuAccelerationOption = find(
|
||||
data.instance.modifiers,
|
||||
modifier => modifier.name === 'applyStyle'
|
||||
).gpuAcceleration;
|
||||
if (legacyGpuAccelerationOption !== undefined) {
|
||||
console.warn(
|
||||
'WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!'
|
||||
);
|
||||
}
|
||||
const gpuAcceleration =
|
||||
legacyGpuAccelerationOption !== undefined
|
||||
? legacyGpuAccelerationOption
|
||||
: options.gpuAcceleration;
|
||||
|
||||
const offsetParent = getOffsetParent(data.instance.popper);
|
||||
const offsetParentRect = getBoundingClientRect(offsetParent);
|
||||
|
||||
// Styles
|
||||
const styles = {
|
||||
position: popper.position,
|
||||
};
|
||||
|
||||
// floor sides to avoid blurry text
|
||||
const offsets = {
|
||||
left: Math.floor(popper.left),
|
||||
top: Math.floor(popper.top),
|
||||
bottom: Math.floor(popper.bottom),
|
||||
right: Math.floor(popper.right),
|
||||
};
|
||||
|
||||
const sideA = x === 'bottom' ? 'top' : 'bottom';
|
||||
const sideB = y === 'right' ? 'left' : 'right';
|
||||
|
||||
// if gpuAcceleration is set to `true` and transform is supported,
|
||||
// we use `translate3d` to apply the position to the popper we
|
||||
// automatically use the supported prefixed version if needed
|
||||
const prefixedProperty = getSupportedPropertyName('transform');
|
||||
|
||||
// now, let's make a step back and look at this code closely (wtf?)
|
||||
// If the content of the popper grows once it's been positioned, it
|
||||
// may happen that the popper gets misplaced because of the new content
|
||||
// overflowing its reference element
|
||||
// To avoid this problem, we provide two options (x and y), which allow
|
||||
// the consumer to define the offset origin.
|
||||
// If we position a popper on top of a reference element, we can set
|
||||
// `x` to `top` to make the popper grow towards its top instead of
|
||||
// its bottom.
|
||||
let left, top;
|
||||
if (sideA === 'bottom') {
|
||||
top = -offsetParentRect.height + offsets.bottom;
|
||||
} else {
|
||||
top = offsets.top;
|
||||
}
|
||||
if (sideB === 'right') {
|
||||
left = -offsetParentRect.width + offsets.right;
|
||||
} else {
|
||||
left = offsets.left;
|
||||
}
|
||||
if (gpuAcceleration && prefixedProperty) {
|
||||
styles[prefixedProperty] = `translate3d(${left}px, ${top}px, 0)`;
|
||||
styles[sideA] = 0;
|
||||
styles[sideB] = 0;
|
||||
styles.willChange = 'transform';
|
||||
} else {
|
||||
// othwerise, we use the standard `top`, `left`, `bottom` and `right` properties
|
||||
const invertTop = sideA === 'bottom' ? -1 : 1;
|
||||
const invertLeft = sideB === 'right' ? -1 : 1;
|
||||
styles[sideA] = top * invertTop;
|
||||
styles[sideB] = left * invertLeft;
|
||||
styles.willChange = `${sideA}, ${sideB}`;
|
||||
}
|
||||
|
||||
// Attributes
|
||||
const attributes = {
|
||||
'x-placement': data.placement,
|
||||
};
|
||||
|
||||
// Update `data` attributes, styles and arrowStyles
|
||||
data.attributes = { ...attributes, ...data.attributes };
|
||||
data.styles = { ...styles, ...data.styles };
|
||||
data.arrowStyles = { ...data.offsets.arrow, ...data.arrowStyles };
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,133 @@
|
||||
import getOppositePlacement from '../utils/getOppositePlacement';
|
||||
import getOppositeVariation from '../utils/getOppositeVariation';
|
||||
import getPopperOffsets from '../utils/getPopperOffsets';
|
||||
import runModifiers from '../utils/runModifiers';
|
||||
import getBoundaries from '../utils/getBoundaries';
|
||||
import isModifierEnabled from '../utils/isModifierEnabled';
|
||||
import clockwise from '../utils/clockwise';
|
||||
|
||||
const BEHAVIORS = {
|
||||
FLIP: 'flip',
|
||||
CLOCKWISE: 'clockwise',
|
||||
COUNTERCLOCKWISE: 'counterclockwise',
|
||||
};
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by update method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function flip(data, options) {
|
||||
// if `inner` modifier is enabled, we can't use the `flip` modifier
|
||||
if (isModifierEnabled(data.instance.modifiers, 'inner')) {
|
||||
return data;
|
||||
}
|
||||
|
||||
if (data.flipped && data.placement === data.originalPlacement) {
|
||||
// seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
|
||||
return data;
|
||||
}
|
||||
|
||||
const boundaries = getBoundaries(
|
||||
data.instance.popper,
|
||||
data.instance.reference,
|
||||
options.padding,
|
||||
options.boundariesElement
|
||||
);
|
||||
|
||||
let placement = data.placement.split('-')[0];
|
||||
let placementOpposite = getOppositePlacement(placement);
|
||||
let variation = data.placement.split('-')[1] || '';
|
||||
|
||||
let flipOrder = [];
|
||||
|
||||
switch (options.behavior) {
|
||||
case BEHAVIORS.FLIP:
|
||||
flipOrder = [placement, placementOpposite];
|
||||
break;
|
||||
case BEHAVIORS.CLOCKWISE:
|
||||
flipOrder = clockwise(placement);
|
||||
break;
|
||||
case BEHAVIORS.COUNTERCLOCKWISE:
|
||||
flipOrder = clockwise(placement, true);
|
||||
break;
|
||||
default:
|
||||
flipOrder = options.behavior;
|
||||
}
|
||||
|
||||
flipOrder.forEach((step, index) => {
|
||||
if (placement !== step || flipOrder.length === index + 1) {
|
||||
return data;
|
||||
}
|
||||
|
||||
placement = data.placement.split('-')[0];
|
||||
placementOpposite = getOppositePlacement(placement);
|
||||
|
||||
const popperOffsets = data.offsets.popper;
|
||||
const refOffsets = data.offsets.reference;
|
||||
|
||||
// using floor because the reference offsets may contain decimals we are not going to consider here
|
||||
const floor = Math.floor;
|
||||
const overlapsRef =
|
||||
(placement === 'left' &&
|
||||
floor(popperOffsets.right) > floor(refOffsets.left)) ||
|
||||
(placement === 'right' &&
|
||||
floor(popperOffsets.left) < floor(refOffsets.right)) ||
|
||||
(placement === 'top' &&
|
||||
floor(popperOffsets.bottom) > floor(refOffsets.top)) ||
|
||||
(placement === 'bottom' &&
|
||||
floor(popperOffsets.top) < floor(refOffsets.bottom));
|
||||
|
||||
const overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
|
||||
const overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
|
||||
const overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
|
||||
const overflowsBottom =
|
||||
floor(popperOffsets.bottom) > floor(boundaries.bottom);
|
||||
|
||||
const overflowsBoundaries =
|
||||
(placement === 'left' && overflowsLeft) ||
|
||||
(placement === 'right' && overflowsRight) ||
|
||||
(placement === 'top' && overflowsTop) ||
|
||||
(placement === 'bottom' && overflowsBottom);
|
||||
|
||||
// flip the variation if required
|
||||
const isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
|
||||
const flippedVariation =
|
||||
!!options.flipVariations &&
|
||||
((isVertical && variation === 'start' && overflowsLeft) ||
|
||||
(isVertical && variation === 'end' && overflowsRight) ||
|
||||
(!isVertical && variation === 'start' && overflowsTop) ||
|
||||
(!isVertical && variation === 'end' && overflowsBottom));
|
||||
|
||||
if (overlapsRef || overflowsBoundaries || flippedVariation) {
|
||||
// this boolean to detect any flip loop
|
||||
data.flipped = true;
|
||||
|
||||
if (overlapsRef || overflowsBoundaries) {
|
||||
placement = flipOrder[index + 1];
|
||||
}
|
||||
|
||||
if (flippedVariation) {
|
||||
variation = getOppositeVariation(variation);
|
||||
}
|
||||
|
||||
data.placement = placement + (variation ? '-' + variation : '');
|
||||
|
||||
// this object contains `position`, we want to preserve it along with
|
||||
// any additional property we may add in the future
|
||||
data.offsets.popper = {
|
||||
...data.offsets.popper,
|
||||
...getPopperOffsets(
|
||||
data.instance.popper,
|
||||
data.offsets.reference,
|
||||
data.placement
|
||||
),
|
||||
};
|
||||
|
||||
data = runModifiers(data.instance.modifiers, data, 'flip');
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import isModifierRequired from '../utils/isModifierRequired';
|
||||
import find from '../utils/find';
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by update method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function hide(data) {
|
||||
if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
|
||||
return data;
|
||||
}
|
||||
|
||||
const refRect = data.offsets.reference;
|
||||
const bound = find(
|
||||
data.instance.modifiers,
|
||||
modifier => modifier.name === 'preventOverflow'
|
||||
).boundaries;
|
||||
|
||||
if (
|
||||
refRect.bottom < bound.top ||
|
||||
refRect.left > bound.right ||
|
||||
refRect.top > bound.bottom ||
|
||||
refRect.right < bound.left
|
||||
) {
|
||||
// Avoid unnecessary DOM access if visibility hasn't changed
|
||||
if (data.hide === true) {
|
||||
return data;
|
||||
}
|
||||
|
||||
data.hide = true;
|
||||
data.attributes['x-out-of-boundaries'] = '';
|
||||
} else {
|
||||
// Avoid unnecessary DOM access if visibility hasn't changed
|
||||
if (data.hide === false) {
|
||||
return data;
|
||||
}
|
||||
|
||||
data.hide = false;
|
||||
data.attributes['x-out-of-boundaries'] = false;
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,353 @@
|
||||
import applyStyle, { applyStyleOnLoad } from './applyStyle';
|
||||
import computeStyle from './computeStyle';
|
||||
import arrow from './arrow';
|
||||
import flip from './flip';
|
||||
import keepTogether from './keepTogether';
|
||||
import offset from './offset';
|
||||
import preventOverflow from './preventOverflow';
|
||||
import shift from './shift';
|
||||
import hide from './hide';
|
||||
import inner from './inner';
|
||||
|
||||
/**
|
||||
* Modifier function, each modifier can have a function of this type assigned
|
||||
* to its `fn` property.<br />
|
||||
* These functions will be called on each update, this means that you must
|
||||
* make sure they are performant enough to avoid performance bottlenecks.
|
||||
*
|
||||
* @function ModifierFn
|
||||
* @argument {dataObject} data - The data object generated by `update` method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {dataObject} The data object, properly modified
|
||||
*/
|
||||
|
||||
/**
|
||||
* Modifiers are plugins used to alter the behavior of your poppers.<br />
|
||||
* Popper.js uses a set of 9 modifiers to provide all the basic functionalities
|
||||
* needed by the library.
|
||||
*
|
||||
* Usually you don't want to override the `order`, `fn` and `onLoad` props.
|
||||
* All the other properties are configurations that could be tweaked.
|
||||
* @namespace modifiers
|
||||
*/
|
||||
export default {
|
||||
/**
|
||||
* Modifier used to shift the popper on the start or end of its reference
|
||||
* element.<br />
|
||||
* It will read the variation of the `placement` property.<br />
|
||||
* It can be one either `-end` or `-start`.
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
shift: {
|
||||
/** @prop {number} order=100 - Index used to define the order of execution */
|
||||
order: 100,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: shift,
|
||||
},
|
||||
|
||||
/**
|
||||
* The `offset` modifier can shift your popper on both its axis.
|
||||
*
|
||||
* It accepts the following units:
|
||||
* - `px` or unitless, interpreted as pixels
|
||||
* - `%` or `%r`, percentage relative to the length of the reference element
|
||||
* - `%p`, percentage relative to the length of the popper element
|
||||
* - `vw`, CSS viewport width unit
|
||||
* - `vh`, CSS viewport height unit
|
||||
*
|
||||
* For length is intended the main axis relative to the placement of the popper.<br />
|
||||
* This means that if the placement is `top` or `bottom`, the length will be the
|
||||
* `width`. In case of `left` or `right`, it will be the height.
|
||||
*
|
||||
* You can provide a single value (as `Number` or `String`), or a pair of values
|
||||
* as `String` divided by a comma or one (or more) white spaces.<br />
|
||||
* The latter is a deprecated method because it leads to confusion and will be
|
||||
* removed in v2.<br />
|
||||
* Additionally, it accepts additions and subtractions between different units.
|
||||
* Note that multiplications and divisions aren't supported.
|
||||
*
|
||||
* Valid examples are:
|
||||
* ```
|
||||
* 10
|
||||
* '10%'
|
||||
* '10, 10'
|
||||
* '10%, 10'
|
||||
* '10 + 10%'
|
||||
* '10 - 5vh + 3%'
|
||||
* '-10px + 5vh, 5px - 6%'
|
||||
* ```
|
||||
* > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
|
||||
* > with their reference element, unfortunately, you will have to disable the `flip` modifier.
|
||||
* > More on this [reading this issue](https://github.com/FezVrasta/popper.js/issues/373)
|
||||
*
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
offset: {
|
||||
/** @prop {number} order=200 - Index used to define the order of execution */
|
||||
order: 200,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: offset,
|
||||
/** @prop {Number|String} offset=0
|
||||
* The offset value as described in the modifier description
|
||||
*/
|
||||
offset: 0,
|
||||
},
|
||||
|
||||
/**
|
||||
* Modifier used to prevent the popper from being positioned outside the boundary.
|
||||
*
|
||||
* An scenario exists where the reference itself is not within the boundaries.<br />
|
||||
* We can say it has "escaped the boundaries" — or just "escaped".<br />
|
||||
* In this case we need to decide whether the popper should either:
|
||||
*
|
||||
* - detach from the reference and remain "trapped" in the boundaries, or
|
||||
* - if it should ignore the boundary and "escape with its reference"
|
||||
*
|
||||
* When `escapeWithReference` is set to`true` and reference is completely
|
||||
* outside its boundaries, the popper will overflow (or completely leave)
|
||||
* the boundaries in order to remain attached to the edge of the reference.
|
||||
*
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
preventOverflow: {
|
||||
/** @prop {number} order=300 - Index used to define the order of execution */
|
||||
order: 300,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: preventOverflow,
|
||||
/**
|
||||
* @prop {Array} [priority=['left','right','top','bottom']]
|
||||
* Popper will try to prevent overflow following these priorities by default,
|
||||
* then, it could overflow on the left and on top of the `boundariesElement`
|
||||
*/
|
||||
priority: ['left', 'right', 'top', 'bottom'],
|
||||
/**
|
||||
* @prop {number} padding=5
|
||||
* Amount of pixel used to define a minimum distance between the boundaries
|
||||
* and the popper this makes sure the popper has always a little padding
|
||||
* between the edges of its container
|
||||
*/
|
||||
padding: 5,
|
||||
/**
|
||||
* @prop {String|HTMLElement} boundariesElement='scrollParent'
|
||||
* Boundaries used by the modifier, can be `scrollParent`, `window`,
|
||||
* `viewport` or any DOM element.
|
||||
*/
|
||||
boundariesElement: 'scrollParent',
|
||||
},
|
||||
|
||||
/**
|
||||
* Modifier used to make sure the reference and its popper stay near eachothers
|
||||
* without leaving any gap between the two. Expecially useful when the arrow is
|
||||
* enabled and you want to assure it to point to its reference element.
|
||||
* It cares only about the first axis, you can still have poppers with margin
|
||||
* between the popper and its reference element.
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
keepTogether: {
|
||||
/** @prop {number} order=400 - Index used to define the order of execution */
|
||||
order: 400,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: keepTogether,
|
||||
},
|
||||
|
||||
/**
|
||||
* This modifier is used to move the `arrowElement` of the popper to make
|
||||
* sure it is positioned between the reference element and its popper element.
|
||||
* It will read the outer size of the `arrowElement` node to detect how many
|
||||
* pixels of conjuction are needed.
|
||||
*
|
||||
* It has no effect if no `arrowElement` is provided.
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
arrow: {
|
||||
/** @prop {number} order=500 - Index used to define the order of execution */
|
||||
order: 500,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: arrow,
|
||||
/** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
|
||||
element: '[x-arrow]',
|
||||
},
|
||||
|
||||
/**
|
||||
* Modifier used to flip the popper's placement when it starts to overlap its
|
||||
* reference element.
|
||||
*
|
||||
* Requires the `preventOverflow` modifier before it in order to work.
|
||||
*
|
||||
* **NOTE:** this modifier will interrupt the current update cycle and will
|
||||
* restart it if it detects the need to flip the placement.
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
flip: {
|
||||
/** @prop {number} order=600 - Index used to define the order of execution */
|
||||
order: 600,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: flip,
|
||||
/**
|
||||
* @prop {String|Array} behavior='flip'
|
||||
* The behavior used to change the popper's placement. It can be one of
|
||||
* `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
|
||||
* placements (with optional variations).
|
||||
*/
|
||||
behavior: 'flip',
|
||||
/**
|
||||
* @prop {number} padding=5
|
||||
* The popper will flip if it hits the edges of the `boundariesElement`
|
||||
*/
|
||||
padding: 5,
|
||||
/**
|
||||
* @prop {String|HTMLElement} boundariesElement='viewport'
|
||||
* The element which will define the boundaries of the popper position,
|
||||
* the popper will never be placed outside of the defined boundaries
|
||||
* (except if keepTogether is enabled)
|
||||
*/
|
||||
boundariesElement: 'viewport',
|
||||
},
|
||||
|
||||
/**
|
||||
* Modifier used to make the popper flow toward the inner of the reference element.
|
||||
* By default, when this modifier is disabled, the popper will be placed outside
|
||||
* the reference element.
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
inner: {
|
||||
/** @prop {number} order=700 - Index used to define the order of execution */
|
||||
order: 700,
|
||||
/** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
|
||||
enabled: false,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: inner,
|
||||
},
|
||||
|
||||
/**
|
||||
* Modifier used to hide the popper when its reference element is outside of the
|
||||
* popper boundaries. It will set a `x-out-of-boundaries` attribute which can
|
||||
* be used to hide with a CSS selector the popper when its reference is
|
||||
* out of boundaries.
|
||||
*
|
||||
* Requires the `preventOverflow` modifier before it in order to work.
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
hide: {
|
||||
/** @prop {number} order=800 - Index used to define the order of execution */
|
||||
order: 800,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: hide,
|
||||
},
|
||||
|
||||
/**
|
||||
* Computes the style that will be applied to the popper element to gets
|
||||
* properly positioned.
|
||||
*
|
||||
* Note that this modifier will not touch the DOM, it just prepares the styles
|
||||
* so that `applyStyle` modifier can apply it. This separation is useful
|
||||
* in case you need to replace `applyStyle` with a custom implementation.
|
||||
*
|
||||
* This modifier has `850` as `order` value to maintain backward compatibility
|
||||
* with previous versions of Popper.js. Expect the modifiers ordering method
|
||||
* to change in future major versions of the library.
|
||||
*
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
computeStyle: {
|
||||
/** @prop {number} order=850 - Index used to define the order of execution */
|
||||
order: 850,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: computeStyle,
|
||||
/**
|
||||
* @prop {Boolean} gpuAcceleration=true
|
||||
* If true, it uses the CSS 3d transformation to position the popper.
|
||||
* Otherwise, it will use the `top` and `left` properties.
|
||||
*/
|
||||
gpuAcceleration: true,
|
||||
/**
|
||||
* @prop {string} [x='bottom']
|
||||
* Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
|
||||
* Change this if your popper should grow in a direction different from `bottom`
|
||||
*/
|
||||
x: 'bottom',
|
||||
/**
|
||||
* @prop {string} [x='left']
|
||||
* Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
|
||||
* Change this if your popper should grow in a direction different from `right`
|
||||
*/
|
||||
y: 'right',
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies the computed styles to the popper element.
|
||||
*
|
||||
* All the DOM manipulations are limited to this modifier. This is useful in case
|
||||
* you want to integrate Popper.js inside a framework or view library and you
|
||||
* want to delegate all the DOM manipulations to it.
|
||||
*
|
||||
* Note that if you disable this modifier, you must make sure the popper element
|
||||
* has its position set to `absolute` before Popper.js can do its work!
|
||||
*
|
||||
* Just disable this modifier and define you own to achieve the desired effect.
|
||||
*
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
*/
|
||||
applyStyle: {
|
||||
/** @prop {number} order=900 - Index used to define the order of execution */
|
||||
order: 900,
|
||||
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
||||
enabled: true,
|
||||
/** @prop {ModifierFn} */
|
||||
fn: applyStyle,
|
||||
/** @prop {Function} */
|
||||
onLoad: applyStyleOnLoad,
|
||||
/**
|
||||
* @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
|
||||
* @prop {Boolean} gpuAcceleration=true
|
||||
* If true, it uses the CSS 3d transformation to position the popper.
|
||||
* Otherwise, it will use the `top` and `left` properties.
|
||||
*/
|
||||
gpuAcceleration: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* The `dataObject` is an object containing all the informations used by Popper.js
|
||||
* this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
|
||||
* @name dataObject
|
||||
* @property {Object} data.instance The Popper.js instance
|
||||
* @property {String} data.placement Placement applied to popper
|
||||
* @property {String} data.originalPlacement Placement originally defined on init
|
||||
* @property {Boolean} data.flipped True if popper has been flipped by flip modifier
|
||||
* @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
|
||||
* @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
|
||||
* @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
|
||||
* @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`)
|
||||
* @property {Object} data.boundaries Offsets of the popper boundaries
|
||||
* @property {Object} data.offsets The measurements of popper, reference and arrow elements.
|
||||
* @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
|
||||
* @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
|
||||
* @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
|
||||
*/
|
||||
@ -0,0 +1,27 @@
|
||||
import getClientRect from '../utils/getClientRect';
|
||||
import getOppositePlacement from '../utils/getOppositePlacement';
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by `update` method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function inner(data) {
|
||||
const placement = data.placement;
|
||||
const basePlacement = placement.split('-')[0];
|
||||
const { popper, reference } = data.offsets;
|
||||
const isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
|
||||
|
||||
const subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
|
||||
|
||||
popper[isHoriz ? 'left' : 'top'] =
|
||||
reference[basePlacement] -
|
||||
(subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
|
||||
|
||||
data.placement = getOppositePlacement(placement);
|
||||
data.offsets.popper = getClientRect(popper);
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by update method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function keepTogether(data) {
|
||||
const { popper, reference } = data.offsets;
|
||||
const placement = data.placement.split('-')[0];
|
||||
const floor = Math.floor;
|
||||
const isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
|
||||
const side = isVertical ? 'right' : 'bottom';
|
||||
const opSide = isVertical ? 'left' : 'top';
|
||||
const measurement = isVertical ? 'width' : 'height';
|
||||
|
||||
if (popper[side] < floor(reference[opSide])) {
|
||||
data.offsets.popper[opSide] =
|
||||
floor(reference[opSide]) - popper[measurement];
|
||||
}
|
||||
if (popper[opSide] > floor(reference[side])) {
|
||||
data.offsets.popper[opSide] = floor(reference[side]);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,194 @@
|
||||
import isNumeric from '../utils/isNumeric';
|
||||
import getClientRect from '../utils/getClientRect';
|
||||
import find from '../utils/find';
|
||||
|
||||
/**
|
||||
* Converts a string containing value + unit into a px value number
|
||||
* @function
|
||||
* @memberof {modifiers~offset}
|
||||
* @private
|
||||
* @argument {String} str - Value + unit string
|
||||
* @argument {String} measurement - `height` or `width`
|
||||
* @argument {Object} popperOffsets
|
||||
* @argument {Object} referenceOffsets
|
||||
* @returns {Number|String}
|
||||
* Value in pixels, or original string if no values were extracted
|
||||
*/
|
||||
export function toValue(str, measurement, popperOffsets, referenceOffsets) {
|
||||
// separate value from unit
|
||||
const split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
|
||||
const value = +split[1];
|
||||
const unit = split[2];
|
||||
|
||||
// If it's not a number it's an operator, I guess
|
||||
if (!value) {
|
||||
return str;
|
||||
}
|
||||
|
||||
if (unit.indexOf('%') === 0) {
|
||||
let element;
|
||||
switch (unit) {
|
||||
case '%p':
|
||||
element = popperOffsets;
|
||||
break;
|
||||
case '%':
|
||||
case '%r':
|
||||
default:
|
||||
element = referenceOffsets;
|
||||
}
|
||||
|
||||
const rect = getClientRect(element);
|
||||
return rect[measurement] / 100 * value;
|
||||
} else if (unit === 'vh' || unit === 'vw') {
|
||||
// if is a vh or vw, we calculate the size based on the viewport
|
||||
let size;
|
||||
if (unit === 'vh') {
|
||||
size = Math.max(
|
||||
document.documentElement.clientHeight,
|
||||
window.innerHeight || 0
|
||||
);
|
||||
} else {
|
||||
size = Math.max(
|
||||
document.documentElement.clientWidth,
|
||||
window.innerWidth || 0
|
||||
);
|
||||
}
|
||||
return size / 100 * value;
|
||||
} else {
|
||||
// if is an explicit pixel unit, we get rid of the unit and keep the value
|
||||
// if is an implicit unit, it's px, and we return just the value
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse an `offset` string to extrapolate `x` and `y` numeric offsets.
|
||||
* @function
|
||||
* @memberof {modifiers~offset}
|
||||
* @private
|
||||
* @argument {String} offset
|
||||
* @argument {Object} popperOffsets
|
||||
* @argument {Object} referenceOffsets
|
||||
* @argument {String} basePlacement
|
||||
* @returns {Array} a two cells array with x and y offsets in numbers
|
||||
*/
|
||||
export function parseOffset(
|
||||
offset,
|
||||
popperOffsets,
|
||||
referenceOffsets,
|
||||
basePlacement
|
||||
) {
|
||||
const offsets = [0, 0];
|
||||
|
||||
// Use height if placement is left or right and index is 0 otherwise use width
|
||||
// in this way the first offset will use an axis and the second one
|
||||
// will use the other one
|
||||
const useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;
|
||||
|
||||
// Split the offset string to obtain a list of values and operands
|
||||
// The regex addresses values with the plus or minus sign in front (+10, -20, etc)
|
||||
const fragments = offset.split(/(\+|\-)/).map(frag => frag.trim());
|
||||
|
||||
// Detect if the offset string contains a pair of values or a single one
|
||||
// they could be separated by comma or space
|
||||
const divider = fragments.indexOf(
|
||||
find(fragments, frag => frag.search(/,|\s/) !== -1)
|
||||
);
|
||||
|
||||
if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
|
||||
console.warn(
|
||||
'Offsets separated by white space(s) are deprecated, use a comma (,) instead.'
|
||||
);
|
||||
}
|
||||
|
||||
// If divider is found, we divide the list of values and operands to divide
|
||||
// them by ofset X and Y.
|
||||
const splitRegex = /\s*,\s*|\s+/;
|
||||
let ops = divider !== -1
|
||||
? [
|
||||
fragments
|
||||
.slice(0, divider)
|
||||
.concat([fragments[divider].split(splitRegex)[0]]),
|
||||
[fragments[divider].split(splitRegex)[1]].concat(
|
||||
fragments.slice(divider + 1)
|
||||
),
|
||||
]
|
||||
: [fragments];
|
||||
|
||||
// Convert the values with units to absolute pixels to allow our computations
|
||||
ops = ops.map((op, index) => {
|
||||
// Most of the units rely on the orientation of the popper
|
||||
const measurement = (index === 1 ? !useHeight : useHeight)
|
||||
? 'height'
|
||||
: 'width';
|
||||
let mergeWithPrevious = false;
|
||||
return (
|
||||
op
|
||||
// This aggregates any `+` or `-` sign that aren't considered operators
|
||||
// e.g.: 10 + +5 => [10, +, +5]
|
||||
.reduce((a, b) => {
|
||||
if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
|
||||
a[a.length - 1] = b;
|
||||
mergeWithPrevious = true;
|
||||
return a;
|
||||
} else if (mergeWithPrevious) {
|
||||
a[a.length - 1] += b;
|
||||
mergeWithPrevious = false;
|
||||
return a;
|
||||
} else {
|
||||
return a.concat(b);
|
||||
}
|
||||
}, [])
|
||||
// Here we convert the string values into number values (in px)
|
||||
.map(str => toValue(str, measurement, popperOffsets, referenceOffsets))
|
||||
);
|
||||
});
|
||||
|
||||
// Loop trough the offsets arrays and execute the operations
|
||||
ops.forEach((op, index) => {
|
||||
op.forEach((frag, index2) => {
|
||||
if (isNumeric(frag)) {
|
||||
offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
return offsets;
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by update method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @argument {Number|String} options.offset=0
|
||||
* The offset value as described in the modifier description
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function offset(data, { offset }) {
|
||||
const { placement, offsets: { popper, reference } } = data;
|
||||
const basePlacement = placement.split('-')[0];
|
||||
|
||||
let offsets;
|
||||
if (isNumeric(+offset)) {
|
||||
offsets = [+offset, 0];
|
||||
} else {
|
||||
offsets = parseOffset(offset, popper, reference, basePlacement);
|
||||
}
|
||||
|
||||
if (basePlacement === 'left') {
|
||||
popper.top += offsets[0];
|
||||
popper.left -= offsets[1];
|
||||
} else if (basePlacement === 'right') {
|
||||
popper.top += offsets[0];
|
||||
popper.left += offsets[1];
|
||||
} else if (basePlacement === 'top') {
|
||||
popper.left += offsets[0];
|
||||
popper.top -= offsets[1];
|
||||
} else if (basePlacement === 'bottom') {
|
||||
popper.left += offsets[0];
|
||||
popper.top += offsets[1];
|
||||
}
|
||||
|
||||
data.popper = popper;
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
import getOffsetParent from '../utils/getOffsetParent';
|
||||
import getBoundaries from '../utils/getBoundaries';
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by `update` method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function preventOverflow(data, options) {
|
||||
let boundariesElement =
|
||||
options.boundariesElement || getOffsetParent(data.instance.popper);
|
||||
|
||||
// If offsetParent is the reference element, we really want to
|
||||
// go one step up and use the next offsetParent as reference to
|
||||
// avoid to make this modifier completely useless and look like broken
|
||||
if (data.instance.reference === boundariesElement) {
|
||||
boundariesElement = getOffsetParent(boundariesElement);
|
||||
}
|
||||
|
||||
const boundaries = getBoundaries(
|
||||
data.instance.popper,
|
||||
data.instance.reference,
|
||||
options.padding,
|
||||
boundariesElement
|
||||
);
|
||||
options.boundaries = boundaries;
|
||||
|
||||
const order = options.priority;
|
||||
let popper = data.offsets.popper;
|
||||
|
||||
const check = {
|
||||
primary(placement) {
|
||||
let value = popper[placement];
|
||||
if (
|
||||
popper[placement] < boundaries[placement] &&
|
||||
!options.escapeWithReference
|
||||
) {
|
||||
value = Math.max(popper[placement], boundaries[placement]);
|
||||
}
|
||||
return { [placement]: value };
|
||||
},
|
||||
secondary(placement) {
|
||||
const mainSide = placement === 'right' ? 'left' : 'top';
|
||||
let value = popper[mainSide];
|
||||
if (
|
||||
popper[placement] > boundaries[placement] &&
|
||||
!options.escapeWithReference
|
||||
) {
|
||||
value = Math.min(
|
||||
popper[mainSide],
|
||||
boundaries[placement] -
|
||||
(placement === 'right' ? popper.width : popper.height)
|
||||
);
|
||||
}
|
||||
return { [mainSide]: value };
|
||||
},
|
||||
};
|
||||
|
||||
order.forEach(placement => {
|
||||
const side = ['left', 'top'].indexOf(placement) !== -1
|
||||
? 'primary'
|
||||
: 'secondary';
|
||||
popper = { ...popper, ...check[side](placement) };
|
||||
});
|
||||
|
||||
data.offsets.popper = popper;
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* @function
|
||||
* @memberof Modifiers
|
||||
* @argument {Object} data - The data object generated by `update` method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function shift(data) {
|
||||
const placement = data.placement;
|
||||
const basePlacement = placement.split('-')[0];
|
||||
const shiftvariation = placement.split('-')[1];
|
||||
|
||||
// if shift shiftvariation is specified, run the modifier
|
||||
if (shiftvariation) {
|
||||
const { reference, popper } = data.offsets;
|
||||
const isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
|
||||
const side = isVertical ? 'left' : 'top';
|
||||
const measurement = isVertical ? 'width' : 'height';
|
||||
|
||||
const shiftOffsets = {
|
||||
start: { [side]: reference[side] },
|
||||
end: {
|
||||
[side]: reference[side] + reference[measurement] - popper[measurement],
|
||||
},
|
||||
};
|
||||
|
||||
data.offsets.popper = { ...popper, ...shiftOffsets[shiftvariation] };
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import placements from '../methods/placements';
|
||||
|
||||
// Get rid of `auto` `auto-start` and `auto-end`
|
||||
const validPlacements = placements.slice(3);
|
||||
|
||||
/**
|
||||
* Given an initial placement, returns all the subsequent placements
|
||||
* clockwise (or counter-clockwise).
|
||||
*
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {String} placement - A valid placement (it accepts variations)
|
||||
* @argument {Boolean} counter - Set to true to walk the placements counterclockwise
|
||||
* @returns {Array} placements including their variations
|
||||
*/
|
||||
export default function clockwise(placement, counter = false) {
|
||||
const index = validPlacements.indexOf(placement);
|
||||
const arr = validPlacements
|
||||
.slice(index + 1)
|
||||
.concat(validPlacements.slice(0, index));
|
||||
return counter ? arr.reverse() : arr;
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
import getBoundaries from '../utils/getBoundaries';
|
||||
|
||||
function getArea({ width, height }) {
|
||||
return width * height;
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility used to transform the `auto` placement to the placement with more
|
||||
* available space.
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Object} data - The data object generated by update method
|
||||
* @argument {Object} options - Modifiers configuration and options
|
||||
* @returns {Object} The data object, properly modified
|
||||
*/
|
||||
export default function computeAutoPlacement(
|
||||
placement,
|
||||
refRect,
|
||||
popper,
|
||||
reference,
|
||||
boundariesElement,
|
||||
padding = 0
|
||||
) {
|
||||
if (placement.indexOf('auto') === -1) {
|
||||
return placement;
|
||||
}
|
||||
|
||||
const boundaries = getBoundaries(
|
||||
popper,
|
||||
reference,
|
||||
padding,
|
||||
boundariesElement
|
||||
);
|
||||
|
||||
const rects = {
|
||||
top: {
|
||||
width: boundaries.width,
|
||||
height: refRect.top - boundaries.top,
|
||||
},
|
||||
right: {
|
||||
width: boundaries.right - refRect.right,
|
||||
height: boundaries.height,
|
||||
},
|
||||
bottom: {
|
||||
width: boundaries.width,
|
||||
height: boundaries.bottom - refRect.bottom,
|
||||
},
|
||||
left: {
|
||||
width: refRect.left - boundaries.left,
|
||||
height: boundaries.height,
|
||||
},
|
||||
};
|
||||
|
||||
const sortedAreas = Object.keys(rects)
|
||||
.map(key => ({
|
||||
key,
|
||||
...rects[key],
|
||||
area: getArea(rects[key]),
|
||||
}))
|
||||
.sort((a, b) => b.area - a.area);
|
||||
|
||||
const filteredAreas = sortedAreas.filter(
|
||||
({ width, height }) =>
|
||||
width >= popper.clientWidth && height >= popper.clientHeight
|
||||
);
|
||||
|
||||
const computedPlacement = filteredAreas.length > 0
|
||||
? filteredAreas[0].key
|
||||
: sortedAreas[0].key;
|
||||
|
||||
const variation = placement.split('-')[1];
|
||||
|
||||
return computedPlacement + (variation ? `-${variation}` : '');
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
|
||||
const longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
||||
let timeoutDuration = 0;
|
||||
for (let i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
||||
if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
|
||||
timeoutDuration = 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
export function microtaskDebounce(fn) {
|
||||
let called = false
|
||||
return () => {
|
||||
if (called) {
|
||||
return
|
||||
}
|
||||
called = true
|
||||
window.Promise.resolve().then(() => {
|
||||
called = false
|
||||
fn()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function taskDebounce(fn) {
|
||||
let scheduled = false;
|
||||
return () => {
|
||||
if (!scheduled) {
|
||||
scheduled = true;
|
||||
setTimeout(() => {
|
||||
scheduled = false;
|
||||
fn();
|
||||
}, timeoutDuration);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const supportsMicroTasks = isBrowser && window.Promise
|
||||
|
||||
|
||||
/**
|
||||
* Create a debounced version of a method, that's asynchronously deferred
|
||||
* but called in the minimum time possible.
|
||||
*
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Function} fn
|
||||
* @returns {Function}
|
||||
*/
|
||||
export default (supportsMicroTasks
|
||||
? microtaskDebounce
|
||||
: taskDebounce);
|
||||
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Mimics the `find` method of Array
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Array} arr
|
||||
* @argument prop
|
||||
* @argument value
|
||||
* @returns index or -1
|
||||
*/
|
||||
export default function find(arr, check) {
|
||||
// use native find if supported
|
||||
if (Array.prototype.find) {
|
||||
return arr.find(check);
|
||||
}
|
||||
|
||||
// use `filter` to obtain the same behavior of `find`
|
||||
return arr.filter(check)[0];
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
import isOffsetContainer from './isOffsetContainer';
|
||||
import getRoot from './getRoot';
|
||||
import getOffsetParent from './getOffsetParent';
|
||||
|
||||
/**
|
||||
* Finds the offset parent common to the two provided nodes
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element1
|
||||
* @argument {Element} element2
|
||||
* @returns {Element} common offset parent
|
||||
*/
|
||||
export default function findCommonOffsetParent(element1, element2) {
|
||||
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
|
||||
if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
|
||||
return document.documentElement;
|
||||
}
|
||||
|
||||
// Here we make sure to give as "start" the element that comes first in the DOM
|
||||
const order =
|
||||
element1.compareDocumentPosition(element2) &
|
||||
Node.DOCUMENT_POSITION_FOLLOWING;
|
||||
const start = order ? element1 : element2;
|
||||
const end = order ? element2 : element1;
|
||||
|
||||
// Get common ancestor container
|
||||
const range = document.createRange();
|
||||
range.setStart(start, 0);
|
||||
range.setEnd(end, 0);
|
||||
const { commonAncestorContainer } = range;
|
||||
|
||||
// Both nodes are inside #document
|
||||
if (
|
||||
(element1 !== commonAncestorContainer &&
|
||||
element2 !== commonAncestorContainer) ||
|
||||
start.contains(end)
|
||||
) {
|
||||
if (isOffsetContainer(commonAncestorContainer)) {
|
||||
return commonAncestorContainer;
|
||||
}
|
||||
|
||||
return getOffsetParent(commonAncestorContainer);
|
||||
}
|
||||
|
||||
// one of the nodes is inside shadowDOM, find which one
|
||||
const element1root = getRoot(element1);
|
||||
if (element1root.host) {
|
||||
return findCommonOffsetParent(element1root.host, element2);
|
||||
} else {
|
||||
return findCommonOffsetParent(element1, getRoot(element2).host);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import find from './find';
|
||||
|
||||
/**
|
||||
* Return the index of the matching object
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Array} arr
|
||||
* @argument prop
|
||||
* @argument value
|
||||
* @returns index or -1
|
||||
*/
|
||||
export default function findIndex(arr, prop, value) {
|
||||
// use native findIndex if supported
|
||||
if (Array.prototype.findIndex) {
|
||||
return arr.findIndex(cur => cur[prop] === value);
|
||||
}
|
||||
|
||||
// use `find` + `indexOf` if `findIndex` isn't supported
|
||||
const match = find(arr, obj => obj[prop] === value);
|
||||
return arr.indexOf(match);
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/*
|
||||
* Helper to detect borders of a given element
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {CSSStyleDeclaration} styles
|
||||
* Result of `getStyleComputedProperty` on the given element
|
||||
* @param {String} axis - `x` or `y`
|
||||
* @return {number} borders - The borders size of the given axis
|
||||
*/
|
||||
|
||||
export default function getBordersSize(styles, axis) {
|
||||
const sideA = axis === 'x' ? 'Left' : 'Top';
|
||||
const sideB = sideA === 'Left' ? 'Right' : 'Bottom';
|
||||
|
||||
return (
|
||||
parseFloat(styles[`border${sideA}Width`], 10) +
|
||||
parseFloat(styles[`border${sideB}Width`], 10)
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
import getScrollParent from './getScrollParent';
|
||||
import getParentNode from './getParentNode';
|
||||
import findCommonOffsetParent from './findCommonOffsetParent';
|
||||
import getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';
|
||||
import getViewportOffsetRectRelativeToArtbitraryNode from './getViewportOffsetRectRelativeToArtbitraryNode';
|
||||
import getWindowSizes from './getWindowSizes';
|
||||
import isFixed from './isFixed';
|
||||
|
||||
/**
|
||||
* Computed the boundaries limits and return them
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {HTMLElement} popper
|
||||
* @param {HTMLElement} reference
|
||||
* @param {number} padding
|
||||
* @param {HTMLElement} boundariesElement - Element used to define the boundaries
|
||||
* @returns {Object} Coordinates of the boundaries
|
||||
*/
|
||||
export default function getBoundaries(
|
||||
popper,
|
||||
reference,
|
||||
padding,
|
||||
boundariesElement
|
||||
) {
|
||||
// NOTE: 1 DOM access here
|
||||
let boundaries = { top: 0, left: 0 };
|
||||
const offsetParent = findCommonOffsetParent(popper, reference);
|
||||
|
||||
// Handle viewport case
|
||||
if (boundariesElement === 'viewport') {
|
||||
boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent);
|
||||
} else {
|
||||
// Handle other cases based on DOM element used as boundaries
|
||||
let boundariesNode;
|
||||
if (boundariesElement === 'scrollParent') {
|
||||
boundariesNode = getScrollParent(getParentNode(reference));
|
||||
if (boundariesNode.nodeName === 'BODY') {
|
||||
boundariesNode = popper.ownerDocument.documentElement;
|
||||
}
|
||||
} else if (boundariesElement === 'window') {
|
||||
boundariesNode = popper.ownerDocument.documentElement;
|
||||
} else {
|
||||
boundariesNode = boundariesElement;
|
||||
}
|
||||
|
||||
const offsets = getOffsetRectRelativeToArbitraryNode(
|
||||
boundariesNode,
|
||||
offsetParent
|
||||
);
|
||||
|
||||
// In case of HTML, we need a different computation
|
||||
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
|
||||
const { height, width } = getWindowSizes();
|
||||
boundaries.top += offsets.top - offsets.marginTop;
|
||||
boundaries.bottom = height + offsets.top;
|
||||
boundaries.left += offsets.left - offsets.marginLeft;
|
||||
boundaries.right = width + offsets.left;
|
||||
} else {
|
||||
// for all the other DOM elements, this one is good
|
||||
boundaries = offsets;
|
||||
}
|
||||
}
|
||||
|
||||
// Add paddings
|
||||
boundaries.left += padding;
|
||||
boundaries.top += padding;
|
||||
boundaries.right -= padding;
|
||||
boundaries.bottom -= padding;
|
||||
|
||||
return boundaries;
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
import getStyleComputedProperty from './getStyleComputedProperty';
|
||||
import getBordersSize from './getBordersSize';
|
||||
import getWindowSizes from './getWindowSizes';
|
||||
import getScroll from './getScroll';
|
||||
import getClientRect from './getClientRect';
|
||||
import isIE10 from './isIE10';
|
||||
|
||||
/**
|
||||
* Get bounding client rect of given element
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {HTMLElement} element
|
||||
* @return {Object} client rect
|
||||
*/
|
||||
export default function getBoundingClientRect(element) {
|
||||
let rect = {};
|
||||
|
||||
// IE10 10 FIX: Please, don't ask, the element isn't
|
||||
// considered in DOM in some circumstances...
|
||||
// This isn't reproducible in IE10 compatibility mode of IE11
|
||||
if (isIE10()) {
|
||||
try {
|
||||
rect = element.getBoundingClientRect();
|
||||
const scrollTop = getScroll(element, 'top');
|
||||
const scrollLeft = getScroll(element, 'left');
|
||||
rect.top += scrollTop;
|
||||
rect.left += scrollLeft;
|
||||
rect.bottom += scrollTop;
|
||||
rect.right += scrollLeft;
|
||||
} catch (err) {}
|
||||
} else {
|
||||
rect = element.getBoundingClientRect();
|
||||
}
|
||||
|
||||
const result = {
|
||||
left: rect.left,
|
||||
top: rect.top,
|
||||
width: rect.right - rect.left,
|
||||
height: rect.bottom - rect.top,
|
||||
};
|
||||
|
||||
// subtract scrollbar size from sizes
|
||||
const sizes = element.nodeName === 'HTML' ? getWindowSizes() : {};
|
||||
const width =
|
||||
sizes.width || element.clientWidth || result.right - result.left;
|
||||
const height =
|
||||
sizes.height || element.clientHeight || result.bottom - result.top;
|
||||
|
||||
let horizScrollbar = element.offsetWidth - width;
|
||||
let vertScrollbar = element.offsetHeight - height;
|
||||
|
||||
// if an hypothetical scrollbar is detected, we must be sure it's not a `border`
|
||||
// we make this check conditional for performance reasons
|
||||
if (horizScrollbar || vertScrollbar) {
|
||||
const styles = getStyleComputedProperty(element);
|
||||
horizScrollbar -= getBordersSize(styles, 'x');
|
||||
vertScrollbar -= getBordersSize(styles, 'y');
|
||||
|
||||
result.width -= horizScrollbar;
|
||||
result.height -= vertScrollbar;
|
||||
}
|
||||
|
||||
return getClientRect(result);
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Given element offsets, generate an output similar to getBoundingClientRect
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Object} offsets
|
||||
* @returns {Object} ClientRect like output
|
||||
*/
|
||||
export default function getClientRect(offsets) {
|
||||
return {
|
||||
...offsets,
|
||||
right: offsets.left + offsets.width,
|
||||
bottom: offsets.top + offsets.height,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
import getStyleComputedProperty from './getStyleComputedProperty';
|
||||
/**
|
||||
* Returns the offset parent of the given element
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element
|
||||
* @returns {Element} offset parent
|
||||
*/
|
||||
export default function getOffsetParent(element) {
|
||||
// NOTE: 1 DOM access here
|
||||
const offsetParent = element && element.offsetParent;
|
||||
const nodeName = offsetParent && offsetParent.nodeName;
|
||||
|
||||
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
if (element) {
|
||||
return element.ownerDocument.documentElement
|
||||
}
|
||||
|
||||
return document.documentElement;
|
||||
}
|
||||
|
||||
// .offsetParent will return the closest TD or TABLE in case
|
||||
// no offsetParent is present, I hate this job...
|
||||
if (
|
||||
['TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&
|
||||
getStyleComputedProperty(offsetParent, 'position') === 'static'
|
||||
) {
|
||||
return getOffsetParent(offsetParent);
|
||||
}
|
||||
|
||||
return offsetParent;
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
import getWindowSizes from './getWindowSizes';
|
||||
import getClientRect from './getClientRect';
|
||||
|
||||
/**
|
||||
* Get the position of the given element, relative to its offset parent
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {Element} element
|
||||
* @return {Object} position - Coordinates of the element and its `scrollTop`
|
||||
*/
|
||||
export default function getOffsetRect(element) {
|
||||
let elementRect;
|
||||
if (element.nodeName === 'HTML') {
|
||||
const { width, height } = getWindowSizes();
|
||||
elementRect = {
|
||||
width,
|
||||
height,
|
||||
left: 0,
|
||||
top: 0,
|
||||
};
|
||||
} else {
|
||||
elementRect = {
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight,
|
||||
left: element.offsetLeft,
|
||||
top: element.offsetTop,
|
||||
};
|
||||
}
|
||||
|
||||
// position
|
||||
return getClientRect(elementRect);
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
import getStyleComputedProperty from './getStyleComputedProperty';
|
||||
import includeScroll from './includeScroll';
|
||||
import getScrollParent from './getScrollParent';
|
||||
import getBoundingClientRect from './getBoundingClientRect';
|
||||
import runIsIE10 from './isIE10';
|
||||
import getClientRect from './getClientRect';
|
||||
|
||||
export default function getOffsetRectRelativeToArbitraryNode(children, parent) {
|
||||
const isIE10 = runIsIE10();
|
||||
const isHTML = parent.nodeName === 'HTML';
|
||||
const childrenRect = getBoundingClientRect(children);
|
||||
const parentRect = getBoundingClientRect(parent);
|
||||
const scrollParent = getScrollParent(children);
|
||||
|
||||
const styles = getStyleComputedProperty(parent);
|
||||
const borderTopWidth = parseFloat(styles.borderTopWidth, 10);
|
||||
const borderLeftWidth = parseFloat(styles.borderLeftWidth, 10);
|
||||
|
||||
let offsets = getClientRect({
|
||||
top: childrenRect.top - parentRect.top - borderTopWidth,
|
||||
left: childrenRect.left - parentRect.left - borderLeftWidth,
|
||||
width: childrenRect.width,
|
||||
height: childrenRect.height,
|
||||
});
|
||||
offsets.marginTop = 0;
|
||||
offsets.marginLeft = 0;
|
||||
|
||||
// Subtract margins of documentElement in case it's being used as parent
|
||||
// we do this only on HTML because it's the only element that behaves
|
||||
// differently when margins are applied to it. The margins are included in
|
||||
// the box of the documentElement, in the other cases not.
|
||||
if (!isIE10 && isHTML) {
|
||||
const marginTop = parseFloat(styles.marginTop, 10);
|
||||
const marginLeft = parseFloat(styles.marginLeft, 10);
|
||||
|
||||
offsets.top -= borderTopWidth - marginTop;
|
||||
offsets.bottom -= borderTopWidth - marginTop;
|
||||
offsets.left -= borderLeftWidth - marginLeft;
|
||||
offsets.right -= borderLeftWidth - marginLeft;
|
||||
|
||||
// Attach marginTop and marginLeft because in some circumstances we may need them
|
||||
offsets.marginTop = marginTop;
|
||||
offsets.marginLeft = marginLeft;
|
||||
}
|
||||
|
||||
if (
|
||||
isIE10
|
||||
? parent.contains(scrollParent)
|
||||
: parent === scrollParent && scrollParent.nodeName !== 'BODY'
|
||||
) {
|
||||
offsets = includeScroll(offsets, parent);
|
||||
}
|
||||
|
||||
return offsets;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Get the opposite placement of the given one
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {String} placement
|
||||
* @returns {String} flipped placement
|
||||
*/
|
||||
export default function getOppositePlacement(placement) {
|
||||
const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
|
||||
return placement.replace(/left|right|bottom|top/g, matched => hash[matched]);
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Get the opposite placement variation of the given one
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {String} placement variation
|
||||
* @returns {String} flipped placement variation
|
||||
*/
|
||||
export default function getOppositeVariation(variation) {
|
||||
if (variation === 'end') {
|
||||
return 'start';
|
||||
} else if (variation === 'start') {
|
||||
return 'end';
|
||||
}
|
||||
return variation;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Get the outer sizes of the given element (offset size + margins)
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element
|
||||
* @returns {Object} object containing width and height properties
|
||||
*/
|
||||
export default function getOuterSizes(element) {
|
||||
const styles = getComputedStyle(element);
|
||||
const x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
|
||||
const y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
|
||||
const result = {
|
||||
width: element.offsetWidth + y,
|
||||
height: element.offsetHeight + x,
|
||||
};
|
||||
return result;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Returns the parentNode or the host of the element
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element
|
||||
* @returns {Element} parent
|
||||
*/
|
||||
export default function getParentNode(element) {
|
||||
if (element.nodeName === 'HTML') {
|
||||
return element;
|
||||
}
|
||||
return element.parentNode || element.host;
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import getOuterSizes from './getOuterSizes';
|
||||
import getOppositePlacement from './getOppositePlacement';
|
||||
|
||||
/**
|
||||
* Get offsets to the popper
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {Object} position - CSS position the Popper will get applied
|
||||
* @param {HTMLElement} popper - the popper element
|
||||
* @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
|
||||
* @param {String} placement - one of the valid placement options
|
||||
* @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
|
||||
*/
|
||||
export default function getPopperOffsets(popper, referenceOffsets, placement) {
|
||||
placement = placement.split('-')[0];
|
||||
|
||||
// Get popper node sizes
|
||||
const popperRect = getOuterSizes(popper);
|
||||
|
||||
// Add position, width and height to our offsets object
|
||||
const popperOffsets = {
|
||||
width: popperRect.width,
|
||||
height: popperRect.height,
|
||||
};
|
||||
|
||||
// depending by the popper placement we have to compute its offsets slightly differently
|
||||
const isHoriz = ['right', 'left'].indexOf(placement) !== -1;
|
||||
const mainSide = isHoriz ? 'top' : 'left';
|
||||
const secondarySide = isHoriz ? 'left' : 'top';
|
||||
const measurement = isHoriz ? 'height' : 'width';
|
||||
const secondaryMeasurement = !isHoriz ? 'height' : 'width';
|
||||
|
||||
popperOffsets[mainSide] =
|
||||
referenceOffsets[mainSide] +
|
||||
referenceOffsets[measurement] / 2 -
|
||||
popperRect[measurement] / 2;
|
||||
if (placement === secondarySide) {
|
||||
popperOffsets[secondarySide] =
|
||||
referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
|
||||
} else {
|
||||
popperOffsets[secondarySide] =
|
||||
referenceOffsets[getOppositePlacement(secondarySide)];
|
||||
}
|
||||
|
||||
return popperOffsets;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import findCommonOffsetParent from './findCommonOffsetParent';
|
||||
import getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';
|
||||
|
||||
/**
|
||||
* Get offsets to the reference element
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {Object} state
|
||||
* @param {Element} popper - the popper element
|
||||
* @param {Element} reference - the reference element (the popper will be relative to this)
|
||||
* @returns {Object} An object containing the offsets which will be applied to the popper
|
||||
*/
|
||||
export default function getReferenceOffsets(state, popper, reference) {
|
||||
const commonOffsetParent = findCommonOffsetParent(popper, reference);
|
||||
return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent);
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Finds the root node (document, shadowDOM root) of the given element
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} node
|
||||
* @returns {Element} root node
|
||||
*/
|
||||
export default function getRoot(node) {
|
||||
if (node.parentNode !== null) {
|
||||
return getRoot(node.parentNode);
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
/**
|
||||
* Gets the scroll value of the given element in the given side (top and left)
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element
|
||||
* @argument {String} side `top` or `left`
|
||||
* @returns {number} amount of scrolled pixels
|
||||
*/
|
||||
export default function getScroll(element, side = 'top') {
|
||||
const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
|
||||
const nodeName = element.nodeName;
|
||||
|
||||
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
const html = element.ownerDocument.documentElement;
|
||||
const scrollingElement = element.ownerDocument.scrollingElement || html;
|
||||
return scrollingElement[upperSide];
|
||||
}
|
||||
|
||||
return element[upperSide];
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
import getStyleComputedProperty from './getStyleComputedProperty';
|
||||
import getParentNode from './getParentNode';
|
||||
|
||||
/**
|
||||
* Returns the scrolling parent of the given element
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element
|
||||
* @returns {Element} scroll parent
|
||||
*/
|
||||
export default function getScrollParent(element) {
|
||||
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
|
||||
if (!element) {
|
||||
return document.body
|
||||
}
|
||||
|
||||
switch (element.nodeName) {
|
||||
case 'HTML':
|
||||
case 'BODY':
|
||||
return element.ownerDocument.body
|
||||
case '#document':
|
||||
return element.body
|
||||
}
|
||||
|
||||
// Firefox want us to check `-x` and `-y` variations as well
|
||||
const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);
|
||||
if (/(auto|scroll)/.test(overflow + overflowY + overflowX)) {
|
||||
return element;
|
||||
}
|
||||
|
||||
return getScrollParent(getParentNode(element));
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Get CSS computed property of the given element
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Eement} element
|
||||
* @argument {String} property
|
||||
*/
|
||||
export default function getStyleComputedProperty(element, property) {
|
||||
if (element.nodeType !== 1) {
|
||||
return [];
|
||||
}
|
||||
// NOTE: 1 DOM access here
|
||||
const css = getComputedStyle(element, null);
|
||||
return property ? css[property] : css;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
/**
|
||||
* Get the prefixed supported property name
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {String} property (camelCase)
|
||||
* @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
|
||||
*/
|
||||
export default function getSupportedPropertyName(property) {
|
||||
const prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
|
||||
const upperProp = property.charAt(0).toUpperCase() + property.slice(1);
|
||||
|
||||
for (let i = 0; i < prefixes.length - 1; i++) {
|
||||
const prefix = prefixes[i];
|
||||
const toCheck = prefix ? `${prefix}${upperProp}` : property;
|
||||
if (typeof document.body.style[toCheck] !== 'undefined') {
|
||||
return toCheck;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';
|
||||
import getScroll from './getScroll';
|
||||
import getClientRect from './getClientRect';
|
||||
|
||||
export default function getViewportOffsetRectRelativeToArtbitraryNode(element) {
|
||||
const html = element.ownerDocument.documentElement;
|
||||
const relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
||||
const width = Math.max(html.clientWidth, window.innerWidth || 0);
|
||||
const height = Math.max(html.clientHeight, window.innerHeight || 0);
|
||||
|
||||
const scrollTop = getScroll(html);
|
||||
const scrollLeft = getScroll(html, 'left');
|
||||
|
||||
const offset = {
|
||||
top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
|
||||
left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
|
||||
width,
|
||||
height,
|
||||
};
|
||||
|
||||
return getClientRect(offset);
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Get the window associated with the element
|
||||
* @argument {Element} element
|
||||
* @returns {Window}
|
||||
*/
|
||||
export default function getWindow(element) {
|
||||
const ownerDocument = element.ownerDocument;
|
||||
return ownerDocument ? ownerDocument.defaultView : window;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import isIE10 from './isIE10';
|
||||
|
||||
function getSize(axis, body, html, computedStyle) {
|
||||
return Math.max(
|
||||
body[`offset${axis}`],
|
||||
body[`scroll${axis}`],
|
||||
html[`client${axis}`],
|
||||
html[`offset${axis}`],
|
||||
html[`scroll${axis}`],
|
||||
isIE10()
|
||||
? html[`offset${axis}`] +
|
||||
computedStyle[`margin${axis === 'Height' ? 'Top' : 'Left'}`] +
|
||||
computedStyle[`margin${axis === 'Height' ? 'Bottom' : 'Right'}`]
|
||||
: 0
|
||||
);
|
||||
}
|
||||
|
||||
export default function getWindowSizes() {
|
||||
const body = document.body;
|
||||
const html = document.documentElement;
|
||||
const computedStyle = isIE10() && getComputedStyle(html);
|
||||
|
||||
return {
|
||||
height: getSize('Height', body, html, computedStyle),
|
||||
width: getSize('Width', body, html, computedStyle),
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import getScroll from './getScroll';
|
||||
|
||||
/*
|
||||
* Sum or subtract the element scroll values (left and top) from a given rect object
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {Object} rect - Rect object you want to change
|
||||
* @param {HTMLElement} element - The element from the function reads the scroll values
|
||||
* @param {Boolean} subtract - set to true if you want to subtract the scroll values
|
||||
* @return {Object} rect - The modifier rect object
|
||||
*/
|
||||
export default function includeScroll(rect, element, subtract = false) {
|
||||
const scrollTop = getScroll(element, 'top');
|
||||
const scrollLeft = getScroll(element, 'left');
|
||||
const modifier = subtract ? -1 : 1;
|
||||
rect.top += scrollTop * modifier;
|
||||
rect.bottom += scrollTop * modifier;
|
||||
rect.left += scrollLeft * modifier;
|
||||
rect.right += scrollLeft * modifier;
|
||||
return rect;
|
||||
}
|
||||
@ -0,0 +1,100 @@
|
||||
import computeAutoPlacement from './computeAutoPlacement';
|
||||
import debounce from './debounce';
|
||||
import findIndex from './findIndex';
|
||||
import getBordersSize from './getBordersSize';
|
||||
import getBoundaries from './getBoundaries';
|
||||
import getBoundingClientRect from './getBoundingClientRect';
|
||||
import getClientRect from './getClientRect';
|
||||
import getOffsetParent from './getOffsetParent';
|
||||
import getOffsetRect from './getOffsetRect';
|
||||
import getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';
|
||||
import getOuterSizes from './getOuterSizes';
|
||||
import getParentNode from './getParentNode';
|
||||
import getPopperOffsets from './getPopperOffsets';
|
||||
import getReferenceOffsets from './getReferenceOffsets';
|
||||
import getScroll from './getScroll';
|
||||
import getScrollParent from './getScrollParent';
|
||||
import getStyleComputedProperty from './getStyleComputedProperty';
|
||||
import getSupportedPropertyName from './getSupportedPropertyName';
|
||||
import getWindowSizes from './getWindowSizes';
|
||||
import isFixed from './isFixed';
|
||||
import isFunction from './isFunction';
|
||||
import isModifierEnabled from './isModifierEnabled';
|
||||
import isModifierRequired from './isModifierRequired';
|
||||
import isNumeric from './isNumeric';
|
||||
import removeEventListeners from './removeEventListeners';
|
||||
import runModifiers from './runModifiers';
|
||||
import setAttributes from './setAttributes';
|
||||
import setStyles from './setStyles';
|
||||
import setupEventListeners from './setupEventListeners';
|
||||
|
||||
/** @namespace Popper.Utils */
|
||||
export {
|
||||
computeAutoPlacement,
|
||||
debounce,
|
||||
findIndex,
|
||||
getBordersSize,
|
||||
getBoundaries,
|
||||
getBoundingClientRect,
|
||||
getClientRect,
|
||||
getOffsetParent,
|
||||
getOffsetRect,
|
||||
getOffsetRectRelativeToArbitraryNode,
|
||||
getOuterSizes,
|
||||
getParentNode,
|
||||
getPopperOffsets,
|
||||
getReferenceOffsets,
|
||||
getScroll,
|
||||
getScrollParent,
|
||||
getStyleComputedProperty,
|
||||
getSupportedPropertyName,
|
||||
getWindowSizes,
|
||||
isFixed,
|
||||
isFunction,
|
||||
isModifierEnabled,
|
||||
isModifierRequired,
|
||||
isNumeric,
|
||||
removeEventListeners,
|
||||
runModifiers,
|
||||
setAttributes,
|
||||
setStyles,
|
||||
setupEventListeners,
|
||||
};
|
||||
|
||||
// This is here just for backward compatibility with versions lower than v1.10.3
|
||||
// you should import the utilities using named exports, if you want them all use:
|
||||
// ```
|
||||
// import * as PopperUtils from 'popper-utils';
|
||||
// ```
|
||||
// The default export will be removed in the next major version.
|
||||
export default {
|
||||
computeAutoPlacement,
|
||||
debounce,
|
||||
findIndex,
|
||||
getBordersSize,
|
||||
getBoundaries,
|
||||
getBoundingClientRect,
|
||||
getClientRect,
|
||||
getOffsetParent,
|
||||
getOffsetRect,
|
||||
getOffsetRectRelativeToArbitraryNode,
|
||||
getOuterSizes,
|
||||
getParentNode,
|
||||
getPopperOffsets,
|
||||
getReferenceOffsets,
|
||||
getScroll,
|
||||
getScrollParent,
|
||||
getStyleComputedProperty,
|
||||
getSupportedPropertyName,
|
||||
getWindowSizes,
|
||||
isFixed,
|
||||
isFunction,
|
||||
isModifierEnabled,
|
||||
isModifierRequired,
|
||||
isNumeric,
|
||||
removeEventListeners,
|
||||
runModifiers,
|
||||
setAttributes,
|
||||
setStyles,
|
||||
setupEventListeners,
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
import getStyleComputedProperty from './getStyleComputedProperty';
|
||||
import getParentNode from './getParentNode';
|
||||
|
||||
/**
|
||||
* Check if the given element is fixed or is inside a fixed parent
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element
|
||||
* @argument {Element} customContainer
|
||||
* @returns {Boolean} answer to "isFixed?"
|
||||
*/
|
||||
export default function isFixed(element) {
|
||||
const nodeName = element.nodeName;
|
||||
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
return false;
|
||||
}
|
||||
if (getStyleComputedProperty(element, 'position') === 'fixed') {
|
||||
return true;
|
||||
}
|
||||
return isFixed(getParentNode(element));
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Check if the given variable is a function
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Any} functionToCheck - variable to check
|
||||
* @returns {Boolean} answer to: is a function?
|
||||
*/
|
||||
export default function isFunction(functionToCheck) {
|
||||
const getType = {};
|
||||
return (
|
||||
functionToCheck &&
|
||||
getType.toString.call(functionToCheck) === '[object Function]'
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Tells if you are running Internet Explorer 10
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @returns {Boolean} isIE10
|
||||
*/
|
||||
let isIE10 = undefined;
|
||||
|
||||
export default function() {
|
||||
if (isIE10 === undefined) {
|
||||
isIE10 = navigator.appVersion.indexOf('MSIE 10') !== -1;
|
||||
}
|
||||
return isIE10;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Helper used to know if the given modifier is enabled.
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export default function isModifierEnabled(modifiers, modifierName) {
|
||||
return modifiers.some(
|
||||
({ name, enabled }) => enabled && name === modifierName
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
import find from './find';
|
||||
|
||||
/**
|
||||
* Helper used to know if the given modifier depends from another one.<br />
|
||||
* It checks if the needed modifier is listed and enabled.
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {Array} modifiers - list of modifiers
|
||||
* @param {String} requestingName - name of requesting modifier
|
||||
* @param {String} requestedName - name of requested modifier
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export default function isModifierRequired(
|
||||
modifiers,
|
||||
requestingName,
|
||||
requestedName
|
||||
) {
|
||||
const requesting = find(modifiers, ({ name }) => name === requestingName);
|
||||
|
||||
const isRequired =
|
||||
!!requesting &&
|
||||
modifiers.some(modifier => {
|
||||
return (
|
||||
modifier.name === requestedName &&
|
||||
modifier.enabled &&
|
||||
modifier.order < requesting.order
|
||||
);
|
||||
});
|
||||
|
||||
if (!isRequired) {
|
||||
const requesting = `\`${requestingName}\``;
|
||||
const requested = `\`${requestedName}\``;
|
||||
console.warn(
|
||||
`${requested} modifier is required by ${requesting} modifier in order to work, be sure to include it before ${requesting}!`
|
||||
);
|
||||
}
|
||||
return isRequired;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Tells if a given input is a number
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {*} input to check
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export default function isNumeric(n) {
|
||||
return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import getOffsetParent from './getOffsetParent';
|
||||
|
||||
export default function isOffsetContainer(element) {
|
||||
const { nodeName } = element;
|
||||
if (nodeName === 'BODY') {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import getWindow from './getWindow';
|
||||
|
||||
/**
|
||||
* Remove event listeners used to update the popper position
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @private
|
||||
*/
|
||||
export default function removeEventListeners(reference, state) {
|
||||
// Remove resize event listener on window
|
||||
getWindow(reference).removeEventListener('resize', state.updateBound);
|
||||
|
||||
// Remove scroll event listener on scroll parents
|
||||
state.scrollParents.forEach(target => {
|
||||
target.removeEventListener('scroll', state.updateBound);
|
||||
});
|
||||
|
||||
// Reset state
|
||||
state.updateBound = null;
|
||||
state.scrollParents = [];
|
||||
state.scrollElement = null;
|
||||
state.eventsEnabled = false;
|
||||
return state;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import isFunction from './isFunction';
|
||||
import findIndex from './findIndex';
|
||||
import getClientRect from '../utils/getClientRect';
|
||||
|
||||
/**
|
||||
* Loop trough the list of modifiers and run them in order,
|
||||
* each of them will then edit the data object.
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @param {dataObject} data
|
||||
* @param {Array} modifiers
|
||||
* @param {String} ends - Optional modifier name used as stopper
|
||||
* @returns {dataObject}
|
||||
*/
|
||||
export default function runModifiers(modifiers, data, ends) {
|
||||
const modifiersToRun = ends === undefined
|
||||
? modifiers
|
||||
: modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
||||
|
||||
modifiersToRun.forEach(modifier => {
|
||||
if (modifier['function']) { // eslint-disable-line dot-notation
|
||||
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
|
||||
}
|
||||
const fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
|
||||
if (modifier.enabled && isFunction(fn)) {
|
||||
// Add properties to offsets to make them a complete clientRect object
|
||||
// we do this before each modifier to make sure the previous one doesn't
|
||||
// mess with these values
|
||||
data.offsets.popper = getClientRect(data.offsets.popper);
|
||||
data.offsets.reference = getClientRect(data.offsets.reference);
|
||||
|
||||
data = fn(data, modifier);
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Set the attributes to the given popper
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element - Element to apply the attributes to
|
||||
* @argument {Object} styles
|
||||
* Object with a list of properties and values which will be applied to the element
|
||||
*/
|
||||
export default function setAttributes(element, attributes) {
|
||||
Object.keys(attributes).forEach(function(prop) {
|
||||
const value = attributes[prop];
|
||||
if (value !== false) {
|
||||
element.setAttribute(prop, attributes[prop]);
|
||||
} else {
|
||||
element.removeAttribute(prop);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import isNumeric from './isNumeric';
|
||||
|
||||
/**
|
||||
* Set the style to the given popper
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @argument {Element} element - Element to apply the style to
|
||||
* @argument {Object} styles
|
||||
* Object with a list of properties and values which will be applied to the element
|
||||
*/
|
||||
export default function setStyles(element, styles) {
|
||||
Object.keys(styles).forEach(prop => {
|
||||
let unit = '';
|
||||
// add unit if the value is numeric and is one of the following
|
||||
if (
|
||||
['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !==
|
||||
-1 &&
|
||||
isNumeric(styles[prop])
|
||||
) {
|
||||
unit = 'px';
|
||||
}
|
||||
element.style[prop] = styles[prop] + unit;
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
import getScrollParent from './getScrollParent';
|
||||
import getWindow from './getWindow';
|
||||
|
||||
function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
||||
const isBody = scrollParent.nodeName === 'BODY';
|
||||
const target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
|
||||
target.addEventListener(event, callback, { passive: true });
|
||||
|
||||
if (!isBody) {
|
||||
attachToScrollParents(
|
||||
getScrollParent(target.parentNode),
|
||||
event,
|
||||
callback,
|
||||
scrollParents
|
||||
);
|
||||
}
|
||||
scrollParents.push(target);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup needed event listeners used to update the popper position
|
||||
* @method
|
||||
* @memberof Popper.Utils
|
||||
* @private
|
||||
*/
|
||||
export default function setupEventListeners(
|
||||
reference,
|
||||
options,
|
||||
state,
|
||||
updateBound
|
||||
) {
|
||||
// Resize event listener on window
|
||||
state.updateBound = updateBound;
|
||||
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
|
||||
|
||||
// Scroll event listener on scroll parents
|
||||
const scrollElement = getScrollParent(reference);
|
||||
attachToScrollParents(
|
||||
scrollElement,
|
||||
'scroll',
|
||||
state.updateBound,
|
||||
state.scrollParents
|
||||
);
|
||||
state.scrollElement = scrollElement;
|
||||
state.eventsEnabled = true;
|
||||
|
||||
return state;
|
||||
}
|
||||
Reference in New Issue
Block a user