Latest updates from IceHrmPro
This commit is contained in:
Thilina Pituwala
196
web/node_modules/scroll-into-view-if-needed/CHANGELOG.md
generated
vendored
Normal file
196
web/node_modules/scroll-into-view-if-needed/CHANGELOG.md
generated
vendored
Normal file
@@ -0,0 +1,196 @@
|
||||
# Changelog
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
|
||||
and this project adheres to
|
||||
[Semantic Versioning](http://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### Added
|
||||
|
||||
- Support for `behavior`, `block` and `inline` options, from [the spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).
|
||||
- `scrollMode: "if-needed" | "always"` to control the `if-needed` behavior, based on [the csswg proposal to the spec](https://github.com/w3c/csswg-drafts/pull/1805).
|
||||
|
||||
### Removed
|
||||
|
||||
- `centerIfNeeded`, use `scrollMode: "if-needed", block: "center"` instead.
|
||||
- `duration` to trigger animation, use [`smooth-scroll-into-view-if-needed`](https://github.com/stipsan/smooth-scroll-into-view-if-needed) instead.
|
||||
- `handleScroll(parent, {scrollLeft, scrollTop}, options)`, use `behavior: function(actions)` instead, where `actions` is an array of `{el, top, left}` allowing you to scroll everything in parallel or in a sequence, it's up to you.
|
||||
- `offset`, use wrapper elements and CSS like padding or margins instead.
|
||||
|
||||
## [1.5.0] - 2018-02-25
|
||||
|
||||
### Added
|
||||
|
||||
- `sideEffects: false` in package.json to enable optimizations introduced in webpack v4.
|
||||
|
||||
## [1.4.0] - 2017-11-17
|
||||
|
||||
### Added
|
||||
|
||||
- New `handleScroll` option allows customizing scrolling behavior.
|
||||
|
||||
### Changed
|
||||
|
||||
- Animation logic is separated from scroll calculation logic. This allows skip
|
||||
importing animation dependencies and reduces bundle sizes when you don't need
|
||||
the built in animation feature.
|
||||
|
||||
## [1.3.0] - 2017-11-12
|
||||
|
||||
### Added
|
||||
|
||||
- New API interface (#148 @tonybdesign)
|
||||
|
||||
## [1.2.8] - 2017-11-05
|
||||
|
||||
### Fixed
|
||||
|
||||
- Missing TypeScript definitions and rollup/webpack pkg.module files from
|
||||
published package (#145)
|
||||
|
||||
## [1.2.7] - 2017-11-05
|
||||
|
||||
### Fixed
|
||||
|
||||
- Package published on npm contained unnecessary files bloating the package
|
||||
(#144)
|
||||
|
||||
## [1.2.6] - 2017-11-05
|
||||
|
||||
### Fixed
|
||||
|
||||
- Don't use postinstall as it runs in userland (#143)
|
||||
|
||||
## [1.2.5] - 2017-11-05
|
||||
|
||||
### Fixed
|
||||
|
||||
- Migrate tests to
|
||||
[new page](https://stipsan.github.io/scroll-into-view-if-needed/) that
|
||||
showcases how it works (#141)
|
||||
|
||||
## [1.2.4] - 2017-11-05
|
||||
|
||||
### Fixed
|
||||
|
||||
- TypeScript requires HTMLElement when it should accept Element (#140)
|
||||
|
||||
## [1.2.3] - 2017-11-04
|
||||
|
||||
### Fixed
|
||||
|
||||
- Incorrect TypeScript declarations and export format (#136)
|
||||
|
||||
## [1.2.2] - 2017-10-29
|
||||
|
||||
### Fixed
|
||||
|
||||
- Incorrect export declaration in TS typings (#132)
|
||||
|
||||
## [1.2.1] - 2017-10-02
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fifth option should be optional (#129)
|
||||
|
||||
## [1.2.0] - 2017-10-01
|
||||
|
||||
### Added
|
||||
|
||||
- Set offset feature (#127 @iwangulenko)
|
||||
|
||||
## [1.1.1] - 2017-10-01
|
||||
|
||||
### Fixed
|
||||
|
||||
- Windows compatibility and CommonJS interop change back to Babel 5
|
||||
functionality (#121 @khell)
|
||||
|
||||
## [1.1.0] - 2017-03-29
|
||||
|
||||
### Added
|
||||
|
||||
- An optional argument finalElement was added to limit the scope of the function
|
||||
(#108 @hemnstill)
|
||||
|
||||
## [1.0.7] - 2017-03-14
|
||||
|
||||
### Added
|
||||
|
||||
- MIT License (#107 @JKillian)
|
||||
|
||||
### Changed
|
||||
|
||||
- Reduced size of dist build by switching from rollup to babel (#106 @JKillian)
|
||||
|
||||
## [1.0.6] - 2016-11-17
|
||||
|
||||
### Changed
|
||||
|
||||
- Updated typescript definition making options optional (#75 @pelotom)
|
||||
|
||||
## [1.0.5] - 2016-11-12
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fix TypeScript definition file issues (#74 @forabi)
|
||||
|
||||
### Documentation
|
||||
|
||||
- React example snippet in readme.
|
||||
|
||||
## [1.0.4] - 2016-10-31
|
||||
|
||||
### Added
|
||||
|
||||
- Changelog readme.
|
||||
- TypeScript definition file (#73 @forabi)
|
||||
|
||||
## 1.0.3 - 2016-09-30
|
||||
|
||||
### Documentation
|
||||
|
||||
- link to official ponyfill page (#68 @sindresorhus)
|
||||
|
||||
## 1.0.2 - 2016-04-18
|
||||
|
||||
### Added
|
||||
|
||||
- Greenkeeper
|
||||
|
||||
### Fixes
|
||||
|
||||
- Incomatibility with default webpack config.
|
||||
|
||||
## 1.0.1 - 2016-04-18
|
||||
|
||||
- PULLED: accidentally pushed incomplete build to npm!
|
||||
|
||||
## 1.0.0 - 2016-04-18
|
||||
|
||||
### Added
|
||||
|
||||
- Initial release.
|
||||
|
||||
[unreleased]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.5.0...HEAD
|
||||
[1.5.0]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.4.0...v1.5.0
|
||||
[1.4.0]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.3.0...v1.4.0
|
||||
[1.3.0]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.8...v1.3.0
|
||||
[1.2.8]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.7...v1.2.8
|
||||
[1.2.7]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.6...v1.2.7
|
||||
[1.2.6]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.5...v1.2.6
|
||||
[1.2.5]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.4...v1.2.5
|
||||
[1.2.4]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.3...v1.2.4
|
||||
[1.2.3]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.2...v1.2.3
|
||||
[1.2.2]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.1...v1.2.2
|
||||
[1.2.1]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.2.0...v1.2.1
|
||||
[1.2.0]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.1.1...v1.2.0
|
||||
[1.1.1]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.1.0...v1.1.1
|
||||
[1.1.0]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.0.7...v1.1.0
|
||||
[1.0.7]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.0.6...v1.0.7
|
||||
[1.0.6]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.0.5...v1.0.6
|
||||
[1.0.5]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.0.4...v1.0.5
|
||||
[1.0.4]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.0.3...v1.0.4
|
||||
21
web/node_modules/scroll-into-view-if-needed/LICENSE
generated
vendored
Normal file
21
web/node_modules/scroll-into-view-if-needed/LICENSE
generated
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017 Stian Didriksen
|
||||
|
||||
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.
|
||||
415
web/node_modules/scroll-into-view-if-needed/README.md
generated
vendored
Normal file
415
web/node_modules/scroll-into-view-if-needed/README.md
generated
vendored
Normal file
@@ -0,0 +1,415 @@
|
||||
[](https://circleci.com/gh/stipsan/scroll-into-view-if-needed)
|
||||
[](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed)
|
||||
[](https://www.npmjs.com/package/scroll-into-view-if-needed)
|
||||
[![gzip size][gzip-badge]][unpkg-dist]
|
||||
[![size][size-badge]][unpkg-dist]
|
||||
[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
|
||||
[](https://github.com/semantic-release/semantic-release)
|
||||
[](https://www.browserstack.com/automate/public-build/ejZ6OUtTaS9rZFFOYzlkeHlwTzMwSWxpR0FzWFcwOW5TS3ROTmlSdXMrVT0tLVhrVk9La2lCb1o4Y05mcmNXVnAvdkE9PQ==--d17668b8aba5091e4ef3a58927b8209e50b0a788)
|
||||
|
||||
|
||||
|
||||
This used to be a [ponyfill](https://ponyfill.com) for
|
||||
`Element.scrollIntoViewIfNeeded`. Since then the CSS working group have decided to implement its features in `Element.scrollIntoView` as the option `scrollMode: "if-needed"`. Thus this library got rewritten to implement that spec instead of the soon to be deprecated one.
|
||||
|
||||
## [Demo](https://scroll-into-view-if-needed.netlify.com)
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
yarn add scroll-into-view-if-needed
|
||||
```
|
||||
|
||||
The UMD build is also available on [unpkg](https://unpkg.com/scroll-into-view-if-needed/umd/):
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js"></script>
|
||||
```
|
||||
|
||||
You can find the library on `window.scrollIntoView`.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
// es6 import
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
// or es5
|
||||
const scrollIntoView = require('scroll-into-view-if-needed')
|
||||
|
||||
const node = document.getElementById('hero')
|
||||
|
||||
// similar behavior as Element.scrollIntoView({block: "nearest", inline: "nearest"})
|
||||
// only that it is a no-op if `node` is already visible
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
|
||||
// same behavior as Element.scrollIntoViewIfNeeded()
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
|
||||
scrollIntoView(node, {
|
||||
scrollMode: 'if-needed',
|
||||
block: 'nearest',
|
||||
inline: 'nearest',
|
||||
})
|
||||
|
||||
// same behavior as Element.scrollIntoViewIfNeeded(true) without the "IfNeeded" behavior
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
|
||||
scrollIntoView(node, { block: 'center', inline: 'center' })
|
||||
// scrollMode is "always" by default
|
||||
|
||||
// smooth scroll if the browser supports it and if the element isn't visible
|
||||
scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })
|
||||
```
|
||||
|
||||
### Ponyfill smooth scrolling
|
||||
|
||||
What does ponyfilling smooth scrolling mean, and why is it implemented in [`smooth-scroll-into-view-if-needed`](https://github.com/stipsan/smooth-scroll-into-view-if-needed) instead?
|
||||
The answer is bundlesize. If this package adds smooth scrolling to browsers that's missing it then the overall bundlesize increases regardless of wether you use this feature or not.
|
||||
|
||||
Put it this way:
|
||||
|
||||
```js
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
// Even if all you do is this
|
||||
scrollIntoView(node, { scrollMode: 'if-needed' })
|
||||
// You would end up with the same bundlesize as people who need
|
||||
// smooth scrolling to work in browsers that don't support it natively
|
||||
scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })
|
||||
```
|
||||
|
||||
That's why only native smooth scrolling is supported out of the box. There are two common ways you can smooth scroll browsers that don't support it natively. Below is all three, which one is best for you depends on what is the most important to your use case:: load time, consistency or quality.
|
||||
|
||||
##### Load time
|
||||
|
||||
In many scenarios smooth scrolling can be used as a progressive enhancement. If the user is on a browser that don't implement smooth scrolling it'll simply scroll instantly and your bundlesize is only as large as it has to be.
|
||||
|
||||
```js
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
|
||||
scrollIntoView(node, { behavior: 'smooth' })
|
||||
```
|
||||
|
||||
##### Consistency
|
||||
|
||||
If a consistent smooth scrolling experience is a priority and you really don't want any surprises between different browsers and enviroments. In other words don't want to be affected by how a vendor might implement native smooth scrolling, then [`smooth-scroll-into-view-if-needed`](https://github.com/stipsan/smooth-scroll-into-view-if-needed) is your best option. It ensures the same smooth scrolling experience for every browser.
|
||||
|
||||
```js
|
||||
import smoothScrollIntoView from 'smooth-scroll-into-view-if-needed'
|
||||
|
||||
smoothScrollIntoView(node, { behavior: 'smooth' })
|
||||
```
|
||||
|
||||
##### Quality
|
||||
|
||||
If you want to use native smooth scrolling when it's available, and fallback to the smooth scrolling ponyfill:
|
||||
|
||||
```js
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
import smoothScrollIntoView from 'smooth-scroll-into-view-if-needed'
|
||||
|
||||
const scrollIntoViewSmoothly =
|
||||
'scrollBehavior' in document.documentElement.style
|
||||
? scrollIntoView
|
||||
: smoothScrollIntoView
|
||||
|
||||
scrollIntoViewSmoothly(node, { behavior: 'smooth' })
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### scrollIntoView(target, [options])
|
||||
|
||||
> New API introduced in `v1.3.0`
|
||||
|
||||
### options
|
||||
|
||||
Type: `Object`
|
||||
|
||||
#### behavior
|
||||
|
||||
Type: `'auto' | 'smooth' | Function`<br> Default: `'auto'`
|
||||
|
||||
> Introduced in `v2.1.0`
|
||||
|
||||
##### `'auto'`
|
||||
|
||||
The auto option unlocks a few interesting opportunities.
|
||||
The browser will decide based on user preferences wether it should smooth scroll or not.
|
||||
On top of that you can control/override scrolling behavior through the [`scroll-behavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) CSS property.
|
||||
|
||||
Some people get [motion sick from animations](https://css-tricks.com/smooth-scrolling-accessibility/#article-header-id-5). You can use CSS to turn off smooth scrolling in those cases to avoid making them dizzy:
|
||||
|
||||
```css
|
||||
html,
|
||||
.scroll-container {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
html,
|
||||
.scroll-container {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
html,
|
||||
.scroll-container {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### `'smooth'`
|
||||
|
||||
Using `behavior: 'smooth'` is the easiest way to smooth scroll an element as it does not require any CSS, just a browser that implements it. [More information.](#ponyfill-smooth-scrolling)
|
||||
|
||||
##### `Function`
|
||||
|
||||
When given a function then this library will only calculate what should be scrolled and leave it up to you to perform the actual scrolling.
|
||||
|
||||
The callback is given an array over actions. Each action contain a reference to an element that should be scrolled, with its top and left scrolling coordinates.
|
||||
What you return is passed through, allowing you to implement a Promise interface if you want to (check [`smooth-scroll-into-view-if-needed`](https://github.com/stipsan/smooth-scroll-into-view-if-needed) to see an example of that).
|
||||
|
||||
```js
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
const node = document.getElementById('hero')
|
||||
|
||||
scrollIntoView(node, {
|
||||
// Your scroll actions will always be an array, even if there is nothing to scroll
|
||||
behavior: actions =>
|
||||
// list is sorted from innermost (closest parent to your target) to outermost (often the document.body or viewport)
|
||||
actions.forEach(({ el, top, left }) => {
|
||||
// implement the scroll anyway you want
|
||||
el.scrollTop = top
|
||||
el.scrollLeft = left
|
||||
|
||||
// If you need the relative scroll coordinates, for things like window.scrollBy style logic or whatever, just do the math
|
||||
const offsetTop = el.scrollTop - top
|
||||
const offsetLeft = el.scrollLeft - left
|
||||
}),
|
||||
// all the other options (scrollMode, block, inline) still work, so you don't need to reimplement them (unless you really really want to)
|
||||
})
|
||||
```
|
||||
|
||||
Check the demo to see an [example with popmotion and a spring transition](https://scroll-into-view-if-needed.netlify.com/#custom-transition).
|
||||
|
||||
> If you only need the custom behavior you might be better off by using the compute library directly: https://github.com/stipsan/compute-scroll-into-view
|
||||
|
||||
#### [block](https://scroll-into-view-if-needed.netlify.com/#scroll-alignment)
|
||||
|
||||
Type: `'start' | 'center' | 'end' | 'nearest'`<br> Default: `'center'`
|
||||
|
||||
> Introduced in `v2.1.0`
|
||||
|
||||
[More info.](https://github.com/stipsan/compute-scroll-into-view#block)
|
||||
|
||||
#### [inline](https://scroll-into-view-if-needed.netlify.com/#scroll-alignment)
|
||||
|
||||
Type: `'start' | 'center' | 'end' | 'nearest'`<br> Default: `'nearest'`
|
||||
|
||||
> Introduced in `v2.1.0`
|
||||
|
||||
[More info.](https://github.com/stipsan/compute-scroll-into-view#inline)
|
||||
|
||||
#### [scrollMode](https://scroll-into-view-if-needed.netlify.com/#scrolling-if-needed)
|
||||
|
||||
Type: `'always' | 'if-needed'`<br> Default: `'always'`
|
||||
|
||||
> Introduced in `v2.1.0`
|
||||
|
||||
[More info.](https://github.com/stipsan/compute-scroll-into-view#scrollmode)
|
||||
|
||||
#### [boundary](https://scroll-into-view-if-needed.netlify.com/#limit-propagation)
|
||||
|
||||
Type: `Element | Function`
|
||||
|
||||
> `Function` introduced in `v2.1.0`, `Element` introduced in `v1.1.0`
|
||||
|
||||
[More info.](https://github.com/stipsan/compute-scroll-into-view#boundary)
|
||||
|
||||
#### skipOverflowHiddenElements
|
||||
|
||||
Type: `Boolean`<br> Default: `false`
|
||||
|
||||
> Introduced in `v2.2.0`
|
||||
|
||||
[More info.](https://github.com/stipsan/compute-scroll-into-view#skipoverflowhiddenelements)
|
||||
|
||||
# TypeScript support
|
||||
|
||||
When the library itself is built on TypeScript there's no excuse for not publishing great library definitions!
|
||||
|
||||
This goes beyond just checking if you misspelled `behavior: 'smoooth'` to the return type of a custom behavior:
|
||||
|
||||
```typescript
|
||||
const scrolling = scrollIntoView(document.body, {
|
||||
behavior: actions => {
|
||||
return new Promise(
|
||||
...
|
||||
)
|
||||
},
|
||||
})
|
||||
// TypeScript understands that scrolling is a Promise, you can safely await on it
|
||||
scrolling.then(() => console.log('done scrolling'))
|
||||
```
|
||||
|
||||
You can optionally use a generic to ensure that `options.behavior` is the expected type.
|
||||
It can be useful if the custom behavior is implemented in another module:
|
||||
|
||||
```typescript
|
||||
const customBehavior = actions => {
|
||||
return new Promise(
|
||||
...
|
||||
)
|
||||
}
|
||||
|
||||
const scrolling = scrollIntoView<Promise<any>>(document.body, {
|
||||
behavior: customBehavior
|
||||
})
|
||||
// throws if customBehavior does not return a promise
|
||||
```
|
||||
|
||||
The options are available for you if you are wrapping this libary in another abstraction (like a React component):
|
||||
|
||||
```typescript
|
||||
import scrollIntoView, { Options } from 'scroll-into-view-if-needed'
|
||||
|
||||
interface CustomOptions extends Options {
|
||||
useBoundary?: boolean
|
||||
}
|
||||
|
||||
function scrollToTarget(selector, options: Options = {}) {
|
||||
const { useBoundary = false, ...scrollOptions } = options
|
||||
return scrollIntoView(document.querySelector(selector), scrollOptions)
|
||||
}
|
||||
```
|
||||
|
||||
# Breaking API changes from v1
|
||||
|
||||
Since v1 ponyfilled Element.scrollIntoViewIfNeeded, while v2 ponyfills Element.scrollIntoView, there are breaking changes from the differences in their APIs.
|
||||
|
||||
The biggest difference is that the new behavior follows the spec, so the "if-needed" behavior is **not enabled by default:**
|
||||
|
||||
##### v1
|
||||
|
||||
```js
|
||||
import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
|
||||
|
||||
// Only scrolls into view if needed, and to the nearest edge
|
||||
scrollIntoViewIfNeeded(target)
|
||||
```
|
||||
|
||||
##### v2
|
||||
|
||||
```js
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
|
||||
// Must provide these options to behave the same way as v1 default
|
||||
scrollIntoView(target, { block: 'nearest', scrollMode: 'if-needed' })
|
||||
```
|
||||
|
||||
#### centerIfNeeded
|
||||
|
||||
The old `Element.scrollIntoView` api only had two settings, align to top or bottom. [`Element.scrollIntoViewIfNeeded`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) had two more, align to the center or nearest edge.
|
||||
The `Element.scrollIntoView` spec now supports these two modes as `block: 'center'` and `block: 'nearest'`.
|
||||
Breaking changes sucks, but on the plus side your code is now more portable and will make this library easier to delete from your codebase on the glorious day browser support is good enough.
|
||||
|
||||
##### v1
|
||||
|
||||
```js
|
||||
import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
|
||||
|
||||
// v1.3.x and later
|
||||
scrollIntoViewIfNeeded(target, { centerIfNeeded: true })
|
||||
scrollIntoViewIfNeeded(target, { centerIfNeeded: false })
|
||||
// v1.2.x and earlier
|
||||
scrollIntoViewIfNeeded(target, true)
|
||||
scrollIntoViewIfNeeded(target, false)
|
||||
```
|
||||
|
||||
##### v2
|
||||
|
||||
```js
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
|
||||
scrollIntoView(target, { block: 'center' })
|
||||
scrollIntoView(target, { block: 'nearest' })
|
||||
```
|
||||
|
||||
#### duration
|
||||
|
||||
[More information.](#ponyfill-smooth-scrolling)
|
||||
|
||||
##### v1
|
||||
|
||||
```js
|
||||
import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
|
||||
|
||||
scrollIntoViewIfNeeded(target, { duration: 300 })
|
||||
```
|
||||
|
||||
##### v2
|
||||
|
||||
```js
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
// or
|
||||
import scrollIntoView from 'smooth-scroll-into-view-if-needed'
|
||||
|
||||
scrollIntoView(target, { behavior: 'smooth' })
|
||||
```
|
||||
|
||||
#### easing
|
||||
|
||||
This feature is removed, but you can achieve the same thing by implementing [`behavior: Function`](#function).
|
||||
|
||||
#### handleScroll
|
||||
|
||||
This is replaced with [`behavior: Function`](#function) with one key difference. Instead of firing once per element that should be scrolled, the new API only fire once and instead give you an array so you can much easier batch and scroll multiple elements at the same time. Or sync scrolling with another element if that's the kind of stuff you're into, I don't judge.
|
||||
|
||||
```diff
|
||||
-import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
|
||||
+import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
|
||||
-scrollIntoViewIfNeeded(node, {handleScroll: (el, {scrollTop, scrollLeft}) => {
|
||||
- el.scrollTop = scrollTop
|
||||
- el.scrollLeft = scrollLeft
|
||||
-}})
|
||||
+scrollIntoView(node, {behavior: actions.forEach(({el, top, left}) => {
|
||||
+ el.scrollTop = top
|
||||
+ el.scrollLeft = left
|
||||
+})})
|
||||
```
|
||||
|
||||
#### offset
|
||||
|
||||
This was always a buggy feature and warned against using in v1 as it might get dropped.
|
||||
It's much safer to use CSS wrapper elements for this kind of thing.
|
||||
|
||||
### scrollIntoViewIfNeeded(target, [centerIfNeeded], [animateOptions], [finalElement], [offsetOptions])
|
||||
|
||||
This API signature were warned to be dropped in `v2.0.0`, and it was.
|
||||
|
||||
# Related packages
|
||||
|
||||
- [compute-scroll-into-view](http://npmjs.com/package/compute-scroll-into-view) - the engine used by this library.
|
||||
- [smooth-scroll-into-view-if-needed](http://npmjs.com/package/smooth-scroll-into-view-if-needed) – ponyfills smooth scrolling.
|
||||
- [react-scroll-into-view-if-needed](https://www.npmjs.com/package/react-scroll-into-view-if-needed) – A thin wrapper to scroll your component into view.
|
||||
- [Don't be shy, add yours!](https://github.com/stipsan/scroll-into-view-if-needed/edit/master/README.md)
|
||||
|
||||
# Who's using this
|
||||
|
||||
- [zeit.co/docs](https://github.com/zeit/docs) – Documentation of ZEIT Now and other services.
|
||||
- [Selenium IDE](https://github.com/SeleniumHQ/selenium-ide) – An integrated development environment for Selenium scripts.
|
||||
- [Box UI Elements](https://github.com/box/box-ui-elements) – Box UI Elements are pre-built UI components that allow developers to add elements of the main Box web application into their own applications.
|
||||
- [react-responsive-ui](https://github.com/catamphetamine/react-responsive-ui) – Responsive React UI components.
|
||||
- [Mineral UI](https://github.com/mineral-ui/mineral-ui) –
|
||||
A design system and React component library for the web that lets you quickly build high-quality, accessible apps.
|
||||
- [Covalent](https://github.com/Teradata/covalent) – Teradata UI Platform built on Angular Material.
|
||||
- [docs.expo.io](https://github.com/expo/expo-docs) – Documentation for Expo, its SDK, client and services.
|
||||
- [Add yourself to the list 😉](https://github.com/stipsan/scroll-into-view-if-needed/edit/master/README.md)
|
||||
|
||||
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js?compression=gzip&label=gzip%20size&style=flat-square
|
||||
[size-badge]: http://img.badgesize.io/https://unpkg.com/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js?label=size&style=flat-square
|
||||
[unpkg-dist]: https://unpkg.com/scroll-into-view-if-needed/umd/
|
||||
[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square
|
||||
|
||||
## Sponsors
|
||||
|
||||
Thanks to [BrowserStack](https://www.browserstack.com) for sponsoring cross browser and device testing 😄
|
||||
|
||||
<a href="https://www.browserstack.com" target="_blank"><img src="https://www.browserstack.com/images/layout/logo.svg"></a>
|
||||
64
web/node_modules/scroll-into-view-if-needed/es/index.js
generated
vendored
Normal file
64
web/node_modules/scroll-into-view-if-needed/es/index.js
generated
vendored
Normal file
@@ -0,0 +1,64 @@
|
||||
import compute from 'compute-scroll-into-view';
|
||||
|
||||
function isOptionsObject(options) {
|
||||
return options === Object(options) && Object.keys(options).length !== 0;
|
||||
}
|
||||
|
||||
function defaultBehavior(actions, behavior) {
|
||||
if (behavior === void 0) {
|
||||
behavior = 'auto';
|
||||
}
|
||||
|
||||
var canSmoothScroll = 'scrollBehavior' in document.body.style;
|
||||
actions.forEach(function (_ref) {
|
||||
var el = _ref.el,
|
||||
top = _ref.top,
|
||||
left = _ref.left;
|
||||
|
||||
if (el.scroll && canSmoothScroll) {
|
||||
el.scroll({
|
||||
top: top,
|
||||
left: left,
|
||||
behavior: behavior
|
||||
});
|
||||
} else {
|
||||
el.scrollTop = top;
|
||||
el.scrollLeft = left;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getOptions(options) {
|
||||
if (options === false) {
|
||||
return {
|
||||
block: 'end',
|
||||
inline: 'nearest'
|
||||
};
|
||||
}
|
||||
|
||||
if (isOptionsObject(options)) {
|
||||
return options;
|
||||
}
|
||||
|
||||
return {
|
||||
block: 'start',
|
||||
inline: 'nearest'
|
||||
};
|
||||
}
|
||||
|
||||
function scrollIntoView(target, options) {
|
||||
var targetIsDetached = !target.ownerDocument.documentElement.contains(target);
|
||||
|
||||
if (isOptionsObject(options) && typeof options.behavior === 'function') {
|
||||
return options.behavior(targetIsDetached ? [] : compute(target, options));
|
||||
}
|
||||
|
||||
if (targetIsDetached) {
|
||||
return;
|
||||
}
|
||||
|
||||
var computeOptions = getOptions(options);
|
||||
return defaultBehavior(compute(target, computeOptions), computeOptions.behavior);
|
||||
}
|
||||
|
||||
export default scrollIntoView;
|
||||
0
web/node_modules/scroll-into-view-if-needed/es/types.js
generated
vendored
Normal file
0
web/node_modules/scroll-into-view-if-needed/es/types.js
generated
vendored
Normal file
73
web/node_modules/scroll-into-view-if-needed/index.js
generated
vendored
Normal file
73
web/node_modules/scroll-into-view-if-needed/index.js
generated
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = void 0;
|
||||
|
||||
var _computeScrollIntoView = _interopRequireDefault(require("compute-scroll-into-view"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function isOptionsObject(options) {
|
||||
return options === Object(options) && Object.keys(options).length !== 0;
|
||||
}
|
||||
|
||||
function defaultBehavior(actions, behavior) {
|
||||
if (behavior === void 0) {
|
||||
behavior = 'auto';
|
||||
}
|
||||
|
||||
var canSmoothScroll = 'scrollBehavior' in document.body.style;
|
||||
actions.forEach(function (_ref) {
|
||||
var el = _ref.el,
|
||||
top = _ref.top,
|
||||
left = _ref.left;
|
||||
|
||||
if (el.scroll && canSmoothScroll) {
|
||||
el.scroll({
|
||||
top: top,
|
||||
left: left,
|
||||
behavior: behavior
|
||||
});
|
||||
} else {
|
||||
el.scrollTop = top;
|
||||
el.scrollLeft = left;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getOptions(options) {
|
||||
if (options === false) {
|
||||
return {
|
||||
block: 'end',
|
||||
inline: 'nearest'
|
||||
};
|
||||
}
|
||||
|
||||
if (isOptionsObject(options)) {
|
||||
return options;
|
||||
}
|
||||
|
||||
return {
|
||||
block: 'start',
|
||||
inline: 'nearest'
|
||||
};
|
||||
}
|
||||
|
||||
function scrollIntoView(target, options) {
|
||||
var targetIsDetached = !target.ownerDocument.documentElement.contains(target);
|
||||
|
||||
if (isOptionsObject(options) && typeof options.behavior === 'function') {
|
||||
return options.behavior(targetIsDetached ? [] : (0, _computeScrollIntoView["default"])(target, options));
|
||||
}
|
||||
|
||||
if (targetIsDetached) {
|
||||
return;
|
||||
}
|
||||
|
||||
var computeOptions = getOptions(options);
|
||||
return defaultBehavior((0, _computeScrollIntoView["default"])(target, computeOptions), computeOptions.behavior);
|
||||
}
|
||||
|
||||
var _default = scrollIntoView;
|
||||
exports["default"] = _default;
|
||||
module.exports = exports.default;
|
||||
175
web/node_modules/scroll-into-view-if-needed/package.json
generated
vendored
Normal file
175
web/node_modules/scroll-into-view-if-needed/package.json
generated
vendored
Normal file
@@ -0,0 +1,175 @@
|
||||
{
|
||||
"_from": "scroll-into-view-if-needed@^2.2.20",
|
||||
"_id": "scroll-into-view-if-needed@2.2.24",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-vsC6SzyIZUyJG8o4nbUDCiIwsPdH6W/FVmjT2avR2hp/yzS53JjGmg/bKD20TkoNajbu5dAQN4xR7yes4qhwtQ==",
|
||||
"_location": "/scroll-into-view-if-needed",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "scroll-into-view-if-needed@^2.2.20",
|
||||
"name": "scroll-into-view-if-needed",
|
||||
"escapedName": "scroll-into-view-if-needed",
|
||||
"rawSpec": "^2.2.20",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "^2.2.20"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/antd",
|
||||
"/rc-menu"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.24.tgz",
|
||||
"_shasum": "12bca532990769bd509115a49edcfa755e92a0ea",
|
||||
"_spec": "scroll-into-view-if-needed@^2.2.20",
|
||||
"_where": "/Users/thilina/TestProjects/icehrm-pro/web/node_modules/antd",
|
||||
"author": {
|
||||
"name": "Cody Olsen"
|
||||
},
|
||||
"browserify": {
|
||||
"transform": [
|
||||
"loose-envify"
|
||||
]
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/stipsan/scroll-into-view-if-needed/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./umd/scroll-into-view-if-needed.min.js",
|
||||
"maxSize": "3.2 kB",
|
||||
"compression": "none"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"compute-scroll-into-view": "^1.0.13"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "7.8.3",
|
||||
"@babel/core": "7.8.3",
|
||||
"@babel/plugin-external-helpers": "7.8.3",
|
||||
"@babel/preset-env": "7.8.3",
|
||||
"@babel/preset-typescript": "7.8.3",
|
||||
"babel-eslint": "10.0.3",
|
||||
"babel-plugin-add-module-exports": "1.0.2",
|
||||
"babel-plugin-dev-expression": "0.2.2",
|
||||
"concurrently": "5.0.2",
|
||||
"eslint": "4.19.1",
|
||||
"eslint-config-prettier": "4.0.0",
|
||||
"eslint-plugin-import": "2.20.0",
|
||||
"eslint-plugin-react": "7.18.0",
|
||||
"flowgen": "1.10.0",
|
||||
"husky": "4.0.10",
|
||||
"lint-staged": "10.0.0",
|
||||
"prettier": "1.19.1",
|
||||
"prettier-package-json": "2.1.3",
|
||||
"rimraf": "3.0.0",
|
||||
"rollup": "1.29.0",
|
||||
"rollup-plugin-babel": "4.3.3",
|
||||
"rollup-plugin-commonjs": "10.1.0",
|
||||
"rollup-plugin-node-resolve": "5.2.0",
|
||||
"rollup-plugin-replace": "2.2.0",
|
||||
"rollup-plugin-terser": "5.2.0",
|
||||
"semantic-release": "16.0.2",
|
||||
"tslint": "5.20.1",
|
||||
"tslint-config-prettier": "1.18.0",
|
||||
"typescript": "3.7.5"
|
||||
},
|
||||
"files": [
|
||||
"es",
|
||||
"typings",
|
||||
"umd"
|
||||
],
|
||||
"homepage": "https://scroll-into-view-if-needed.netlify.com",
|
||||
"keywords": [
|
||||
"behavior-smooth",
|
||||
"if-needed",
|
||||
"polyfill",
|
||||
"ponyfill",
|
||||
"scroll",
|
||||
"scroll-into-view",
|
||||
"scrollIntoView",
|
||||
"scrollIntoViewIfNeeded",
|
||||
"scrollMode",
|
||||
"smooth",
|
||||
"smoothscroll",
|
||||
"typescript"
|
||||
],
|
||||
"license": "MIT",
|
||||
"lint-staged": {
|
||||
"*.js": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"*.{ts,tsx}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"*.json": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"*.css": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"*.md": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"**/package.json": [
|
||||
"prettier-package-json --write",
|
||||
"git add"
|
||||
],
|
||||
"**/.babelrc": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"main": "index.js",
|
||||
"module": "es/index.js",
|
||||
"name": "scroll-into-view-if-needed",
|
||||
"prettier": {
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"overrides": [
|
||||
{
|
||||
"files": ".babelrc",
|
||||
"options": {
|
||||
"parser": "json"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"release": {
|
||||
"prepare": [
|
||||
"@semantic-release/npm"
|
||||
]
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/stipsan/scroll-into-view-if-needed.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "yarn build:d.ts && yarn build:cjs && yarn build:es && yarn build:umd && yarn build:umd.min",
|
||||
"build:cjs": "BABEL_ENV=cjs babel src -d . --extensions '.ts'",
|
||||
"build:d.ts": "tsc --emitDeclarationOnly",
|
||||
"build:es": "BABEL_ENV=es babel src -d es --extensions '.ts'",
|
||||
"build:umd": "BABEL_ENV=umd NODE_ENV=development rollup -c -f umd -o umd/scroll-into-view-if-needed.js",
|
||||
"build:umd.min": "BABEL_ENV=umd NODE_ENV=production rollup -c -f umd -o umd/scroll-into-view-if-needed.min.js",
|
||||
"clean": "rimraf 'umd' 'es' 'typings'",
|
||||
"dev": "concurrently 'tsc --noEmit --watch' 'tsc --noEmit -p tests/typescript --watch' 'yarn build:cjs --watch' 'yarn build:es --watch' 'yarn build:umd --watch' 'yarn build:umd.min --watch'",
|
||||
"lint": "eslint ./integration-examples",
|
||||
"prebuild": "yarn clean",
|
||||
"precommit": "lint-staged",
|
||||
"prepublishOnly": "unset npm_config_cafile && yarn build",
|
||||
"typecheck": "tsc --noEmit && tsc --noEmit -p tests/typescript"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"typings": "typings/index.d.ts",
|
||||
"version": "2.2.24"
|
||||
}
|
||||
13
web/node_modules/scroll-into-view-if-needed/typings/index.d.ts
generated
vendored
Normal file
13
web/node_modules/scroll-into-view-if-needed/typings/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
import { CustomScrollBehaviorCallback, Options as BaseOptions, ScrollBehavior } from './types';
|
||||
export interface StandardBehaviorOptions extends BaseOptions {
|
||||
behavior?: ScrollBehavior;
|
||||
}
|
||||
export interface CustomBehaviorOptions<T> extends BaseOptions {
|
||||
behavior: CustomScrollBehaviorCallback<T>;
|
||||
}
|
||||
export interface Options<T = any> extends BaseOptions {
|
||||
behavior?: ScrollBehavior | CustomScrollBehaviorCallback<T>;
|
||||
}
|
||||
declare function scrollIntoView<T>(target: Element, options: CustomBehaviorOptions<T>): T;
|
||||
declare function scrollIntoView(target: Element, options?: Options | boolean): void;
|
||||
export default scrollIntoView;
|
||||
19
web/node_modules/scroll-into-view-if-needed/typings/types.d.ts
generated
vendored
Normal file
19
web/node_modules/scroll-into-view-if-needed/typings/types.d.ts
generated
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
export declare type ScrollBehavior = 'auto' | 'smooth';
|
||||
export declare type ScrollLogicalPosition = 'start' | 'center' | 'end' | 'nearest';
|
||||
export declare type ScrollMode = 'always' | 'if-needed';
|
||||
export declare type SkipOverflowHiddenElements = boolean;
|
||||
export interface Options {
|
||||
block?: ScrollLogicalPosition;
|
||||
inline?: ScrollLogicalPosition;
|
||||
scrollMode?: ScrollMode;
|
||||
boundary?: CustomScrollBoundary;
|
||||
skipOverflowHiddenElements?: SkipOverflowHiddenElements;
|
||||
}
|
||||
export declare type CustomScrollBoundaryCallback = (parent: Element) => boolean;
|
||||
export declare type CustomScrollBoundary = Element | CustomScrollBoundaryCallback | null;
|
||||
export interface CustomScrollAction {
|
||||
el: Element;
|
||||
top: number;
|
||||
left: number;
|
||||
}
|
||||
export declare type CustomScrollBehaviorCallback<T> = (actions: CustomScrollAction[]) => T;
|
||||
264
web/node_modules/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.js
generated
vendored
Normal file
264
web/node_modules/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.js
generated
vendored
Normal file
@@ -0,0 +1,264 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.scrollIntoView = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
function isElement(el) {
|
||||
return el != null && typeof el === 'object' && el.nodeType === 1;
|
||||
}
|
||||
|
||||
function canOverflow(overflow, skipOverflowHiddenElements) {
|
||||
if (skipOverflowHiddenElements && overflow === 'hidden') {
|
||||
return false;
|
||||
}
|
||||
|
||||
return overflow !== 'visible' && overflow !== 'clip';
|
||||
}
|
||||
|
||||
function getFrameElement(el) {
|
||||
if (!el.ownerDocument || !el.ownerDocument.defaultView) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return el.ownerDocument.defaultView.frameElement;
|
||||
}
|
||||
|
||||
function isHiddenByFrame(el) {
|
||||
var frame = getFrameElement(el);
|
||||
|
||||
if (!frame) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth;
|
||||
}
|
||||
|
||||
function isScrollable(el, skipOverflowHiddenElements) {
|
||||
if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
|
||||
var style = getComputedStyle(el, null);
|
||||
return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements) || isHiddenByFrame(el);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
|
||||
if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize || elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize) {
|
||||
return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;
|
||||
}
|
||||
|
||||
if (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize || elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize) {
|
||||
return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
var compute = (function (target, options) {
|
||||
var scrollMode = options.scrollMode,
|
||||
block = options.block,
|
||||
inline = options.inline,
|
||||
boundary = options.boundary,
|
||||
skipOverflowHiddenElements = options.skipOverflowHiddenElements;
|
||||
var checkBoundary = typeof boundary === 'function' ? boundary : function (node) {
|
||||
return node !== boundary;
|
||||
};
|
||||
|
||||
if (!isElement(target)) {
|
||||
throw new TypeError('Invalid target');
|
||||
}
|
||||
|
||||
var scrollingElement = document.scrollingElement || document.documentElement;
|
||||
var frames = [];
|
||||
var cursor = target;
|
||||
|
||||
while (isElement(cursor) && checkBoundary(cursor)) {
|
||||
cursor = cursor.parentNode;
|
||||
|
||||
if (cursor === scrollingElement) {
|
||||
frames.push(cursor);
|
||||
break;
|
||||
}
|
||||
|
||||
if (cursor === document.body && isScrollable(cursor) && !isScrollable(document.documentElement)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (isScrollable(cursor, skipOverflowHiddenElements)) {
|
||||
frames.push(cursor);
|
||||
}
|
||||
}
|
||||
|
||||
var viewportWidth = window.visualViewport ? visualViewport.width : innerWidth;
|
||||
var viewportHeight = window.visualViewport ? visualViewport.height : innerHeight;
|
||||
var viewportX = window.scrollX || pageXOffset;
|
||||
var viewportY = window.scrollY || pageYOffset;
|
||||
|
||||
var _target$getBoundingCl = target.getBoundingClientRect(),
|
||||
targetHeight = _target$getBoundingCl.height,
|
||||
targetWidth = _target$getBoundingCl.width,
|
||||
targetTop = _target$getBoundingCl.top,
|
||||
targetRight = _target$getBoundingCl.right,
|
||||
targetBottom = _target$getBoundingCl.bottom,
|
||||
targetLeft = _target$getBoundingCl.left;
|
||||
|
||||
var targetBlock = block === 'start' || block === 'nearest' ? targetTop : block === 'end' ? targetBottom : targetTop + targetHeight / 2;
|
||||
var targetInline = inline === 'center' ? targetLeft + targetWidth / 2 : inline === 'end' ? targetRight : targetLeft;
|
||||
var computations = [];
|
||||
|
||||
for (var index = 0; index < frames.length; index++) {
|
||||
var frame = frames[index];
|
||||
|
||||
var _frame$getBoundingCli = frame.getBoundingClientRect(),
|
||||
height = _frame$getBoundingCli.height,
|
||||
width = _frame$getBoundingCli.width,
|
||||
top = _frame$getBoundingCli.top,
|
||||
right = _frame$getBoundingCli.right,
|
||||
bottom = _frame$getBoundingCli.bottom,
|
||||
left = _frame$getBoundingCli.left;
|
||||
|
||||
if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >= top && targetBottom <= bottom && targetLeft >= left && targetRight <= right) {
|
||||
return computations;
|
||||
}
|
||||
|
||||
var frameStyle = getComputedStyle(frame);
|
||||
var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
|
||||
var borderTop = parseInt(frameStyle.borderTopWidth, 10);
|
||||
var borderRight = parseInt(frameStyle.borderRightWidth, 10);
|
||||
var borderBottom = parseInt(frameStyle.borderBottomWidth, 10);
|
||||
var blockScroll = 0;
|
||||
var inlineScroll = 0;
|
||||
var scrollbarWidth = 'offsetWidth' in frame ? frame.offsetWidth - frame.clientWidth - borderLeft - borderRight : 0;
|
||||
var scrollbarHeight = 'offsetHeight' in frame ? frame.offsetHeight - frame.clientHeight - borderTop - borderBottom : 0;
|
||||
|
||||
if (scrollingElement === frame) {
|
||||
if (block === 'start') {
|
||||
blockScroll = targetBlock;
|
||||
} else if (block === 'end') {
|
||||
blockScroll = targetBlock - viewportHeight;
|
||||
} else if (block === 'nearest') {
|
||||
blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
|
||||
} else {
|
||||
blockScroll = targetBlock - viewportHeight / 2;
|
||||
}
|
||||
|
||||
if (inline === 'start') {
|
||||
inlineScroll = targetInline;
|
||||
} else if (inline === 'center') {
|
||||
inlineScroll = targetInline - viewportWidth / 2;
|
||||
} else if (inline === 'end') {
|
||||
inlineScroll = targetInline - viewportWidth;
|
||||
} else {
|
||||
inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
|
||||
}
|
||||
|
||||
blockScroll = Math.max(0, blockScroll + viewportY);
|
||||
inlineScroll = Math.max(0, inlineScroll + viewportX);
|
||||
} else {
|
||||
if (block === 'start') {
|
||||
blockScroll = targetBlock - top - borderTop;
|
||||
} else if (block === 'end') {
|
||||
blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
|
||||
} else if (block === 'nearest') {
|
||||
blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
|
||||
} else {
|
||||
blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
|
||||
}
|
||||
|
||||
if (inline === 'start') {
|
||||
inlineScroll = targetInline - left - borderLeft;
|
||||
} else if (inline === 'center') {
|
||||
inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
|
||||
} else if (inline === 'end') {
|
||||
inlineScroll = targetInline - right + borderRight + scrollbarWidth;
|
||||
} else {
|
||||
inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
|
||||
}
|
||||
|
||||
var scrollLeft = frame.scrollLeft,
|
||||
scrollTop = frame.scrollTop;
|
||||
blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
|
||||
inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
|
||||
targetBlock += scrollTop - blockScroll;
|
||||
targetInline += scrollLeft - inlineScroll;
|
||||
}
|
||||
|
||||
computations.push({
|
||||
el: frame,
|
||||
top: blockScroll,
|
||||
left: inlineScroll
|
||||
});
|
||||
}
|
||||
|
||||
return computations;
|
||||
});
|
||||
|
||||
function isOptionsObject(options) {
|
||||
return options === Object(options) && Object.keys(options).length !== 0;
|
||||
}
|
||||
|
||||
function defaultBehavior(actions, behavior) {
|
||||
if (behavior === void 0) {
|
||||
behavior = 'auto';
|
||||
}
|
||||
|
||||
var canSmoothScroll = 'scrollBehavior' in document.body.style;
|
||||
actions.forEach(function (_ref) {
|
||||
var el = _ref.el,
|
||||
top = _ref.top,
|
||||
left = _ref.left;
|
||||
|
||||
if (el.scroll && canSmoothScroll) {
|
||||
el.scroll({
|
||||
top: top,
|
||||
left: left,
|
||||
behavior: behavior
|
||||
});
|
||||
} else {
|
||||
el.scrollTop = top;
|
||||
el.scrollLeft = left;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getOptions(options) {
|
||||
if (options === false) {
|
||||
return {
|
||||
block: 'end',
|
||||
inline: 'nearest'
|
||||
};
|
||||
}
|
||||
|
||||
if (isOptionsObject(options)) {
|
||||
return options;
|
||||
}
|
||||
|
||||
return {
|
||||
block: 'start',
|
||||
inline: 'nearest'
|
||||
};
|
||||
}
|
||||
|
||||
function scrollIntoView(target, options) {
|
||||
var targetIsDetached = !target.ownerDocument.documentElement.contains(target);
|
||||
|
||||
if (isOptionsObject(options) && typeof options.behavior === 'function') {
|
||||
return options.behavior(targetIsDetached ? [] : compute(target, options));
|
||||
}
|
||||
|
||||
if (targetIsDetached) {
|
||||
return;
|
||||
}
|
||||
|
||||
var computeOptions = getOptions(options);
|
||||
return defaultBehavior(compute(target, computeOptions), computeOptions.behavior);
|
||||
}
|
||||
|
||||
return scrollIntoView;
|
||||
|
||||
})));
|
||||
1
web/node_modules/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js
generated
vendored
Normal file
1
web/node_modules/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).scrollIntoView=t()}(this,(function(){"use strict";function e(e){return null!=e&&"object"==typeof e&&1===e.nodeType}function t(e,t){return(!t||"hidden"!==e)&&("visible"!==e&&"clip"!==e)}function n(e,n){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var o=getComputedStyle(e,null);return t(o.overflowY,n)||t(o.overflowX,n)||function(e){var t=function(e){return e.ownerDocument&&e.ownerDocument.defaultView?e.ownerDocument.defaultView.frameElement:null}(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)}(e)}return!1}function o(e,t,n,o,r,i,l,c){return i<e&&l>t||i>e&&l<t?0:i<=e&&c<=n||l>=t&&c>=n?i-e-o:l>t&&c<n||i<e&&c>n?l-t+r:0}var r=function(t,r){var i=r.scrollMode,l=r.block,c=r.inline,d=r.boundary,u=r.skipOverflowHiddenElements,f="function"==typeof d?d:function(e){return e!==d};if(!e(t))throw new TypeError("Invalid target");for(var a=document.scrollingElement||document.documentElement,s=[],h=t;e(h)&&f(h);){if((h=h.parentNode)===a){s.push(h);break}h===document.body&&n(h)&&!n(document.documentElement)||n(h,u)&&s.push(h)}for(var p=window.visualViewport?visualViewport.width:innerWidth,m=window.visualViewport?visualViewport.height:innerHeight,v=window.scrollX||pageXOffset,g=window.scrollY||pageYOffset,w=t.getBoundingClientRect(),b=w.height,y=w.width,W=w.top,H=w.right,E=w.bottom,M=w.left,V="start"===l||"nearest"===l?W:"end"===l?E:W+b/2,k="center"===c?M+y/2:"end"===c?H:M,x=[],I=0;I<s.length;I++){var O=s[I],T=O.getBoundingClientRect(),j=T.height,B=T.width,C=T.top,D=T.right,L=T.bottom,R=T.left;if("if-needed"===i&&W>=0&&M>=0&&E<=m&&H<=p&&W>=C&&E<=L&&M>=R&&H<=D)return x;var X=getComputedStyle(O),Y=parseInt(X.borderLeftWidth,10),S=parseInt(X.borderTopWidth,10),N=parseInt(X.borderRightWidth,10),q=parseInt(X.borderBottomWidth,10),z=0,A=0,F="offsetWidth"in O?O.offsetWidth-O.clientWidth-Y-N:0,G="offsetHeight"in O?O.offsetHeight-O.clientHeight-S-q:0;if(a===O)z="start"===l?V:"end"===l?V-m:"nearest"===l?o(g,g+m,m,S,q,g+V,g+V+b,b):V-m/2,A="start"===c?k:"center"===c?k-p/2:"end"===c?k-p:o(v,v+p,p,Y,N,v+k,v+k+y,y),z=Math.max(0,z+g),A=Math.max(0,A+v);else{z="start"===l?V-C-S:"end"===l?V-L+q+G:"nearest"===l?o(C,L,j,S,q+G,V,V+b,b):V-(C+j/2)+G/2,A="start"===c?k-R-Y:"center"===c?k-(R+B/2)+F/2:"end"===c?k-D+N+F:o(R,D,B,Y,N+F,k,k+y,y);var J=O.scrollLeft,K=O.scrollTop;V+=K-(z=Math.max(0,Math.min(K+z,O.scrollHeight-j+G))),k+=J-(A=Math.max(0,Math.min(J+A,O.scrollWidth-B+F)))}x.push({el:O,top:z,left:A})}return x};function i(e){return e===Object(e)&&0!==Object.keys(e).length}return function(e,t){var n=!e.ownerDocument.documentElement.contains(e);if(i(t)&&"function"==typeof t.behavior)return t.behavior(n?[]:r(e,t));if(!n){var o=function(e){return!1===e?{block:"end",inline:"nearest"}:i(e)?e:{block:"start",inline:"nearest"}}(t);return function(e,t){void 0===t&&(t="auto");var n="scrollBehavior"in document.body.style;e.forEach((function(e){var o=e.el,r=e.top,i=e.left;o.scroll&&n?o.scroll({top:r,left:i,behavior:t}):(o.scrollTop=r,o.scrollLeft=i)}))}(r(e,o),o.behavior)}}}));
|
||||
Reference in New Issue
Block a user