tests/manual/mousewheel.html

	mousewheel.html revision f48add59c0e613a564104e28dc832c476535c38b
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright<!DOCTYPE HTML>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright<html>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright    <head>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        <style>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            #scrollableParent {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                background:#ccc;
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        </style>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright    </head>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright    <body class="yui3-skin-sam">
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        <h1>Header</h1>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        <div id="scrollableParent">
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            <div id="scrollable">
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                <ul>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>AC/DC</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Aerosmith</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Billy Joel</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Bob Dylan</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Bob Seger</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Bon Jovi</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Bruce Springsteen</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Creed</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Creedence Clearwater Revival</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Dave Matthews Band</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Def Leppard</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Eagles</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Eminem</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Fleetwood Mac</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Green Day</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Guns N' Roses</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>James Taylor</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Jay-Z</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Jimi Hendrix</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Led Zeppelin</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Lynyrd Skynyrd</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Metallica</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Motley Crue</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Neil Diamond</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Nirvana</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Ozzy Osbourne</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Pearl Jam</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Pink Floyd</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Queen</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Rod Stewart</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Rush</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Santana</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Simon and Garfunkel</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Steve Miller Band</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>The Beatles</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>The Doors</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>The Police</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>The Rolling Stones</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Tom Petty</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>U2</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Van Halen</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>Willie Nelson</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    <li>ZZ Top</li>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                </ul>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            </div>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        </div>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        <h2>Footer</h2>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        <script type="text/javascript">
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        YUI.add('scrollview-mousewheel', function(Y){
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            function MouseWheelPlugin(config) {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                MouseWheelPlugin.superclass.constructor.apply(this, arguments);
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            MouseWheelPlugin.NAME = 'pluginScrollViewMouseWheel';
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            MouseWheelPlugin.NS = 'mousewheel';
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            MouseWheelPlugin.ATTRS = {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            Y.extend(MouseWheelPlugin, Y.Plugin.Base, {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                initializer: function() {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    this.host = this.get('host');
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    this.afterHostEvent('render', this._afterRender);
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                },
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                _afterRender: function() {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    var host = this.host;
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    var contentBox = host.get("contentBox");
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    var lineHeight = contentBox.one("ul li").getComputedStyle('height'); // This probably shouldn't assume `ul li`
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    var lineHeightInt = parseInt(lineHeight, 10);
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    contentBox.on("mousewheel", function(e) {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        var preventDefault = true;
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        var scrollY = host.get('scrollY');
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        var scroll_to = scrollY - (e.wheelDelta * lineHeightInt);
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        host.scrollTo(0, scroll_to);
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        // if we have scrollbars plugin, flash the scrollbar
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        if (host.scrollbars) {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                            host.scrollbars.flash();
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        // prevent browser default behavior on mouse scroll
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        if (preventDefault) {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                            e.preventDefault();
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                        }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    });
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            });
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            Y.Base.plug(Y.ScrollView, MouseWheelPlugin);
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        });
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        YUI({
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            filter:"raw",
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            modules:{
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                'scrollview-mousewheel' : {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    requires: ['event-mousewheel']
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        }).use('event-mousewheel', 'scrollview', 'cssreset', 'cssfonts', function(Y) {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright             var scrollView = new Y.ScrollView({
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                id: "scrollview",
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                srcNode: Y.one("#scrollable"),
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                height: 200,
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                mousewheel: true,
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                flick: {
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    minDistance:10,
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    minVelocity:0.3,
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                    axis: "y"
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright                }
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            }).render();
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            scrollView.get("contentBox").on('mouseover', function(e){
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright               console.log(e);
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright            });
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        });
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright        </script>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright    </body>
f48add59c0e613a564104e28dc832c476535c38bDerek Gathright</html>