send actions to popUps

log proxycheck returns again

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());

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);

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]);
 

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) {

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();
   }

src/core/exportGPL.js

@@ -1,5 +1,5 @@
 /*
- *
+ * export palette in gimp format
  */
 
 function appendNumberText(number) {

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;

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

src/store/actions/index.js

@@ -235,12 +235,10 @@ export function preLoadedBigChunk(
 
 export function receiveBigChunk(
   center,
-  chunk,
 ) {
   return {
     type: 'REC_BIG_CHUNK',
     center,
-    chunk,
   };
 }
 

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);
+};

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);
+};

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,

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,
   ),
 );
 

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();
     }
   }

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) {
               /*

src/utils/storeSelection.js

@@ -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();
-    }
-  }
-}

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);
 });