2ac2bc1aea
* adding vue * adding webpack config + example vue library project * forgot to add base tsconfig.json * Add build command that allows building all plugins + watching for changes. * autodetect umd bundles * initial externals detection * integrate vue CLI * add externals config via vue config * explain regenerator issue * remove ie11 * Build polyfills in separate library. * add command to quickly compute total asset size (minified + gzipped) * output tweak for --exclude-angular * Explicitly disable support for ie11 since Vue 3 does not support it. * rebuild and add option to clear webpack cache to build commands * Add example vue component that compiles w/ vue 3. * get example vue component to display * include tslib via polyfills so it is not compiled in each library * get async component loading to work * some tweaks and tests * Add generate vue component command and run to generate activity indicator template. * switch to using composition api since that is apparently better supported, and get activity indicator adapter to bind data properly * remove vue-class-component npm package * eslint changes * rever tracking JS change * tweak * Remove CoreVue vue dir which was just there for testing. * Update vue.config.js * apply some review feedback * add plugin to compute js asset size command * use local script to build * update changelog and apply review feedback * fix bower component mapping * update expected screenshots * update screenshot * Update and rename 4.5.0-b2.php to 4.6.0-b1.php * Update Version.php * update expected screenshot * updates expected UI test files Co-authored-by: sgiehl <stefan@matomo.org>
jQuery Mouse Wheel Plugin
A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.
In order to use the plugin, simply bind the mousewheel event to an element.
It also provides two helper methods called mousewheel and unmousewheel
that act just like other event helper methods in jQuery.
The event object is updated with the normalized deltaX and deltaY properties.
In addition there is a new property on the event object called deltaFactor. Multiply
the deltaFactor by deltaX or deltaY to get the scroll distance that the browser
has reported.
Here is an example of using both the bind and helper method syntax:
// using on
$('#my_elem').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
// using the event helper
$('#my_elem').mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
The old behavior of adding three arguments (delta, deltaX, and deltaY) to the
event handler is now deprecated and will be removed in later releases.
The Deltas...
The combination of Browsers, Operating Systems, and Devices offer a huge range of possible delta values. In fact if the user uses a trackpad and then a physical mouse wheel the delta values can differ wildly. This plugin normalizes those values so you get a whole number starting at +-1 and going up in increments of +-1 according to the force or acceleration that is used. This number has the potential to be in the thousands depending on the device. Check out some of the data collected from users here.
Getting the scroll distance
In some use-cases we prefer to have the normalized delta but in others we want to know how far the browser should
scroll based on the users input. This can be done by multiplying the deltaFactor by the deltaX or deltaY
event property to find the scroll distance the browser reported.
The deltaFactor property was added to the event object in 3.1.5 so that the actual reported delta value can be
extracted. This is a non-standard property.
Using with Browserify
Support for browserify is baked in.
npm install jquery-mousewheel
npm install jquery-browserify
In your server-side node.js code:
var express = require('express');
var app = express.createServer();
app.use(require('browserify')({
require : [ 'jquery-browserify', 'jquery-mousewheel' ]
}));
In your browser-side javascript:
var $ = require('jquery-browserify');
require('jquery-mousewheel')($);