From d4f40f7694dc8692ea028be9929b03bd885a977b Mon Sep 17 00:00:00 2001 From: GuyR Date: Fri, 1 Apr 2016 21:08:56 +0300 Subject: [PATCH] remove jQuery usage and dependency --- dist/reactCustomScroll.js | 2 +- example/main.js | 4 +--- package.json | 1 - src/main/customScroll.js | 17 ++++++++--------- src/test/test-main.js | 40 --------------------------------------- webpack.config.js | 3 +-- 6 files changed, 11 insertions(+), 56 deletions(-) delete mode 100644 src/test/test-main.js diff --git a/dist/reactCustomScroll.js b/dist/reactCustomScroll.js index 9953a30..b8dbf2d 100644 --- a/dist/reactCustomScroll.js +++ b/dist/reactCustomScroll.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("lodash"),require("ReactDOM"),require("jquery")):"function"==typeof define&&define.amd?define(["React","lodash","ReactDOM","jquery"],e):"object"==typeof exports?exports.ReactCustomScroll=e(require("React"),require("lodash"),require("ReactDOM"),require("jquery")):t.ReactCustomScroll=e(t.React,t.lodash,t.ReactDOM,t.jquery)}(this,function(t,e,o,r){return function(t){function e(r){if(o[r])return o[r].exports;var l=o[r]={exports:{},id:r,loaded:!1};return t[r].call(l.exports,l,l.exports,e),l.loaded=!0,l.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){t.exports=o(3)},function(e,o){e.exports=t},function(t,o){t.exports=e},function(t,e,o){"use strict";var r=o(4);t.exports={CustomScroll:r}},function(t,e,o){"use strict";function r(t,e,o){if(e=s.isUndefined(e)?t:e,o=s.isUndefined(o)?t:o,e>o)throw"min limit is greater than max limit";return e>t?e:t>o?o:t}var l=o(1),n=o(6),s=o(2),i=o(7),a=o(5);t.exports=l.createClass({displayName:"customScroll",propTypes:{allowOuterScroll:l.PropTypes.bool,heightRelativeToParent:l.PropTypes.string,onScroll:l.PropTypes.func,addScrolledClass:l.PropTypes.bool,freezePosition:l.PropTypes.bool,handleClass:l.PropTypes.string},getDefaultProps:function(){return{handleClass:"inner-handle"}},getInitialState:function(){return this.scrollbarYWidth=0,{scrollPos:0,onDrag:!1}},componentDidMount:function(){this.forceUpdate()},componentDidUpdate:function(t){var e=n.findDOMNode(this),o=e.getBoundingClientRect(),r=this.getScrolledElement(),l=r.scrollHeight;this.scrollbarYWidth=r.offsetWidth-r.clientWidth,this.visibleHeight=r.clientHeight,this.scrollRatio=l?this.visibleHeight/l:1,this.toggleScrollIfNeeded(l),this.position={top:o.top+i(window).scrollTop(),left:o.left+i(window).scrollLeft()},this.freezePosition(t)},componentWillUnmount:function(){i(document).off("mousemove",this.onHandleDrag),i(document).off("mouseup",this.onHandleDragEnd)},freezePosition:function(t){var e=this.getScrolledElement(),o=this.refs.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),t.freezePosition&&(e.scrollTop=this.state.scrollPos)},toggleScrollIfNeeded:function(t){var e=t-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())},getScrollTop:function(){return this.getScrolledElement().scrollTop},updateScrollPosition:function(t){var e=this.getScrolledElement();e.scrollTop=t,this.setState({scrollPos:t})},onCustomScrollClick:function(t){if(!this.isClickOnScrollHandle(t)){var e=this.calculateNewScrollHandleTop(t),o=this.getScrollValueFromHandlePosition(e);this.updateScrollPosition(o)}},isClickOnScrollHandle:function(t){var e=n.findDOMNode(this.refs.scrollHandle);return t.target===e||t.target.parentElement===e},calculateNewScrollHandleTop:function(t){var e,o=t.pageY-this.position.top,r=this.getScrollHandleStyle().top,l=o>r+this.scrollHandleHeight;return e=l?r+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):r-Math.max(this.scrollHandleHeight,0)},getScrollValueFromHandlePosition:function(t){return t/this.scrollRatio},getScrollHandleStyle:function(){var t=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:t}},adjustCustomScrollPosToContentPos:function(t){this.setState({scrollPos:t})},onScroll:function(t){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(t.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(t))},getScrolledElement:function(){return this.refs.innerContainer},onHandleMouseDown:function(t){this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=t.pageY,this.setState({onDrag:!0}),i(document).on("mousemove",this.onHandleDrag),i(document).on("mouseup",this.onHandleDragEnd)},onHandleDrag:function(t){var e=t.pageY-this.startDragMousePos,o=r(this.startDragHandlePos+e,0,this.visibleHeight-this.scrollHandleHeight),l=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(l)},onHandleDragEnd:function(){this.setState({onDrag:!1}),i(document).off("mousemove",this.onHandleDrag),i(document).off("mouseup",this.onHandleDragEnd)},blockOuterScroll:function(t){if(!this.props.allowOuterScroll){var e=t.currentTarget,o=t.currentTarget.scrollHeight,r=o-t.currentTarget.offsetHeight,l=t.deltaY%3?t.deltaY:10*t.deltaY;e.scrollTop+l<=0?(e.scrollTop=0,t.preventDefault()):e.scrollTop+l>=r&&(e.scrollTop=r,t.preventDefault()),t.stopPropagation()}},getInnerContainerClasses:function(){var t="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(t+=" content-scrolled"),t},getScrollStyles:function(){var t=this.scrollbarYWidth||20,e={marginRight:-1*t,height:this.props.heightRelativeToParent?"100%":""},o={marginRight:this.scrollbarYWidth?0:t,height:this.props.heightRelativeToParent?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return{innerContainer:e,contentWrapper:o}},getOuterContainerStyle:function(){return{height:this.props.heightRelativeToParent?"100%":""}},render:a})},function(t,e,o){"use strict";function r(){var t=this.getScrollStyles();return l.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:t.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},l.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:t.contentWrapper},"\n ",this.props.children,"\n "))}var l=o(1);o(2);t.exports=function(){return l.createElement("div",{className:"custom-scroll",style:{height:this.props.heightRelativeToParent}},l.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle()},this.hasScroll?l.createElement("div",{className:"custom-scrollbar "+(this.state.onDrag?"handleDrag":""),onClick:this.onCustomScrollClick,key:"scrollbar"},l.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:this.getScrollHandleStyle(),onMouseDown:this.onHandleMouseDown},l.createElement("div",{className:"inner-handle"}))):null,r.apply(this,[])))}},function(t,e){t.exports=o},function(t,e){t.exports=r}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("lodash"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","lodash","ReactDOM"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("React"),require("lodash"),require("ReactDOM")):e.ReactCustomScroll=t(e.React,e.lodash,e.ReactDOM)}(this,function(e,t,o){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(3)},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t,o){"use strict";var r=o(4);e.exports={CustomScroll:r}},function(e,t,o){"use strict";function r(e,t,o){if(t=s.isUndefined(t)?e:t,o=s.isUndefined(o)?e:o,t>o)throw"min limit is greater than max limit";return t>e?t:e>o?o:e}var n=o(1),l=o(6),s=o(2),i=o(5);e.exports=n.createClass({displayName:"customScroll",propTypes:{allowOuterScroll:n.PropTypes.bool,heightRelativeToParent:n.PropTypes.string,onScroll:n.PropTypes.func,addScrolledClass:n.PropTypes.bool,freezePosition:n.PropTypes.bool,handleClass:n.PropTypes.string},getDefaultProps:function(){return{handleClass:"inner-handle"}},getInitialState:function(){return this.scrollbarYWidth=0,{scrollPos:0,onDrag:!1}},componentDidMount:function(){this.forceUpdate()},componentDidUpdate:function(e){var t=l.findDOMNode(this),o=t.getBoundingClientRect(),r=this.getScrolledElement(),n=r.scrollHeight;this.scrollbarYWidth=r.offsetWidth-r.clientWidth,this.visibleHeight=r.clientHeight,this.scrollRatio=n?this.visibleHeight/n:1,this.toggleScrollIfNeeded(n),this.position={top:o.top+window.pageYOffset,left:o.left+window.pageXOffset},this.freezePosition(e)},componentWillUnmount:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},freezePosition:function(e){var t=this.getScrolledElement(),o=this.refs.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)},toggleScrollIfNeeded:function(e){var t=e-this.visibleHeight>1;this.hasScroll!==t&&(this.hasScroll=t,this.forceUpdate())},getScrollTop:function(){return this.getScrolledElement().scrollTop},updateScrollPosition:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})},onCustomScrollClick:function(e){if(!this.isClickOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}},isClickOnScrollHandle:function(e){var t=l.findDOMNode(this.refs.scrollHandle);return e.target===t||e.target.parentElement===t},calculateNewScrollHandleTop:function(e){var t,o=e.pageY-this.position.top,r=this.getScrollHandleStyle().top,n=o>r+this.scrollHandleHeight;return t=n?r+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):r-Math.max(this.scrollHandleHeight,0)},getScrollValueFromHandlePosition:function(e){return e/this.scrollRatio},getScrollHandleStyle:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}},adjustCustomScrollPosToContentPos:function(e){this.setState({scrollPos:e})},onScroll:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))},getScrolledElement:function(){return this.refs.innerContainer},onHandleMouseDown:function(e){this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd)},onHandleDrag:function(e){var t=e.pageY-this.startDragMousePos,o=r(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),n=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(n)},onHandleDragEnd:function(){this.setState({onDrag:!1}),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},blockOuterScroll:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,r=o-e.currentTarget.offsetHeight,n=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+n<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+n>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}},getInnerContainerClasses:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e},getScrollStyles:function(){var e=this.scrollbarYWidth||20,t={marginRight:-1*e,height:this.props.heightRelativeToParent?"100%":""},o={marginRight:this.scrollbarYWidth?0:e,height:this.props.heightRelativeToParent?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return{innerContainer:t,contentWrapper:o}},getOuterContainerStyle:function(){return{height:this.props.heightRelativeToParent?"100%":""}},render:i})},function(e,t,o){"use strict";function r(){var e=this.getScrollStyles();return n.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},n.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},"\n ",this.props.children,"\n "))}var n=o(1);o(2);e.exports=function(){return n.createElement("div",{className:"custom-scroll",style:{height:this.props.heightRelativeToParent}},n.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle()},this.hasScroll?n.createElement("div",{className:"custom-scrollbar "+(this.state.onDrag?"handleDrag":""),onClick:this.onCustomScrollClick,key:"scrollbar"},n.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:this.getScrollHandleStyle(),onMouseDown:this.onHandleMouseDown},n.createElement("div",{className:"inner-handle"}))):null,r.apply(this,[])))}},function(e,t){e.exports=o}])}); \ No newline at end of file diff --git a/example/main.js b/example/main.js index 126f30b..1caf93b 100644 --- a/example/main.js +++ b/example/main.js @@ -4,13 +4,11 @@ require.config({ lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min', React: 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.min', ReactDOM: 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min', - jquery: 'https://code.jquery.com/jquery-2.1.4.min', customScroll: '../dist/reactCustomScroll' }, shim: { lodash: {exports: '_'}, - React: {exports: 'React'}, - jquery: {exports: '$'} + React: {exports: 'React'} }, map: { '*': { diff --git a/package.json b/package.json index 9d41f91..8ceef0f 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ }, "homepage": "https://github.com/rommguy/react-custom-scroll#readme", "dependencies": { - "jquery": "^2.2.0", "lodash": "^3.10.1" }, "devDependencies": { diff --git a/src/main/customScroll.js b/src/main/customScroll.js index aad7230..cc666d5 100644 --- a/src/main/customScroll.js +++ b/src/main/customScroll.js @@ -2,7 +2,6 @@ var React = require('react'); var reactDOM = require('react-dom'); var _ = require('lodash'); -var $ = require('jquery'); var template = require('./customScroll.rt.js'); function ensureWithinLimits(value, min, max) { @@ -58,15 +57,15 @@ module.exports = React.createClass({ this.toggleScrollIfNeeded(contentHeight); this.position = { - top: boundingRect.top + $(window).scrollTop(), - left: boundingRect.left + $(window).scrollLeft() + top: boundingRect.top + window.pageYOffset, + left: boundingRect.left + window.pageXOffset }; this.freezePosition(prevProps); }, componentWillUnmount: function () { - $(document).off('mousemove', this.onHandleDrag); - $(document).off('mouseup', this.onHandleDragEnd); + document.removeEventListener('mousemove', this.onHandleDrag); + document.removeEventListener('mouseup', this.onHandleDragEnd); }, freezePosition: function (prevProps) { var innerContainer = this.getScrolledElement(); @@ -156,8 +155,8 @@ module.exports = React.createClass({ this.setState({ onDrag: true }); - $(document).on('mousemove', this.onHandleDrag); - $(document).on('mouseup', this.onHandleDragEnd); + document.addEventListener('mousemove', this.onHandleDrag); + document.addEventListener('mouseup', this.onHandleDragEnd); }, onHandleDrag: function (event) { var mouseDeltaY = event.pageY - this.startDragMousePos; @@ -169,8 +168,8 @@ module.exports = React.createClass({ this.setState({ onDrag: false }); - $(document).off('mousemove', this.onHandleDrag); - $(document).off('mouseup', this.onHandleDragEnd); + document.removeEventListener('mousemove', this.onHandleDrag); + document.removeEventListener('mouseup', this.onHandleDragEnd); }, blockOuterScroll: function (e) { if (this.props.allowOuterScroll) { diff --git a/src/test/test-main.js b/src/test/test-main.js deleted file mode 100644 index 60c2c24..0000000 --- a/src/test/test-main.js +++ /dev/null @@ -1,40 +0,0 @@ -(function () { - 'use strict'; - - var tests = []; - for (var file in window.__karma__.files) { - if (window.__karma__.files.hasOwnProperty(file)) { - if (/spec\.js$/i.test(file)) { - tests.push(file); - } - } - } - - var cdnPrefix = 'https://'; - - require.config({ - baseUrl: '/base/src/main', - paths: { - 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: '_'}, - jquery: {exports: '$'}, - react: {exports: 'React'} - }, - map: { - '*': { - 'react/addons': 'react' - } - }, - - // ask Require.js to load these files (all tests) - deps: tests, - - // start test run, once Require.js is done - callback: window.__karma__.start - }); -}()); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 2c3d106..8cfc181 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,7 +24,6 @@ module.exports = { externals: { react: 'React', 'react-dom': 'ReactDOM', - lodash: 'lodash', - jquery: 'jquery' + lodash: 'lodash' } }; \ No newline at end of file