Skip to content

Commit fd848c0

Browse files
issackjohnissackjohn
authored
Remove nested iframe, add double RAF (#37)
* Remove iframe and integrate cooking-app directly into index.html * Remove querySelectorAllInShadowRoot method from PageElement class * move setWidth method to Page class
1 parent 943bc6a commit fd848c0

File tree

14 files changed

+97
-159
lines changed

14 files changed

+97
-159
lines changed

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

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

‎experimental/responsive-design/dist/iframe.html‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎experimental/responsive-design/dist/index.html‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Cooking with Lit and Tailwind</title>
7+
<script type="module" src="app.js"></script>
78
<style>
89
body,
910
html {
@@ -12,14 +13,47 @@
1213
height: 100%;
1314
overflow: hidden;
1415
}
15-
#content-iframe {
16-
width: 100%;
17-
height: 100%;
18-
border: none;
19-
}
2016
</style>
17+
<!-- Preload links autogenerated by Rollup -->
18+
<link rel="preload" as="image" href="./public/images/5-healthy-smoothie.webp">
19+
<link rel="preload" as="image" href="./public/images/beef-stroganoff.webp">
20+
<link rel="preload" as="image" href="./public/images/beef-tacos.webp">
21+
<link rel="preload" as="image" href="./public/images/best-comfort-food.webp">
22+
<link rel="preload" as="image" href="./public/images/bread-at-home.webp">
23+
<link rel="preload" as="image" href="./public/images/caesar-salad.webp">
24+
<link rel="preload" as="image" href="./public/images/chicken-alfredo.webp">
25+
<link rel="preload" as="image" href="./public/images/chocolate-cake.webp">
26+
<link rel="preload" as="image" href="./public/images/chocolate-chip-cookies.webp">
27+
<link rel="preload" as="image" href="./public/images/fruit-salad.webp">
28+
<link rel="preload" as="image" href="./public/images/garlic-bread.webp">
29+
<link rel="preload" as="image" href="./public/images/gluten-free-baking.webp">
30+
<link rel="preload" as="image" href="./public/images/greek-salad.webp">
31+
<link rel="preload" as="image" href="./public/images/homemade-pizza.webp">
32+
<link rel="preload" as="image" href="./public/images/icons-outline.webp">
33+
<link rel="preload" as="image" href="./public/images/lemon-drizzle-cake.webp">
34+
<link rel="preload" as="image" href="./public/images/low-carb-desserts.webp">
35+
<link rel="preload" as="image" href="./public/images/margherita-pizza.webp">
36+
<link rel="preload" as="image" href="./public/images/mastering-art-of-french-cooking.webp">
37+
<link rel="preload" as="image" href="./public/images/meal-prepping.webp">
38+
<link rel="preload" as="image" href="./public/images/mediterranean-cuisine.webp">
39+
<link rel="preload" as="image" href="./public/images/pancakes.webp">
40+
<link rel="preload" as="image" href="./public/images/plant-based-protein.webp">
41+
<link rel="preload" as="image" href="./public/images/quinoa-stuffed-peppers.webp">
42+
<link rel="preload" as="image" href="./public/images/ramen-noodles.webp">
43+
<link rel="preload" as="image" href="./public/images/seasonal-salads.webp">
44+
<link rel="preload" as="image" href="./public/images/shrimp-paella.webp">
45+
<link rel="preload" as="image" href="./public/images/spaghetti-carbonara.webp">
46+
<link rel="preload" as="image" href="./public/images/superfoods-you-should-include.webp">
47+
<link rel="preload" as="image" href="./public/images/sushi-platter.webp">
48+
<link rel="preload" as="image" href="./public/images/thai-green-curry.webp">
49+
<link rel="preload" as="image" href="./public/images/tomato-soup.webp">
50+
<link rel="preload" as="image" href="./public/images/vegan-burger.webp">
51+
<link rel="preload" as="image" href="./public/images/vegan-desserts.webp">
52+
<link rel="preload" as="image" href="./public/images/vegetable-stir-fry.webp">
53+
<link rel="preload" as="image" href="./public/images/vegetarian-stir-fry.webp">
54+
<link rel="preload" as="image" href="./public/images/week-night-dinners.webp">
2155
</head>
2256
<body>
23-
<iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html"></iframe>
57+
<cooking-app></cooking-app>
2458
</body>
2559
</html>

