Skip to content
This repository has been archived by the owner on Jan 17, 2023. It is now read-only.

Commit

Permalink
Merge pull request #1763 from mozilla-services/change-click-to-select
Browse files Browse the repository at this point in the history 
r?fzzzy Fix #1745, use a minimum size on the click autodetect
  • Loading branch information
@fzzzy
fzzzy authored Oct 17, 2016
2 parents 2468e9a + d42b0a8 commit 66fa62f
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 71 deletions.
28 changes: 28 additions & 0 deletions addon/data/selector-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,34 @@ const ui = (function () { // eslint-disable-line no-unused-vars
dialogEl: null
};

exports.HoverBox = {

el: null,

display: function (rect) {
if (! this.el) {
this.el = makeEl("div", "pageshot-hover-highlight");
document.body.appendChild(this.el);
}
this.el.style.display = "";
this.el.style.top = (rect.top - 1) + "px";
this.el.style.left = (rect.left - 1) + "px";
this.el.style.width = (rect.right - rect.left + 2) + "px";
this.el.style.height = (rect.bottom - rect.top + 2) + "px";
},

hide: function () {
if (this.el) {
this.el.style.display = "none";
}
},

remove: function () {
util.removeNode(this.el);
this.el = null;
}
};

/** Removes every UI this module creates */
exports.remove = function () {
for (let name in exports) {
Expand Down
139 changes: 68 additions & 71 deletions addon/data/shooter-interactive-worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ var isChrome = false;

const MAX_PAGE_HEIGHT = 5000;
const MAX_PAGE_WIDTH = 5000;
const MIN_DETECT_HEIGHT = 30;
const MIN_DETECT_WIDTH = 100;
const MAX_DETECT_HEIGHT = Math.max(window.innerHeight + 100, 700);
const MAX_DETECT_WIDTH = Math.max(window.innerWidth + 100, 1000);

let annotateForPage = false;
if (! isChrome && self.options.annotateForPage) {
Expand Down Expand Up @@ -86,6 +90,15 @@ const movements = {
move: ["*", "*"]
};

const doNotAutoselectTags = {
H1: true,
H2: true,
H3: true,
H4: true,
H5: true,
H6: true
};

let standardDisplayCallbacks = {
cancel: () => {
sendEvent("cancel-shot", "overlay-cancel-button");
Expand Down Expand Up @@ -163,6 +176,7 @@ let resizeStartPos;
let resizeStartSelected;
let resizeHasMoved;
let mouseupNoAutoselect = false;
let autoDetectRect;

/** Represents a selection box: */
class Selection {
Expand Down Expand Up @@ -252,6 +266,19 @@ class Selection {
}
}

Selection.getBoundingClientRect = function (el) {
let rect = el.getBoundingClientRect();
if (! rect) {
return null;
}
return new Selection(
rect.left + window.scrollX,
rect.top + window.scrollY,
rect.right + window.scrollX,
rect.bottom + window.scrollY
);
};

/** Represents a single x/y point, typically for a mouse click that doesn't have a drag: */
class Pos {
constructor(x, y) {
Expand All @@ -260,13 +287,13 @@ class Pos {
}

elementFromPoint() {
document.body.classList.add("pageshot-hide-selection");
document.body.classList.add("pageshot-no-pointer-events");
try {
return document.elementFromPoint(
this.x - window.pageXOffset,
this.y - window.pageYOffset);
} finally {
document.body.classList.remove("pageshot-hide-selection");
document.body.classList.remove("pageshot-no-pointer-events");
}
}

Expand Down Expand Up @@ -362,6 +389,40 @@ stateHandlers.crosshairs = {
ui.Crosshair.display(x, y);
}
*/
document.body.classList.add("pageshot-no-pointer-event");
let el = document.elementFromPoint(
event.pageX - window.pageXOffset,
event.pageY - window.pageYOffset
);
document.body.classList.remove("pageshot-no-pointer-event");
let lastRect;
let rect;
let node = el;
while (node) {
rect = Selection.getBoundingClientRect(node);
if (! rect) {
rect = lastRect;
break;
}
if (rect.width > MAX_DETECT_WIDTH || rect.height > MAX_DETECT_HEIGHT) {
// Then the last rectangle is better
rect = lastRect;
break;
}
if (rect.width >= MIN_DETECT_WIDTH && rect.height >= MIN_DETECT_HEIGHT) {
if (! doNotAutoselectTags[node.tagName]) {
break;
}
}
lastRect = rect;
node = node.parentNode;
}
if (! rect) {
ui.HoverBox.hide();
} else {
ui.HoverBox.display(rect);
}
autoDetectRect = rect;
},

mousedown: function (event) {
Expand All @@ -377,6 +438,7 @@ stateHandlers.crosshairs = {

end: function () {
ui.Crosshair.remove();
ui.HoverBox.remove();
}
};

Expand Down Expand Up @@ -411,27 +473,12 @@ stateHandlers.draggingReady = {
setState("crosshairs");
return false;
}
let el = this.findGoodEl();
if (el) {
let rect = el.getBoundingClientRect();
rect = {
left: rect.left + window.scrollX,
top: rect.top + window.scrollY,
right: rect.left + window.scrollX + rect.width,
bottom: rect.top + window.scrollY + rect.height
};
if (rect.top < window.scrollY) {
this.moveRectDown(rect, window.scrollY, el);
}
if (rect.bottom > window.scrollY + window.innerHeight) {
this.moveRectUp(rect, window.scrollY + window.innerHeight, el);
}
selectedPos = new Selection(
rect.left, rect.top, rect.right, rect.bottom
);
if (autoDetectRect) {
selectedPos = autoDetectRect;
autoDetectRect = null;
mousedownPos = null;
ui.Box.display(selectedPos, standardDisplayCallbacks);
sendEvent("make-selection", "selection-click", eventOptionsForBox(rect));
sendEvent("make-selection", "selection-click", eventOptionsForBox(selectedPos));
setState("selected");
if (isChrome) {
chromeShooter.sendAnalyticEvent("addon", "autoselect");
Expand All @@ -443,56 +490,6 @@ stateHandlers.draggingReady = {
}
},

moveRectDown: function (rect, top, el) {
let closest = null;
function traverse(el) {
let elRect = el.getBoundingClientRect();
let elTop = elRect.top + window.scrollY;
if (elTop > top) {
if (closest === null || closest > elTop) {
closest = elTop;
}
}
if (closest === null || elTop < closest) {
for (let i=0; i<el.childNodes.length; i++) {
let child = el.childNodes[i];
if (child && child.nodeType == document.ELEMENT_NODE) {
traverse(child);
}
}
}
}
traverse(el);
if (closest !== null) {
rect.top = closest;
}
},

moveRectUp: function (rect, bottom, el) {
let closest = null;
function traverse(el) {
let elRect = el.getBoundingClientRect();
let elBottom = elRect.top + elRect.height + window.scrollY;
if (elBottom < bottom) {
if (closest === null || closest < elBottom) {
closest = elBottom;
}
}
if (closest === null || elBottom > closest) {
for (let i=0; i<el.childNodes.length; i++) {
let child = el.childNodes[i];
if (child && child.nodeType == document.ELEMENT_NODE) {
traverse(child);
}
}
}
}
traverse(el);
if (closest !== null) {
rect.bottom = closest;
}
},

click: function (event) {
this.mouseup(event);
},
Expand Down
23 changes: 23 additions & 0 deletions static/css/inline-selection.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,22 @@ $overlay-z-index: 9999999999;
display: none;
}

.pageshot-no-pointer-event .pageshot-highlight,
.pageshot-no-pointer-event .pageshot-mover,
.pageshot-no-pointer-event .pageshot-bghighlight,
.pageshot-no-pointer-event .pageshot-textbutton,
.pageshot-no-pointer-event .pageshot-horizcross,
.pageshot-no-pointer-event .pageshot-vertcross,
.pageshot-no-pointer-event .pageshot-help-message,
.pageshot-no-pointer-event .pageshot-preview-overlay,
.pageshot-no-pointer-event .pageshot-crosshair-pulse,
.pageshot-no-pointer-event .pageshot-crosshair-inner,
.pageshot-no-pointer-event .pageshot-myshots-reminder,
.pageshot-no-pointer-event .pageshot-saver,
.pageshot-no-pointer-event .pageshot-select-mode-background {
pointer-events: none;
}

.pageshot-hide-movers .pageshot-mover {
display: none;
}
Expand Down Expand Up @@ -525,6 +541,13 @@ $overlay-z-index: 9999999999;
font-size: 13px;
}

.pageshot-hover-highlight {
position: absolute;
border: 1px solid rgba(#fff, 0.3);
pointer-events: none;
z-index: $overlay-z-index+1;
}

.pageshot-saver {
@extend .pageshot-reset;
position: fixed;
Expand Down

0 comments on commit 66fa62f

Please sign in to comment.