From b5ccd426ba2600ce541cdd54bfe530c7d3279b67 Mon Sep 17 00:00:00 2001 From: Norman Jarvis Date: Fri, 16 Jun 2017 09:46:52 -0600 Subject: [PATCH] Added in the normalizeWheel functions and supporting code so that the mouse wheel movements are normalized in all different browsers --- src/finbars.js | 568 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 567 insertions(+), 1 deletion(-) diff --git a/src/finbars.js b/src/finbars.js index 5f08201..e469e7d 100644 --- a/src/finbars.js +++ b/src/finbars.js @@ -2,6 +2,571 @@ /* eslint-env node, browser */ +/** + * Copyright 2004-present Facebook. All Rights Reserved. + * + * @providesModule UserAgent_DEPRECATED + */ + +/** + * Provides entirely client-side User Agent and OS detection. You should prefer + * the non-deprecated UserAgent module when possible, which exposes our + * authoritative server-side PHP-based detection to the client. + * + * Usage is straightforward: + * + * if (UserAgent_DEPRECATED.ie()) { + * // IE + * } + * + * You can also do version checks: + * + * if (UserAgent_DEPRECATED.ie() >= 7) { + * // IE7 or better + * } + * + * The browser functions will return NaN if the browser does not match, so + * you can also do version compares the other way: + * + * if (UserAgent_DEPRECATED.ie() < 7) { + * // IE6 or worse + * } + * + * Note that the version is a float and may include a minor version number, + * so you should always use range operators to perform comparisons, not + * strict equality. + * + * **Note:** You should **strongly** prefer capability detection to browser + * version detection where it's reasonable: + * + * http://www.quirksmode.org/js/support.html + * + * Further, we have a large number of mature wrapper functions and classes + * which abstract away many browser irregularities. Check the documentation, + * grep for things, or ask on javascript@lists.facebook.com before writing yet + * another copy of "event || window.event". + * + */ + +var _populated = false; + +// Browsers +var _ie, _firefox, _opera, _webkit, _chrome; + +// Actual IE browser for compatibility mode +var _ie_real_version; + +// Platforms +var _osx, _windows, _linux, _android; + +// Architectures +var _win64; + +// Devices +var _iphone, _ipad, _native; + +var _mobile; + +function _populate() { + if (_populated) { + return; + } + + _populated = true; + + // To work around buggy JS libraries that can't handle multi-digit + // version numbers, Opera 10's user agent string claims it's Opera + // 9, then later includes a Version/X.Y field: + // + // Opera/9.80 (foo) Presto/2.2.15 Version/10.10 + var uas = navigator.userAgent; + var agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(uas); + var os = /(Mac OS X)|(Windows)|(Linux)/.exec(uas); + + _iphone = /\b(iPhone|iP[ao]d)/.exec(uas); + _ipad = /\b(iP[ao]d)/.exec(uas); + _android = /Android/i.exec(uas); + _native = /FBAN\/\w+;/i.exec(uas); + _mobile = /Mobile/i.exec(uas); + + // Note that the IE team blog would have you believe you should be checking + // for 'Win64; x64'. But MSDN then reveals that you can actually be coming + // from either x64 or ia64; so ultimately, you should just check for Win64 + // as in indicator of whether you're in 64-bit IE. 32-bit IE on 64-bit + // Windows will send 'WOW64' instead. + _win64 = !!(/Win64/.exec(uas)); + + if (agent) { + _ie = agent[1] ? parseFloat(agent[1]) : ( + agent[5] ? parseFloat(agent[5]) : NaN); + // IE compatibility mode + if (_ie && document && document.documentMode) { + _ie = document.documentMode; + } + // grab the "true" ie version from the trident token if available + var trident = /(?:Trident\/(\d+.\d+))/.exec(uas); + _ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie; + + _firefox = agent[2] ? parseFloat(agent[2]) : NaN; + _opera = agent[3] ? parseFloat(agent[3]) : NaN; + _webkit = agent[4] ? parseFloat(agent[4]) : NaN; + if (_webkit) { + // We do not add the regexp to the above test, because it will always + // match 'safari' only since 'AppleWebKit' appears before 'Chrome' in + // the userAgent string. + agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas); + _chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN; + } else { + _chrome = NaN; + } + } else { + _ie = _firefox = _opera = _chrome = _webkit = NaN; + } + + if (os) { + if (os[1]) { + // Detect OS X version. If no version number matches, set _osx to true. + // Version examples: 10, 10_6_1, 10.7 + // Parses version number as a float, taking only first two sets of + // digits. If only one set of digits is found, returns just the major + // version number. + var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas); + + _osx = ver ? parseFloat(ver[1].replace('_', '.')) : true; + } else { + _osx = false; + } + _windows = !!os[2]; + _linux = !!os[3]; + } else { + _osx = _windows = _linux = false; + } +} + +var UserAgent_DEPRECATED = { + + /** + * Check if the UA is Internet Explorer. + * + * + * @return float|NaN Version number (if match) or NaN. + */ + ie: function() { + return _populate() || _ie; + }, + + /** + * Check if we're in Internet Explorer compatibility mode. + * + * @return bool true if in compatibility mode, false if + * not compatibility mode or not ie + */ + ieCompatibilityMode: function() { + return _populate() || (_ie_real_version > _ie); + }, + + + /** + * Whether the browser is 64-bit IE. Really, this is kind of weak sauce; we + * only need this because Skype can't handle 64-bit IE yet. We need to remove + * this when we don't need it -- tracked by #601957. + */ + ie64: function() { + return UserAgent_DEPRECATED.ie() && _win64; + }, + + /** + * Check if the UA is Firefox. + * + * + * @return float|NaN Version number (if match) or NaN. + */ + firefox: function() { + return _populate() || _firefox; + }, + + + /** + * Check if the UA is Opera. + * + * + * @return float|NaN Version number (if match) or NaN. + */ + opera: function() { + return _populate() || _opera; + }, + + + /** + * Check if the UA is WebKit. + * + * + * @return float|NaN Version number (if match) or NaN. + */ + webkit: function() { + return _populate() || _webkit; + }, + + /** + * For Push + * WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit + */ + safari: function() { + return UserAgent_DEPRECATED.webkit(); + }, + + /** + * Check if the UA is a Chrome browser. + * + * + * @return float|NaN Version number (if match) or NaN. + */ + chrome : function() { + return _populate() || _chrome; + }, + + + /** + * Check if the user is running Windows. + * + * @return bool `true' if the user's OS is Windows. + */ + windows: function() { + return _populate() || _windows; + }, + + + /** + * Check if the user is running Mac OS X. + * + * @return float|bool Returns a float if a version number is detected, + * otherwise true/false. + */ + osx: function() { + return _populate() || _osx; + }, + + /** + * Check if the user is running Linux. + * + * @return bool `true' if the user's OS is some flavor of Linux. + */ + linux: function() { + return _populate() || _linux; + }, + + /** + * Check if the user is running on an iPhone or iPod platform. + * + * @return bool `true' if the user is running some flavor of the + * iPhone OS. + */ + iphone: function() { + return _populate() || _iphone; + }, + + mobile: function() { + return _populate() || (_iphone || _ipad || _android || _mobile); + }, + + nativeApp: function() { + // webviews inside of the native apps + return _populate() || _native; + }, + + android: function() { + return _populate() || _android; + }, + + ipad: function() { + return _populate() || _ipad; + } +}; + +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule ExecutionEnvironment + */ + +/*jslint evil: true */ + +var canUseDOM = !!( + typeof window !== 'undefined' && + window.document && + window.document.createElement +); + +/** + * Simple, lightweight module assisting with the detection and context of + * Worker. Helps avoid circular dependencies and allows code to reason about + * whether or not they are in a Worker, even if they never include the main + * `ReactWorker` dependency. + */ +var ExecutionEnvironment = { + + canUseDOM: canUseDOM, + + canUseWorkers: typeof Worker !== 'undefined', + + canUseEventListeners: + canUseDOM && !!(window.addEventListener || window.attachEvent), + + canUseViewport: canUseDOM && !!window.screen, + + isInWorker: !canUseDOM // For now, this is true - might change in the future. + +}; + + +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule isEventSupported + */ + + +// var ExecutionEnvironment = require('ExecutionEnvironment'); + +var useHasFeature; +if (ExecutionEnvironment.canUseDOM) { + useHasFeature = + document.implementation && + document.implementation.hasFeature && + // always returns true in newer browsers as per the standard. + // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature + document.implementation.hasFeature('', '') !== true; +} + + +/** + * Checks if an event is supported in the current execution environment. + * + * NOTE: This will not work correctly for non-generic events such as `change`, + * `reset`, `load`, `error`, and `select`. + * + * Borrows from Modernizr. + * + * @param {string} eventNameSuffix Event name, e.g. "click". + * @param {?boolean} capture Check if the capture phase is supported. + * @return {boolean} True if the event is supported. + * @internal + * @license Modernizr 3.0.0pre (Custom Build) | MIT + */ +function isEventSupported(eventNameSuffix, capture) { + if (!ExecutionEnvironment.canUseDOM || + capture && !('addEventListener' in document)) { + return false; + } + + var eventName = 'on' + eventNameSuffix; + var isSupported = eventName in document; + + if (!isSupported) { + var element = document.createElement('div'); + element.setAttribute(eventName, 'return;'); + isSupported = typeof element[eventName] === 'function'; + } + + if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') { + // This is the only way to test support for the `wheel` event in IE9+. + isSupported = document.implementation.hasFeature('Events.wheel', '3.0'); + } + + return isSupported; +} + + +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule normalizeWheel + * @typechecks + */ + +// var UserAgent_DEPRECATED = require('UserAgent_DEPRECATED'); + +// var isEventSupported = require('isEventSupported'); + + +// Reasonable defaults +var PIXEL_STEP = 10; +var LINE_HEIGHT = 40; +var PAGE_HEIGHT = 800; + +/** + * Mouse wheel (and 2-finger trackpad) support on the web sucks. It is + * complicated, thus this doc is long and (hopefully) detailed enough to answer + * your questions. + * + * If you need to react to the mouse wheel in a predictable way, this code is + * like your bestest friend. * hugs * + * + * As of today, there are 4 DOM event types you can listen to: + * + * 'wheel' -- Chrome(31+), FF(17+), IE(9+) + * 'mousewheel' -- Chrome, IE(6+), Opera, Safari + * 'MozMousePixelScroll' -- FF(3.5 only!) (2010-2013) -- don't bother! + * 'DOMMouseScroll' -- FF(0.9.7+) since 2003 + * + * So what to do? The is the best: + * + * normalizeWheel.getEventType(); + * + * In your event callback, use this code to get sane interpretation of the + * deltas. This code will return an object with properties: + * + * spinX -- normalized spin speed (use for zoom) - x plane + * spinY -- " - y plane + * pixelX -- normalized distance (to pixels) - x plane + * pixelY -- " - y plane + * + * Wheel values are provided by the browser assuming you are using the wheel to + * scroll a web page by a number of lines or pixels (or pages). Values can vary + * significantly on different platforms and browsers, forgetting that you can + * scroll at different speeds. Some devices (like trackpads) emit more events + * at smaller increments with fine granularity, and some emit massive jumps with + * linear speed or acceleration. + * + * This code does its best to normalize the deltas for you: + * + * - spin is trying to normalize how far the wheel was spun (or trackpad + * dragged). This is super useful for zoom support where you want to + * throw away the chunky scroll steps on the PC and make those equal to + * the slow and smooth tiny steps on the Mac. Key data: This code tries to + * resolve a single slow step on a wheel to 1. + * + * - pixel is normalizing the desired scroll delta in pixel units. You'll + * get the crazy differences between browsers, but at least it'll be in + * pixels! + * + * - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT. This + * should translate to positive value zooming IN, negative zooming OUT. + * This matches the newer 'wheel' event. + * + * Why are there spinX, spinY (or pixels)? + * + * - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn + * with a mouse. It results in side-scrolling in the browser by default. + * + * - spinY is what you expect -- it's the classic axis of a mouse wheel. + * + * - I dropped spinZ/pixelZ. It is supported by the DOM 3 'wheel' event and + * probably is by browsers in conjunction with fancy 3D controllers .. but + * you know. + * + * Implementation info: + * + * Examples of 'wheel' event if you scroll slowly (down) by one step with an + * average mouse: + * + * OS X + Chrome (mouse) - 4 pixel delta (wheelDelta -120) + * OS X + Safari (mouse) - N/A pixel delta (wheelDelta -12) + * OS X + Firefox (mouse) - 0.1 line delta (wheelDelta N/A) + * Win8 + Chrome (mouse) - 100 pixel delta (wheelDelta -120) + * Win8 + Firefox (mouse) - 3 line delta (wheelDelta -120) + * + * On the trackpad: + * + * OS X + Chrome (trackpad) - 2 pixel delta (wheelDelta -6) + * OS X + Firefox (trackpad) - 1 pixel delta (wheelDelta N/A) + * + * On other/older browsers.. it's more complicated as there can be multiple and + * also missing delta values. + * + * The 'wheel' event is more standard: + * + * http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents + * + * The basics is that it includes a unit, deltaMode (pixels, lines, pages), and + * deltaX, deltaY and deltaZ. Some browsers provide other values to maintain + * backward compatibility with older events. Those other values help us + * better normalize spin speed. Example of what the browsers provide: + * + * | event.wheelDelta | event.detail + * ------------------+------------------+-------------- + * Safari v5/OS X | -120 | 0 + * Safari v5/Win7 | -120 | 0 + * Chrome v17/OS X | -120 | 0 + * Chrome v17/Win7 | -120 | 0 + * IE9/Win7 | -120 | undefined + * Firefox v4/OS X | undefined | 1 + * Firefox v4/Win7 | undefined | 3 + * + */ +function normalizeWheel(/*object*/ event) /*object*/ { + var sX = 0, sY = 0, // spinX, spinY + pX = 0, pY = 0; // pixelX, pixelY + + // Legacy + if ('detail' in event) { sY = event.detail; } + if ('wheelDelta' in event) { sY = -event.wheelDelta / 120; } + if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; } + if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; } + + // side scrolling on FF with DOMMouseScroll + if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) { + sX = sY; + sY = 0; + } + + pX = sX * PIXEL_STEP; + pY = sY * PIXEL_STEP; + + if ('deltaY' in event) { pY = event.deltaY; } + if ('deltaX' in event) { pX = event.deltaX; } + + if ((pX || pY) && event.deltaMode) { + if (event.deltaMode == 1) { // delta in LINE units + pX *= LINE_HEIGHT; + pY *= LINE_HEIGHT; + } else { // delta in PAGE units + pX *= PAGE_HEIGHT; + pY *= PAGE_HEIGHT; + } + } + + // Fall-back if spin cannot be determined + if (pX && !sX) { sX = (pX < 1) ? -1 : 1; } + if (pY && !sY) { sY = (pY < 1) ? -1 : 1; } + + return { spinX : sX, + spinY : sY, + pixelX : pX, + pixelY : pY }; +} + + +/** + * The best combination if you prefer spinX + spinY normalization. It favors + * the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with + * 'wheel' event, making spin speed determination impossible. + */ +normalizeWheel.getEventType = function() /*string*/ { + return (UserAgent_DEPRECATED.firefox()) + ? 'DOMMouseScroll' + : (isEventSupported('wheel')) + ? 'wheel' + : 'mousewheel'; +}; + + + var cssInjector = require('css-injector'); /** @@ -660,7 +1225,8 @@ var handlersToBeBound = { }, onwheel: function (evt) { - this.index += evt[this.deltaProp]; + var wheelData = normalizeWheel(evt); + this.index += wheelData.spinY; evt.stopPropagation(); evt.preventDefault(); },