‎experimental/responsive-design/iframe.html‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎experimental/responsive-design/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Cooking with Lit and Tailwind</title>
7+
<script type="module" src="app.js"></script>
78
<style>
89
body,
910
html {
@@ -12,14 +13,9 @@
1213
height: 100%;
1314
overflow: hidden;
1415
}
15-
#content-iframe {
16-
width: 100%;
17-
height: 100%;
18-
border: none;
19-
}
2016
</style>
2117
</head>
2218
<body>
23-
<iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html"></iframe>
19+
<cooking-app></cooking-app>
2420
</body>
2521
</html>

‎experimental/responsive-design/rollup.config.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,24 +44,21 @@ export default {
4444
})
4545
.join("\n ");
4646

47-
const iframePath = path.resolve("iframe.html");
48-
let iframeContent = fs.readFileSync(iframePath, "utf-8");
47+
const indexPath = path.resolve("index.html");
48+
let indexContent = fs.readFileSync(indexPath, "utf-8");
4949

5050
const preloadComment = "<!-- Preload links autogenerated by Rollup -->";
5151
const autogeneratedComment = `${preloadComment}\n ${preloadLinks}`;
5252

53-
iframeContent = iframeContent.replace("</head>", ` ${autogeneratedComment}\n </head>`);
53+
indexContent = indexContent.replace("</head>", ` ${autogeneratedComment}\n </head>`);
5454

55-
return iframeContent;
55+
return indexContent;
5656
},
57-
fileName: "iframe.html",
57+
fileName: "index.html",
5858
}),
5959
summary(),
6060
copy({
61-
targets: [
62-
{ src: "index.html", dest: `${outputDir}/` },
63-
{ src: "public/", dest: `${outputDir}/` },
64-
],
61+
targets: [{ src: "public/", dest: `${outputDir}/` }],
6562
}),
6663
],
6764
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from "./lib/components/cooking-app.js";
1+
import "./lib/components/cooking-app.js";

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,10 @@ class InformationWindow extends LitElement {
7474

7575
updateCarousel() {
7676
const cardRow = this.shadowRoot.querySelector(".card-row");
77-
if (cardRow)
77+
if (cardRow) {
7878
cardRow.style.transform = `translateX(-${this._currentIndex * 100}%)`;
79+
cardRow.style.transition = "none";
80+
}
7981

8082
this.requestUpdate();
8183
}
@@ -84,7 +86,7 @@ class InformationWindow extends LitElement {
8486
return html`
8587
<div class="relative w-full overflow-hidden">
8688
<button
87-
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"
89+
class="absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform animate-none 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"
8890
@click="${this.previousCard}"
8991
?disabled="${this._currentIndex === 0}"
9092
>
@@ -95,7 +97,7 @@ class InformationWindow extends LitElement {
9597
</div>
9698
<button
9799
id="next-restaurant-btn"
98-
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"
100+
class="absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform animate-none 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"
99101
@click="${this.nextCard}"
100102
?disabled="${this._currentIndex === this._restaurants.length - 1}"
101103
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ class RecipeCarousel extends LightDOMLitElement {
101101
&lt;
102102
</button>
103103
<div class="px-5 pb-1">
104-
<div class="carousel scrollbar-hide flex w-full snap-x overflow-x-scroll scroll-smooth">${this._getCarouselItemsTemplate()}</div>
104+
<div class="carousel scrollbar-hide flex w-full snap-x overflow-x-scroll scroll-auto">${this._getCarouselItemsTemplate()}</div>
105105
</div>
106106
<button
107107
id="next-item-carousel-btn"

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,7 @@ class RecipeGrid extends LightDOMLitElement {
3939

4040
await this.updateComplete;
4141

42-
// Dispatch to parent window (the benchmark runner's window)
43-
if (window.parent !== window)
44-
window.parent.dispatchEvent(new CustomEvent("resize-work-complete"));
42+
window.dispatchEvent(new CustomEvent("resize-work-complete"));
4543
}
4644

4745
_handleToggleExpand(event) {

0 commit comments

Comments
 (0)