├── .gitignore ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── Makefile ├── README.md ├── __tests__ └── hello_world.cjsx ├── component.webpack.config.js ├── component.webpack.min.config.js ├── dist ├── .gitignore ├── react-scrollview.js ├── react-scrollview.js.map ├── react-scrollview.min.js └── react-scrollview.min.js.map ├── fontcustom.yml ├── gulpfile.coffee ├── index.js ├── package.json ├── preprocessor.js ├── site.webpack.config.js ├── site.webpack.production.config.js ├── site ├── assets │ ├── fonts │ │ ├── fontcustom-preview.html │ │ ├── fontcustom_843a498d718455965cd8b0261bce3acb.eot │ │ ├── fontcustom_843a498d718455965cd8b0261bce3acb.svg │ │ ├── fontcustom_843a498d718455965cd8b0261bce3acb.ttf │ │ └── fontcustom_843a498d718455965cd8b0261bce3acb.woff │ └── index.html ├── public │ └── .gitignore ├── scripts │ ├── app.cjsx │ ├── index.cjsx │ ├── router.cjsx │ └── styleguide.cjsx └── styles │ ├── _base.scss │ ├── _elements.scss │ ├── _fontcustom.scss │ ├── _fontcustom_embedded.scss │ ├── _form.scss │ ├── _functions.scss │ ├── _mixins.scss │ ├── _table.scss │ ├── _typography.scss │ ├── _variables.scss │ ├── components │ └── _foundation_highlightjs.scss │ ├── icons │ ├── fontcustom │ │ └── templates │ │ │ └── .gitignore │ ├── home.svg │ └── search.svg │ └── main.scss └── src ├── AnimationLoop.coffee ├── EventBuffer.coffee ├── Events.coffee ├── Integrator.coffee ├── Lodash.coffee ├── ScrollView.cjsx ├── Simulation.coffee ├── Simulator.coffee ├── Simulators ├── FrictionSimulator.coffee ├── MomentumBounceSimulator.coffee └── SpringSimulator.coffee └── getPrefix.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Deployed apps should consider commenting this line out: 24 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git 25 | node_modules 26 | .sass-cache/ 27 | .fontcustom-manifest.json 28 | site/public/bundle.js 29 | site/public/bundle.js.map 30 | site/public/index.html 31 | site/public/main.css 32 | site/public/fonts/ 33 | site/public/main.css.map 34 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'sass' 4 | gem 'compass' 5 | gem 'breakpoint' 6 | gem 'normalize-scss' 7 | gem 'susy' 8 | gem 'modular-scale' 9 | gem 'sass-css-importer' 10 | gem 'fontcustom' 11 | gem 'sassy-buttons' 12 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | breakpoint (2.5.0) 5 | sass (~> 3.3) 6 | sassy-maps (< 1.0.0) 7 | celluloid (0.16.0) 8 | timers (~> 4.0.0) 9 | chunky_png (1.3.3) 10 | compass (1.0.1) 11 | chunky_png (~> 1.2) 12 | compass-core (~> 1.0.1) 13 | compass-import-once (~> 1.0.5) 14 | rb-fsevent (>= 0.9.3) 15 | rb-inotify (>= 0.9) 16 | sass (>= 3.3.13, < 3.5) 17 | compass-core (1.0.1) 18 | multi_json (~> 1.0) 19 | sass (>= 3.3.0, < 3.5) 20 | compass-import-once (1.0.5) 21 | sass (>= 3.2, < 3.5) 22 | ffi (1.9.6) 23 | fontcustom (1.3.7) 24 | json (~> 1.4) 25 | listen (>= 1.0, < 3.0) 26 | thor (~> 0.14) 27 | hitimes (1.2.2) 28 | json (1.8.1) 29 | listen (2.8.3) 30 | celluloid (>= 0.15.2) 31 | rb-fsevent (>= 0.9.3) 32 | rb-inotify (>= 0.9) 33 | modular-scale (2.0.5) 34 | compass (>= 0.12.0) 35 | multi_json (1.10.1) 36 | normalize-scss (3.0.2) 37 | compass-core (~> 1.0, >= 1.0.0) 38 | sass (~> 3.3, >= 3.3.0) 39 | rb-fsevent (0.9.4) 40 | rb-inotify (0.9.5) 41 | ffi (>= 0.5.0) 42 | sass (3.4.9) 43 | sass-css-importer (1.0.0.beta.0) 44 | sass (>= 3.1) 45 | sassy-buttons (0.2.6) 46 | compass (>= 0.12.2) 47 | sassy-maps (0.4.0) 48 | sass (~> 3.3) 49 | susy (2.1.3) 50 | sass (>= 3.3.0, < 3.5) 51 | thor (0.19.1) 52 | timers (4.0.1) 53 | hitimes 54 | 55 | PLATFORMS 56 | ruby 57 | 58 | DEPENDENCIES 59 | breakpoint 60 | compass 61 | fontcustom 62 | modular-scale 63 | normalize-scss 64 | sass 65 | sass-css-importer 66 | sassy-buttons 67 | susy 68 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Devin Abbott 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | BIN = ./node_modules/.bin 2 | 3 | # publish-gh-pages: 4 | # git checkout gh-pages 5 | # git merge master gh-pages 6 | # gulp build 7 | # git add --all . 8 | # git commit -m "New release" 9 | # git push origin gh-pages 10 | # git checkout master 11 | 12 | publish-gh-pages: 13 | git checkout master 14 | gulp build:site 15 | git subtree split --prefix site/public -b gh-pages 16 | git checkout gh-pages 17 | cp -r site/public/* . 18 | rm -r site 19 | git add --all . 20 | git commit -m "New release" 21 | git push -f origin gh-pages:gh-pages 22 | git checkout master 23 | git branch -D gh-pages 24 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React ScrollView 2 | ================ 3 | 4 | [Examples](http://dabbott.github.io/react-scrollview/) 5 | 6 | A ScrollView built in React, API-compatible with [react-native](https://facebook.github.io/react-native/docs/scrollview.html). 7 | 8 | *A work in progress - don't use in production yet!* 9 | 10 | ### Install 11 | 12 | ``` 13 | npm install react-scrollview 14 | ``` 15 | 16 | ### License 17 | 18 | MIT -------------------------------------------------------------------------------- /__tests__/hello_world.cjsx: -------------------------------------------------------------------------------- 1 | # @cjsx React.DOM 2 | 3 | # TODO make this work. 4 | 5 | jest.dontMock '../src/scripts/hello_world' 6 | 7 | describe 'HelloWorld', -> 8 | it 'should render an

with the text "Hello World!"', -> 9 | React = require 'react/addons' 10 | HelloWorld = require '../src/scripts/hello_world' 11 | TestUtils = React.addons.TestUtils 12 | 13 | # Render the HelloWorld component. 14 | helloWorld = 15 | TestUtils.renderIntoDocument(helloWorld) 16 | 17 | # Verify the

Hello World!

