Skip to content

Commit

Permalink
Add brand label filters
Browse files Browse the repository at this point in the history 
Have a bug where brand header are not removed, will check later
  • Loading branch information
@pkong-ds
pkong-ds committed May 24, 2024
1 parent 9dc49dc commit 8a9f133
Show file tree
Hide file tree
Showing 3 changed files with 215 additions and 56 deletions.
66 changes: 64 additions & 2 deletions public/scripts/device.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,22 @@ class RootViewModel {
searchText = "";
shouldShowSearchSuggestionList = false;
shouldShowFullscreenSearchOnBelowLg = false;
selectedBrand = "all";
_deviceList;
_brandDeviceList;

constructor(deviceList) {
constructor(deviceList, brandDeviceList) {
mobx.makeObservable(this, {
searchText: mobx.observable,
shouldShowSearchSuggestionList: mobx.observable,
shouldShowFullscreenSearchOnBelowLg: mobx.observable,
suggestedDeviceList: mobx.computed,
shouldShowSearchClear: mobx.computed,
selectedBrand: mobx.observable,
filteredDeviceList: mobx.computed,
});
this._deviceList = deviceList;
this._brandDeviceList = brandDeviceList;
}

get suggestedDeviceList() {
Expand All @@ -36,6 +41,12 @@ class RootViewModel {
get shouldShowSearchClear() {
return this.searchText.trim().length > 0;
}

get filteredDeviceList() {
return this.selectedBrand === "all"
? this._deviceList
: this._brandDeviceList[this.selectedBrand];
}
}

function changeToImage(deviceGridNode, index) {
Expand Down Expand Up @@ -92,16 +103,67 @@ function handleMouseLeaveDeviceGrid(e) {
cycleDeviceImages.uncycle(e.target);
}

function handleClickBrandLabelBtn(e, viewModel) {
const brand = e.target.dataset.brandName;
viewModel.selectedBrand = brand;
}

function main() {
const deviceGrids = document.querySelectorAll(".device-grid");
const brands = document.querySelectorAll(".device-brand-list__item-button");
const allDeviceGrids = document.querySelectorAll(".device-grid-container");

const viewModel = new RootViewModel(window.deviceList);
const viewModel = new RootViewModel(
window.deviceList,
window.brandDeviceList,
);
if (isDebug) {
window.viewModel = viewModel;
}

mobx.reaction(
() => viewModel.selectedBrand,
(selectedBrand) => {
// console.log('inside reaction xd')
// console.log(selectedBrand)
const targetBrandListItem = document.querySelector(
`#device-brand-list__item-button__${selectedBrand}`,
);
const allBrandListItems = document.querySelectorAll(
".device-brand-list__item-button",
);
allBrandListItems.forEach((n) =>
n.classList.remove("device-brand-list__item-button--selected"),
);
targetBrandListItem.classList.add(
"device-brand-list__item-button--selected",
);
// targetNode.add
},
);

mobx.autorun(() => {
const filteredDeviceIds = viewModel.filteredDeviceList.map(
(d) => d.device_id,
);
allDeviceGrids.forEach((deviceGridNode) => {
const deviceId = deviceGridNode.dataset.deviceId;
if (filteredDeviceIds.includes(deviceId)) {
deviceGridNode.classList.remove("d-none");
} else {
deviceGridNode.classList.add("d-none");
}
});
});

deviceGrids.forEach((deviceGrid) => {
deviceGrid.addEventListener("mouseenter", handleMouseEnterDeviceGrid);
deviceGrid.addEventListener("mouseleave", handleMouseLeaveDeviceGrid);
});

brands.forEach((brand) => {
brand.addEventListener("click", (e) =>
handleClickBrandLabelBtn(e, viewModel),
);
});
}
140 changes: 86 additions & 54 deletions src/pages/type/[type].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,14 @@ const { deviceType } = Astro.props;
const deviceList: Device[] = DEVICE_MANAGER.getDeviceListByType(deviceType);
const brandDeviceList: Partial<Record<BrandEnum, Device[]>> =
DEVICE_MANAGER.getBrandDeviceList(deviceType);
const allDeviceType: DeviceType = DEVICE_MANAGER.allDeviceTypes;
const nonEmptyBrands: BrandEnum[] = Object.keys(brandDeviceList)
.filter((b) => {
const brand = BrandEnum.parse(b);
const devices: Device[] | undefined = brandDeviceList[brand];
return devices != null && devices.length > 0;
})
.map((b) => BrandEnum.parse(b));
const brandList: string[] = ["all", ...nonEmptyBrands];
---

<BaseLayout>
Expand All @@ -32,9 +39,8 @@ const allDeviceType: DeviceType = DEVICE_MANAGER.allDeviceTypes;
content="MockUPhone supports devices including iPhone mockup, iPad mockup, Android mockup and TV mockup. You can check out the whole device list via this page."
/>
<script type="text/javascript" src="/scripts/device.js"></script>
<script define:vars={{ deviceList, allDeviceType, brandDeviceList }}>
<script define:vars={{ deviceList, brandDeviceList }}>
window.deviceList = deviceList;
window.allDeviceType = allDeviceType;
window.brandDeviceList = brandDeviceList;
</script>
<section class="device-type">
Expand Down Expand Up @@ -127,6 +133,23 @@ const allDeviceType: DeviceType = DEVICE_MANAGER.allDeviceTypes;
</a>
</li>
</ul>
<ul class="device-brand-list">
{
brandList.map((b: string) => (
<li class="device-brand-list__item">
<button
class={`device-brand-list__item-button ${
b === "all" ? "device-brand-list__item-button--selected" : ""
}`}
id={`device-brand-list__item-button__${b}`}
data-brand-name={b}
>
{b === "all" ? "All Brand" : b}
</button>
</li>
))
}
</ul>
</section>
<section class="select-device">
<ul class="device-section-list">
Expand All @@ -135,65 +158,74 @@ const allDeviceType: DeviceType = DEVICE_MANAGER.allDeviceTypes;
const brand = BrandEnum.parse(b);
const devices = brandDeviceList[brand];
if (devices == null || devices.length === 0) {
return <></>
return undefined;
}
return (
<li class="device-section-list__item" data-device-id={b}>
<section id={b} class="device-section">
<h3 class="device-section__brand-name">{brand.toUpperCase()}</h3>
<li class="device-section-list__item">
<section id={`device-section-${b}`} class="device-section">
<h3 class="device-section__brand-name">
{brand.toUpperCase()}
</h3>
{
<ul class="device-grid-list">
{/* FIXME: Remove background color for debugging */}
{devices.map((deviceDetail: Device) => (
<div class="device-grid-container">
<h3 class="device-grid-container-header">{deviceDetail.name}</p>
<li
class="device-grid"
style={{ backgroundColor: deviceDetail.color.hexcode }}
data-image-index="0"
data-n-image={deviceDetail.imagePath?.length}
id={deviceDetail.device_id}
<div
class="device-grid-container"
data-device-id={deviceDetail.device_id}
>
<a
class="device-grid__link"
href={"/device/" + deviceDetail.device_id}
<h3 class="device-grid-container-header">
{deviceDetail.name}
</h3>
<li
class="device-grid"
style={{
backgroundColor: deviceDetail.color.hexcode,
}}
data-image-index="0"
data-n-image={deviceDetail.imagePath?.length}
id={deviceDetail.device_id}
>
{deviceDetail.imagePath?.map(
(image: [string, string], index: number) => {
if (index == 0)
return (
<img
class="device-grid__image"
src={image[0]}
alt={image[1]}
/>
);
else
return (
<img
class="device-grid__image d-none"
src={image[0]}
alt={image[1]}
/>
);
}
)}
<div class="device-grid__hover-blur d-none" />
<div class="device-grid__overlay d-none">
<header class="device-grid__overlay-header">
<h3 class="device-grid__overlay-device-name">
{deviceDetail.short_name ?? deviceDetail.name}
</h3>
<p class="device-grid__overlay-device-desc">
{deviceDetail.desc}
</p>
</header>
<button class="device-grid__overlay-pick-btn">
Pick it
</button>
</div>
</a>
</li>
<a
class="device-grid__link"
href={"/device/" + deviceDetail.device_id}
>
{deviceDetail.imagePath?.map(
(image: [string, string], index: number) => {
if (index == 0)
return (
<img
class="device-grid__image"
src={image[0]}
alt={image[1]}
/>
);
else
return (
<img
class="device-grid__image d-none"
src={image[0]}
alt={image[1]}
/>
);
},
)}
<div class="device-grid__hover-blur d-none" />
<div class="device-grid__overlay d-none">
<header class="device-grid__overlay-header">
<h3 class="device-grid__overlay-device-name">
{deviceDetail.short_name ?? deviceDetail.name}
</h3>
<p class="device-grid__overlay-device-desc">
{deviceDetail.desc}
</p>
</header>
<button class="device-grid__overlay-pick-btn">
Pick it
</button>
</div>
</a>
</li>
</div>
))}
</ul>
Expand Down
65 changes: 65 additions & 0 deletions src/styles/device.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,71 @@
background-image: url("/Images/types/tv-white.svg");
}

.device-brand-list {
list-style: none;
display: flex;
padding: 0;
margin: 40px 0 0 0;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.device-brand-list::after {
content: "";
padding-left: 20px;
}
.device-brand-list::-webkit-scrollbar {
display: none;
}
@media (min-width: 576px) {
.device-brand-list {
margin: 50px 0 0 0;
justify-content: center;
}
}

.device-brand-list__item {
margin-left: 20px;
}
.device-brand-list__item-button {
padding: 8px 20px 8px 20px;
border-radius: 100px;
border: 2px solid #b1b1b1;
cursor: pointer;
background-color: white;
font-size: 16px;
font-weight: 500;
line-height: 25px;
text-align: center;
text-transform: capitalize;

/* prevent button overflowing due to content */
display: inline-block;
white-space: nowrap;
}

.device-brand-list__item-button:hover {
border: 2px solid #0043e0;
background-color: #e5ecfc;
}

.device-brand-list__item-button--selected {
border: 2px solid #0043e0;
background-color: #0043e0;
color: white;
}
.device-brand-list__item-button--selected:hover {
/* remain unchanged */
background-color: #0043e0;
color: white;
}

@media (min-width: 576px) {
.device-brand-list__item:not(:first-child) {
margin-left: 30px;
}
}

.device-type__name {
text-align: center;
margin-top: 20px;
Expand Down

0 comments on commit 8a9f133

Please sign in to comment.