Skip to content

Commit e5fa278

Browse files
WhyIsSandwichWhyIsSandwich
committed
refactor(Factoriopedia): improve code readability and mobile responsiveness
- Enhanced code formatting for better readability in the Factoriopedia component. - Streamlined conditional rendering and class bindings for mobile viewport handling. - Improved layout properties and styles for a more responsive design across devices.
1 parent 11adf2c commit e5fa278

1 file changed

Lines changed: 67 additions & 78 deletions

File tree

‎docs/.vitepress/components/Factoriopedia.vue‎

Lines changed: 67 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
<div
66
:class="[
77
$style.factoripediaLeftPanel,
8-
isMobileViewport && mobilePane === 'entry' && selectedItem ? $style.mobileGridBlocked : null
8+
isMobileViewport && mobilePane === 'entry' && selectedItem
9+
? $style.mobileGridBlocked
10+
: null
911
]"
1012
@touchstart.passive="onMobileGridTouchStart"
1113
@touchmove="onMobileGridTouchMove"
@@ -43,10 +45,7 @@
4345
{{ selectedSciencePacks.length }}/{{ sciencePackOptions.length }}
4446
</span>
4547
</button>
46-
<label
47-
v-if="!isMobileViewport"
48-
:class="$style.localeLabel"
49-
>
48+
<label v-if="!isMobileViewport" :class="$style.localeLabel">
5049
<span :class="$style.visuallyHidden">Language</span>
5150
<select
5251
:class="$style.localeSelect"
@@ -67,7 +66,11 @@
6766
<div :class="$style.headerHelpLinkGroup">
6867
<button
6968
type="button"
70-
:class="[$style.headerActionButton, $style.headerIconAction, 'fpio-button-chrome']"
69+
:class="[
70+
$style.headerActionButton,
71+
$style.headerIconAction,
72+
'fpio-button-chrome'
73+
]"
7174
title="Keyboard shortcuts"
7275
aria-label="Keyboard shortcuts"
7376
@click="showKeyboardHelp = true; closeSciencePackPanel()"
@@ -127,11 +130,7 @@
127130
<path d="M15 9l-6 6M9 9l6 6" />
128131
</svg>
129132
</span>
130-
<span
131-
v-else
132-
:class="$style.headerLinkGlyph"
133-
aria-hidden="true"
134-
>
133+
<span v-else :class="$style.headerLinkGlyph" aria-hidden="true">
135134
<svg
136135
xmlns="http://www.w3.org/2000/svg"
137136
viewBox="0 0 24 24"
@@ -205,37 +204,27 @@
205204
:class="$style.searchInput"
206205
aria-label="Search recipes"
207206
autocomplete="off"
208-
>
207+
/>
209208
</div>
210209
</div>
211210

