Injector v4.1.0: Module Store UI Sidebar

pull/8/head
Oj18 4 years ago
parent 8157a5d87b
commit afdc440375

@ -1,5 +1,11 @@
# GooseMod Changelog
## v4.1.0
- ### Features
- Added sidebar to Module Store UI
## v4.0.0
- ### Tweaks

6
dist/index.js vendored

File diff suppressed because one or more lines are too long

2
dist/index.js.map vendored

File diff suppressed because one or more lines are too long

@ -101,7 +101,7 @@ const init = async function () {
this.modules = {};
this.disabledModules = {};
this.version = '4.0.0';
this.version = '4.1.0';
this.versionHash = '<hash>'; // hash of built final js file is inserted here via build script
this.logger.debug('import.version.goosemod', `${this.version} (${this.versionHash})`);

@ -66,7 +66,7 @@ export default {
updateStoreSetting: () => {
let item = goosemodScope.settings.items.find((x) => x[1] === 'Module Store');
item[2] = item[2].slice(0, 4);
item[2] = item[2].slice(0, 5);
let sortedCategories = goosemodScope.moduleStoreAPI.modules.reduce((cats, o) => cats.includes(o.category) ? cats : cats.concat(o.category), []).sort((a, b) => a.localeCompare(b));
@ -90,6 +90,8 @@ export default {
for (let m of arr[i]) {
item[2].push({
type: 'card',
class: m.category,
buttonType: goosemodScope.modules[m.filename] ? 'danger' : 'brand',
showToggle: goosemodScope.modules[m.filename],

@ -129,7 +129,7 @@ export const _createItem = (panelName, content, clickHandler, danger = false) =>
parentEl.appendChild(contentEl);
let specialContainerEl;
let specialContainerEl, cardContainerEl;
if (panelName === 'Module Store') {
specialContainerEl = document.createElement('div');
@ -137,8 +137,21 @@ export const _createItem = (panelName, content, clickHandler, danger = false) =>
specialContainerEl.style.display = 'flex';
specialContainerEl.style.flexDirection = 'row';
specialContainerEl.style.flexWrap = 'wrap';
}
cardContainerEl = document.createElement('div');
cardContainerEl.style.display = 'grid';
cardContainerEl.style.gridTemplateColumns = 'repeat(auto-fill, 330px)';
cardContainerEl.style.width = 'calc(100% - 280px)';
cardContainerEl.style.justifyContent = 'center';
/*cardContainerEl.style.columnGap = '10px';
cardContainerEl.style.rowGap = '10px';*/
document.querySelector('.sidebarRegion-VFTUkN').style.transition = '0.5s max-width';
document.querySelector('.contentColumnDefault-1VQkGM').style.transition = '0.5s max-width';
}
let i = 0;
for (let e of content.slice(1)) {
@ -604,6 +617,8 @@ export const _createItem = (panelName, content, clickHandler, danger = false) =>
case 'card': {
el = document.createElement('div');
if (e.class) el.classList.add(e.class);
el.style.backgroundColor = 'var(--background-secondary)';
el.style.borderRadius = '8px';
@ -795,10 +810,78 @@ export const _createItem = (panelName, content, clickHandler, danger = false) =>
break;
}
case 'sidebar': {
el = document.createElement('div');
el.style.backgroundColor = 'var(--background-secondary)';
el.style.borderRadius = '8px';
el.style.padding = '14px';
el.style.marginTop = '4px';
el.style.marginLeft = '4px';
el.style.width = '270px';
el.style.height = 'fit-content';
el.style.position = 'relative';
el.style.display = 'flex';
el.style.flexDirection = 'column';
e.children(contentEl).then((children) => {
for (let c of children) {
console.log(c);
let mainEl = document.createElement('div');
mainEl.classList.add('flex-1xMQg5', 'flex-1O1GKY', 'horizontal-1ae9ci', 'horizontal-2EEEnY', 'flex-1O1GKY', 'directionRow-3v3tfG', 'justifyBetween-2tTqYu', 'alignCenter-1dQNNs', 'noWrap-3jynv6', 'item-3eFBNF');
mainEl.style.flex = '1 1 auto';
const selectedClass = 'selected-2DeaDa';
const unselectedHTML = `<div class="flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6 label-1ZuVT-" style="flex: 0 1 auto;"><label class="checkboxWrapper-SkhIWG alignCenter-MrlN6q flexChild-faoVW3"><input class="inputReadonly-rYU97L input-3ITkQf" type="checkbox" style="width: 24px; height: 24px;"><div class="checkbox-1ix_J3 flexCenter-3_1bcw flex-1O1GKY justifyCenter-3D2jYp alignCenter-1dQNNs round-2jCFai" style="width: 24px; height: 24px; flex: 1 1 auto;"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24"><path fill="transparent" fill-rule="evenodd" clip-rule="evenodd" d="M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7.00003L19.5899 5.59003L8.99991 16.17Z"></path></svg></div><div class="label-cywgfr labelClickable-11AuB8 labelForward-1wfipV" style="line-height: 24px;"><div class="labelText-2kBs7x">${c.text}</div></div></label></div><div class="flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6" style="flex: 0 1 auto;"><div class="colorStandard-2KCXvj size14-e6ZScH description-3_Ncsb formText-3fs7AJ marginReset-2pBy6s marginReset-236NPn modeDefault-3a2Ph1" style="flex: 1 1 auto;">${c.subText}</div></div>`;
const selectedHTML = `<div class="flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6 label-1ZuVT-" style="flex: 0 1 auto;"><label class="checkboxWrapper-SkhIWG alignCenter-MrlN6q flexChild-faoVW3"><input class="inputReadonly-rYU97L input-3ITkQf" type="checkbox" checked="" style="width: 24px; height: 24px;"><div class="checkbox-1ix_J3 flexCenter-3_1bcw flex-1O1GKY justifyCenter-3D2jYp alignCenter-1dQNNs round-2jCFai checked-3_4uQ9" style="width: 24px; height: 24px; border-color: rgb(67, 181, 129); flex: 1 1 auto; background-color: rgb(67, 181, 129);"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24"><path fill="#ffffff" fill-rule="evenodd" clip-rule="evenodd" d="M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7.00003L19.5899 5.59003L8.99991 16.17Z"></path></svg></div><div class="label-cywgfr labelClickable-11AuB8 labelForward-1wfipV" style="line-height: 24px;"><div class="labelText-2kBs7x">${c.text}</div></div></label></div><div class="flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6" style="flex: 0 1 auto;"><div class="colorStandard-2KCXvj size14-e6ZScH description-3_Ncsb formText-3fs7AJ marginReset-2pBy6s marginReset-236NPn modeDefault-3a2Ph1" style="flex: 1 1 auto;">${c.subText}</div></div>`;
const selected = c.selected();
mainEl.innerHTML = selected ? selectedHTML : unselectedHTML;
if (selected) {
mainEl.classList.add(selectedClass);
}
mainEl.onclick = () => {
selected = !selected;
if (selected) {
mainEl.classList.add(selectedClass);
} else {
mainEl.classList.remove(selectedClass);
}
mainEl.innerHTML = selected ? selectedHTML : unselectedHTML;
c.onselected(selected, contentEl);
};
el.appendChild(mainEl);
}
});
/*let dividerEl = document.createElement('div');
dividerEl.classList.add('divider-3573oO', 'dividerDefault-3rvLe-');
dividerEl.style.marginTop = e.subtext ? '20px' : '45px';
el.appendChild(dividerEl);*/
break;
}
}
if (specialContainerEl) { // && i > 1
specialContainerEl.appendChild(el);
(e.type === 'card' ? cardContainerEl : specialContainerEl).appendChild(el);
} else {
contentEl.appendChild(el);
}
@ -807,6 +890,7 @@ export const _createItem = (panelName, content, clickHandler, danger = false) =>
}
if (specialContainerEl) {
specialContainerEl.insertBefore(cardContainerEl, specialContainerEl.children[specialContainerEl.children.length - 1]);
contentEl.appendChild(specialContainerEl);
}
@ -839,6 +923,13 @@ export const _createItem = (panelName, content, clickHandler, danger = false) =>
return;
}
if (panelName === 'Module Store') {
setTimeout(() => {
document.querySelector('.sidebarRegion-VFTUkN').style.maxWidth = '218px';
document.querySelector('.contentColumnDefault-1VQkGM').style.maxWidth = '100%';
}, 10);
}
setTimeout(() => {
settingsMainEl.firstChild.innerHTML = '';
settingsMainEl.firstChild.appendChild(parentEl);
@ -854,6 +945,11 @@ export const _createItem = (panelName, content, clickHandler, danger = false) =>
settingsSidebarEl.addEventListener('click', () => {
if (goosemodScope.removed === true) return;
if (panelName === 'Module Store') {
document.querySelector('.sidebarRegion-VFTUkN').style.maxWidth = '50%';
document.querySelector('.contentColumnDefault-1VQkGM').style.maxWidth = '740px';
}
el.classList.remove(settingsClasses['selected']);
});
@ -983,6 +1079,33 @@ export const makeGooseModSettings = () => {
}
]);
const updateModuleStoreUI = (parentEl, cards) => {
const inp = parentEl.querySelector('[contenteditable=true]').innerText.replace('\n', '');
const fuzzyReg = new RegExp(`.*${inp}.*`, 'i');
let selectors = {};
const selectedClass = 'selected-2DeaDa';
for (let s of [...parentEl.children[0].children[4].children]) {
selectors[s.children[0].children[0].children[2].innerText.toLowerCase()] = s.classList.contains(selectedClass);
}
for (let c of cards) {
const name = c.getElementsByClassName('title-31JmR4')[0].childNodes[0].wholeText;
const description = c.getElementsByClassName('description-3_Ncsb')[1].innerText;
const matches = (fuzzyReg.test(name) || fuzzyReg.test(description));
c.style.display = matches && selectors[c.className] ? 'block' : 'none';
}
const visibleModules = cards.filter((x) => x.style.display !== 'none').length;
parentEl.getElementsByClassName('divider-3573oO')[0].parentElement.children[1].innerText = `${visibleModules} module${visibleModules !== 1 ? 's' : ''}`;
};
goosemodScope.settings.createItem('Module Store', ['',
{
type: 'button',
@ -1001,24 +1124,9 @@ export const makeGooseModSettings = () => {
{
type: 'search',
onchange: (inp, parentEl) => {
const fuzzyReg = new RegExp(`.*${inp}.*`, 'i');
const cards = [...parentEl.children[0].children].filter((x) => !x.className && x.getElementsByClassName('description-3_Ncsb')[1]);
for (let c of cards) {
const name = c.getElementsByClassName('title-31JmR4')[0].childNodes[0].wholeText;
const description = c.getElementsByClassName('description-3_Ncsb')[1].innerText;
const matches = (fuzzyReg.test(name) || fuzzyReg.test(description));
c.style.display = matches ? 'block' : 'none';
}
const visibleModules = cards.filter((x) => x.style.display !== 'none').length;
parentEl.getElementsByClassName('divider-3573oO')[0].parentElement.children[1].innerText = `${visibleModules} module${visibleModules !== 1 ? 's' : ''}`;
const cards = [...parentEl.children[0].children[3].children].filter((x) => x.getElementsByClassName('description-3_Ncsb')[1]);
//goosemodScope.settings.items.find((x) => x[1] === 'Module Store')[2].find((x) => x.type === 'divider').text(parentEl);
updateModuleStoreUI(parentEl, cards);
},
storeSpecific: true
},
@ -1028,11 +1136,30 @@ export const makeGooseModSettings = () => {
return new Promise(async (res) => {
await sleep(10);
const cards = [...parentEl.children[0].children].filter((x) => !x.className && x.getElementsByClassName('description-3_Ncsb')[1] && x.style.display !== 'none');
const cards = [...parentEl.children[0].children[3].children].filter((x) => x.getElementsByClassName('description-3_Ncsb')[1] && x.style.display !== 'none');
return res(`${cards.length} modules`);
});
}
},
{
type: 'sidebar',
children: (parentEl) => {
return new Promise(async (res) => {
await sleep(10);
const cards = [...parentEl.children[0].children[3].children].filter((x) => x.getElementsByClassName('description-3_Ncsb')[1]);
return res([...cards.reduce((acc, e) => acc.set(e.className, (acc.get(e.className) || 0) + 1), new Map()).entries()].map((x) => ({
text: x[0] === 'ui' ? 'UI' : x[0][0].toUpperCase() + x[0].substring(1),
subText: x[1],
selected: () => true,
onselected: () => {
updateModuleStoreUI(parentEl, cards);
}
})));
});
}
}
]);

Loading…
Cancel
Save