react-custom-scroll - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

Gruntfile.js

@@ -6,3 +6,3 @@ 'use strict';
             main: {
-                src: ['src/**/*.rt.js']
+                src: ['src/**/*.rt.js', 'dist/**/*.*']
             }
@@ -32,3 +32,3 @@ },
                 ],
-                tasks:['sass']
+                tasks: ['sass']
             }
@@ -42,3 +42,3 @@ },
                 files: {
-                    'styles.css': 'src/main/main.scss'
+                    'example/styles.css': 'example/main.scss'
                 }
@@ -48,6 +48,29 @@ }
         reactTemplates: {
-            modules: 'amd',
-            format: 'stylish',
-            src: ['src/**/*.rt']
+            main: {
+                modules: 'commonjs',
+                format: 'stylish',
+                src: ['src/**/*.rt']
+            },
+            example: {
+                modules: 'amd',
+                format: 'stylish',
+                src: ['example/**/*.rt']
+            }
         }
+        //requirejs: {
+        //    compile: {
+        //        options: {
+        //            baseUrl: "./",
+        //            mainConfigFile: 'src/main/main.js',
+        //            include: ['src/main/customScroll/customScroll.js', 'src/main/customScroll/customScroll.rt.js'],
+        //            out: "dist/customScroll.min.js",
+        //            paths: {
+        //                jquery: 'empty:',
+        //                react: 'empty:',
+        //                lodash: 'empty:',
+        //                'react-dom': 'empty:'
+        //            }
+        //        }
+        //    }
+        //}
     });
@@ -59,6 +82,8 @@
     grunt.loadNpmTasks('grunt-contrib-sass');
+    //grunt.loadNpmTasks('grunt-contrib-requirejs');
     grunt.loadNpmTasks('grunt-eslint');
 
     grunt.registerTask('rt', ['react-templates']);
-    grunt.registerTask('default', ['eslint', 'clean', 'rt', 'sass']);
+    grunt.registerTask('rt', ['react-templates']);
+    grunt.registerTask('default', ['eslint', 'clean', 'rt', /*'requirejs', */'sass']);
     grunt.registerTask('test', []);
@@ -65,0 +90,0 @@

karma.conf.js

@@ -0,1 +1,2 @@
+'use strict';
 module.exports = function (config) {
@@ -15,6 +16,5 @@ config.set({
             'src/test/test-main.js',
-            {pattern: 'src/**/*.js', included: false},
-            {pattern: 'libs/**/*.js', included: false},
-            {pattern: 'node_modules/lodash-amd/**/*.js', included: false},
-            {pattern: 'node_modules/react/**/*.js', included: false}
+            {pattern: 'src/main/**/*.js', included: false},
+            {pattern: 'src/test/**/*.js', included: false},
+            {pattern: '*.css', included: false}
         ],
@@ -25,3 +25,3 @@
         exclude: [
-            'main.js'
+            'src/main/main.js'
         ],
@@ -28,0 +28,0 @@

package.json

 {
   "name": "react-custom-scroll",
-  "version": "0.1.1",
-  "description": "A cross-browser, designable custom scroll with react",
-  "keywords": [
-    "react",
-    "require",
-    "react-templates",
-    "react-component",
-    "scrollbar"
-  ],
+  "version": "1.0.0",
+  "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
+  "main": "index",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rt": "rt -m commonjs src/main/customScroll.rt -r --react-import-path react",
+    "rtex": "rt -m amd example/firstComp/firstComp.rt -r --react-import-path React",
+    "lint": "eslint .",
+    "start": "npm run lint && npm run rt && npm run rtex && webpack -p"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[e-mail]:rommguy/react-custom-scroll.git"
+  },
   "author": "Guy Romm",
-  "main": "main module",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/rommguy/react-custom-scroll/issues"
+  },
+  "homepage": "https://github.com/rommguy/react-custom-scroll#readme",
   "dependencies": {
-    "requirejs": "2.1.15",
-    "lodash-amd": "3.6.0"
+    "jquery": "^2.2.0",
+    "lodash": "^3.10.1",
+    "lodash-amd": "3.6.0",
+    "requirejs": "^2.1.22"
   },
   "devDependencies": {
-    "eslint": "0.18.0",
-    "eslint-plugin-react": "2.3.0",
+    "eslint": "^2.0.0",
+    "eslint-config-wix-editor": "^0.2.0",
+    "eslint-plugin-react": "^3.16.1",
     "grunt": "^0.4.5",
-    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-clean": "^0.7.0",
+    "grunt-contrib-sass": "^0.9.2",
     "grunt-contrib-watch": "^0.6.1",
-    "grunt-contrib-sass": "^0.9.2",
-    "grunt-eslint": "^13.0.0",
-    "grunt-react-templates": "^0.1.9"
+    "grunt-eslint": "^18.0.0",
+    "grunt-react-templates": "^0.4.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-templates": "^0.4.1",
+    "webpack": "^1.12.13"
   },
   "peerDependencies": {
-      "react": ">=0.13"
+    "react": "*",
+    "react-dom": "*"
   },
-  "repository": {
-    "type": "git",
-    "url": "[e-mail]:rommguy/React-Custom-Scroll.git"
-  }
-}
+  "keywords": [
+    "react",
+    "react-custom-scroll",
+    "react-component",
+    "customscroll",
+    "custom-scroll",
+    "ui component",
+    "ui",
+    "component"
+  ]
+}

