diff --git a/.gitpod.yml b/.gitpod.yml deleted file mode 100644 index 3e4891ec..00000000 --- a/.gitpod.yml +++ /dev/null @@ -1,6 +0,0 @@ -tasks: - - init: npm install - command: npm run start -ports: - - port: 3000 - onOpen: open-preview diff --git a/bower.json b/bower.json deleted file mode 100644 index a7c36d5b..00000000 --- a/bower.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "smooth-scrollbar", - "version": "8.8.3", - "authors": [ - "Dolphin Wood " - ], - "description": "Customize scrollbar in modern browsers with smooth scrolling experience.", - "main": "dist/smooth-scrollbar.js", - "moduleType": [ - "globals", - "amd", - "node" - ], - "keywords": [ - "scrollbar", - "customize", - "acceleration", - "performance" - ], - "license": "MIT", - "homepage": "https://github.com/idiotWu/smooth-scrollbar", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "__demo__", - "build", - "test" - ] -} \ No newline at end of file diff --git a/demo/images/your_diary.jpg b/demo/images/your_diary.jpg deleted file mode 100644 index bb45e49d..00000000 Binary files a/demo/images/your_diary.jpg and /dev/null differ diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index 25614568..00000000 --- a/demo/index.html +++ /dev/null @@ -1,233 +0,0 @@ - - - - - - - - - - - - - Smooth Scrollbar - - - - - -
-
- - - - - - - - -

Smooth Scrollbar

-

Customizable, Pluginable, and High Performance Scrollbars!

- Documentation -
Version:
-
-
-

What is smooth-scrollbar?

-

Smooth Scrollbar is a JavaScript Plugin that allows you customizing high perfermance scrollbars cross browsers. It is using translate3d to perform a momentum based scrolling (aka inertial scrolling) on modern browsers. With the flexible plugin system, we can easily redesign the scrollbar as we want. This is the scrollbar plugin that you've ever dreamed of!

-

Installation

-

Via NPM (recommended):

- 
npm install smooth-scrollbar --save
-

Via Bower:

- 
bower install smooth-scrollbar --save
-

Browser Compatibility

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BrowserVersion
IE10+
Chrome22+
Firefox16+
Safari8+
Android Browser4+
Chrome for Android32+
iOS Safari7+
-

Usage

-

Since this package has a pkg.module field, it's highly recommended to import it as an ES6 module with some bundlers like webpack or rollup:

- 
import Scrollbar from 'smooth-scrollbar';
-
-Scrollbar.init(document.querySelector('#my-scrollbar'), options);
-

If you are not using any bundlers, you can just load the UMD bundle:

- 
<script src="dist/smooth-scrollbar.js"></script>
-
-<script>
-  var Scrollbar = window.Scrollbar;
-
-  Scrollbar.init(document.querySelector('#my-scrollbar'), options);
-</script>
-

Common mistakes

-

Initialize a scrollbar without a limited width or height

-

Likes the native scrollbars, a scrollable area means the content insides it is larger than the container itself, for example, a 500*500 area with a content which size is 1000*1000:

- 
              container
-                 /
-       +--------+
-  #####################
-  #    |        |     #
-  #    |        |     #
-  #    +--------+     # -- content
-  #                   #
-  #                   #
-  #####################
-

Therefore, it's necessary to set the width or height for the container element:

- 
#my-scrollbar {
-  width: 500px;
-  height: 500px;
-  overflow: auto;
-}
-

If the container element is natively scrollable before initializing the Scrollbar, it means you are on the correct way.

-

Available Options for Scrollbar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
parametertypedefaultdescription
dampingnumber0.1Momentum reduction damping factor, a float value between (0, 1), the lower the value is, the more smooth the scrolling will be (also the more paint frames).
thumbMinSizenumber20Minimal size for scrollbar thumbs.
renderByPixelsbooleantrueRender every frame in integer pixel values, set to true to improve scrolling performance.
alwaysShowTracksbooleanfalseKeep scrollbar tracks always visible.
continuousScrollingbooleantrueSet to true to allow outer scrollbars continue scrolling when current scrollbar reaches edge.
wheelEventTargetEventTargetnullElement to be used as a listener for mouse wheel scroll events. By default, the container element is used. This option will be useful for dealing with fixed elements.
pluginsobject{}Options for plugins, see Plugin System.
-