212211
<!-- Recipe Grid -->
213-
<div
214-
ref="gridContainer"
215-
:class="$style.itemGrid"
216-
:style="itemGrid.containerStyles"
217-
>
218-
<template
219-
v-for="subgroup in groupedRecipes"
220-
:key="subgroup.subgroup"
221-
>
212+
<div ref="gridContainer" :class="$style.itemGrid" :style="itemGrid.containerStyles">
213+
<template v-for="subgroup in groupedRecipes" :key="subgroup.subgroup">
222214
<!-- Subgroup wrapper -->
223215
<div
224216
v-if="subgroup.recipes.length > 0"
225217
:class="$style.subgroupGrid"
226218
:style="itemGrid.subgroupStyles"
227219
>
228-
<template
229-
v-for="item in subgroup.recipes"
230-
:key="item.name"
231-
>
220+
<template v-for="item in subgroup.recipes" :key="item.name">
232221
<IconButton
233222
:type="getPrimaryType(item)"
234223
:name="item.name"
235224
:size="itemGrid.buttonSize"
236225
:is-selected="
237226
selectedItem?.name === item.name &&
238-
getPrimaryType(selectedItem) === getPrimaryType(item)
227+
getPrimaryType(selectedItem) === getPrimaryType(item)
239228
"
240229
:style="itemGrid.itemStyles"
241230
@click="selectItem(getPrimaryType(item), item.name, item)"
@@ -267,7 +256,9 @@
267256
]"
268257
:style="mobileOverlayPanelStyle"
269258
:aria-hidden="
270-
isMobileViewport && !mobileEntryOverlayOpen && !mobileGridOpenSheetVisible ? true : undefined
259+
isMobileViewport && !mobileEntryOverlayOpen && !mobileGridOpenSheetVisible
260+
? true
261+
: undefined
271262
"
272263
@touchstart.passive="onMobileOverlayTouchStart"
273264
@touchmove="onMobileOverlayTouchMove"
@@ -314,10 +305,11 @@
314305
<li><kbd>Esc</kbd> Clear selection</li>
315306
<li><kbd>?</kbd> Toggle this help</li>
316307
<li v-if="isMobileViewport">
317-
Tap an icon to open the entry; drag the panel right to move it with your finger, then release to snap
318-
back or dismiss. A strip of the grid stays visible on the left while the entry is open. When you return
319-
to the grid with an item still selected, drag left on the grid to open the entry again (same peek
320-
as when dismissing). A hint also appears on the right edge of the browse view.
308+
Tap an icon to open the entry; drag the panel right to move it with your finger, then
309+
release to snap back or dismiss. A strip of the grid stays visible on the left while the
310+
entry is open. When you return to the grid with an item still selected, drag left on the
311+
grid to open the entry again (same peek as when dismissing). A hint also appears on the
312+
right edge of the browse view.
321313
</li>
322314
</ul>
323315
<p :class="$style.modalHint">
@@ -331,10 +323,7 @@
331323
</div>
332324

333325
<Teleport to="body">
334-
<div
335-
v-if="sciencePackPanelOpen"
336-
:class="$style.sciencePackPortal"
337-
>
326+
<div v-if="sciencePackPanelOpen" :class="$style.sciencePackPortal">
338327
<div
339328
:class="$style.sciencePackBackdrop"
340329
aria-hidden="true"
@@ -385,7 +374,6 @@
385374
</div>
386375
</div>
387376
</Teleport>
388-
389377
</div>
390378
</template>
391379

