mealz-components 0.6.1 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,7 @@ import{u,f as m,i as g,h as b,k as n,t as f}from"../assets/lit-element-BKlYWoBt.
|
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2017 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/function y(t,e){return(s,i,o)=>{const a=r=>{var p;return((p=r.renderRoot)==null?void 0:p.querySelector(t))??null};return w(s,i,{get(){return a(this)}})}}class S{get extId(){return this.attributes["ext-id"]}}var
|
|
17
|
+
*/function y(t,e){return(s,i,o)=>{const a=r=>{var p;return((p=r.renderRoot)==null?void 0:p.querySelector(t))??null};return w(s,i,{get(){return a(this)}})}}class S{get extId(){return this.attributes["ext-id"]}}var C=Object.defineProperty,L=Object.getOwnPropertyDescriptor,d=(t,e,s,i)=>{for(var o=i>1?void 0:i?L(e,s):e,a=t.length-1,r;a>=0;a--)(r=t[a])&&(o=(i?r(e,s,o):r(o))||o);return i&&o&&C(e,s,o),o};let l=class extends b{constructor(){var t,e,s,i,o,a;super(...arguments),this.selectedRadius=50,this.getByAddress=(e=(t=window.miam)==null?void 0:t.pos)==null?void 0:e.getByAddress,this.getByCoordinates=(i=(s=window.miam)==null?void 0:s.pos)==null?void 0:i.getByCoordinates,this.getAffiliateSuppliers=(a=(o=window.miam)==null?void 0:o.supplier)==null?void 0:a.getAffiliateSuppliers,this._posList=[],this._markers=[],this._searchingPos=!1,this._searchSubmitted=!1,this._previousSearchMethod=()=>{},this._suppliers=[],this._selectedSuppliers=[],this._showPosList=!1,this._posSelected=!1,this.subscriptions=[]}set geolocationCoordinates(t){var e,s;this._geolocationCoordinates=t,(e=t==null?void 0:t.coords)!=null&&e.latitude&&((s=t==null?void 0:t.coords)!=null&&s.longitude)&&this.setGeolocation()}get geolocationCoordinates(){return this._geolocationCoordinates}_nameOfStore(t){return`${t.supplier.attributes.name} - ${t.attributes.name}`}connectedCallback(){super.connectedCallback(),this.initLeaflet(),this.fetchSuppliers(),this.initEvents()}disconnectedCallback(){this.subscriptions.forEach(t=>t.unsubscribe()),super.disconnectedCallback(),this._leafletCss.remove(),this._miamDs.remove(),this._leafletJs.remove()}render(){if(this.show)return this.posSelectionTemplate()}firstUpdated(){this._posSelected=!1,this.loadMap(),this.geolocationTimeout(),this.listenFormSubmit()}posSelectionTemplate(){return n`
|
|
18
18
|
<div class="wrapper miam-ds-body">
|
|
19
19
|
<div class="pos-selection">
|
|
20
20
|
<div class="title">
|
|
@@ -32,7 +32,8 @@ import{u,f as m,i as g,h as b,k as n,t as f}from"../assets/lit-element-BKlYWoBt.
|
|
|
32
32
|
</form>
|
|
33
33
|
${this.posListTemplate()}
|
|
34
34
|
${this._posList.length>0?n`
|
|
35
|
-
<div id="mobile-buttons-wrapper"
|
|
35
|
+
<div id="mobile-buttons-wrapper"
|
|
36
|
+
class="${this._showPosList?"mobile-buttons-wrapper__see-map":"mobile-buttons-wrapper__see-list"}">
|
|
36
37
|
<button @click=${()=>this.togglePosList(this._showPosList)}
|
|
37
38
|
class="miam-ds-button primary hide-pos-button">
|
|
38
39
|
${this.getButtonLabel()}
|
|
@@ -61,7 +62,7 @@ import{u,f as m,i as g,h as b,k as n,t as f}from"../assets/lit-element-BKlYWoBt.
|
|
|
61
62
|
${t.name}
|
|
62
63
|
</option>`)}
|
|
63
64
|
</select>
|
|
64
|
-
</div>`}supplierSelected(t){t.target.value?this._selectedSuppliers[0]=t.target.value:this._selectedSuppliers=[],this._previousSearchMethod(!0)}posListTemplate(){if(this._searchingPos)return n`
|
|
65
|
+
</div>`}supplierSelected(t){t.target.value?this._selectedSuppliers[0]=t.target.value:this._selectedSuppliers=[];const e=this._suppliers.find(s=>s.id===t.target.value);e?this._filterEvent.detail.supplierName=e.name:this._filterEvent.detail.supplierName="",this.dispatchEvent(this._filterEvent),this._previousSearchMethod(!0)}posListTemplate(){if(this._searchingPos)return n`
|
|
65
66
|
<div class="pos-loader">
|
|
66
67
|
<div class="miam-ds-loader"></div>
|
|
67
68
|
</div>
|
|
@@ -84,14 +85,15 @@ import{u,f as m,i as g,h as b,k as n,t as f}from"../assets/lit-element-BKlYWoBt.
|
|
|
84
85
|
<div class="bottom">
|
|
85
86
|
<button @click=${()=>this.dispatchPos(e)}
|
|
86
87
|
class="miam-ds-button primary select-pos-button"
|
|
87
|
-
?disabled
|
|
88
|
-
|
|
88
|
+
?disabled=${this._posSelected}>
|
|
89
|
+
${this._posSelected?n`
|
|
90
|
+
<div class="miam-ds-loader"></div>`:"Sélectionner"}
|
|
89
91
|
</button>
|
|
90
92
|
</div>
|
|
91
93
|
</div>
|
|
92
94
|
`)}
|
|
93
95
|
</div>
|
|
94
|
-
`}getButtonLabel(){if(this._showPosList)return"Voir la carte";const t=this._posList.length;return t===1?"Voir le magasin":`Voir les ${t} magasins`}setAddress(t=!1){!this._addressInput.value||this._addressInput.value.length<3||this._searchingPos||!t&&this._prevAddress===this._addressInput.value+", France"||(this.shadowRoot.getElementById("pos-list"),this._previousSearchMethod=this.setAddress,this._prevAddress=this._addressInput.value+", France",this._searchingPos=!0,this.requestUpdate(),this.subscriptions.push(this.getByAddress(this._prevAddress,this.selectedRadius,this._selectedSuppliers).subscribe(e=>{this.setPosList(e),this.setNewLocation(),this.dispatchSearch(this._prevAddress,e.data.length),this._searchingPos=!1,this._searchSubmitted=!0,this.togglePosList(!1),this.requestUpdate()})))}setGeolocation(t=!1){this._prevAddress="",this._previousSearchMethod=this.setGeolocation,this.getPosByCoordinates()}getPosByCoordinates(){this._searchingPos=!0,this.requestUpdate(),this.subscriptions.push(this.getByCoordinates(this.geolocationCoordinates.coords.latitude,this.geolocationCoordinates.coords.longitude,this.selectedRadius,this._selectedSuppliers).subscribe(t=>{this._addressInput.value="",this.setPosList(t),this._searchingPos=!1,this.setNewLocation(),this._searchSubmitted=!0,this.togglePosList(!1),this.requestUpdate()}))}setPosList(t){this._posList=t.data.map(e=>{const s=Object.assign(new S,e);return s.supplier=t.included.find(i=>i.id===s.relationships.supplier.data.id),s}).sort((e,s)=>e.attributes.name.includes("onoprix")?-1:s.attributes.name.includes("onoprix")?1:0)}dispatchPos(t){this._posSelected=!0,this.requestUpdate();const e={detail:{posId:t.id,posExtId:t.extId,supplierId:t.supplier.id,supplierName:t.supplier.attributes.name,posName:this._nameOfStore(t)},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("posIdChange",e))}dispatchShow(t){const e={detail:{show:t},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("showChange",e))}dispatchSearch(t,e){const s={detail:{searchTerm:t,storesFoundCount:e},bubbles:!0,composed:!0};console.debug("[MealzComponents] dispatchEvent searchChange",s),this.dispatchEvent(new CustomEvent("searchChange",s))}initLeaflet(){this._leafletCss=document.createElement("link"),this._leafletCss.setAttribute("rel","stylesheet"),this._leafletCss.setAttribute("href","https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"),this._leafletCss.setAttribute("integrity","sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="),this._leafletCss.setAttribute("crossorigin",""),this._leafletJs=document.createElement("script"),this._leafletJs.setAttribute("src","https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"),this._leafletJs.setAttribute("integrity","sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="),this._leafletJs.setAttribute("crossorigin",""),this._miamDs=document.createElement("link"),this._miamDs.setAttribute("rel","stylesheet"),this._miamDs.setAttribute("href","https://unpkg.com/miam-ds@1.2.4/miam-ds.min.css"),this.shadowRoot.appendChild(this._miamDs),this.shadowRoot.appendChild(this._leafletCss),document.head.appendChild(this._leafletJs)}waitForLeaflet(t){let i=50;console.debug("[Map] Checking for window.L");const o=setInterval(()=>{window.L!==void 0||i===0?(clearInterval(o),window.L!==void 0?(console.debug("[Map] window.L is defined"),t(!0)):(console.error("[Map] Failed to load Leaflet after",50*100,"ms"),t(!1))):i--},100)}initMap(){this._map&&(this._map.off(),this._map.remove()),this.setNewLocation(),window.L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",{maxZoom:19,attribution:"Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."}).addTo(this._map)}loadMap(){this.waitForLeaflet(t=>{t&&this.initMap()})}fetchSuppliers(){this.subscriptions.push(this.getAffiliateSuppliers().subscribe(t=>{this._suppliers=t.map(e=>({id:e.id,name:e.attributes.name})),this.requestUpdate()}))}setNewLocation(){var e;const t=this.shadowRoot.getElementById("map");t&&(this._map?(this._markers.forEach(s=>{this._map.removeLayer(s)}),this._markers=[],this._map.panTo(this.getCoordinates())):this._map=(e=window.L)==null?void 0:e.map(t).setView(this.getCoordinates(),13),this.addMarkers())}getCoordinates(){return this._posList.length<1?[48.866667,2.333333]:[this._posList[0].attributes.latitude,this._posList[0].attributes.longitude]}addMarkers(){this._posList.length>0&&this._posList.forEach((t,e)=>{this._markers.push(window.L.marker([t.attributes.latitude,t.attributes.longitude],{icon:this.buildIcon(t.supplier)}).addTo(this._map));let s=window.L.popup({content:`
|
|
96
|
+
`}getButtonLabel(){if(this._showPosList)return"Voir la carte";const t=this._posList.length;return t===1?"Voir le magasin":`Voir les ${t} magasins`}setAddress(t=!1){!this._addressInput.value||this._addressInput.value.length<3||this._searchingPos||!t&&this._prevAddress===this._addressInput.value+", France"||(this.shadowRoot.getElementById("pos-list"),this._previousSearchMethod=this.setAddress,this._prevAddress=this._addressInput.value+", France",this._searchingPos=!0,this.requestUpdate(),this.subscriptions.push(this.getByAddress(this._prevAddress,this.selectedRadius,this._selectedSuppliers).subscribe(e=>{this.setPosList(e),this.setNewLocation(),this.dispatchSearch(this._prevAddress,e.data.length),this._searchingPos=!1,this._searchSubmitted=!0,this.togglePosList(!1),this.requestUpdate()})))}setGeolocation(t=!1){this._prevAddress="",this._previousSearchMethod=this.setGeolocation,this.getPosByCoordinates()}getPosByCoordinates(){this._searchingPos=!0,this.requestUpdate(),this.subscriptions.push(this.getByCoordinates(this.geolocationCoordinates.coords.latitude,this.geolocationCoordinates.coords.longitude,this.selectedRadius,this._selectedSuppliers).subscribe(t=>{this._addressInput.value="",this.setPosList(t),this._searchingPos=!1,this.setNewLocation(),this._searchSubmitted=!0,this.togglePosList(!1),this.requestUpdate()}))}setPosList(t){this._posList=t.data.map(e=>{const s=Object.assign(new S,e);return s.supplier=t.included.find(i=>i.id===s.relationships.supplier.data.id),s}).sort((e,s)=>e.attributes.name.includes("onoprix")?-1:s.attributes.name.includes("onoprix")?1:0)}dispatchPos(t){this._posSelected=!0,this.requestUpdate();const e={detail:{posId:t.id,posExtId:t.extId,supplierId:t.supplier.id,supplierName:t.supplier.attributes.name,posName:this._nameOfStore(t)},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("posIdChange",e))}dispatchShow(t){const e={detail:{show:t},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("showChange",e))}dispatchSearch(t,e){const s={detail:{searchTerm:t,storesFoundCount:e},bubbles:!0,composed:!0};console.debug("[MealzComponents] dispatchEvent searchChange",s),this.dispatchEvent(new CustomEvent("searchChange",s))}initLeaflet(){this._leafletCss=document.createElement("link"),this._leafletCss.setAttribute("rel","stylesheet"),this._leafletCss.setAttribute("href","https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"),this._leafletCss.setAttribute("integrity","sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="),this._leafletCss.setAttribute("crossorigin",""),this._leafletJs=document.createElement("script"),this._leafletJs.setAttribute("src","https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"),this._leafletJs.setAttribute("integrity","sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="),this._leafletJs.setAttribute("crossorigin",""),this._miamDs=document.createElement("link"),this._miamDs.setAttribute("rel","stylesheet"),this._miamDs.setAttribute("href","https://unpkg.com/miam-ds@1.2.4/miam-ds.min.css"),this.shadowRoot.appendChild(this._miamDs),this.shadowRoot.appendChild(this._leafletCss),document.head.appendChild(this._leafletJs)}waitForLeaflet(t){let i=50;console.debug("[Map] Checking for window.L");const o=setInterval(()=>{window.L!==void 0||i===0?(clearInterval(o),window.L!==void 0?(console.debug("[Map] window.L is defined"),t(!0)):(console.error("[Map] Failed to load Leaflet after",50*100,"ms"),t(!1))):i--},100)}initMap(){this._map&&(this._map.off(),this._map.remove()),this.setNewLocation(),window.L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",{maxZoom:19,attribution:"Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."}).addTo(this._map)}loadMap(){this.waitForLeaflet(t=>{t&&this.initMap()})}initEvents(){this._filterEvent=new CustomEvent("filterChange",{detail:{supplierName:""},bubbles:!0,composed:!0})}fetchSuppliers(){this.subscriptions.push(this.getAffiliateSuppliers().subscribe(t=>{this._suppliers=t.map(e=>({id:e.id,name:e.attributes.name})),this.requestUpdate()}))}setNewLocation(){var e;const t=this.shadowRoot.getElementById("map");t&&(this._map?(this._markers.forEach(s=>{this._map.removeLayer(s)}),this._markers=[],this._map.panTo(this.getCoordinates())):this._map=(e=window.L)==null?void 0:e.map(t).setView(this.getCoordinates(),13),this.addMarkers())}getCoordinates(){return this._posList.length<1?[48.866667,2.333333]:[this._posList[0].attributes.latitude,this._posList[0].attributes.longitude]}addMarkers(){this._posList.length>0&&this._posList.forEach((t,e)=>{this._markers.push(window.L.marker([t.attributes.latitude,t.attributes.longitude],{icon:this.buildIcon(t.supplier)}).addTo(this._map));let s=window.L.popup({content:`
|
|
95
97
|
<div class="pos-item">
|
|
96
98
|
<div class="top">
|
|
97
99
|
<img class="pos-img" src="${t.supplier.attributes.logo}" alt="${t.supplier.attributes.name}"/>
|
|
@@ -104,7 +106,7 @@ import{u,f as m,i as g,h as b,k as n,t as f}from"../assets/lit-element-BKlYWoBt.
|
|
|
104
106
|
<button id="select" class="miam-ds-button primary select-pos-button">Sélectionner</button>
|
|
105
107
|
</div>
|
|
106
108
|
</div>
|
|
107
|
-
`});this._markers[e].bindPopup(s).on("popupopen",i=>{i.target.getPopup().getElement().querySelector("#select").addEventListener("click",()=>{this.dispatchPos(t)})})})}buildIcon(t){return window.L.icon({iconUrl:t.attributes.logo||"https://cdn-icons-png.flaticon.com/512/3515/3515146.png",shadowUrl:"https://storage.googleapis.com/assets.miam.tech/mealz-components/store-locator/marker.svg",iconSize:[32,32],shadowSize:[44,53],iconAnchor:[16,45],shadowAnchor:[22,45],popupAnchor:[0,-55]})}togglePosList(t){this._showPosList=!t;const e=this.shadowRoot.getElementById("pos-list");e&&(t?e.style.display="none":e.style.display="flex",this.requestUpdate())}geolocationTimeout(){setTimeout(()=>{this.geolocationCoordinates===void 0&&(this.geolocationCoordinates={})},2e4)}listenFormSubmit(){this.shadowRoot.getElementById("store-locator-form").addEventListener("submit",e=>{e.preventDefault(),this.setAddress()})}};l.styles=[g`
|
|
109
|
+
`});this._markers[e].bindPopup(s).on("popupopen",i=>{i.target.getPopup().getElement().querySelector("#select").addEventListener("click",()=>{this.dispatchPos(t)})})})}buildIcon(t){return window.L.icon({iconUrl:t.attributes.logo||"https://cdn-icons-png.flaticon.com/512/3515/3515146.png",shadowUrl:"https://storage.googleapis.com/assets.miam.tech/mealz-components/store-locator/marker.svg",iconSize:[32,32],shadowSize:[44,53],iconAnchor:[16,45],shadowAnchor:[22,45],popupAnchor:[0,-55]})}togglePosList(t){this._showPosList=!t;const e=this.shadowRoot.getElementById("pos-list"),s={bubbles:!0,composed:!0};e&&(t?(e.style.display="none",this.dispatchEvent(new CustomEvent("mapSelected",s))):(e.style.display="flex",this.dispatchEvent(new CustomEvent("listSelected",s))),this.requestUpdate())}geolocationTimeout(){setTimeout(()=>{this.geolocationCoordinates===void 0&&(this.geolocationCoordinates={})},2e4)}listenFormSubmit(){this.shadowRoot.getElementById("store-locator-form").addEventListener("submit",e=>{e.preventDefault(),this.setAddress()})}};l.styles=[g`
|
|
108
110
|
:host {
|
|
109
111
|
display: block;
|
|
110
112
|
height: 100%;
|