From e2346bc32ae1e40c6eaaefcabbbb3114f499a76c Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 13 Dec 2022 21:54:16 +0800 Subject: [PATCH] Shift+click to open compose window - Fixes for closing - Easier code for checking if can close window --- src/app.jsx | 18 +++++-- src/components/compose.jsx | 100 +++++++++++++++++-------------------- src/compose.jsx | 10 +++- src/utils/open-compose.js | 23 +++++++++ 4 files changed, 94 insertions(+), 57 deletions(-) create mode 100644 src/utils/open-compose.js diff --git a/src/app.jsx b/src/app.jsx index 4767c4d6..93f5e27a 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -18,6 +18,7 @@ import Settings from './pages/settings'; import Status from './pages/status'; import Welcome from './pages/welcome'; import { getAccessToken } from './utils/auth'; +import openCompose from './utils/open-compose'; import states from './utils/states'; import store from './utils/store'; @@ -224,7 +225,17 @@ export function App() { @@ -268,9 +279,10 @@ export function App() { } editStatus={snapStates.showCompose?.editStatus || null} draftStatus={snapStates.showCompose?.draftStatus || null} - onClose={(result) => { + onClose={(results) => { + const { newStatus } = results || {}; states.showCompose = false; - if (result) { + if (newStatus) { states.reloadStatusPage++; } }} diff --git a/src/components/compose.jsx b/src/components/compose.jsx index 1d6380ca..bffca125 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import stringLength from 'string-length'; import emojifyText from '../utils/emojify-text'; +import openCompose from '../utils/open-compose'; import store from '../utils/store'; import visibilityIconsMap from '../utils/visibility-icons-map'; @@ -207,30 +208,36 @@ export default ({ const canClose = () => { const { value, dataset } = textareaRef.current; - // check for non-ID media attachments - const hasNonIDMediaAttachments = + // check for status and media attachments with IDs + const hasIDMediaAttachments = mediaAttachments.length > 0 && - mediaAttachments.some((media) => !media.id); + mediaAttachments.every((media) => media.id); + if (!value && hasIDMediaAttachments) { + console.log('canClose', { value, mediaAttachments }); + return true; + } // check if status contains only "@acct", if replying - const hasAcct = + const isSelf = replyToStatus?.account.id === currentAccount; + const hasOnlyAcct = replyToStatus && value.trim() === `@${replyToStatus.account.acct}`; + if (!isSelf && hasOnlyAcct) { + console.log('canClose', { isSelf, hasOnlyAcct }); + return true; + } - // check if status is different than source - const differentThanSource = dataset?.source && value !== dataset.source; + // check if status is same with source + const sameWithSource = value === dataset?.source; + if (sameWithSource) { + console.log('canClose', { sameWithSource }); + return true; + } - console.log({ - value, - hasAcct, - differentThanSource, - hasNonIDMediaAttachments, - }); + return false; + }; - if ( - (value && !hasAcct) || - differentThanSource || - hasNonIDMediaAttachments - ) { + const confirmClose = () => { + if (canClose()) { const yes = confirm(beforeUnloadCopy); return yes; } @@ -283,30 +290,11 @@ export default ({ } } - const url = new URL('/compose/', window.location); - const screenWidth = window.screen.width; - const screenHeight = window.screen.height; - const left = Math.max(0, (screenWidth - 600) / 2); - const top = Math.max(0, (screenHeight - 450) / 2); - const width = Math.min(screenWidth, 600); - const height = Math.min(screenHeight, 450); - const newWin = window.open( - url, - 'compose' + Math.random(), - `width=${width},height=${height},left=${left},top=${top}`, - ); - - if (!newWin) { - alert('Looks like your browser is blocking popups.'); - return; - } - const mediaAttachmentsWithIDs = mediaAttachments.filter( (media) => media.id, ); - newWin.masto = masto; - newWin.__COMPOSE__ = { + const newWin = openCompose({ editStatus, replyToStatus, draftStatus: { @@ -316,10 +304,14 @@ export default ({ sensitive, mediaAttachments: mediaAttachmentsWithIDs, }, - }; - onClose(() => { - window.opener.__STATES__.reloadStatusPage++; }); + + if (!newWin) { + alert('Looks like your browser is blocking popups.'); + return; + } + + onClose(); }} > @@ -328,7 +320,7 @@ export default ({ type="button" class="light close-button" onClick={() => { - if (canClose()) { + if (confirmClose()) { onClose(); } }} @@ -363,18 +355,20 @@ export default ({ (media) => media.id, ); - onClose(() => { - window.opener.__STATES__.showCompose = { - editStatus, - replyToStatus, - draftStatus: { - status: textareaRef.current.value, - spoilerText: spoilerTextRef.current.value, - visibility, - sensitive, - mediaAttachments: mediaAttachmentsWithIDs, - }, - }; + onClose({ + fn: () => { + window.opener.__STATES__.showCompose = { + editStatus, + replyToStatus, + draftStatus: { + status: textareaRef.current.value, + spoilerText: spoilerTextRef.current.value, + visibility, + sensitive, + mediaAttachments: mediaAttachmentsWithIDs, + }, + }; + }, }); }} > diff --git a/src/compose.jsx b/src/compose.jsx index 46de5233..e3310d2b 100644 --- a/src/compose.jsx +++ b/src/compose.jsx @@ -8,6 +8,10 @@ import { useEffect, useState } from 'preact/hooks'; import Compose from './components/compose'; +if (window.opener) { + console = window.opener.console; +} + function App() { const [uiState, setUIState] = useState('default'); @@ -42,8 +46,12 @@ function App() { replyToStatus={replyToStatus} draftStatus={draftStatus} standalone - onClose={(fn = () => {}) => { + onClose={(results) => { + const { newStatus, fn = () => {} } = results || {}; try { + if (newStatus) { + window.opener.__STATES__.reloadStatusPage++; + } fn(); setUIState('closed'); } catch (e) {} diff --git a/src/utils/open-compose.js b/src/utils/open-compose.js new file mode 100644 index 00000000..daa026af --- /dev/null +++ b/src/utils/open-compose.js @@ -0,0 +1,23 @@ +export default (opts) => { + const url = new URL('/compose/', window.location); + const { width: screenWidth, height: screenHeight } = window.screen; + const left = Math.max(0, (screenWidth - 600) / 2); + const top = Math.max(0, (screenHeight - 450) / 2); + const width = Math.min(screenWidth, 600); + const height = Math.min(screenHeight, 450); + const newWin = window.open( + url, + 'compose' + Math.random(), + `width=${width},height=${height},left=${left},top=${top}`, + ); + + if (newWin) { + if (masto) { + newWin.masto = masto; + } + + newWin.__COMPOSE__ = opts; + } + + return newWin; +};