diff --git a/addon/data/selector-ui.js b/addon/data/selector-ui.js
index 1ebb6b0145..fce431a1e4 100644
--- a/addon/data/selector-ui.js
+++ b/addon/data/selector-ui.js
@@ -51,6 +51,13 @@ const ui = (function () { // eslint-disable-line no-unused-vars
let iframe = exports.iframe = {
element: null,
+ sizeTracking: {
+ timer: null,
+ windowDelayer: null,
+ resizeBound: null,
+ lastHeight: null,
+ lastWidth: null
+ },
document: null,
display: function (installHandlerOnDocument) {
return new Promise((resolve, reject) => {
@@ -62,8 +69,8 @@ const ui = (function () { // eslint-disable-line no-unused-vars
this.element.style.position = "absolute";
this.element.style.top = "0";
this.element.style.left = "0";
- this.element.style.height = "100%";
- this.element.style.width = "100%";
+ this.element.style.margin = "0";
+ this.updateElementSize();
this.element.onload = () => {
var parsedDom = (new DOMParser()).parseFromString(
"
+
+ Drag or click on the page to select a region. Press ESC to cancel.
+
+
+
+ Save visible
+
+
+ Save full page
+
+ `;
+ this.el.querySelector(".pageshot-myshots").addEventListener("click", callbacks.onOpenMyShots, false);
+ this.el.querySelector(".pageshot-visible").addEventListener("click", callbacks.onClickVisible, false);
+ this.el.querySelector(".pageshot-full-page").addEventListener("click", callbacks.onClickFullPage, false);
+ this.movingEl = this.el.querySelector(".pageshot-moving-element");
+ iframe.document.body.appendChild(this.el);
+ this.resetPosition();
+ window.addEventListener("scroll", this.onScroll, false);
+ },
+
+ resetPosition: function () {
+ if (! this.movingEl) {
+ return;
+ }
+ let scrollX = window.scrollX;
+ let scrollY = window.scrollY;
+ this.movingEl.style.top = scrollY + "px";
+ this.movingEl.style.left = scrollX + "px";
+ this.movingEl.style.width = window.innerWidth + "px";
+ this.movingEl.style.height = window.innerHeight + "px";
+ },
+
+ onScroll: function () {
+ if (! this.isScrollTracking) {
+ window.requestAnimationFrame(() => {
+ this.resetPosition();
+ this.isScrollTracking = false;
+ });
+ this.isScrollTracking = true;
+ }
},
remove: function () {
util.removeNode(this.el);
this.el = null;
+ this.movingEl = null;
+ window.removeEventListener("scroll", this.onScroll, false);
}
};
+ WholePageOverlay.onScroll = WholePageOverlay.onScroll.bind(WholePageOverlay);
+
let movements = ["topLeft", "top", "topRight", "left", "right", "bottomLeft", "bottom", "bottomRight"];
/** Creates the selection box */
diff --git a/addon/data/shooter-interactive-worker.js b/addon/data/shooter-interactive-worker.js
index fe47e718cb..6ea77f5a3a 100644
--- a/addon/data/shooter-interactive-worker.js
+++ b/addon/data/shooter-interactive-worker.js
@@ -359,7 +359,9 @@ stateHandlers.crosshairs = {
},
mousemove: function (event) {
- if (event.target.className !== "pageshot-preview-overlay" && event.target.className.startsWith("pageshot-")) {
+ if (event.target.className &&
+ event.target.className !== "pageshot-preview-overlay" &&
+ event.target.className.startsWith("pageshot-")) {
// User is hovering over a Page Shot button or control
autoDetectRect = null;
ui.HoverBox.hide();
@@ -816,7 +818,7 @@ function activate() {
addHandlers();
ui.iframe.display(installHandlersOnDocument).then(() => {
setState("crosshairs");
- });
+ }).catch((err) => {console.error("Error:", err+"", err)});
if (isChrome) {
ui.ChromeInterface.display();
ui.ChromeInterface.onMyShots = function () {
diff --git a/static/css/inline-selection.scss b/static/css/inline-selection.scss
index 6c2bbab5bf..d93f6b6420 100644
--- a/static/css/inline-selection.scss
+++ b/static/css/inline-selection.scss
@@ -284,6 +284,22 @@ $overlay-z-index: 9999999999;
z-index: $overlay-z-index;
}
+// FIXME: some of the styles in .pageshot-moving-element were copied from
+// .pageshot-preview-overlay and are probably unnecessary
+.pageshot-moving-element {
+ pointer-events: none;
+ position: absolute;
+ align-items: center;
+ display: flex;
+ height: 100%;
+ justify-content: center;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ top: 0;
+ width: 100%;
+}
+
.pageshot-preview-instructions {
@extend .pageshot-reset;
@include flex-container(row, center, center);