From 53b9aeeec7f6ac72567897a77a50585764f40f2e Mon Sep 17 00:00:00 2001 From: HF Date: Fri, 19 Aug 2022 02:56:24 +0200 Subject: [PATCH] send actions to popUps log proxycheck returns again --- src/client.js | 3 ++ src/components/ModCanvastools.jsx | 4 +- src/components/Window.jsx | 19 +------- src/components/embeds/TikTok.jsx | 4 +- src/controls/PixelPainterControls.js | 3 -- src/core/exportGPL.js | 2 +- src/core/popUps.js | 69 ++++++++++++++++++++++++++++ src/store/README.md | 2 + src/store/actions/index.js | 2 - src/store/middleware/parent.js | 33 +++++++++++++ src/store/middleware/popUps.js | 29 ++++++++++++ src/store/store.js | 2 + src/store/storeWin.js | 2 + src/ui/ChunkLoader2D.js | 12 ++--- src/utils/proxycheck.js | 7 +-- src/utils/storeSelection.js | 23 ---------- src/win.js | 1 + 17 files changed, 157 insertions(+), 60 deletions(-) create mode 100644 src/core/popUps.js create mode 100644 src/store/middleware/parent.js create mode 100644 src/store/middleware/popUps.js delete mode 100644 src/utils/storeSelection.js diff --git a/src/client.js b/src/client.js index 8c50d4e..055ca0c 100644 --- a/src/client.js +++ b/src/client.js @@ -108,6 +108,9 @@ function init() { window.addEventListener('resize', onWindowResize); onWindowResize(); + // listen ofr messages from popups + window.addEventListener('message', store.dispatch); + store.dispatch(initTimer()); store.dispatch(fetchMe()); diff --git a/src/components/ModCanvastools.jsx b/src/components/ModCanvastools.jsx index 416b371..7d087ea 100644 --- a/src/components/ModCanvastools.jsx +++ b/src/components/ModCanvastools.jsx @@ -150,8 +150,8 @@ function ModCanvastools() { const [brcoords, selectBRCoords] = useState(keptState.brcoords); const [tlrcoords, selectTLRCoords] = useState(keptState.tlrcoords); const [brrcoords, selectBRRCoords] = useState(keptState.brrcoords); - const [tlccoords, selectTLCCoords] = useState(keptState.tlrcoords); - const [brccoords, selectBRCCoords] = useState(keptState.brrcoords); + const [tlccoords, selectTLCCoords] = useState(keptState.tlccoords); + const [brccoords, selectBRCCoords] = useState(keptState.brccoords); const [resp, setResp] = useState(null); const [cleanerstats, setCleanerStats] = useState({}); const [submitting, setSubmitting] = useState(false); diff --git a/src/components/Window.jsx b/src/components/Window.jsx index 6757d51..fd29552 100644 --- a/src/components/Window.jsx +++ b/src/components/Window.jsx @@ -8,6 +8,7 @@ import React, { import { useSelector, useDispatch } from 'react-redux'; import { t } from 'ttag'; +import popUps from '../core/popUps'; import { moveWindow, removeWindow, @@ -81,23 +82,7 @@ const Window = ({ id }) => { } = position; const popUp = useCallback((evt) => { - let left; - let top; - try { - left = Math.round(window.top.screenX + xPos); - top = Math.round(window.top.screenY + yPos); - if (Number.isNaN(left) || Number.isNaN(top)) { - throw new Error('NaN'); - } - } catch { - left = 0; - top = 0; - } - window.lmao = window.open( - './win', - 'lol', - `popup=yes,width=${width},height=${height},left=${left},top=${top},toolbar=no,status=no,directories=no,menubar=no`, - ); + popUps.open(xPos, yPos, width, height); close(evt); }, [xPos, yPos, width, height]); diff --git a/src/components/embeds/TikTok.jsx b/src/components/embeds/TikTok.jsx index 8cc87cf..c324309 100644 --- a/src/components/embeds/TikTok.jsx +++ b/src/components/embeds/TikTok.jsx @@ -18,10 +18,8 @@ const TikTok = ({ url }) => { useEffect(() => { async function fetchData() { - const prot = window.location.protocol.startsWith('http') - ? window.location.protocol : 'https'; // eslint-disable-next-line max-len - const tkurl = `${prot}//www.tiktok.com/oembed?url=${encodeURIComponent(url)}`; + const tkurl = `${window.location.protocol}//www.tiktok.com/oembed?url=${encodeURIComponent(url)}`; const resp = await fetch(tkurl); const embedData = await resp.json(); if (embedData.html) { diff --git a/src/controls/PixelPainterControls.js b/src/controls/PixelPainterControls.js index 5467d83..cbf2dc2 100644 --- a/src/controls/PixelPainterControls.js +++ b/src/controls/PixelPainterControls.js @@ -78,8 +78,6 @@ class PixelPlainterControls { viewport.addEventListener('mousedown', this.onMouseDown, false); viewport.addEventListener('mousemove', this.onMouseMove, false); viewport.addEventListener('mouseup', this.onMouseUp, false); - // TODO check if we can go passive here - // viewport.addEventListener('wheel', this.onWheel, { passive: true }); viewport.addEventListener('wheel', this.onWheel, false); viewport.addEventListener('touchstart', this.onTouchStart, false); viewport.addEventListener('touchend', this.onTouchEnd, false); @@ -486,7 +484,6 @@ class PixelPlainterControls { const { store, viewport } = this; viewport.style.cursor = 'auto'; store.dispatch(unsetHover()); - store.dispatch(onViewFinishChange()); this.holdPainting = 0; this.clearTabTimeout(); } diff --git a/src/core/exportGPL.js b/src/core/exportGPL.js index fae2d04..19a0627 100644 --- a/src/core/exportGPL.js +++ b/src/core/exportGPL.js @@ -1,5 +1,5 @@ /* - * + * export palette in gimp format */ function appendNumberText(number) { diff --git a/src/core/popUps.js b/src/core/popUps.js new file mode 100644 index 0000000..22e59af --- /dev/null +++ b/src/core/popUps.js @@ -0,0 +1,69 @@ +/* + * keeping track of open popups + */ + +class PopUps { + constructor() { + this.wins = []; + this.origin = window.location.origin; + this.closeAll = this.closeAll.bind(this); + window.addEventListener('beforeunload', this.closeAll); + } + + open(xPos, yPos, width, height) { + let left; + let top; + try { + left = Math.round(window.top.screenX + xPos); + top = Math.round(window.top.screenY + yPos); + if (Number.isNaN(left) || Number.isNaN(top)) { + throw new Error('NaN'); + } + } catch { + left = 0; + top = 0; + } + try { + const newWindow = window.open( + './win', + 'lol', + `popup=yes,width=${width},height=${height},left=${left},top=${top},toolbar=no,status=no,directories=no,menubar=no`, + ); + this.wins.push(newWindow); + } catch { + // nothing, just don't bubble up + } + } + + dispatch(msg) { + const { wins } = this; + console.log('sending', msg); + try { + for (let i = 0; i < wins.length; i += 1) { + const win = wins[i]; + if (win.closed) { + wins.splice(i, 1); + i -= 1; + continue; + } + win.postMessage(msg, this.origin); + } + } catch { + return false; + } + return true; + } + + closeAll() { + while (this.wins.length) { + const win = this.wins.pop(); + win.close(); + } + } +} + +const popUps = new PopUps(); + +window.lol = popUps.wins; + +export default popUps; diff --git a/src/store/README.md b/src/store/README.md index 75d161d..9c8aa62 100644 --- a/src/store/README.md +++ b/src/store/README.md @@ -1,3 +1,5 @@ # Store We use redux as a state manager of our application: https://redux.js.org/ + +All actions that have a p/ prefix are shared between popups with the parent / popUp middlewares diff --git a/src/store/actions/index.js b/src/store/actions/index.js index 718251e..875d87e 100644 --- a/src/store/actions/index.js +++ b/src/store/actions/index.js @@ -235,12 +235,10 @@ export function preLoadedBigChunk( export function receiveBigChunk( center, - chunk, ) { return { type: 'REC_BIG_CHUNK', center, - chunk, }; } diff --git a/src/store/middleware/parent.js b/src/store/middleware/parent.js new file mode 100644 index 0000000..6c36c27 --- /dev/null +++ b/src/store/middleware/parent.js @@ -0,0 +1,33 @@ +/* + * send and receive actions from parent window + */ + +const BLACKLIST = [ + 'SET_HOVER', + 'UNSET_HOVER', + 'SET_SCALE', + 'SET_VIEW_COORDINATES', +]; +const { origin } = window.location; + +export default () => (next) => (action) => { + if (action instanceof MessageEvent) { + if (action.origin !== origin) { + return null; + } + return next(action.data); + } + + if (window.opener + && !window.opener.closed + && !BLACKLIST.includes(action.type) + ) { + try { + window.opener.postMessage(action, origin); + } catch { + // nothing + } + } + + return next(action); +}; diff --git a/src/store/middleware/popUps.js b/src/store/middleware/popUps.js new file mode 100644 index 0000000..f79dc74 --- /dev/null +++ b/src/store/middleware/popUps.js @@ -0,0 +1,29 @@ +/* + * send and receive actions from popups + */ +import popUps from '../../core/popUps'; + +const BLACKLIST = [ + 'SET_HOVER', + 'UNSET_HOVER', + 'SET_SCALE', + 'SET_VIEW_COORDINATES', +]; + +export default () => (next) => (action) => { + if (action instanceof MessageEvent) { + if (action.origin !== window.location.origin) { + return null; + } + return next(action.data); + } + + if (popUps.wins.length + && !BLACKLIST.includes(action.type) + && action.type.indexOf('WIN') === -1 + ) { + popUps.dispatch(action); + } + + return next(action); +}; diff --git a/src/store/store.js b/src/store/store.js index c566adb..23ebb25 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -34,6 +34,7 @@ import array from './middleware/array'; import promise from './middleware/promise'; import notifications from './middleware/notifications'; import title from './middleware/title'; +import popUps from './middleware/popUps'; import extensions from './middleware/extensions'; const windowsPersist = persistReducer({ @@ -59,6 +60,7 @@ const store = createStore( thunk, promise, array, + popUps, audio, notifications, title, diff --git a/src/store/storeWin.js b/src/store/storeWin.js index 5f41fd8..02ae8b6 100644 --- a/src/store/storeWin.js +++ b/src/store/storeWin.js @@ -21,6 +21,7 @@ import win from './reducers/win'; * middleware */ import promise from './middleware/promise'; +import parent from './middleware/parent'; const reducers = combineReducers({ ...sharedReducers, @@ -33,6 +34,7 @@ const store = createStore( applyMiddleware( thunk, promise, + parent, ), ); diff --git a/src/ui/ChunkLoader2D.js b/src/ui/ChunkLoader2D.js index ce3ad5f..e999c57 100644 --- a/src/ui/ChunkLoader2D.js +++ b/src/ui/ChunkLoader2D.js @@ -264,9 +264,9 @@ class ChunkLoader { try { const img = await loadImage(url); chunkRGB.fromImage(img); - this.store.dispatch(receiveBigChunk(center, chunkRGB)); + this.store.dispatch(receiveBigChunk(center)); } catch (error) { - this.store.dispatch(receiveBigChunkFailure(center, error)); + this.store.dispatch(receiveBigChunkFailure(center, error.message)); if (historicalTime) { chunkRGB.empty(true); } else { @@ -289,13 +289,13 @@ class ChunkLoader { } else { throw new Error('Chunk response was invalid'); } - this.store.dispatch(receiveBigChunk(center, chunkRGB)); + this.store.dispatch(receiveBigChunk(center)); } else { throw new Error('Network response was not ok.'); } } catch (error) { chunkRGB.empty(); - this.store.dispatch(receiveBigChunkFailure(center, error)); + this.store.dispatch(receiveBigChunkFailure(center, error.message)); } } @@ -306,9 +306,9 @@ class ChunkLoader { const url = `tiles/${this.canvasId}/${zoom}/${cx}/${cy}.webp`; const img = await loadImage(url); chunkRGB.fromImage(img); - this.store.dispatch(receiveBigChunk(center, chunkRGB)); + this.store.dispatch(receiveBigChunk(center)); } catch (error) { - this.store.dispatch(receiveBigChunkFailure(center, error)); + this.store.dispatch(receiveBigChunkFailure(center, error.message)); chunkRGB.empty(); } } diff --git a/src/utils/proxycheck.js b/src/utils/proxycheck.js index cca16b0..9836168 100644 --- a/src/utils/proxycheck.js +++ b/src/utils/proxycheck.js @@ -25,7 +25,7 @@ class PcKeyProvider { if (keys.length) { logger.info(`Loaded pc Keys: ${keys}`); } else { - logger.info(`You have to define PROXYCHECK_KEY to use proxycheck.io`); + logger.info('You have to define PROXYCHECK_KEY to use proxycheck.io'); } this.availableKeys = keys; this.deniedKeys = []; @@ -93,7 +93,6 @@ function reqProxyCheck(ips) { } const postData = `ips=${ips.join(',')}`; const path = `/v2/?vpn=1&asn=1&key=${key}`; - logger.info(`Request for ${postData}`); const options = { hostname: 'proxycheck.io', @@ -120,7 +119,9 @@ function reqProxyCheck(ips) { res.on('end', () => { try { - const result = JSON.parse(data.join('')); + const jsonString = data.join(''); + logger.info(`${postData}: ${jsonString}`); + const result = JSON.parse(jsonString); if (result.status !== 'ok') { if (result.status === 'error' && ips.length === 1) { /* diff --git a/src/utils/storeSelection.js b/src/utils/storeSelection.js deleted file mode 100644 index c1a834f..0000000 --- a/src/utils/storeSelection.js +++ /dev/null @@ -1,23 +0,0 @@ -export function saveSelection() { - if (window.getSelection) { - const sel = window.getSelection(); - if (sel.getRangeAt && sel.rangeCount) { - return sel.getRangeAt(0); - } - } else if (document.selection && document.selection.createRange) { - return document.selection.createRange(); - } - return null; -} - -export function restoreSelection(range) { - if (range) { - if (window.getSelection) { - const sel = window.getSelection(); - sel.removeAllRanges(); - sel.addRange(range); - } else if (document.selection && range.select) { - range.select(); - } - } -} diff --git a/src/win.js b/src/win.js index 8399741..7dc924c 100644 --- a/src/win.js +++ b/src/win.js @@ -10,4 +10,5 @@ document.addEventListener('DOMContentLoaded', () => { // eslint-disable-next-line no-console console.log('hello'); renderAppWin(document.getElementById('app'), store); + window.addEventListener('message', store.dispatch); });