From 2d7fff611ad0f50b9661fedb20915c9ddfc47003 Mon Sep 17 00:00:00 2001 From: gorhill Date: Sun, 10 May 2015 09:28:50 -0400 Subject: [PATCH] make popup sticky in top-right corner --- src/css/logger-ui.css | 30 ++++------- src/js/logger-ui.js | 123 +++++------------------------------------- src/logger-ui.html | 3 +- 3 files changed, 25 insertions(+), 131 deletions(-) diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 080c211bc..f5fd566a3 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -145,7 +145,7 @@ body.compactView #content td { } #content table tr td:nth-of-type(1) { - text-align: center; + text-align: right; white-space: nowrap; } #content table tr td:nth-of-type(2) { @@ -167,7 +167,7 @@ body:not(.popupOn) #content table tr.canMtx td:nth-of-type(2) { cursor: zoom-in; } body:not(.popupOn) #content table tr.canMtx td:nth-of-type(2):hover { - background: white; + background: #ccc; } #content table tr.cat_net td:nth-of-type(3), #content table tr.cat_cosmetic td:nth-of-type(3) { @@ -198,9 +198,12 @@ body.colorBlind #content table tr.allowed td:nth-of-type(6) b { background: white; border: 1px solid gray; border-radius: 3px; + box-sizing: border-box; display: none; overflow: hidden; position: fixed; + right: 0; + top: 0; z-index: 200; } body.popupOn #popupContainer { @@ -209,15 +212,12 @@ body.popupOn #popupContainer { #popupContainer > div { background: #aaa; border: 0; - cursor: -webkit-grab; - cursor: grab; - height: 1.2em; } body[dir="ltr"] #popupContainer > div { - direction: rtl; + text-align: right; } body[dir="rtl"] #popupContainer > div { - direction: ltr; + text-align: left; } #popupContainer > div > span { color: #eee; @@ -235,17 +235,9 @@ body[dir="rtl"] #popupContainer > div { margin: 0; width: 100%; } -#movingOverlay { - bottom: 0; +#popupContainer.hide { + width: 6em !important; + } +#popupContainer.hide > iframe { display: none; - left: 0; - position: fixed; - right: 0; - top: 0; - z-index: 300; - } -#popupContainer.moving ~ #movingOverlay { - cursor: -webkit-grabbing; - cursor: grabbing; - display: block; } diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index 13bac8464..582df6fea 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -567,7 +567,6 @@ var popupManager = (function() { var realTabId = null; var localTabId = null; var container = null; - var movingOverlay = null; var popup = null; var popupObserver = null; var style = null; @@ -578,96 +577,23 @@ var popupManager = (function() { '}' ].join('\n'); - // Related to moving the popup around - var xnormal, ynormal, crect, dx, dy, vw, vh; - - // 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 ) { + var resizePopup = function() { + if ( popup === null ) { 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; if ( popupBody.clientWidth !== 0 && container.clientWidth !== popupBody.clientWidth ) { - container.style.width = popupBody.clientWidth + 'px'; + container.style.setProperty('width', popupBody.clientWidth + 'px'); } if ( popupBody.clientHeight !== 0 && popup.clientHeight !== popupBody.clientHeight ) { - popup.style.height = popupBody.clientHeight + 'px'; + popup.style.setProperty('height', popupBody.clientHeight + 'px'); } }; + var toggleSize = function() { + container.classList.toggle('hide'); + }; + var onLoad = function() { resizePopup(); popupObserver.observe(popup.contentDocument.body, { @@ -687,26 +613,10 @@ var popupManager = (function() { 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'); - updateViewportData(); - positionFromNormal(x, y); - // Window controls - container.querySelector('div > span:first-child').addEventListener('click', toggleOff); - container.querySelector('div').addEventListener('mousedown', onMouseDown); + container.querySelector('div > span:nth-of-type(1)').addEventListener('click', toggleSize); + container.querySelector('div > span:nth-of-type(2)').addEventListener('click', toggleOff); popup = document.createElement('iframe'); popup.addEventListener('load', onLoad); @@ -723,16 +633,9 @@ var popupManager = (function() { var toggleOff = function() { document.body.classList.remove('popupOn'); - // Just in case - if ( movingOverlay !== null ) { - 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); + container.querySelector('div > span:nth-of-type(1)').removeEventListener('click', toggleSize); + container.querySelector('div > span:nth-of-type(2)').removeEventListener('click', toggleOff); + container.classList.remove('hide'); popup.removeEventListener('load', onLoad); popupObserver.disconnect(); diff --git a/src/logger-ui.html b/src/logger-ui.html index 143a857f7..af09ca274 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -24,9 +24,8 @@
-
+
 
-