Skip to content

Commit

Permalink
feat: handle independant trek card click
Browse files Browse the repository at this point in the history
  • Loading branch information
@bastyen
bastyen committed Jun 6, 2024
1 parent 5239ac0 commit 10a4048
Show file tree
Hide file tree
Showing 9 changed files with 31 additions and 10 deletions.
9 changes: 9 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"leaflet.locatecontrol": "^0.79.0",
"leaflet.markercluster": "^1.5.3",
"leaflet.offline": "^3.0.1",
"slugify": "^1.6.6",
"swiper": "^9.4.1"
},
"devDependencies": {
Expand Down
4 changes: 4 additions & 0 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,7 @@ export namespace Components {
"colorSecondaryContainer": string;
"colorSurfaceContainerLow": string;
"fontFamily": string;
"grwApp": boolean;
"isLargeView": boolean;
"isStep": false;
"trek": Trek;
Expand Down Expand Up @@ -377,6 +378,7 @@ export namespace Components {
"colorSurfaceContainerLow": string;
"displayOnlyOfflineTreks": boolean;
"fontFamily": string;
"grwApp": boolean;
"isLargeView": boolean;
}
interface GrwTreksProvider {
Expand Down Expand Up @@ -1245,6 +1247,7 @@ declare namespace LocalJSX {
"colorSecondaryContainer"?: string;
"colorSurfaceContainerLow"?: string;
"fontFamily"?: string;
"grwApp"?: boolean;
"isLargeView"?: boolean;
"isStep"?: false;
"onCardTrekMouseLeave"?: (event: GrwTrekCardCustomEvent<any>) => void;
Expand Down Expand Up @@ -1309,6 +1312,7 @@ declare namespace LocalJSX {
"colorSurfaceContainerLow"?: string;
"displayOnlyOfflineTreks"?: boolean;
"fontFamily"?: string;
"grwApp"?: boolean;
"isLargeView"?: boolean;
}
interface GrwTreksProvider {
Expand Down
1 change: 1 addition & 0 deletions src/components/grw-app/grw-app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -693,6 +693,7 @@ export class GrwApp {
color-secondary-container={this.colorSecondaryContainer}
color-on-secondary-container={this.colorOnSecondaryContainer}
color-surface-container-low={this.colorSurfaceContainerLow}
grw-app={true}
></grw-treks-list>
)}
{state.mode === 'touristicContents' && this.touristicContents && state.touristicContents && (
Expand Down
21 changes: 11 additions & 10 deletions src/components/grw-trek-card/grw-trek-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import OfflinePinIcon from '../../assets/offline_pin.svg';
import TimelapseIcon from '../../assets/timelapse.svg';
import OpenInFullIcon from '../../assets/open_in_full.svg';
import MovingIcon from '../../assets/moving.svg';
import slugify from 'slugify';

@Component({
tag: 'grw-trek-card',
Expand Down Expand Up @@ -38,6 +39,8 @@ export class GrwTrekCard {
@State() isAvailableOffline = false;
@State() showDefaultImage = false;

@Prop() grwApp = false;

@Listen('trekDownloadedSuccessConfirm', { target: 'window' })
onTrekDownloadedSuccessConfirm() {
this.isAvailableOffline = true;
Expand Down Expand Up @@ -112,7 +115,13 @@ export class GrwTrekCard {
? `trek-card trek-card-large-view-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`
: `trek-card trek-card-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`
}
onClick={() => this.trekCardPress.emit(this.currentTrek.id)}
onClick={() => {
if (this.grwApp) {
this.trekCardPress.emit(this.currentTrek.id);
} else {
window.location.href = slugify(`${this.currentTrek.name}`);
}
}}
>
<div part="trek-img-container" class="trek-img-container">
{this.isAvailableOffline && (
Expand All @@ -139,15 +148,7 @@ export class GrwTrekCard {
}}
/>
) : (
<img
part="trek-img"
class="trek-img default-trek-img"
/* @ts-ignore */

src={defaultImageSrc}
alt=""
loading="lazy"
/>
<img part="trek-img" class="trek-img default-trek-img" src={defaultImageSrc} alt="" loading="lazy" />
)}
</div>
<div part="trek-sub-container" class="trek-sub-container">
Expand Down
1 change: 1 addition & 0 deletions src/components/grw-trek-card/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
| `colorSecondaryContainer` | `color-secondary-container` | | `string` | `'#e8def8'` |
| `colorSurfaceContainerLow` | `color-surface-container-low` | | `string` | `'#f7f2fa'` |
| `fontFamily` | `font-family` | | `string` | `'Roboto'` |
| `grwApp` | `grw-app` | | `boolean` | `false` |
| `isLargeView` | `is-large-view` | | `boolean` | `false` |
| `isStep` | `is-step` | | `boolean` | `undefined` |
| `trek` | -- | | `{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; descent: number; departure: string; departure_city: string; arrival?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; cities?: string[]; children?: number[]; ratings?: number[]; ratings_description?: string; networks: number[]; web_links: Weblinks; update_datetime: string; offline?: boolean; information_desks?: number[]; pois?: number[]; touristicContents?: number[]; touristicEvents?: number[]; sensitiveAreas?: number[]; parents?: number[]; }` | `undefined` |
Expand Down
1 change: 1 addition & 0 deletions src/components/grw-trek-detail/grw-trek-detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1272,6 +1272,7 @@ export class GrwTrekDetail {
color-secondary-container={this.colorSecondaryContainer}
color-on-secondary-container={this.colorOnSecondaryContainer}
color-surface-container-low={this.colorSurfaceContainerLow}
grw-app={this.grwApp}
></grw-trek-card>
</div>
);
Expand Down
2 changes: 2 additions & 0 deletions src/components/grw-treks-list/grw-treks-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export class GrwTreksList {
@Prop() colorSurfaceContainerLow = '#f7f2fa';
@Prop() displayOnlyOfflineTreks = false;
@Prop() isLargeView = false;
@Prop() grwApp = false;

step = 10;
shouldAddInfiniteScrollEvent = true;
Expand Down Expand Up @@ -97,6 +98,7 @@ export class GrwTreksList {
color-secondary-container={this.colorSecondaryContainer}
color-on-secondary-container={this.colorOnSecondaryContainer}
color-surface-container-low={this.colorSurfaceContainerLow}
grw-app={this.grwApp}
></grw-trek-card>
))}
</div>
Expand Down
1 change: 1 addition & 0 deletions src/components/grw-treks-list/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
| `colorSurfaceContainerLow` | `color-surface-container-low` | | `string` | `'#f7f2fa'` |
| `displayOnlyOfflineTreks` | `display-only-offline-treks` | | `boolean` | `false` |
| `fontFamily` | `font-family` | | `string` | `'Roboto'` |
| `grwApp` | `grw-app` | | `boolean` | `false` |
| `isLargeView` | `is-large-view` | | `boolean` | `false` |


Expand Down

0 comments on commit 10a4048

Please sign in to comment.