@@ -568,8 +556,7 @@ const mobileOverlayPanelStyle = computed(() => {
568556
const motion = mobileEntryMotionTransition.value
569557
const gridSlideOpen = !open && mobileGridOpenSheetVisible.value
570558
const transitionNone =
571-
mobileOverlayDragging.value ||
572-
(mobileGridOpenDragging.value && !mobileGridOpenSnapCancel.value)
559+
mobileOverlayDragging.value || (mobileGridOpenDragging.value && !mobileGridOpenSnapCancel.value)
573560
const transition = transitionNone ? 'none' : motion
574561
575562
if (!open && !gridSlideOpen) {
@@ -620,7 +607,9 @@ watch(
620607
)
621608
622609
const selectedSciencePackSet = computed(() => new Set(selectedSciencePacks.value))
623-
const sciencePackVisibility = computed(() => createSciencePackVisibility(selectedSciencePacks.value))
610+
const sciencePackVisibility = computed(() =>
611+
createSciencePackVisibility(selectedSciencePacks.value)
612+
)
624613
const hasActiveScienceFilter = computed(() => selectedSciencePacks.value.length > 0)
625614
const itemGrid = computed(() =>
626615
useFactorioGrid({
@@ -785,7 +774,9 @@ function pruneInaccessibleSciencePacks(selectedSet, dependencyMap) {
785774
changed = false
786775
for (const packName of Array.from(selectedSet)) {
787776
const dependencies = dependencyMap?.[packName] || []
788-
const hasMissingDependency = dependencies.some(dependencyName => !selectedSet.has(dependencyName))
777+
const hasMissingDependency = dependencies.some(
778+
dependencyName => !selectedSet.has(dependencyName)
779+
)
789780
if (hasMissingDependency) {
790781
selectedSet.delete(packName)
791782
changed = true
@@ -826,7 +817,10 @@ function setSciencePacksFromUrlParam(param) {
826817
selectedSciencePacks.value = []
827818
return
828819
}
829-
const names = param.split(',').map(s => s.trim()).filter(Boolean)
820+
const names = param
821+
.split(',')
822+
.map(s => s.trim())
823+
.filter(Boolean)
830824
const dependencyMap = sciencePackDependencyMap.value
831825
const selected = new Set()
832826
const validNames = new Set(sciencePackOptions.value.map(p => p.name))
@@ -930,10 +924,7 @@ const firstEnabledCategoryKey = computed(() => {
930924
931925
// Computed property to determine which filters have no items when searching
932926
const disabledFilters = computed(() => {
933-
if (
934-
!categoryStructure.value ||
935-
(!searchQuery.value.trim() && !hasActiveScienceFilter.value)
936-
) {
927+
if (!categoryStructure.value || (!searchQuery.value.trim() && !hasActiveScienceFilter.value)) {
937928
return new Set()
938929
}
939930
@@ -1341,26 +1332,27 @@ watch(searchQuery, () => {
13411332
}, 350)
13421333
})
13431334
1344-
watch([selectedCategory, selectedSciencePacks, selectedItem], () => {
1345-
if (isApplyingUrl.value) return
1346-
updateURL()
1347-
}, { deep: true })
1348-
13491335
watch(
1350-
sciencePackPanelOpen,
1351-
async open => {
1352-
await nextTick()
1353-
if (open) {
1354-
updateSciencePackPopoverPosition()
1355-
if (sciencePackPositionListenersCleanup) sciencePackPositionListenersCleanup()
1356-
sciencePackPositionListenersCleanup = bindSciencePackPositionListeners()
1357-
} else if (sciencePackPositionListenersCleanup) {
1358-
sciencePackPositionListenersCleanup()
1359-
sciencePackPositionListenersCleanup = null
1360-
}
1361-
}
1336+
[selectedCategory, selectedSciencePacks, selectedItem],
1337+
() => {
1338+
if (isApplyingUrl.value) return
1339+
updateURL()
1340+
},
1341+
{ deep: true }
13621342
)
13631343
1344+
watch(sciencePackPanelOpen, async open => {
1345+
await nextTick()
1346+
if (open) {
1347+
updateSciencePackPopoverPosition()
1348+
if (sciencePackPositionListenersCleanup) sciencePackPositionListenersCleanup()
1349+
sciencePackPositionListenersCleanup = bindSciencePackPositionListeners()
1350+
} else if (sciencePackPositionListenersCleanup) {
1351+
sciencePackPositionListenersCleanup()
1352+
sciencePackPositionListenersCleanup = null
1353+
}
1354+
})
1355+
13641356
// Unified selection functions
13651357
function selectItem(type, name, data = null, options = {}) {
13661358
if (!options.preserveVerticalColumn) {
@@ -1398,28 +1390,25 @@ watch(
13981390
}
13991391
updateURL()
14001392
}
1401-
},
1393+
}
14021394
)
14031395
1404-
watch(
1405-
[disabledFilters, categoryStructure, firstEnabledCategoryKey],
1406-
() => {
1407-
if (!selectedCategory.value || !categoryStructure.value?.[selectedCategory.value]) {
1408-
const firstCategory = firstEnabledCategoryKey.value
1409-
if (firstCategory) {
1410-
selectedCategory.value = firstCategory
1411-
}
1412-
return
1396+
watch([disabledFilters, categoryStructure, firstEnabledCategoryKey], () => {
1397+
if (!selectedCategory.value || !categoryStructure.value?.[selectedCategory.value]) {
1398+
const firstCategory = firstEnabledCategoryKey.value
1399+
if (firstCategory) {
1400+
selectedCategory.value = firstCategory
14131401
}
1402+
return
1403+
}
14141404
1415-
if (disabledFilters.value.has(selectedCategory.value)) {
1416-
const firstEnabled = firstEnabledCategoryKey.value
1417-
if (firstEnabled) {
1418-
selectedCategory.value = firstEnabled
1419-
}
1405+
if (disabledFilters.value.has(selectedCategory.value)) {
1406+
const firstEnabled = firstEnabledCategoryKey.value
1407+
if (firstEnabled) {
1408+
selectedCategory.value = firstEnabled
14201409
}
14211410
}
1422-
)
1411+
})
14231412
14241413
function updateMobileViewport() {
14251414
if (typeof window === 'undefined') return

0 commit comments

Comments
 (0)