From 6fb5c81deb3ff0ca2399940c3c83bd4f82c234db Mon Sep 17 00:00:00 2001 From: CanadaHonk Date: Sat, 30 Jul 2022 22:42:48 +0100 Subject: [PATCH] card: rewrite modifying to not use dom --- src/moduleStore/index.js | 62 ++++------------------------------- src/ui/settings/items/card.js | 29 +++++++++++++--- 2 files changed, 30 insertions(+), 61 deletions(-) diff --git a/src/moduleStore/index.js b/src/moduleStore/index.js index 9286bbc6..afb88e20 100644 --- a/src/moduleStore/index.js +++ b/src/moduleStore/index.js @@ -29,7 +29,7 @@ export default { if (shouldHandleLoadingText) goosemodScope.updateLoadingScreen(`Getting modules from repos...`); await goosemodScope.moduleStoreAPI.updateModules(); - + await goosemodScope.moduleStoreAPI.updateStoreSetting(); if (shouldHandleLoadingText) goosemodScope.updateLoadingScreen(`Updating modules...`); @@ -124,7 +124,7 @@ export default { }; } catch (e) { goosemodScope.showToast(`Failed to get repo: ${repo.url}`, { timeout: 5000, type: 'error', subtext: '#terms.goosemod.store#' }); // Show error toast to user so they know - console.error(e); + console.error(e); newModules = newModules.concat(goosemodScope.moduleStoreAPI.modules.filter((x) => x.repo === repo.url)).sort((a, b) => a.name.localeCompare(b.name)); // Use cached / pre-existing modules } @@ -176,30 +176,12 @@ export default { try { const item = goosemodScope.settings.items.find((x) => x[1] === goosemodScope.moduleStoreAPI.getSettingItemName(moduleInfo))[2].find((x) => x.subtext === moduleInfo.description); - item.buttonType = 'danger'; item.buttonText = '#terms.remove#'; item.showToggle = true; } catch (e) { // goosemodScope.logger.debug('import', 'Failed to change setting during MS importModule (likely during initial imports so okay)'); } - - // If themes / plugins open - if (document.querySelector(`#gm-settings-inject`)) { - const cardEls = [...document.querySelectorAll(`.title-2dsDLn + .colorStandard-1Xxp1s`)].filter((x) => x.textContent === moduleInfo.description).map((x) => x.parentElement); - - if (cardEls.length === 0) return; - - for (const cardEl of cardEls) { - const buttonEl = cardEl.querySelector(`.lookFilled-yCfaCM`); - - buttonEl.className = buttonEl.className.replace('lookFilled-yCfaCM colorBrand-I6CyqQ', 'lookOutlined-3yKVGo colorRed-rQXKgM'); - buttonEl.textContent = '#terms.remove#'; - - const toggleEl = cardEl.querySelector(`.container-2nx-BQ`); - toggleEl.classList.remove('hide-toggle'); - } - } } catch (e) { // goosemodScope.showToast(`Failed to import module ${moduleName}`, { timeout: 2000, type: 'error', subtext: '#terms.goosemod.store#' }); console.error(e); @@ -208,34 +190,16 @@ export default { moduleRemoved: (m) => { let item = goosemodScope.settings.items.find((x) => x[1] === goosemodScope.moduleStoreAPI.getSettingItemName(m))[2].find((x) => x.subtext === m.description); - if (item === undefined) return; item.buttonType = 'brand'; item.buttonText = '#terms.install#'; item.showToggle = false; - - // If themes / plugins open - if (document.querySelector(`#gm-settings-inject`)) { - const cardEls = [...document.querySelectorAll(`.title-2dsDLn + .colorStandard-1Xxp1s`)].filter((x) => x.textContent === m.description).map((x) => x.parentElement); - - if (cardEls.length === 0) return; - - for (const cardEl of cardEls) { - const buttonEl = cardEl.querySelector(`.lookOutlined-3yKVGo`); - - buttonEl.className = buttonEl.className.replace('lookOutlined-3yKVGo colorRed-rQXKgM', 'lookFilled-yCfaCM colorBrand-I6CyqQ'); - buttonEl.textContent = '#terms.install#'; - - const toggleEl = cardEl.querySelector(`.container-2nx-BQ`); - toggleEl.classList.add('hide-toggle'); - } - } }, parseAuthors: async (a) => { const authors = typeof a === 'string' ? a.split(', ') : a; - + return (await Promise.all(authors.map(async (x) => { if (typeof x === 'object') { // User object return { @@ -279,7 +243,7 @@ export default { item[2].push({ type: 'card', - + tags: m.tags, github: m.github, notice: m.notice, @@ -342,7 +306,7 @@ To continue importing this module the dependencies need to be imported.`, goosemodScope.settings[`regen${type}`] = true; if (checked) { - goosemodScope.modules[m.name] = Object.assign({}, goosemodScope.disabledModules[m.name]); + goosemodScope.modules[m.name] = goosemodScope.disabledModules[m.name]; delete goosemodScope.disabledModules[m.name]; await goosemodScope.modules[m.name].goosemodHandlers.onImport(); @@ -355,7 +319,7 @@ To continue importing this module the dependencies need to be imported.`, goosemodScope.moduleSettingsStore.enableModule(m.name); } else { - goosemodScope.disabledModules[m.name] = Object.assign({}, goosemodScope.modules[m.name]); + goosemodScope.disabledModules[m.name] = goosemodScope.modules[m.name]; await goosemodScope.modules[m.name].goosemodHandlers.onRemove(); @@ -363,20 +327,6 @@ To continue importing this module the dependencies need to be imported.`, goosemodScope.moduleSettingsStore.disableModule(m.name); } - - // If themes / plugins open - if (document.querySelector(`#gm-settings-inject`)) { - const cardEls = [...document.querySelectorAll(`.title-2dsDLn + .colorStandard-1Xxp1s`)].filter((x) => x.textContent === m.description).map((x) => x.parentElement); - - if (cardEls.length === 0) return; - - for (const cardEl of cardEls) { - goosemodScope.settings.ignoreVisualToggle = true; - - const toggleInputEl = cardEl.querySelector('.input-2XRLou'); - toggleInputEl.click(); - } - } } }); } diff --git a/src/ui/settings/items/card.js b/src/ui/settings/items/card.js index 915e5f7c..51ebc324 100644 --- a/src/ui/settings/items/card.js +++ b/src/ui/settings/items/card.js @@ -84,12 +84,24 @@ return class Card extends React.PureComponent { case 1: notice = 'Other users may notice your usage'; break; - + case 2: notice = 'Other users may question or judge your usage, use appropriately'; break; } + const updateSelf = () => { + const cardEls = [...document.querySelectorAll(`.title-2dsDLn + .colorStandard-1Xxp1s`)].filter((x) => x.textContent === this.props.subtext).map((x) => x.parentElement); + + for (const x of cardEls) { + const ret = x.__reactFiber$.return; + + ret.pendingProps = this.props; + ret.memoizedState.renderLoaded = true; + + ret.stateNode.forceUpdate(); + } + }; return !this.state.loaded ? React.createElement('div', { className: 'gm-store-card-loading-placeholder' @@ -150,7 +162,7 @@ return class Card extends React.PureComponent { }, this.props.subtext)), React.createElement('div', { - + }, this.props.github ? React.createElement(SimpleTooltip, { text: this.props.github.stars, @@ -206,17 +218,23 @@ return class Card extends React.PureComponent { }, React.createElement(Button, { color: this.props.buttonType === 'danger' ? Button.Colors.RED : Button.Colors.BRAND, - look: this.props.buttonType === 'danger' ? Button.Looks.OUTLINED : Button.Looks.FILLED, + look: Button.Looks.FILLED, // look: this.props.buttonType === 'danger' ? Button.Looks.OUTLINED : Button.Looks.FILLED, size: Button.Sizes.SMALL, onClick: () => { this.props.onclick(); + + this.props.buttonType = this.props.buttonType === 'danger' ? '' : 'danger'; + this.props.buttonText = this.props.buttonText === '#terms.remove#' ? '#terms.install#' : '#terms.remove#'; + this.props.showToggle = !this.props.showToggle; + + updateSelf(); } }, this.props.buttonText), this.props.github ? React.createElement(Button, { - color: Button.Colors.GREY, + color: Button.Colors.PRIMARY, size: Button.Sizes.SMALL, onClick: () => { @@ -264,9 +282,10 @@ return class Card extends React.PureComponent { this.state.renderLoaded = true; // Set state to fix rerendering display props this.state.forceDisplay = true; - this.forceUpdate(); this.props.onToggle(this.props.checked); + + updateSelf(); } }) )