mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-05-17 05:19:39 +03:00
build script & framework wrapper for react, angular and vue
This commit is contained in:
Rene
+40
@@ -0,0 +1,40 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# dist
|
||||
example/dist/
|
||||
example/build/
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
*.sublime-workspace
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.vscode
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
Thumbs.db
|
||||
@@ -0,0 +1,75 @@
|
||||
const sh = require('shelljs');
|
||||
const fs = require('fs');
|
||||
const chalk = require('chalk');
|
||||
const gulp = require('gulp');
|
||||
const UglifyJS = 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(UglifyJS.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')();
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Generated
+3533
File diff suppressed because it is too large
Load Diff
+24
-17
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name":"overlayscrollbars",
|
||||
"version":"1.9.0",
|
||||
"description":"A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",
|
||||
"keywords":[
|
||||
"name": "overlayscrollbars",
|
||||
"version": "1.9.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",
|
||||
@@ -10,7 +10,7 @@
|
||||
"scroll",
|
||||
"frontend"
|
||||
],
|
||||
"files":[
|
||||
"files": [
|
||||
"js/jquery.overlayScrollbars.js",
|
||||
"js/jquery.overlayScrollbars.min.js",
|
||||
"js/OverlayScrollbars.js",
|
||||
@@ -20,18 +20,25 @@
|
||||
"README.md",
|
||||
"LICENSE"
|
||||
],
|
||||
"homepage":"https://kingsora.github.io/OverlayScrollbars",
|
||||
"repository":{
|
||||
"type":"git",
|
||||
"url":"https://github.com/KingSora/OverlayScrollbars"
|
||||
"homepage": "https://kingsora.github.io/OverlayScrollbars",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars"
|
||||
},
|
||||
"bugs":{
|
||||
"url":"https://github.com/KingSora/OverlayScrollbars/issues"
|
||||
"bugs": {
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars/issues"
|
||||
},
|
||||
"main":"js/OverlayScrollbars.js",
|
||||
"scripts":{
|
||||
"test":"echo \"Error: no test specified\" && exit 1"
|
||||
"main": "js/OverlayScrollbars.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author":"KingSora | Rene Haas",
|
||||
"license":"MIT"
|
||||
}
|
||||
"author": "KingSora | Rene Haas",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"chalk": "^2.4.2",
|
||||
"csso": "^3.5.1",
|
||||
"gulp": "^4.0.2",
|
||||
"shelljs": "^0.8.3",
|
||||
"uglify-js": "^3.6.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
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: [
|
||||
'.rpt2_cache', // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
|
||||
'./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',
|
||||
'@angular/common': 'ng.common',
|
||||
'rxjs': 'rxjs',
|
||||
'overlayscrollbars': 'OverlayScrollbars'
|
||||
};
|
||||
|
||||
const packageJson = require(filesInfo.packageJsonPath);
|
||||
const tsconfigJson = require(filesInfo.tsconfigJsonPath);
|
||||
|
||||
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"');
|
||||
let newTsconfigJson = {
|
||||
...tsconfigJson,
|
||||
compilerOptions: {
|
||||
...tsconfigJson.compilerOptions,
|
||||
declarationDir: filesInfo.ngcFolder,
|
||||
outDir: filesInfo.ngcFolder,
|
||||
},
|
||||
include: [filesInfo.srcFolder],
|
||||
exclude: [filesInfo.distFolder, filesInfo.exampleFolder, 'node_modules']
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newTsconfigJson, null, 4)).to(filesInfo.tsconfigJsonPath);
|
||||
sh.exec('ngc -p tsconfig.json');
|
||||
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: [
|
||||
filesInfo.srcFolder,
|
||||
filesInfo.distFolder,
|
||||
'README.md'
|
||||
]
|
||||
};
|
||||
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,
|
||||
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')();
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Component, ElementRef, Input, NgModule } from '@angular/core';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
var OverlayScrollbarsComponent = (function () {
|
||||
function OverlayScrollbarsComponent(_osTargetRef) {
|
||||
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 () {
|
||||
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",
|
||||
template: "<ng-content></ng-content>",
|
||||
styles: [":host { display: block; }"]
|
||||
},] },
|
||||
];
|
||||
OverlayScrollbarsComponent.ctorParameters = function () { return [
|
||||
{ type: ElementRef }
|
||||
]; };
|
||||
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
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"overlayscrollbars-ngx.esm.js","sources":["../ngc/src/overlayscrollbars.component.js","../ngc/src/overlayscrollbars.module.js"],"sourcesContent":["import { Component, ElementRef, Input } from \"@angular/core\";\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\nvar OverlayScrollbarsComponent = (function () {\r\n function OverlayScrollbarsComponent(_osTargetRef) {\r\n this._osInstance = null;\r\n this._osTargetRef = _osTargetRef;\r\n }\r\n OverlayScrollbarsComponent.prototype.osInstance = function () {\r\n return this._osInstance;\r\n };\r\n OverlayScrollbarsComponent.prototype.osTarget = function () {\r\n return this._osTargetRef.nativeElement || null;\r\n };\r\n OverlayScrollbarsComponent.prototype.ngAfterViewInit = function () {\r\n this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);\r\n };\r\n OverlayScrollbarsComponent.prototype.ngOnDestroy = function () {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.destroy();\r\n this._osInstance = null;\r\n }\r\n };\r\n OverlayScrollbarsComponent.prototype.ngOnChanges = function (changes) {\r\n var optionsChange = changes._options;\r\n if (optionsChange && OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.options(optionsChange.currentValue);\r\n }\r\n };\r\n OverlayScrollbarsComponent.decorators = [\r\n { type: Component, args: [{\r\n selector: \"overlay-scrollbars\",\r\n template: \"<ng-content></ng-content>\",\r\n styles: [\":host { display: block; }\"]\r\n },] },\r\n ];\r\n OverlayScrollbarsComponent.ctorParameters = function () { return [\r\n { type: ElementRef }\r\n ]; };\r\n OverlayScrollbarsComponent.propDecorators = {\r\n _options: [{ type: Input, args: [\"options\",] }],\r\n _extensions: [{ type: Input, args: [\"extensions\",] }]\r\n };\r\n return OverlayScrollbarsComponent;\r\n}());\r\nexport { OverlayScrollbarsComponent };\r\nif (false) {\r\n OverlayScrollbarsComponent.prototype._options;\r\n OverlayScrollbarsComponent.prototype._extensions;\r\n OverlayScrollbarsComponent.prototype._osInstance;\r\n OverlayScrollbarsComponent.prototype._osTargetRef;\r\n}\r\n//# sourceMappingURL=overlayscrollbars.component.js.map","import { NgModule } from '@angular/core';\r\nimport { OverlayScrollbarsComponent } from './overlayscrollbars.component';\r\nvar OverlayscrollbarsModule = (function () {\r\n function OverlayscrollbarsModule() {\r\n }\r\n OverlayscrollbarsModule.decorators = [\r\n { type: NgModule, args: [{\r\n imports: [],\r\n declarations: [OverlayScrollbarsComponent],\r\n exports: [OverlayScrollbarsComponent]\r\n },] },\r\n ];\r\n return OverlayscrollbarsModule;\r\n}());\r\nexport { OverlayscrollbarsModule };\r\n//# sourceMappingURL=overlayscrollbars.module.js.map"],"names":[],"mappings":";;;AAEG,IAAC,0BAA0B,IAAI,YAAY;IAC1C,SAAS,0BAA0B,CAAC,YAAY,EAAE;QAC9C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KACpC;IACD,0BAA0B,CAAC,SAAS,CAAC,UAAU,GAAG,YAAY;QAC1D,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,QAAQ,GAAG,YAAY;QACxD,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,IAAI,IAAI,CAAC;KAClD,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,eAAe,GAAG,YAAY;QAC/D,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAChG,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,WAAW,GAAG,YAAY;QAC3D,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,OAAO,EAAE;QAClE,IAAI,aAAa,GAAG,OAAO,CAAC,QAAQ,CAAC;QACrC,IAAI,aAAa,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC5D,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;SACxD;KACJ,CAAC;IACF,0BAA0B,CAAC,UAAU,GAAG;QACpC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;oBACd,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,2BAA2B;oBACrC,MAAM,EAAE,CAAC,2BAA2B,CAAC;iBACxC,EAAE,EAAE;KAChB,CAAC;IACF,0BAA0B,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO;QAC7D,EAAE,IAAI,EAAE,UAAU,EAAE;KACvB,CAAC,EAAE,CAAC;IACL,0BAA0B,CAAC,cAAc,GAAG;QACxC,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC;QAC/C,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC;KACxD,CAAC;IACF,OAAO,0BAA0B,CAAC;CACrC,EAAE,CAAC;;ACzCD,IAAC,uBAAuB,IAAI,YAAY;IACvC,SAAS,uBAAuB,GAAG;KAClC;IACD,uBAAuB,CAAC,UAAU,GAAG;QACjC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;oBACb,OAAO,EAAE,EAAE;oBACX,YAAY,EAAE,CAAC,0BAA0B,CAAC;oBAC1C,OAAO,EAAE,CAAC,0BAA0B,CAAC;iBACxC,EAAE,EAAE;KAChB,CAAC;IACF,OAAO,uBAAuB,CAAC;CAClC,EAAE,CAAC;;;;"}
|
||||
@@ -0,0 +1,71 @@
|
||||
(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 && OverlayScrollbars.hasOwnProperty('default') ? OverlayScrollbars['default'] : OverlayScrollbars;
|
||||
|
||||
var OverlayScrollbarsComponent = (function () {
|
||||
function OverlayScrollbarsComponent(_osTargetRef) {
|
||||
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 () {
|
||||
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",
|
||||
template: "<ng-content></ng-content>",
|
||||
styles: [":host { display: block; }"]
|
||||
},] },
|
||||
];
|
||||
OverlayScrollbarsComponent.ctorParameters = function () { return [
|
||||
{ type: core.ElementRef }
|
||||
]; };
|
||||
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
@@ -0,0 +1,2 @@
|
||||
export * from './overlayscrollbars.component';
|
||||
export * from './overlayscrollbars.module';
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ElementRef, SimpleChanges, OnDestroy, OnChanges, AfterViewInit } from "@angular/core";
|
||||
import OverlayScrollbars from "overlayscrollbars";
|
||||
export declare class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
|
||||
private _options;
|
||||
private _extensions;
|
||||
private _osInstance;
|
||||
private _osTargetRef;
|
||||
constructor(_osTargetRef: ElementRef);
|
||||
osInstance(): OverlayScrollbars | null;
|
||||
osTarget(): HTMLDivElement | null;
|
||||
ngAfterViewInit(): void;
|
||||
ngOnDestroy(): void;
|
||||
ngOnChanges(changes: SimpleChanges): void;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export declare class OverlayscrollbarsModule {
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
# 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
|
||||
@@ -0,0 +1,43 @@
|
||||
# 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
|
||||
@@ -0,0 +1,27 @@
|
||||
# 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).
|
||||
@@ -0,0 +1,135 @@
|
||||
{
|
||||
"$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"
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
// 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 } }));
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
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!');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class AppPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getTitleText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
+11163
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"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.5.4",
|
||||
"overlayscrollbars": "^1.9.0",
|
||||
"rxjs": "~6.3.3",
|
||||
"tslib": "^1.9.0",
|
||||
"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/node": "~8.9.4",
|
||||
"@types/jasmine": "~2.8.8",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"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.0",
|
||||
"ts-node": "~7.0.0",
|
||||
"tslint": "~5.11.0",
|
||||
"typescript": "~3.1.6"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
.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: 100%;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
<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]="['custom-class-name-test', framework]">
|
||||
<div class="bonus-content">{{ componentContent }}</div>
|
||||
{{ loremIpsumShort }}
|
||||
<overlay-scrollbars #osComponentRef2 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'150px' }" [ngClass]="['custom-class-name-test']">
|
||||
<div class="bonus-content">{{ componentContent }}</div>
|
||||
{{ loremIpsumLong }}
|
||||
<br />
|
||||
<br /> {{ loremIpsumShort }}
|
||||
</overlay-scrollbars>
|
||||
{{ loremIpsumMedium }}
|
||||
<br />
|
||||
<br /> {{ loremIpsumShort }}
|
||||
<br />
|
||||
<br /> {{ loremIpsumLong }}
|
||||
</overlay-scrollbars>
|
||||
|
||||
<div class="buttons">
|
||||
<button (click)="onBtnScrollRandom($event, [ osComponentRef1, osComponentRef2 ])">Scroll</button>
|
||||
<button (click)="onBtnChangeOptions($event)">Change Options</button>
|
||||
<button (click)="onBtnChangeContent($event)">Change Content</button>
|
||||
<button (click)="onBtnLog($event)">Log</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
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!');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
|
||||
import OverlayScrollbarsfrom from 'overlayscrollbars';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
framework: string = 'Angular';
|
||||
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.';
|
||||
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]) {
|
||||
let 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(event) {
|
||||
this.osComponentOptions = {
|
||||
resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
|
||||
scrollbars: {
|
||||
autoHide: this.osComponentOptions.scrollbars.autoHide === 'never' ? 'scroll' : 'never',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onBtnChangeContent(event) {
|
||||
let loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
|
||||
let random = Math.floor(Math.random() * loremIpsums.length);
|
||||
this.componentContent = this.componentContent + "\r\n" + loremIpsums[random]
|
||||
}
|
||||
|
||||
onBtnLog(event) {
|
||||
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());
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
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 { }
|
||||
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<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"
|
||||
viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#DD0031;}
|
||||
.st1{fill:#C3002F;}
|
||||
.st2{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<polygon class="st0" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 "/>
|
||||
<polygon class="st1" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 "/>
|
||||
<path class="st2" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
|
||||
L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 883 B |
@@ -0,0 +1,27 @@
|
||||
<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="708.75px" height="472.5px" viewBox="0 0 708.75 472.5" enable-background="new 0 0 708.75 472.5" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="2.7998" y1="236.25" x2="705.9502" y2="236.25">
|
||||
<stop offset="0" style="stop-color:#36BEFD"/>
|
||||
<stop offset="1" style="stop-color:#6461F6"/>
|
||||
</linearGradient>
|
||||
<path fill="none" stroke="url(#SVGID_1_)" stroke-width="46.9" stroke-linecap="round" stroke-miterlimit="10" d="M577.5,341.25H420
|
||||
c-16.656,0-31.977,7.648-42.043,20.992c-3.203,4.289-5.781,9.066-7.582,14.102c-1.93,5.52-2.945,11.43-2.945,17.406v1.613
|
||||
c0.133,5.133,1.133,10.684,2.973,15.867c0.563,1.559,1.215,3.109,1.887,4.449c2.305,4.82,4.809,8.68,7.641,11.902
|
||||
c10.199,11.98,24.703,18.668,40.07,18.668h157.5c33.348,0,64-15.32,84.09-42.027c9.203-12.305,15.738-26.852,18.859-42.012
|
||||
c1.348-6.805,2.051-13.914,2.051-20.961s-0.703-14.156-2.09-21.137c-3.082-14.984-9.617-29.531-18.863-41.891
|
||||
C641.5,251.57,610.848,236.25,577.5,236.25h-105c-28.949,0-52.5-23.551-52.5-52.5s23.551-52.5,52.5-52.5H630
|
||||
c22.242,0,42.141-14.055,49.512-34.973c1.977-5.645,2.988-11.551,2.988-17.527s-1.012-11.883-3.004-17.57
|
||||
c-5.699-16.219-19.598-28.961-36.27-33.227c-4.32-1.156-8.684-1.703-13.227-1.703H236.32c-48.633,0-94.285,16.133-132.035,46.664
|
||||
c-16.566,13.422-30.914,29.133-42.625,46.668c-9.84,14.656-17.723,30.332-23.461,46.633c-5.367,15.273-8.945,30.953-10.629,46.602
|
||||
c-0.883,7.73-1.32,15.566-1.32,23.434s0.438,15.703,1.301,23.277c1.703,15.805,5.281,31.484,10.656,46.77
|
||||
c5.73,16.289,13.613,31.965,23.418,46.574c11.746,17.582,26.094,33.293,42.684,46.738c37.727,30.508,83.379,46.641,132.012,46.641
|
||||
c7.637,0,14.734-0.383,21.695-1.168"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="107.7998" y1="236.25" x2="364.7002" y2="236.25">
|
||||
<stop offset="0" style="stop-color:#36BEFD"/>
|
||||
<stop offset="1" style="stop-color:#6461F6"/>
|
||||
</linearGradient>
|
||||
<circle fill="none" stroke="url(#SVGID_2_)" stroke-width="46.9" stroke-linecap="round" stroke-miterlimit="10" cx="236.25" cy="236.25" r="105"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,11 @@
|
||||
# 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
|
||||
@@ -0,0 +1,3 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
// 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.
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1,18 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,31 @@
|
||||
// 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
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
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
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
@@ -0,0 +1,13 @@
|
||||
@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;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// 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);
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts",
|
||||
"polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "../tslint.json",
|
||||
"rules": {
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"app",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"app",
|
||||
"kebab-case"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"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"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
{
|
||||
"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
|
||||
}
|
||||
}
|
||||
+4283
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "overlayscrollbars-ngx",
|
||||
"version": "0.1.0",
|
||||
"description": "OverlayScrollbars wrapper for Angular.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"ngx",
|
||||
"angular"
|
||||
],
|
||||
"files": [
|
||||
"./src",
|
||||
"./dist",
|
||||
"README.md"
|
||||
],
|
||||
"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/common": "^7.0.0",
|
||||
"@angular/compiler": "^7.0.0",
|
||||
"@angular/compiler-cli": "^7.0.0",
|
||||
"@angular/core": "^7.0.0",
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"chalk": "^2.4.2",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-json-editor": "^2.5.2",
|
||||
"overlayscrollbars": "^1.9.0",
|
||||
"rollup": "^1.17.0",
|
||||
"rollup-plugin-commonjs": "^10.0.1",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-typescript2": "^0.22.0",
|
||||
"rxjs": "^6.1.0",
|
||||
"shelljs": "0.7.7",
|
||||
"tsickle": "^0.34.0",
|
||||
"typescript": "3.1.6",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^7.0.0",
|
||||
"@angular/core": "^7.0.0",
|
||||
"overlayscrollbars": "^1.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node build.js",
|
||||
"example": "cd example && npx ng serve",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './overlayscrollbars.component';
|
||||
export * from './overlayscrollbars.module';
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Component, ElementRef, Input, SimpleChanges, OnDestroy, OnChanges, AfterViewInit } from "@angular/core";
|
||||
import OverlayScrollbars from "overlayscrollbars";
|
||||
|
||||
@Component({
|
||||
selector: "overlay-scrollbars", //https://angular.io/guide/styleguide#component-selectors
|
||||
template: "<ng-content></ng-content>",
|
||||
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) {
|
||||
this._osTargetRef = _osTargetRef;
|
||||
}
|
||||
|
||||
osInstance(): OverlayScrollbars | null {
|
||||
return this._osInstance;
|
||||
}
|
||||
|
||||
osTarget(): HTMLDivElement | null {
|
||||
return this._osTargetRef.nativeElement || null;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.destroy();
|
||||
this._osInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
let optionsChange = changes._options;
|
||||
if (optionsChange && OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.options(optionsChange.currentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { OverlayScrollbarsComponent } from './overlayscrollbars.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [],
|
||||
declarations: [OverlayScrollbarsComponent],
|
||||
exports: [OverlayScrollbarsComponent]
|
||||
})
|
||||
export class OverlayscrollbarsModule { }
|
||||
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"angularCompilerOptions": {
|
||||
"annotateForClosureCompiler": true,
|
||||
"skipTemplateCodegen": true,
|
||||
"strictMetadataEmit": true,
|
||||
"fullTemplateTypeCheck": true,
|
||||
"strictInjectionParameters": true
|
||||
},
|
||||
"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
|
||||
},
|
||||
"include": [
|
||||
"./src"
|
||||
],
|
||||
"exclude": [
|
||||
"./dist",
|
||||
"./example",
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
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: [
|
||||
'.rpt2_cache' // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
|
||||
]
|
||||
}
|
||||
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 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: [
|
||||
filesInfo.srcFolder,
|
||||
filesInfo.distFolder,
|
||||
'README.md'
|
||||
]
|
||||
};
|
||||
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,
|
||||
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')();
|
||||
@@ -0,0 +1,64 @@
|
||||
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let _a = this.props, divProps = __rest(_a, ["options", "extensions", "children"]);
|
||||
return (React.createElement("div", Object.assign({}, divProps, { ref: this._osTargetRef }), this.props.children));
|
||||
}
|
||||
}
|
||||
|
||||
export { OverlayScrollbarsComponent };
|
||||
//# sourceMappingURL=overlayscrollbars-react.esm.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"overlayscrollbars-react.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\r\n children?: any;\r\n options?: OverlayScrollbars.Options;\r\n extensions?: OverlayScrollbars.Extensions;\r\n}\r\nexport interface OverlayScrollbarsComponentState { }\r\n\r\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\r\n private _osInstance: OverlayScrollbars | null = null;\r\n private _osTargetRef: RefObject<HTMLDivElement>;\r\n\r\n constructor(props: OverlayScrollbarsComponentProps) {\r\n super(props);\r\n this._osTargetRef = React.createRef();\r\n }\r\n\r\n osInstance(): OverlayScrollbars | null {\r\n return this._osInstance;\r\n }\r\n\r\n osTarget(): HTMLDivElement | null {\r\n return this._osTargetRef.current || null;\r\n }\r\n\r\n componentDidMount() {\r\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\r\n }\r\n\r\n componentWillUnmount() {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.destroy();\r\n this._osInstance = null;\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.options(this.props.options);\r\n }\r\n }\r\n\r\n render() {\r\n let {\r\n options,\r\n extensions,\r\n children,\r\n ...divProps\r\n } = this.props;\r\n\r\n return (\r\n <div {...divProps} ref={this._osTargetRef}>\r\n {...this.props.children}\r\n </div>\r\n );\r\n }\r\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,0BAA2B,SAAQ,SAA2E;IAIvH,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,gBAAW,GAA6B,IAAI,CAAC;QAKjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;KACzC;IAED,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,QAAQ;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1G;IAED,oBAAoB;QAChB,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ;IAED,kBAAkB,CAAC,SAA0C;QACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,IAAI,eAKU,EALV,AAIA,4DACU,CAAC;QAEf,QACI,6CAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;KACL;CACJ;;;;"}
|
||||
@@ -0,0 +1,102 @@
|
||||
(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 && OverlayScrollbars.hasOwnProperty('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);
|
||||
};
|
||||
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);
|
||||
}
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.render = function () {
|
||||
var _a = this.props, options = _a.options, extensions = _a.extensions, children = _a.children, divProps = __rest(_a, ["options", "extensions", "children"]);
|
||||
return (React__default.createElement("div", __assign({}, divProps, { ref: this._osTargetRef }), this.props.children));
|
||||
};
|
||||
return OverlayScrollbarsComponent;
|
||||
}(React.Component));
|
||||
|
||||
exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=overlayscrollbars-react.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"overlayscrollbars-react.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\r\n children?: any;\r\n options?: OverlayScrollbars.Options;\r\n extensions?: OverlayScrollbars.Extensions;\r\n}\r\nexport interface OverlayScrollbarsComponentState { }\r\n\r\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\r\n private _osInstance: OverlayScrollbars | null = null;\r\n private _osTargetRef: RefObject<HTMLDivElement>;\r\n\r\n constructor(props: OverlayScrollbarsComponentProps) {\r\n super(props);\r\n this._osTargetRef = React.createRef();\r\n }\r\n\r\n osInstance(): OverlayScrollbars | null {\r\n return this._osInstance;\r\n }\r\n\r\n osTarget(): HTMLDivElement | null {\r\n return this._osTargetRef.current || null;\r\n }\r\n\r\n componentDidMount() {\r\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\r\n }\r\n\r\n componentWillUnmount() {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.destroy();\r\n this._osInstance = null;\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.options(this.props.options);\r\n }\r\n }\r\n\r\n render() {\r\n let {\r\n options,\r\n extensions,\r\n children,\r\n ...divProps\r\n } = this.props;\r\n\r\n return (\r\n <div {...divProps} ref={this._osTargetRef}>\r\n {...this.props.children}\r\n </div>\r\n );\r\n }\r\n}"],"names":["tslib_1.__extends","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUgDA,8CAA2E;QAIvH,oCAAY,KAAsC;YAAlD,YACI,kBAAM,KAAK,CAAC,SAEf;YANO,iBAAW,GAA6B,IAAI,CAAC;YAKjD,KAAI,CAAC,YAAY,GAAGC,cAAK,CAAC,SAAS,EAAE,CAAC;;SACzC;QAED,+CAAU,GAAV;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;SAC3B;QAED,6CAAQ,GAAR;YACI,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;SAC5C;QAED,sDAAiB,GAAjB;YACI,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC1G;QAED,yDAAoB,GAApB;YACI,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;SACJ;QAED,uDAAkB,GAAlB,UAAmB,SAA0C;YACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAChD;SACJ;QAED,2CAAM,GAAN;YACI,IAAI,eAKU,EAJV,oBAAO,EACP,0BAAU,EACV,sBAAQ,EACR,4DACU,CAAC;YAEf,QACIA,iDAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;SACL;QACL,iCAAC;IAAD,CAhDA,CAAgDC,eAAS;;;;;;;;;;;;"}
|
||||
@@ -0,0 +1,20 @@
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './OverlayScrollbarsComponent';
|
||||
Submodule
+1
Submodule packages/overlayscrollbars-react/example added at 1072e86638
+3919
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "overlayscrollbars-react",
|
||||
"version": "0.1.0",
|
||||
"description": "OverlayScrollbars wrapper for React.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"react"
|
||||
],
|
||||
"files": [
|
||||
"./src",
|
||||
"./dist",
|
||||
"README.md"
|
||||
],
|
||||
"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.4.0",
|
||||
"chalk": "^2.4.2",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-json-editor": "^2.5.2",
|
||||
"overlayscrollbars": "^1.9.0",
|
||||
"react": "^16.4.0",
|
||||
"rollup": "^1.17.0",
|
||||
"rollup-plugin-commonjs": "^10.0.1",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-typescript2": "^0.22.0",
|
||||
"shelljs": "^0.8.3",
|
||||
"typescript": "^3.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.4.0",
|
||||
"overlayscrollbars": "^1.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node build.js",
|
||||
"example": "cd example && npm start",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import typescript from 'rollup-plugin-typescript2';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import pkg from './package.json';
|
||||
|
||||
const globals = {
|
||||
'react': 'React',
|
||||
'overlayscrollbars': 'OverlayScrollbars'
|
||||
};
|
||||
const external = [...Object.keys(pkg.devDependencies), ...Object.keys(pkg.peerDependencies)];
|
||||
|
||||
export default {
|
||||
input: './src/index.ts',
|
||||
output: [
|
||||
{
|
||||
name: 'OverlayScrollbarsReact',
|
||||
globals: globals,
|
||||
file: pkg.main,
|
||||
format: 'umd',
|
||||
exports: 'named',
|
||||
sourcemap: true
|
||||
},
|
||||
{
|
||||
file: pkg.module,
|
||||
format: 'es',
|
||||
exports: 'named',
|
||||
sourcemap: true
|
||||
}
|
||||
],
|
||||
external: external,
|
||||
plugins: [
|
||||
typescript({
|
||||
useTsconfigDeclarationDir : true
|
||||
}),
|
||||
resolve(),
|
||||
commonjs()
|
||||
]
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let {
|
||||
options,
|
||||
extensions,
|
||||
children,
|
||||
...divProps
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div {...divProps} ref={this._osTargetRef}>
|
||||
{...this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './OverlayScrollbarsComponent';
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowJs": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist",
|
||||
"target": "es5",
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"jsx": "react",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom",
|
||||
"es2016",
|
||||
"es2017"
|
||||
],
|
||||
"declaration": true,
|
||||
"declarationDir": "./dist/types",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"removeComments": true
|
||||
},
|
||||
"include": [
|
||||
"./src"
|
||||
],
|
||||
"exclude": [
|
||||
"./dist",
|
||||
"./example",
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
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: [
|
||||
'.rpt2_cache' // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
|
||||
]
|
||||
}
|
||||
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 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: [
|
||||
filesInfo.srcFolder,
|
||||
filesInfo.distFolder,
|
||||
'README.md'
|
||||
]
|
||||
};
|
||||
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,
|
||||
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')();
|
||||
@@ -0,0 +1,63 @@
|
||||
import Vue from 'vue';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
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() {
|
||||
let osInstance = this._osInstace;
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
osInstance.destroy();
|
||||
this._osInstace = null;
|
||||
}
|
||||
},
|
||||
render(createElement) {
|
||||
return (createElement("div", null, this.$slots.default));
|
||||
}
|
||||
}) {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this._osInstace = null;
|
||||
}
|
||||
}
|
||||
|
||||
const OverlayScrollbarsPlugin = {
|
||||
install(vue, options) {
|
||||
if (options) {
|
||||
OverlayScrollbars.defaultOptions(options);
|
||||
}
|
||||
vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
|
||||
}
|
||||
};
|
||||
|
||||
export { OverlayScrollbarsComponent, OverlayScrollbarsPlugin };
|
||||
//# sourceMappingURL=overlayscrollbars-vue.esm.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"overlayscrollbars-vue.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx","../src/OverlayScrollbarsPlugin.ts"],"sourcesContent":["import Vue, { VueConstructor, VNode, CreateElement, PropType } from 'vue';\nimport OverlayScrollbars from 'overlayscrollbars';\n\nexport interface OverlayScrollbarsComponentData {\n}\n\nexport interface OverlayScrollbarsComponentMethods {\n osInstance(): OverlayScrollbars | null;\n osTarget(): HTMLDivElement | null;\n}\n\nexport interface OverlayScrollbarsComponentComputed {\n}\n\nexport interface OverlayScrollbarsComponentProps {\n options: OverlayScrollbars.Options;\n extensions: OverlayScrollbars.Extensions;\n}\n\n// https://github.com/vuejs/vue/issues/7060\nexport class OverlayScrollbarsComponent extends Vue.extend<OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps>({\n name: 'overlay-scrollbars', // https://vuejs.org/v2/guide/components-registration.html#Component-Names\n props: {\n options: {\n type: Object as PropType<OverlayScrollbars.Options>\n },\n extensions: {\n type: [String, Array, Object] as PropType<OverlayScrollbars.Extensions>\n }\n },\n methods: {\n osInstance(): OverlayScrollbars | null {\n return (this as OverlayScrollbarsComponent)._osInstace;\n },\n osTarget(): HTMLDivElement | null {\n return this.$el as HTMLDivElement || null;\n }\n },\n watch: {\n options(currOptions: OverlayScrollbars.Options, oldOptions: OverlayScrollbars.Options) {\n let osInstance = (this as OverlayScrollbarsComponent)._osInstace;\n if (OverlayScrollbars.valid(osInstance)) {\n osInstance.options(currOptions);\n }\n }\n },\n\n data() {\n return {};\n },\n\n mounted() {\n (this as OverlayScrollbarsComponent)._osInstace = OverlayScrollbars(this.osTarget(), this.options || {}, this.extensions);\n },\n\n beforeDestroy() {\n let osInstance = (this as OverlayScrollbarsComponent)._osInstace;\n if (OverlayScrollbars.valid(osInstance)) {\n osInstance.destroy();\n (this as OverlayScrollbarsComponent)._osInstace = null;\n }\n },\n\n render(createElement: CreateElement): VNode {\n return (\n <div>\n {this.$slots.default}\n </div>\n );\n }\n}) {\n private _osInstace: OverlayScrollbars | null = null;\n}","import { VueConstructor, PluginObject } from 'vue';\r\nimport { OverlayScrollbarsComponent } from './OverlayScrollbarsComponent';\r\nimport OverlayScrollbars from 'overlayscrollbars';\r\n\r\n\r\nexport const OverlayScrollbarsPlugin: PluginObject<OverlayScrollbars.Options> = {\r\n install(vue: VueConstructor, options?: OverlayScrollbars.Options) {\r\n if (options) {\r\n OverlayScrollbars.defaultOptions(options);\r\n }\r\n\r\n vue.component('overlay-scrollbars', OverlayScrollbarsComponent);\r\n }\r\n}"],"names":[],"mappings":";;;MAoBa,0BAA2B,SAAQ,GAAG,CAAC,MAAM,CAAyI;IAC/L,IAAI,EAAE,oBAAoB;IAC1B,KAAK,EAAE;QACH,OAAO,EAAE;YACL,IAAI,EAAE,MAA6C;SACtD;QACD,UAAU,EAAE;YACR,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAA2C;SAC1E;KACJ;IACD,OAAO,EAAE;QACL,UAAU;YACN,OAAQ,IAAmC,CAAC,UAAU,CAAC;SAC1D;QACD,QAAQ;YACJ,OAAO,IAAI,CAAC,GAAqB,IAAI,IAAI,CAAC;SAC7C;KACJ;IACD,KAAK,EAAE;QACH,OAAO,CAAC,WAAsC,EAAE,UAAqC;YACjF,IAAI,UAAU,GAAI,IAAmC,CAAC,UAAU,CAAC;YACjE,IAAI,iBAAiB,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;gBACrC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;aACnC;SACJ;KACJ;IAED,IAAI;QACA,OAAO,EAAE,CAAC;KACb;IAED,OAAO;QACF,IAAmC,CAAC,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC7H;IAED,aAAa;QACT,IAAI,UAAU,GAAI,IAAmC,CAAC,UAAU,CAAC;QACjE,IAAI,iBAAiB,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;YACrC,UAAU,CAAC,OAAO,EAAE,CAAC;YACpB,IAAmC,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1D;KACJ;IAED,MAAM,CAAC,aAA4B;QAC/B,QACI,2BACK,IAAI,CAAC,MAAM,CAAC,OAAO,CAClB,EACR;KACL;CACJ,CAAC;IAlDF;;QAmDY,eAAU,GAA6B,IAAI,CAAC;KACvD;CAAA;;MCnEY,uBAAuB,GAA4C;IAC5E,OAAO,CAAC,GAAmB,EAAE,OAAmC;QAC5D,IAAI,OAAO,EAAE;YACT,iBAAiB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;SAC7C;QAED,GAAG,CAAC,SAAS,CAAC,oBAAoB,EAAE,0BAA0B,CAAC,CAAC;KACnE;CACJ;;;;"}
|
||||
@@ -0,0 +1,106 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('overlayscrollbars')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'vue', 'overlayscrollbars'], factory) :
|
||||
(global = global || self, factory(global.OverlayScrollbarsVue = {}, global.Vue, global.OverlayScrollbars));
|
||||
}(this, function (exports, Vue, OverlayScrollbars) { 'use strict';
|
||||
|
||||
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
|
||||
OverlayScrollbars = OverlayScrollbars && OverlayScrollbars.hasOwnProperty('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 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;
|
||||
}
|
||||
},
|
||||
render: function (createElement) {
|
||||
return (createElement("div", null, this.$slots.default));
|
||||
}
|
||||
})));
|
||||
|
||||
var OverlayScrollbarsPlugin = {
|
||||
install: function (vue, options) {
|
||||
if (options) {
|
||||
OverlayScrollbars.defaultOptions(options);
|
||||
}
|
||||
vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
|
||||
}
|
||||
};
|
||||
|
||||
exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
|
||||
exports.OverlayScrollbarsPlugin = OverlayScrollbarsPlugin;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=overlayscrollbars-vue.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"overlayscrollbars-vue.js","sources":["../src/OverlayScrollbarsComponent.tsx","../src/OverlayScrollbarsPlugin.ts"],"sourcesContent":["import Vue, { VueConstructor, VNode, CreateElement, PropType } from 'vue';\nimport OverlayScrollbars from 'overlayscrollbars';\n\nexport interface OverlayScrollbarsComponentData {\n}\n\nexport interface OverlayScrollbarsComponentMethods {\n osInstance(): OverlayScrollbars | null;\n osTarget(): HTMLDivElement | null;\n}\n\nexport interface OverlayScrollbarsComponentComputed {\n}\n\nexport interface OverlayScrollbarsComponentProps {\n options: OverlayScrollbars.Options;\n extensions: OverlayScrollbars.Extensions;\n}\n\n// https://github.com/vuejs/vue/issues/7060\nexport class OverlayScrollbarsComponent extends Vue.extend<OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps>({\n name: 'overlay-scrollbars', // https://vuejs.org/v2/guide/components-registration.html#Component-Names\n props: {\n options: {\n type: Object as PropType<OverlayScrollbars.Options>\n },\n extensions: {\n type: [String, Array, Object] as PropType<OverlayScrollbars.Extensions>\n }\n },\n methods: {\n osInstance(): OverlayScrollbars | null {\n return (this as OverlayScrollbarsComponent)._osInstace;\n },\n osTarget(): HTMLDivElement | null {\n return this.$el as HTMLDivElement || null;\n }\n },\n watch: {\n options(currOptions: OverlayScrollbars.Options, oldOptions: OverlayScrollbars.Options) {\n let osInstance = (this as OverlayScrollbarsComponent)._osInstace;\n if (OverlayScrollbars.valid(osInstance)) {\n osInstance.options(currOptions);\n }\n }\n },\n\n data() {\n return {};\n },\n\n mounted() {\n (this as OverlayScrollbarsComponent)._osInstace = OverlayScrollbars(this.osTarget(), this.options || {}, this.extensions);\n },\n\n beforeDestroy() {\n let osInstance = (this as OverlayScrollbarsComponent)._osInstace;\n if (OverlayScrollbars.valid(osInstance)) {\n osInstance.destroy();\n (this as OverlayScrollbarsComponent)._osInstace = null;\n }\n },\n\n render(createElement: CreateElement): VNode {\n return (\n <div>\n {this.$slots.default}\n </div>\n );\n }\n}) {\n private _osInstace: OverlayScrollbars | null = null;\n}","import { VueConstructor, PluginObject } from 'vue';\r\nimport { OverlayScrollbarsComponent } from './OverlayScrollbarsComponent';\r\nimport OverlayScrollbars from 'overlayscrollbars';\r\n\r\n\r\nexport const OverlayScrollbarsPlugin: PluginObject<OverlayScrollbars.Options> = {\r\n install(vue: VueConstructor, options?: OverlayScrollbars.Options) {\r\n if (options) {\r\n OverlayScrollbars.defaultOptions(options);\r\n }\r\n\r\n vue.component('overlay-scrollbars', OverlayScrollbarsComponent);\r\n }\r\n}"],"names":["tslib_1.__extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoBgDA,8CAkD9C;QAlDF;YAAA,qEAoDC;YADW,gBAAU,GAA6B,IAAI,CAAC;;SACvD;QAAD,iCAAC;IAAD,CAAC,CApD+C,GAAG,CAAC,MAAM,CAAyI;QAC/L,IAAI,EAAE,oBAAoB;QAC1B,KAAK,EAAE;YACH,OAAO,EAAE;gBACL,IAAI,EAAE,MAA6C;aACtD;YACD,UAAU,EAAE;gBACR,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAA2C;aAC1E;SACJ;QACD,OAAO,EAAE;YACL,UAAU,EAAV;gBACI,OAAQ,IAAmC,CAAC,UAAU,CAAC;aAC1D;YACD,QAAQ,EAAR;gBACI,OAAO,IAAI,CAAC,GAAqB,IAAI,IAAI,CAAC;aAC7C;SACJ;QACD,KAAK,EAAE;YACH,OAAO,EAAP,UAAQ,WAAsC,EAAE,UAAqC;gBACjF,IAAI,UAAU,GAAI,IAAmC,CAAC,UAAU,CAAC;gBACjE,IAAI,iBAAiB,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;oBACrC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;iBACnC;aACJ;SACJ;QAED,IAAI;YACA,OAAO,EAAE,CAAC;SACb;QAED,OAAO,EAAP;YACK,IAAmC,CAAC,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAC7H;QAED,aAAa,EAAb;YACI,IAAI,UAAU,GAAI,IAAmC,CAAC,UAAU,CAAC;YACjE,IAAI,iBAAiB,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;gBACrC,UAAU,CAAC,OAAO,EAAE,CAAC;gBACpB,IAAmC,CAAC,UAAU,GAAG,IAAI,CAAC;aAC1D;SACJ;QAED,MAAM,EAAN,UAAO,aAA4B;YAC/B,QACI,2BACK,IAAI,CAAC,MAAM,CAAC,OAAO,CAClB,EACR;SACL;KACJ,CAAC;;QCjEW,uBAAuB,GAA4C;QAC5E,OAAO,EAAP,UAAQ,GAAmB,EAAE,OAAmC;YAC5D,IAAI,OAAO,EAAE;gBACT,iBAAiB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;aAC7C;YAED,GAAG,CAAC,SAAS,CAAC,oBAAoB,EAAE,0BAA0B,CAAC,CAAC;SACnE;KACJ;;;;;;;;;;;;;"}
|
||||
@@ -0,0 +1,19 @@
|
||||
import Vue, { VueConstructor } from 'vue';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
export interface OverlayScrollbarsComponentData {
|
||||
}
|
||||
export interface OverlayScrollbarsComponentMethods {
|
||||
osInstance(): OverlayScrollbars | null;
|
||||
osTarget(): HTMLDivElement | null;
|
||||
}
|
||||
export interface OverlayScrollbarsComponentComputed {
|
||||
}
|
||||
export interface OverlayScrollbarsComponentProps {
|
||||
options: OverlayScrollbars.Options;
|
||||
extensions: OverlayScrollbars.Extensions;
|
||||
}
|
||||
declare const OverlayScrollbarsComponent_base: VueConstructor<OverlayScrollbarsComponentData & OverlayScrollbarsComponentMethods & OverlayScrollbarsComponentComputed & OverlayScrollbarsComponentProps & Vue>;
|
||||
export declare class OverlayScrollbarsComponent extends OverlayScrollbarsComponent_base {
|
||||
private _osInstace;
|
||||
}
|
||||
export {};
|
||||
@@ -0,0 +1,3 @@
|
||||
import { PluginObject } from 'vue';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
export declare const OverlayScrollbarsPlugin: PluginObject<OverlayScrollbars.Options>;
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './OverlayScrollbarsPlugin';
|
||||
export * from './OverlayScrollbarsComponent';
|
||||
Submodule
+1
Submodule packages/overlayscrollbars-vue/example added at 8f5d430a2e
+3667
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "overlayscrollbars-vue",
|
||||
"version": "0.1.0",
|
||||
"description": "OverlayScrollbars wrapper for Vue.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"vue"
|
||||
],
|
||||
"files": [
|
||||
"./src",
|
||||
"./dist",
|
||||
"README.md"
|
||||
],
|
||||
"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-vue.js",
|
||||
"module": "./dist/overlayscrollbars-vue.esm.js",
|
||||
"typings": "./dist/types/index.d.ts",
|
||||
"author": "KingSora | Rene Haas",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"chalk": "^2.4.2",
|
||||
"gulp": "^4.0.2",
|
||||
"overlayscrollbars": "^1.9.0",
|
||||
"rollup": "^1.17.0",
|
||||
"rollup-plugin-commonjs": "^10.0.1",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-typescript2": "^0.22.0",
|
||||
"shelljs": "0.7.7",
|
||||
"typescript": "^3.0.3",
|
||||
"vue": "^2.6.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.6.10",
|
||||
"overlayscrollbars": "^1.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node build.js",
|
||||
"example": "cd example && npm run serve",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import Vue, { VueConstructor, VNode, CreateElement, PropType } from 'vue';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
export interface OverlayScrollbarsComponentData {
|
||||
}
|
||||
|
||||
export interface OverlayScrollbarsComponentMethods {
|
||||
osInstance(): OverlayScrollbars | null;
|
||||
osTarget(): HTMLDivElement | null;
|
||||
}
|
||||
|
||||
export interface OverlayScrollbarsComponentComputed {
|
||||
}
|
||||
|
||||
export interface OverlayScrollbarsComponentProps {
|
||||
options: OverlayScrollbars.Options;
|
||||
extensions: OverlayScrollbars.Extensions;
|
||||
}
|
||||
|
||||
// https://github.com/vuejs/vue/issues/7060
|
||||
export class OverlayScrollbarsComponent extends Vue.extend<OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps>({
|
||||
name: 'overlay-scrollbars', // https://vuejs.org/v2/guide/components-registration.html#Component-Names
|
||||
props: {
|
||||
options: {
|
||||
type: Object as PropType<OverlayScrollbars.Options>
|
||||
},
|
||||
extensions: {
|
||||
type: [String, Array, Object] as PropType<OverlayScrollbars.Extensions>
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
osInstance(): OverlayScrollbars | null {
|
||||
return (this as OverlayScrollbarsComponent)._osInstace;
|
||||
},
|
||||
osTarget(): HTMLDivElement | null {
|
||||
return this.$el as HTMLDivElement || null;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options(currOptions: OverlayScrollbars.Options, oldOptions: OverlayScrollbars.Options) {
|
||||
let osInstance = (this as OverlayScrollbarsComponent)._osInstace;
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
osInstance.options(currOptions);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
(this as OverlayScrollbarsComponent)._osInstace = OverlayScrollbars(this.osTarget(), this.options || {}, this.extensions);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
let osInstance = (this as OverlayScrollbarsComponent)._osInstace;
|
||||
if (OverlayScrollbars.valid(osInstance)) {
|
||||
osInstance.destroy();
|
||||
(this as OverlayScrollbarsComponent)._osInstace = null;
|
||||
}
|
||||
},
|
||||
|
||||
render(createElement: CreateElement): VNode {
|
||||
return (
|
||||
<div>
|
||||
{this.$slots.default}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}) {
|
||||
private _osInstace: OverlayScrollbars | null = null;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { VueConstructor, PluginObject } from 'vue';
|
||||
import { OverlayScrollbarsComponent } from './OverlayScrollbarsComponent';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
|
||||
export const OverlayScrollbarsPlugin: PluginObject<OverlayScrollbars.Options> = {
|
||||
install(vue: VueConstructor, options?: OverlayScrollbars.Options) {
|
||||
if (options) {
|
||||
OverlayScrollbars.defaultOptions(options);
|
||||
}
|
||||
|
||||
vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './OverlayScrollbarsPlugin';
|
||||
export * from './OverlayScrollbarsComponent';
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
import Vue, { VNode } from 'vue';
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface Element extends VNode { }
|
||||
interface ElementClass extends Vue { }
|
||||
interface IntrinsicElements {
|
||||
[elem: string]: any;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowJs": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist",
|
||||
"target": "es5",
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "createElement",
|
||||
"declaration": true,
|
||||
"declarationDir": "./dist/types",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"removeComments": true
|
||||
},
|
||||
"include": [
|
||||
"./src"
|
||||
],
|
||||
"exclude": [
|
||||
"./dist",
|
||||
"./example",
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
:: npm install uglify-js -g
|
||||
call uglifyjs ./js/OverlayScrollbars.js -o ./js/OverlayScrollbars.min.js -c -m --mangle-props regex="/^_/" --ie8 --config-file uglify.json
|
||||
call uglifyjs ./js/jquery.overlayScrollbars.js -o ./js/jquery.overlayScrollbars.min.js -c -m --mangle-props regex="/^_/" --ie8 --config-file uglify.json
|
||||
pause
|
||||
-26
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"parse":{
|
||||
|
||||
},
|
||||
"compress":{
|
||||
"ie8":true,
|
||||
"passes":2,
|
||||
"reduce_vars":false,
|
||||
"typeofs":false
|
||||
},
|
||||
"mangle":{
|
||||
"ie8":true,
|
||||
"properties":{
|
||||
"regex":"/^_/"
|
||||
}
|
||||
},
|
||||
"output":{
|
||||
"ie8":true,
|
||||
"beautify":false,
|
||||
"comments":"/@license|@preserve|^!/",
|
||||
"indent_level":4,
|
||||
"indent_start":0,
|
||||
"quote_style":0
|
||||
},
|
||||
"ie8":true
|
||||
}
|
||||
Reference in New Issue
Block a user