Skip to content

Commit 1da5897

Browse files
issackjohnissackjohn
committed
extract maps out
1 parent d33685a commit 1da5897

File tree

11 files changed

+273
-252
lines changed

11 files changed

+273
-252
lines changed

‎experimental/responsive-design/dist/app.js

Lines changed: 105 additions & 119 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎experimental/responsive-design/src/lib/components/app-ribbon.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export class AppRibbon extends LightDOMLitElement {
2020
this.resizeObserver = new ResizeObserver((entries) => {
2121
for (const entry of entries) {
2222
const width = entry.contentRect.width;
23-
this.updateVisibleButtons(width);
23+
this._updateVisibleButtons(width);
2424
}
2525
});
2626
this.resizeObserver.observe(this);
@@ -32,7 +32,7 @@ export class AppRibbon extends LightDOMLitElement {
3232
this.resizeObserver.disconnect();
3333
}
3434

35-
updateVisibleButtons(width) {
35+
_updateVisibleButtons(width) {
3636
const breakpoints = [
3737
{ minWidth: 1120, buttons: 12 },
3838
{ minWidth: 1069, buttons: 11 },
@@ -50,17 +50,19 @@ export class AppRibbon extends LightDOMLitElement {
5050
this.requestUpdate();
5151
}
5252

53+
_getVisibleButtonsTemplate() {
54+
return this.visibleButtons.map(
55+
(button, index) => html`
56+
<ribbon-button id="${button.id}" text="${button.text}" variant="${button.variant}" iconPosition="${button.iconPosition}"></ribbon-button>
57+
${index === 0 ? html`<div class="mx-0.5 h-6 border-l border-gray-300"></div>` : ""}
58+
`
59+
);
60+
}
61+
5362
render() {
5463
return html`
5564
<nav class="mt-1 flex items-center justify-between p-1">
56-
<div class="flex flex-nowrap items-baseline overflow-x-hidden">
57-
${this.visibleButtons.map(
58-
(button, index) => html`
59-
<ribbon-button id="${button.id}" text="${button.text}" variant="${button.variant}" iconPosition="${button.iconPosition}"></ribbon-button>
60-
${index === 0 ? html`<div class="mx-0.5 h-6 border-l border-gray-300"></div>` : ""}
61-
`
62-
)}
63-
</div>
65+
<div class="flex flex-nowrap items-baseline overflow-x-hidden">${this._getVisibleButtonsTemplate()}</div>
6466
<div class="3xl:hidden">
6567
<button class="mx-1 inline-flex rounded-md bg-gray-200 px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-300">
6668
<!-- Heroicons are MIT licensed. See https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->

‎experimental/responsive-design/src/lib/components/article-grid.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,17 @@ class ArticleGrid extends LightDOMLitElement {
1313
this.articles = articles;
1414
}
1515

16+
_getArticlesTemplate() {
17+
return this.articles.map((article) => {
18+
return html`<article-card title="${article.title}" description="${article.description}" author="${article.author}" image="${article.image}" .tags="${article.tags}"></article-card>`;
19+
});
20+
}
21+
1622
render() {
1723
return html`
1824
<div class="flex flex-col p-2">
1925
<section-heading title="Articles" subtitle="Read insightful articles about food, cooking tips, and more."></section-heading>
20-
<div class="content-auto grid grid-cols-1 gap-6 p-4 lg:grid-cols-1">
21-
${this.articles.map((article) => {
22-
return html`<article-card title="${article.title}" description="${article.description}" author="${article.author}" image="${article.image}" .tags="${article.tags}"></article-card>`;
23-
})}
24-
</div>
26+
<div class="content-auto grid grid-cols-1 gap-6 p-4 lg:grid-cols-1">${this._getArticlesTemplate()}</div>
2527
</div>
2628
`;
2729
}

‎experimental/responsive-design/src/lib/components/chat-messages.js

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,22 @@ class ChatMessages extends LightDOMLitElement {
2828
}
2929
}
3030

31+
_getMessagesTemplate() {
32+
return this.messages.map(
33+
(message) => html`
34+
<li class="${message.user ? "justify-end" : "justify-start"} flex">
35+
<div class="${message.user ? "bg-teal-100 text-teal-900 md:max-w-36" : "bg-gray-200 text-gray-900 md:max-w-48"} text-pretty rounded-md px-3 py-2 text-xs">
36+
${message.user || message.bot} ${message.imageUrl ? html` <img src="${message.imageUrl}" alt="${message.imageAlt}" class="mt-2 h-32 w-full rounded-md" /> ` : ""}
37+
</div>
38+
</li>
39+
`
40+
);
41+
}
42+
3143
render() {
3244
return html`
3345
<ul ${ref(this.scrollContainerRef)} class="flex max-h-[345px] flex-1 flex-col space-y-2 overflow-y-auto p-2">
34-
${this.messages.map(
35-
(message) => html`
36-
<li class="${message.user ? "justify-end" : "justify-start"} flex">
37-
<div class="${message.user ? "bg-teal-100 text-teal-900 md:max-w-36" : "bg-gray-200 text-gray-900 md:max-w-48"} text-pretty rounded-md px-3 py-2 text-xs">
38-
${message.user || message.bot} ${message.imageUrl ? html` <img src="${message.imageUrl}" alt="${message.imageAlt}" class="mt-2 h-32 w-full rounded-md" /> ` : ""}
39-
</div>
40-
</li>
41-
`
42-
)}
46+
${this._getMessagesTemplate()}
4347
</ul>
4448
`;
4549
}

‎experimental/responsive-design/src/lib/components/chat-window.js

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -56,30 +56,38 @@ class ChatWindow extends LitElement {
5656
this._currentChat = e.target.value;
5757
}
5858

59+
_getOptionsTemplate() {
60+
return html`
61+
<div class="flex flex-1 flex-col items-center justify-center gap-4 p-4">
62+
<button id="resume-previous-chat-btn" @click="${this._resumePreviousChat}" class="w-full rounded-md bg-teal-600/50 px-4 py-2 text-white hover:bg-teal-600 focus:outline-none">Resume Previous Chat</button>
63+
<button @click="${this._startNewChat}" class="w-full rounded-md bg-orange-500/50 px-4 py-2 text-white hover:bg-orange-500 focus:outline-none">Start a New Conversation</button>
64+
</div>
65+
`;
66+
}
67+
68+
_getChatTemplate() {
69+
return html`
70+
<div class="flex flex-1 flex-col">
71+
<chat-messages class="flex-1 overflow-y-auto" .messages="${this.messages}"></chat-messages>
72+
<chat-input .value="${this._currentChat}" @input="${this._handleInputChange}" @send-chat="${this._handleSendChat}"></chat-input>
73+
</div>
74+
`;
75+
}
76+
77+
_getContentTemplate() {
78+
if (!this._isExpanded)
79+
return null;
80+
return this._showOptions ? this._getOptionsTemplate() : this._getChatTemplate();
81+
}
82+
5983
render() {
6084
return html`
6185
<div id="chat-window" class="${this._isExpanded ? "h-[440px]" : "h-12"} bottom-2 right-2 m-auto flex flex-col rounded-lg border-2 border-solid bg-gray-50 shadow-lg sm:sticky sm:w-full md:fixed md:w-64 lg:w-96">
6286
<div class="${this._isExpanded ? "rounded-t-lg" : "rounded-lg"} flex items-center justify-between bg-teal-600/75 px-4 py-2 text-white shadow-md">
6387
<p class="text-lg font-semibold">Chef AI</p>
6488
<button id="expand-chat-btn" @click="${this._toggleExpand}" class="rounded-full bg-white px-2 py-1 text-sm text-teal-600/75 hover:bg-teal-100 focus:outline-none">${this._isExpanded ? "Collapse" : "Expand"}</button>
6589
</div>
66-
${this._isExpanded
67-
? html`
68-
${this._showOptions
69-
? html`
70-
<div class="flex flex-1 flex-col items-center justify-center gap-4 p-4">
71-
<button id="resume-previous-chat-btn" @click="${this._resumePreviousChat}" class="w-full rounded-md bg-teal-600/50 px-4 py-2 text-white hover:bg-teal-600 focus:outline-none">Resume Previous Chat</button>
72-
<button @click="${this._startNewChat}" class="w-full rounded-md bg-orange-500/50 px-4 py-2 text-white hover:bg-orange-500 focus:outline-none">Start a New Conversation</button>
73-
</div>
74-
`
75-
: html`
76-
<div class="flex flex-1 flex-col">
77-
<chat-messages class="flex-1 overflow-y-auto" .messages="${this.messages}"></chat-messages>
78-
<chat-input .value="${this._currentChat}" @input="${this._handleInputChange}" @send-chat="${this._handleSendChat}"></chat-input>
79-
</div>
80-
`}
81-
`
82-
: null}
90+
${this._getContentTemplate()}
8391
</div>
8492
`;
8593
}

‎experimental/responsive-design/src/lib/components/chef-tips.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,22 @@ class ChefTips extends LightDOMLitElement {
1313
this.chefTips = chefTips;
1414
}
1515

16+
_getChefTipsTemplate() {
17+
return this.chefTips.map((tip) => {
18+
return html`
19+
<blockquote class="rounded-lg bg-gray-100 p-4 shadow-md">
20+
<p class="italic text-gray-700">"${tip.quote}"</p>
21+
<footer class="mt-2 text-right text-sm text-gray-500">- ${tip.author}</footer>
22+
</blockquote>
23+
`;
24+
});
25+
}
26+
1627
render() {
1728
return html`
1829
<div class="p-4">
1930
<section-heading title="Chef's Tips"></section-heading>
20-
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
21-
${this.chefTips.map((tip) => {
22-
return html`
23-
<blockquote class="rounded-lg bg-gray-100 p-4 shadow-md">
24-
<p class="italic text-gray-700">"${tip.quote}"</p>
25-
<footer class="mt-2 text-right text-sm text-gray-500">- ${tip.author}</footer>
26-
</blockquote>
27-
`;
28-
})}
29-
</div>
31+
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">${this._getChefTipsTemplate()}</div>
3032
</div>
3133
`;
3234
}

‎experimental/responsive-design/src/lib/components/information-window.js

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -83,33 +83,39 @@ class InformationWindow extends LitElement {
8383
this.requestUpdate();
8484
}
8585

86+
_getExpandedTemplate() {
87+
return html`
88+
<div class="relative w-full overflow-hidden">
89+
<button
90+
class="absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
91+
@click="${this.previousCard}"
92+
?disabled="${this._currentIndex === 0}"
93+
>
94+
&lt;
95+
</button>
96+
<div class="card-row flex w-full">
97+
${this.restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}" class="box-border w-full flex-none p-2"></restaurant-card> `)}
98+
</div>
99+
<button
100+
class="absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
101+
@click="${this.nextCard}"
102+
?disabled="${this._currentIndex === this.restaurants.length - 1}"
103+
>
104+
&gt;
105+
</button>
106+
</div>
107+
`;
108+
}
109+
110+
_getGridTemplate() {
111+
return html` <div class="grid grid-cols-2 gap-4">${this.restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}"></restaurant-card> `)}</div> `;
112+
}
113+
86114
render() {
87115
return html`
88116
<div class="p-1">
89117
<h4 class="my-1 mb-1 text-base font-semibold text-gray-700">Restaurants Near You</h4>
90-
${this._isChatExpanded
91-
? html`
92-
<div class="relative w-full overflow-hidden">
93-
<button
94-
class="absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
95-
@click="${this.previousCard}"
96-
?disabled="${this._currentIndex === 0}"
97-
>
98-
&lt;
99-
</button>
100-
<div class="card-row flex w-full">
101-
${this.restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}" class="box-border w-full flex-none p-2"></restaurant-card> `)}
102-
</div>
103-
<button
104-
class="absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
105-
@click="${this.nextCard}"
106-
?disabled="${this._currentIndex === this.restaurants.length - 1}"
107-
>
108-
&gt;
109-
</button>
110-
</div>
111-
`
112-
: html` <div class="grid grid-cols-2 gap-4">${this.restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}"></restaurant-card> `)}</div> `}
118+
${this._isChatExpanded ? this._getExpandedTemplate() : this._getGridTemplate()}
113119
</div>
114120
`;
115121
}

‎experimental/responsive-design/src/lib/components/recipe-card.js

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,36 @@ class RecipeCard extends LightDOMLitElement {
3838
);
3939
}
4040

41+
_getStepsTemplate() {
42+
return this.steps.map(
43+
(step, index) => html`
44+
<li class="flex items-center space-x-2 text-xs">
45+
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-orange-200 font-bold text-orange-800">${index + 1}</span>
46+
<span>${step}</span>
47+
</li>
48+
`
49+
);
50+
}
51+
52+
_getExpandedTemplate() {
53+
return html`
54+
<div class="flex justify-between p-2">
55+
<div>
56+
<h4 class="text-xs font-semibold text-gray-700">Ingredients:</h4>
57+
<ul class="list-inside list-disc space-y-1 pl-4 text-xs text-gray-600">
58+
${this.ingredients.map((ingredient) => html`<li>${ingredient}</li>`)}
59+
</ul>
60+
</div>
61+
<div class="text-xs">
62+
<h4 class="font-semibold text-gray-700">Steps:</h4>
63+
<ol class="list-inside list-decimal space-y-1 pl-4 text-gray-600">
64+
${this._getStepsTemplate()}
65+
</ol>
66+
</div>
67+
</div>
68+
`;
69+
}
70+
4171
render() {
4272
return html`
4373
<div class="row-span-6 grid grid-rows-subgrid rounded-lg bg-gradient-to-br from-blue-50 to-green-50 text-left shadow-md">
@@ -54,30 +84,7 @@ class RecipeCard extends LightDOMLitElement {
5484
<div class="absolute -top-4 left-0 right-0 flex justify-center space-x-2 p-2">
5585
${this.tags.map((tag) => html`<span class="inline-flex items-center rounded-md bg-orange-100 px-1 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-orange-500/10">${tag}</span> `)}
5686
</div>
57-
${this.isExpanded
58-
? html`
59-
<div class="flex justify-between p-2">
60-
<div>
61-
<h4 class="text-xs font-semibold text-gray-700">Ingredients:</h4>
62-
<ul class="list-inside list-disc space-y-1 pl-4 text-xs text-gray-600">
63-
${this.ingredients.map((ingredient) => html`<li>${ingredient}</li>`)}
64-
</ul>
65-
</div>
66-
<div class="text-xs">
67-
<h4 class="font-semibold text-gray-700">Steps:</h4>
68-
<ol class="list-inside list-decimal space-y-1 pl-4 text-gray-600">
69-
${this.steps.map(
70-
(step, index) =>
71-
html`<li class="flex items-center space-x-2 text-xs">
72-
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-orange-200 font-bold text-orange-800">${index + 1}</span>
73-
<span>${step}</span>
74-
</li>`
75-
)}
76-
</ol>
77-
</div>
78-
</div>
79-
`
80-
: ""}
87+
${this.isExpanded ? this._getExpandedTemplate() : ""}
8188
<button @click="${this._toggleExpand}" class="show-more-btn w-28 justify-self-end border-none bg-transparent p-1 text-sm text-blue-400 hover:text-blue-900">${this.isExpanded ? "Show Less" : "Show More..."}</button>
8289
</div>
8390
`;

‎experimental/responsive-design/src/lib/components/recipe-carousel.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,16 @@ class RecipeCarousel extends LightDOMLitElement {
3636
}
3737
}
3838

39+
_getCarouselItemsTemplate() {
40+
return this.carouselItems.map(
41+
(item) => html`
42+
<div class="mr-4 h-36 w-1/3 flex-none snap-center overflow-hidden rounded-lg">
43+
<img src="${item.image}" alt="${item.alt}" class="h-full w-44 rounded-t-lg object-cover drop-shadow-xl" />
44+
</div>
45+
`
46+
);
47+
}
48+
3949
render() {
4050
return html`
4151
<div class="box-border w-full bg-gray-100 shadow-md">
@@ -49,15 +59,7 @@ class RecipeCarousel extends LightDOMLitElement {
4959
&lt;
5060
</button>
5161
<div class="px-5 pb-1">
52-
<div class="carousel scrollbar-hide flex w-full snap-x overflow-x-scroll scroll-smooth">
53-
${this.carouselItems.map(
54-
(item) => html`
55-
<div class="mr-4 h-36 w-1/3 flex-none snap-center overflow-hidden rounded-lg">
56-
<img src="${item.image}" alt="${item.alt}" class="h-full w-44 rounded-t-lg object-cover drop-shadow-xl" />
57-
</div>
58-
`
59-
)}
60-
</div>
62+
<div class="carousel scrollbar-hide flex w-full snap-x overflow-x-scroll scroll-smooth">${this._getCarouselItemsTemplate()}</div>
6163
</div>
6264
<button
6365
@click="${this.nextItem}"

0 commit comments

Comments
 (0)