Merge pull request #7 from iamvijaydev/develop

Develop

Author: iamvijaydev

README.md

@@ -1,15 +1,21 @@
 ng Augment Native scroll [![npm version](https://badge.fury.io/js/ng-augment-native-scroll.svg)](https://badge.fury.io/js/ng-augment-native-scroll) [![Bower version](https://badge.fury.io/bo/ng-augment-native-scroll.svg)](https://badge.fury.io/bo/ng-augment-native-scroll)
 ========================
-_This is a angular (v1.x) port of the original experiments with [augment native scroll](https://github.com/iamvijaydev/augment-native-scroll)_
+This module aims to augment native scroll to provide few neat features. The features available as directives, are applied intelligently, based on the user device. Touch or non-touch. _This is a angular (v1.x) port of the original experiments with [augment native scroll](https://github.com/iamvijaydev/augment-native-scroll)._
 
-This module aims to provides few directives to augment native scroll:
+###Connect Scrolls
+It can connect two or more scrollable areas so that they all scroll as one. Wrap each scrollable area with `scrollArea` directive, then wrap them all with `connectScrolls` directive. `connectScrolls` connects scrollable areas within `scrollArea`. For non-touch devices it can also apply kinetic scrolling.
 
-* `connectScrolls` will connect scrolls within `scrollArea` so that they scroll synchronously. Meaning if one scrolls other will too. For non-touch devices it can also apply kinetic scroll. Here's an [example](https://iamvijaydev.github.io/ng-augment-native-scroll/examples/connectedScrolls.html).
-* `kineticScroll` will apply touch-device-like smooth and kinetic scroll to native scroll. You can (mouse) click-hold to drag the scroll and release-flick to auto-scroll just like a kinetic scroll on touch devices. Here's an [example](https://iamvijaydev.github.io/ng-augment-native-scroll/examples/kineticScroll.html).
+[Demo](https://iamvijaydev.github.io/ng-augment-native-scroll/examples/connectedScrolls.html)  |  [Usage](https://github.com/iamvijaydev/ng-augment-native-scroll/tree/develop#connectscroll-and-scrollarea-directive-usage)
+
+###Kinetic Scroll
+It will apply touch-device-like smooth and kinetic scroll to native scroll. You can (mouse) click-hold to drag the scroll and release-flick to auto-scroll just like a kinetic scroll on touch devices. Just wrap the scrollable area with `kineticScroll` directive.
+
+[Demo](https://iamvijaydev.github.io/ng-augment-native-scroll/examples/connectedScrolls.html)  |  [Usage](https://github.com/iamvijaydev/ng-augment-native-scroll/tree/develop#kineticscroll-directive-usage)
 
 **NOTE: Kinetic scroll with mouse events will be applied to non-touch devices only. It will NOT be applied on touch devices.**
 
 
+
 # Installation and usage
 ###Via yarn or npm:
 ```shell
@@ -22,9 +28,7 @@ $ npm install ng-augment-native-scroll --save
 Then use it as:
 ```javascript
 var angular = require('angular');
-angular.module('mainApp', [
-    require('ng-augment-native-scroll')
-]);
+angular.module('mainApp', [ require('ng-augment-native-scroll') ]);
 ```
 ###Via bower:
 ```
@@ -35,21 +39,22 @@ Then use it as:
 var angular = require('angular');
 var ngAugmentNativeScroll = require('./bower_components/ng-augment-native-scroll/src');
 
-angular.module('mainApp', ['ngAugmentNativeScroll']);
+angular.module('mainApp', ['ng-augment-native-scroll']);
 ```
-You can also use it in the old fashion way as:
+You can also include it in the old fashion way as:
 ```html
 <script src="/bower_components/ng-augment-native-scroll/dist/ngAugmentNativeScroll.js"></script>
 <!-- or -->
 <script src="/bower_components/ng-augment-native-scroll/dist/ngAugmentNativeScroll.min.js"></script>
 ```
 
 ###Direct use:
-Download the files as [zip](https://github.com/iamvijaydev/ng-augment-native-scroll/archive/v0.13.2.zip) or [tar.gz](https://github.com/iamvijaydev/ng-augment-native-scroll/archive/v0.13.2.tar.gz). Include it in your HTML file and use it in your script file as shown below:
-```
+Download the files as [zip](https://github.com/iamvijaydev/ng-augment-native-scroll/archive/v0.15.0.zip) or [tar.gz](https://github.com/iamvijaydev/ng-augment-native-scroll/archive/v0.15.0.tar.gz). Include it in your HTML file and use it in your script file as shown below:
+```html
 // template.html
-<script src="path/to/file" charset="utf-8"></script>
-
+<script src="<path-to-folder>/dist/ngAugmentNativeScroll.js" charset="utf-8"></script>
+```
+```javascript
 // main.js
 angular.module('mainApp', ['ng-augment-native-scroll']);
 ```

dist/ng-augment-native-scroll.js

@@ -1,29 +1,3 @@
-/*!
- * v0.14.1
- * 
- * MIT License
- * 
- * Copyright (c) 2017 Vijay Dev (http://vijaydev.com/)
- * 
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * 
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * 
- */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("angular"));
@@ -691,11 +665,12 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
 /* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
-function main () {
-    'use strict';
+"use strict";
 
-    var moduleName = 'ng-augment-native-scroll';
+
+function main () {
     var angular = __webpack_require__(6);
+    var moduleName = 'ng-augment-native-scroll';
 
     angular.module(moduleName, [])
         .factory('augNsUtils', __webpack_require__(1))

dist/ng-augment-native-scroll.min.js

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" ng-app="app">
+<html lang="en" ng-app="exampleApp">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,8 +8,8 @@
     <link rel="stylesheet" href="./css/styles.css">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700" rel="stylesheet">
 </head>
-<body>
-    <div ng-controller="ExampleApp.Controller">
+<body class="no-overflow">
+    <div ng-controller="connectScrollsExample">
         <connect-scrolls options="options">
             <scroll-area>
                 <div id="list" class="brand-scrollbar">
@@ -38,8 +38,6 @@
         </connect-scrolls>
         <span ng-include="'interact-methods.html'"></span>
     </div>
-    <script src="./lib/angular.stable.min.js" charset="utf-8"></script>
-    <script src="../dist/ng-augment-native-scroll.min.js" charset="utf-8"></script>
-    <script src="./scripts/connectScrollsExample.js" charset="utf-8"></script>
+    <script src="./scripts/exampleApp.bundle.js" charset="utf-8"></script>
 </body>
 </html>

dist/ng-augment-native-scroll.min.js.map

@@ -13,6 +13,9 @@ body {
     font-family: 'Roboto Condensed', sans-serif;
     position: relative;
     user-select: none;
+}
+
+.no-overflow {
     overflow: hidden;
 }
 
@@ -508,3 +511,160 @@ p {
 .form-input:focus {
     border: 1px solid #c876ff;
 }
+
+
+strong {
+    font-weight: 600;
+}
+
+.markdown-body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 16px;
+    line-height: 1.5;
+    word-wrap: break-word;
+    background-color: #fff;
+}
+
+.markdown-body p {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+.markdown-body>*:first-child {
+    margin-top: 0 !important;
+}
+
+.markdown-body h1 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+    padding-bottom: 0.3em;
+    font-size: 2em;
+    border-bottom: 1px solid #eee;
+}
+
+.markdown-body ul {
+    margin-top: 0;
+margin-bottom: 16px;
+    padding-left: 2em;
+}
+
+.markdown-body ul li {
+    display: list-item;
+    text-align: -webkit-match-parent;
+}
+
+.markdown-body code {
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    padding: 0;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(0,0,0,0.04);
+    border-radius: 3px;
+}
+
+.markdown-body h3 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+    font-size: 1.25em;
+}
+
+.markdown-body .highlight {
+    margin-bottom: 16px;
+}
+
+.markdown-body pre {
+    word-wrap: normal;
+    margin-top: 0;
+    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+.markdown-body .highlight pre, .markdown-body pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f7f7f7;
+    border-radius: 3px;
+}
+
+.markdown-body .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+}
+
+.markdown-body pre code, .markdown-body pre tt {
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+}
+
+.markdown-body pre>code {
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+}
+
+.pl-c {
+    color: #969896;
+}
+.pl-k {
+    color: #a71d5d;
+}
+.pl-c1, .pl-s .pl-v {
+    color: #0086b3;
+}
+.pl-s, .pl-pds, .pl-s .pl-pse .pl-s1, .pl-sr, .pl-sr .pl-cce, .pl-sr .pl-sre, .pl-sr .pl-sra {
+    color: #183691;
+}
+.pl-smi, .pl-s .pl-s1 {
+    color: #333;
+}
+.pl-e, .pl-en {
+    color: #795da3;
+}
+.pl-ent {
+    color: #63a35c;
+}
+
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.markdown-body table {
+    margin-top: 0;
+    margin-bottom: 16px;
+    display: block;
+    width: 100%;
+    overflow: auto;
+}
+
+.markdown-body table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+}
+
+.markdown-body table th, .markdown-body table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+}
+
+.markdown-body table th {
+    font-weight: 600;
+}

examples/connectedScrolls.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" ng-app="app">
+<html lang="en" ng-app="exampleApp">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,8 +8,8 @@
     <link rel="stylesheet" href="./css/styles.css">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700" rel="stylesheet">
 </head>
-<body>
-    <div ng-controller="ExampleApp.Controller">
+<body class="no-overflow">
+    <div ng-controller="kineticScrollExample">
         <kinetic-scroll options="options">
             <div id="table" class="alone brand-scrollbar">
                 <table>
@@ -28,8 +28,6 @@
         </kinetic-scroll>
         <span ng-include="'interact-methods.html'"></span>
     </div>
-    <script src="./lib/angular.stable.min.js" charset="utf-8"></script>
-    <script src="../dist/ng-augment-native-scroll.min.js" charset="utf-8"></script>
-    <script src="./scripts/kineticScrollExample.js" charset="utf-8"></script>
+    <script src="./scripts/exampleApp.bundle.js" charset="utf-8"></script>
 </body>
 </html>