Initial (#1)

.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

.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

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
+<div malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
+   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
+</div>
+```
+
+### 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).

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
+    }
+  }
+}

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

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"
+    ]
+  }
+}

index.ts

@@ -0,0 +1 @@
+export * from './src/app/malihu-scrollbar';

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
+  });
+};