mirror of
https://github.com/gorhill/uMatrix.git
synced 2024-09-29 16:51:13 +13:00
this fixes popup matrix position/resize issues
This commit is contained in:
parent
8c506d4d73
commit
486183cbe6
4 changed files with 49 additions and 135 deletions
|
@ -1541,6 +1541,7 @@ vAPI.toolbarButton.onBeforeCreated = function(doc) {
|
||||||
|
|
||||||
var iframe = doc.createElement('iframe');
|
var iframe = doc.createElement('iframe');
|
||||||
iframe.setAttribute('type', 'content');
|
iframe.setAttribute('type', 'content');
|
||||||
|
iframe.setAttribute('overflow-x', 'hidden');
|
||||||
|
|
||||||
doc.getElementById('PanelUI-multiView')
|
doc.getElementById('PanelUI-multiView')
|
||||||
.appendChild(panel)
|
.appendChild(panel)
|
||||||
|
@ -1562,10 +1563,20 @@ vAPI.toolbarButton.onBeforeCreated = function(doc) {
|
||||||
var width = body.clientWidth;
|
var width = body.clientWidth;
|
||||||
// https://github.com/chrisaljoudi/uBlock/issues/730
|
// https://github.com/chrisaljoudi/uBlock/issues/730
|
||||||
// Voodoo programming: this recipe works
|
// Voodoo programming: this recipe works
|
||||||
panel.style.height = iframe.style.height = height.toString() + 'px';
|
panel.style.setProperty('height', height + 'px');
|
||||||
panel.style.width = iframe.style.width = width.toString() + 'px';
|
iframe.style.setProperty('height', height + 'px');
|
||||||
if ( iframe.clientHeight !== height || iframe.clientWidth !== width ) {
|
// Adjust width for presence/absence of vertical scroll bar which may
|
||||||
|
// have appeared as a result of last operation.
|
||||||
|
panel.style.setProperty('width', width + 'px');
|
||||||
|
var cw = panel.clientWidth;
|
||||||
|
var dw = iframe.contentWindow.document.documentElement.clientWidth;
|
||||||
|
if ( cw !== dw ) {
|
||||||
|
width = 2 * cw - dw;
|
||||||
|
panel.style.setProperty('width', width + 'px');
|
||||||
|
}
|
||||||
|
if ( iframe.clientHeight !== height || panel.clientWidth !== width ) {
|
||||||
delayedResize();
|
delayedResize();
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
var onPopupReady = function() {
|
var onPopupReady = function() {
|
||||||
|
|
|
@ -181,6 +181,8 @@ body:not(.popupOn) #content table tr.canMtx td:nth-of-type(2):hover {
|
||||||
display: none;
|
display: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
right: 1em;
|
||||||
|
top: 0;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
body.popupOn #popupContainer {
|
body.popupOn #popupContainer {
|
||||||
|
@ -190,15 +192,10 @@ body.popupOn #popupContainer {
|
||||||
background: #444;
|
background: #444;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid white;
|
border-bottom: 1px solid white;
|
||||||
cursor: -webkit-grab;
|
height: 1.8em;
|
||||||
cursor: grab;
|
|
||||||
height: 2em;
|
|
||||||
}
|
}
|
||||||
body[dir="ltr"] #popupContainer > div {
|
#popupContainer > div {
|
||||||
direction: rtl;
|
text-align: right;
|
||||||
}
|
|
||||||
body[dir="rtl"] #popupContainer > div {
|
|
||||||
direction: ltr;
|
|
||||||
}
|
}
|
||||||
#popupContainer > div > span {
|
#popupContainer > div > span {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
|
@ -216,17 +213,9 @@ body[dir="rtl"] #popupContainer > div {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#movingOverlay {
|
#popupContainer.hide {
|
||||||
bottom: 0;
|
width: 6em !important;
|
||||||
|
}
|
||||||
|
#popupContainer.hide > iframe {
|
||||||
display: none;
|
display: none;
|
||||||
left: 0;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 300;
|
|
||||||
}
|
|
||||||
#popupContainer.moving ~ #movingOverlay {
|
|
||||||
cursor: -webkit-grabbing;
|
|
||||||
cursor: grabbing;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -557,7 +557,6 @@ var popupManager = (function() {
|
||||||
var realTabId = null;
|
var realTabId = null;
|
||||||
var localTabId = null;
|
var localTabId = null;
|
||||||
var container = null;
|
var container = null;
|
||||||
var movingOverlay = null;
|
|
||||||
var popup = null;
|
var popup = null;
|
||||||
var popupObserver = null;
|
var popupObserver = null;
|
||||||
var style = null;
|
var style = null;
|
||||||
|
@ -568,94 +567,34 @@ var popupManager = (function() {
|
||||||
'}'
|
'}'
|
||||||
].join('\n');
|
].join('\n');
|
||||||
|
|
||||||
// Related to moving the popup around
|
var resizePopup = function() {
|
||||||
var xnormal, ynormal, crect, dx, dy, vw, vh;
|
if ( popup === null ) {
|
||||||
|
|
||||||
// Viewport data assumed to be properly set up
|
|
||||||
var positionFromNormal = function(x, y) {
|
|
||||||
if ( typeof x === 'number' ) {
|
|
||||||
if ( x < 0.5 ) {
|
|
||||||
container.style.setProperty('left', (x * vw) + 'px');
|
|
||||||
container.style.removeProperty('right');
|
|
||||||
} else {
|
|
||||||
container.style.removeProperty('left');
|
|
||||||
container.style.setProperty('right', ((1 - x) * vw) + 'px');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if ( typeof y === 'number' ) {
|
|
||||||
if ( y < 0.5 ) {
|
|
||||||
container.style.setProperty('top', (y * vh) + 'px');
|
|
||||||
container.style.removeProperty('bottom');
|
|
||||||
} else {
|
|
||||||
container.style.removeProperty('top');
|
|
||||||
container.style.setProperty('bottom', ((1 - y) * vh) + 'px');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// TODO: adjust size
|
|
||||||
};
|
|
||||||
var updateViewportData = function() {
|
|
||||||
crect = container.getBoundingClientRect();
|
|
||||||
vw = document.documentElement.clientWidth - crect.width;
|
|
||||||
vh = document.documentElement.clientHeight - crect.height;
|
|
||||||
};
|
|
||||||
var toNormalX = function(x) {
|
|
||||||
return xnormal = Math.max(Math.min(x / vw, 1), 0);
|
|
||||||
};
|
|
||||||
var toNormalY = function(y) {
|
|
||||||
return ynormal = Math.max(Math.min(y / vh, 1), 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
var onMouseMove = function(ev) {
|
|
||||||
updateViewportData();
|
|
||||||
positionFromNormal(
|
|
||||||
toNormalX(ev.clientX + dx),
|
|
||||||
toNormalY(ev.clientY + dy)
|
|
||||||
);
|
|
||||||
ev.stopPropagation();
|
|
||||||
ev.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
var onMouseUp = function(ev) {
|
|
||||||
updateViewportData();
|
|
||||||
positionFromNormal(
|
|
||||||
toNormalX(ev.clientX + dx),
|
|
||||||
toNormalY(ev.clientY + dy)
|
|
||||||
);
|
|
||||||
movingOverlay.removeEventListener('mouseup', onMouseUp);
|
|
||||||
movingOverlay.removeEventListener('mousemove', onMouseMove);
|
|
||||||
movingOverlay = null;
|
|
||||||
container.classList.remove('moving');
|
|
||||||
vAPI.localStorage.setItem('popupLastPosition', JSON.stringify({
|
|
||||||
xnormal: xnormal,
|
|
||||||
ynormal: ynormal
|
|
||||||
}));
|
|
||||||
ev.stopPropagation();
|
|
||||||
ev.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
var onMouseDown = function(ev) {
|
|
||||||
if ( ev.target !== ev.currentTarget ) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
container.classList.add('moving');
|
|
||||||
updateViewportData();
|
|
||||||
dx = crect.left - ev.clientX;
|
|
||||||
dy = crect.top - ev.clientY;
|
|
||||||
movingOverlay = document.getElementById('movingOverlay');
|
|
||||||
movingOverlay.addEventListener('mousemove', onMouseMove, true);
|
|
||||||
movingOverlay.addEventListener('mouseup', onMouseUp, true);
|
|
||||||
ev.stopPropagation();
|
|
||||||
ev.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
var resizePopup = function() {
|
|
||||||
var popupBody = popup.contentWindow.document.body;
|
var popupBody = popup.contentWindow.document.body;
|
||||||
if ( popupBody.clientWidth !== 0 && container.clientWidth !== popupBody.clientWidth ) {
|
if ( popupBody.clientWidth !== 0 && container.clientWidth !== popupBody.clientWidth ) {
|
||||||
container.style.width = popupBody.clientWidth + 'px';
|
container.style.setProperty('width', popupBody.clientWidth + 'px');
|
||||||
}
|
}
|
||||||
|
popup.style.removeProperty('height');
|
||||||
if ( popupBody.clientHeight !== 0 && popup.clientHeight !== popupBody.clientHeight ) {
|
if ( popupBody.clientHeight !== 0 && popup.clientHeight !== popupBody.clientHeight ) {
|
||||||
popup.style.height = popupBody.clientHeight + 'px';
|
popup.style.setProperty('height', popupBody.clientHeight + 'px');
|
||||||
}
|
}
|
||||||
|
var ph = document.documentElement.clientHeight;
|
||||||
|
var crect = container.getBoundingClientRect();
|
||||||
|
if ( crect.height > ph ) {
|
||||||
|
popup.style.setProperty('height', 'calc(' + ph + 'px - 1.8em)');
|
||||||
|
}
|
||||||
|
// Adjust width for presence/absence of vertical scroll bar which may
|
||||||
|
// have appeared as a result of last operation.
|
||||||
|
var cw = container.clientWidth;
|
||||||
|
var dw = popup.contentWindow.document.documentElement.clientWidth;
|
||||||
|
if ( cw !== dw ) {
|
||||||
|
container.style.setProperty('width', (2 * cw - dw) + 'px');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var toggleSize = function() {
|
||||||
|
container.classList.toggle('hide');
|
||||||
};
|
};
|
||||||
|
|
||||||
var onLoad = function() {
|
var onLoad = function() {
|
||||||
|
@ -677,26 +616,10 @@ var popupManager = (function() {
|
||||||
realTabId = noTabId;
|
realTabId = noTabId;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use last normalized position if one is defined.
|
|
||||||
// Default to top-right.
|
|
||||||
var x = 1, y = 0;
|
|
||||||
var json = vAPI.localStorage.getItem('popupLastPosition');
|
|
||||||
if ( json ) {
|
|
||||||
try {
|
|
||||||
var popupLastPosition = JSON.parse(json);
|
|
||||||
x = popupLastPosition.xnormal;
|
|
||||||
y = popupLastPosition.ynormal;
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
container = document.getElementById('popupContainer');
|
container = document.getElementById('popupContainer');
|
||||||
updateViewportData();
|
|
||||||
positionFromNormal(x, y);
|
|
||||||
|
|
||||||
// Window controls
|
container.querySelector('div > span:nth-of-type(1)').addEventListener('click', toggleSize);
|
||||||
container.querySelector('div > span:first-child').addEventListener('click', toggleOff);
|
container.querySelector('div > span:nth-of-type(2)').addEventListener('click', toggleOff);
|
||||||
container.querySelector('div').addEventListener('mousedown', onMouseDown);
|
|
||||||
|
|
||||||
popup = document.createElement('iframe');
|
popup = document.createElement('iframe');
|
||||||
popup.addEventListener('load', onLoad);
|
popup.addEventListener('load', onLoad);
|
||||||
|
@ -713,16 +636,8 @@ var popupManager = (function() {
|
||||||
var toggleOff = function() {
|
var toggleOff = function() {
|
||||||
document.body.classList.remove('popupOn');
|
document.body.classList.remove('popupOn');
|
||||||
|
|
||||||
// Just in case
|
container.querySelector('div > span:nth-of-type(1)').removeEventListener('click', toggleSize);
|
||||||
if ( movingOverlay !== null ) {
|
container.querySelector('div > span:nth-of-type(2)').removeEventListener('click', toggleOff);
|
||||||
movingOverlay.removeEventListener('mousemove', onMouseMove, true);
|
|
||||||
movingOverlay.removeEventListener('mouseup', onMouseUp, true);
|
|
||||||
movingOverlay = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Window controls
|
|
||||||
container.querySelector('div > span:first-child').removeEventListener('click', toggleOff);
|
|
||||||
container.querySelector('div').removeEventListener('mousedown', onMouseDown);
|
|
||||||
|
|
||||||
popup.removeEventListener('load', onLoad);
|
popup.removeEventListener('load', onLoad);
|
||||||
popupObserver.disconnect();
|
popupObserver.disconnect();
|
||||||
|
|
|
@ -25,9 +25,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="popupContainer">
|
<div id="popupContainer">
|
||||||
<div><span></span></div>
|
<div><span></span> <span></span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="movingOverlay"></div>
|
|
||||||
|
|
||||||
<div style="display: none;">
|
<div style="display: none;">
|
||||||
<div id="renderedURLTemplate"><span><span></span><b></b><span></span></span></div>
|
<div id="renderedURLTemplate"><span><span></span><b></b><span></span></span></div>
|
||||||
|
|
Loading…
Reference in a new issue