Confusing with the option field? Try real-time edit tool on the bottom left!

-

DOM Structure

-

The following is the DOM structure that Scrollbar yields:

- 
<scrollbar>
-    <div class="scroll-content">
-        your contents here...
-    </div>
-    <div class="scrollbar-track scrollbar-track-x">
-        <div class="scrollbar-thumb scrollbar-thumb-x"></div>
-    </div>
-    <div class="scrollbar-track scrollbar-track-y">
-        <div class="scrollbar-thumb scrollbar-thumb-y"></div>
-    </div>
-</scrollbar>
-

Documentation

- - - - - - - - - -
latest7.x
-

Demo

-

Okay, Let's try it:

- 
<section data-scrollbar>
-  <img src="xxx.jpg">
-</section>
-
-<script> Scrollbar.initAll(); </script>
-

Wow, it works! Now change the value of options in the control panel and see what will happen :), be careful that this may affect all scrollbars, aha!

-
- -
-
- -
- - - - - - - diff --git a/demo/scripts/controller.ts b/demo/scripts/controller.ts deleted file mode 100644 index 4635d4ff..00000000 --- a/demo/scripts/controller.ts +++ /dev/null @@ -1,95 +0,0 @@ -import * as dat from 'dat-gui'; -import Scrollbar from 'smooth-scrollbar'; -import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll'; - -Scrollbar.use(OverscrollPlugin); - -const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); - -const options = { - damping: isMobile ? 0.05 : 0.1, - thumbMinSize: 20, - renderByPixels: !('ontouchstart' in document), - alwaysShowTracks: false, - continuousScrolling: true, -}; - -const overscrollOptions = { - enable: true, - effect: navigator.userAgent.match(/Android/) ? 'glow' : 'bounce', - damping: 0.2, - maxOverscroll: 150, - glowColor: '#222a2d', -}; - -const scrollbars = [ - Scrollbar.init(document.getElementById('main-scrollbar') as HTMLElement, { - ...options, - delegateTo: document, - plugins: { - overscroll: { ...overscrollOptions }, - }, - }), - Scrollbar.init(document.getElementById('inner-scrollbar') as HTMLElement, { - ...options, - plugins: { - overscroll: { ...overscrollOptions }, - }, - }), -]; -const controller = new dat.GUI(); - -function updateScrollbar() { - scrollbars.forEach((s) => { - // real-time options - Object.assign(s.options, options); - s.updatePluginOptions('overscroll', { - ...overscrollOptions, - effect: overscrollOptions.enable ? overscrollOptions.effect : undefined, - }); - - if (options.alwaysShowTracks) { - s.track.xAxis.show(); - s.track.yAxis.show(); - } else { - s.track.xAxis.hide(); - s.track.yAxis.hide(); - } - }); -} - -const f1 = controller.addFolder('Scrollbar Options'); -f1.open(); - -[ - f1.add(options, 'damping', 0.01, 1), - f1.add(options, 'thumbMinSize', 0, 100), - f1.add(options, 'renderByPixels'), - f1.add(options, 'alwaysShowTracks'), - f1.add(options, 'continuousScrolling'), -].forEach((ctrl) => { - ctrl.onChange(updateScrollbar); -}); - -const f2 = controller.addFolder('Overscroll Plugin Options'); -[ - f2.add(overscrollOptions, 'enable'), - f2.add(overscrollOptions, 'effect', ['bounce', 'glow']), - f2.add(overscrollOptions, 'damping', 0.01, 1), - f2.add(overscrollOptions, 'maxOverscroll', 30, 300), - f2.addColor(overscrollOptions, 'glowColor'), -].forEach((ctrl) => { - ctrl.onChange(updateScrollbar); -}); - -const el = document.getElementById('controller'); - -if (el) { - el.appendChild(controller.domElement); -} - -if (window.innerWidth < 600) { - controller.close(); -} - -export { controller }; diff --git a/demo/scripts/index.ts b/demo/scripts/index.ts deleted file mode 100644 index b94cd92f..00000000 --- a/demo/scripts/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import Scrollbar from 'smooth-scrollbar'; -import * as Prism from 'prismjs'; -import 'prismjs/themes/prism.css'; - -import './monitor'; -import './controller'; -import '../styles/index.styl'; - -// for debug -(window as any).Scrollbar = Scrollbar; - -Prism.highlightAll(false); - -(document.getElementById('version') as HTMLElement).textContent = Scrollbar.version; diff --git a/demo/scripts/monitor.ts b/demo/scripts/monitor.ts deleted file mode 100644 index fd85834e..00000000 --- a/demo/scripts/monitor.ts +++ /dev/null @@ -1,499 +0,0 @@ -import Scrollbar from 'smooth-scrollbar'; -import { controller } from './controller'; - -const DPR = window.devicePixelRatio; -const TIME_RANGE_MAX = 20 * 1e3; - -const monitor = document.getElementById('monitor') as HTMLCanvasElement; -const thumb = document.getElementById('thumb') as HTMLCanvasElement; -const track = document.getElementById('track') as HTMLCanvasElement; -const canvas = document.getElementById('chart') as HTMLCanvasElement; -const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; -const size = { - width: 300, - height: 200, -}; - -canvas.width = size.width * DPR; -canvas.height = size.height * DPR; -ctx.scale(DPR, DPR); - -const scrollbar = Scrollbar.get(document.getElementById('main-scrollbar') as HTMLElement) as Scrollbar; -const monitorCtrl = controller.addFolder('Monitor'); - -type Coord2d = [number, number]; - -type RecordPoint = { - offset: number, - time: number, - reduce: number, - speed: number, -}; - -type TangentPoint = { - coord: Coord2d, - point: RecordPoint, -}; - -const records: RecordPoint[] = []; - -let thumbWidth = 0; -let endOffset = 0; - -let shouldUpdate = true; - -let tangentPoint: TangentPoint | null = null; -let tangentPointPre: TangentPoint | null = null; - -let hoverLocked = false; -let hoverPrecision = 'ontouchstart' in document ? 5 : 1; - -let hoverPointerX: number | undefined; -let pointerDownOnTrack: number | undefined; -let renderLoopID: number; - -let lastTime = Date.now(); -let lastOffset = 0; -let reduceAmount = 0; - -const monitorOptions = { - show: window.innerWidth > 600, - data: 'offset', - duration: 5, - reset() { - records.length = endOffset = reduceAmount = 0; - hoverLocked = false; - hoverPointerX = undefined; - tangentPoint = null; - tangentPointPre = null; - sliceRecord(); - }, -}; - -if (monitorOptions.show) { - monitor.style.display = 'block'; - renderLoopID = requestAnimationFrame(render); -} - -monitorCtrl.add(monitorOptions, 'reset'); -monitorCtrl.add(monitorOptions, 'data', ['offset', 'speed']) - .onChange(() => { - shouldUpdate = true; - }); - -monitorCtrl.add(monitorOptions, 'show') - .onChange((show) => { - if (show) { - monitor.style.display = 'block'; - renderLoopID = requestAnimationFrame(render); - } else { - monitor.style.display = 'none'; - cancelAnimationFrame(renderLoopID); - } - }); - -monitorCtrl.add(monitorOptions, 'duration', 1, 20) - .onChange(() => { - shouldUpdate = true; - let start = records[0]; - let end = records[records.length - 1]; - - if (end) { - endOffset = Math.min(endOffset, Math.max(0, 1 - monitorOptions.duration * 1e3 / (end.time - start.time))); - } - }); - -function notation(num: number = 0) { - if (!num || Math.abs(num) > 10 ** -2) return num.toFixed(2); - - let exp = -3; - - while (!(num / 10 ** exp | 0)) { - if (exp < -10) { - return num > 0 ? 'Infinity' : '-Infinity'; - } - - exp--; - } - - return (num * 10 ** -exp).toFixed(2) + 'e' + exp; -} - -function addEvent(elems: EventTarget | EventTarget[], evts: string, handler: (e: Event) => void) { - evts.split(/\s+/).forEach((name) => { - ([] as EventTarget[]).concat(elems).forEach((el) => { - el.addEventListener(name, (e) => { - handler(e); - shouldUpdate = true; - }); - }); - }); -} - -function sliceRecord(): RecordPoint[] { - const last = records[records.length - 1]; - - let endIdx = Math.floor(records.length * (1 - endOffset)); - let dropIdx = 0; - - const result = records.filter((pt, idx) => { - if (last.time - pt.time > TIME_RANGE_MAX) { - dropIdx++; - endIdx--; - return false; - } - - const end = records[endIdx - 1]; - - return end.time - pt.time <= monitorOptions.duration * 1e3 && idx <= endIdx; - }); - - records.splice(0, dropIdx); - thumbWidth = result.length ? result.length / records.length : 1; - - thumb.style.width = thumbWidth * 100 + '%'; - thumb.style.right = endOffset * 100 + '%'; - - return result; -} - -function getLimit(points: RecordPoint[]): { max: number, min: number } { - return points.reduce((pre, cur) => { - let val = cur[monitorOptions.data]; - return { - max: Math.max(pre.max, val), - min: Math.min(pre.min, val), - }; - }, { max: -Infinity, min: Infinity }); -} - -function assignProps(props: any) { - if (!props) return; - - Object.keys(props).forEach((name) => { - ctx[name] = props[name]; - }); -} - -function drawLine(p0: Coord2d, p1: Coord2d, options: any) { - let x0 = p0[0]; - let y0 = p0[1]; - let x1 = p1[0]; - let y1 = p1[1]; - - assignProps(options.props); - - ctx.save(); - ctx.transform(1, 0, 0, -1, 0, size.height); - ctx.beginPath(); - ctx.setLineDash(options.dashed ? options.dashed : []); - ctx.moveTo(x0, y0); - ctx.lineTo(x1, y1); - ctx.stroke(); - ctx.closePath(); - ctx.restore(); -} - -function adjustText(content: string, p: Coord2d, options: any) { - let x = p[0]; - let y = p[1]; - - let width = ctx.measureText(content).width; - - if (x + width > size.width) { - ctx.textAlign = 'right'; - } else if (x - width < 0) { - ctx.textAlign = 'left'; - } else { - ctx.textAlign = options.textAlign; - } - - ctx.fillText(content, x, -y); -} - -function fillText(content: string, p: Coord2d, options: any) { - assignProps(options.props); - - ctx.save(); - ctx.transform(1, 0, 0, 1, 0, size.height); - adjustText(content, p, options); - ctx.restore(); -} - -function drawMain() { - let points = sliceRecord(); - if (!points.length) return; - - let limit = getLimit(points); - - let start = points[0]; - let end = points[points.length - 1]; - - let totalX = thumbWidth === 1 ? monitorOptions.duration * 1e3 : end.time - start.time; - let totalY = (limit.max - limit.min) || 1; - - const grd = ctx.createLinearGradient(0, size.height, 0, 0); - grd.addColorStop(0, 'rgb(170, 215, 255)'); - grd.addColorStop(1, 'rgba(170, 215, 255, 0.2)'); - - ctx.save(); - ctx.transform(1, 0, 0, -1, 0, size.height); - - ctx.lineWidth = 1; - ctx.fillStyle = grd; - ctx.strokeStyle = 'rgb(64, 165, 255)'; - ctx.beginPath(); - ctx.moveTo(0, 0); - - const lastPoint = points.reduce((pre: Coord2d, cur: RecordPoint, idx: number) => { - const time = cur.time; - const value = cur[monitorOptions.data]; - const x = (time - start.time) / totalX * size.width; - const y = (value - limit.min) / totalY * (size.height - 20); - - ctx.lineTo(x, y); - - if (hoverPointerX && Math.abs(hoverPointerX - x) < hoverPrecision) { - tangentPoint = { - coord: [x, y], - point: cur, - }; - - tangentPointPre = { - coord: pre, - point: points[idx - 1], - }; - } - - return [x, y]; - }, []) as Coord2d; - - ctx.stroke(); - ctx.lineTo(lastPoint[0], 0); - ctx.fill(); - ctx.closePath(); - ctx.restore(); - - drawLine([0, lastPoint[1]], lastPoint, { - props: { - strokeStyle: '#f60', - }, - }); - - fillText('↙' + notation(limit.min), [0, 0], { - props: { - fillStyle: '#000', - textAlign: 'left', - textBaseline: 'bottom', - font: '12px sans-serif', - }, - }); - fillText(notation(end[monitorOptions.data]), lastPoint, { - props: { - fillStyle: '#f60', - textAlign: 'right', - textBaseline: 'bottom', - font: '16px sans-serif', - }, - }); -} - -function drawTangentLine() { - if (!tangentPoint || !tangentPointPre) { - return; - } - - const coord = tangentPoint.coord; - const coordPre = tangentPointPre.coord; - - const k = (coord[1] - coordPre[1]) / (coord[0] - coordPre[0]) || 0; - const b = coord[1] - k * coord[0]; - - drawLine([0, b], [size.width, k * size.width + b], { - props: { - lineWidth: 1, - strokeStyle: '#f00', - }, - }); - - const realK = (tangentPoint.point[monitorOptions.data] - tangentPointPre.point[monitorOptions.data]) / - (tangentPoint.point.time - tangentPointPre.point.time); - - fillText('dy/dx: ' + notation(realK), [size.width / 2, 0], { - props: { - fillStyle: '#f00', - textAlign: 'center', - textBaseline: 'bottom', - font: 'bold 12px sans-serif', - }, - }); -} - -function drawHover() { - if (!tangentPoint) return; - - drawTangentLine(); - - let coord = tangentPoint.coord; - let point = tangentPoint.point; - - let coordStyle = { - dashed: [8, 4], - props: { - lineWidth: 1, - strokeStyle: 'rgb(64, 165, 255)', - }, - }; - - drawLine([0, coord[1]], [size.width, coord[1]], coordStyle); - drawLine([coord[0], 0], [coord[0], size.height], coordStyle); - - let date = new Date(point.time + point.reduce); - - let pointInfo = [ - '(', - date.getMinutes(), - ':', - date.getSeconds(), - '.', - date.getMilliseconds(), - ', ', - notation(point[monitorOptions.data]), - ')', - ].join(''); - - fillText(pointInfo, coord, { - props: { - fillStyle: '#000', - textAlign: 'left', - textBaseline: 'bottom', - font: 'bold 12px sans-serif', - }, - }); -} - -function render() { - if (!shouldUpdate) { - renderLoopID = requestAnimationFrame(render); - return; - } - - ctx.save(); - ctx.clearRect(0, 0, size.width, size.height); - - fillText(monitorOptions.data.toUpperCase(), [0, size.height], { - props: { - fillStyle: '#f00', - textAlign: 'left', - textBaseline: 'top', - font: 'bold 14px sans-serif', - }, - }); - - drawMain(); - drawHover(); - - if (hoverLocked) { - fillText('LOCKED', [size.width, size.height], { - props: { - fillStyle: '#f00', - textAlign: 'right', - textBaseline: 'top', - font: 'bold 14px sans-serif', - }, - }); - } - - ctx.restore(); - - shouldUpdate = false; - - renderLoopID = requestAnimationFrame(render); -} - -scrollbar.addListener(() => { - let current = Date.now(); - let offset = scrollbar.offset.y; - let duration = current - lastTime; - - if (!duration || offset === lastOffset) return; - - if (duration > 100) { - reduceAmount += (duration - 1); - duration -= (duration - 1); - } - - let velocity = (offset - lastOffset) / duration; - lastTime = current; - lastOffset = offset; - - records.push({ - offset, - time: current - reduceAmount, - reduce: reduceAmount, - speed: Math.abs(velocity), - }); - - shouldUpdate = true; -}); - -function getPointer(e: any) { - return e.touches ? e.touches[e.touches.length - 1] : e; -} - -// hover -addEvent(canvas, 'mousemove touchmove', (e) => { - if (hoverLocked || pointerDownOnTrack) return; - - let pointer = getPointer(e); - - hoverPointerX = pointer.clientX - canvas.getBoundingClientRect().left; -}); - -function resetHover() { - hoverPointerX = 0; - tangentPoint = null; - tangentPointPre = null; -} - -addEvent([canvas, window], 'mouseleave touchend', () => { - if (hoverLocked) return; - resetHover(); -}); - -addEvent(canvas, 'click', () => { - hoverLocked = !hoverLocked; - - if (!hoverLocked) resetHover(); -}); - -// track -addEvent(thumb, 'mousedown touchstart', (e) => { - let pointer = getPointer(e); - pointerDownOnTrack = pointer.clientX; -}); - -addEvent(window, 'mousemove touchmove', (e) => { - if (!pointerDownOnTrack) return; - - let pointer = getPointer(e); - let moved = (pointer.clientX - pointerDownOnTrack) / size.width; - - pointerDownOnTrack = pointer.clientX; - endOffset = Math.min(1 - thumbWidth, Math.max(0, endOffset - moved)); -}); - -addEvent(window, 'mouseup touchend blur', () => { - pointerDownOnTrack = undefined; -}); - -addEvent(thumb, 'click touchstart', (e) => { - e.stopPropagation(); -}); - -addEvent(track, 'click touchstart', (e) => { - let pointer = getPointer(e); - let rect = track.getBoundingClientRect(); - let offset = (pointer.clientX - rect.left) / rect.width; - endOffset = Math.min(1 - thumbWidth, Math.max(0, 1 - (offset + thumbWidth / 2))); -}); diff --git a/demo/styles/index.styl b/demo/styles/index.styl deleted file mode 100644 index c18f2707..00000000 --- a/demo/styles/index.styl +++ /dev/null @@ -1,249 +0,0 @@ -$root-font-size = 16px -$main-blue = #70b7fd -$gradient-color = #ad95e4 -$font-color = #555 -$strong-color = #dd4a68 - -pxToRem(px) - return unit(px/$root-font-size, 'rem') - -html, body - position: fixed - top: 0 - left: 0 - width: 100% - height: 100% - margin: 0 - padding: 0 - color: $font-color - font-size: $root-font-size - font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif - - @media screen and (max-width: 960px) - font-size: 14px - -* - -webkit-tap-highlight-color: transparent - -#inner-scrollbar - img - display: block - -[data-scrollbar] - overflow: auto - -strong - color: lighten($strong-color, 20%) - -a - text-decoration: none - color: darken($main-blue, 30%) - - &:hover - text-decoration: underline - -code - font-size: 0.8em - color: darken($font-color, 30%) - padding: .1em .5em - - -header - position: relative - padding: 1em 1em 5em - background: linear-gradient(45deg, $gradient-color, $main-blue) - color: #fff - font-size: pxToRem(14) - text-align: center - - nav - text-align: left - - h1 - font-size: 3em - - h2 - opacity: 0.85 - font-size: 1.5em - font-weight: normal - - .repo - display: inline-block - margin: 1em - padding: 0.5em 2em - color: #fff - text-decoration: none - opacity: 0.85 - border: 1px solid currentColor - border-radius: 2em - - &.doc - opacity: 1 - background: rgba(255, 255, 255, 0.3) - - &:hover - transform: translate3d(0, 2px, 0) - - .version-note - position: absolute - bottom: 0.5em - right: 0.5em - font-size: 0.8em - opacity: 0.8 - -#content - font-size: pxToRem(16) - padding: 1em 2em 2em - - table - font-size: .85em - border-collapse: collapse - - thead, tr:nth-child(even) - background-color: #f5f2f0 - - th, td - padding: 0.5em 1em - border: 1px solid #ddd - - p::after - content: '' - display: table - clear: both - - h2 - color: $main-blue - font-size: 1.2em - margin-left: -10px - - &::before - content: '#' - padding-right: .5em - - .intro - ul - padding-left: 1em - - .compatibility - th, td - &:first-child - text-align: left - &:last-child - text-align: center - - .options - th, td - text-align: center - - &:last-child - min-width: 20em - text-align: left - - -#scrollbar-demo - display: flex - justify-content: space-around - -#controller - position: fixed - bottom: 0 - left: 0 - z-index: 999 - -#inner-scrollbar - max-width: 800px - height: 400px - border: 1px solid #ccc - -footer - text-align: center - -// dat.gui -.dg - user-select: none - - .close-button - position: relative !important - .property-name - width: 60% !important - - .c - width: 40% !important - - .selector - margin-top: -105px; - -#main-scrollbar - position: fixed - top: 0 - right: 0 - bottom: 0 - left: 0 - -#monitor - display: none - position: fixed - right: 1em - bottom: 1em - z-index: 999 - background: #fff - text-align: center - box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) - -#chart - width: 300px - height: 200px - border: 1px solid #aaa - display: block - -#track - position: relative - width: 100% - height: 20px - background: #ccc - -#thumb - margin: 0 - position: absolute - top: 0 - right: 0 - height: 100% - width: 100% - background: #fff - border: 3px solid #ccc - box-sizing: border-box - cursor: ew-resize - -// -.github-corner:hover - .octo-arm - animation: octocat-wave 560ms ease-in-out - -@keyframes octocat-wave - 0%, 100% - transform: rotate(0) - - 20%, 60% - transform: rotate(-25deg) - - 40%, 80% - transform: rotate(10deg) - -@media (max-width:500px) - .github-corner:hover .octo-arm - animation: none - - .github-corner .octo-arm - animation: octocat-wave 560ms ease-in-out - - .badges - display: none - - #options - th, td - &:nth-child(2) - &:nth-child(3) - display: none - - code - white-space: pre-wrap !important diff --git a/dist/plugins/overscroll.js b/dist/plugins/overscroll.js deleted file mode 100644 index 762f735e..00000000 --- a/dist/plugins/overscroll.js +++ /dev/null @@ -1,16 +0,0 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("smooth-scrollbar")):"function"==typeof define&&define.amd?define(["smooth-scrollbar"],e):"object"==typeof exports?exports.OverscrollPlugin=e(require("smooth-scrollbar")):t.OverscrollPlugin=e(t.Scrollbar)}(this,(function(t){return function(t){var e={};function o(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,i){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(i,r,function(e){return t[e]}.bind(null,r));return i},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=1)}([function(e,o){e.exports=t},function(t,e,o){t.exports=o(2)},function(t,e,o){"use strict";o.r(e); -/*! ***************************************************************************** -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. -***************************************************************************** */ -var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(t,e)},r=function(){return(r=Object.assign||function(t){for(var e,o=1,i=arguments.length;o0&&s.transform(-1,0,0,1,r,0);var c=h(Math.abs(t)/o,0,.75),a=h(c,0,.25)*r,l=Math.abs(t),u=this._touchY||n/2;s.globalAlpha=c,s.beginPath(),s.moveTo(0,-a),s.quadraticCurveTo(l,u,0,n+a),s.fill(),s.closePath(),s.restore()},t.prototype._renderY=function(t){var e=this._scrollbar.size,o=this._getMaxOverscroll(),i=e.container,r=i.width,n=i.height,s=this._ctx;s.save(),t>0&&s.transform(1,0,0,-1,0,n);var c=h(Math.abs(t)/o,0,.75),a=h(c,0,.25)*r,l=this._touchX||r/2,u=Math.abs(t);s.globalAlpha=c,s.beginPath(),s.moveTo(-a,0),s.quadraticCurveTo(l,u,r+a,0),s.fill(),s.closePath(),s.restore()},t}();o.d(e,"OverscrollEffect",(function(){return u})),function(t){t.BOUNCE="bounce",t.GLOW="glow"}(u||(u={}));var d=/wheel|touch/,y=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._glow=new _(e.scrollbar),e._bounce=new f(e.scrollbar),e._wheelScrollBack={x:!1,y:!1},e._lockWheel={x:!1,y:!1},e._touching=!1,e._amplitude={x:0,y:0},e._position={x:0,y:0},e._releaseWheel=function(t,e,o){void 0===e&&(e=0);return function(){for(var t=[],e=0;e0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(16),o=n(2),i=n(3),u=n(5).f,c=n(29),a=n(74),s=c("meta"),f=0,l=Object.isExtensible||function(){return!0},p=function(t){u(t,s,{value:{objectID:"O"+ ++f,weakData:{}}})},h=t.exports={REQUIRED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,s)){if(!l(t))return"F";if(!e)return"E";p(t)}return t[s].objectID},getWeakData:function(t,e){if(!i(t,s)){if(!l(t))return!0;if(!e)return!1;p(t)}return t[s].weakData},onFreeze:function(t){return a&&h.REQUIRED&&l(t)&&!i(t,s)&&p(t),t}};r[s]=!0},function(t,e,n){var r=n(76);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 0:return function(){return t.call(e)};case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(24);t.exports=function(t){return Object(r(t))}},function(t,e,n){"use strict";var r=n(13),o=n(0),i=n(53),u=n(11),c=n(18),a=n(33),s=n(35),f=n(2),l=n(4),p=n(59),h=n(36),d=n(77);t.exports=function(t,e,n){var v=-1!==t.indexOf("Map"),y=-1!==t.indexOf("Weak"),m=v?"set":"add",g=o[t],x=g&&g.prototype,b=g,w={},S=function(t){var e=x[t];u(x,t,"add"==t?function(t){return e.call(this,0===t?0:t),this}:"delete"==t?function(t){return!(y&&!f(t))&&e.call(this,0===t?0:t)}:"get"==t?function(t){return y&&!f(t)?void 0:e.call(this,0===t?0:t)}:"has"==t?function(t){return!(y&&!f(t))&&e.call(this,0===t?0:t)}:function(t,n){return e.call(this,0===t?0:t,n),this})};if(i(t,"function"!=typeof g||!(y||x.forEach&&!l((function(){(new g).entries().next()})))))b=n.getConstructor(e,t,v,m),c.REQUIRED=!0;else if(i(t,!0)){var _=new b,E=_[m](y?{}:-0,1)!=_,O=l((function(){_.has(1)})),T=p((function(t){new g(t)})),A=!y&&l((function(){for(var t=new g,e=5;e--;)t[m](e,e);return!t.has(-0)}));T||((b=e((function(e,n){s(e,b,t);var r=d(new g,e,b);return null!=n&&a(n,r[m],r,v),r}))).prototype=x,x.constructor=b),(O||A)&&(S("delete"),S("has"),v&&S("get")),(A||E)&&S(m),y&&x.clear&&delete x.clear}return w[t]=b,r({global:!0,forced:b!=g},w),h(b,t),y||n.setStrong(b,t,v),b}},function(t,e,n){var r=n(4),o=n(23),i="".split;t.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?i.call(t,""):Object(t)}:Object},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var r=n(2);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r=n(0),o=n(8);t.exports=function(t,e){try{o(r,t,e)}catch(n){r[t]=e}return e}},function(t,e,n){var r=n(50),o=n(29),i=r("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},function(t,e){t.exports=!1},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol("+String(void 0===t?"":t)+")_"+(++n+r).toString(36)}},function(t,e,n){var r=n(10),o=n(0),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?i(r[t])||i(o[t]):r[t]&&r[t][e]||o[t]&&o[t][e]}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(t,e,n){var r=n(7),o=n(54),i=n(17),u=n(19),c=n(56),a=n(58),s=function(t,e){this.stopped=t,this.result=e};(t.exports=function(t,e,n,f,l){var p,h,d,v,y,m,g,x=u(e,n,f?2:1);if(l)p=t;else{if("function"!=typeof(h=c(t)))throw TypeError("Target is not iterable");if(o(h)){for(d=0,v=i(t.length);v>d;d++)if((y=f?x(r(g=t[d])[0],g[1]):x(t[d]))&&y instanceof s)return y;return new s(!1)}p=h.call(t)}for(m=p.next;!(g=m.call(p)).done;)if("object"==typeof(y=a(p,x,g.value,f))&&y&&y instanceof s)return y;return new s(!1)}).stop=function(t){return new s(!0,t)}},function(t,e,n){var r={};r[n(1)("toStringTag")]="z",t.exports="[object z]"===String(r)},function(t,e){t.exports=function(t,e,n){if(!(t instanceof e))throw TypeError("Incorrect "+(n?n+" ":"")+"invocation");return t}},function(t,e,n){var r=n(5).f,o=n(3),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){var r,o=n(7),i=n(79),u=n(32),c=n(16),a=n(80),s=n(46),f=n(27)("IE_PROTO"),l=function(){},p=function(t){return"