element was created. 18 | h1 = TestUtils.findRenderedDOMComponentWithTag(helloWorld, 'h1') 19 | expect(h1.getDOMNode().textContent).toEqual("Hello world!") 20 | -------------------------------------------------------------------------------- /component.webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: { 6 | app: [ 7 | './src/ScrollView' 8 | ], 9 | }, 10 | devtool: 'source-map', 11 | output: { 12 | path: path.join(__dirname, "dist"), 13 | filename: 'react-scrollview.js', 14 | library: 'ReactScrollView', 15 | libraryTarget: 'umd', 16 | }, 17 | resolveLoader: { 18 | modulesDirectories: ['..', 'node_modules'] 19 | }, 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | "process.env": { 23 | NODE_ENV: JSON.stringify("production") 24 | } 25 | }), 26 | new webpack.IgnorePlugin(/vertx/), 27 | new webpack.IgnorePlugin(/un~$/), 28 | new webpack.optimize.OccurenceOrderPlugin(), 29 | new webpack.optimize.DedupePlugin(), 30 | ], 31 | resolve: { 32 | extensions: ['', '.js', '.cjsx', '.coffee'] 33 | }, 34 | externals: { 35 | react: { 36 | commonjs: "react", 37 | commonjs2: "react", 38 | amd: "react", 39 | // React dep should be available as window.React, not window.react 40 | root: "React" 41 | } 42 | }, 43 | module: { 44 | loaders: [ 45 | { test: /\.cjsx$/, loaders: ['coffee', 'cjsx']}, 46 | { test: /\.coffee$/, loader: 'coffee' } 47 | ] 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /component.webpack.min.config.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | var path = require('path'); 3 | var webpack = require('webpack'); 4 | var base = require('./component.webpack.config.js'); 5 | 6 | var production = _.clone(base); 7 | 8 | production.plugins = production.plugins.slice(); 9 | production.plugins.push(new webpack.optimize.UglifyJsPlugin()); 10 | 11 | production.output = _.clone(production.output); 12 | production.output.filename = 'react-scrollview.min.js'; 13 | 14 | module.exports = production; 15 | -------------------------------------------------------------------------------- /dist/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabbott/react-scrollview/a70c1a3ec63e9b5d35065b4c81cc10e56a2cd214/dist/.gitignore -------------------------------------------------------------------------------- /dist/react-scrollview.min.js: -------------------------------------------------------------------------------- 1 | !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ReactScrollView=n(require("react")):t.ReactScrollView=n(t.React)}(this,function(t){return function(t){function n(o){if(e[o])return e[o].exports;var i=e[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var e={};return n.m=t,n.c=e,n.p="",n(0)}([function(t,n,e){t.exports=e(35)},function(t,n,e){function o(t){return i(t)?t:Object(t)}var i=e(4);t.exports=o},function(t,n,e){t.exports={defaults:e(71),extend:e(72),isFunction:e(31),filter:e(40)}},function(t,n,e){var o=e(26),i=e(5),r=e(6),s="[object Array]",u=Object.prototype,a=u.toString,c=o(Array,"isArray"),p=c||function(t){return r(t)&&i(t.length)&&a.call(t)==s};t.exports=p},function(t,n){function e(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}t.exports=e},function(t,n){function e(t){return"number"==typeof t&&t>-1&&t%1==0&&o>=t}var o=9007199254740991;t.exports=e},function(t,n){function e(t){return!!t&&"object"==typeof t}t.exports=e},function(t,n,e){var o=e(26),i=e(9),r=e(4),s=e(68),u=o(Object,"keys"),a=u?function(t){var n=null==t?void 0:t.constructor;return"function"==typeof n&&n.prototype===t||"function"!=typeof t&&i(t)?s(t):r(t)?u(t):[]}:s;t.exports=a},function(t,n){var e;t.exports=e=function(){function t(t){null==t&&(t={}),this._state={x:0,v:0},this.options=null,this.setup(t)}return t.prototype.setup=function(t){throw Error("Not implemented")},t.prototype.next=function(t){throw Error("Not implemented")},t.prototype.finished=function(){throw Error("Not implemented")},t.prototype.setState=function(t){return this._state={x:t.x,v:t.v}},t.prototype.getState=function(){var t;return t={x:this._state.x,v:this._state.v}},t.prototype.setOptions=function(t){var n,e,o;null==t&&(t={}),e=[];for(n in t)o=t[n],e.push(this.options[n]=o);return e},t}()},function(t,n,e){function o(t){return null!=t&&r(i(t))}var i=e(25),r=e(5);t.exports=o},function(t,n){function e(t,n){return t="number"==typeof t||o.test(t)?+t:-1,n=null==n?i:n,t>-1&&t%1==0&&n>t}var o=/^\d+$/,i=9007199254740991;t.exports=e},function(t,n){(function(n){"use strict";var e;t.exports=function(){return!e&&n.document&&(e=n.document.createElement("div")),e||(e={style:{}}),e}}).call(n,function(){return this}())},function(t,n,e){"use strict";var o,i,r=e(13),s=["ms","Moz","Webkit","O"],u=e(11);t.exports=function(t){if(void 0!==i)return i;o=o||u();for(var n,e,a=0,c=s.length;c>a;a++)if(e=s[a],n=e+r(t),"undefined"!=typeof o.style[n])return i=e;return i}},function(t,n){"use strict";t.exports=function(t){return t?t.charAt(0).toUpperCase()+t.slice(1):""}},function(t,n,e){var o,i,r,s=function(t,n){return function(){return t.apply(n,arguments)}},u=function(t,n){function e(){this.constructor=t}for(var o in n)a.call(n,o)&&(t[o]=n[o]);return e.prototype=n.prototype,t.prototype=new e,t.__super__=n.prototype,t},a={}.hasOwnProperty;i=e(19),r=window.performance?function(){return 1e3*window.performance.now()}:function(){return 1e3*Date.now()},t.exports=new(o=function(t){function n(){this.start=s(this.start,this),this.delta=1/60,this.raf=!0,this.start()}return u(n,t),n.prototype.start=function(){var t,n,e;return t=r(),e=function(n){return function(){var e,o;return n.delta?e=n.delta:(o=r(),e=(o-t)/1e3,t=o),n.emit("update",e),n.emit("render",e)}}(this),(n=function(t){return function(o){return t.raf?(e(),window.requestAnimationFrame(n)):window.setTimeout(function(){return e(),window.requestAnimationFrame(n)},0)}}(this))()},n}(i))},function(t,n){var e,o;e={},o=function(){return null===window.ontouchstart},o()?(e.TouchStart="touchstart",e.TouchEnd="touchend",e.TouchMove="touchmove"):(e.TouchStart="mousedown",e.TouchEnd="mouseup",e.TouchMove="mousemove"),e.Click=e.TouchEnd,e.MouseOver="mouseover",e.MouseOut="mouseout",e.MouseMove="mousemove",e.MouseWheel="mousewheel",e.AnimationStart="start",e.AnimationStop="stop",e.AnimationEnd="end",e.AnimationDidStart="start",e.AnimationDidStop="stop",e.AnimationDidEnd="end",e.Scroll="scroll",e.ImageLoaded="load",e.ImageLoadError="error",e.touchEvent=function(t){var n,e,o;return o=null!=(n=t.touches)?n[0]:void 0,null==o&&(o=null!=(e=t.changedTouches)?e[0]:void 0),null==o&&(o=t),o},t.exports=e},function(t,n,e){var o,i;i=e(2),t.exports=o=function(){function t(t){this._accelerationForState=t,i.isFunction(this._accelerationForState)||(console.warn("Integrator: an integrator must be constructed with an acceleration function"),this._accelerationForState=function(){return 0})}return t.prototype.integrateState=function(t,n){var e,o,i,r,s,u;return e=this._evaluateState(t),o=this._evaluateStateWithDerivative(t,.5*n,e),i=this._evaluateStateWithDerivative(t,.5*n,o),r=this._evaluateStateWithDerivative(t,n,i),u=1/6*(e.dx+2*(o.dx+i.dx)+r.dx),s=1/6*(e.dv+2*(o.dv+i.dv)+r.dv),t.x=t.x+u*n,t.v=t.v+s*n,t},t.prototype._evaluateState=function(t){var n;return n={},n.dx=t.v,n.dv=this._accelerationForState(t),n},t.prototype._evaluateStateWithDerivative=function(t,n,e){var o,i;return i={},i.x=t.x+e.dx*n,i.v=t.v+e.dv*n,o={},o.dx=i.v,o.dv=this._accelerationForState(i),o},t}()},function(t,n,e){var o,i,r,s,u=function(t,n){return function(){return t.apply(n,arguments)}},a=function(t,n){function e(){this.constructor=t}for(var o in n)c.call(n,o)&&(t[o]=n[o]);return e.prototype=n.prototype,t.prototype=new e,t.__super__=n.prototype,t},c={}.hasOwnProperty;s=e(2),r=e(8),i=e(16),t.exports=o=function(t){function n(){return this.finished=u(this.finished,this),n.__super__.constructor.apply(this,arguments)}var e;return a(n,t),n.DEFAULTS=e={friction:2,tolerance:.1},n.prototype.setup=function(t){return null==t&&(t={}),this.options=s.defaults(t,e,{velocity:0,position:0}),this._state={x:this.options.position,v:this.options.velocity},this._integrator=new i(function(t){return function(n){return-(t.options.friction*n.v)}}(this))},n.prototype.next=function(t){return this._state=this._integrator.integrateState(this._state,t),this._state},n.prototype.finished=function(){return Math.abs(this._state.v)i;i++)u[i]=o[i].fn;return u},i.prototype.emit=function(t,n,e,o,i,s){var u=r?r+t:t;if(!this._events||!this._events[u])return!1;var a,c,p=this._events[u],f=arguments.length;if("function"==typeof p.fn){switch(p.once&&this.removeListener(t,p.fn,void 0,!0),f){case 1:return p.fn.call(p.context),!0;case 2:return p.fn.call(p.context,n),!0;case 3:return p.fn.call(p.context,n,e),!0;case 4:return p.fn.call(p.context,n,e,o),!0;case 5:return p.fn.call(p.context,n,e,o,i),!0;case 6:return p.fn.call(p.context,n,e,o,i,s),!0}for(c=1,a=new Array(f-1);f>c;c++)a[c-1]=arguments[c];p.fn.apply(p.context,a)}else{var l,h=p.length;for(c=0;h>c;c++)switch(p[c].once&&this.removeListener(t,p[c].fn,void 0,!0),f){case 1:p[c].fn.call(p[c].context);break;case 2:p[c].fn.call(p[c].context,n);break;case 3:p[c].fn.call(p[c].context,n,e);break;default:if(!a)for(l=1,a=new Array(f-1);f>l;l++)a[l-1]=arguments[l];p[c].fn.apply(p[c].context,a)}}return!0},i.prototype.on=function(t,n,e){var i=new o(n,e||this),s=r?r+t:t;return this._events||(this._events=r?{}:Object.create(null)),this._events[s]?this._events[s].fn?this._events[s]=[this._events[s],i]:this._events[s].push(i):this._events[s]=i,this},i.prototype.once=function(t,n,e){var i=new o(n,e||this,!0),s=r?r+t:t;return this._events||(this._events=r?{}:Object.create(null)),this._events[s]?this._events[s].fn?this._events[s]=[this._events[s],i]:this._events[s].push(i):this._events[s]=i,this},i.prototype.removeListener=function(t,n,e,o){var i=r?r+t:t;if(!this._events||!this._events[i])return this;var s=this._events[i],u=[];if(n)if(s.fn)(s.fn!==n||o&&!s.once||e&&s.context!==e)&&u.push(s);else for(var a=0,c=s.length;c>a;a++)(s[a].fn!==n||o&&!s[a].once||e&&s[a].context!==e)&&u.push(s[a]);return u.length?this._events[i]=1===u.length?u[0]:u:delete this._events[i],this},i.prototype.removeAllListeners=function(t){return this._events?(t?delete this._events[r?r+t:t]:this._events=r?{}:Object.create(null),this):this},i.prototype.off=i.prototype.removeListener,i.prototype.addListener=i.prototype.on,i.prototype.setMaxListeners=function(){return this},i.prefixed=r,t.exports=i},function(t,n){function e(t,n){if("function"!=typeof t)throw new TypeError(o);return n=i(void 0===n?t.length-1:+n||0,0),function(){for(var e=arguments,o=-1,r=i(e.length-n,0),s=Array(r);++oo;)t=t[n[o++]];return o&&o==r?t:void 0}}var i=e(1);t.exports=o},function(t,n,e){function o(t,n,e,u,a,c){return t===n?!0:null==t||null==n||!r(t)&&!s(n)?t!==t&&n!==n:i(t,n,o,e,u,a,c)}var i=e(52),r=e(4),s=e(6);t.exports=o},function(t,n){function e(t){return function(n){return null==n?void 0:n[t]}}t.exports=e},function(t,n,e){function o(t,n,e){if("function"!=typeof t)return i;if(void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 3:return function(e,o,i){return t.call(n,e,o,i)};case 4:return function(e,o,i,r){return t.call(n,e,o,i,r)};case 5:return function(e,o,i,r,s){return t.call(n,e,o,i,r,s)}}return function(){return t.apply(n,arguments)}}var i=e(33);t.exports=o},function(t,n,e){var o=e(23),i=o("length");t.exports=i},function(t,n,e){function o(t,n){var e=null==t?void 0:t[n];return i(e)?e:void 0}var i=e(69);t.exports=o},function(t,n,e){function o(t,n){var e=typeof t;if("string"==e&&u.test(t)||"number"==e)return!0;if(i(t))return!1;var o=!s.test(t);return o||null!=n&&t in r(n)}var i=e(3),r=e(1),s=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\n\\]|\\.)*?\1)\]/,u=/^\w*$/;t.exports=o},function(t,n,e){function o(t){return t===t&&!i(t)}var i=e(4);t.exports=o},function(t,n,e){function o(t){if(r(t))return t;var n=[];return i(t).replace(s,function(t,e,o,i){n.push(o?i.replace(u,"$1"):e||t)}),n}var i=e(58),r=e(3),s=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\n\\]|\\.)*?)\2)\]/g,u=/\\(\\)?/g;t.exports=o},function(t,n,e){function o(t){return r(t)&&i(t)&&u.call(t,"callee")&&!a.call(t,"callee")}var i=e(9),r=e(6),s=Object.prototype,u=s.hasOwnProperty,a=s.propertyIsEnumerable;t.exports=o},function(t,n,e){function o(t){return i(t)&&u.call(t)==r}var i=e(4),r="[object Function]",s=Object.prototype,u=s.toString;t.exports=o},function(t,n,e){var o=e(44),i=e(45),r=e(59),s=r(function(t,n,e){return e?o(t,n,e):i(t,n)});t.exports=s},function(t,n){function e(t){return t}t.exports=e},function(t,n){"use strict";t.exports={alignItems:1,justifyContent:1,flex:1,flexFlow:1,flexGrow:1,flexShrink:1,flexBasis:1,flexDirection:1,flexWrap:1,alignContent:1,alignSelf:1,userSelect:1,transform:1,transition:1,transformOrigin:1,transformStyle:1,transitionProperty:1,transitionDuration:1,transitionTimingFunction:1,transitionDelay:1,borderImage:1,borderImageSlice:1,boxShadow:1,backgroundClip:1,backfaceVisibility:1,perspective:1,perspectiveOrigin:1,animation:1,animationDuration:1,animationName:1,animationDelay:1,animationDirection:1,animationIterationCount:1,animationTimingFunction:1,animationPlayState:1,animationFillMode:1,appearance:1}},function(t,n,e){var o,i,r,s,u,a,c,p,f,l=function(t,n){return function(){return t.apply(n,arguments)}},h=function(t,n){function e(){this.constructor=t}for(var o in n)v.call(n,o)&&(t[o]=n[o]);return e.prototype=n.prototype,t.prototype=new e,t.__super__=n.prototype,t},v={}.hasOwnProperty;s=e(84),c=e(2),a=e(37),i=e(36),r=e(15),o=e(14),f=e(81),p=function(t){var n,e,o;return e=t.x+"px",o=t.y+"px",n={transform:"translate3d("+e+","+o+",0)"}},t.exports=u=function(t){function n(t){this._stopSimulation=l(this._stopSimulation,this),this._onSimulationStop=l(this._onSimulationStop,this),this._onSimulationStep=l(this._onSimulationStep,this),this.getVelocity=l(this.getVelocity,this),this.isBeyondConstraints=l(this.isBeyondConstraints,this),this.getConstraintsOffset=l(this.getConstraintsOffset,this),this._constrainPosition=l(this._constrainPosition,this),this._calculateConstraints=l(this._calculateConstraints,this),this._clampAndScale=l(this._clampAndScale,this),this._clamp=l(this._clamp,this),this._stopRecordingMotion=l(this._stopRecordingMotion,this),this._continueRecordingMotion=l(this._continueRecordingMotion,this),this._startRecordingMotion=l(this._startRecordingMotion,this),this._onMouseUp=l(this._onMouseUp,this),this._onMouseMove=l(this._onMouseMove,this),this._onMouseDown=l(this._onMouseDown,this),this._normalizeMouseEvent=l(this._normalizeMouseEvent,this),this.componentDidUpdate=l(this.componentDidUpdate,this),this.componentDidMount=l(this.componentDidMount,this),this._updateContentOffset=l(this._updateContentOffset,this),this.state={offset:{x:0,y:0}},this._eventBuffer=new i,this.overdragScale=.5,this.overdrag=!0,this.bounce=!0,this.speedX=1,this.speedY=1,this.momentum=!0,this.momentumOptions={friction:2.1,tolerance:1},this.bounceOptions={friction:40,tension:200,tolerance:1},this.directionLock=!1,this.directionLockThreshold={x:10,y:10},this.velocityTimeout=100,this.momentumVelocityMultiplier=890,n.__super__.constructor.call(this,t)}var e;return h(n,t),n.defaultProps={className:"",style:{},contentContainerStyle:{},horizontal:!1,keyboardDismissMode:"none",onScroll:function(){},removeClippedSubviews:!1,showsHorizontalScrollIndicator:!1,showsVerticalScrollIndicator:!1},n.propTypes={},n.prototype._updateContentOffset=function(){},n.prototype.componentDidMount=function(){return this._setupSimulation()},n.prototype.componentDidUpdate=function(){},n.prototype._normalizeMouseEvent=function(t){return t.stopPropagation(),t.preventDefault(),r.touchEvent(t)},n.prototype._onMouseDown=function(t){return"mousedown"!==r.TouchStart||1===t.nativeEvent.which?(t=this._normalizeMouseEvent(t),this._startRecordingMotion(t),document.addEventListener(r.TouchMove,this._onMouseMove),document.addEventListener(r.TouchEnd,this._onMouseUp)):void 0},n.prototype._onMouseMove=function(t){return t=this._normalizeMouseEvent(t),this._continueRecordingMotion(t)},n.prototype._onMouseUp=function(t){return t=this._normalizeMouseEvent(t),this._stopRecordingMotion(t),document.removeEventListener(r.TouchMove,this._onMouseMove),document.removeEventListener(r.TouchEnd,this._onMouseUp)},n.prototype._startRecordingMotion=function(t){return this._stopSimulation(),this._eventBuffer.push({x:t.clientX,y:t.clientY,t:Date.now()}),this._correctedLayerStartPoint=this.state.offset,this.bounce&&(this._correctedLayerStartPoint=this._constrainPosition(this._correctedLayerStartPoint,1/this.overdragScale)),this._cursorStartPoint={x:t.clientX,y:t.clientY},this._layerCursorOffset={x:t.clientX-this._correctedLayerStartPoint.x,y:t.clientY-this._correctedLayerStartPoint.y}},n.prototype._continueRecordingMotion=function(t){var n,e;return this._eventBuffer.push({x:t.clientX,y:t.clientY,t:Date.now()}),n={x:t.clientX-this._correctedLayerStartPoint.x-this._layerCursorOffset.x,y:t.clientY-this._correctedLayerStartPoint.y-this._layerCursorOffset.y},e={x:this._correctedLayerStartPoint.x+n.x,y:this._correctedLayerStartPoint.y+n.y},e=this._constrainPosition(e,this.overdragScale),this.setState({offset:e})},n.prototype._stopRecordingMotion=function(t){return this._startSimulation()},n.prototype._clamp=function(t,n,e){return n>t&&(t=n),t>e&&(t=e),t},n.prototype._clampAndScale=function(t,n,e,o){return n>t&&(t=n+(t-n)*o),t>e&&(t=e+(t-e)*o),t},n.prototype._calculateConstraints=function(){var t,n,e;return e=s.findDOMNode(this.refs.scroll),n=s.findDOMNode(this.refs.content),t={minX:-(n.offsetWidth-e.clientWidth),maxX:0,minY:-(n.offsetHeight-e.clientHeight),maxY:0}},n.prototype._constrainPosition=function(t,n){var e,o,i,r,s,u;return u=this._calculateConstraints(),i=u.minX,e=u.maxX,r=u.minY,o=u.maxY,s=this.overdrag?{x:this._clampAndScale(t.x,i,e,n),y:this._clampAndScale(t.y,r,o,n)}:{x:this._clamp(t.x,i,e),y:this._clamp(t.y,r,o)}},n.prototype.getConstraintsOffset=function(){var t,n,e,o,i,r,s,u;return u=this._calculateConstraints(),o=u.minX,n=u.maxX,i=u.minY,e=u.maxY,s=this.state.offset,t={x:this._clamp(s.x,o,n),y:this._clamp(s.y,i,e)},r={x:s.x-t.x,y:s.y-t.y}},n.prototype.isBeyondConstraints=function(){var t;return t=this.getConstraintsOffset(),0!==t.x?!0:0!==t.y?!0:!1},n.prototype.getVelocity=function(){return this.isAnimating?this._calculateSimulationVelocity():this._eventBuffer.getVelocity()},n.prototype._setupSimulation=function(){return this._simulation?void 0:(this._simulation={x:this._setupSimulationForAxis("x"),y:this._setupSimulationForAxis("y")},this._updateSimulationConstraints())},n.prototype._setupSimulationForAxis=function(t){var n;return n=new a({layer:this.layer,model:"inertial-scroll",modelOptions:{momentum:this.momentumOptions,bounce:this.bounceOptions}}),n.on(r.SimulationStep,function(n){return function(e){return n._onSimulationStep(t,e)}}(this)),n.on(r.SimulationStop,function(n){return function(e){return n._onSimulationStop(t,e)}}(this)),n},n.prototype._updateSimulationConstraints=function(){var t,n,e,o,i;if(this._simulation)return i=this._calculateConstraints(),e=i.minX,t=i.maxX,o=i.minY,n=i.maxY,this._simulation.x.simulator.options={min:e,max:t},this._simulation.y.simulator.options={min:o,max:n}},n.prototype._onSimulationStep=function(t,n){var e,o,i,r,s,u,a;return this.bounce?e=n.x-this.state.offset[t]:(u=this._calculateConstraints(this._constraints),r=u.minX,o=u.maxX,s=u.minY,i=u.maxY,"x"===t&&(e=Utils.clamp(n.x,r,o)-this.state.offset[t]),"y"===t&&(e=Utils.clamp(n.x,s,i)-this.state.offset[t])),a=this.state.offset,"x"===t&&(a[t]=a[t]+e*this.speedX),"y"===t&&(a[t]=a[t]+e*this.speedY),this.state.offset[t]=a[t],this.setState({offset:this.state.offset})},n.prototype._onSimulationStop=function(t,n){return this._simulation&&this._simulation.x.finished()&&this._simulation.y.finished()?this._stopSimulation():void 0},n.prototype._startSimulation=function(){var t,n,e,o,i,r,s,u,a,c;if((this.momentum||this.bounce)&&!(this.isBeyondConstraints()===!1&&this.momentum===!1||this.isBeyondConstraints()===!1&&this.isDragging===!1||(i=this._calculateConstraints(),e=i.minX,t=i.maxX,o=i.minY,n=i.maxY,r=this.overdrag===!0||this.state.offset.x>e&&this.state.offset.xo&&this.state.offset.yt}}(this))},t.prototype.getAngle=function(){var t,n,e;return t=this.getEvents(),t.length<2?0:(n=t[0],e=t[1],180*Math.atan2(e.y-n.y,e.x-n.x)/Math.PI)},t.prototype.getVelocity=function(){var t,n,e,o,i;return n=this.getEvents(),n.length<2?{x:0,y:0}:(t=n[n.length-1],e=n[0],o=t.t-e.t,i={x:(t.x-e.x)/o,y:(t.y-e.y)/o},i.x===1/0&&(i.x=0),i.y===1/0&&(i.y=0),i)},t}()},function(t,n,e){var o,i,r,s,u,a,c,p,f,l=function(t,n){return function(){return t.apply(n,arguments)}},h=function(t,n){function e(){this.constructor=t}for(var o in n)v.call(n,o)&&(t[o]=n[o]);return e.prototype=n.prototype,t.prototype=new e,t.__super__=n.prototype,t},v={}.hasOwnProperty;f=e(2),r=e(15),i=e(19),p=e(18),s=e(17),u=e(38),o=e(14),r.SimulationStart="simulationStart",r.SimulationStep="simulationStep",r.SimulationStop="simulationStop",c={spring:p,friction:s,"inertial-scroll":u},t.exports=a=function(t){function n(t){var e;null==t&&(t={}),this._update=l(this._update,this),this._start=l(this._start,this),this.start=l(this.start,this),n.__super__.constructor.call(this,t),this.options=f.defaults(t,{model:"spring",modelOptions:{},debug:!1}),this._running=!1,e=c[this.options.model]||p,this._simulator=new e(this.options.modelOptions)}return h(n,t),n.prototype.start=function(){return this.options.debug&&console.log("Simulation.start "+this._simulator.constructor.name,this.options.modelOptions),this._start(),!0},n.prototype.stop=function(t){return null==t&&(t=!0),this._running?(this._running=!1,t&&this.emit(r.SimulationStop),o.off("update",this._update)):void 0},n.prototype._start=function(){return this._running?void 0:(this._running=!0,this.emit(r.SimulationStart),o.on("update",this._update))},n.prototype._update=function(t){var n,e;return this._simulator.finished()?(this.stop(n=!1),this.emit("end"),this.emit(r.SimulationStop)):(e=this._simulator.next(t),this.emit(r.SimulationStep,e,t))},Object.defineProperties(n.prototype,{simulator:{get:function(){return this._simulator}}}),n.prototype.finished=function(){return this._simulator.finished()},n}(i)},function(t,n,e){var o,i,r,s,u,a=function(t,n){return function(){return t.apply(n,arguments)}},c=function(t,n){function e(){this.constructor=t}for(var o in n)p.call(n,o)&&(t[o]=n[o]);return e.prototype=n.prototype,t.prototype=new e,t.__super__=n.prototype,t},p={}.hasOwnProperty;u=e(2),r=e(8),s=e(18),o=e(17),t.exports=i=function(t){function n(){return this.finished=a(this.finished,this),n.__super__.constructor.apply(this,arguments)}var e;return c(n,t),n.DEFAULTS=e={momentum:{friction:2,tolerance:10},bounce:{tension:500,friction:10,tolerance:1}},n.prototype.setup=function(t){return this.options=u.defaults(t,e,{velocity:0,position:0,min:0,max:0}),this._frictionSimulator=new o({friction:this.options.momentum.friction,tolerance:this.options.momentum.tolerance,velocity:this.options.velocity,position:this.options.position}),this._springSimulator=new s({tension:this.options.bounce.tension,friction:this.options.bounce.friction,tolerance:this.options.bounce.tolerance,velocity:this.options.velocity,position:this.options.position}),this._state={x:this.options.position,v:this.options.velocity},this._useSpring=!1},n.prototype.next=function(t){return this._useSpring?this._state=this._springSimulator.next(t):(this._state=this._frictionSimulator.next(t),this._tryTransitionToSpring(this._state)),this._state},n.prototype.finished=function(){return this._useSpring?this._springSimulator.finished():this._frictionSimulator.finished()},n.prototype.setState=function(t){var n;return this._state={x:t.x,v:t.v},this._frictionSimulator.setState(this._state),this._isValidState()?this._tryTransitionToSpring():(this._state.x<=this.options.min&&(n=this.options.min),this._state.x>=this.options.max&&(n=this.options.max),this._transitionToSpring(n))},n.prototype._tryTransitionToSpring=function(t){var n,e,o;return e=this._state.xthis.options.max&&this._state.v>=0,e||n?(e&&(o=this.options.min),n&&(o=this.options.max),this._transitionToSpring(o)):this._useSpring=!1},n.prototype._transitionToSpring=function(t){return this._useSpring=!0,this._springSimulator.options.offset=t,this._springSimulator.setState(this._state)},n.prototype._isValidState=function(){var t,n,e,o,i,r;return n=this._state.x0,t=this._state.x>this.options.max&&this._state.v<0,o=!1,n?(e=this.options.min,o=!0):t&&(e=this.options.max,o=!0),o?(i=this._frictionSimulator.options.friction,r=1-i*(e-this._state.x)/this._state.v,r>0):!0},n}(r)},function(t,n){function e(t){var n=t?t.length:0;return n?t[n-1]:void 0}t.exports=e},function(t,n,e){function o(t,n,e){var o=u(t)?i:s;return n=r(n,e,3),o(t,n)}var i=e(41),r=e(46),s=e(49),u=e(3);t.exports=o},function(t,n){function e(t,n){for(var e=-1,o=t.length,i=-1,r=[];++en&&(n=-n>i?0:i+n),e=void 0===e||e>i?i:+e||0,0>e&&(e+=i),i=n>e?0:e-n>>>0,n>>>=0;for(var r=Array(i);++o2?e[s-2]:void 0,a=s>2?e[2]:void 0,c=s>1?e[s-1]:void 0;for("function"==typeof u?(u=i(u,c,5),s-=2):(u="function"==typeof c?c:void 0,s-=u?1:0),a&&r(e[0],e[1],a)&&(u=3>s?void 0:u,s=1);++oc))return!1;for(;++a0;++o. 5 | # --------------------------------------------------------------------------- # 6 | 7 | font_name: fontcustom 8 | css_selector: .icon-{{glyph}} 9 | preprocessor_path: "" 10 | autowidth: true 11 | no_hash: false 12 | force: false 13 | debug: false 14 | quiet: false 15 | 16 | 17 | # --------------------------------------------------------------------------- # 18 | # Input Paths 19 | # --------------------------------------------------------------------------- # 20 | 21 | input: 22 | vectors: src/styles/icons/ # required 23 | templates: src/styles/icons/fontcustom/templates 24 | 25 | 26 | # --------------------------------------------------------------------------- # 27 | # Output Paths 28 | # --------------------------------------------------------------------------- # 29 | 30 | output: 31 | fonts: assets/fonts # required 32 | css: src/styles/ 33 | 34 | 35 | # --------------------------------------------------------------------------- # 36 | # Templates 37 | # Included in Font Custom: preview, css, scss, scss-rails 38 | # Custom templates should be saved in the INPUT[:templates] directory and 39 | # referenced by their baserame. 40 | # --------------------------------------------------------------------------- # 41 | 42 | templates: 43 | - scss 44 | - preview 45 | -------------------------------------------------------------------------------- /gulpfile.coffee: -------------------------------------------------------------------------------- 1 | gulp = require 'gulp' 2 | gutil = require 'gulp-util' 3 | webpack = require("webpack") 4 | WebpackDevServer = require("webpack-dev-server") 5 | componentWebpackConfig = require("./component.webpack.config.js") 6 | componentWebpackMinConfig = require("./component.webpack.min.config.js") 7 | siteWebpackConfig = require("./site.webpack.config.js") 8 | siteWebpackProductionConfig = require("./site.webpack.production.config.js") 9 | map = require 'map-stream' 10 | touch = require 'touch' 11 | _ = require 'underscore' 12 | 13 | # Load plugins 14 | $ = require('gulp-load-plugins')() 15 | 16 | ### Site ### 17 | 18 | # CSS 19 | gulp.task('site:css', -> 20 | gulp.src(['site/styles/*.sass', 'site/styles/*.scss']) 21 | .pipe($.compass({ 22 | css: 'site/public/' 23 | sass: 'site/styles' 24 | image: 'site/styles/images' 25 | style: 'nested' 26 | comments: false 27 | bundle_exec: true 28 | time: true 29 | require: [ 30 | 'susy', 31 | 'modular-scale', 32 | 'normalize-scss', 33 | 'sass-css-importer', 34 | 'sassy-buttons', 35 | 'breakpoint'] 36 | })) 37 | .on('error', (err) -> 38 | gutil.log err 39 | ) 40 | .pipe($.size()) 41 | .pipe(gulp.dest('site/public/')) 42 | .pipe(map((a, cb) -> 43 | if siteDevServer.invalidate? then siteDevServer.invalidate() 44 | cb() 45 | )) 46 | ) 47 | 48 | gulp.task('site:copy-assets', -> 49 | gulp.src('site/assets/**') 50 | .pipe(gulp.dest('site/public')) 51 | .pipe($.size()) 52 | ) 53 | 54 | # Some quick notes on using fontcustom. 55 | # First you need to install some additional software 56 | # as detailed at https://github.com/FontCustom/fontcustom#installation 57 | # On MacOSX, this comment was the only way I got things to work: https://github.com/FontCustom/fontcustom/issues/209#issuecomment-48014939 58 | # Otherwise I got a Python import error. 59 | # 60 | # Then once things are working, things here are setup so that the generated font 61 | # is base64 encoded and included in the css file. For this to work, you 62 | # need to edit the generated scss file at src/styles/_fontcustom.scss to remove 63 | # its font-face imports. 64 | # Font compilation 65 | gulp.task('site:font', $.shell.task([ 66 | 'fontcustom compile' 67 | ])) 68 | 69 | gulp.task('site:font-base-64', -> 70 | gulp.src('site/assets/fonts/*.ttf') 71 | .pipe($.rename('fontcustom.ttf')) 72 | .pipe($.cssfont64()) 73 | .pipe($.rename('_fontcustom_embedded.scss')) 74 | .pipe(gulp.dest('site/styles/')) 75 | ) 76 | 77 | gulp.task "site:webpack:build", ['site:css'], (callback) -> 78 | # Run webpack. 79 | webpack siteWebpackProductionConfig, (err, stats) -> 80 | throw new gutil.PluginError("webpack:build", err) if err 81 | gutil.log "[webpack:build]", stats.toString(colors: true) 82 | callback() 83 | return 84 | 85 | 86 | # Create a single instance of the compiler to allow caching. 87 | siteDevCompiler = webpack(siteWebpackConfig) 88 | gulp.task "site:webpack:build-dev", ['site:css'], (callback) -> 89 | 90 | # Run webpack. 91 | siteDevCompiler.run (err, stats) -> 92 | throw new gutil.PluginError("webpack:build-dev", err) if err 93 | gutil.log "[webpack:build-dev]", stats.toString(colors: true) 94 | callback() 95 | return 96 | 97 | return 98 | 99 | siteDevServer = {} 100 | gulp.task "site:webpack-dev-server", ['site:css'], (callback) -> 101 | # Ensure there's a `./site/public/main.css` file that can be required. 102 | touch.sync('./site/public/main.css', time: new Date(0)) 103 | 104 | # Start a webpack-dev-server. 105 | siteDevServer = new WebpackDevServer(webpack(siteWebpackConfig), 106 | contentBase: './site/public/' 107 | hot: true 108 | watchOptions: 109 | aggregateTimeout: 100 110 | poll: 300 111 | noInfo: true 112 | ) 113 | siteDevServer.listen 8080, "0.0.0.0", (err) -> 114 | throw new gutil.PluginError("webpack-dev-server", err) if err 115 | gutil.log "[webpack-dev-server]", "http://localhost:8080" 116 | callback() 117 | 118 | return 119 | 120 | gulp.task 'build:site', ['site:webpack:build', 'site:copy-assets'] 121 | 122 | gulp.task 'watch:site', ['site:css', 'site:copy-assets', 'site:webpack-dev-server'], -> 123 | gulp.watch(['site/styles/**'], ['site:css']) 124 | gulp.watch(['site/assets/**'], ['site:copy-assets']) 125 | 126 | ### Component ### 127 | 128 | gulp.task "component:webpack:build-dev", (callback) -> 129 | webpack componentWebpackConfig, (err, stats) -> 130 | throw new gutil.PluginError("component:webpack:build-dev", err) if err 131 | gutil.log "[component:webpack:build-dev]", stats.toString(colors: true) 132 | callback() 133 | 134 | gulp.task "component:webpack:build-min", (callback) -> 135 | webpack componentWebpackMinConfig, (err, stats) -> 136 | throw new gutil.PluginError("component:webpack:build-min", err) if err 137 | gutil.log "[component:webpack:build-min]", stats.toString(colors: true) 138 | callback() 139 | 140 | gulp.task 'build:component', ['component:webpack:build-min', 'component:webpack:build-dev'] 141 | 142 | gulp.task 'default', -> 143 | gulp.start 'watch:site' 144 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/ScrollView'); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-scrollview", 3 | "description": "React ScrollView for web and mobile web, API-compatible with react-native", 4 | "version": "0.0.3", 5 | "main": "index.js", 6 | "author": "Devin Abbott", 7 | "bugs": "https://github.com/dabbott/react-scrollview/issues", 8 | "dependencies": { 9 | "eventemitter3": "^1.1.1", 10 | "lodash": "^3.10.1", 11 | "react-style-normalizer": "^1.2.8" 12 | }, 13 | "devDependencies": { 14 | "cjsx-loader": "^1.3.0", 15 | "coffee-loader": "^0.7.2", 16 | "coffee-react-transform": "^2.4.0", 17 | "coffee-script": "^1.9.1", 18 | "css-loader": "^0.9.1", 19 | "gulp": "^3.8.11", 20 | "gulp-compass": "^2.0.3", 21 | "gulp-cssfont64": "0.0.1", 22 | "gulp-load-plugins": "^0.8.1", 23 | "gulp-rename": "^1.2.0", 24 | "gulp-shell": "^0.3.0", 25 | "gulp-size": "^1.2.1", 26 | "gulp-util": "^3.0.4", 27 | "highlight.js": "^8.4.0", 28 | "jest-cli": "^0.4.0", 29 | "map-stream": "0.0.5", 30 | "merge-defaults": "^0.2.1", 31 | "react": "^0.13.3", 32 | "react-hot-loader": "^1.1.7", 33 | "react-retina-image": "^1.1.2", 34 | "react-router": "^0.13.3", 35 | "style-loader": "^0.8.3", 36 | "touch": "0.0.3", 37 | "underscore": "^1.8.2", 38 | "webpack": "^1.7.2", 39 | "webpack-dev-server": "^1.7.0" 40 | }, 41 | "homepage": "https://github.com/dabbott/react-scrollview", 42 | "jest": { 43 | "scriptPreprocessor": "/preprocessor.js", 44 | "unmockedModulePathPatterns": [ 45 | "/node_modules/react" 46 | ], 47 | "testFileExtensions": [ 48 | "coffee", 49 | "js", 50 | "cjsx" 51 | ], 52 | "moduleFileExtensions": [ 53 | "js", 54 | "json", 55 | "coffee", 56 | "cjsx" 57 | ] 58 | }, 59 | "keywords": [ 60 | "react-component", 61 | "react", 62 | "scroll", 63 | "scrollview" 64 | ], 65 | "license": "MIT", 66 | "repository": "git@github.com:dabbott/react-scrollview.git", 67 | "scripts": { 68 | "watch": "./node_modules/.bin/gulp watch", 69 | "build": "./node_modules/.bin/gulp build", 70 | "test": "jest" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /preprocessor.js: -------------------------------------------------------------------------------- 1 | var coffee = require('coffee-script'); 2 | var transform = require('coffee-react-transform'); 3 | 4 | module.exports = { 5 | process: function(src, path) { 6 | // CoffeeScript files can be .coffee, .litcoffee, or .coffee.md 7 | if (coffee.helpers.isCoffee(path) || (path.match(/\.cjsx/))) { 8 | return coffee.compile(transform(src), {'bare': true}); 9 | } 10 | 11 | return src; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /site.webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: [ 6 | "webpack-dev-server/client?http://0.0.0.0:8080", 7 | 'webpack/hot/only-dev-server', 8 | './site/scripts/router' 9 | ], 10 | devtool: "eval", 11 | debug: true, 12 | output: { 13 | path: path.join(__dirname, "site/public"), 14 | filename: 'bundle.js' 15 | }, 16 | resolveLoader: { 17 | modulesDirectories: ['node_modules'] 18 | }, 19 | plugins: [ 20 | new webpack.HotModuleReplacementPlugin(), 21 | new webpack.NoErrorsPlugin(), 22 | new webpack.IgnorePlugin(/vertx/) // https://github.com/webpack/webpack/issues/353 23 | ], 24 | resolve: { 25 | extensions: ['', '.js', '.cjsx', '.coffee'] 26 | }, 27 | module: { 28 | loaders: [ 29 | { test: /\.css$/, loaders: ['style', 'css']}, 30 | { test: /\.cjsx$/, loaders: ['react-hot', 'coffee', 'cjsx']}, 31 | { test: /\.coffee$/, loader: 'coffee' } 32 | ] 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /site.webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: { 6 | app: [ 7 | './site/scripts/router' 8 | ], 9 | }, 10 | devtool: 'source-map', 11 | output: { 12 | path: path.join(__dirname, "site/public"), 13 | filename: "bundle.js", 14 | }, 15 | resolveLoader: { 16 | modulesDirectories: ['..', 'node_modules'] 17 | }, 18 | plugins: [ 19 | new webpack.DefinePlugin({ 20 | // This has effect on the react lib size. 21 | "process.env": { 22 | NODE_ENV: JSON.stringify("production") 23 | } 24 | }), 25 | new webpack.IgnorePlugin(/vertx/), 26 | new webpack.IgnorePlugin(/un~$/), 27 | new webpack.optimize.DedupePlugin(), 28 | new webpack.optimize.UglifyJsPlugin(), 29 | ], 30 | resolve: { 31 | extensions: ['', '.js', '.cjsx', '.coffee'] 32 | }, 33 | module: { 34 | loaders: [ 35 | { test: /\.css$/, loaders: ['style', 'css']}, 36 | { test: /\.cjsx$/, loaders: ['coffee', 'cjsx']}, 37 | { test: /\.coffee$/, loader: 'coffee' } 38 | ] 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /site/assets/fonts/fontcustom-preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | fontcustom glyphs preview 5 | 6 | 182 | 183 | 184 | 185 | 191 | 192 | 193 | 194 |
195 |
196 |

fontcustom contains 2 glyphs:

197 | Toggle Preview Characters 198 |
199 | 200 | 201 |
202 |
203 | PpPpPpPpPpPpPpPpPpPp 204 |
205 |
206 | 12141618212436486072 207 |
208 |
209 | 210 | 211 |
212 |
213 | 214 |
215 |
216 | PpPpPpPpPpPpPpPpPpPp 217 |
218 |
219 | 12141618212436486072 220 |
221 |
222 | 223 | 224 |
225 |
226 | 227 | 228 | 231 |
232 | 233 | 234 | -------------------------------------------------------------------------------- /site/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabbott/react-scrollview/a70c1a3ec63e9b5d35065b4c81cc10e56a2cd214/site/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.eot -------------------------------------------------------------------------------- /site/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by FontForge 20120731 at Thu Jul 31 12:57:32 2014 9 | By Kyle Mathews 10 | Created by Kyle Mathews with FontForge 2.0 (http://fontforge.sf.net) 11 | 12 | 13 | 14 | 27 | 28 | 31 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /site/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabbott/react-scrollview/a70c1a3ec63e9b5d35065b4c81cc10e56a2cd214/site/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.ttf -------------------------------------------------------------------------------- /site/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabbott/react-scrollview/a70c1a3ec63e9b5d35065b4c81cc10e56a2cd214/site/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.woff -------------------------------------------------------------------------------- /site/assets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Quick Start 7 | 8 | 9 | 10 | 11 | 12 | Fork me on GitHub 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /site/public/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache/ 3 | src -------------------------------------------------------------------------------- /site/scripts/app.cjsx: -------------------------------------------------------------------------------- 1 | Link = require('react-router').Link 2 | RouteHandler = require('react-router').RouteHandler 3 | 4 | # Provides global navigation for app e.g. the "Hello | Styleguide" at the top. 5 | module.exports = React.createClass 6 | displayName: 'HelloWorld' 7 | render: -> 8 |
9 | 10 |
11 | 12 | #
Index | Styleguide
13 | -------------------------------------------------------------------------------- /site/scripts/index.cjsx: -------------------------------------------------------------------------------- 1 | _ = require 'lodash' 2 | Link = require('react-router').Link 3 | ScrollView = require '../../index.js' 4 | highlightJS = require 'highlight.js' 5 | 6 | # http://tools.medialab.sciences-po.fr/iwanthue/index.php 7 | # colors = [ 8 | # "#EE78B2" 9 | # "#5BE487" 10 | # "#53CBE9" 11 | # "#6688F2" 12 | # "#F5464D" 13 | # "#DD51EC" 14 | # "#7C8DC0" 15 | # "#34F0E0" 16 | # "#DCA6E9" 17 | # "#F1487A" 18 | # "#AA72F1" 19 | # "#41AA70" 20 | # "#E66F70" 21 | # "#ED44C3" 22 | # "#F13B9A" 23 | # "#37B7A5" 24 | # "#DB70DD" 25 | # "#BD7CAB" 26 | # "#379FB1" 27 | # "#54A5D7" 28 | # "#54E1A2" 29 | # "#AA82E6" 30 | # "#A486CA" 31 | # "#7BA2E8" 32 | # "#3CDEE4" 33 | # "#49EDC4" 34 | # "#868CDF" 35 | # "#C27DC7" 36 | # "#DF66B8" 37 | # "#E0789B" 38 | # ] 39 | 40 | colors = [ 41 | "#E8EAF6" 42 | "#C5CAE9" 43 | "#9FA8DA" 44 | "#7986CB" 45 | "#5C6BC0" 46 | "#3F51B5" 47 | "#3949AB" 48 | "#303F9F" 49 | "#283593" 50 | "#1A237E" 51 | ] 52 | 53 | randomColor = -> 54 | return colors[Math.floor(Math.random() * colors.length)] 55 | 56 | alternatingColor = do -> 57 | count = 0 58 | altColors = [ 59 | "rgb(255,255,255)" 60 | "rgb(245,245,245)" 61 | ] 62 | return -> 63 | altColors[count++ % 2] 64 | 65 | pastelColor = -> 66 | r = (Math.round(Math.random() * 127) + 127).toString(16) 67 | g = (Math.round(Math.random() * 127) + 127).toString(16) 68 | b = (Math.round(Math.random() * 127) + 127).toString(16) 69 | '#' + r + g + b 70 | 71 | module.exports = React.createClass 72 | displayName: 'Index' 73 | 74 | componentDidMount: -> 75 | _.map document.querySelectorAll('.js'), (node) -> 76 | highlightJS.highlightBlock(node, 'js') 77 | # console.log 'highlighted' 78 | 79 | renderInstallationGuide: -> 80 |
81 |

Install

82 |
83 | 
 84 |         
 85 |         {'''
 86 |           npm install react-scrollview
 87 |         '''}
 88 |         
 89 |
90 |
91 |
92 | 93 | render: -> 94 | verticalStyle = 95 | backgroundColor: 'rgba(0,0,255,0.2)' 96 | height: 400 97 | 98 | horizontalStyle = 99 | backgroundColor: 'rgba(0,0,255,0.2)' 100 | height: 200 101 | 102 | contentContainerStyle = 103 | lineHeight: 0 104 | 105 | horizontalBoxes = for i in [0...10] 106 | inlineStyle = 107 | backgroundColor: "#{randomColor()}" 108 | height: 200 109 | width: 200 110 | lineHeight: '200px' 111 | color: 'white' 112 | textAlign: 'center' 113 |
114 |

{i}

115 |
116 | 117 | verticalBoxes = for i in [0...100] 118 | inlineStyle = 119 | backgroundColor: "#{randomColor()}" 120 | height: 60 121 | lineHeight: '60px' 122 | color: 'white' 123 | textAlign: 'center' 124 |
125 |

{i}

126 |
127 | 128 | style = { 129 | # textAlign: 'center' 130 | } 131 | 132 |
133 |

React ScrollView

134 |
135 | {@renderInstallationGuide()} 136 |

Vertical Scroll

137 |
138 | 140 | {verticalBoxes} 141 | 142 |
143 |
144 | 
145 |         
146 |         {'''
147 |           var ScrollView = require('react-scrollview');
148 | 
149 |           var MyComponent = React.createClass({
150 |             render: function() {
151 |               return (
152 |                 
153 |               );
154 |             }
155 |           });
156 |         '''}
157 |         
158 |
159 |
160 |

Horizontal Scroll

161 |
162 | 165 | {horizontalBoxes} 166 | 167 |
168 |
169 | 
170 |         
171 |         {'''
172 |           var ScrollView = require('react-scrollview');
173 | 
174 |           var MyComponent = React.createClass({
175 |             render: function() {
176 |               return (
177 |                 
178 |               );
179 |             }
180 |           });
181 |         '''}
182 |         
183 |
184 |
185 | -------------------------------------------------------------------------------- /site/scripts/router.cjsx: -------------------------------------------------------------------------------- 1 | # Load css first thing. It gets injected in the in a