Speedometer/experimental/responsive-design/src/lib/components/information-window.js at 2bf2ac5fb53dfec325982a767fb5158475105dbf · issackjohn/Speedometer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { LitElement, html, adoptStyles } from "lit";
import { restaurants } from "../../data/restaurants.js";
import "./restaurant-card.js";

import chatWindowStyles from "../chat-window.constructable.js";
class InformationWindow extends LitElement {
    static properties = {
        _isChatExpanded: { type: Boolean },
        _currentIndex: { type: Number },
        chatWindow: { type: Object },
    };

    constructor() {
        super();
        this._restaurants = restaurants;
        this._isChatExpanded = true;
        this._currentIndex = 0;

        // ResizeObserver is used primarily to exercise this API as part of the benchmark.
        this._resizeObserver = new ResizeObserver((entries) => {
            for (const entry of entries) {
                const height = entry.contentBoxSize && entry.contentBoxSize[0] ? entry.contentBoxSize[0].blockSize : entry.contentRect.height;
                this._isChatExpanded = height > 350;
                this._currentIndex = 0;
                this.updateCarousel();
            }
        });
    }

    connectedCallback() {
        super.connectedCallback();
        adoptStyles(this.shadowRoot, [chatWindowStyles]);

        if (this.hasUpdated && this.chatWindow) {
            const chatWindowInner = this.chatWindow.shadowRoot.querySelector("#chat-window");
            if (chatWindowInner)
                this._resizeObserver.observe(chatWindowInner);
        }
    }

    firstUpdated() {
        if (this.chatWindow) {
            const chatWindowInner = this.chatWindow.shadowRoot.querySelector("#chat-window");
            if (chatWindowInner)
                this._resizeObserver.observe(chatWindowInner);
        }
    }

    disconnectedCallback() {
        super.disconnectedCallback();
        if (this._resizeObserver)
            this._resizeObserver.disconnect();
    }

    handleChatResize(event) {
        this._isChatExpanded = event.detail.isExpanded;
        this._currentIndex = 0;
        this.updateCarousel();
    }

    previousCard() {
        if (this._currentIndex > 0) {
            this._currentIndex--;
            this.updateCarousel();
        }
    }

    nextCard() {
        if (this._currentIndex < this._restaurants.length - 1) {
            this._currentIndex++;
            this.updateCarousel();
        }
    }

    updateCarousel() {
        const cardRow = this.shadowRoot.querySelector(".card-row");
        if (cardRow) {
            cardRow.style.transform = `translateX(-${this._currentIndex * 100}%)`;
            cardRow.style.transition = "none";
        }

        this.requestUpdate();
    }

    _getExpandedTemplate() {
        return html`
            <div class="relative w-full overflow-hidden">
                <button
                    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"
                    @click="${this.previousCard}"
                    ?disabled="${this._currentIndex === 0}"
                >
                    &lt;
                </button>
                <div class="card-row flex w-full">
                    ${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> `)}
                </div>
                <button
                    id="next-restaurant-btn"
                    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"
                    @click="${this.nextCard}"
                    ?disabled="${this._currentIndex === this._restaurants.length - 1}"
                >
                    &gt;
                </button>
            </div>
        `;
    }

    _getGridTemplate() {
        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> `;
    }

    render() {
        return html`
            <div class="p-1 xl:p-8">
                <h4 class="my-1 mb-1 text-base font-semibold text-gray-700">Restaurants Near You</h4>
                ${this._isChatExpanded ? this._getExpandedTemplate() : this._getGridTemplate()}
            </div>
        `;
    }
}

customElements.define("information-window", InformationWindow);