@@ -51,12 +51,15 @@ function displayFamilies(familyCounts) {
5151 familiesContainer . innerHTML = "" ;
5252
5353 const sortedFamilies = Object . keys ( familyCounts ) . sort ( ) ;
54+ const maxVisible = 5 ; // Show only first 5 initially
55+ let showMoreClicked = false ;
5456
55- sortedFamilies . forEach ( ( family ) => {
57+ sortedFamilies . forEach ( ( family , index ) => {
5658 const familyCount = familyCounts [ family ] ;
5759
5860 const familyRow = document . createElement ( "div" ) ;
5961 familyRow . className = "family-row" ;
62+ if ( index >= maxVisible ) familyRow . style . display = "none" ; // Hide extra items initially
6063
6164 const checkbox = document . createElement ( "input" ) ;
6265 checkbox . type = "checkbox" ;
@@ -67,29 +70,53 @@ function displayFamilies(familyCounts) {
6770 familyName . className = "family-name" ;
6871 familyName . textContent = family ;
6972
70- const familyCountElem = document . createElement ( "span" ) ;
71- familyCountElem . className = "family-count" ;
72- familyCountElem . textContent = `( ${ familyCount } ) ` ;
73+ const familyCountElement = document . createElement ( "span" ) ;
74+ familyCountElement . className = "family-count" ;
75+ familyCountElement . textContent = `${ familyCount } ;
7376
7477 familyRow . appendChild ( checkbox ) ;
7578 familyRow . appendChild ( familyName ) ;
76- // familyRow.appendChild(familyCountElem );
79+ familyRow . appendChild ( familyCountElement ) ;
7780
7881 familiesContainer . appendChild ( familyRow ) ;
7982 } ) ;
83+
84+ // Handle "Show more" click
85+ const showMoreButton = document . querySelector ( ".product-families .show-more" ) ;
86+ const FamilyRows = document . querySelectorAll ( ".family-row" ) ;
87+ showMoreButton . addEventListener ( "click" , ( ) => {
88+ if ( showMoreClicked ) {
89+ FamilyRows . forEach ( ( row , index ) => {
90+ if ( index >= maxVisible ) {
91+ row . style . display = "none" ;
92+ }
93+ } ) ;
94+ showMoreButton . textContent = "Show more" ;
95+ showMoreClicked = false ;
96+ } else {
97+ FamilyRows . forEach ( ( row ) => {
98+ row . style . display = "flex" ;
99+ } ) ;
100+ showMoreButton . textContent = "Show less" ;
101+ showMoreClicked = true ;
102+ }
103+ } ) ;
80104}
81105
82106function displayTags ( tagCounts ) {
83107 const tagsContainer = document . getElementById ( "product-tags-list" ) ;
84108 tagsContainer . innerHTML = "" ;
85109
86110 const sortedTags = Object . keys ( tagCounts ) . sort ( ) ;
111+ const maxVisible = 5 ; // Show only first 5 initially
112+ let showMoreClicked = false ;
87113
88- sortedTags . forEach ( ( tag ) => {
114+ sortedTags . forEach ( ( tag , index ) => {
89115 const tagCount = tagCounts [ tag ] ;
90116
91117 const tagRow = document . createElement ( "div" ) ;
92118 tagRow . className = "tag-row" ;
119+ if ( index >= maxVisible ) tagRow . style . display = "none" ; // Hide extra items initially
93120
94121 const checkbox = document . createElement ( "input" ) ;
95122 checkbox . type = "checkbox" ;
@@ -100,19 +127,56 @@ function displayTags(tagCounts) {
100127 tagName . className = "tag-name" ;
101128 tagName . textContent = tag ;
102129
103- const tagCountElem = document . createElement ( "span" ) ;
104- tagCountElem . className = "tag-count" ;
105- tagCountElem . textContent = `( ${ tagCount } ) ` ;
130+ const tagCountElement = document . createElement ( "span" ) ;
131+ tagCountElement . className = "tag-count" ;
132+ tagCountElement . textContent = `${ tagCount } ;
106133
107134 tagRow . appendChild ( checkbox ) ;
108135 tagRow . appendChild ( tagName ) ;
109- // tagRow.appendChild(tagCountElem );
136+ tagRow . appendChild ( tagCountElement ) ;
110137
111138 tagsContainer . appendChild ( tagRow ) ;
112139 } ) ;
140+
141+ // Handle "Show more" click
142+ const showMoreButton = document . querySelector ( ".product-tags .show-more" ) ;
143+ const TagRows = document . querySelectorAll ( ".tag-row" ) ;
144+ showMoreButton . addEventListener ( "click" , ( ) => {
145+ if ( showMoreClicked ) {
146+ TagRows . forEach ( ( row , index ) => {
147+ if ( index >= maxVisible ) {
148+ row . style . display = "none" ;
149+ }
150+ } ) ;
151+ showMoreButton . textContent = "Show more" ;
152+ showMoreClicked = false ;
153+ } else {
154+ TagRows . forEach ( ( row ) => {
155+ row . style . display = "flex" ;
156+ } ) ;
157+ showMoreButton . textContent = "Show less" ;
158+ showMoreClicked = true ;
159+ }
160+ } ) ;
113161}
114162
115163function handleFamilySelection ( ) {
164+ applyFilters ( ) ;
165+ }
166+
167+ function handleTagSelection ( ) {
168+ applyFilters ( ) ;
169+ }
170+
171+ function applyFilters ( ) {
172+ const SelectedTagsContainer = document . getElementById (
173+ "selected-product-tags-list" ,
174+ ) ;
175+ const SelectedFamiliesContainer = document . getElementById (
176+ "selected-product-families-list" ,
177+ ) ;
178+ SelectedTagsContainer . innerHTML = "" ;
179+ SelectedFamiliesContainer . innerHTML = "" ;
116180 const selectedFamilies = Array . from (
117181 document . querySelectorAll (
118182 '#product-families-list input[type="checkbox"]:checked' ,
@@ -121,58 +185,58 @@ function handleFamilySelection() {
121185 checkbox . id . replace ( "family-" , "" ) . replace ( "\\ " , "-" ) . toLowerCase ( ) ,
122186 ) ;
123187
124- console . log ( "Selected families:" , selectedFamilies ) ;
125-
126- const projectCards = document . querySelectorAll ( ".project-card" ) ;
127-
128- projectCards . forEach ( ( card ) => {
129- const family = card . getAttribute ( "data-family" ) . toLowerCase ( ) ;
130- console . log ( "Family:" , family ) ;
131- card . style . display =
132- selectedFamilies . length === 0 || selectedFamilies . includes ( family )
133- ? "flex"
134- : "none" ;
135- } ) ;
136- }
137-
138- function handleTagSelection ( ) {
139188 const selectedTags = Array . from (
140189 document . querySelectorAll (
141190 '#product-tags-list input[type="checkbox"]:checked' ,
142191 ) ,
143192 ) . map ( ( checkbox ) =>
144193 checkbox . id . replace ( "tag-" , "" ) . replace ( "\\ " , "-" ) . toLowerCase ( ) ,
145194 ) ;
195+ for ( const tag of selectedTags ) {
196+ const selectedTag = document . createElement ( "span" ) ;
197+ selectedTag . className = "selected-tag" ;
198+ selectedTag . textContent = tag ;
199+ SelectedTagsContainer . appendChild ( selectedTag ) ;
200+ }
201+
202+ for ( const family of selectedFamilies ) {
203+ const selectedFamily = document . createElement ( "span" ) ;
204+ selectedFamily . className = "selected-family" ;
205+ selectedFamily . textContent = family ;
206+ SelectedFamiliesContainer . appendChild ( selectedFamily ) ;
207+ }
146208
209+ console . log ( "Selected families:" , selectedFamilies ) ;
147210 console . log ( "Selected tags:" , selectedTags ) ;
148211
149212 const projectCards = document . querySelectorAll ( ".project-card" ) ;
150213
151214 projectCards . forEach ( ( card ) => {
215+ const family = card . getAttribute ( "data-family" ) . toLowerCase ( ) ;
152216 const rawTags = card . getAttribute ( "data-tags" ) ;
153217
154- if ( ! rawTags ) {
155- card . style . display = "none" ;
156- return ;
157- }
158-
159- // Parse the data-tags string
160218 let cardTags = [ ] ;
161- try {
162- cardTags = JSON . parse ( rawTags . replace ( / ' / g, '"' ) ) ;
163- } catch ( error ) {
164- console . error ( "Error parsing data-tags:" , rawTags , error ) ;
165- card . style . display = "none" ;
166- return ;
219+ if ( rawTags ) {
220+ try {
221+ cardTags = JSON . parse ( rawTags . replace ( / ' / g, '"' ) ) . map ( ( tag ) =>
222+ tag . toLowerCase ( ) ,
223+ ) ;
224+ } catch ( error ) {
225+ console . error ( "Error parsing data-tags:" , rawTags , error ) ;
226+ }
167227 }
168228
169- const cardTagsLower = cardTags . map ( ( tag ) => tag . toLowerCase ( ) ) ;
170- const hasMatchingTag = selectedTags . some ( ( tag ) =>
171- cardTagsLower . includes ( tag ) ,
172- ) ;
229+ // Check if the card matches the selected families
230+ const matchesAllFamilies =
231+ selectedFamilies . length === 0 || selectedFamilies . includes ( family ) ;
232+
233+ // Check if the card matches the selected tags
234+ const matchesAllTags =
235+ selectedTags . length === 0 ||
236+ selectedTags . every ( ( tag ) => cardTags . includes ( tag ) ) ;
173237
174- card . style . display =
175- selectedTags . length === 0 || hasMatchingTag ? "flex" : "none" ;
238+ // Show only if both family & tag filters match (or if no filter is applied)
239+ card . style . display = matchesAllFamilies && matchesAllTags ? "flex" : "none" ;
176240 } ) ;
177241}
178242
0 commit comments