mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-05-17 07:09:40 +03:00
WIP: v2.0.0 intial commit
This commit is contained in:
Rene
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": [
|
||||
"@babel/plugin-transform-modules-commonjs"
|
||||
],
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"targets": {
|
||||
"node": "current"
|
||||
}
|
||||
}
|
||||
],
|
||||
"@babel/preset-typescript"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,731 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars">
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
|
||||
</a>
|
||||
</p>
|
||||
<h6 align="center">
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/package.json"><img src="https://img.shields.io/david/kingsora/overlayscrollbars.svg?style=flat-square" alt="Dependencies"></a>
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars"><img src="https://img.shields.io/npm/dt/overlayscrollbars.svg?style=flat-square" alt="Downloads"></a>
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars"><img src="https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square" alt="Version"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
|
||||
</h6>
|
||||
<h3 align="center">
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars">Website</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!demos">Demos</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!extensions">Extensions</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
|
||||
</h3>
|
||||
|
||||
> OverlayScrollbars is a javascript scrollbar plugin which hides native scrollbars, provides
|
||||
custom styleable overlay scrollbars and keeps the native functionality and feeling.
|
||||
|
||||
## Why
|
||||
|
||||
I've created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.
|
||||
|
||||
## Goals & Features
|
||||
|
||||
- A simple, powerful and good documented API.
|
||||
- High browser compatibility (<b>IE8+</b>, <b>Safari6+</b>, <b>Firefox</b>, <b>Opera</b>, <b>Chrome</b> and <b>Edge</b>).
|
||||
- Usage of the most recent technologies to ensure maximum efficiency and performance on newer browsers.
|
||||
- Can be used without any dependencies or with jQuery.
|
||||
- Automatic update detection - after the initialization you don't have to worry about updating.
|
||||
- Extremely powerful scroll method with features like animations, relative coordinates, scrollIntoView and more.
|
||||
- Mouse and touch support.
|
||||
- Textarea and Body support.
|
||||
- RTL Direction support. (with normalization)
|
||||
- Simple and effective scrollbar-styling.
|
||||
- Rich extension system.
|
||||
- TypeScript support.
|
||||
|
||||
## Framework Wrapper
|
||||
|
||||
OverlayScrollbars provides its own wrapper components for popular component-based front-end frameworks:
|
||||
|
||||
<img align="left" src="https://kingsora.github.io/OverlayScrollbars/frameworks/react/logo.svg" width="80" height="80" alt="React">
|
||||
|
||||
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-react"><img src="https://img.shields.io/npm/v/overlayscrollbars-react.svg?style=flat-square" alt="Version"></a>
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-react"><img src="https://img.shields.io/npm/dt/overlayscrollbars-react.svg?style=flat-square" alt="Downloads"></a>
|
||||
[README](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react)
|
||||
|
||||
```sh
|
||||
npm install overlayscrollbars-react
|
||||
```
|
||||
|
||||
<img align="left" src="https://kingsora.github.io/OverlayScrollbars/frameworks/vue/logo.svg" width="80" height="80" alt="Vue">
|
||||
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-vue"><img src="https://img.shields.io/npm/v/overlayscrollbars-vue.svg?style=flat-square" alt="Version"></a>
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-vue"><img src="https://img.shields.io/npm/dt/overlayscrollbars-vue.svg?style=flat-square" alt="Downloads"></a>
|
||||
[README](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue)
|
||||
|
||||
```sh
|
||||
npm install overlayscrollbars-vue
|
||||
```
|
||||
|
||||
<img align="left" src="https://kingsora.github.io/OverlayScrollbars/frameworks/angular/logo.svg" width="80" height="80" alt="Angular">
|
||||
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-ngx"><img src="https://img.shields.io/npm/v/overlayscrollbars-ngx.svg?style=flat-square" alt="Version"></a>
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-ngx"><img src="https://img.shields.io/npm/dt/overlayscrollbars-ngx.svg?style=flat-square" alt="Downloads"></a>
|
||||
[README](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx)
|
||||
|
||||
```sh
|
||||
npm install overlayscrollbars-ngx
|
||||
```
|
||||
|
||||
## Sponsors
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://www.browserstack.com" target="_blank">
|
||||
<img align="center" src="https://kingsora.github.io/OverlayScrollbars/img/browserstack.png" width="250">
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
Thanks to <a href="https://www.browserstack.com" target="_blank">BrowserStack</a> for sponsoring open source projects and letting me test OverlayScrollbars for free.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Dependencies
|
||||
|
||||
**The default version doesn't requires any dependencies!**
|
||||
|
||||
If you are using the jQuery dependent version it obviously requires [jQuery](https://jquery.com/) to work.
|
||||
It was tested with the jQuery versions: 1.9.1, 2.x, 3.x, and it won't work with jQuery slim.
|
||||
|
||||
## Download
|
||||
|
||||
#### manually
|
||||
Download OverlayScrollbars manually from [Releases](https://github.com/KingSora/OverlayScrollbars/releases).
|
||||
|
||||
#### cdn
|
||||
You can use OverlayScrollbars via a [cdn](https://cdnjs.com/libraries/overlayscrollbars).
|
||||
|
||||
#### npm
|
||||
OverlayScrollbars can be downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars).
|
||||
|
||||
```sh
|
||||
npm install overlayscrollbars
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
#### HTML
|
||||
|
||||
Load your CSS file(s) before the JS file(s), to prevent unexpected bugs.
|
||||
|
||||
Include **OverlayScrollbars.css** and **OverlayScrollbars.js** to your HTML file.
|
||||
|
||||
```html
|
||||
<!-- Plugin CSS -->
|
||||
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
|
||||
<!-- Plugin JS -->
|
||||
<script type="text/javascript" src="path/to/OverlayScrollbars.js"></script>
|
||||
```
|
||||
|
||||
If you are using the jQuery version, include [jQuery](https://jquery.com/) before the plugin and use **jquery.overlayScrollbars.js**
|
||||
|
||||
```html
|
||||
<!-- Plugin CSS -->
|
||||
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
|
||||
<!-- jQuery JS -->
|
||||
<script type="text/javascript" src="path/to/jquery.js"></script>
|
||||
<!-- Plugin JS -->
|
||||
<script type="text/javascript" src="path/to/jquery.overlayScrollbars.js"></script>
|
||||
```
|
||||
|
||||
#### JavaScript
|
||||
|
||||
Initialize the plugin after your document has been fully loaded.
|
||||
|
||||
Default initialization:
|
||||
```js
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
//The first argument are the elements to which the plugin shall be initialized
|
||||
//The second argument has to be at least a empty object or a object with your desired options
|
||||
OverlayScrollbars(document.querySelectorAll('body'), { });
|
||||
});
|
||||
```
|
||||
|
||||
jQuery initialization:
|
||||
```js
|
||||
$(function() {
|
||||
//The passed argument has to be at least a empty object or a object with your desired options
|
||||
$('body').overlayScrollbars({ });
|
||||
});
|
||||
```
|
||||
|
||||
#### TypeScript
|
||||
|
||||
OverlayScrollbars provides its own [TypeScript declarations](https://www.npmjs.com/package/@types/overlayscrollbars):
|
||||
```sh
|
||||
npm install @types/overlayscrollbars
|
||||
```
|
||||
|
||||
I recommend setting these options in your **tsconfig.json**:
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Options
|
||||
|
||||
Due to clarity I can't provide all informations here.
|
||||
Take the table below only as a overview of all options.
|
||||
[Please read the much more detailed documentation](https://kingsora.github.io/OverlayScrollbars/#!documentation).
|
||||
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" colspan="2">option</th>
|
||||
<th align="left">type</th>
|
||||
<th align="left">default</th>
|
||||
<th align="left">description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td colspan="2">className</td>
|
||||
<td>string / null</td>
|
||||
<td><code>"os-theme-dark"</code></td>
|
||||
<td>The class name which shall be added to the host element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">resize</td>
|
||||
<td>string</td>
|
||||
<td><code>"none"</code></td>
|
||||
<td>The resize behavior of the host element. This option works exactly like the CSS3 resize property.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">sizeAutoCapable</td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Indicates whether the host element is capable of "auto" sizes such as: <code>width: auto</code> and <code>height: auto</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">clipAlways</td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Indicates whether the content shall be clipped always.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">normalizeRTL</td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Indicates whether RTL scrolling shall be normalized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">paddingAbsolute</td>
|
||||
<td>boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Indicates whether the padding for the content shall be absolute.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">autoUpdate</td>
|
||||
<td>boolean / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Indicates whether the plugin instance shall be updated continuously within a update loop.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">autoUpdateInterval</td>
|
||||
<td>number</td>
|
||||
<td><code>33</code></td>
|
||||
<td>The interval in milliseconds in which a auto update shall be performed for this instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">updateOnLoad</td>
|
||||
<td>string / array / null</td>
|
||||
<td><code>["img"]</code></td>
|
||||
<td>Selectors of which the elements <code>load</code> event shall be handled by the plugin. Thats means OverlayScrollbars will trigger a automatic update if a element with a matching selector emits a <code>load</code> event. Per default OverlayScrollbars will update automatically if a <code>img</code> element loads.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">nativeScrollbarsOverlaid : {</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>showNativeScrollbars</td>
|
||||
<td>boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Indicates whether the native overlaid scrollbars shall be visible.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>initialize</td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>
|
||||
Indicates whether the plugin shall be initialized even if the native scrollbars are overlaid.<br>
|
||||
If you initialize the plugin on the body element, I recommend to set this option to false.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">overflowBehavior : {</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>x</td>
|
||||
<td>string</td>
|
||||
<td><code>"scroll"</code></td>
|
||||
<td>The overflow behavior for the x (horizontal) axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>y</td>
|
||||
<td>string</td>
|
||||
<td><code>"scroll"</code></td>
|
||||
<td>The overflow behavior for the y (vertical) axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">scrollbars : {</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>visibility</td>
|
||||
<td>string</td>
|
||||
<td><code>"auto"</code></td>
|
||||
<td>The basic visibility of the scrollbars.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>autoHide</td>
|
||||
<td>string</td>
|
||||
<td><code>"never"</code></td>
|
||||
<td>The possibility to hide visible scrollbars automatically after a certain action.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>autoHideDelay</td>
|
||||
<td>number</td>
|
||||
<td><code>800</code></td>
|
||||
<td>The delay in milliseconds before the scrollbars gets hidden automatically.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>dragScrolling</td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Defines whether the scrollbar-handle supports drag scrolling.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>clickScrolling</td>
|
||||
<td>boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Defines whether the scrollbar-track supports click scrolling.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>touchSupport</td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Indicates whether the scrollbar reacts to touch events.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>snapHandle</td>
|
||||
<td>boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Indicates whether the scrollbar handle-offset shall be snapped.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">textarea : {</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>dynWidth</td>
|
||||
<td>boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Indiactes whether the textarea width will be dynamic (content dependent).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>dynHeight</td>
|
||||
<td>boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Indiactes whether the textarea height will be dynamic (content dependent).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>inheritedAttrs</td>
|
||||
<td>string / array / null</td>
|
||||
<td><code>["style", "class"]</code></td>
|
||||
<td><b>During initialization:</b> Attributes which the generated host-element shall inherit from from the target textarea-element.<br/>
|
||||
<b>During destruction:</b> Attributes which the target textarea-element shall inherit from from the generated host-element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">callbacks : {</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onInitialized</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the plugin was initialized. It takes no arguments.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onInitializationWithdrawn</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the initialization of the plugin was aborted due to the option <code>nativeScrollbarsOverlaid : { initialize : false }</code>. It takes no arguments.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onDestroyed</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the plugin was destryoed. It takes no arguments.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onScrollStart</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the user starts scrolling. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onScroll</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after every scroll. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onScrollStop</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the user stops scrolling. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onOverflowChanged</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the overflow has changed. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onOverflowAmountChanged</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the overflow amount has changed. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onDirectionChanged</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the direction has changed. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onContentSizeChanged</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the content size has changed. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onHostSizeChanged</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the host size or host padding has changed. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>onUpdated</td>
|
||||
<td>function / null</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Gets fired after the host size has changed. It takes one argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" colspan="5">}</th>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Methods
|
||||
|
||||
Click on the method name to open a more detailed documentation.
|
||||
|
||||
#### Instance methods:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left">name</th>
|
||||
<th align="left">description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-options" target="_blank">.options()</a></b></td>
|
||||
<td>Returns or sets the options of the instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//get options
|
||||
var options = instance.options();
|
||||
//set options
|
||||
instance.options({ className : null });</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-update" target="_blank">.update()</a></b></td>
|
||||
<td>Updates the instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//soft update
|
||||
instance.update();
|
||||
//hard update
|
||||
instance.update(true);</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-sleep" target="_blank">.sleep()</a></b></td>
|
||||
<td>Disables every observation of the DOM and puts the instance to "sleep". This behavior can be reset by calling the <code>update()</code> method.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//put the instance to sleep
|
||||
instance.sleep();</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-scroll" target="_blank">.scroll()</a></b></td>
|
||||
<td>Returns the scroll information or sets the scroll position.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//get scroll information
|
||||
var scrollInfo = instance.scroll();
|
||||
//scroll 50px on both axis
|
||||
instance.scroll(50);
|
||||
//add 10px to the scroll offset of each axis
|
||||
instance.scroll({ x : "+=10", y : "+=10" });
|
||||
//scroll to 50% on both axis with a duration of 1000ms
|
||||
instance.scroll({ x : "50%", y : "50%" }, 1000);
|
||||
//scroll to the passed element with a duration of 1000ms
|
||||
instance.scroll($(selector), 1000);</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-scrollstop" target="_blank">.scrollStop()</a></b></td>
|
||||
<td>Stops the current scroll-animation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//scroll-animation duration is 10 seconds
|
||||
instance.scroll({ y : "100%" }, 10000);
|
||||
//abort the 10 seconds scroll-animation immediately
|
||||
instance.scrollStop();
|
||||
//scroll-animation duration is 1 second
|
||||
instance.scroll({ y : "100%" }, 1000);</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-getelements" target="_blank">.getElements()</a></b></td>
|
||||
<td>Returns all relevant elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//get the element to which the plugin was applied
|
||||
var pluginTarget = instance.getElements().target;</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-getstate" target="_blank">.getState()</a></b></td>
|
||||
<td>Returns a object which describes the current state of this instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//get the state of the plugin instance
|
||||
var pluginState = instance.getState();</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-destroy" target="_blank">.destroy()</a></b></td>
|
||||
<td>Destroys and disposes the current instance and removes all added elements form the DOM.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//destroy the instance
|
||||
instance.destroy();</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-ext" target="_blank">.ext()</a></b></td>
|
||||
<td>Returns the instance of a certain extension of the current plugin instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//get the instance of the extension "myExtension"
|
||||
var extensionInstance = instance.ext("myExtension");</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-addext" target="_blank">.addExt()</a></b></td>
|
||||
<td>Adds a extension to the current instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//add the registered extension "myExtension" to the plugin instance
|
||||
var extensionInstance = instance.addExt("myExtension");</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-removeext" target="_blank">.removeExt()</a></b></td>
|
||||
<td>Removes a extension from the current instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//add the registered extension "myExtension" to the plugin instance
|
||||
instance.addExt("myExtension");
|
||||
//remove the added extension "myExtension" from the plugin instance
|
||||
instance.removeExt("myExtension");</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
#### Global methods:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left">name</th>
|
||||
<th align="left">description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-defaultoptions" target="_blank">OverlayScrollbars.defaultOptions()</a></b></td>
|
||||
<td>Returns or Sets the default options for each new plugin initialization.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//get the current defaultOptions
|
||||
var defaultOptions = OverlayScrollbars.defaultOptions();
|
||||
//set new default options
|
||||
OverlayScrollbars.defaultOptions({
|
||||
className : "my-custom-class",
|
||||
resize : "both"
|
||||
});</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-globals" target="_blank">OverlayScrollbars.globals()</a></b></td>
|
||||
<td>Returns a plain object which contains global information about the plugin and each instance of it.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//get the global information
|
||||
var globals = OverlayScrollbars.globals();</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-extension" target="_blank">OverlayScrollbars.extension()</a></b></td>
|
||||
<td>Registers, Unregisters or returns extensions.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//register a dummy extension with the name "myExtension"
|
||||
OverlayScrollbars.extension("myExtension", function() { return { }; });
|
||||
//unregister the extension with the name "myExtension"
|
||||
OverlayScrollbars.extension("myExtension", null);
|
||||
//get the extension-object with the name "myExtension"
|
||||
var registeredExtension = OverlayScrollbars.extension("myExtension");
|
||||
//get all registered extension-objects
|
||||
var extensionObjects = OverlayScrollbars.extension();</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-valid" target="_blank">OverlayScrollbars.valid()</a></b></td>
|
||||
<td>Checks whether the passed object is a non-destroyed OverlayScrollbars instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
example(s):<br>
|
||||
<pre lang="js">
|
||||
//create OverlayScrollbars instance
|
||||
var osInstance = OverlayScrollbars(document.body, { });
|
||||
//returns true
|
||||
OverlayScrollbars.valid(osInstance);
|
||||
//destroy the instance
|
||||
osInstance.destroy();
|
||||
//returns false
|
||||
OverlayScrollbars.valid(osInstance);
|
||||
//returns false
|
||||
OverlayScrollbars.valid({ });</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Tests
|
||||
|
||||
It's a challenge to fully test a library like OverlayScrollbars, because it has to adapt to countless DOM setups and browsers.
|
||||
Nevertheless I've developed basic GUI-Tests. In these tests a element with applied OverlayScrollbars is compared to a native element.
|
||||
|
||||
You can run the tests by visiting [this](https://kingsora.github.io/OverlayScrollbars/#!demos/capabilites) page and clicking on the `Run` button. Please be aware that the tests need some time to complete.
|
||||
After the process is complete, the results are displayed in the console.
|
||||
|
||||
In case some tests are failing on your end, please open a issue with the console output of the tests (the `failed` array in particular).
|
||||
|
||||
## Future Plans
|
||||
|
||||
- Minimize the code as much as possible.
|
||||
- Frequent updates in terms of bug-fixes and enhancements.
|
||||
- Improve tests
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@@ -1,75 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const sh = require('shelljs');
|
||||
const chalk = require('chalk');
|
||||
const gulp = require('gulp');
|
||||
const uglify = require('uglify-js');
|
||||
const csso = require('csso');
|
||||
|
||||
const uglifyFiles = [
|
||||
{
|
||||
src: './js/OverlayScrollbars.js',
|
||||
dest: './js/OverlayScrollbars.min.js',
|
||||
},
|
||||
{
|
||||
src: './js/jquery.overlayScrollbars.js',
|
||||
dest: './js/jquery.overlayScrollbars.min.js',
|
||||
}
|
||||
];
|
||||
const cssoFiles = [
|
||||
{
|
||||
src: './css/OverlayScrollbars.css',
|
||||
dest: './css/OverlayScrollbars.min.css',
|
||||
}
|
||||
];
|
||||
|
||||
sh.echo(chalk.cyanBright('Start building:'));
|
||||
|
||||
gulp.task('uglify', function (done) {
|
||||
uglifyFiles.forEach((file) => {
|
||||
if (sh.test('-f', file.src)) {
|
||||
sh.echo(chalk.yellowBright('uglify: ') + chalk.greenBright(`${file.src} → ${file.dest}`));
|
||||
sh.ShellString(uglify.minify(fs.readFileSync(file.src, 'utf-8'), {
|
||||
ie8: true,
|
||||
compress: {
|
||||
ie8: true
|
||||
},
|
||||
mangle: {
|
||||
ie8: true,
|
||||
properties: {
|
||||
'regex': /^_/
|
||||
}
|
||||
},
|
||||
output: {
|
||||
ie8: true,
|
||||
beautify: false,
|
||||
comments: /@license|@preserve|^!/,
|
||||
indent_level: 4,
|
||||
indent_start: 0,
|
||||
quote_style: 0
|
||||
}
|
||||
}).code).to(file.dest);
|
||||
}
|
||||
else {
|
||||
sh.echo(chalk.redBright(`${file.src} not found!`));
|
||||
}
|
||||
});
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('csso', function (done) {
|
||||
cssoFiles.forEach((file) => {
|
||||
if (sh.test('-f', file.src)) {
|
||||
sh.echo(chalk.yellowBright('csso: ') + chalk.greenBright(`${file.src} → ${file.dest}`));
|
||||
sh.ShellString(csso.minify(fs.readFileSync(file.src, 'utf-8'), {
|
||||
restructure: false,
|
||||
comments: 'first-exclamation'
|
||||
}).css).to(file.dest);
|
||||
}
|
||||
else {
|
||||
sh.echo(chalk.redBright(`${file.src} not found!`));
|
||||
}
|
||||
});
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.parallel('uglify', 'csso')();
|
||||
File diff suppressed because one or more lines are too long
Vendored
-13
File diff suppressed because one or more lines are too long
+694
@@ -0,0 +1,694 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||
(global = global || self, factory(global.OverlayScrollbars = {}));
|
||||
}(this, (function (exports) { 'use strict';
|
||||
|
||||
const attr = (elm, attrName, value) => {
|
||||
if (value === undefined)
|
||||
return elm.getAttribute(attrName);
|
||||
elm.setAttribute(attrName, value);
|
||||
};
|
||||
const removeAttr = (elm, attrName) => {
|
||||
elm.removeAttribute(attrName);
|
||||
};
|
||||
const scrollLeft = (elm, value) => {
|
||||
if (value === undefined)
|
||||
return elm.scrollLeft;
|
||||
elm.scrollLeft = value;
|
||||
};
|
||||
const scrollTop = (elm, value) => {
|
||||
if (value === undefined)
|
||||
return elm.scrollTop;
|
||||
elm.scrollTop = value;
|
||||
};
|
||||
const val = (elm, value) => {
|
||||
if (value === undefined)
|
||||
return elm.value;
|
||||
elm.value = value;
|
||||
};
|
||||
|
||||
const rnothtmlwhite = (/[^\x20\t\r\n\f]+/g);
|
||||
const hasClass = (elm, className) => {
|
||||
return elm.classList.contains(className);
|
||||
};
|
||||
const addClass = (elm, className) => {
|
||||
let clazz;
|
||||
let i = 0;
|
||||
if (className) {
|
||||
const classes = className.match(rnothtmlwhite) || [];
|
||||
while ((clazz = classes[i++]))
|
||||
elm.classList.add(clazz);
|
||||
}
|
||||
};
|
||||
const removeClass = (elm, className) => {
|
||||
let clazz;
|
||||
let i = 0;
|
||||
if (className) {
|
||||
const classes = className.match(rnothtmlwhite) || [];
|
||||
while ((clazz = classes[i++]))
|
||||
elm.classList.remove(clazz);
|
||||
}
|
||||
};
|
||||
const conditionalClass = (elm, className, condition) => {
|
||||
if (condition) {
|
||||
addClass(elm, className);
|
||||
}
|
||||
else {
|
||||
removeClass(elm, className);
|
||||
}
|
||||
};
|
||||
|
||||
const type = (obj) => {
|
||||
if (obj === undefined)
|
||||
return obj + '';
|
||||
if (obj === null)
|
||||
return obj + '';
|
||||
return Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
|
||||
};
|
||||
function isNumber(obj) {
|
||||
return typeof obj === 'number';
|
||||
}
|
||||
function isString(obj) {
|
||||
return typeof obj === 'string';
|
||||
}
|
||||
function isBoolean(obj) {
|
||||
return typeof obj === 'boolean';
|
||||
}
|
||||
function isObject(obj) {
|
||||
return typeof obj === 'object' && !isArray(obj) && !isNull(obj);
|
||||
}
|
||||
function isFunction(obj) {
|
||||
return typeof obj === 'function';
|
||||
}
|
||||
function isUndefined(obj) {
|
||||
return obj === undefined;
|
||||
}
|
||||
function isNull(obj) {
|
||||
return obj === null;
|
||||
}
|
||||
function isArray(obj) {
|
||||
return Array.isArray(obj);
|
||||
}
|
||||
function isArrayLike(obj) {
|
||||
const length = !!obj && obj.length;
|
||||
return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
|
||||
}
|
||||
function isPlainObject(obj) {
|
||||
if (!obj || !isObject(obj) || type(obj) !== 'object')
|
||||
return false;
|
||||
let key;
|
||||
const proto = 'prototype';
|
||||
const hasOwnProperty = Object[proto].hasOwnProperty;
|
||||
const hasOwnConstructor = hasOwnProperty.call(obj, 'constructor');
|
||||
const hasIsPrototypeOf = obj.constructor && obj.constructor[proto] && hasOwnProperty.call(obj.constructor[proto], 'isPrototypeOf');
|
||||
if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
|
||||
return false;
|
||||
}
|
||||
for (key in obj) { }
|
||||
return isUndefined(key) || hasOwnProperty.call(obj, key);
|
||||
}
|
||||
function isHTMLElement(obj) {
|
||||
const strOwnerDocument = 'ownerDocument';
|
||||
const strHTMLElement = 'HTMLElement';
|
||||
const wnd = obj && obj[strOwnerDocument] ? (obj[strOwnerDocument].parentWindow || window) : window;
|
||||
return !!(isObject(wnd[strHTMLElement]) ? obj instanceof wnd[strHTMLElement] :
|
||||
obj && isObject(obj) && obj !== null && obj.nodeType === 1 && isString(obj.nodeName));
|
||||
}
|
||||
function isEmptyObject(obj) {
|
||||
for (let name in obj)
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function each(source, callback) {
|
||||
let i = 0;
|
||||
if (isArrayLike(source)) {
|
||||
for (; i < source.length; i++) {
|
||||
if (callback(source[i], i, source) === false)
|
||||
break;
|
||||
}
|
||||
}
|
||||
else if (source) {
|
||||
for (i in source) {
|
||||
if (callback(source[i], i, source) === false)
|
||||
break;
|
||||
}
|
||||
}
|
||||
return source;
|
||||
}
|
||||
const indexOf = (arr, item, fromIndex) => {
|
||||
return arr.indexOf(item, fromIndex);
|
||||
};
|
||||
|
||||
const extend = (target, ...sources) => {
|
||||
if (typeof target !== "object" && !isFunction(target)) {
|
||||
target = {};
|
||||
}
|
||||
each(sources, (source) => {
|
||||
if (source != null) {
|
||||
for (const name in source) {
|
||||
const copy = source[name];
|
||||
if (name === "__proto__" || target === copy) {
|
||||
continue;
|
||||
}
|
||||
const copyIsArray = isArray(copy);
|
||||
if (copy && (isPlainObject(copy) || copyIsArray)) {
|
||||
const src = target[name];
|
||||
let clone = src;
|
||||
if (copyIsArray && !isArray(src)) {
|
||||
clone = [];
|
||||
}
|
||||
else if (!copyIsArray && !isPlainObject(src)) {
|
||||
clone = {};
|
||||
}
|
||||
target[name] = extend(clone, copy);
|
||||
}
|
||||
else if (copy !== undefined) {
|
||||
target[name] = copy;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return target;
|
||||
};
|
||||
|
||||
const matchesFallback = (elm, selector) => {
|
||||
var nodeList = (elm.parentNode || document).querySelectorAll(selector) || [];
|
||||
var i = nodeList.length;
|
||||
while (i--)
|
||||
if (nodeList[i] == elm)
|
||||
return true;
|
||||
return false;
|
||||
};
|
||||
const matches = (elm, selector) => {
|
||||
return (elm.matches && elm.matches(selector)) || matchesFallback(elm, selector);
|
||||
};
|
||||
const elementIsVisible = (elm) => {
|
||||
return !!(elm.offsetWidth || elm.offsetHeight || elm.getClientRects().length);
|
||||
};
|
||||
const find = (selector, elm) => {
|
||||
const arr = [];
|
||||
each((elm || document).querySelectorAll(selector), (e) => {
|
||||
arr.push(e);
|
||||
});
|
||||
return arr;
|
||||
};
|
||||
const findFirst = (selector, elm) => {
|
||||
return (elm || document).querySelector(selector);
|
||||
};
|
||||
const is = (elm, selector) => {
|
||||
if (elm) {
|
||||
if (selector === ':visible')
|
||||
return elementIsVisible(elm);
|
||||
if (selector === ':hidden')
|
||||
return !elementIsVisible(elm);
|
||||
if (matches(elm, selector))
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
const children = (elm, selector) => {
|
||||
const children = [];
|
||||
each(elm && elm.children, (child) => {
|
||||
if (selector) {
|
||||
if (matches(child, selector))
|
||||
children.push(child);
|
||||
}
|
||||
else
|
||||
children.push(child);
|
||||
});
|
||||
return children;
|
||||
};
|
||||
const contents = (elm) => {
|
||||
return elm ? Array.from(elm.childNodes) : [];
|
||||
};
|
||||
const parent = (elm) => elm ? elm.parentElement : null;
|
||||
|
||||
const before = (parent, preferredAnchor, insertedElms) => {
|
||||
if (insertedElms) {
|
||||
let anchor = preferredAnchor;
|
||||
let fragment;
|
||||
if (!parent)
|
||||
return;
|
||||
if (isArrayLike(insertedElms)) {
|
||||
fragment = document.createDocumentFragment();
|
||||
each(insertedElms, (insertedElm) => {
|
||||
if (insertedElm === anchor) {
|
||||
anchor = insertedElm.previousSibling;
|
||||
}
|
||||
fragment.appendChild(insertedElm);
|
||||
});
|
||||
}
|
||||
else {
|
||||
fragment = insertedElms;
|
||||
}
|
||||
if (preferredAnchor) {
|
||||
if (!anchor) {
|
||||
anchor = parent.firstChild;
|
||||
}
|
||||
else if (anchor !== preferredAnchor) {
|
||||
anchor = anchor.nextSibling;
|
||||
}
|
||||
}
|
||||
parent.insertBefore(fragment, anchor);
|
||||
}
|
||||
};
|
||||
const appendChildren = (node, children) => { before(node, null, children); };
|
||||
const prependChildren = (node, children) => { before(node, node.firstChild, children); };
|
||||
const insertBefore = (node, insertedNodes) => { before(parent(node), node, insertedNodes); };
|
||||
const insertAfter = (node, insertedNodes) => { before(parent(node), node.nextSibling, insertedNodes); };
|
||||
const removeElements = (nodes) => {
|
||||
if (isArrayLike(nodes)) {
|
||||
each(Array.from(nodes), (e) => removeElements(e));
|
||||
}
|
||||
else if (nodes) {
|
||||
const parentNode = nodes.parentNode;
|
||||
if (parentNode)
|
||||
parentNode.removeChild(nodes);
|
||||
}
|
||||
};
|
||||
|
||||
const createDiv = () => {
|
||||
return document.createElement('div');
|
||||
};
|
||||
const createDOM = (html) => {
|
||||
const elm = createDiv();
|
||||
elm.innerHTML = html.trim();
|
||||
return each(contents(elm), (elm) => removeElements(elm));
|
||||
};
|
||||
|
||||
const cssNumber = {
|
||||
animationIterationCount: true,
|
||||
columnCount: true,
|
||||
fillOpacity: true,
|
||||
flexGrow: true,
|
||||
flexShrink: true,
|
||||
fontWeight: true,
|
||||
lineHeight: true,
|
||||
opacity: true,
|
||||
order: true,
|
||||
orphans: true,
|
||||
widows: true,
|
||||
zIndex: true,
|
||||
zoom: true
|
||||
};
|
||||
const setCSSVal = (elm, prop, val) => {
|
||||
try {
|
||||
if (elm.style[prop] !== undefined) {
|
||||
elm.style[prop] = parseCSSVal(prop, val);
|
||||
}
|
||||
}
|
||||
catch (e) { }
|
||||
};
|
||||
const parseCSSVal = (prop, val) => {
|
||||
return !cssNumber[prop.toLowerCase()] && isNumber(val) ? val + 'px' : val;
|
||||
};
|
||||
function style(elm, styles, val) {
|
||||
const getCptStyle = window.getComputedStyle;
|
||||
if (isString(styles)) {
|
||||
if (isUndefined(val)) {
|
||||
const cptStyle = getCptStyle(elm, null);
|
||||
return cptStyle != null ? cptStyle.getPropertyValue(styles) : elm.style[styles];
|
||||
}
|
||||
else {
|
||||
setCSSVal(elm, styles, val);
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (const key in styles)
|
||||
setCSSVal(elm, key, styles[key]);
|
||||
}
|
||||
}
|
||||
const hide = (elm) => {
|
||||
elm.style.display = 'none';
|
||||
};
|
||||
const show = (elm) => {
|
||||
elm.style.display = 'block';
|
||||
};
|
||||
|
||||
const offset = (elm) => {
|
||||
const rect = elm.getBoundingClientRect();
|
||||
return {
|
||||
top: rect.top + window.pageXOffset,
|
||||
left: rect.left + window.pageYOffset
|
||||
};
|
||||
};
|
||||
const position = (elm) => {
|
||||
return {
|
||||
top: elm.offsetTop,
|
||||
left: elm.offsetLeft
|
||||
};
|
||||
};
|
||||
|
||||
const jsCache = {};
|
||||
const cssCache = {};
|
||||
const firstLetterToUpper = (str) => {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
};
|
||||
const getDummyStyle = () => {
|
||||
return createDiv().style;
|
||||
};
|
||||
const cssPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
|
||||
const jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
|
||||
const cssProperty = (name) => {
|
||||
let result = cssCache[name];
|
||||
if (cssCache.hasOwnProperty(name))
|
||||
return result;
|
||||
const uppercasedName = firstLetterToUpper(name);
|
||||
const elmStyle = getDummyStyle();
|
||||
each(cssPrefixes, (prefix) => {
|
||||
const prefixWithoutDashes = prefix.replace(/-/g, '');
|
||||
const resultPossibilities = [
|
||||
name,
|
||||
prefix + name,
|
||||
prefixWithoutDashes + uppercasedName,
|
||||
firstLetterToUpper(prefixWithoutDashes) + uppercasedName
|
||||
];
|
||||
each(resultPossibilities, (resultPossibility) => {
|
||||
if (elmStyle[resultPossibility] !== undefined) {
|
||||
result = resultPossibility;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (result) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
cssCache[name] = result;
|
||||
return result;
|
||||
};
|
||||
const cssPropertyValue = (property, values, suffix) => {
|
||||
const name = property + ' ' + values;
|
||||
let result = cssCache[name];
|
||||
if (cssCache.hasOwnProperty(name))
|
||||
return result;
|
||||
const dummyStyle = getDummyStyle();
|
||||
const possbleValues = values.split(' ');
|
||||
const preparedSuffix = suffix || '';
|
||||
const cssPrefixesWithFirstEmpty = [''].concat(cssPrefixes);
|
||||
each(possbleValues, (possibleValue) => {
|
||||
each(cssPrefixesWithFirstEmpty, (prefix) => {
|
||||
const prop = prefix + possibleValue;
|
||||
dummyStyle.cssText = property + ':' + prop + preparedSuffix;
|
||||
if (dummyStyle.length) {
|
||||
result = prop;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (result) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
cssCache[name] = result;
|
||||
return result;
|
||||
};
|
||||
const jsAPI = (name) => {
|
||||
let result = jsCache[name];
|
||||
if (!jsCache.hasOwnProperty(name)) {
|
||||
result = window[name];
|
||||
each(jsPrefixes, (prefix) => {
|
||||
result = result || window[prefix + firstLetterToUpper(name)];
|
||||
if (result) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const resizeObserver = jsAPI('ResizeObserver');
|
||||
const mouseButton = (event) => {
|
||||
const button = event.button;
|
||||
if (!event.which && button !== undefined)
|
||||
return (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
|
||||
else
|
||||
return event.which;
|
||||
};
|
||||
|
||||
const templateTypePrefixSuffix = ['__TPL_', '_TYPE__'];
|
||||
const optionsTemplateTypes = [
|
||||
'boolean',
|
||||
'number',
|
||||
'string',
|
||||
'array',
|
||||
'object',
|
||||
'function',
|
||||
'null'
|
||||
].reduce((result, item) => {
|
||||
result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];
|
||||
return result;
|
||||
}, {});
|
||||
const validateInternal = function (options, template, optionsDiff, doWriteErrors, propPath) {
|
||||
const validatedOptions = {};
|
||||
const optionsCopy = Object.assign({}, options);
|
||||
for (const prop in template) {
|
||||
if (template.hasOwnProperty(prop) && options.hasOwnProperty(prop)) {
|
||||
const optionsDiffValue = isUndefined(optionsDiff[prop]) ? {} : optionsDiff[prop];
|
||||
const optionsValue = optionsCopy[prop];
|
||||
const templateValue = template[prop];
|
||||
const templateIsComplex = isPlainObject(templateValue);
|
||||
const propPrefix = propPath ? propPath + '.' : '';
|
||||
if (templateIsComplex && isPlainObject(optionsValue)) {
|
||||
const validatedInternal = validateInternal(optionsValue, templateValue, optionsDiffValue, doWriteErrors, propPrefix + prop);
|
||||
validatedOptions[prop] = validatedInternal.validated;
|
||||
optionsCopy[prop] = validatedInternal.foreign;
|
||||
each([optionsCopy, validatedOptions], (value) => {
|
||||
if (isEmptyObject(value[prop])) {
|
||||
delete value[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (!templateIsComplex) {
|
||||
let isValid = false;
|
||||
const errorEnumStrings = [];
|
||||
const errorPossibleTypes = [];
|
||||
const optionsValueType = type(optionsValue);
|
||||
const templateValueArr = !isArray(templateValue) ? [templateValue] : templateValue;
|
||||
each(templateValueArr, (currTemplateType) => {
|
||||
const isEnumString = indexOf(Object.values(optionsTemplateTypes), currTemplateType) < 0;
|
||||
if (isEnumString && isString(optionsValue)) {
|
||||
const enumStringSplit = currTemplateType.split(' ');
|
||||
isValid = !!enumStringSplit.find(possibility => possibility === optionsValue);
|
||||
errorEnumStrings.push(...enumStringSplit);
|
||||
}
|
||||
else {
|
||||
isValid = optionsTemplateTypes[optionsValueType] === currTemplateType;
|
||||
}
|
||||
errorPossibleTypes.push(isEnumString ? optionsTemplateTypes.string : currTemplateType);
|
||||
return !isValid;
|
||||
});
|
||||
if (isValid) {
|
||||
if (optionsValue !== optionsDiffValue) {
|
||||
validatedOptions[prop] = optionsValue;
|
||||
}
|
||||
}
|
||||
else if (doWriteErrors) {
|
||||
console.warn(`The option "${propPrefix}${prop}" wasn't set, because it doesn't accept the type [ ${optionsValueType.toUpperCase()} ] with the value of "${optionsValue}".\r\n` +
|
||||
`Accepted types are: [ ${errorPossibleTypes.join(', ').toUpperCase()} ].\r\n` +
|
||||
(errorEnumStrings.length > 0 ? `\r\nValid strings are: [ ${errorEnumStrings.join(', ')} ].` : ''));
|
||||
}
|
||||
}
|
||||
delete optionsCopy[prop];
|
||||
}
|
||||
}
|
||||
return {
|
||||
foreign: optionsCopy,
|
||||
validated: validatedOptions
|
||||
};
|
||||
};
|
||||
const validate = function (options, template, optionsDiff, doWriteErrors) {
|
||||
const result = validateInternal(options, template, optionsDiff || {}, doWriteErrors || false);
|
||||
const foreign = result.foreign;
|
||||
if (!isEmptyObject(foreign) && doWriteErrors)
|
||||
console.warn(`The following options are discarded due to invalidity:\r\n ${window.JSON.stringify(foreign, null, 2)}`);
|
||||
return result.validated;
|
||||
};
|
||||
|
||||
const classNameAllowedValues = [optionsTemplateTypes.string, optionsTemplateTypes.null];
|
||||
const numberAllowedValues = optionsTemplateTypes.number;
|
||||
const booleanNullAllowedValues = [optionsTemplateTypes.boolean, optionsTemplateTypes.null];
|
||||
const stringArrayNullAllowedValues = [optionsTemplateTypes.string, optionsTemplateTypes.array, optionsTemplateTypes.null];
|
||||
const booleanTrueTemplate = [true, optionsTemplateTypes.boolean];
|
||||
const booleanFalseTemplate = [false, optionsTemplateTypes.boolean];
|
||||
const callbackTemplate = [null, [optionsTemplateTypes.function, optionsTemplateTypes.null]];
|
||||
const resizeAllowedValues = 'none both horizontal vertical';
|
||||
const overflowBehaviorAllowedValues = 'visible-hidden visible-scroll scroll hidden';
|
||||
const scrollbarsVisibilityAllowedValues = 'visible hidden auto';
|
||||
const scrollbarsAutoHideAllowedValues = 'never scroll leavemove';
|
||||
const defaultOptionsWithTemplate = {
|
||||
className: ['os-theme-dark', classNameAllowedValues],
|
||||
resize: ['none', resizeAllowedValues],
|
||||
sizeAutoCapable: booleanTrueTemplate,
|
||||
clipAlways: booleanTrueTemplate,
|
||||
normalizeRTL: booleanTrueTemplate,
|
||||
paddingAbsolute: booleanFalseTemplate,
|
||||
autoUpdate: [null, booleanNullAllowedValues],
|
||||
autoUpdateInterval: [33, numberAllowedValues],
|
||||
updateOnLoad: [['img'], stringArrayNullAllowedValues],
|
||||
nativeScrollbarsOverlaid: {
|
||||
showNativeScrollbars: booleanFalseTemplate,
|
||||
initialize: booleanFalseTemplate
|
||||
},
|
||||
overflowBehavior: {
|
||||
x: ['scroll', overflowBehaviorAllowedValues],
|
||||
y: ['scroll', overflowBehaviorAllowedValues]
|
||||
},
|
||||
scrollbars: {
|
||||
visibility: ['auto', scrollbarsVisibilityAllowedValues],
|
||||
autoHide: ['never', scrollbarsAutoHideAllowedValues],
|
||||
autoHideDelay: [800, numberAllowedValues],
|
||||
dragScrolling: booleanTrueTemplate,
|
||||
clickScrolling: booleanFalseTemplate,
|
||||
touchSupport: booleanTrueTemplate,
|
||||
snapHandle: booleanFalseTemplate
|
||||
},
|
||||
textarea: {
|
||||
dynWidth: booleanFalseTemplate,
|
||||
dynHeight: booleanFalseTemplate,
|
||||
inheritedAttrs: [['style', 'class'], stringArrayNullAllowedValues],
|
||||
},
|
||||
callbacks: {
|
||||
onInitialized: callbackTemplate,
|
||||
onInitializationWithdrawn: callbackTemplate,
|
||||
onDestroyed: callbackTemplate,
|
||||
onScrollStart: callbackTemplate,
|
||||
onScroll: callbackTemplate,
|
||||
onScrollStop: callbackTemplate,
|
||||
onOverflowChanged: callbackTemplate,
|
||||
onOverflowAmountChanged: callbackTemplate,
|
||||
onDirectionChanged: callbackTemplate,
|
||||
onContentSizeChanged: callbackTemplate,
|
||||
onHostSizeChanged: callbackTemplate,
|
||||
onUpdated: callbackTemplate
|
||||
}
|
||||
};
|
||||
function convert(optionsWithTemplateObj, toTemplate) {
|
||||
const result = {};
|
||||
for (const key in optionsWithTemplateObj) {
|
||||
if (optionsWithTemplateObj.hasOwnProperty(key)) {
|
||||
const val = optionsWithTemplateObj[key];
|
||||
if (isArray(val))
|
||||
result[key] = val[toTemplate ? 1 : 0];
|
||||
else if (isObject(val))
|
||||
result[key] = convert(val, toTemplate);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
const optionsTemplate = convert(defaultOptionsWithTemplate, true);
|
||||
const defaultOptions = convert(defaultOptionsWithTemplate);
|
||||
|
||||
const targets = new Set();
|
||||
const targetInstanceMap = new WeakMap();
|
||||
const addInstance = (target, osInstance) => {
|
||||
targetInstanceMap.set(target, osInstance);
|
||||
targets.add(target);
|
||||
};
|
||||
const removeInstance = (target) => {
|
||||
targetInstanceMap.delete(target);
|
||||
targets.delete(target);
|
||||
};
|
||||
const getInstance = (target) => {
|
||||
return targetInstanceMap.get(target);
|
||||
};
|
||||
const allInstances = () => {
|
||||
const validTargetInstanceMap = new Map();
|
||||
targets.forEach((target) => {
|
||||
if (targetInstanceMap.has(target)) {
|
||||
validTargetInstanceMap.set(target, targetInstanceMap.get(target));
|
||||
}
|
||||
});
|
||||
targets.clear();
|
||||
validTargetInstanceMap.forEach((instance, validTarget) => {
|
||||
targets.add(validTarget);
|
||||
});
|
||||
return validTargetInstanceMap;
|
||||
};
|
||||
|
||||
window['hi'] = createDOM(`\
|
||||
<div class="os-host">\
|
||||
<div class="os-resize-observer-host"></div>\
|
||||
<div class="os-padding">\
|
||||
<div class="os-viewport">\
|
||||
<div class="os-content">\
|
||||
fdfhdfgh\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="os-scrollbar os-scrollbar-horizontal">\
|
||||
<div class="os-scrollbar-track">\
|
||||
<div class="os-scrollbar-handle"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="os-scrollbar os-scrollbar-vertical">\
|
||||
<div class="os-scrollbar-track">\
|
||||
<div class="os-scrollbar-handle"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="os-scrollbar-corner"></div>\
|
||||
</div>`);
|
||||
|
||||
exports.addClass = addClass;
|
||||
exports.addInstance = addInstance;
|
||||
exports.allInstances = allInstances;
|
||||
exports.appendChildren = appendChildren;
|
||||
exports.attr = attr;
|
||||
exports.children = children;
|
||||
exports.conditionalClass = conditionalClass;
|
||||
exports.contents = contents;
|
||||
exports.createDOM = createDOM;
|
||||
exports.createDiv = createDiv;
|
||||
exports.cssPrefixes = cssPrefixes;
|
||||
exports.cssProperty = cssProperty;
|
||||
exports.cssPropertyValue = cssPropertyValue;
|
||||
exports.defaultOptions = defaultOptions;
|
||||
exports.each = each;
|
||||
exports.extend = extend;
|
||||
exports.find = find;
|
||||
exports.findFirst = findFirst;
|
||||
exports.getInstance = getInstance;
|
||||
exports.hasClass = hasClass;
|
||||
exports.hide = hide;
|
||||
exports.indexOf = indexOf;
|
||||
exports.insertAfter = insertAfter;
|
||||
exports.insertBefore = insertBefore;
|
||||
exports.is = is;
|
||||
exports.isArray = isArray;
|
||||
exports.isArrayLike = isArrayLike;
|
||||
exports.isBoolean = isBoolean;
|
||||
exports.isEmptyObject = isEmptyObject;
|
||||
exports.isFunction = isFunction;
|
||||
exports.isHTMLElement = isHTMLElement;
|
||||
exports.isNull = isNull;
|
||||
exports.isNumber = isNumber;
|
||||
exports.isObject = isObject;
|
||||
exports.isPlainObject = isPlainObject;
|
||||
exports.isString = isString;
|
||||
exports.isUndefined = isUndefined;
|
||||
exports.jsAPI = jsAPI;
|
||||
exports.jsPrefixes = jsPrefixes;
|
||||
exports.mouseButton = mouseButton;
|
||||
exports.offset = offset;
|
||||
exports.optionsTemplate = optionsTemplate;
|
||||
exports.optionsTemplateTypes = optionsTemplateTypes;
|
||||
exports.parent = parent;
|
||||
exports.position = position;
|
||||
exports.prependChildren = prependChildren;
|
||||
exports.removeAttr = removeAttr;
|
||||
exports.removeClass = removeClass;
|
||||
exports.removeElements = removeElements;
|
||||
exports.removeInstance = removeInstance;
|
||||
exports.resizeObserver = resizeObserver;
|
||||
exports.scrollLeft = scrollLeft;
|
||||
exports.scrollTop = scrollTop;
|
||||
exports.show = show;
|
||||
exports.style = style;
|
||||
exports.type = type;
|
||||
exports.val = val;
|
||||
exports.validate = validate;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=index.bundle.js.map
|
||||
File diff suppressed because one or more lines are too long
+16
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="description" content="Server Syncing API Code Challenge" />
|
||||
<title>Server Syncing API</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="hi">hi</div>
|
||||
<script type="text/javascript" src="index.bundle.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+185
@@ -0,0 +1,185 @@
|
||||
// For a detailed explanation regarding each configuration property, visit:
|
||||
// https://jestjs.io/docs/en/configuration.html
|
||||
|
||||
module.exports = {
|
||||
// All imported modules in your tests should be mocked automatically
|
||||
// automock: false,
|
||||
|
||||
// Stop running tests after `n` failures
|
||||
// bail: 0,
|
||||
|
||||
// The directory where Jest should store its cached dependency information
|
||||
// cacheDirectory: "C:\\Users\\Rene\\AppData\\Local\\Temp\\jest",
|
||||
|
||||
// Automatically clear mock calls and instances between every test
|
||||
clearMocks: true,
|
||||
|
||||
// Indicates whether the coverage information should be collected while executing the test
|
||||
collectCoverage: true,
|
||||
|
||||
// An array of glob patterns indicating a set of files for which coverage information should be collected
|
||||
// collectCoverageFrom: undefined,
|
||||
|
||||
// The directory where Jest should output its coverage files
|
||||
coverageDirectory: "coverage",
|
||||
|
||||
// An array of regexp pattern strings used to skip coverage collection
|
||||
// coveragePathIgnorePatterns: [
|
||||
// "\\\\node_modules\\\\"
|
||||
// ],
|
||||
|
||||
// A list of reporter names that Jest uses when writing coverage reports
|
||||
// coverageReporters: [
|
||||
// "json",
|
||||
// "text",
|
||||
// "lcov",
|
||||
// "clover"
|
||||
// ],
|
||||
|
||||
// An object that configures minimum threshold enforcement for coverage results
|
||||
// coverageThreshold: undefined,
|
||||
|
||||
// A path to a custom dependency extractor
|
||||
// dependencyExtractor: undefined,
|
||||
|
||||
// Make calling deprecated APIs throw helpful error messages
|
||||
// errorOnDeprecated: false,
|
||||
|
||||
// Force coverage collection from ignored files using an array of glob patterns
|
||||
// forceCoverageMatch: [],
|
||||
|
||||
// A path to a module which exports an async function that is triggered once before all test suites
|
||||
// globalSetup: undefined,
|
||||
|
||||
// A path to a module which exports an async function that is triggered once after all test suites
|
||||
// globalTeardown: undefined,
|
||||
|
||||
// A set of global variables that need to be available in all test environments
|
||||
// globals: {},
|
||||
|
||||
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
|
||||
// maxWorkers: "50%",
|
||||
|
||||
// An array of directory names to be searched recursively up from the requiring module's location
|
||||
moduleDirectories: [
|
||||
"node_modules", "./src"
|
||||
],
|
||||
|
||||
// An array of file extensions your modules use
|
||||
moduleFileExtensions: [
|
||||
"js",
|
||||
"json",
|
||||
"jsx",
|
||||
"ts",
|
||||
"tsx",
|
||||
"node"
|
||||
],
|
||||
|
||||
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
|
||||
// moduleNameMapper: {},
|
||||
|
||||
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
|
||||
// modulePathIgnorePatterns: [],
|
||||
|
||||
// Activates notifications for test results
|
||||
// notify: false,
|
||||
|
||||
// An enum that specifies notification mode. Requires { notify: true }
|
||||
// notifyMode: "failure-change",
|
||||
|
||||
// A preset that is used as a base for Jest's configuration
|
||||
// preset: undefined,
|
||||
|
||||
// Run tests from one or more projects
|
||||
// projects: undefined,
|
||||
|
||||
// Use this configuration option to add custom reporters to Jest
|
||||
// reporters: undefined,
|
||||
|
||||
// Automatically reset mock state between every test
|
||||
// resetMocks: false,
|
||||
|
||||
// Reset the module registry before running each individual test
|
||||
// resetModules: false,
|
||||
|
||||
// A path to a custom resolver
|
||||
// resolver: undefined,
|
||||
|
||||
// Automatically restore mock state between every test
|
||||
// restoreMocks: false,
|
||||
|
||||
// The root directory that Jest should scan for tests and modules within
|
||||
// rootDir: undefined,
|
||||
|
||||
// A list of paths to directories that Jest should use to search for files in
|
||||
// roots: [
|
||||
// "<rootDir>"
|
||||
// ],
|
||||
|
||||
// Allows you to use a custom runner instead of Jest's default test runner
|
||||
// runner: "jest-runner",
|
||||
|
||||
// The paths to modules that run some code to configure or set up the testing environment before each test
|
||||
// setupFiles: [],
|
||||
|
||||
// A list of paths to modules that run some code to configure or set up the testing framework before each test
|
||||
// setupFilesAfterEnv: [],
|
||||
|
||||
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
|
||||
// snapshotSerializers: [],
|
||||
|
||||
// The test environment that will be used for testing
|
||||
// testEnvironment: "jest-environment-jsdom",
|
||||
|
||||
// Options that will be passed to the testEnvironment
|
||||
// testEnvironmentOptions: {},
|
||||
|
||||
// Adds a location field to test results
|
||||
// testLocationInResults: false,
|
||||
|
||||
// The glob patterns Jest uses to detect test files
|
||||
// testMatch: [
|
||||
// "**/__tests__/**/*.[jt]s?(x)",
|
||||
// "**/?(*.)+(spec|test).[tj]s?(x)"
|
||||
// ],
|
||||
|
||||
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
|
||||
testPathIgnorePatterns: [
|
||||
"\\\\node_modules\\\\", "./dist"
|
||||
],
|
||||
|
||||
// The regexp pattern or array of patterns that Jest uses to detect test files
|
||||
// testRegex: [],
|
||||
|
||||
// This option allows the use of a custom results processor
|
||||
// testResultsProcessor: undefined,
|
||||
|
||||
// This option allows use of a custom test runner
|
||||
// testRunner: "jasmine2",
|
||||
|
||||
// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
|
||||
// testURL: "http://localhost",
|
||||
|
||||
// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
|
||||
// timers: "real",
|
||||
|
||||
// A map from regular expressions to paths to transformers
|
||||
// transform: undefined,
|
||||
|
||||
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
|
||||
// transformIgnorePatterns: [
|
||||
// "\\\\node_modules\\\\"
|
||||
// ],
|
||||
|
||||
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
|
||||
// unmockedModulePathPatterns: undefined,
|
||||
|
||||
// Indicates whether each individual test should be reported during the run
|
||||
verbose: true,
|
||||
|
||||
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
|
||||
// watchPathIgnorePatterns: [],
|
||||
|
||||
// Whether to use watchman for file crawling
|
||||
// watchman: true,
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Vendored
-13
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Vendored
-13
File diff suppressed because one or more lines are too long
Generated
-3533
File diff suppressed because it is too large
Load Diff
+20
-41
@@ -1,45 +1,24 @@
|
||||
{
|
||||
"name": "overlayscrollbars",
|
||||
"version": "1.12.0",
|
||||
"description": "A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"custom",
|
||||
"scrollbar",
|
||||
"scrollbars",
|
||||
"scroll",
|
||||
"frontend"
|
||||
],
|
||||
"files": [
|
||||
"js/jquery.overlayScrollbars.js",
|
||||
"js/jquery.overlayScrollbars.min.js",
|
||||
"js/OverlayScrollbars.js",
|
||||
"js/OverlayScrollbars.min.js",
|
||||
"css/OverlayScrollbars.css",
|
||||
"css/OverlayScrollbars.min.css",
|
||||
"README.md",
|
||||
"LICENSE"
|
||||
],
|
||||
"homepage": "https://kingsora.github.io/OverlayScrollbars",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars/issues"
|
||||
},
|
||||
"main": "js/OverlayScrollbars.js",
|
||||
"scripts": {
|
||||
"build": "node build.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "KingSora | Rene Haas",
|
||||
"license": "MIT",
|
||||
"name": "OverlayScrollbars",
|
||||
"description": "OverlayScrollbars version 2",
|
||||
"version": "0.0.1",
|
||||
"devDependencies": {
|
||||
"chalk": "^2.4.2",
|
||||
"csso": "^3.5.1",
|
||||
"gulp": "^4.0.2",
|
||||
"shelljs": "^0.8.3",
|
||||
"uglify-js": "^3.8.1"
|
||||
"@babel/core": "^7.9.6",
|
||||
"@babel/plugin-transform-modules-commonjs": "^7.9.6",
|
||||
"@babel/preset-env": "^7.9.6",
|
||||
"@babel/preset-typescript": "^7.9.0",
|
||||
"@rollup/plugin-node-resolve": "^8.0.0",
|
||||
"@rollup/plugin-typescript": "^4.1.2",
|
||||
"@types/jest": "^25.2.3",
|
||||
"babel-jest": "^26.0.1",
|
||||
"jest": "^26.0.1",
|
||||
"rollup": "^1.21.4",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^3.9.3"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc && rollup -c",
|
||||
"prepare": "npm run build",
|
||||
"test": "jest --coverage"
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Rene Haas
|
||||
|
||||
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.
|
||||
@@ -1,111 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://angular.io/"><img src="https://kingsora.github.io/OverlayScrollbars/frameworks/angular/logo.svg" width="200" height="133" alt="Angular"></a>
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
|
||||
</p>
|
||||
<h6 align="center">
|
||||
<a href="https://github.com/angular/angular"><img src="https://img.shields.io/badge/Angular-%5E7.0.0-DD0031?style=flat-square&logo=Angular" alt="Angular"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.10.0-36befd?style=flat-square" alt="OverlayScrollbars"></a>
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-ngx"><img src="https://img.shields.io/npm/dt/overlayscrollbars-ngx.svg?style=flat-square" alt="Downloads"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-ngx/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
|
||||
</h6>
|
||||
<h3 align="center">
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/frameworks/angular/">Example</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
|
||||
</h3>
|
||||
<h5 align="center">
|
||||
The official OverlayScrollbars wrapper for Angular.
|
||||
</h5>
|
||||
|
||||
## Installation
|
||||
```sh
|
||||
npm install overlayscrollbars-ngx
|
||||
```
|
||||
|
||||
## Peer Dependencies
|
||||
OverlayScrollbars for Angular has the following **peer dependencies**:
|
||||
- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars)
|
||||
```
|
||||
npm install overlayscrollbars
|
||||
```
|
||||
- The Angular framework: [@angular/core](https://www.npmjs.com/package/@angular/core)
|
||||
```
|
||||
npm install @angular/core
|
||||
```
|
||||
## TypeScript
|
||||
- In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars):
|
||||
```
|
||||
npm install @types/overlayscrollbars
|
||||
```
|
||||
Since this wrapper is written in TypeScript it comes with its generated typings.<br>
|
||||
Check out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options.
|
||||
|
||||
## Usage
|
||||
#### CSS
|
||||
You have to import the `OverlayScrollbars.css` by yourself.<br>
|
||||
The component **doesn't** do it for you as the styles are **global styles**!<br>
|
||||
There are different ways to achieve this, in Angular the most simple way for me was to add [this line](https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-ngx/example/src/styles.css#L1) in the `styles` file:
|
||||
```css
|
||||
@import '~overlayscrollbars/css/OverlayScrollbars.css';
|
||||
```
|
||||
|
||||
#### Import
|
||||
First you need to import the module into your modules file:
|
||||
```ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { OverlayscrollbarsModule } from 'overlayscrollbars-ngx';
|
||||
|
||||
@NgModule({
|
||||
imports: [ OverlayscrollbarsModule ]
|
||||
})
|
||||
export class AppModule { }
|
||||
```
|
||||
After that you can import the component into your file(s):
|
||||
```ts
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
|
||||
```
|
||||
|
||||
#### Template
|
||||
After the import you can use it in templates like:
|
||||
```html
|
||||
<overlay-scrollbars>
|
||||
example content
|
||||
</overlay-scrollbars>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
Two properties are accepted: `options` and `extensions`.
|
||||
- The `options` property accepts a `object` and can be changed at any point in time, and the plugin will adapt.
|
||||
- The `extensions` property accepts a `string`, `string array` or `object` and is only taken into account if the component gets mounted.
|
||||
|
||||
```html
|
||||
<overlay-scrollbars
|
||||
[options]="{ scrollbars: { autoHide: 'scroll' } }"
|
||||
[extensions]="['extensionA', 'extensionB']"
|
||||
>
|
||||
</overlay-scrollbars>
|
||||
```
|
||||
You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), `extensions` are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization).
|
||||
|
||||
#### Instance
|
||||
If you get the component reference, it provides two methods: `osInstance()` and `osTarget()`.
|
||||
- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed.
|
||||
- The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component isn't mounted yet or already unmounted.
|
||||
|
||||
## Example App
|
||||
In case you need a example app for reference, you can use the example app in this repo(`example folder`):
|
||||
- [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/angular/)
|
||||
- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx/example)
|
||||
|
||||
If you wanna build the example app, run these commands:
|
||||
```sh
|
||||
npm run setup
|
||||
npm run build
|
||||
npm run example
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@@ -1,210 +0,0 @@
|
||||
const packageName = 'overlayscrollbars-ngx';
|
||||
const rollupUmdName = 'OverlayScrollbarsNgx';
|
||||
const filesInfo = {
|
||||
fileName: packageName,
|
||||
srcFolder: './src',
|
||||
distFolder: './dist',
|
||||
typingsFolder: './dist/types',
|
||||
exampleFolder: './example',
|
||||
ngcFolder: './ngc',
|
||||
tsconfigJsonPath: './tsconfig.json',
|
||||
packageJsonPath: './package.json',
|
||||
cache: [
|
||||
'./ngc'
|
||||
]
|
||||
}
|
||||
const packagePaths = {
|
||||
main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
|
||||
module: `${filesInfo.distFolder}/${filesInfo.fileName}.esm.js`,
|
||||
typings: `${filesInfo.typingsFolder}/index.d.ts`
|
||||
}
|
||||
const rollupUmdGlobals = {
|
||||
'@angular/core': 'ng.core',
|
||||
'rxjs': 'rxjs',
|
||||
'overlayscrollbars': 'OverlayScrollbars'
|
||||
};
|
||||
|
||||
const packageJson = require(filesInfo.packageJsonPath);
|
||||
const tsconfigJson = require(filesInfo.tsconfigJsonPath);
|
||||
|
||||
const path = require('path');
|
||||
const sh = require('shelljs');
|
||||
const chalk = require('chalk');
|
||||
const gulp = require('gulp');
|
||||
const rollup = require('rollup');
|
||||
const rollupCommonJs = require('rollup-plugin-commonjs');
|
||||
const rollupTypeScript = require('rollup-plugin-typescript2');
|
||||
const rollupResolve = require('rollup-plugin-node-resolve');
|
||||
const rollupInputConfig = {
|
||||
input: `${filesInfo.ngcFolder}/${filesInfo.srcFolder}/index.js`,
|
||||
external: [...Object.keys(packageJson.devDependencies), ...Object.keys(packageJson.peerDependencies)],
|
||||
plugins: [
|
||||
rollupResolve(),
|
||||
rollupCommonJs()
|
||||
]
|
||||
};
|
||||
const rollupOutputConfig = {
|
||||
exports: 'named',
|
||||
sourcemap: true
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
sh.echo(chalk.cyanBright('Start building:'));
|
||||
|
||||
gulp.task('prepare', function (done) {
|
||||
sh.echo(`> Removing ${filesInfo.distFolder}`);
|
||||
sh.rm('-rf', filesInfo.distFolder);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('ngc', function (done) {
|
||||
sh.echo('> Compile with "ngc"');
|
||||
|
||||
// aot compile .metadata.json: https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#build-artefacts
|
||||
/*
|
||||
* make sure metadata.json origins paths are correct, to do that
|
||||
* create a aotEntry dummy file which for that purpose
|
||||
*/
|
||||
let aotEntryFile = `${filesInfo.typingsFolder}/index.ts`;
|
||||
let srcEntryFile = `${filesInfo.srcFolder}/index.ts`;
|
||||
let aotImportPath = path.relative(path.dirname(path.resolve(aotEntryFile)), path.dirname(path.resolve(srcEntryFile)));
|
||||
sh.mkdir('-p', path.dirname(aotEntryFile));
|
||||
sh.ShellString(`export * from '${aotImportPath.split(path.sep).join('/')}/index'`).to(aotEntryFile);
|
||||
|
||||
let newTsconfigJson = {
|
||||
...tsconfigJson,
|
||||
// https://github.com/angular/angular/blob/master/packages/compiler-cli/src/transformers/api.ts#L40
|
||||
angularCompilerOptions: {
|
||||
...tsconfigJson.angularCompilerOptions,
|
||||
skipMetadataEmit: false,
|
||||
strictMetadataEmit: true,
|
||||
fullTemplateTypeCheck: true,
|
||||
flatModuleOutFile: `${packageName}.js`,
|
||||
flatModuleId: packageName
|
||||
},
|
||||
compilerOptions: {
|
||||
...tsconfigJson.compilerOptions,
|
||||
declarationDir: filesInfo.ngcFolder,
|
||||
outDir: filesInfo.ngcFolder,
|
||||
},
|
||||
files: [aotEntryFile],
|
||||
include: undefined,
|
||||
exclude: [filesInfo.distFolder, filesInfo.exampleFolder, 'node_modules']
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newTsconfigJson, null, 4)).to(filesInfo.tsconfigJsonPath);
|
||||
sh.exec('npx ngc -p tsconfig.json');
|
||||
|
||||
// delete the aotEntry dummy file
|
||||
sh.rm('-f', aotEntryFile);
|
||||
|
||||
// rename and move metadata.json to correct folder
|
||||
let aotMetadataJsonPath = path.normalize(`${filesInfo.ngcFolder}/${filesInfo.typingsFolder}/${packageName}.metadata.json`);
|
||||
let aotMetadataJsonPathNew = path.normalize(`${filesInfo.typingsFolder}/index.metadata.json`);
|
||||
if (sh.test('-f', aotMetadataJsonPath)) {
|
||||
sh.echo(chalk.yellowBright(' [metadata.json]: ') + chalk.greenBright(`${aotMetadataJsonPath} → ${aotMetadataJsonPathNew}`));
|
||||
sh.mv(aotMetadataJsonPath, aotMetadataJsonPathNew);
|
||||
}
|
||||
else {
|
||||
sh.echo(chalk.redBright(`Couldn't find metadata.json: "${aotMetadataJsonPath}"`));
|
||||
return;
|
||||
}
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('tsconfigJson', function (done) {
|
||||
sh.echo(`> Prepare ${filesInfo.tsconfigJsonPath}`);
|
||||
let newTsconfigJson = {
|
||||
...tsconfigJson,
|
||||
compilerOptions: {
|
||||
...tsconfigJson.compilerOptions,
|
||||
declarationDir: filesInfo.typingsFolder,
|
||||
outDir: filesInfo.distFolder,
|
||||
},
|
||||
files: undefined,
|
||||
include: [filesInfo.srcFolder],
|
||||
exclude: [filesInfo.distFolder, filesInfo.exampleFolder, 'node_modules']
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newTsconfigJson, null, 4)).to(filesInfo.tsconfigJsonPath);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('packageJson', function (done) {
|
||||
sh.echo(`> Prepare ${filesInfo.packageJsonPath}`);
|
||||
let newPackageJson = {
|
||||
...packageJson,
|
||||
...packagePaths,
|
||||
name: packageName,
|
||||
files: [
|
||||
path.normalize(filesInfo.srcFolder),
|
||||
path.normalize(filesInfo.distFolder)
|
||||
]
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(filesInfo.packageJsonPath);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('rollup', function (done) {
|
||||
sh.echo('> Rollup:');
|
||||
(async function () {
|
||||
let rollupTsconfig = {
|
||||
useTsconfigDeclarationDir: true,
|
||||
objectHashIgnoreUnknownHack: true,
|
||||
clean: true,
|
||||
tsconfig: filesInfo.tsconfigJsonPath,
|
||||
tsconfigOverride: {
|
||||
compilerOptions: {
|
||||
target: 'es5'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
rollupTsconfig.tsconfigOverride.compilerOptions.target = 'es5';
|
||||
let es5umdBundle = await rollup.rollup({
|
||||
...rollupInputConfig,
|
||||
plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(rollupInputConfig.plugins)
|
||||
});
|
||||
await es5umdBundle.write({
|
||||
name: rollupUmdName,
|
||||
globals: rollupUmdGlobals,
|
||||
file: packagePaths.main,
|
||||
format: 'umd',
|
||||
...rollupOutputConfig
|
||||
});
|
||||
sh.echo(chalk.yellowBright(` [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & umd]: `) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.main}`));
|
||||
|
||||
rollupTsconfig.tsconfigOverride.compilerOptions.target = 'es6';
|
||||
let es6esmBundle = await rollup.rollup({
|
||||
...rollupInputConfig,
|
||||
plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(rollupInputConfig.plugins)
|
||||
});
|
||||
await es6esmBundle.write({
|
||||
file: packagePaths.module,
|
||||
format: 'esm',
|
||||
...rollupOutputConfig
|
||||
});
|
||||
sh.echo(chalk.yellowBright(` [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & esm]: `) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.module}`));
|
||||
|
||||
filesInfo.cache.forEach(function (cacheFolder) {
|
||||
if (sh.test('-d', cacheFolder)) {
|
||||
sh.rm('-rf', cacheFolder);
|
||||
}
|
||||
});
|
||||
|
||||
sh.echo(chalk.greenBright('Building finished!'));
|
||||
done();
|
||||
})();
|
||||
});
|
||||
|
||||
gulp.task('example', function (done) {
|
||||
sh.echo();
|
||||
sh.echo(chalk.cyanBright(`Copy to example → ${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`));
|
||||
sh.mkdir('-p', `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`);
|
||||
sh.cp('-Rf', [filesInfo.srcFolder, filesInfo.distFolder, filesInfo.packageJsonPath], `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`);
|
||||
sh.echo(chalk.greenBright('Copying finished!'));
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.series('prepare', 'ngc', 'tsconfigJson', 'packageJson', 'rollup', 'example')();
|
||||
@@ -1,67 +0,0 @@
|
||||
import { Component, ElementRef, NgZone, Input, NgModule } from '@angular/core';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
var OverlayScrollbarsComponent = (function () {
|
||||
function OverlayScrollbarsComponent(_osTargetRef, ngZone) {
|
||||
this.ngZone = ngZone;
|
||||
this._osInstance = null;
|
||||
this._osTargetRef = _osTargetRef;
|
||||
}
|
||||
OverlayScrollbarsComponent.prototype.osInstance = function () {
|
||||
return this._osInstance;
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.osTarget = function () {
|
||||
return this._osTargetRef.nativeElement || null;
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.ngAfterViewInit = function () {
|
||||
var _this = this;
|
||||
this.ngZone.runOutsideAngular((function () {
|
||||
_this._osInstance = OverlayScrollbars(_this.osTarget(), _this._options || {}, _this._extensions);
|
||||
}));
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.ngOnDestroy = function () {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.destroy();
|
||||
this._osInstance = null;
|
||||
}
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.ngOnChanges = function (changes) {
|
||||
var optionsChange = changes._options;
|
||||
if (optionsChange && OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.options(optionsChange.currentValue);
|
||||
}
|
||||
};
|
||||
OverlayScrollbarsComponent.decorators = [
|
||||
{ type: Component, args: [{
|
||||
selector: 'overlay-scrollbars',
|
||||
host: { 'class': 'os-host' },
|
||||
template: "\n <div class=\"os-resize-observer-host\"></div>\n <div class=\"os-padding\">\n <div class=\"os-viewport\">\n <div class=\"os-content\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n <div class=\"os-scrollbar os-scrollbar-horizontal \">\n <div class=\"os-scrollbar-track\">\n <div class=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div class=\"os-scrollbar os-scrollbar-vertical\">\n <div class=\"os-scrollbar-track\">\n <div class=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div class=\"os-scrollbar-corner\"></div>\n ",
|
||||
styles: [':host { display: block; }']
|
||||
},] },
|
||||
];
|
||||
OverlayScrollbarsComponent.ctorParameters = function () { return [
|
||||
{ type: ElementRef },
|
||||
{ type: NgZone }
|
||||
]; };
|
||||
OverlayScrollbarsComponent.propDecorators = {
|
||||
_options: [{ type: Input, args: ['options',] }],
|
||||
_extensions: [{ type: Input, args: ['extensions',] }]
|
||||
};
|
||||
return OverlayScrollbarsComponent;
|
||||
}());
|
||||
|
||||
var OverlayscrollbarsModule = (function () {
|
||||
function OverlayscrollbarsModule() {
|
||||
}
|
||||
OverlayscrollbarsModule.decorators = [
|
||||
{ type: NgModule, args: [{
|
||||
imports: [],
|
||||
declarations: [OverlayScrollbarsComponent],
|
||||
exports: [OverlayScrollbarsComponent]
|
||||
},] },
|
||||
];
|
||||
return OverlayscrollbarsModule;
|
||||
}());
|
||||
|
||||
export { OverlayScrollbarsComponent, OverlayscrollbarsModule };
|
||||
//# sourceMappingURL=overlayscrollbars-ngx.esm.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -1,77 +0,0 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('overlayscrollbars')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'overlayscrollbars'], factory) :
|
||||
(global = global || self, factory(global.OverlayScrollbarsNgx = {}, global.ng.core, global.OverlayScrollbars));
|
||||
}(this, (function (exports, core, OverlayScrollbars) { 'use strict';
|
||||
|
||||
OverlayScrollbars = OverlayScrollbars && Object.prototype.hasOwnProperty.call(OverlayScrollbars, 'default') ? OverlayScrollbars['default'] : OverlayScrollbars;
|
||||
|
||||
var OverlayScrollbarsComponent = (function () {
|
||||
function OverlayScrollbarsComponent(_osTargetRef, ngZone) {
|
||||
this.ngZone = ngZone;
|
||||
this._osInstance = null;
|
||||
this._osTargetRef = _osTargetRef;
|
||||
}
|
||||
OverlayScrollbarsComponent.prototype.osInstance = function () {
|
||||
return this._osInstance;
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.osTarget = function () {
|
||||
return this._osTargetRef.nativeElement || null;
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.ngAfterViewInit = function () {
|
||||
var _this = this;
|
||||
this.ngZone.runOutsideAngular((function () {
|
||||
_this._osInstance = OverlayScrollbars(_this.osTarget(), _this._options || {}, _this._extensions);
|
||||
}));
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.ngOnDestroy = function () {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.destroy();
|
||||
this._osInstance = null;
|
||||
}
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.ngOnChanges = function (changes) {
|
||||
var optionsChange = changes._options;
|
||||
if (optionsChange && OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.options(optionsChange.currentValue);
|
||||
}
|
||||
};
|
||||
OverlayScrollbarsComponent.decorators = [
|
||||
{ type: core.Component, args: [{
|
||||
selector: 'overlay-scrollbars',
|
||||
host: { 'class': 'os-host' },
|
||||
template: "\n <div class=\"os-resize-observer-host\"></div>\n <div class=\"os-padding\">\n <div class=\"os-viewport\">\n <div class=\"os-content\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n <div class=\"os-scrollbar os-scrollbar-horizontal \">\n <div class=\"os-scrollbar-track\">\n <div class=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div class=\"os-scrollbar os-scrollbar-vertical\">\n <div class=\"os-scrollbar-track\">\n <div class=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div class=\"os-scrollbar-corner\"></div>\n ",
|
||||
styles: [':host { display: block; }']
|
||||
},] },
|
||||
];
|
||||
OverlayScrollbarsComponent.ctorParameters = function () { return [
|
||||
{ type: core.ElementRef },
|
||||
{ type: core.NgZone }
|
||||
]; };
|
||||
OverlayScrollbarsComponent.propDecorators = {
|
||||
_options: [{ type: core.Input, args: ['options',] }],
|
||||
_extensions: [{ type: core.Input, args: ['extensions',] }]
|
||||
};
|
||||
return OverlayScrollbarsComponent;
|
||||
}());
|
||||
|
||||
var OverlayscrollbarsModule = (function () {
|
||||
function OverlayscrollbarsModule() {
|
||||
}
|
||||
OverlayscrollbarsModule.decorators = [
|
||||
{ type: core.NgModule, args: [{
|
||||
imports: [],
|
||||
declarations: [OverlayScrollbarsComponent],
|
||||
exports: [OverlayScrollbarsComponent]
|
||||
},] },
|
||||
];
|
||||
return OverlayscrollbarsModule;
|
||||
}());
|
||||
|
||||
exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
|
||||
exports.OverlayscrollbarsModule = OverlayscrollbarsModule;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=overlayscrollbars-ngx.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -1,2 +0,0 @@
|
||||
export * from './overlayscrollbars.component';
|
||||
export * from './overlayscrollbars.module';
|
||||
@@ -1 +0,0 @@
|
||||
{"__symbolic":"module","version":4,"metadata":{"OverlayScrollbarsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"overlay-scrollbars","host":{"class":"os-host","$quoted$":["class"]},"template":"\n <div class=\"os-resize-observer-host\"></div>\n <div class=\"os-padding\">\n <div class=\"os-viewport\">\n <div class=\"os-content\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n <div class=\"os-scrollbar os-scrollbar-horizontal \">\n <div class=\"os-scrollbar-track\">\n <div class=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div class=\"os-scrollbar os-scrollbar-vertical\">\n <div class=\"os-scrollbar-track\">\n <div class=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div class=\"os-scrollbar-corner\"></div>\n ","styles":[":host { display: block; }"]}]}],"members":{"_options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5},"arguments":["options"]}]}],"_extensions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5},"arguments":["extensions"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":35,"character":58}]}],"osInstance":[{"__symbolic":"method"}],"osTarget":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"OverlayscrollbarsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"imports":[],"declarations":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}],"exports":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}]}]}],"members":{}}},"origins":{"OverlayScrollbarsComponent":"../../src/overlayscrollbars.component","OverlayscrollbarsModule":"../../src/overlayscrollbars.module"},"importAs":"overlayscrollbars-ngx"}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { ElementRef, SimpleChanges, OnDestroy, OnChanges, AfterViewInit, NgZone } from '@angular/core';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
export declare class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
|
||||
private ngZone;
|
||||
private _options;
|
||||
private _extensions;
|
||||
private _osInstance;
|
||||
private _osTargetRef;
|
||||
constructor(_osTargetRef: ElementRef, ngZone: NgZone);
|
||||
osInstance(): OverlayScrollbars | null;
|
||||
osTarget(): HTMLDivElement | null;
|
||||
ngAfterViewInit(): void;
|
||||
ngOnDestroy(): void;
|
||||
ngOnChanges(changes: SimpleChanges): void;
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
export declare class OverlayscrollbarsModule {
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
@@ -1,43 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events.json
|
||||
speed-measure-plugin.json
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@@ -1,27 +0,0 @@
|
||||
# Example
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.4.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
@@ -1,135 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"example": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"schematics": {},
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/example",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "example:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "example:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "example:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"karmaConfig": "src/karma.conf.js",
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"example-e2e": {
|
||||
"root": "e2e/",
|
||||
"projectType": "application",
|
||||
"prefix": "",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "example:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "example:serve:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": "e2e/tsconfig.e2e.json",
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "example"
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./src/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: require('path').join(__dirname, './tsconfig.e2e.json')
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
import { AppPage } from './app.po';
|
||||
|
||||
describe('workspace-project App', () => {
|
||||
let page: AppPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getTitleText()).toEqual('Welcome to example!');
|
||||
});
|
||||
});
|
||||
@@ -1,11 +0,0 @@
|
||||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class AppPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getTitleText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
-11207
File diff suppressed because it is too large
Load Diff
@@ -1,51 +0,0 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~7.1.0",
|
||||
"@angular/common": "~7.1.0",
|
||||
"@angular/compiler": "~7.1.0",
|
||||
"@angular/core": "~7.1.0",
|
||||
"@angular/forms": "~7.1.0",
|
||||
"@angular/platform-browser": "~7.1.0",
|
||||
"@angular/platform-browser-dynamic": "~7.1.0",
|
||||
"@angular/router": "~7.1.0",
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"core-js": "^2.6.11",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"overlayscrollbars-ngx": "^0.1.0",
|
||||
"rxjs": "~6.3.3",
|
||||
"tslib": "^1.11.1",
|
||||
"zone.js": "~0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.11.0",
|
||||
"@angular/cli": "~7.1.4",
|
||||
"@angular/compiler-cli": "~7.1.0",
|
||||
"@angular/language-service": "~7.1.0",
|
||||
"@types/jasmine": "~2.8.8",
|
||||
"@types/jasminewd2": "^2.0.8",
|
||||
"@types/node": "~8.9.4",
|
||||
"codelyzer": "~4.5.0",
|
||||
"jasmine-core": "~2.99.1",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~3.1.1",
|
||||
"karma-chrome-launcher": "~2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "~2.0.1",
|
||||
"karma-jasmine": "~1.1.2",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "^5.4.3",
|
||||
"ts-node": "~7.0.0",
|
||||
"tslint": "~5.11.0",
|
||||
"typescript": "~3.1.6"
|
||||
}
|
||||
}
|
||||
@@ -1,310 +0,0 @@
|
||||
:host {
|
||||
min-width: 600px;
|
||||
display: block;
|
||||
}
|
||||
.header {
|
||||
background: #36befd;
|
||||
background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
|
||||
background: linear-gradient(135deg, #36befd 1%, #6461f6 100%);
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
letter-spacing: 0.1pt;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 76px;
|
||||
box-shadow: 0 15px 20px -15px rgba(57, 120, 253, 0.15), 0 55px 50px -35px rgba(47, 78, 249, 0.12);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.header code {
|
||||
border-radius: 4px;
|
||||
margin: 2px;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
background: #fff;
|
||||
font-size: 10pt;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 255, 0.15);
|
||||
}
|
||||
.header code .code-keyword {
|
||||
color: #0059FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header code .code-char {
|
||||
color: #4D4D4C;
|
||||
}
|
||||
.header code .code-variable {
|
||||
color: #3778AD;
|
||||
}
|
||||
.header code .code-string {
|
||||
color: #279737;
|
||||
font-weight: 400;
|
||||
}
|
||||
.content {
|
||||
min-height: calc(100vh - 76px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-flow: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.content-section {
|
||||
position: relative;
|
||||
padding: 40px 0px;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-section:last-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.content-section:before,
|
||||
.content-section:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.content-section:nth-child(2n - 1) {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
.content-section:nth-child(2n - 1):before,
|
||||
.content-section:nth-child(2n - 1):after {
|
||||
background: #fff;
|
||||
}
|
||||
.content-section:nth-child(2n + 0) {
|
||||
background: #fff;
|
||||
}
|
||||
.content-section:nth-child(2n + 0):before,
|
||||
.content-section:nth-child(2n + 0):after {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
.content-section.skew:before,
|
||||
.content-section.skew:after {
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
.content-section.skew + .content-section:before,
|
||||
.content-section.skew + .content-section:after {
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
.content-section skew + .content-section.skew:before,
|
||||
.content-section.skew + .content-section.skew:before {
|
||||
top: 0;
|
||||
}
|
||||
.content-section + .content-section.skew:before {
|
||||
top: -50vw;
|
||||
}
|
||||
.content-section.skew + .content-section:after {
|
||||
bottom: -50vw;
|
||||
}
|
||||
.content-section + .content-section:after {
|
||||
top: 0;
|
||||
}
|
||||
.content-section.skew + .content-section.skew:after {
|
||||
bottom: 0;
|
||||
}
|
||||
.content-section.skew:first-child:before {
|
||||
top: -50vw !important;
|
||||
}
|
||||
.content-section.skew:last-child:after {
|
||||
bottom: -50vw !important;
|
||||
}
|
||||
.content-section-content-framework > span {
|
||||
font-weight: bold;
|
||||
font-size: 30pt;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.content-section-content-framework > span:not(:nth-child(2)) {
|
||||
display: inline-block;
|
||||
color: transparent;
|
||||
height: 190px;
|
||||
width: 190px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
.content-section-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.content-section-title > h2{
|
||||
text-align: center;
|
||||
font-size: 26pt;
|
||||
color: #39547A;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
.content-section-title > table{
|
||||
text-align: left;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.content-section-title > table tr {
|
||||
margin: 10px;
|
||||
}
|
||||
.content-section-title > table td {
|
||||
line-height: 18pt;
|
||||
}
|
||||
.content-section-title > table td:first-child {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
vertical-align: top;
|
||||
}
|
||||
.content-section-title > table td:first-child span{
|
||||
margin: 0px 6px;
|
||||
}
|
||||
.content-section-title > table td:last-child span {
|
||||
text-align: left;
|
||||
color: #36befd;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content-section-content {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.content-section-content .os-host,
|
||||
.content-section-content .os-host-textarea {
|
||||
border: 2px solid #36befd;
|
||||
width: 480px;
|
||||
max-height: 300px;
|
||||
margin: 10px auto 20px auto;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
line-height: 16pt;
|
||||
}
|
||||
.content-section-content > .os-host .os-host,
|
||||
.content-section-content > .os-host-textarea .os-host-textarea {
|
||||
border: 2px solid #6461f6;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.content-section-content .bonus-content {
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
background: #f0f3f6;
|
||||
padding: 0px 5px;
|
||||
margin: 2px;
|
||||
border-radius: 4px !important;
|
||||
border: 1px solid #DDE3ED;
|
||||
font-size: 10pt;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
color: #39547A;
|
||||
}
|
||||
.content-section-content-buttons {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.info-span {
|
||||
background: #F7F7F7;
|
||||
padding: 2px 5px;
|
||||
margin: 2px;
|
||||
white-space: nowrap;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DEDFE0;
|
||||
font-weight: bold;
|
||||
font-size: 10pt;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
color: #36befd;
|
||||
transition: color 0.3s, text-shadow 0.3s;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
|
||||
padding: 0px 1px;
|
||||
font-weight: 600;
|
||||
outline: none !important;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
}
|
||||
a:hover {
|
||||
color: #fff;
|
||||
text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
a:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 0%;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
z-index: -1;
|
||||
border-bottom: 1px dotted #36befd;
|
||||
transition: height 0.3s, border 0.3s, background-color 0.15s;
|
||||
}
|
||||
a:hover:before {
|
||||
height: 100%;
|
||||
background: #36befd;
|
||||
border-bottom: 1px solid #36befd;
|
||||
}
|
||||
.buttons {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
button {
|
||||
font-size: 10pt;
|
||||
line-height: 28pt;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
color: #555E6B;
|
||||
line-height: 40px;
|
||||
border: 1px solid #D6D6D6;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||||
padding: 0px 14px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
min-width: 80px;
|
||||
outline: none !important;
|
||||
}
|
||||
button:hover {
|
||||
color: #fff;
|
||||
background: #6461f6;
|
||||
border-color: #6461f6;
|
||||
box-shadow: 0 4px 8px -1px rgba(170, 170, 170, 0.45);
|
||||
}
|
||||
button:active {
|
||||
box-shadow: inset 0 4px 9px -1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: #6461f6;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
img {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.os-logo {
|
||||
background: transparent url("../assets/overlayscrollbars.svg") no-repeat center center;
|
||||
background-size: 80%;
|
||||
}
|
||||
.framework-logo {
|
||||
background: transparent url("../assets/angular.svg") no-repeat center center;
|
||||
background-size: 80%;
|
||||
}
|
||||
.custom-class-name-test {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
<div class="header">
|
||||
<code>
|
||||
<span class="code-keyword">import</span>
|
||||
<span class="code-char">{{ ' { ' }}</span>
|
||||
<span class="code-variable">OverlayScrollbarsComponent</span>
|
||||
<span class="code-char">{{ ' } ' }}</span>
|
||||
<span class="code-keyword">from</span>
|
||||
<span class="code-string">{{ " 'overlayscrollbars-ngx'" }}</span>
|
||||
<span class="code-char">;</span>
|
||||
</code>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-section skew">
|
||||
<div class="content-section-content content-section-content-framework">
|
||||
<span class="framework-logo"></span>
|
||||
<span>+</span>
|
||||
<span class="os-logo"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<div class="content-section-title">
|
||||
<h2>Component</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span>Class:</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ componentClass }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>Description:</span>
|
||||
</td>
|
||||
<td>OverlayScrollbars as a {{ framework }}-Component.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="content-section-content">
|
||||
|
||||
<overlay-scrollbars #osComponentRef1 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'350px' }"
|
||||
[ngClass]="[framework, hasCustomClassName ? customClassName : '']">
|
||||
<div class="bonus-content">{{ componentContent }}</div>
|
||||
{{ loremIpsumShort }}
|
||||
<overlay-scrollbars #osComponentRef2 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'150px' }"
|
||||
[ngClass]="[hasCustomClassName ? customClassName : '']">
|
||||
<div class="bonus-content">{{ componentContent }}</div>
|
||||
{{ loremIpsumLong }}
|
||||
<br />
|
||||
<br /> {{ loremIpsumShort }}
|
||||
</overlay-scrollbars>
|
||||
{{ loremIpsumMedium }}
|
||||
<br />
|
||||
<br /> {{ loremIpsumShort }}
|
||||
<br />
|
||||
<br /> {{ loremIpsumLong }}
|
||||
<div *ngFor="let item of loremList; let i = index" [attr.data-key]="i">
|
||||
<br />
|
||||
{{item}}
|
||||
</div>
|
||||
</overlay-scrollbars>
|
||||
|
||||
<div class="buttons">
|
||||
<button (click)="onBtnScrollRandom($event, [ osComponentRef1, osComponentRef2 ])">Scroll</button>
|
||||
<button (click)="onBtnChangeOptions()">Change Options</button>
|
||||
<button (click)="onBtnChangeContent()">Change Content</button>
|
||||
<button (click)="onBtnLog()">Log</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,31 +0,0 @@
|
||||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'example'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('example');
|
||||
});
|
||||
|
||||
it('should render title in a h1 tag', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to example!');
|
||||
});
|
||||
});
|
||||
@@ -1,92 +0,0 @@
|
||||
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
framework: string = 'Angular';
|
||||
customClassName: string = 'custom-class-name-test';
|
||||
componentClass: string = 'OverlayScrollbarsComponent';
|
||||
loremIpsumLong: string = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
|
||||
loremIpsumMedium: string = 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.';
|
||||
loremIpsumShort: string = 'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.';
|
||||
loremList: Array<string> = [];
|
||||
hasCustomClassName: boolean = false;
|
||||
componentContent: string = 'Lorem Ipsum';
|
||||
osComponentOptions: OverlayScrollbars.Options = {
|
||||
resize: 'both',
|
||||
paddingAbsolute: true,
|
||||
scrollbars: {
|
||||
autoHide: 'never'
|
||||
}
|
||||
};
|
||||
@ViewChild('osComponentRef1', { read: OverlayScrollbarsComponent })
|
||||
osComponentRef1: OverlayScrollbarsComponent;
|
||||
@ViewChild('osComponentRef2', { read: OverlayScrollbarsComponent })
|
||||
osComponentRef2: OverlayScrollbarsComponent;
|
||||
|
||||
ngAfterViewInit() {
|
||||
console.log(`${this.componentClass} (1)`);
|
||||
console.log(this.osComponentRef1)
|
||||
|
||||
console.log(`${this.componentClass} (2)`);
|
||||
console.log(this.osComponentRef2);
|
||||
}
|
||||
|
||||
onBtnScrollRandom(event: any, refArray: ReadonlyArray<OverlayScrollbarsComponent>) {
|
||||
if (refArray) {
|
||||
for (let i = 0; i < refArray.length; i++) {
|
||||
if (refArray[i]) {
|
||||
const osInstance = refArray[i].osInstance();
|
||||
osInstance.scrollStop().scroll({
|
||||
x: Math.floor((Math.random() * osInstance.scroll().max.x) + 0),
|
||||
y: Math.floor((Math.random() * osInstance.scroll().max.y) + 0)
|
||||
}, 1000, 'easeOutElastic');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onBtnChangeOptions() {
|
||||
this.hasCustomClassName = !this.hasCustomClassName;
|
||||
this.osComponentOptions = {
|
||||
resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
|
||||
scrollbars: {
|
||||
autoHide: this.osComponentOptions.scrollbars.autoHide === 'never' ? 'scroll' : 'never',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onBtnChangeContent() {
|
||||
this.componentContent = this.componentContent + '\r\n' + this.randomIpsum();
|
||||
this.loremList.push(this.randomIpsum());
|
||||
}
|
||||
|
||||
onBtnLog() {
|
||||
console.log(`== ${this.componentClass} (1) ==`);
|
||||
console.log('Ref:');
|
||||
console.log(this.osComponentRef1);
|
||||
console.log('Instance:');
|
||||
console.log(this.osComponentRef1.osInstance());
|
||||
console.log('Target:');
|
||||
console.log(this.osComponentRef1.osTarget());
|
||||
console.log('');
|
||||
console.log(`== ${this.componentClass} (2) ==`);
|
||||
console.log('Ref:');
|
||||
console.log(this.osComponentRef2);
|
||||
console.log('Instance:');
|
||||
console.log(this.osComponentRef2.osInstance());
|
||||
console.log('Target:');
|
||||
console.log(this.osComponentRef2.osTarget());
|
||||
}
|
||||
|
||||
randomIpsum(): string {
|
||||
const loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
|
||||
const random = Math.floor(Math.random() * loremIpsums.length);
|
||||
return loremIpsums[random];
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { OverlayscrollbarsModule } from 'overlayscrollbars-ngx';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule, OverlayscrollbarsModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
@@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="804.385px" height="864px" viewBox="557.808 129.6 804.385 864" enable-background="new 557.808 129.6 804.385 864"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<polygon fill="#DD0031" points="960,129.6 960,129.6 960,129.6 557.808,273.024 619.152,804.816 960,993.6 960,993.6 960,993.6
|
||||
1300.848,804.816 1362.192,273.024 "/>
|
||||
<polygon fill="#C3002F" points="960,129.6 960,225.504 960,225.072 960,662.688 960,662.688 960,993.6 960,993.6 1300.848,804.816
|
||||
1362.192,273.024 "/>
|
||||
<path fill="#FFFFFF" d="M960,225.072l-251.424,563.76l0,0h93.744l0,0l50.544-126.144h213.408l50.544,126.144l0,0h93.743l0,0
|
||||
L960,225.072L960,225.072L960,225.072L960,225.072L960,225.072z M1033.44,584.928H886.56L960,408.24L1033.44,584.928z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,32 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="702px" height="468px" viewBox="0 0 702 468" enable-background="new 0 0 702 468" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.9951" y1="234" x2="700.0049" y2="234">
|
||||
<stop offset="0" style="stop-color:#36BEFD"/>
|
||||
<stop offset="1" style="stop-color:#6461F6"/>
|
||||
</linearGradient>
|
||||
<path fill="none" stroke="url(#SVGID_1_)" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" d="M234.014,337.502
|
||||
c-9.188,0-18.292-1.193-27.057-3.545c-13.539-3.633-26.531-10.188-37.572-18.955c-10.933-8.682-20.222-19.736-26.863-31.969
|
||||
c-6.813-12.549-11.024-26.725-12.18-40.996c-1.188-14.668,0.756-29.659,5.62-43.355c4.671-13.151,12.186-25.547,21.73-35.847
|
||||
c9.515-10.269,21.266-18.694,33.982-24.368c13.146-5.865,27.781-8.966,42.325-8.966c3.586,0,7.203,0.184,10.75,0.547
|
||||
c14.193,1.452,28.242,5.949,40.627,13.003c12.096,6.889,22.958,16.396,31.414,27.495c8.555,11.229,14.85,24.37,18.203,38.003
|
||||
c3.509,14.265,3.951,29.467,1.278,43.964c-2.561,13.884-8.109,27.427-16.047,39.163c-7.806,11.541-18.112,21.643-29.805,29.211
|
||||
c-11.912,7.709-25.592,12.986-39.562,15.258C245.323,337.045,239.656,337.502,234.014,337.502
|
||||
C234.014,337.502,234.014,337.502,234.014,337.502z M570.998,338h-6.215h-26.65H500.59h-39.085h-31.278h-14.12
|
||||
c-14.94,0-29.099,6.24-38.846,17.121c-12.376,13.813-16.449,33.305-10.63,50.865c6.084,18.361,22.291,32.152,41.292,35.137
|
||||
c3.765,0.59,7.247,0.877,10.646,0.877h21.281h35.12h39.608h34.746h20.533c4.154,0,7.918-0.318,11.725-0.674
|
||||
c11.898-1.107,23.729-4.436,35.166-9.893c21.475-10.246,38.934-27.695,49.156-49.133c10.625-22.271,12.957-47.695,6.57-71.588
|
||||
c-6.066-22.697-19.951-42.912-39.094-56.922c-17.434-12.762-39.299-19.79-61.566-19.79h-19.836h-37.801h-34.63h-0.238
|
||||
c-0.064,0-0.128,0-0.192,0c-7.594,0-14.766-0.01-20.863-1.207c-13.334-2.618-25.441-10.797-33.215-22.437
|
||||
c-3.901-5.841-6.721-12.783-8.154-20.074c-1.492-7.591-0.939-15.579,1.642-23.742c4.497-14.223,14.729-25.905,28.074-32.053
|
||||
c6.373-2.936,13.886-4.487,21.729-4.487h3.353h22.485h35.71h39.555h34.021h19.109c6.848,0,13.436-1.16,19.578-3.448
|
||||
c16.672-6.206,29.244-20.975,32.814-38.542c3.609-17.757-2.477-36.397-15.879-48.646C649.65,30.746,637.154,26,623.891,26h-6.633
|
||||
h-15.867h-23.605h-29.85h-34.594h-37.846h-39.599h-39.858h-38.619h-35.885h-31.655H263.95h-18.707h-9.988
|
||||
c-13.158,0-23.905,0.728-33.822,2.288c-20.802,3.273-40.457,9.37-58.42,18.12c-18.023,8.778-34.679,20.118-49.506,33.705
|
||||
c-14.775,13.541-27.499,29.094-37.814,46.228c-10.511,17.454-18.368,36.299-23.354,56.01c-5.159,20.397-7.188,41.485-6.027,62.679
|
||||
c1.14,20.832,5.375,41.268,12.586,60.732c7.001,18.898,16.719,36.666,28.885,52.811c12.035,15.973,26.277,30.115,42.335,42.037
|
||||
c16.245,12.059,34.087,21.652,53.04,28.514c19.537,7.074,39.766,11.68,60.63,12.662c3.03,0.145,6.092,0.215,9.211,0.215
|
||||
c6.56,0,13.266-0.314,20.096-0.945c6.583-0.607,12.544-1.428,18.352-2.508c3.41-0.633,6.481-1.338,9.647-2.152"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.2 KiB |
@@ -1,11 +0,0 @@
|
||||
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
#
|
||||
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
|
||||
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
not IE 9-11
|
||||
@@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
@@ -1,18 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OverlayScrollbars Angular App</title>
|
||||
<base href="/">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<app-root>
|
||||
</app-root>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,31 +0,0 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client: {
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
dir: require('path').join(__dirname, '../coverage'),
|
||||
reports: ['html', 'lcovonly', 'text-summary'],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
import OverlayScrollbars from "overlayscrollbars";
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
|
||||
OverlayScrollbars(document.body, {
|
||||
nativeScrollbarsOverlaid: {
|
||||
initialize: false
|
||||
}
|
||||
});
|
||||
@@ -1,85 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
|
||||
* This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
|
||||
*/
|
||||
|
||||
// import 'core-js/es6/symbol';
|
||||
// import 'core-js/es6/object';
|
||||
// import 'core-js/es6/function';
|
||||
// import 'core-js/es6/parse-int';
|
||||
// import 'core-js/es6/parse-float';
|
||||
// import 'core-js/es6/number';
|
||||
// import 'core-js/es6/math';
|
||||
// import 'core-js/es6/string';
|
||||
// import 'core-js/es6/date';
|
||||
// import 'core-js/es6/array';
|
||||
// import 'core-js/es6/regexp';
|
||||
// import 'core-js/es6/map';
|
||||
// import 'core-js/es6/weak-map';
|
||||
// import 'core-js/es6/set';
|
||||
|
||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/** IE10 and IE11 requires the following for the Reflect API. */
|
||||
// import 'core-js/es6/reflect';
|
||||
|
||||
/**
|
||||
* Web Animations `@angular/platform-browser/animations`
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
*/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags.ts';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
@@ -1,13 +0,0 @@
|
||||
@import '~overlayscrollbars/css/OverlayScrollbars.css';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 11pt;
|
||||
color: #31485B;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone-testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: any;
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts",
|
||||
"polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"extends": "../tslint.json",
|
||||
"rules": {
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"app",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"app",
|
||||
"kebab-case"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"target": "es5",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
{
|
||||
"rulesDirectory": [
|
||||
"codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"arrow-return-shorthand": true,
|
||||
"callable-types": true,
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space"
|
||||
],
|
||||
"curly": true,
|
||||
"deprecation": {
|
||||
"severity": "warn"
|
||||
},
|
||||
"eofline": true,
|
||||
"forin": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"interface-over-type-literal": true,
|
||||
"label-position": true,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-arg": true,
|
||||
"no-bitwise": true,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-construct": true,
|
||||
"no-debugger": true,
|
||||
"no-duplicate-super": true,
|
||||
"no-empty": false,
|
||||
"no-empty-interface": true,
|
||||
"no-eval": true,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-misused-new": true,
|
||||
"no-non-null-assertion": true,
|
||||
"no-redundant-jsdoc": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-string-literal": false,
|
||||
"no-string-throw": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-trailing-whitespace": true,
|
||||
"no-unnecessary-initializer": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-keyword": true,
|
||||
"object-literal-sort-keys": false,
|
||||
"one-line": [
|
||||
true,
|
||||
"check-open-brace",
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-whitespace"
|
||||
],
|
||||
"prefer-const": true,
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"radix": true,
|
||||
"semicolon": [
|
||||
true,
|
||||
"always"
|
||||
],
|
||||
"triple-equals": [
|
||||
true,
|
||||
"allow-null-check"
|
||||
],
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
}
|
||||
],
|
||||
"unified-signatures": true,
|
||||
"variable-name": false,
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
"no-output-on-prefix": true,
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true
|
||||
}
|
||||
}
|
||||
-4392
File diff suppressed because it is too large
Load Diff
@@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "overlayscrollbars-ngx",
|
||||
"version": "0.2.2",
|
||||
"description": "OverlayScrollbars wrapper for Angular.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"ngx",
|
||||
"angular"
|
||||
],
|
||||
"files": [
|
||||
"src",
|
||||
"dist"
|
||||
],
|
||||
"homepage": "https://kingsora.github.io/OverlayScrollbars",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars/issues"
|
||||
},
|
||||
"main": "./dist/overlayscrollbars-ngx.js",
|
||||
"module": "./dist/overlayscrollbars-ngx.esm.js",
|
||||
"typings": "./dist/types/index.d.ts",
|
||||
"author": "KingSora | Rene Haas",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@angular/compiler": "^7.2.16",
|
||||
"@angular/compiler-cli": "^7.2.16",
|
||||
"@angular/core": "^7.2.16",
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"chalk": "^2.4.2",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-json-editor": "^2.5.4",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"rollup": "^1.32.1",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-typescript2": "^0.22.0",
|
||||
"rxjs": "^6.5.4",
|
||||
"shelljs": "0.7.7",
|
||||
"tsickle": "^0.34.0",
|
||||
"typescript": "3.1.6",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": "^7.0.0",
|
||||
"overlayscrollbars": "^1.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"setup": "npm i && cd example && npm i && cd ..",
|
||||
"build": "node build.js",
|
||||
"example": "cd example && npx ng serve",
|
||||
"build-example": "cd example && npx ng build --prod --base-href \"/OverlayScrollbars/frameworks/angular/\"",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from './overlayscrollbars.component';
|
||||
export * from './overlayscrollbars.module';
|
||||
@@ -1,67 +0,0 @@
|
||||
import { Component, ElementRef, Input, SimpleChanges, OnDestroy, OnChanges, AfterViewInit, NgZone } from '@angular/core';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
@Component({
|
||||
selector: 'overlay-scrollbars', //https://angular.io/guide/styleguide#component-selectors
|
||||
host: { 'class': 'os-host' },
|
||||
template: `
|
||||
<div class="os-resize-observer-host"></div>
|
||||
<div class="os-padding">
|
||||
<div class="os-viewport">
|
||||
<div class="os-content">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar os-scrollbar-horizontal ">
|
||||
<div class="os-scrollbar-track">
|
||||
<div class="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar os-scrollbar-vertical">
|
||||
<div class="os-scrollbar-track">
|
||||
<div class="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar-corner"></div>
|
||||
`,
|
||||
styles: [':host { display: block; }']
|
||||
})
|
||||
export class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
|
||||
@Input('options') private _options: OverlayScrollbars.Options;
|
||||
@Input('extensions') private _extensions: OverlayScrollbars.Extensions;
|
||||
private _osInstance: OverlayScrollbars | null = null;
|
||||
private _osTargetRef: ElementRef;
|
||||
|
||||
constructor(_osTargetRef: ElementRef, private ngZone: NgZone) {
|
||||
this._osTargetRef = _osTargetRef;
|
||||
}
|
||||
|
||||
osInstance(): OverlayScrollbars | null {
|
||||
return this._osInstance;
|
||||
}
|
||||
|
||||
osTarget(): HTMLDivElement | null {
|
||||
return this._osTargetRef.nativeElement || null;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.destroy();
|
||||
this._osInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const optionsChange = changes._options;
|
||||
if (optionsChange && OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.options(optionsChange.currentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { OverlayScrollbarsComponent } from './overlayscrollbars.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [],
|
||||
declarations: [OverlayScrollbarsComponent],
|
||||
exports: [OverlayScrollbarsComponent]
|
||||
})
|
||||
export class OverlayscrollbarsModule { }
|
||||
@@ -1,43 +0,0 @@
|
||||
{
|
||||
"angularCompilerOptions": {
|
||||
"annotateForClosureCompiler": true,
|
||||
"skipTemplateCodegen": true,
|
||||
"skipMetadataEmit": false,
|
||||
"strictMetadataEmit": true,
|
||||
"fullTemplateTypeCheck": true,
|
||||
"flatModuleOutFile": "overlayscrollbars-ngx.js",
|
||||
"flatModuleId": "overlayscrollbars-ngx"
|
||||
},
|
||||
"compilerOptions": {
|
||||
"allowJs": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist",
|
||||
"target": "es5",
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom",
|
||||
"es2016",
|
||||
"es2017"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"declaration": true,
|
||||
"declarationDir": "./dist/types",
|
||||
"noImplicitThis": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"removeComments": true
|
||||
},
|
||||
"exclude": [
|
||||
"./dist",
|
||||
"./example",
|
||||
"node_modules"
|
||||
],
|
||||
"include": [
|
||||
"./src"
|
||||
]
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Rene Haas
|
||||
|
||||
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.
|
||||
@@ -1,102 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://reactjs.org/"><img src="https://kingsora.github.io/OverlayScrollbars/frameworks/react/logo.svg" width="200" height="133" alt="React"></a>
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
|
||||
</p>
|
||||
<h6 align="center">
|
||||
<a href="https://github.com/facebook/react/"><img src="https://img.shields.io/badge/React-%5E16.4.0-61dafb?style=flat-square&logo=React" alt="React"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.10.0-36befd?style=flat-square" alt="OverlayScrollbars"></a>
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-react"><img src="https://img.shields.io/npm/dt/overlayscrollbars-react.svg?style=flat-square" alt="Downloads"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-react/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
|
||||
</h6>
|
||||
<h3 align="center">
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/frameworks/react/">Example</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
|
||||
</h3>
|
||||
<h5 align="center">
|
||||
The official OverlayScrollbars wrapper for React.
|
||||
</h5>
|
||||
|
||||
## Installation
|
||||
```sh
|
||||
npm install overlayscrollbars-react
|
||||
```
|
||||
|
||||
## Peer Dependencies
|
||||
OverlayScrollbars for React has the following **peer dependencies**:
|
||||
- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars)
|
||||
```
|
||||
npm install overlayscrollbars
|
||||
```
|
||||
- The React framework: [react](https://www.npmjs.com/package/react)
|
||||
```
|
||||
npm install react
|
||||
```
|
||||
|
||||
## TypeScript
|
||||
- In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars):
|
||||
```
|
||||
npm install @types/overlayscrollbars
|
||||
```
|
||||
Since this wrapper is written in TypeScript it comes with its generated typings.<br>
|
||||
Check out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options.
|
||||
|
||||
## Usage
|
||||
#### CSS
|
||||
You have to import the `OverlayScrollbars.css` by yourself.<br>
|
||||
The component **doesn't** do it for you as the styles are **global styles**!<br>
|
||||
There are different ways to achieve this, in React the most simple way for me was to add [this line](https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-react/example/src/index.tsx#L1) in the `index` file:
|
||||
```js
|
||||
import 'overlayscrollbars/css/OverlayScrollbars.css';
|
||||
```
|
||||
|
||||
#### Import
|
||||
Simply import the component into your file(s):
|
||||
```js
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
||||
```
|
||||
|
||||
#### Template
|
||||
After the import you can use it in JSX:
|
||||
```jsx
|
||||
<OverlayScrollbarsComponent>
|
||||
example content
|
||||
</OverlayScrollbarsComponent>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
Two properties are accepted: `options` and `extensions`.
|
||||
- The `options` property accepts a `object` and can be changed at any point in time, and the plugin will adapt.
|
||||
- The `extensions` property accepts a `string`, `string array` or `object` and is only taken into account if the component gets mounted.
|
||||
|
||||
```jsx
|
||||
<OverlayScrollbarsComponent
|
||||
options={{ scrollbars: { autoHide: 'scroll' } }}
|
||||
extensions={['extensionA', 'extensionB']}
|
||||
>
|
||||
</OverlayScrollbarsComponent>
|
||||
```
|
||||
You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), `extensions` are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization).
|
||||
|
||||
#### Instance
|
||||
If you get the component reference, it provides two methods: `osInstance()` and `osTarget()`.
|
||||
- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed.
|
||||
- The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component isn't mounted yet or already unmounted.
|
||||
|
||||
## Example App
|
||||
In case you need a example app for reference, you can use the example app in this repo(`example folder`):
|
||||
- [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/react/)
|
||||
- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react/example)
|
||||
|
||||
If you wanna build the example app, run these commands:
|
||||
```sh
|
||||
npm run setup
|
||||
npm run build
|
||||
npm run example
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@@ -1,150 +0,0 @@
|
||||
const packageName = 'overlayscrollbars-react';
|
||||
const rollupUmdName = 'OverlayScrollbarsReact';
|
||||
const filesInfo = {
|
||||
fileName: packageName,
|
||||
srcFolder: './src',
|
||||
distFolder: './dist',
|
||||
typingsFolder: './dist/types',
|
||||
exampleFolder: './example',
|
||||
tsconfigJsonPath: './tsconfig.json',
|
||||
packageJsonPath: './package.json',
|
||||
cache: []
|
||||
}
|
||||
const packagePaths = {
|
||||
main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
|
||||
module: `${filesInfo.distFolder}/${filesInfo.fileName}.esm.js`,
|
||||
typings: `${filesInfo.typingsFolder}/index.d.ts`
|
||||
}
|
||||
const rollupUmdGlobals = {
|
||||
'react': 'React',
|
||||
'overlayscrollbars': 'OverlayScrollbars'
|
||||
};
|
||||
|
||||
const packageJson = require(filesInfo.packageJsonPath);
|
||||
const tsconfigJson = require(filesInfo.tsconfigJsonPath);
|
||||
|
||||
const path = require('path');
|
||||
const sh = require('shelljs');
|
||||
const chalk = require('chalk');
|
||||
const gulp = require('gulp');
|
||||
const rollup = require('rollup');
|
||||
const rollupCommonJs = require('rollup-plugin-commonjs');
|
||||
const rollupTypeScript = require('rollup-plugin-typescript2');
|
||||
const rollupResolve = require('rollup-plugin-node-resolve');
|
||||
const rollupInputConfig = {
|
||||
input: `${filesInfo.srcFolder}/index.ts`,
|
||||
external: [...Object.keys(packageJson.devDependencies), ...Object.keys(packageJson.peerDependencies)],
|
||||
plugins: [
|
||||
rollupResolve(),
|
||||
rollupCommonJs()
|
||||
]
|
||||
};
|
||||
const rollupOutputConfig = {
|
||||
exports: 'named',
|
||||
sourcemap: true
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
sh.echo(chalk.cyanBright('Start building:'));
|
||||
|
||||
gulp.task('prepare', function (done) {
|
||||
sh.echo(`> Removing ${filesInfo.distFolder}`);
|
||||
sh.rm('-rf', filesInfo.distFolder);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('tsconfigJson', function (done) {
|
||||
sh.echo(`> Prepare ${filesInfo.tsconfigJsonPath}`);
|
||||
let newTsconfigJson = {
|
||||
...tsconfigJson,
|
||||
compilerOptions: {
|
||||
...tsconfigJson.compilerOptions,
|
||||
declarationDir: filesInfo.typingsFolder,
|
||||
outDir: filesInfo.distFolder,
|
||||
},
|
||||
include: [filesInfo.srcFolder],
|
||||
exclude: [filesInfo.distFolder, filesInfo.exampleFolder, 'node_modules']
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newTsconfigJson, null, 4)).to(filesInfo.tsconfigJsonPath);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('packageJson', function (done) {
|
||||
sh.echo(`> Prepare ${filesInfo.packageJsonPath}`);
|
||||
let newPackageJson = {
|
||||
...packageJson,
|
||||
...packagePaths,
|
||||
name: packageName,
|
||||
files: [
|
||||
path.normalize(filesInfo.srcFolder),
|
||||
path.normalize(filesInfo.distFolder)
|
||||
]
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(filesInfo.packageJsonPath);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('rollup', function (done) {
|
||||
sh.echo('> Rollup:');
|
||||
(async function () {
|
||||
let rollupTsconfig = {
|
||||
useTsconfigDeclarationDir: true,
|
||||
objectHashIgnoreUnknownHack: true,
|
||||
clean: true,
|
||||
tsconfig: filesInfo.tsconfigJsonPath,
|
||||
tsconfigOverride: {
|
||||
compilerOptions: {
|
||||
target: 'es5'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
rollupTsconfig.tsconfigOverride.compilerOptions.target = 'es5';
|
||||
let es5umdBundle = await rollup.rollup({
|
||||
...rollupInputConfig,
|
||||
plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(rollupInputConfig.plugins)
|
||||
});
|
||||
await es5umdBundle.write({
|
||||
name: rollupUmdName,
|
||||
globals: rollupUmdGlobals,
|
||||
file: packagePaths.main,
|
||||
format: 'umd',
|
||||
...rollupOutputConfig
|
||||
});
|
||||
sh.echo(chalk.yellowBright(` [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & umd]: `) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.main}`));
|
||||
|
||||
rollupTsconfig.tsconfigOverride.compilerOptions.target = 'es6';
|
||||
let es6esmBundle = await rollup.rollup({
|
||||
...rollupInputConfig,
|
||||
plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(rollupInputConfig.plugins)
|
||||
});
|
||||
await es6esmBundle.write({
|
||||
file: packagePaths.module,
|
||||
format: 'esm',
|
||||
...rollupOutputConfig
|
||||
});
|
||||
sh.echo(chalk.yellowBright(` [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & esm]: `) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.module}`));
|
||||
|
||||
filesInfo.cache.forEach(function (cacheFolder) {
|
||||
if (sh.test('-d', cacheFolder)) {
|
||||
sh.rm('-rf', cacheFolder);
|
||||
}
|
||||
});
|
||||
|
||||
sh.echo(chalk.greenBright('Building finished!'));
|
||||
done();
|
||||
})();
|
||||
});
|
||||
|
||||
gulp.task('example', function (done) {
|
||||
sh.echo();
|
||||
sh.echo(chalk.cyanBright(`Copy to example → ${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`));
|
||||
sh.mkdir('-p', `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`);
|
||||
sh.cp('-Rf', [filesInfo.srcFolder, filesInfo.distFolder, filesInfo.packageJsonPath], `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`);
|
||||
sh.echo(chalk.greenBright('Copying finished!'));
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.series('prepare', 'tsconfigJson', 'packageJson', 'rollup', 'example')();
|
||||
@@ -1,89 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
|
||||
function __rest(s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
}
|
||||
|
||||
class OverlayScrollbarsComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._osInstance = null;
|
||||
this._osTargetRef = React.createRef();
|
||||
}
|
||||
osInstance() {
|
||||
return this._osInstance;
|
||||
}
|
||||
osTarget() {
|
||||
return this._osTargetRef.current || null;
|
||||
}
|
||||
componentDidMount() {
|
||||
this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
|
||||
mergeHostClassNames(this._osInstance, this.props.className);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.destroy();
|
||||
this._osInstance = null;
|
||||
}
|
||||
}
|
||||
componentDidUpdate(prevProps) {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.options(this.props.options);
|
||||
if (prevProps.className !== this.props.className) {
|
||||
mergeHostClassNames(this._osInstance, this.props.className);
|
||||
}
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const _a = this.props, divProps = __rest(_a, ["options", "extensions", "children", "className"]);
|
||||
return (React.createElement("div", Object.assign({ className: "os-host" }, divProps, { ref: this._osTargetRef }),
|
||||
React.createElement("div", { className: "os-resize-observer-host" }),
|
||||
React.createElement("div", { className: "os-padding" },
|
||||
React.createElement("div", { className: "os-viewport" },
|
||||
React.createElement("div", { className: "os-content" }, this.props.children))),
|
||||
React.createElement("div", { className: "os-scrollbar os-scrollbar-horizontal " },
|
||||
React.createElement("div", { className: "os-scrollbar-track" },
|
||||
React.createElement("div", { className: "os-scrollbar-handle" }))),
|
||||
React.createElement("div", { className: "os-scrollbar os-scrollbar-vertical" },
|
||||
React.createElement("div", { className: "os-scrollbar-track" },
|
||||
React.createElement("div", { className: "os-scrollbar-handle" }))),
|
||||
React.createElement("div", { className: "os-scrollbar-corner" })));
|
||||
}
|
||||
}
|
||||
function mergeHostClassNames(osInstance, className) {
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
const { host } = osInstance.getElements();
|
||||
const regex = new RegExp(`(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, "$|")}$`, 'g');
|
||||
const osClassNames = host.className.split(' ')
|
||||
.filter(name => name.match(regex))
|
||||
.join(' ');
|
||||
host.className = `${osClassNames} ${className || ''}`;
|
||||
}
|
||||
}
|
||||
|
||||
export { OverlayScrollbarsComponent };
|
||||
//# sourceMappingURL=overlayscrollbars-react.esm.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -1,127 +0,0 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('overlayscrollbars')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'react', 'overlayscrollbars'], factory) :
|
||||
(global = global || self, factory(global.OverlayScrollbarsReact = {}, global.React, global.OverlayScrollbars));
|
||||
}(this, (function (exports, React, OverlayScrollbars) { 'use strict';
|
||||
|
||||
var React__default = 'default' in React ? React['default'] : React;
|
||||
OverlayScrollbars = OverlayScrollbars && Object.prototype.hasOwnProperty.call(OverlayScrollbars, 'default') ? OverlayScrollbars['default'] : OverlayScrollbars;
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
/* global Reflect, Promise */
|
||||
|
||||
var extendStatics = function(d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
|
||||
function __extends(d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
}
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __rest(s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
}
|
||||
|
||||
var OverlayScrollbarsComponent = (function (_super) {
|
||||
__extends(OverlayScrollbarsComponent, _super);
|
||||
function OverlayScrollbarsComponent(props) {
|
||||
var _this = _super.call(this, props) || this;
|
||||
_this._osInstance = null;
|
||||
_this._osTargetRef = React__default.createRef();
|
||||
return _this;
|
||||
}
|
||||
OverlayScrollbarsComponent.prototype.osInstance = function () {
|
||||
return this._osInstance;
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.osTarget = function () {
|
||||
return this._osTargetRef.current || null;
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.componentDidMount = function () {
|
||||
this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
|
||||
mergeHostClassNames(this._osInstance, this.props.className);
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.componentWillUnmount = function () {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.destroy();
|
||||
this._osInstance = null;
|
||||
}
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.componentDidUpdate = function (prevProps) {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.options(this.props.options);
|
||||
if (prevProps.className !== this.props.className) {
|
||||
mergeHostClassNames(this._osInstance, this.props.className);
|
||||
}
|
||||
}
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.render = function () {
|
||||
var _a = this.props, options = _a.options, extensions = _a.extensions, children = _a.children, className = _a.className, divProps = __rest(_a, ["options", "extensions", "children", "className"]);
|
||||
return (React__default.createElement("div", __assign({ className: "os-host" }, divProps, { ref: this._osTargetRef }),
|
||||
React__default.createElement("div", { className: "os-resize-observer-host" }),
|
||||
React__default.createElement("div", { className: "os-padding" },
|
||||
React__default.createElement("div", { className: "os-viewport" },
|
||||
React__default.createElement("div", { className: "os-content" }, this.props.children))),
|
||||
React__default.createElement("div", { className: "os-scrollbar os-scrollbar-horizontal " },
|
||||
React__default.createElement("div", { className: "os-scrollbar-track" },
|
||||
React__default.createElement("div", { className: "os-scrollbar-handle" }))),
|
||||
React__default.createElement("div", { className: "os-scrollbar os-scrollbar-vertical" },
|
||||
React__default.createElement("div", { className: "os-scrollbar-track" },
|
||||
React__default.createElement("div", { className: "os-scrollbar-handle" }))),
|
||||
React__default.createElement("div", { className: "os-scrollbar-corner" })));
|
||||
};
|
||||
return OverlayScrollbarsComponent;
|
||||
}(React.Component));
|
||||
function mergeHostClassNames(osInstance, className) {
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
var host = osInstance.getElements().host;
|
||||
var regex_1 = new RegExp("(^os-host([-_].+|)$)|" + osInstance.options().className.replace(/\s/g, "$|") + "$", 'g');
|
||||
var osClassNames = host.className.split(' ')
|
||||
.filter(function (name) { return name.match(regex_1); })
|
||||
.join(' ');
|
||||
host.className = osClassNames + " " + (className || '');
|
||||
}
|
||||
}
|
||||
|
||||
exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=overlayscrollbars-react.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -1,20 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import OverlayScrollbars from "overlayscrollbars";
|
||||
export interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children?: any;
|
||||
options?: OverlayScrollbars.Options;
|
||||
extensions?: OverlayScrollbars.Extensions;
|
||||
}
|
||||
export interface OverlayScrollbarsComponentState {
|
||||
}
|
||||
export declare class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {
|
||||
private _osInstance;
|
||||
private _osTargetRef;
|
||||
constructor(props: OverlayScrollbarsComponentProps);
|
||||
osInstance(): OverlayScrollbars | null;
|
||||
osTarget(): HTMLDivElement | null;
|
||||
componentDidMount(): void;
|
||||
componentWillUnmount(): void;
|
||||
componentDidUpdate(prevProps: OverlayScrollbarsComponentProps): void;
|
||||
render(): JSX.Element;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from './OverlayScrollbarsComponent';
|
||||
@@ -1,23 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@@ -1,44 +0,0 @@
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.<br>
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.<br>
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.<br>
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.<br>
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.<br>
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
-12647
File diff suppressed because it is too large
Load Diff
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "/OverlayScrollbars/frameworks/react/",
|
||||
"dependencies": {
|
||||
"@types/jest": "24.0.15",
|
||||
"@types/node": "12.6.8",
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"@types/react": "16.8.23",
|
||||
"@types/react-dom": "16.8.5",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"overlayscrollbars-react": "^0.1.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "3.0.1",
|
||||
"typescript": ">=3.2.1 <3.5.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>OverlayScrollvars React App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -1,309 +0,0 @@
|
||||
.App {
|
||||
min-width: 600px;
|
||||
}
|
||||
.header {
|
||||
background: #36befd;
|
||||
background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
|
||||
background: linear-gradient(135deg, #36befd 1%, #6461f6 100%);
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
letter-spacing: 0.1pt;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 76px;
|
||||
box-shadow: 0 15px 20px -15px rgba(57, 120, 253, 0.15), 0 55px 50px -35px rgba(47, 78, 249, 0.12);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.header code {
|
||||
border-radius: 4px;
|
||||
margin: 2px;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
background: #fff;
|
||||
font-size: 10pt;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 255, 0.15);
|
||||
}
|
||||
.header code .code-keyword {
|
||||
color: #0059FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header code .code-char {
|
||||
color: #4D4D4C;
|
||||
}
|
||||
.header code .code-variable {
|
||||
color: #3778AD;
|
||||
}
|
||||
.header code .code-string {
|
||||
color: #279737;
|
||||
font-weight: 400;
|
||||
}
|
||||
.content {
|
||||
min-height: calc(100vh - 76px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-flow: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.content-section {
|
||||
position: relative;
|
||||
padding: 40px 0px;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-section:last-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.content-section:before,
|
||||
.content-section:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.content-section:nth-child(2n - 1) {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
.content-section:nth-child(2n - 1):before,
|
||||
.content-section:nth-child(2n - 1):after {
|
||||
background: #fff;
|
||||
}
|
||||
.content-section:nth-child(2n + 0) {
|
||||
background: #fff;
|
||||
}
|
||||
.content-section:nth-child(2n + 0):before,
|
||||
.content-section:nth-child(2n + 0):after {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
.content-section.skew:before,
|
||||
.content-section.skew:after {
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
.content-section.skew + .content-section:before,
|
||||
.content-section.skew + .content-section:after {
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
.content-section skew + .content-section.skew:before,
|
||||
.content-section.skew + .content-section.skew:before {
|
||||
top: 0;
|
||||
}
|
||||
.content-section + .content-section.skew:before {
|
||||
top: -50vw;
|
||||
}
|
||||
.content-section.skew + .content-section:after {
|
||||
bottom: -50vw;
|
||||
}
|
||||
.content-section + .content-section:after {
|
||||
top: 0;
|
||||
}
|
||||
.content-section.skew + .content-section.skew:after {
|
||||
bottom: 0;
|
||||
}
|
||||
.content-section.skew:first-child:before {
|
||||
top: -50vw !important;
|
||||
}
|
||||
.content-section.skew:last-child:after {
|
||||
bottom: -50vw !important;
|
||||
}
|
||||
.content-section-content-framework > span {
|
||||
font-weight: bold;
|
||||
font-size: 30pt;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.content-section-content-framework > span:not(:nth-child(2)) {
|
||||
display: inline-block;
|
||||
color: transparent;
|
||||
height: 190px;
|
||||
width: 190px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
.content-section-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.content-section-title > h2{
|
||||
text-align: center;
|
||||
font-size: 26pt;
|
||||
color: #39547A;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
.content-section-title > table{
|
||||
text-align: left;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.content-section-title > table tr {
|
||||
margin: 10px;
|
||||
}
|
||||
.content-section-title > table td {
|
||||
line-height: 18pt;
|
||||
}
|
||||
.content-section-title > table td:first-child {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
vertical-align: top;
|
||||
}
|
||||
.content-section-title > table td:first-child span{
|
||||
margin: 0px 6px;
|
||||
}
|
||||
.content-section-title > table td:last-child span {
|
||||
text-align: left;
|
||||
color: #36befd;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content-section-content {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.content-section-content .os-host,
|
||||
.content-section-content .os-host-textarea {
|
||||
border: 2px solid #36befd;
|
||||
width: 480px;
|
||||
max-height: 300px;
|
||||
margin: 10px auto 20px auto;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
line-height: 16pt;
|
||||
}
|
||||
.content-section-content > .os-host .os-host,
|
||||
.content-section-content > .os-host-textarea .os-host-textarea {
|
||||
border: 2px solid #6461f6;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.content-section-content .bonus-content {
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
background: #f0f3f6;
|
||||
padding: 0px 5px;
|
||||
margin: 2px;
|
||||
border-radius: 4px !important;
|
||||
border: 1px solid #DDE3ED;
|
||||
font-size: 10pt;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
color: #39547A;
|
||||
}
|
||||
.content-section-content-buttons {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.info-span {
|
||||
background: #F7F7F7;
|
||||
padding: 2px 5px;
|
||||
margin: 2px;
|
||||
white-space: nowrap;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DEDFE0;
|
||||
font-weight: bold;
|
||||
font-size: 10pt;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
color: #36befd;
|
||||
transition: color 0.3s, text-shadow 0.3s;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
|
||||
padding: 0px 1px;
|
||||
font-weight: 600;
|
||||
outline: none !important;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
}
|
||||
a:hover {
|
||||
color: #fff;
|
||||
text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
a:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 0%;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
z-index: -1;
|
||||
border-bottom: 1px dotted #36befd;
|
||||
transition: height 0.3s, border 0.3s, background-color 0.15s;
|
||||
}
|
||||
a:hover:before {
|
||||
height: 100%;
|
||||
background: #36befd;
|
||||
border-bottom: 1px solid #36befd;
|
||||
}
|
||||
.buttons {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
button {
|
||||
font-size: 10pt;
|
||||
line-height: 28pt;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
color: #555E6B;
|
||||
line-height: 40px;
|
||||
border: 1px solid #D6D6D6;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||||
padding: 0px 14px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
min-width: 80px;
|
||||
outline: none !important;
|
||||
}
|
||||
button:hover {
|
||||
color: #fff;
|
||||
background: #6461f6;
|
||||
border-color: #6461f6;
|
||||
box-shadow: 0 4px 8px -1px rgba(170, 170, 170, 0.45);
|
||||
}
|
||||
button:active {
|
||||
box-shadow: inset 0 4px 9px -1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: #6461f6;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
img {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.os-logo {
|
||||
background: transparent url("assets/overlayscrollbars.svg") no-repeat center center;
|
||||
background-size: 80%;
|
||||
}
|
||||
.framework-logo {
|
||||
background: transparent url("assets/react.svg") no-repeat center center;
|
||||
background-size: 80%;
|
||||
}
|
||||
.custom-class-name-test {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
@@ -1,191 +0,0 @@
|
||||
import './App.css';
|
||||
import React, { RefObject } from 'react';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
||||
|
||||
export interface AppState {
|
||||
loremList: Array<string>;
|
||||
componentContent: string;
|
||||
osComponentOptions: OverlayScrollbars.Options;
|
||||
hasCustomClassName: boolean;
|
||||
}
|
||||
|
||||
export default class App extends React.Component<any, AppState> {
|
||||
framework: string = 'React';
|
||||
customClassName: string = 'custom-class-name-test'
|
||||
componentClass: string = 'OverlayScrollbarsComponent';
|
||||
loremIpsumLong: string = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
|
||||
loremIpsumMedium: string = 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.';
|
||||
loremIpsumShort: string = 'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.';
|
||||
osComponentRef1: RefObject<OverlayScrollbarsComponent>;
|
||||
osComponentRef2: RefObject<OverlayScrollbarsComponent>;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.osComponentRef1 = React.createRef<OverlayScrollbarsComponent>();
|
||||
this.osComponentRef2 = React.createRef<OverlayScrollbarsComponent>();
|
||||
this.state = {
|
||||
hasCustomClassName: false,
|
||||
componentContent: 'Lorem Ipsum',
|
||||
loremList: [],
|
||||
osComponentOptions: {
|
||||
resize: 'both',
|
||||
paddingAbsolute: true,
|
||||
scrollbars: {
|
||||
autoHide: 'never'
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log(`${this.componentClass} (1)`);
|
||||
console.log(this.osComponentRef1.current);
|
||||
|
||||
console.log(`${this.componentClass} (2)`);
|
||||
console.log(this.osComponentRef2.current);
|
||||
}
|
||||
|
||||
onBtnScrollRandom(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, refArray: Array<RefObject<OverlayScrollbarsComponent>>) {
|
||||
if (refArray) {
|
||||
for (let i = 0; i < refArray.length; i++) {
|
||||
if (refArray[i] && refArray[i].current) {
|
||||
const osInstance = refArray[i].current!.osInstance();
|
||||
if (osInstance) {
|
||||
osInstance.scrollStop().scroll({
|
||||
x: Math.floor((Math.random() * osInstance.scroll().max.x) + 0),
|
||||
y: Math.floor((Math.random() * osInstance.scroll().max.y) + 0)
|
||||
}, 1000, 'easeOutElastic');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onBtnChangeOptions() {
|
||||
this.setState({
|
||||
hasCustomClassName: !this.state.hasCustomClassName,
|
||||
osComponentOptions: {
|
||||
resize: this.state.osComponentOptions.resize === 'both' ? 'none' : 'both',
|
||||
scrollbars: {
|
||||
autoHide: this.state.osComponentOptions.scrollbars!.autoHide === 'never' ? 'scroll' : 'never',
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onBtnChangeContent() {
|
||||
this.setState({
|
||||
componentContent: this.state.componentContent + '\r\n' + this.randomIpsum(),
|
||||
loremList: [...this.state.loremList, this.randomIpsum()]
|
||||
});
|
||||
}
|
||||
|
||||
onBtnLog() {
|
||||
console.log(`== ${this.componentClass} (1) ==`);
|
||||
console.log('Instance:');
|
||||
console.log(this.osComponentRef1.current!.osInstance());
|
||||
console.log('Target:');
|
||||
console.log(this.osComponentRef1.current!.osTarget());
|
||||
console.log('');
|
||||
console.log(`== ${this.componentClass} (2) ==`);
|
||||
console.log('Instance:');
|
||||
console.log(this.osComponentRef2.current!.osInstance());
|
||||
console.log('Target:');
|
||||
console.log(this.osComponentRef2.current!.osTarget());
|
||||
}
|
||||
|
||||
randomIpsum(): string {
|
||||
const loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
|
||||
return loremIpsums[Math.floor(Math.random() * loremIpsums.length)];
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="header">
|
||||
<code>
|
||||
<span className="code-keyword">import</span>
|
||||
<span className="code-char">{' { '}</span>
|
||||
<span className="code-variable">OverlayScrollbarsComponent</span>
|
||||
<span className="code-char">{' } '}</span>
|
||||
<span className="code-keyword">from</span>
|
||||
<span className="code-string">{" 'overlayscrollbars-react'"}</span>
|
||||
<span className="code-char">;</span>
|
||||
</code>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="content-section skew">
|
||||
<div className="content-section-content content-section-content-framework">
|
||||
<span className="framework-logo"></span>
|
||||
<span>+</span>
|
||||
<span className="os-logo"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-section">
|
||||
<div className="content-section-title">
|
||||
<h2>Component</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span>Class:</span></td>
|
||||
<td><span>{this.componentClass}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Description:</span></td>
|
||||
<td>OverlayScrollbars as a {this.framework}-Component.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="content-section-content">
|
||||
|
||||
<OverlayScrollbarsComponent ref={this.osComponentRef1}
|
||||
options={this.state.osComponentOptions}
|
||||
style={{ maxHeight: '350px' }}
|
||||
className={`${this.framework} ${this.state.hasCustomClassName ? this.customClassName : ''}`}
|
||||
>
|
||||
<div className="bonus-content">
|
||||
{this.state.componentContent}
|
||||
</div>
|
||||
{this.loremIpsumShort}
|
||||
<OverlayScrollbarsComponent ref={this.osComponentRef2}
|
||||
options={this.state.osComponentOptions}
|
||||
style={{ maxHeight: '150px' }}
|
||||
className={this.state.hasCustomClassName ? this.customClassName : ''}
|
||||
>
|
||||
<div className="bonus-content">
|
||||
{this.state.componentContent}
|
||||
</div>
|
||||
{this.loremIpsumLong}
|
||||
<br />
|
||||
<br />
|
||||
{this.loremIpsumShort}
|
||||
</OverlayScrollbarsComponent>
|
||||
{this.loremIpsumMedium}
|
||||
<br />
|
||||
<br />
|
||||
{this.loremIpsumShort}
|
||||
<br />
|
||||
<br />
|
||||
{this.loremIpsumLong}
|
||||
{
|
||||
this.state.loremList.map((item, index) => {
|
||||
return <div key={index} data-key={index}><br />{item}</div>;
|
||||
})
|
||||
}
|
||||
</OverlayScrollbarsComponent>
|
||||
|
||||
<div className="buttons">
|
||||
<button onClick={(event) => { this.onBtnScrollRandom.call(this, event, [this.osComponentRef1, this.osComponentRef2]) }}>Scroll</button>
|
||||
<button onClick={() => { this.onBtnChangeOptions.call(this) }}>Change Options</button>
|
||||
<button onClick={() => { this.onBtnChangeContent.call(this) }}>Change Content</button>
|
||||
<button onClick={() => { this.onBtnLog.call(this) }}>Log</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="702px" height="468px" viewBox="0 0 702 468" enable-background="new 0 0 702 468" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.9951" y1="234" x2="700.0049" y2="234">
|
||||
<stop offset="0" style="stop-color:#36BEFD"/>
|
||||
<stop offset="1" style="stop-color:#6461F6"/>
|
||||
</linearGradient>
|
||||
<path fill="none" stroke="url(#SVGID_1_)" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" d="M234.014,337.502
|
||||
c-9.188,0-18.292-1.193-27.057-3.545c-13.539-3.633-26.531-10.188-37.572-18.955c-10.933-8.682-20.222-19.736-26.863-31.969
|
||||
c-6.813-12.549-11.024-26.725-12.18-40.996c-1.188-14.668,0.756-29.659,5.62-43.355c4.671-13.151,12.186-25.547,21.73-35.847
|
||||
c9.515-10.269,21.266-18.694,33.982-24.368c13.146-5.865,27.781-8.966,42.325-8.966c3.586,0,7.203,0.184,10.75,0.547
|
||||
c14.193,1.452,28.242,5.949,40.627,13.003c12.096,6.889,22.958,16.396,31.414,27.495c8.555,11.229,14.85,24.37,18.203,38.003
|
||||
c3.509,14.265,3.951,29.467,1.278,43.964c-2.561,13.884-8.109,27.427-16.047,39.163c-7.806,11.541-18.112,21.643-29.805,29.211
|
||||
c-11.912,7.709-25.592,12.986-39.562,15.258C245.323,337.045,239.656,337.502,234.014,337.502
|
||||
C234.014,337.502,234.014,337.502,234.014,337.502z M570.998,338h-6.215h-26.65H500.59h-39.085h-31.278h-14.12
|
||||
c-14.94,0-29.099,6.24-38.846,17.121c-12.376,13.813-16.449,33.305-10.63,50.865c6.084,18.361,22.291,32.152,41.292,35.137
|
||||
c3.765,0.59,7.247,0.877,10.646,0.877h21.281h35.12h39.608h34.746h20.533c4.154,0,7.918-0.318,11.725-0.674
|
||||
c11.898-1.107,23.729-4.436,35.166-9.893c21.475-10.246,38.934-27.695,49.156-49.133c10.625-22.271,12.957-47.695,6.57-71.588
|
||||
c-6.066-22.697-19.951-42.912-39.094-56.922c-17.434-12.762-39.299-19.79-61.566-19.79h-19.836h-37.801h-34.63h-0.238
|
||||
c-0.064,0-0.128,0-0.192,0c-7.594,0-14.766-0.01-20.863-1.207c-13.334-2.618-25.441-10.797-33.215-22.437
|
||||
c-3.901-5.841-6.721-12.783-8.154-20.074c-1.492-7.591-0.939-15.579,1.642-23.742c4.497-14.223,14.729-25.905,28.074-32.053
|
||||
c6.373-2.936,13.886-4.487,21.729-4.487h3.353h22.485h35.71h39.555h34.021h19.109c6.848,0,13.436-1.16,19.578-3.448
|
||||
c16.672-6.206,29.244-20.975,32.814-38.542c3.609-17.757-2.477-36.397-15.879-48.646C649.65,30.746,637.154,26,623.891,26h-6.633
|
||||
h-15.867h-23.605h-29.85h-34.594h-37.846h-39.599h-39.858h-38.619h-35.885h-31.655H263.95h-18.707h-9.988
|
||||
c-13.158,0-23.905,0.728-33.822,2.288c-20.802,3.273-40.457,9.37-58.42,18.12c-18.023,8.778-34.679,20.118-49.506,33.705
|
||||
c-14.775,13.541-27.499,29.094-37.814,46.228c-10.511,17.454-18.368,36.299-23.354,56.01c-5.159,20.397-7.188,41.485-6.027,62.679
|
||||
c1.14,20.832,5.375,41.268,12.586,60.732c7.001,18.898,16.719,36.666,28.885,52.811c12.035,15.973,26.277,30.115,42.335,42.037
|
||||
c16.245,12.059,34.087,21.652,53.04,28.514c19.537,7.074,39.766,11.68,60.63,12.662c3.03,0.145,6.092,0.215,9.211,0.215
|
||||
c6.56,0,13.266-0.314,20.096-0.945c6.583-0.607,12.544-1.428,18.352-2.508c3.41-0.633,6.481-1.338,9.647-2.152"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.2 KiB |
@@ -1,48 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="890.053px" height="792.629px" viewBox="515.064 141.508 890.053 792.629"
|
||||
enable-background="new 515.064 141.508 890.053 792.629" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#61DAFB" d="M1405.116,537.914c0-58.962-73.838-114.84-187.045-149.491c26.125-115.384,14.514-207.183-36.646-236.573
|
||||
c-11.793-6.894-25.581-10.16-40.639-10.16v40.457c8.346,0,15.058,1.633,20.682,4.717c24.674,14.151,35.377,68.033,27.032,137.335
|
||||
c-1.995,17.054-5.262,35.015-9.253,53.338c-35.559-8.708-74.383-15.421-115.202-19.774c-24.491-33.563-49.891-64.042-75.471-90.711
|
||||
c59.143-54.971,114.658-85.086,152.394-85.086v-40.457c-49.891,0-115.202,35.559-181.24,97.242
|
||||
c-66.037-61.32-131.349-96.516-181.239-96.516v40.457c37.554,0,93.251,29.935,152.394,84.542
|
||||
c-25.398,26.669-50.798,56.966-74.927,90.529c-41.001,4.354-79.825,11.066-115.384,19.956c-4.173-18.142-7.257-35.74-9.434-52.612
|
||||
c-8.527-69.303,1.995-123.185,26.487-137.517c5.442-3.266,12.518-4.717,20.863-4.717v-40.457c-15.239,0-29.027,3.266-41.001,10.16
|
||||
c-50.979,29.39-62.409,121.008-36.104,236.029c-112.844,34.832-186.319,90.528-186.319,149.31
|
||||
c0,58.962,73.839,114.839,187.046,149.49c-26.125,115.384-14.514,207.184,36.646,236.573c11.793,6.895,25.58,10.16,40.82,10.16
|
||||
c49.891,0,115.202-35.559,181.239-97.242c66.037,61.32,131.349,96.517,181.24,96.517c15.239,0,29.027-3.266,41.001-10.16
|
||||
c50.979-29.391,62.408-121.008,36.103-236.029C1331.642,652.571,1405.117,596.694,1405.116,537.914L1405.116,537.914z
|
||||
M1168.906,416.906c-6.713,23.402-15.058,47.532-24.491,71.661c-7.438-14.514-15.24-29.027-23.767-43.541
|
||||
c-8.346-14.514-17.235-28.665-26.125-42.453C1120.285,406.384,1145.14,411.101,1168.906,416.906L1168.906,416.906z
|
||||
M1085.815,610.119c-14.15,24.492-28.664,47.714-43.723,69.303c-27.031,2.358-54.426,3.629-82.002,3.629
|
||||
c-27.395,0-54.789-1.271-81.64-3.447c-15.058-21.589-29.753-44.63-43.904-68.939c-13.788-23.767-26.306-47.896-37.735-72.206
|
||||
c11.248-24.311,23.947-48.621,37.555-72.387c14.15-24.492,28.664-47.714,43.723-69.304c27.031-2.358,54.426-3.628,82.002-3.628
|
||||
c27.395,0,54.789,1.27,81.64,3.447c15.058,21.589,29.753,44.629,43.903,68.939c13.788,23.767,26.307,47.896,37.736,72.206
|
||||
C1111.94,562.043,1099.422,586.354,1085.815,610.119L1085.815,610.119z M1144.415,586.534
|
||||
c9.796,24.311,18.142,48.621,25.035,72.206c-23.766,5.806-48.802,10.704-74.745,14.514c8.89-13.97,17.779-28.302,26.125-42.997
|
||||
C1129.175,615.743,1136.976,601.048,1144.415,586.534z M960.454,780.111c-16.873-17.417-33.745-36.829-50.436-58.055
|
||||
c16.328,0.726,33.019,1.27,49.891,1.27c17.054,0,33.926-0.363,50.436-1.27C994.017,743.282,977.145,762.694,960.454,780.111z
|
||||
M825.477,673.254c-25.763-3.81-50.617-8.527-74.383-14.332c6.712-23.403,15.058-47.532,24.491-71.662
|
||||
c7.438,14.514,15.24,29.027,23.767,43.542C807.878,645.315,816.587,659.466,825.477,673.254z M959.546,295.716
|
||||
c16.873,17.417,33.745,36.829,50.436,58.055c-16.328-0.726-33.019-1.271-49.891-1.271c-17.054,0-33.926,0.363-50.436,1.271
|
||||
C925.983,332.545,942.855,313.133,959.546,295.716z M825.295,402.573c-8.89,13.97-17.779,28.302-26.125,42.997
|
||||
c-8.345,14.514-16.146,29.027-23.585,43.541c-9.796-24.311-18.142-48.621-25.035-72.206
|
||||
C774.315,411.281,799.352,406.383,825.295,402.573L825.295,402.573z M661.108,629.713
|
||||
c-64.223-27.395-105.769-63.316-105.769-91.799c0-28.483,41.546-64.586,105.769-91.8c15.603-6.712,32.656-12.699,50.254-18.323
|
||||
c10.341,35.559,23.947,72.568,40.82,110.485c-16.691,37.735-30.116,74.564-40.276,109.941
|
||||
C693.946,642.594,676.893,636.426,661.108,629.713L661.108,629.713z M758.713,888.964c-24.673-14.151-35.377-68.033-27.031-137.336
|
||||
c1.995-17.054,5.261-35.015,9.252-53.338c35.559,8.708,74.383,15.421,115.203,19.774c24.491,33.563,49.891,64.042,75.471,90.711
|
||||
c-59.144,54.971-114.658,85.087-152.394,85.087C771.05,893.681,764.156,892.048,758.713,888.964L758.713,888.964z
|
||||
M1189.044,750.721c8.527,69.303-1.995,123.185-26.487,137.518c-5.442,3.266-12.519,4.717-20.863,4.717
|
||||
c-37.554,0-93.251-29.935-152.394-84.543c25.398-26.669,50.798-56.966,74.927-90.528c41.001-4.354,79.825-11.067,115.384-19.957
|
||||
C1183.783,716.251,1187.049,733.849,1189.044,750.721z M1258.892,629.713c-15.603,6.713-32.656,12.699-50.254,18.323
|
||||
c-10.341-35.559-23.947-72.568-40.82-110.485c16.691-37.735,30.116-74.564,40.276-109.941c17.96,5.624,35.014,11.793,50.979,18.505
|
||||
c64.223,27.395,105.768,63.316,105.768,91.8C1364.66,566.396,1323.114,602.5,1258.892,629.713L1258.892,629.713z"/>
|
||||
<circle fill="#61DAFB" cx="959.909" cy="537.914" r="82.91"/>
|
||||
<path fill="#61DAFB" d="M1140.604,141.69"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.7 KiB |
@@ -1,11 +0,0 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 11pt;
|
||||
color: #31485B;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import 'overlayscrollbars/css/OverlayScrollbars.css';
|
||||
import './index.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
serviceWorker.unregister();
|
||||
|
||||
OverlayScrollbars(document.body, {
|
||||
nativeScrollbarsOverlaid: {
|
||||
initialize: false
|
||||
}
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
/// <reference types="react-scripts" />
|
||||
@@ -1,143 +0,0 @@
|
||||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
type Config = {
|
||||
onSuccess?: (registration: ServiceWorkerRegistration) => void;
|
||||
onUpdate?: (registration: ServiceWorkerRegistration) => void;
|
||||
};
|
||||
|
||||
export function register(config?: Config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(
|
||||
(process as { env: { [key: string]: string } }).env.PUBLIC_URL,
|
||||
window.location.href
|
||||
);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl: string, config?: Config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl: string, config?: Config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"strict": false
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
-3927
File diff suppressed because it is too large
Load Diff
@@ -1,52 +0,0 @@
|
||||
{
|
||||
"name": "overlayscrollbars-react",
|
||||
"version": "0.2.2",
|
||||
"description": "OverlayScrollbars wrapper for React.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"react"
|
||||
],
|
||||
"files": [
|
||||
"src",
|
||||
"dist"
|
||||
],
|
||||
"homepage": "https://kingsora.github.io/OverlayScrollbars",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars/issues"
|
||||
},
|
||||
"main": "./dist/overlayscrollbars-react.js",
|
||||
"module": "./dist/overlayscrollbars-react.esm.js",
|
||||
"typings": "./dist/types/index.d.ts",
|
||||
"author": "KingSora | Rene Haas",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"@types/react": "^16.9.27",
|
||||
"chalk": "^2.4.2",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-json-editor": "^2.5.4",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"react": "^16.13.1",
|
||||
"rollup": "^1.32.1",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-typescript2": "^0.22.0",
|
||||
"shelljs": "^0.8.3",
|
||||
"typescript": "^3.8.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.4.0",
|
||||
"overlayscrollbars": "^1.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"setup": "npm i && cd example && npm i && cd ..",
|
||||
"build": "node build.js",
|
||||
"example": "cd example && npm start",
|
||||
"build-example": "cd example && npm run build",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
import React, { Component, RefObject } from 'react';
|
||||
import OverlayScrollbars from "overlayscrollbars";
|
||||
|
||||
export interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children?: any;
|
||||
options?: OverlayScrollbars.Options;
|
||||
extensions?: OverlayScrollbars.Extensions;
|
||||
}
|
||||
export interface OverlayScrollbarsComponentState { }
|
||||
|
||||
export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {
|
||||
private _osInstance: OverlayScrollbars | null = null;
|
||||
private _osTargetRef: RefObject<HTMLDivElement>;
|
||||
|
||||
constructor(props: OverlayScrollbarsComponentProps) {
|
||||
super(props);
|
||||
this._osTargetRef = React.createRef();
|
||||
}
|
||||
|
||||
osInstance(): OverlayScrollbars | null {
|
||||
return this._osInstance;
|
||||
}
|
||||
|
||||
osTarget(): HTMLDivElement | null {
|
||||
return this._osTargetRef.current || null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
|
||||
mergeHostClassNames(this._osInstance, this.props.className);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.destroy();
|
||||
this._osInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.options(this.props.options);
|
||||
|
||||
if (prevProps.className !== this.props.className) {
|
||||
mergeHostClassNames(this._osInstance, this.props.className);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
options,
|
||||
extensions,
|
||||
children,
|
||||
className,
|
||||
...divProps
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className="os-host" {...divProps} ref={this._osTargetRef}>
|
||||
<div className="os-resize-observer-host"></div>
|
||||
<div className="os-padding">
|
||||
<div className="os-viewport">
|
||||
<div className="os-content">
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="os-scrollbar os-scrollbar-horizontal ">
|
||||
<div className="os-scrollbar-track">
|
||||
<div className="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="os-scrollbar os-scrollbar-vertical">
|
||||
<div className="os-scrollbar-track">
|
||||
<div className="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="os-scrollbar-corner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mergeHostClassNames(osInstance: OverlayScrollbars, className: string) {
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
const { host } = osInstance.getElements();
|
||||
const regex = new RegExp(`(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, "$|")}$`, 'g');
|
||||
const osClassNames = host.className.split(' ')
|
||||
.filter(name => name.match(regex))
|
||||
.join(' ');
|
||||
|
||||
host.className = `${osClassNames} ${className || ''}`;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from './OverlayScrollbarsComponent';
|
||||
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Rene Haas
|
||||
|
||||
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.
|
||||
@@ -1,122 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://vuejs.org/"><img src="https://kingsora.github.io/OverlayScrollbars/frameworks/vue/logo.svg" width="200" height="133" alt="Vue"></a>
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
|
||||
</p>
|
||||
<h6 align="center">
|
||||
<a href="https://github.com/vuejs/vue"><img src="https://img.shields.io/badge/Vue-%5E2.6.0-41B883?style=flat-square&logo=vue.js" alt="Vue"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.10.0-36befd?style=flat-square" alt="OverlayScrollbars"></a>
|
||||
<a href="https://www.npmjs.com/package/overlayscrollbars-vue"><img src="https://img.shields.io/npm/dt/overlayscrollbars-vue.svg?style=flat-square" alt="Downloads"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-vue/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
|
||||
</h6>
|
||||
<h3 align="center">
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/frameworks/vue/">Example</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
|
||||
</h3>
|
||||
<h5 align="center">
|
||||
The official OverlayScrollbars wrapper for Vue.
|
||||
</h5>
|
||||
|
||||
## Installation
|
||||
```sh
|
||||
npm install overlayscrollbars-vue
|
||||
```
|
||||
|
||||
## Peer Dependencies
|
||||
OverlayScrollbars for Vue has the following **peer dependencies**:
|
||||
- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars)
|
||||
```
|
||||
npm install overlayscrollbars
|
||||
```
|
||||
- The Vue framework: [vue](https://www.npmjs.com/package/vue)
|
||||
```
|
||||
npm install vue
|
||||
```
|
||||
|
||||
## TypeScript
|
||||
- In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars):
|
||||
```
|
||||
npm install @types/overlayscrollbars
|
||||
```
|
||||
Since this wrapper is written in TypeScript it comes with its generated typings.<br>
|
||||
Check out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options.
|
||||
|
||||
## Usage
|
||||
#### CSS
|
||||
You have to import the `OverlayScrollbars.css` by yourself.<br>
|
||||
The component **doesn't** do it for you as the styles are **global styles**!<br>
|
||||
There are different ways to achieve this, in Vue the most simple way for me was to add [this line](https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-vue/example/src/main.ts#L1) in the `main` file:
|
||||
```js
|
||||
import 'overlayscrollbars/css/OverlayScrollbars.css';
|
||||
```
|
||||
|
||||
#### Import
|
||||
With the [Vue.use](https://vuejs.org/v2/api/#Vue-use) method you can register the wrapper globally:
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { OverlayScrollbarsPlugin } from 'overlayscrollbars-vue';
|
||||
|
||||
Vue.use(OverlayScrollbarsPlugin);
|
||||
```
|
||||
In case you wanna register the Component manually via [global](https://vuejs.org/v2/guide/components-registration.html#Global-Registration) or [local](https://vuejs.org/v2/guide/components-registration.html#Local-Registration) registration, you can simply import it and do whatever you want with it:
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
|
||||
|
||||
// global registration
|
||||
Vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
|
||||
|
||||
// local registration
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: {
|
||||
'overlay-scrollbars': OverlayScrollbarsComponent
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### Template
|
||||
After the registration you can use it in templates like:
|
||||
```html
|
||||
<overlay-scrollbars>
|
||||
example content
|
||||
</overlay-scrollbars>
|
||||
```
|
||||
The default selector is `overlay-scrollbars`, but in case you register it manually you can choose it by yourself.
|
||||
|
||||
#### Properties
|
||||
Two properties are accepted: `options` and `extensions`.
|
||||
- The `options` property accepts a `object` and can be changed at any point in time, and the plugin will adapt.
|
||||
- The `extensions` property accepts a `string`, `string array` or `object` and is only taken into account if the component gets mounted.
|
||||
|
||||
```vue
|
||||
<overlay-scrollbars
|
||||
:options="{ scrollbars: { autoHide: 'scroll' } }"
|
||||
:extensions="['extensionA', 'extensionB']"
|
||||
>
|
||||
</overlay-scrollbars>
|
||||
```
|
||||
You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), `extensions` are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization).
|
||||
|
||||
#### Instance
|
||||
If you get the component reference, it provides two methods: `osInstance()` and `osTarget()`.
|
||||
- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed.
|
||||
- The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component isn't mounted yet or already unmounted.
|
||||
|
||||
## Example App
|
||||
In case you need a example app for reference, you can use the example app in this repo(`example folder`):
|
||||
- [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/vue/)
|
||||
- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue/example)
|
||||
|
||||
If you wanna build the example app, run these commands:
|
||||
```sh
|
||||
npm run setup
|
||||
npm run build
|
||||
npm run example
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@@ -1,152 +0,0 @@
|
||||
const packageName = 'overlayscrollbars-vue';
|
||||
const rollupUmdName = 'OverlayScrollbarsVue';
|
||||
const filesInfo = {
|
||||
fileName: packageName,
|
||||
srcFolder: './src',
|
||||
distFolder: './dist',
|
||||
typingsFolder: './dist/types',
|
||||
exampleFolder: './example',
|
||||
tsconfigJsonPath: './tsconfig.json',
|
||||
packageJsonPath: './package.json',
|
||||
cache: []
|
||||
}
|
||||
const packagePaths = {
|
||||
main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
|
||||
module: `${filesInfo.distFolder}/${filesInfo.fileName}.esm.js`,
|
||||
typings: `${filesInfo.typingsFolder}/index.d.ts`
|
||||
}
|
||||
const rollupUmdGlobals = {
|
||||
'vue': 'Vue',
|
||||
'overlayscrollbars': 'OverlayScrollbars'
|
||||
};
|
||||
|
||||
const packageJson = require(filesInfo.packageJsonPath);
|
||||
const tsconfigJson = require(filesInfo.tsconfigJsonPath);
|
||||
|
||||
const path = require('path');
|
||||
const sh = require('shelljs');
|
||||
const chalk = require('chalk');
|
||||
const gulp = require('gulp');
|
||||
const rollup = require('rollup');
|
||||
const rollupCommonJs = require('rollup-plugin-commonjs');
|
||||
const rollupTypeScript = require('rollup-plugin-typescript2');
|
||||
const rollupResolve = require('rollup-plugin-node-resolve');
|
||||
const rollupVue = require('rollup-plugin-vue');
|
||||
const rollupInputConfig = {
|
||||
input: `${filesInfo.srcFolder}/index.ts`,
|
||||
external: [...Object.keys(packageJson.devDependencies), ...Object.keys(packageJson.peerDependencies)],
|
||||
plugins: [
|
||||
rollupResolve(),
|
||||
rollupCommonJs(),
|
||||
rollupVue({ defaultLang: 'ts' })
|
||||
]
|
||||
};
|
||||
const rollupOutputConfig = {
|
||||
exports: 'named',
|
||||
sourcemap: true
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
sh.echo(chalk.cyanBright('Start building:'));
|
||||
|
||||
gulp.task('prepare', function (done) {
|
||||
sh.echo(`> Removing ${filesInfo.distFolder}`);
|
||||
sh.rm('-rf', filesInfo.distFolder);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('tsconfigJson', function (done) {
|
||||
sh.echo(`> Prepare ${filesInfo.tsconfigJsonPath}`);
|
||||
let newTsconfigJson = {
|
||||
...tsconfigJson,
|
||||
compilerOptions: {
|
||||
...tsconfigJson.compilerOptions,
|
||||
declarationDir: filesInfo.typingsFolder,
|
||||
outDir: filesInfo.distFolder,
|
||||
},
|
||||
include: [filesInfo.srcFolder],
|
||||
exclude: [filesInfo.distFolder, filesInfo.exampleFolder, 'node_modules']
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newTsconfigJson, null, 4)).to(filesInfo.tsconfigJsonPath);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('packageJson', function (done) {
|
||||
sh.echo(`> Prepare ${filesInfo.packageJsonPath}`);
|
||||
let newPackageJson = {
|
||||
...packageJson,
|
||||
...packagePaths,
|
||||
name: packageName,
|
||||
files: [
|
||||
path.normalize(filesInfo.srcFolder),
|
||||
path.normalize(filesInfo.distFolder)
|
||||
]
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(filesInfo.packageJsonPath);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task('rollup', function (done) {
|
||||
sh.echo('> Rollup:');
|
||||
(async function () {
|
||||
let rollupTsconfig = {
|
||||
useTsconfigDeclarationDir: true,
|
||||
objectHashIgnoreUnknownHack: true,
|
||||
clean: true,
|
||||
tsconfig: filesInfo.tsconfigJsonPath,
|
||||
tsconfigOverride: {
|
||||
compilerOptions: {
|
||||
target: 'es5'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
rollupTsconfig.tsconfigOverride.compilerOptions.target = 'es5';
|
||||
let es5umdBundle = await rollup.rollup({
|
||||
...rollupInputConfig,
|
||||
plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(rollupInputConfig.plugins)
|
||||
});
|
||||
await es5umdBundle.write({
|
||||
name: rollupUmdName,
|
||||
globals: rollupUmdGlobals,
|
||||
file: packagePaths.main,
|
||||
format: 'umd',
|
||||
...rollupOutputConfig
|
||||
});
|
||||
sh.echo(chalk.yellowBright(` [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & umd]: `) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.main}`));
|
||||
|
||||
rollupTsconfig.tsconfigOverride.compilerOptions.target = 'es6';
|
||||
let es6esmBundle = await rollup.rollup({
|
||||
...rollupInputConfig,
|
||||
plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(rollupInputConfig.plugins)
|
||||
});
|
||||
await es6esmBundle.write({
|
||||
file: packagePaths.module,
|
||||
format: 'esm',
|
||||
...rollupOutputConfig
|
||||
});
|
||||
sh.echo(chalk.yellowBright(` [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & esm]: `) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.module}`));
|
||||
|
||||
filesInfo.cache.forEach(function (cacheFolder) {
|
||||
if (sh.test('-d', cacheFolder)) {
|
||||
sh.rm('-rf', cacheFolder);
|
||||
}
|
||||
});
|
||||
|
||||
sh.echo(chalk.greenBright('Building finished!'));
|
||||
done();
|
||||
})();
|
||||
});
|
||||
|
||||
gulp.task('example', function (done) {
|
||||
sh.echo();
|
||||
sh.echo(chalk.cyanBright(`Copy to example → ${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`));
|
||||
sh.mkdir('-p', `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`);
|
||||
sh.cp('-Rf', [filesInfo.srcFolder, filesInfo.distFolder, filesInfo.packageJsonPath], `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`);
|
||||
sh.echo(chalk.greenBright('Copying finished!'));
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.series('prepare', 'tsconfigJson', 'packageJson', 'rollup', 'example')();
|
||||
@@ -1,212 +0,0 @@
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
import Vue from 'vue';
|
||||
|
||||
class OverlayScrollbarsComponent extends Vue.extend({
|
||||
name: 'overlay-scrollbars',
|
||||
props: {
|
||||
options: {
|
||||
type: Object
|
||||
},
|
||||
extensions: {
|
||||
type: [String, Array, Object]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
osInstance() {
|
||||
return this._osInstace;
|
||||
},
|
||||
osTarget() {
|
||||
return this.$el || null;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options(currOptions, oldOptions) {
|
||||
let osInstance = this._osInstace;
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
osInstance.options(currOptions);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this._osInstace = OverlayScrollbars(this.osTarget(), this.options || {}, this.extensions);
|
||||
},
|
||||
beforeDestroy() {
|
||||
const osInstance = this._osInstace;
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
osInstance.destroy();
|
||||
this._osInstace = null;
|
||||
}
|
||||
}
|
||||
}) {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this._osInstace = null;
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
||||
if (typeof shadowMode !== 'boolean') {
|
||||
createInjectorSSR = createInjector;
|
||||
createInjector = shadowMode;
|
||||
shadowMode = false;
|
||||
}
|
||||
// Vue.extend constructor export interop.
|
||||
const options = typeof script === 'function' ? script.options : script;
|
||||
// render functions
|
||||
if (template && template.render) {
|
||||
options.render = template.render;
|
||||
options.staticRenderFns = template.staticRenderFns;
|
||||
options._compiled = true;
|
||||
// functional template
|
||||
if (isFunctionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
}
|
||||
// scopedId
|
||||
if (scopeId) {
|
||||
options._scopeId = scopeId;
|
||||
}
|
||||
let hook;
|
||||
if (moduleIdentifier) {
|
||||
// server build
|
||||
hook = function (context) {
|
||||
// 2.3 injection
|
||||
context =
|
||||
context || // cached call
|
||||
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
||||
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
|
||||
// 2.2 with runInNewContext: true
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
// inject component styles
|
||||
if (style) {
|
||||
style.call(this, createInjectorSSR(context));
|
||||
}
|
||||
// register component module identifier for async chunk inference
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
// used by ssr in case component is cached and beforeCreate
|
||||
// never gets called
|
||||
options._ssrRegister = hook;
|
||||
}
|
||||
else if (style) {
|
||||
hook = shadowMode
|
||||
? function (context) {
|
||||
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
||||
}
|
||||
: function (context) {
|
||||
style.call(this, createInjector(context));
|
||||
};
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
// register for functional component in vue file
|
||||
const originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
}
|
||||
else {
|
||||
// inject component registration as beforeCreate hook
|
||||
const existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
/* script */
|
||||
const __vue_script__ = OverlayScrollbarsComponent;
|
||||
|
||||
/* template */
|
||||
var __vue_render__ = function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
return _c("div", { staticClass: "os-host" }, [
|
||||
_c("div", { staticClass: "os-resize-observer-host" }),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "os-padding" }, [
|
||||
_c("div", { staticClass: "os-viewport" }, [
|
||||
_c("div", { staticClass: "os-content" }, [_vm._t("default")], 2)
|
||||
])
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_vm._m(0),
|
||||
_vm._v(" "),
|
||||
_vm._m(1),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "os-scrollbar-corner" })
|
||||
])
|
||||
};
|
||||
var __vue_staticRenderFns__ = [
|
||||
function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
return _c("div", { staticClass: "os-scrollbar os-scrollbar-horizontal " }, [
|
||||
_c("div", { staticClass: "os-scrollbar-track" }, [
|
||||
_c("div", { staticClass: "os-scrollbar-handle" })
|
||||
])
|
||||
])
|
||||
},
|
||||
function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
return _c("div", { staticClass: "os-scrollbar os-scrollbar-vertical" }, [
|
||||
_c("div", { staticClass: "os-scrollbar-track" }, [
|
||||
_c("div", { staticClass: "os-scrollbar-handle" })
|
||||
])
|
||||
])
|
||||
}
|
||||
];
|
||||
__vue_render__._withStripped = true;
|
||||
|
||||
/* style */
|
||||
const __vue_inject_styles__ = undefined;
|
||||
/* scoped */
|
||||
const __vue_scope_id__ = undefined;
|
||||
/* module identifier */
|
||||
const __vue_module_identifier__ = undefined;
|
||||
/* functional template */
|
||||
const __vue_is_functional_template__ = false;
|
||||
/* style inject */
|
||||
|
||||
/* style inject SSR */
|
||||
|
||||
/* style inject shadow dom */
|
||||
|
||||
|
||||
|
||||
const __vue_component__ = normalizeComponent(
|
||||
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
||||
__vue_inject_styles__,
|
||||
__vue_script__,
|
||||
__vue_scope_id__,
|
||||
__vue_is_functional_template__,
|
||||
__vue_module_identifier__,
|
||||
false,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
|
||||
const OverlayScrollbarsPlugin = {
|
||||
install(vue, options) {
|
||||
if (options) {
|
||||
OverlayScrollbars.defaultOptions(options);
|
||||
}
|
||||
vue.component('overlay-scrollbars', __vue_component__);
|
||||
}
|
||||
};
|
||||
|
||||
export { __vue_component__ as OverlayScrollbarsComponent, OverlayScrollbarsPlugin };
|
||||
//# sourceMappingURL=overlayscrollbars-vue.esm.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -1,255 +0,0 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('overlayscrollbars'), require('vue')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'overlayscrollbars', 'vue'], factory) :
|
||||
(global = global || self, factory(global.OverlayScrollbarsVue = {}, global.OverlayScrollbars, global.Vue));
|
||||
}(this, (function (exports, OverlayScrollbars, Vue) { 'use strict';
|
||||
|
||||
OverlayScrollbars = OverlayScrollbars && Object.prototype.hasOwnProperty.call(OverlayScrollbars, 'default') ? OverlayScrollbars['default'] : OverlayScrollbars;
|
||||
Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
/* global Reflect, Promise */
|
||||
|
||||
var extendStatics = function(d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
|
||||
function __extends(d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
}
|
||||
|
||||
var OverlayScrollbarsComponent = (function (_super) {
|
||||
__extends(OverlayScrollbarsComponent, _super);
|
||||
function OverlayScrollbarsComponent() {
|
||||
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||
_this._osInstace = null;
|
||||
return _this;
|
||||
}
|
||||
return OverlayScrollbarsComponent;
|
||||
}(Vue.extend({
|
||||
name: 'overlay-scrollbars',
|
||||
props: {
|
||||
options: {
|
||||
type: Object
|
||||
},
|
||||
extensions: {
|
||||
type: [String, Array, Object]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
osInstance: function () {
|
||||
return this._osInstace;
|
||||
},
|
||||
osTarget: function () {
|
||||
return this.$el || null;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: function (currOptions, oldOptions) {
|
||||
var osInstance = this._osInstace;
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
osInstance.options(currOptions);
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
mounted: function () {
|
||||
this._osInstace = OverlayScrollbars(this.osTarget(), this.options || {}, this.extensions);
|
||||
},
|
||||
beforeDestroy: function () {
|
||||
var osInstance = this._osInstace;
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
osInstance.destroy();
|
||||
this._osInstace = null;
|
||||
}
|
||||
}
|
||||
})));
|
||||
|
||||
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
||||
if (typeof shadowMode !== 'boolean') {
|
||||
createInjectorSSR = createInjector;
|
||||
createInjector = shadowMode;
|
||||
shadowMode = false;
|
||||
}
|
||||
// Vue.extend constructor export interop.
|
||||
const options = typeof script === 'function' ? script.options : script;
|
||||
// render functions
|
||||
if (template && template.render) {
|
||||
options.render = template.render;
|
||||
options.staticRenderFns = template.staticRenderFns;
|
||||
options._compiled = true;
|
||||
// functional template
|
||||
if (isFunctionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
}
|
||||
// scopedId
|
||||
if (scopeId) {
|
||||
options._scopeId = scopeId;
|
||||
}
|
||||
let hook;
|
||||
if (moduleIdentifier) {
|
||||
// server build
|
||||
hook = function (context) {
|
||||
// 2.3 injection
|
||||
context =
|
||||
context || // cached call
|
||||
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
||||
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
|
||||
// 2.2 with runInNewContext: true
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
// inject component styles
|
||||
if (style) {
|
||||
style.call(this, createInjectorSSR(context));
|
||||
}
|
||||
// register component module identifier for async chunk inference
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
// used by ssr in case component is cached and beforeCreate
|
||||
// never gets called
|
||||
options._ssrRegister = hook;
|
||||
}
|
||||
else if (style) {
|
||||
hook = shadowMode
|
||||
? function (context) {
|
||||
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
||||
}
|
||||
: function (context) {
|
||||
style.call(this, createInjector(context));
|
||||
};
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
// register for functional component in vue file
|
||||
const originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
}
|
||||
else {
|
||||
// inject component registration as beforeCreate hook
|
||||
const existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
/* script */
|
||||
const __vue_script__ = OverlayScrollbarsComponent;
|
||||
|
||||
/* template */
|
||||
var __vue_render__ = function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
return _c("div", { staticClass: "os-host" }, [
|
||||
_c("div", { staticClass: "os-resize-observer-host" }),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "os-padding" }, [
|
||||
_c("div", { staticClass: "os-viewport" }, [
|
||||
_c("div", { staticClass: "os-content" }, [_vm._t("default")], 2)
|
||||
])
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_vm._m(0),
|
||||
_vm._v(" "),
|
||||
_vm._m(1),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "os-scrollbar-corner" })
|
||||
])
|
||||
};
|
||||
var __vue_staticRenderFns__ = [
|
||||
function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
return _c("div", { staticClass: "os-scrollbar os-scrollbar-horizontal " }, [
|
||||
_c("div", { staticClass: "os-scrollbar-track" }, [
|
||||
_c("div", { staticClass: "os-scrollbar-handle" })
|
||||
])
|
||||
])
|
||||
},
|
||||
function() {
|
||||
var _vm = this;
|
||||
var _h = _vm.$createElement;
|
||||
var _c = _vm._self._c || _h;
|
||||
return _c("div", { staticClass: "os-scrollbar os-scrollbar-vertical" }, [
|
||||
_c("div", { staticClass: "os-scrollbar-track" }, [
|
||||
_c("div", { staticClass: "os-scrollbar-handle" })
|
||||
])
|
||||
])
|
||||
}
|
||||
];
|
||||
__vue_render__._withStripped = true;
|
||||
|
||||
/* style */
|
||||
const __vue_inject_styles__ = undefined;
|
||||
/* scoped */
|
||||
const __vue_scope_id__ = undefined;
|
||||
/* module identifier */
|
||||
const __vue_module_identifier__ = undefined;
|
||||
/* functional template */
|
||||
const __vue_is_functional_template__ = false;
|
||||
/* style inject */
|
||||
|
||||
/* style inject SSR */
|
||||
|
||||
/* style inject shadow dom */
|
||||
|
||||
|
||||
|
||||
const __vue_component__ = normalizeComponent(
|
||||
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
||||
__vue_inject_styles__,
|
||||
__vue_script__,
|
||||
__vue_scope_id__,
|
||||
__vue_is_functional_template__,
|
||||
__vue_module_identifier__,
|
||||
false,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
|
||||
var OverlayScrollbarsPlugin = {
|
||||
install: function (vue, options) {
|
||||
if (options) {
|
||||
OverlayScrollbars.defaultOptions(options);
|
||||
}
|
||||
vue.component('overlay-scrollbars', __vue_component__);
|
||||
}
|
||||
};
|
||||
|
||||
exports.OverlayScrollbarsComponent = __vue_component__;
|
||||
exports.OverlayScrollbarsPlugin = OverlayScrollbarsPlugin;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=overlayscrollbars-vue.js.map
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user