diff --git a/NEWS.md b/NEWS.md index c6fd0c0e..740b7dc4 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,6 +1,7 @@ profvis 0.3.6.9000 ============= +* Fixed [#111](https://github.com/rstudio/profvis/issues/111): auto-scrolling to lines of code did not work in some browsers. ([#113](https://github.com/rstudio/profvis/pull/113)) profvis 0.3.6 ============= diff --git a/inst/htmlwidgets/lib/profvis/profvis.js b/inst/htmlwidgets/lib/profvis/profvis.js index 43134204..af3e3a3f 100644 --- a/inst/htmlwidgets/lib/profvis/profvis.js +++ b/inst/htmlwidgets/lib/profvis/profvis.js @@ -2652,34 +2652,5 @@ profvis = (function() { }); })(); - - if (!Element.prototype.scrollIntoViewIfNeeded) { - Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) { - centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded; - - var parent = this.parentNode, - parentComputedStyle = window.getComputedStyle(parent, null), - parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')), - parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')), - overTop = this.offsetTop - parent.offsetTop < parent.scrollTop, - overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight), - overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft, - overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth), - alignWithTop = overTop && !overBottom; - - if ((overTop || overBottom) && centerIfNeeded) { - parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2; - } - - if ((overLeft || overRight) && centerIfNeeded) { - parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2; - } - - if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) { - this.scrollIntoView(alignWithTop); - } - }; - } - return profvis; })(); diff --git a/inst/htmlwidgets/lib/profvis/scroll.js b/inst/htmlwidgets/lib/profvis/scroll.js new file mode 100644 index 00000000..62eb7634 --- /dev/null +++ b/inst/htmlwidgets/lib/profvis/scroll.js @@ -0,0 +1,69 @@ +(function() { + + // Polyfill for scrollIntoViewIfNeeded() + // From https://gist.github.com/jocki84/6ffafd003387179a988e + // License: ISC + if (!Element.prototype.scrollIntoViewIfNeeded) { + Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) { + "use strict"; + + function makeRange(start, length) { + return {"start": start, "length": length, "end": start + length}; + } + + function coverRange(inner, outer) { + if ( + false === centerIfNeeded || + (outer.start < inner.end && inner.start < outer.end) + ) { + return Math.max( + inner.end - outer.length, + Math.min(outer.start, inner.start) + ); + } + return (inner.start + inner.end - outer.length) / 2; + } + + function makePoint(x, y) { + return { + "x": x, + "y": y, + "translate": function translate(dX, dY) { + return makePoint(x + dX, y + dY); + } + }; + } + + function absolute(elem, pt) { + while (elem) { + pt = pt.translate(elem.offsetLeft, elem.offsetTop); + elem = elem.offsetParent; + } + return pt; + } + + var target = absolute(this, makePoint(0, 0)), + extent = makePoint(this.offsetWidth, this.offsetHeight), + elem = this.parentNode, + origin; + + while (elem instanceof HTMLElement) { + // Apply desired scroll amount. + origin = absolute(elem, makePoint(elem.clientLeft, elem.clientTop)); + elem.scrollLeft = coverRange( + makeRange(target.x - origin.x, extent.x), + makeRange(elem.scrollLeft, elem.clientWidth) + ); + elem.scrollTop = coverRange( + makeRange(target.y - origin.y, extent.y), + makeRange(elem.scrollTop, elem.clientHeight) + ); + + // Determine actual scroll amount by reading back scroll properties. + target = target.translate(-elem.scrollLeft, -elem.scrollTop); + elem = elem.parentNode; + } + }; + } + +})() \ No newline at end of file diff --git a/inst/htmlwidgets/profvis.yaml b/inst/htmlwidgets/profvis.yaml index f4fd3194..e1813c62 100644 --- a/inst/htmlwidgets/profvis.yaml +++ b/inst/htmlwidgets/profvis.yaml @@ -12,7 +12,9 @@ dependencies: - name: profvis version: 0.3.6.9000 src: "htmlwidgets/lib/profvis" - script: profvis.js + script: + - profvis.js + - scroll.js stylesheet: profvis.css - name: highlight version: 6.2.0