X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=src%2Fplugins%2Frange-selector.js;h=ef3aedb9ccb48b971d0949dacfe7dea99d182a4a;hb=2cfded32d5da38aad8d9617654569f3e3f1c420d;hp=4c1e938ed3e49cee9b1aabdf81bc5bb199c475d5;hpb=07cae5dd0adbcee97689ffa6099a6b0e8665011b;p=dygraphs.git diff --git a/src/plugins/range-selector.js b/src/plugins/range-selector.js index 4c1e938..ef3aedb 100644 --- a/src/plugins/range-selector.js +++ b/src/plugins/range-selector.js @@ -10,13 +10,14 @@ * a timeline range selector widget for dygraphs. */ -Dygraph.Plugins.RangeSelector = (function() { - /*global Dygraph:false */ "use strict"; +import * as utils from '../dygraph-utils'; +import DygraphInteraction from '../dygraph-interaction-model'; +import IFrameTarp from '../iframe-tarp'; + var rangeSelector = function() { - this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera; this.hasTouchInterface_ = typeof(TouchEvent) != 'undefined'; this.isMobileDevice_ = /mobile|android/gi.test(navigator.appVersion); this.interfaceCreated_ = false; @@ -161,7 +162,7 @@ rangeSelector.prototype.updateVisibility_ = function() { */ rangeSelector.prototype.resize_ = function() { function setElementRect(canvas, context, rect) { - var canvasScale = Dygraph.getContextPixelRatio(context); + var canvasScale = utils.getContextPixelRatio(context); canvas.style.top = rect.y + 'px'; canvas.style.left = rect.x + 'px'; @@ -197,18 +198,18 @@ rangeSelector.prototype.resize_ = function() { * Creates the background and foreground canvases. */ rangeSelector.prototype.createCanvases_ = function() { - this.bgcanvas_ = Dygraph.createCanvas(); + this.bgcanvas_ = utils.createCanvas(); this.bgcanvas_.className = 'dygraph-rangesel-bgcanvas'; this.bgcanvas_.style.position = 'absolute'; this.bgcanvas_.style.zIndex = 9; - this.bgcanvas_ctx_ = Dygraph.getContext(this.bgcanvas_); + this.bgcanvas_ctx_ = utils.getContext(this.bgcanvas_); - this.fgcanvas_ = Dygraph.createCanvas(); + this.fgcanvas_ = utils.createCanvas(); this.fgcanvas_.className = 'dygraph-rangesel-fgcanvas'; this.fgcanvas_.style.position = 'absolute'; this.fgcanvas_.style.zIndex = 9; this.fgcanvas_.style.cursor = 'default'; - this.fgcanvas_ctx_ = Dygraph.getContext(this.fgcanvas_); + this.fgcanvas_ctx_ = utils.getContext(this.fgcanvas_); }; /** @@ -222,22 +223,15 @@ rangeSelector.prototype.createZoomHandles_ = function() { img.style.zIndex = 10; img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place. img.style.cursor = 'col-resize'; -//TODO: change image to more options - if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data. - img.width = 7; - img.height = 14; - img.style.backgroundColor = 'white'; - img.style.border = '1px solid #333333'; // Just show box in IE7. - } else { - img.width = 9; - img.height = 16; - img.src = 'data:image/png;base64,' + + // TODO: change image to more options + img.width = 9; + img.height = 16; + img.src = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA' + 'zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv' + 'bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl' + '6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s' + 'qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII='; - } if (this.isMobileDevice_) { img.width *= 2; @@ -263,7 +257,7 @@ rangeSelector.prototype.initInteraction_ = function() { // We cover iframes during mouse interactions. See comments in // dygraph-utils.js for more info on why this is a good idea. - var tarp = new Dygraph.IFrameTarp(); + var tarp = new IFrameTarp(); // functions, defined below. Defining them this way (rather than with // "function foo() {...}" makes JSHint happy. @@ -282,14 +276,14 @@ rangeSelector.prototype.initInteraction_ = function() { }; onZoomStart = function(e) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); isZooming = true; clientXLast = e.clientX; handle = e.target ? e.target : e.srcElement; if (e.type === 'mousedown' || e.type === 'dragstart') { // These events are removed manually. - Dygraph.addEvent(topElem, 'mousemove', onZoom); - Dygraph.addEvent(topElem, 'mouseup', onZoomEnd); + utils.addEvent(topElem, 'mousemove', onZoom); + utils.addEvent(topElem, 'mouseup', onZoomEnd); } self.fgcanvas_.style.cursor = 'col-resize'; tarp.cover(); @@ -300,7 +294,7 @@ rangeSelector.prototype.initInteraction_ = function() { if (!isZooming) { return false; } - Dygraph.cancelEvent(e); + utils.cancelEvent(e); var delX = e.clientX - clientXLast; if (Math.abs(delX) < 4) { @@ -337,8 +331,8 @@ rangeSelector.prototype.initInteraction_ = function() { } isZooming = false; tarp.uncover(); - Dygraph.removeEvent(topElem, 'mousemove', onZoom); - Dygraph.removeEvent(topElem, 'mouseup', onZoomEnd); + utils.removeEvent(topElem, 'mousemove', onZoom); + utils.removeEvent(topElem, 'mouseup', onZoomEnd); self.fgcanvas_.style.cursor = 'default'; // If on a slower device, zoom now. @@ -373,13 +367,13 @@ rangeSelector.prototype.initInteraction_ = function() { onPanStart = function(e) { if (!isPanning && isMouseInPanZone(e) && self.getZoomHandleStatus_().isZoomed) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); isPanning = true; clientXLast = e.clientX; if (e.type === 'mousedown') { // These events are removed manually. - Dygraph.addEvent(topElem, 'mousemove', onPan); - Dygraph.addEvent(topElem, 'mouseup', onPanEnd); + utils.addEvent(topElem, 'mousemove', onPan); + utils.addEvent(topElem, 'mouseup', onPanEnd); } return true; } @@ -390,7 +384,7 @@ rangeSelector.prototype.initInteraction_ = function() { if (!isPanning) { return false; } - Dygraph.cancelEvent(e); + utils.cancelEvent(e); var delX = e.clientX - clientXLast; if (Math.abs(delX) < 4) { @@ -430,8 +424,8 @@ rangeSelector.prototype.initInteraction_ = function() { return false; } isPanning = false; - Dygraph.removeEvent(topElem, 'mousemove', onPan); - Dygraph.removeEvent(topElem, 'mouseup', onPanEnd); + utils.removeEvent(topElem, 'mousemove', onPan); + utils.removeEvent(topElem, 'mouseup', onPanEnd); // If on a slower device, do pan now. if (!dynamic) { doPan(); @@ -462,11 +456,11 @@ rangeSelector.prototype.initInteraction_ = function() { onZoomHandleTouchEvent = function(e) { if (e.type == 'touchstart' && e.targetTouches.length == 1) { if (onZoomStart(e.targetTouches[0])) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); } } else if (e.type == 'touchmove' && e.targetTouches.length == 1) { if (onZoom(e.targetTouches[0])) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); } } else { onZoomEnd(e); @@ -476,11 +470,11 @@ rangeSelector.prototype.initInteraction_ = function() { onCanvasTouchEvent = function(e) { if (e.type == 'touchstart' && e.targetTouches.length == 1) { if (onPanStart(e.targetTouches[0])) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); } } else if (e.type == 'touchmove' && e.targetTouches.length == 1) { if (onPan(e.targetTouches[0])) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); } } else { onPanEnd(e); @@ -494,7 +488,7 @@ rangeSelector.prototype.initInteraction_ = function() { } }; - this.setDefaultOption_('interactionModel', Dygraph.Interaction.dragIsPanInteractionModel); + this.setDefaultOption_('interactionModel', DygraphInteraction.dragIsPanInteractionModel); this.setDefaultOption_('panEdgeFraction', 0.0001); var dragStartEvent = window.opera ? 'mousedown' : 'dragstart'; @@ -693,11 +687,11 @@ rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { // Also, expand the Y range to compress the mini plot a little. var extraPercent = 0.25; if (logscale) { - yMax = Dygraph.log10(yMax); + yMax = utils.log10(yMax); yMax += yMax*extraPercent; - yMin = Dygraph.log10(yMin); + yMin = utils.log10(yMin); for (i = 0; i < combinedSeries.length; i++) { - combinedSeries[i][1] = Dygraph.log10(combinedSeries[i][1]); + combinedSeries[i][1] = utils.log10(combinedSeries[i][1]); } } else { var yExtra; @@ -793,6 +787,4 @@ rangeSelector.prototype.getZoomHandleStatus_ = function() { }; }; -return rangeSelector; - -})(); +export default rangeSelector;