From 577739dcc1dccf012fcbd34a0f167886ae06a607 Mon Sep 17 00:00:00 2001 From: Jean-Francois Cere Date: Wed, 22 Feb 2017 00:53:38 -0500 Subject: [PATCH] Initial (#1) --- .editorconfig | 13 ++ .gitignore | 40 ++++++ README.md | 125 ++++++++++++++++++ angular-cli.json | 61 +++++++++ circle.yml | 42 ++++++ e2e/tsconfig.json | 16 +++ index.ts | 1 + karma.conf.js | 48 +++++++ package.json | 72 ++++++++++ protractor.conf.js | 32 +++++ src/app/index.ts | 1 + src/app/malihu-scrollbar-demo/lorem-ipsum.txt | 11 ++ .../malihu-scrollbar-demo.component.html | 20 +++ .../malihu-scrollbar-demo.component.scss | 82 ++++++++++++ .../malihu-scrollbar-demo.component.spec.ts | 28 ++++ .../malihu-scrollbar-demo.component.ts | 46 +++++++ .../malihu-scrollbar-demo.module.ts | 15 +++ src/app/malihu-scrollbar/index.ts | 3 + .../malihu-scrollbar.directive.spec.ts | 8 ++ .../malihu-scrollbar.directive.ts | 48 +++++++ .../malihu-scrollbar.module.ts | 21 +++ .../malihu-scrollbar.service.spec.ts | 14 ++ .../malihu-scrollbar.service.ts | 46 +++++++ src/assets/.gitkeep | 0 src/environments/environment.prod.ts | 3 + src/environments/environment.ts | 8 ++ src/favicon.ico | Bin 0 -> 5430 bytes src/index.html | 14 ++ src/main.ts | 13 ++ src/polyfills.ts | 19 +++ src/styles.scss | 4 + src/test.ts | 34 +++++ src/tsconfig.json | 18 +++ tslint-formatters/junitFormatter.js | 70 ++++++++++ tslint.json | 116 ++++++++++++++++ 35 files changed, 1092 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 README.md create mode 100644 angular-cli.json create mode 100644 circle.yml create mode 100644 e2e/tsconfig.json create mode 100644 index.ts create mode 100644 karma.conf.js create mode 100644 package.json create mode 100644 protractor.conf.js create mode 100644 src/app/index.ts create mode 100644 src/app/malihu-scrollbar-demo/lorem-ipsum.txt create mode 100644 src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.html create mode 100644 src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.scss create mode 100644 src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.spec.ts create mode 100644 src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.ts create mode 100644 src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.module.ts create mode 100644 src/app/malihu-scrollbar/index.ts create mode 100644 src/app/malihu-scrollbar/malihu-scrollbar.directive.spec.ts create mode 100644 src/app/malihu-scrollbar/malihu-scrollbar.directive.ts create mode 100644 src/app/malihu-scrollbar/malihu-scrollbar.module.ts create mode 100644 src/app/malihu-scrollbar/malihu-scrollbar.service.spec.ts create mode 100644 src/app/malihu-scrollbar/malihu-scrollbar.service.ts create mode 100644 src/assets/.gitkeep create mode 100644 src/environments/environment.prod.ts create mode 100644 src/environments/environment.ts create mode 100644 src/favicon.ico create mode 100644 src/index.html create mode 100644 src/main.ts create mode 100644 src/polyfills.ts create mode 100644 src/styles.scss create mode 100644 src/test.ts create mode 100644 src/tsconfig.json create mode 100644 tslint-formatters/junitFormatter.js create mode 100644 tslint.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..6e87a00 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fe6f8a7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,40 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp + +# dependencies +/node_modules + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ + +# 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 +testem.log +/typings + +# e2e +/e2e/*.js +/e2e/*.map + +#System Files +.DS_Store +Thumbs.db diff --git a/README.md b/README.md new file mode 100644 index 0000000..622f787 --- /dev/null +++ b/README.md @@ -0,0 +1,125 @@ +# ngx-malihu-scrollbar + +Angular 2 Malihu jQuery Custom Scrollbar directive and service. + +Demo available @ [jfcere.github.io/ngx-malihu-scrollbar](https://jfcere.github.io/ngx-malihu-scrollbar) + +## Installation + +Use the following command to add ngx-malihu-scrollbar library to your `package.json` file. Note that jQuery will automatically be downloaded as a dependency. + +```bash +npm install ngx-malihu-scrollbar --save +``` + +## Configuration + +You must import `MalihuScrollbarModule` inside your module to be able to use `malihu-scrollbar` directive or `MalihuScrollbarService`. + +```diff +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; ++ import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar'; + +import { HomeComponent } from './home.component'; + +@NgModule({ + imports: [ + CommonModule, ++ MalihuScrollbarModule.forRoot(), + ], + declarations: [HomeComponent], +}) +``` + +You will need to add both Malihu Custom Scrollbar javascript file and jQuery to your application. + +If you are using [Angular CLI](https://cli.angular.io/) you can add the files by modifying the `angular-cli.json` file as below ... + +```diff +"styles": [ + "styles.scss", ++ "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" +], +"scripts": [ ++ "../node_modules/jquery/dist/jquery.js", ++ "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js" +], +``` + +## Usage + +ngx-malihu-scrollbar provides both a directive and a service to apply the custom scrollbar on your HTML element. + +> For a complete list of available customization options please refer to the original [Malihu Custom Scrollbar documentation](http://manos.malihu.gr/jquery-custom-content-scroller/). + +### Directive + +You can use `malihu-scrollbar` directive directly on the HTML element and provide plugin options using `scrollbarOptions` input property. + +##### example.component.ts +```typescript +public scrollbarOptions = { axis: 'yx', theme: 'minimal-dark' }; +``` + +##### example.component.html +```html +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua... +
+``` + +### Service + +Alternatively, you can initialize scrollbar customizations using `MalihuScrollbarService` by providing either a selector, jQuery object or a HTML element along with the scrolling options. + +The service also provide access to other Malihu Custom Scrollbar methods such as `scrollTo`, `update`, `disable` and `destroy`. + +```typescript + constructor( + private mScrollbarService: MalihuScrollbarService, + ) { } + + ngAfterViewInit() { + this.mScrollbarService.initScrollbar('#myElementId', { axis: 'y', theme: 'dark-thick', scrollButtons: { enable: true } }); + } + + ngOnDestroy() { + this.mScrollbarService.destroy('#myElementId'); + } +``` + +## Demo application + +You can find the [demo](https://jfcere.github.io/ngx-malihu-scrollbar) source code inside the `src/app/malihu-scrollbar-demo` directory. + +The following commands will clone the repository, install npm dependencies and serve the application @ [http://localhost:4200](http://localhost:4200) + +```bash +git clone https://github.com/jfcere/ngx-malihu-scrollbar.git + +npm install + +ng serve +``` + +## Road map + +Here is the list of tasks that will be done on this library in a near future ... + +- Publish demo on github pages +- Implement tests +- Add CircleCI integration +- Transpile library to Javascript + +## Contribution + +Contributions are always welcome, just make sure that ... + +- Your code style matches with the rest of the project +- Unit tests pass +- Linter passes + +## License + +Licensed under [MIT](https://opensource.org/licenses/MIT). \ No newline at end of file diff --git a/angular-cli.json b/angular-cli.json new file mode 100644 index 0000000..a6e9066 --- /dev/null +++ b/angular-cli.json @@ -0,0 +1,61 @@ +{ + "project": { + "version": "1.0.0-beta.26", + "name": "ngx-malihu-scrollbar" + }, + "apps": [ + { + "root": "src", + "outDir": "dist", + "assets": [ + "assets", + "favicon.ico" + ], + "index": "index.html", + "main": "main.ts", + "test": "test.ts", + "tsconfig": "tsconfig.json", + "prefix": "malihu", + "mobile": false, + "styles": [ + "styles.scss", + "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" + ], + "scripts": [ + "../node_modules/jquery/dist/jquery.js", + "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js" + ], + "environments": { + "source": "environments/environment.ts", + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" + } + } + ], + "e2e": { + "protractor": { + "config": "./protractor.conf.js" + } + }, + "test": { + "karma": { + "config": "./karma.conf.js" + } + }, + "defaults": { + "styleExt": "scss", + "prefixInterfaces": false, + "inline": { + "style": false, + "template": false + }, + "spec": { + "class": false, + "component": true, + "directive": true, + "module": false, + "pipe": true, + "service": true + } + } +} diff --git a/circle.yml b/circle.yml new file mode 100644 index 0000000..1cee87b --- /dev/null +++ b/circle.yml @@ -0,0 +1,42 @@ +general: + branches: + ignore: + - gh-pages + +machine: + node: + version: 6 + environment: + YARN_VERSION: 0.18.1 + PATH: "${PATH}:${HOME}/.yarn/bin:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin" + +dependencies: + pre: + - | + if [[ ! -e ~/.yarn/bin/yarn || $(yarn --version) != "${YARN_VERSION}" ]]; then + echo "Download and install Yarn." + curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION + else + echo "The correct version of Yarn is already installed." + fi + override: + - yarn install + cache_directories: + - ~/.yarn + - ~/.cache/yarn + +test: + pre: + - mkdir $CIRCLE_TEST_REPORTS/karma + - mkdir $CIRCLE_TEST_REPORTS/lint + override: + - yarn test -- --single-run + - yarn lint -- --formatters-dir ./tslint-formatters --format junit -o $CIRCLE_TEST_REPORTS/lint/tslint.xml + post: + - mv test-results.xml $CIRCLE_TEST_REPORTS/karma + +deployment: + production: + branch: master + commands: + - cd demo-app && yarn install && yarn gh-pages:deploy diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json new file mode 100644 index 0000000..656bdb1 --- /dev/null +++ b/e2e/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "declaration": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "module": "commonjs", + "moduleResolution": "node", + "outDir": "../dist/out-tsc-e2e", + "sourceMap": true, + "target": "es5", + "typeRoots": [ + "../node_modules/@types" + ] + } +} diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..59cab00 --- /dev/null +++ b/index.ts @@ -0,0 +1 @@ +export * from './src/app/malihu-scrollbar'; diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..bdea811 --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,48 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/0.13/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', 'angular-cli'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-junit-reporter'), + require('karma-remap-istanbul'), + require('angular-cli/plugins/karma') + ], + files: [ + { pattern: './src/test.ts', watched: false } + ], + preprocessors: { + './src/test.ts': ['angular-cli'] + }, + mime: { + 'text/x-typescript': ['ts','tsx'] + }, + remapIstanbulReporter: { + reports: { + html: 'coverage', + lcovonly: './coverage/coverage.lcov' + } + }, + angularCli: { + config: './angular-cli.json', + environment: 'dev' + }, + reporters: config.angularCli && config.angularCli.codeCoverage + ? ['progress', 'karma-remap-istanbul'] + : ['progress', 'junit'], + junitReporter: { + outputFile: 'test-results.xml', + useBrowserName: false + }, + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..26f4497 --- /dev/null +++ b/package.json @@ -0,0 +1,72 @@ +{ + "name": "ngx-malihu-scrollbar", + "description": "Angular 2 Malihu jQuery Custom Scrollbar directive and service.", + "homepage": "https://github.com/jfcere/ngx-malihu-scrollbar", + "version": "0.0.1", + "license": "MIT", + "author": { + "name": "Jean-Francois Cere", + "email": "jfcere@sherweb.com" + }, + "repository": { + "type": "git", + "url": "https://github.com/jfcere/ngx-malihu-scrollbar" + }, + "keywords": [ + "angular", + "angular-2", + "angular2", + "ng2", + "ngx", + "malihu", + "custom", + "scrollbar" + ], + "angular-cli": {}, + "scripts": { + "e2e": "protractor", + "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check", + "ng": "ng", + "pree2e": "webdriver-manager update --standalone false --gecko false", + "publish:gh-pages": "ng github-pages:deploy --message \"Publish gh-pages\"", + "start": "ng serve", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/common": "^2.3.1", + "@angular/compiler": "^2.3.1", + "@angular/core": "^2.3.1", + "@angular/forms": "^2.3.1", + "@angular/http": "^2.3.1", + "@angular/platform-browser": "^2.3.1", + "@angular/platform-browser-dynamic": "^2.3.1", + "@angular/router": "^3.3.1", + "@types/mcustomscrollbar": "^2.8.30", + "core-js": "^2.4.1", + "jquery": "^2.2.4", + "malihu-custom-scrollbar-plugin": "^3.1.5", + "rxjs": "^5.0.1", + "ts-helpers": "^1.1.1", + "zone.js": "^0.7.2" + }, + "devDependencies": { + "@angular/compiler-cli": "^2.3.1", + "@types/jasmine": "2.5.38", + "@types/node": "^6.0.42", + "angular-cli": "1.0.0-beta.26", + "codelyzer": "~2.0.0-beta.1", + "jasmine-core": "2.5.2", + "jasmine-spec-reporter": "2.5.0", + "karma": "1.2.0", + "karma-chrome-launcher": "^2.0.0", + "karma-cli": "^1.0.1", + "karma-jasmine": "^1.0.2", + "karma-junit-reporter": "^1.2.0", + "karma-remap-istanbul": "^0.2.1", + "protractor": "~4.0.13", + "ts-node": "1.2.1", + "tslint": "^4.3.0", + "typescript": "~2.0.3" + } +} diff --git a/protractor.conf.js b/protractor.conf.js new file mode 100644 index 0000000..ffded70 --- /dev/null +++ b/protractor.conf.js @@ -0,0 +1,32 @@ +// Protractor configuration file, see link for more information +// https://github.com/angular/protractor/blob/master/lib/config.ts + +/*global jasmine */ +var SpecReporter = require('jasmine-spec-reporter'); + +exports.config = { + allScriptsTimeout: 11000, + specs: [ + './e2e/**/*.e2e-spec.ts' + ], + capabilities: { + 'browserName': 'chrome' + }, + directConnect: true, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 30000, + print: function() {} + }, + useAllAngular2AppRoots: true, + beforeLaunch: function() { + require('ts-node').register({ + project: 'e2e' + }); + }, + onPrepare: function() { + jasmine.getEnv().addReporter(new SpecReporter()); + } +}; diff --git a/src/app/index.ts b/src/app/index.ts new file mode 100644 index 0000000..738a8e5 --- /dev/null +++ b/src/app/index.ts @@ -0,0 +1 @@ +export * from './malihu-scrollbar'; diff --git a/src/app/malihu-scrollbar-demo/lorem-ipsum.txt b/src/app/malihu-scrollbar-demo/lorem-ipsum.txt new file mode 100644 index 0000000..87923f2 --- /dev/null +++ b/src/app/malihu-scrollbar-demo/lorem-ipsum.txt @@ -0,0 +1,11 @@ +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. + +Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. + +Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? + +Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas... \ No newline at end of file diff --git a/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.html b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.html new file mode 100644 index 0000000..d1ea325 --- /dev/null +++ b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.html @@ -0,0 +1,20 @@ +
+

ngx-malihu-scrollbar

+

demo based on Malihu jQuery Custom Scrollbar

+
+
+ +
+
+

{{ theme.name }}

+
+ {{ loremIpsum }} +
+ End of content. +
+
\ No newline at end of file diff --git a/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.scss b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.scss new file mode 100644 index 0000000..ea0efc1 --- /dev/null +++ b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.scss @@ -0,0 +1,82 @@ +@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css); + +$highlight-color: #6bdaea; +$link-color: #eb3755; +$main-background-color: black; +$card-dark-color: #333; +$card-light-color: #ddd; + +:host { + display: block; + padding: 3rem; + max-width: 1170px; + margin: 0 auto; +} + +header { + h1 { + color: $highlight-color; + } + + h4 { + a { + color: $link-color; + } + a:hover { + opacity: 0.87; + } + } + + hr { + border-bottom: 1px solid rgba(255,255,255,0.08); + border-top: 1px solid rgba(0,0,0,0.9); + height: 0; + } +} + + +main { + display: inline-block; + background: $main-background-color; + border-radius: 5px; + margin-top: 16px; + padding: 8px; + + div[malihu-scrollbar] { + border: 8px solid $main-background-color; + border-radius: 10px; + height: 500px; + line-height: 24px; + max-height: 500px; + padding: 16px; + + &.dark { + background: $card-dark-color; + + h3 { + color: $highlight-color; + } + + hr { + border-bottom: 1px solid rgba(255,255,255,0.08); + border-top: 1px solid rgba(0,0,0,0.9); + height: 0; + } + } + + &.light { + background: $card-light-color; + color: $card-dark-color; + + h3 { + color: $card-dark-color; + } + + hr { + border-bottom: 1px solid rgba(255,255,255,0.5); + border-top: 1px solid rgba(0,0,0,0.2); + height: 0; + } + } + } +} \ No newline at end of file diff --git a/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.spec.ts b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.spec.ts new file mode 100644 index 0000000..fa96a49 --- /dev/null +++ b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { MalihuScrollbarDemoComponent } from './malihu-scrollbar-demo.component'; + +describe('MalihuScrollbarDemoComponent', () => { + let component: MalihuScrollbarDemoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MalihuScrollbarDemoComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MalihuScrollbarDemoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); \ No newline at end of file diff --git a/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.ts b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.ts new file mode 100644 index 0000000..f5b2b74 --- /dev/null +++ b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.component.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; + +interface ITheme { + name: string; + class: string; + options: MCustomScrollbar.CustomScrollbarOptions; +} + +@Component({ + selector: 'malihu-scrollbar-demo', + templateUrl: './malihu-scrollbar-demo.component.html', + styleUrls: ['./malihu-scrollbar-demo.component.scss'] +}) +export class MalihuScrollbarDemoComponent { + + loremIpsum = require('raw-loader!./lorem-ipsum.txt'); + + themes: ITheme[] = [ + { name: '"light" (default)', class: 'dark', options: { axis: 'y', theme: 'light', scrollButtons: { enable: true } } }, + { name: '"dark"', class: 'light', options: { axis: 'y', theme: 'dark', scrollButtons: { enable: true } } }, + { name: '"minimal"', class: 'dark', options: { axis: 'y', theme: 'minimal' } }, + { name: '"minimal-dark"', class: 'light', options: { axis: 'y', theme: 'minimal-dark' } }, + { name: '"light-2"', class: 'dark', options: { axis: 'y', theme: 'light-2', scrollButtons: { enable: true } } }, + { name: '"dark-2"', class: 'light', options: { axis: 'y', theme: 'dark-2', scrollButtons: { enable: true } } }, + { name: '"light-3"', class: 'dark', options: { axis: 'y', theme: 'light-3', scrollButtons: { enable: true } } }, + { name: '"dark-3"', class: 'light', options: { axis: 'y', theme: 'dark-3', scrollButtons: { enable: true } } }, + { name: '"light-thick"', class: 'dark', options: { axis: 'y', theme: 'light-thick', scrollButtons: { enable: true } } }, + { name: '"dark-thick"', class: 'light', options: { axis: 'y', theme: 'dark-thick', scrollButtons: { enable: true } } }, + { name: '"light-thin"', class: 'dark', options: { axis: 'y', theme: 'light-thin', scrollButtons: { enable: true } } }, + { name: '"dark-thin"', class: 'light', options: { axis: 'y', theme: 'dark-thin', scrollButtons: { enable: true } } }, + { name: '"inset"', class: 'dark', options: { axis: 'y', theme: 'inset', scrollButtons: { enable: true } } }, + { name: '"inset-dark"', class: 'light', options: { axis: 'y', theme: 'inset-dark', scrollButtons: { enable: true } } }, + { name: '"inset-2"', class: 'dark', options: { axis: 'y', theme: 'inset-2', scrollButtons: { enable: true } } }, + { name: '"inset-2-dark"', class: 'light', options: { axis: 'y', theme: 'inset-2-dark', scrollButtons: { enable: true } } }, + { name: '"inset-3"', class: 'dark', options: { axis: 'y', theme: 'inset-3', scrollButtons: { enable: true } } }, + { name: '"inset-3-dark"', class: 'light', options: { axis: 'y', theme: 'inset-3-dark', scrollButtons: { enable: true } } }, + { name: '"rounded"', class: 'dark', options: { axis: 'y', theme: 'rounded', scrollButtons: { enable: true } } }, + { name: '"rounded-dark"', class: 'light', options: { axis: 'y', theme: 'rounded-dark', scrollButtons: { enable: true } } }, + { name: '"rounded-dots"', class: 'dark', options: { axis: 'y', theme: 'rounded-dots', scrollButtons: { enable: true } } }, + { name: '"rounded-dots-dark"', class: 'light', options: { axis: 'y', theme: 'rounded-dots-dark', scrollButtons: { enable: true } } }, + { name: '"3d"', class: 'dark', options: { axis: 'y', theme: '3d', scrollButtons: { enable: true } } }, + { name: '"3d-dark"', class: 'light', options: { axis: 'y', theme: '3d-dark', scrollButtons: { enable: true } } }, + { name: '"3d-thick"', class: 'dark', options: { axis: 'y', theme: '3d-thick', scrollButtons: { enable: true } } }, + { name: '"3d-thick-dark"', class: 'light', options: { axis: 'y', theme: '3d-thick-dark', scrollButtons: { enable: true } } }, + ]; +} diff --git a/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.module.ts b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.module.ts new file mode 100644 index 0000000..032a3ec --- /dev/null +++ b/src/app/malihu-scrollbar-demo/malihu-scrollbar-demo.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { MalihuScrollbarDemoComponent } from './malihu-scrollbar-demo.component'; +import { MalihuScrollbarModule } from '../malihu-scrollbar'; + +@NgModule({ + imports: [ + BrowserModule, + MalihuScrollbarModule.forRoot(), + ], + declarations: [MalihuScrollbarDemoComponent], + bootstrap: [MalihuScrollbarDemoComponent], +}) +export class MalihuScrollbarDemoModule { } diff --git a/src/app/malihu-scrollbar/index.ts b/src/app/malihu-scrollbar/index.ts new file mode 100644 index 0000000..7cd9591 --- /dev/null +++ b/src/app/malihu-scrollbar/index.ts @@ -0,0 +1,3 @@ +export * from './malihu-scrollbar.service'; +export * from './malihu-scrollbar.directive'; +export * from './malihu-scrollbar.module'; diff --git a/src/app/malihu-scrollbar/malihu-scrollbar.directive.spec.ts b/src/app/malihu-scrollbar/malihu-scrollbar.directive.spec.ts new file mode 100644 index 0000000..edde600 --- /dev/null +++ b/src/app/malihu-scrollbar/malihu-scrollbar.directive.spec.ts @@ -0,0 +1,8 @@ +import { MalihuScrollbarDirective } from './malihu-scrollbar.directive'; + +describe('MalihuScrollbarDirective:unit', () => { + it('should create an instance', () => { + const directive = new MalihuScrollbarDirective(null, null); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/malihu-scrollbar/malihu-scrollbar.directive.ts b/src/app/malihu-scrollbar/malihu-scrollbar.directive.ts new file mode 100644 index 0000000..0082dff --- /dev/null +++ b/src/app/malihu-scrollbar/malihu-scrollbar.directive.ts @@ -0,0 +1,48 @@ +import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, Renderer } from '@angular/core'; + +/** + * Malihu Custom Scrollbar directive + * Use this reference link for options definition + * http://manos.malihu.gr/jquery-custom-content-scroller/ + */ +@Directive({ + selector: '[MalihuScrollbar], [malihu-scrollbar]', +}) +export class MalihuScrollbarDirective implements AfterViewInit, OnDestroy { + @Input() scrollElementId: string; + @Input() scrollbarOptions: MCustomScrollbar.CustomScrollbarOptions; + + scrollableElement: JQuery; + + constructor( + private elementRef: ElementRef, + private renderer: Renderer, + ) { } + + ngAfterViewInit() { + this.initElements(); + this.initScrollbar(); + } + + ngOnDestroy() { + this.destroy(); + } + + initElements() { + this.scrollableElement = !!this.scrollElementId + ? $(`#${this.scrollElementId}`) + : $(this.elementRef.nativeElement); + + if (!!this.scrollElementId && this.scrollableElement.length === 0) { + throw Error(`MalihuScrollbarDirective cannot find element with provided scrollElementId: ${this.scrollElementId}.`); + } + } + + initScrollbar() { + this.renderer.invokeElementMethod(this.scrollableElement, 'mCustomScrollbar', [this.scrollbarOptions]); + } + + destroy() { + this.renderer.invokeElementMethod(this.scrollableElement, 'mCustomScrollbar', ['destroy']); + } +} diff --git a/src/app/malihu-scrollbar/malihu-scrollbar.module.ts b/src/app/malihu-scrollbar/malihu-scrollbar.module.ts new file mode 100644 index 0000000..08865bb --- /dev/null +++ b/src/app/malihu-scrollbar/malihu-scrollbar.module.ts @@ -0,0 +1,21 @@ +import { CommonModule } from '@angular/common'; +import { ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; + +import { MalihuScrollbarDirective } from './malihu-scrollbar.directive'; +import { MalihuScrollbarService } from './malihu-scrollbar.service'; + +@NgModule({ + imports: [CommonModule], + exports: [MalihuScrollbarDirective], + declarations: [MalihuScrollbarDirective], + providers: [MalihuScrollbarService], +}) +export class MalihuScrollbarModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MalihuScrollbarModule, + providers: [MalihuScrollbarService], + }; + } +} diff --git a/src/app/malihu-scrollbar/malihu-scrollbar.service.spec.ts b/src/app/malihu-scrollbar/malihu-scrollbar.service.spec.ts new file mode 100644 index 0000000..ba4d8cd --- /dev/null +++ b/src/app/malihu-scrollbar/malihu-scrollbar.service.spec.ts @@ -0,0 +1,14 @@ +import { inject, TestBed } from '@angular/core/testing'; +import { MalihuScrollbarService } from './malihu-scrollbar.service'; + +describe('MalihuScrollbarService:unit', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [MalihuScrollbarService], + }); + }); + + it('should ...', inject([MalihuScrollbarService], (service: MalihuScrollbarService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/malihu-scrollbar/malihu-scrollbar.service.ts b/src/app/malihu-scrollbar/malihu-scrollbar.service.ts new file mode 100644 index 0000000..a9d56a7 --- /dev/null +++ b/src/app/malihu-scrollbar/malihu-scrollbar.service.ts @@ -0,0 +1,46 @@ +import { Injectable } from '@angular/core'; + +type ScrollElement = string | JQuery | HTMLElement; + +@Injectable() +export class MalihuScrollbarService { + + constructor() { } + + initScrollbar(element: ScrollElement, options: MCustomScrollbar.CustomScrollbarOptions) { + this.getElement(element).mCustomScrollbar(options); + } + + scrollTo(element: ScrollElement, parameter: any, options: MCustomScrollbar.ScrollToParameterOptions) { + this.getElement(element).mCustomScrollbar('scrollTo', parameter, options); + } + + update(element: ScrollElement) { + this.getElement(element).mCustomScrollbar('update'); + } + + stop(element: ScrollElement) { + this.getElement(element).mCustomScrollbar('stop'); + } + + disable(element: ScrollElement) { + this.getElement(element).mCustomScrollbar('disable'); + } + + destroy(element: ScrollElement) { + this.getElement(element).mCustomScrollbar('destroy'); + } + + private getElement(element: ScrollElement): JQuery { + if (typeof element === 'string' || element instanceof String) { + return $(element); + } + if ((typeof element === 'object' || element instanceof Object) && element instanceof HTMLElement) { + return $(element); + } + if (element instanceof jQuery || 'jquery' in Object(element)) { + return element; + } + throw Error(`Unsupported element type in MalihuScrollbarService: ${element}`); + } +} diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts new file mode 100644 index 0000000..3612073 --- /dev/null +++ b/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..00313f1 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517 GIT binary patch literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- + + + + ngx-malihu-scrollbar + + + + + + + Loading... + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..f2180fc --- /dev/null +++ b/src/main.ts @@ -0,0 +1,13 @@ +import './polyfills.ts'; + +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { environment } from './environments/environment'; + +import { MalihuScrollbarDemoModule } from './app/malihu-scrollbar-demo/malihu-scrollbar-demo.module'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(MalihuScrollbarDemoModule); diff --git a/src/polyfills.ts b/src/polyfills.ts new file mode 100644 index 0000000..4749399 --- /dev/null +++ b/src/polyfills.ts @@ -0,0 +1,19 @@ +// This file includes polyfills needed by Angular and is loaded before +// the app. You can add your own extra polyfills to this file. +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/set'; +import 'core-js/es6/reflect'; + +import 'core-js/es7/reflect'; +import 'zone.js/dist/zone'; diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..7d08d0b --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,4 @@ +body { + background: #222 !important; + color: rgba(255,255,255,0.87) !important; +} diff --git a/src/test.ts b/src/test.ts new file mode 100644 index 0000000..430d4df --- /dev/null +++ b/src/test.ts @@ -0,0 +1,34 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import './polyfills.ts'; + +import 'zone.js/dist/long-stack-trace-zone'; +import 'zone.js/dist/proxy.js'; +import 'zone.js/dist/sync-test'; +import 'zone.js/dist/jasmine-patch'; +import 'zone.js/dist/async-test'; +import 'zone.js/dist/fake-async-test'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. +declare var __karma__: any; +declare var require: any; + +// Prevent Karma from running prematurely. +__karma__.loaded = function () {}; + +// 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); +// Finally, start Karma to run the tests. +__karma__.start(); diff --git a/src/tsconfig.json b/src/tsconfig.json new file mode 100644 index 0000000..1cf713a --- /dev/null +++ b/src/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "baseUrl": "", + "declaration": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": ["es6", "dom"], + "mapRoot": "./", + "module": "es6", + "moduleResolution": "node", + "outDir": "../dist/out-tsc", + "sourceMap": true, + "target": "es5", + "typeRoots": [ + "../node_modules/@types" + ] + } +} diff --git a/tslint-formatters/junitFormatter.js b/tslint-formatters/junitFormatter.js new file mode 100644 index 0000000..c2ab52e --- /dev/null +++ b/tslint-formatters/junitFormatter.js @@ -0,0 +1,70 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var Lint = require("tslint"); +/* + * TSLint formatter that adheres to the JUnit XML specification. + * https://github.com/windyroad/JUnit-Schema/blob/master/JUnit.xsd + */ +var Formatter = (function (_super) { + __extends(Formatter, _super); + function Formatter() { + return _super.apply(this, arguments) || this; + } + /** + * Transform characters that cause trouble in attribute values + */ + Formatter.prototype.escape = function (input) { + if (!input) { + return ''; + } + return input.replace(/"/g, "'").replace(//g, '>'); + }; + /** + * Generate a java-style package name for a rule + */ + Formatter.prototype.generateName = function (ruleName) { + if (!ruleName) { + return ''; + } + return 'org.tslint.' + ruleName.replace(/\s/g, ''); + }; + /** + * Generate an error element + */ + Formatter.prototype.testcaseXML = function (ruleFailure) { + var ruleName = this.generateName(ruleFailure.getRuleName()); + var message = this.escape(ruleFailure.getFailure()); + var startPosition = ruleFailure.getStartPosition(); + var _a = startPosition.getLineAndCharacter(), line = _a.line, character = _a.character; + var fileName = ruleFailure.getFileName(); + return ""; + }; + /** + * Generate a element without a closing tag + */ + Formatter.prototype.testsuiteStartXML = function (failures) { + return ""; + }; + /** + * Transform lint failure to JUnit XML format + */ + Formatter.prototype.format = function (failures) { + var _this = this; + var xml = []; + xml.push(''); + xml.push(''); + if (failures.length > 0) { + xml.push(this.testsuiteStartXML(failures)); + xml = xml.concat(failures.map(function (failure) { return _this.testcaseXML(failure); })); + xml.push(''); + } + xml.push(''); + return xml.join('\n'); + }; + return Formatter; +}(Lint.Formatters.AbstractFormatter)); +exports.Formatter = Formatter; \ No newline at end of file diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..f3aefa9 --- /dev/null +++ b/tslint.json @@ -0,0 +1,116 @@ +{ + "rulesDirectory": [ + "node_modules/codelyzer" + ], + "rules": { + "callable-types": true, + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "curly": true, + "eofline": true, + "forin": true, + "import-blacklist": [true, "rxjs"], + "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, + "static-before-instance", + "variables-before-functions" + ], + "no-arg": true, + "no-bitwise": true, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-construct": true, + "no-debugger": true, + "no-duplicate-variable": true, + "no-empty": false, + "no-empty-interface": true, + "no-eval": true, + "no-inferrable-types": true, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-string-throw": true, + "no-switch-case-fall-through": true, + "no-trailing-whitespace": 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": [ + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "typeof-compare": true, + "unified-signatures": true, + "variable-name": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ], + + "directive-selector": [true, "attribute", "malihu", "camelCase"], + "component-selector": [true, "element", "malihu", "kebab-case"], + "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, + "no-access-missing-member": true, + "templates-use-public": true, + "invoke-injectable": true + } +}