README.md

@@ -5,3 +5,3 @@ # React-Custom-Scroll
 
-##### See a [working demo](http://rommguy.github.io/react-custom-scroll/demo.html) ###
+##### See a [working demo](http://rommguy.github.io/react-custom-scroll/example/demo.html) ###
 
@@ -17,7 +17,6 @@ ### Why do I need this ?
 
-```
+```html
 <customScroll>
   your content
 </customScroll>
-
 ```
@@ -28,10 +27,11 @@
 - allowOuterScroll : boolean, default false. Blocks outer scroll while scrolling the content
-- heightRelativetoParent : string, default undefined. Content height limit is relative to parent - the value should be the height limit.
+- heightRelativeToParent : string, default undefined. Content height limit is relative to parent - the value should be the height limit.
 - onScroll - function, default undefined. Listener that will be called on each scroll.
 - addScrolledClass - boolean, default false. If true, will add a css class 'content-scrolled' while being scrolled.
+- freezePosition - boolean, default false. When true, will prevent scrolling. 
 
-##### Example for heightRelativetoParent
+##### Example for heightRelativeToParent
 
-```
-<customScroll heightRelativetoParent="calc(100% - 20px)"">
+```html
+<customScroll heightRelativeToParent="calc(100% - 20px)">
   your content
@@ -44,2 +44,2 @@ </customScroll>
 - Check if you forgot to remove 'overflow' properties from the content root element.
-- Check if your height limit is relative to parent, and you didn't use heightRelativetoParent prop.
+- Check if your height limit is relative to parent, and you didn't use heightRelativeToParent prop.

src/test/customScroll.spec.js

@@ -1,7 +0,161 @@
-define(['react', 'customScroll/customScroll'], function (/*React, customScrollClass**/) {
+define(['React', 'ReactDOM', 'customScroll/customScroll'], function (React, reactDOM, customScrollClass) {
     'use strict';
 
     describe('custom scroll', function () {
+        var testUtils = React.addons.TestUtils;
 
+        function loadCSS(url, callback) {
+            var link = document.createElement('link');
+            link.type = 'text/css';
+            link.rel = 'stylesheet';
+            link.href = url;
+
+            document.getElementsByTagName('head')[0].appendChild(link);
+
+            var img = document.createElement('img');
+            img.onerror = function () {
+                if (callback) {
+                    callback(link);
+                }
+            };
+            img.src = url;
+        }
+
+        beforeEach(function (done) {
+            loadCSS('/base/styles.css', function (linkElm) {
+                this.link = linkElm;
+
+                this.customScrollContainer = document.createElement('div');
+                this.customScrollContainer.id = 'testScrollContainer';
+                document.body.appendChild(this.customScrollContainer);
+                done();
+            }.bind(this));
+        });
+
+        afterEach(function () {
+            document.body.removeChild(this.customScrollContainer);
+            var head = document.getElementsByTagName('head')[0];
+            head.removeChild(this.link);
+        });
+
+        function getCustomScroll(props) {
+            this.totalScrollHeight = 200;
+            this.visibleHeight = 100;
+            var scrolledContent = React.createElement('div', {
+                style: {
+                    height: this.totalScrollHeight,
+                    width: 50
+                }
+            });
+            var content = React.createElement('div', {
+                style: {
+                    maxHeight: this.visibleHeight,
+                    width: 50
+                }
+            }, scrolledContent);
+            return reactDOM.render(React.createElement(customScrollClass, props, content), this.customScrollContainer);
+        }
+
+        describe('general functionality', function () {
+            beforeEach(function () {
+                this.customScroll = getCustomScroll.call(this);
+                this.customScroll.forceUpdate();
+            });
+
+            describe('getScrollStyles', function () {
+                describe('when native scrollbar exists', function () {
+                    beforeEach(function () {
+                        this.nativeScrollWidth = 15;
+                        var innerContainer = {
+                            scrollTop: 0,
+                            offsetWidth: 0,
+                            clientWidth: 0
+                        };
+                        spyOn(this.customScroll, 'getScrolledElement').and.returnValue(innerContainer);
+
+                        innerContainer.clientWidth = 50;
+                        innerContainer.offsetWidth = innerContainer.clientWidth + this.nativeScrollWidth;
+                        this.customScroll.forceUpdate();
+                    });
+
+                    it('should position the inner container to the right with minus the size of the scrollbar', function () {
+                        var styles = this.customScroll.getScrollStyles();
+
+                        expect(styles.innerContainer.marginRight).toEqual(-1 * this.nativeScrollWidth);
+                    });
+                });
+
+                describe('when there is no native scrollbar (mac floating scrollbar)', function () {
+                    beforeEach(function () {
+                        var innerContainer = {
+                            scrollTop: 0,
+                            offsetWidth: 0,
+                            clientWidth: 0
+                        };
+                        spyOn(this.customScroll, 'getScrolledElement').and.returnValue(innerContainer);
+                        innerContainer.clientWidth = 50;
+                        innerContainer.offsetWidth = innerContainer.clientWidth;
+
+                        this.customScroll.forceUpdate();
+                    });
+
+                    it('should position the inner container to the right with minus 20 pixels', function () {
+                        var styles = this.customScroll.getScrollStyles();
+
+                        expect(styles.innerContainer.marginRight).toEqual(-20);
+                    });
+                });
+            });
+
+            describe('when scrolling content', function () {
+                it('should update scroll handle position', function () {
+                    var initialHandlePos = this.customScroll.getScrollHandleStyle().top;
+                    var contentContainerNode = this.customScroll.refs.innerContainer;
+
+                    contentContainerNode.scrollTop = this.totalScrollHeight / 4;
+                    testUtils.Simulate.scroll(contentContainerNode);
+
+                    var newHandlePos = this.customScroll.getScrollHandleStyle().top;
+
+                    expect(newHandlePos).toEqual(initialHandlePos + this.visibleHeight / 4);
+                });
+
+                it('should call onScroll callback from props if defined', function () {
+                    var propsOnScroll = jasmine.createSpy('onScroll');
+                    this.customScroll = getCustomScroll.call(this, {
+                        onScroll: propsOnScroll
+                    });
+                    this.customScroll.forceUpdate();
+                    var contentContainerNode = this.customScroll.refs.innerContainer;
+
+                    testUtils.Simulate.scroll(contentContainerNode);
+
+                    expect(propsOnScroll).toHaveBeenCalled();
+                });
+
+                describe('when allowOuterScroll prop us false or undefined', function () {
+                    it('should block wheel event from reaching outer container');
+                });
+
+                describe('when allowOuterScroll prop is true', function () {
+                    it('should not block wheel event');
+                });
+            });
+
+            describe('scroll handle size', function () {
+                it('should set the size of the handle relative to the scrollbar, in the same ratio as the content size to the visible area size');
+            });
+        });
+
+        describe('freeze position', function () {
+            beforeEach(function () {
+                this.customScroll = getCustomScroll.call(this, {
+                    freezePosition: true
+                });
+            });
+
+            it('should not scroll ');
+        });
     });
 });
+

src/test/test-main.js

@@ -13,14 +13,16 @@ (function () {
 
+    var cdnPrefix = 'https://';
+
     require.config({
-        baseUrl: '/base/src/main/',
+        baseUrl: '/base/src/main',
         paths: {
-            'lodash': '../../node_modules/lodash-amd/modern/main',
-            'react': '../../node_modules/react/dist/react-with-addons',
-            zepto: '../../libs/zepto/zepto.min',
-            definition: '../../js-libs/definition/definition'
+            lodash: cdnPrefix + 'cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min',
+            react: cdnPrefix + 'cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-with-addons',
+            'react-dom': cdnPrefix + 'cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom',
+            jquery: cdnPrefix + 'code.jquery.com/jquery-2.1.4.min'
         },
         shim: {
-            'lodash': { exports: '_' },
-            'zepto': { exports: '$' },
-            'react': { exports: 'React' }
+            lodash: {exports: '_'},
+            jquery: {exports: '$'},
+            react: {exports: 'React'}
         },
@@ -27,0 +29,0 @@ map: {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92428

increased by22.62%

Number of package files

32

increased by18.52%

Lines of code

2078

increased by34.85%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dependency count

6

increased by100%

Dev dependency count

13

increased by62.5%

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedjquery@^2.2.0

• + Addedlodash@^3.10.1

• + Addedjquery@2.2.4(transitive)

• + Addedlodash@3.10.1(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedrequirejs@2.3.7(transitive)

• + Addedscheduler@0.25.0(transitive)

• - Removedrequirejs@2.1.15(transitive)

• Updatedrequirejs@^2.1.22