├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── index.html ├── mousewheel.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [DEPRECATED] Angular Mousewheel 2 | ================== 3 | 4 | **Since [AngularJS support has been discontinued](https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a) this package is deprecated and no longer maintained.** 5 | 6 | --- 7 | 8 | An AngularJS directive for cross-browser mouse wheel support, using the small and standalone [Hamster.js](https://github.com/monospaced/hamster.js) library. 9 | 10 | [See it in action](http://monospaced.github.io/angular-mousewheel). 11 | 12 | Usage 13 | ----- 14 | 15 | as attribute 16 | 17 | msd-wheel="{expression}" 18 | 19 | as class 20 | 21 | class="msd-wheel: {expression};" 22 | 23 | The event callback receives 3 extra arguments which are the normalized “deltas” of the mouse wheel. 24 | 25 | msd-wheel="myFunction($event, $delta, $deltaX, $deltaY)" 26 | 27 | class="msd-wheel: myFunction($event, $delta, $deltaX, $deltaY);" 28 | 29 | Install 30 | ------- 31 | 32 | bower install angular-mousewheel or npm install angular-mousewheel 33 | 34 | Include [Hamster.js](https://github.com/monospaced/hamster.js) and the `mousewheel.js` script provided by this component in your app, and add `monospaced.mousewheel` to your app’s dependencies. 35 | 36 | Demo 37 | ---------------- 38 | 39 | [monospaced.github.io/angular-mousewheel](http://monospaced.github.io/angular-mousewheel) 40 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-mousewheel", 3 | "version": "1.0.5", 4 | "main": "mousewheel.js", 5 | "ignore": [ 6 | "**/.*", 7 | "node_modules", 8 | "components" 9 | ], 10 | "dependencies": { 11 | "angular": ">=1.0.6", 12 | "hamsterjs": ">=1.0.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Mousewheel 6 | 7 | 8 | 9 | 183 | 184 | 185 | 186 |

Angular Mousewheel

187 | 188 |

github.com/monospaced/angular-mousewheel

189 | 190 |
191 | 192 |

An AngularJS directive for cross-browser mouse wheel support using the small and standalone Hamster.js library. 193 | 194 |

The event callback receives 3 extra arguments which are the normalized “deltas” of the mouse wheel.

195 | 196 | 
msd-wheel="myFunction($event, $delta, $deltaX, $deltaY)"
197 |
198 | 199 |

No jQuery required, only Hamster.js. Tested in these core browsers. 200 | 201 |

Tests

202 | 203 |
    204 |
  1. Plain wheel() with a function passed in, does not prevent default. (Also logs the value of pageX and pageY event properties.)
    2. 205 |
  2. Should prevent the default action.
    3. 206 |
  3. Should not log an event.
    4. 207 |
  4. Has two handlers.
    5. 208 |
  5. Is like 2. but has children. The children should not scroll until mousing over them.
    6. 209 |
  6. Is like 5. but should not scroll children or parents.
    7. 210 |
  7. Is like 6. but has no children. It will propagate the event and scroll 6. as well.
    8. 211 |
212 | 213 |

Monospaced Labs

214 | 215 |
216 | 217 |
218 | 219 |

1.

220 |

2.

221 |

3.

222 |

4.

223 |
224 |

5.

225 |
226 |

6.

227 |

7.

228 |
229 |
230 | 231 | 236 | 237 |
238 | 239 |

{{ua}}

240 | 241 |
242 | 243 | 244 | 245 | 246 | 382 | 383 | 384 | 385 | -------------------------------------------------------------------------------- /mousewheel.js: -------------------------------------------------------------------------------- 1 | /* 2 | * angular-mousewheel v1.0.5 3 | * (c) 2013 Monospaced http://monospaced.com 4 | * License: MIT 5 | */ 6 | 7 | angular.module('monospaced.mousewheel', []) 8 | .directive('msdWheel', ['$parse', function($parse){ 9 | return { 10 | restrict: 'A, C', 11 | link: function(scope, element, attr) { 12 | var expr = $parse(attr['msdWheel']), 13 | fn = function(event, delta, deltaX, deltaY){ 14 | scope.$apply(function(){ 15 | expr(scope, { 16 | $event: event, 17 | $delta: delta, 18 | $deltaX: deltaX, 19 | $deltaY: deltaY 20 | }); 21 | }); 22 | }, 23 | hamster; 24 | 25 | if (typeof Hamster === 'undefined') { 26 | // fallback to standard wheel event 27 | element.bind('wheel', function(event){ 28 | scope.$apply(function() { 29 | expr(scope, { 30 | $event: event 31 | }); 32 | }); 33 | }); 34 | return; 35 | } 36 | 37 | // don't create multiple Hamster instances per element 38 | if (!(hamster = element.data('hamster'))) { 39 | hamster = Hamster(element[0]); 40 | element.data('hamster', hamster); 41 | } 42 | 43 | // bind Hamster wheel event 44 | hamster.wheel(fn); 45 | 46 | // unbind Hamster wheel event 47 | scope.$on('$destroy', function(){ 48 | hamster.unwheel(fn); 49 | }); 50 | } 51 | }; 52 | }]); 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-mousewheel", 3 | "version": "1.0.5", 4 | "description": "Angular Mousewheel", 5 | "main": "mousewheel.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/monospaced/angular-mousewheel.git" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/monospaced/angular-mousewheel/issues" 14 | }, 15 | "homepage": "https://github.com/monospaced/angular-mousewheel#readme", 16 | "dependencies": { 17 | "angular": "^1.0.6", 18 | "hamsterjs": "^1.0.2" 19 | } 20 | } --------------------------------------------------------------------------------