Skip to content

Commit

Permalink
Merge branch 'io-452' into test
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonaashl
jonaashl committed May 14, 2024
2 parents 7c3d75e + a7b7ff9 commit 33c1351
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 150 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Updated package version for stylelint.
- **Breaking change:** Updated checkbox and radio component according to adjustments from design (Figma), both now have label options, correct spacing and correct font size and weight. Also changed naming of modifiers to be more consistent with other components.
- **Breaking change:** Create a helper for animations and refactor accordion component accordingly. You need to replace the class 'ods-accordion--animate' with 'ods-animation ods-animation--rotate'.
- Moved geoJSON fetching from component to a per-vue-instance setup.

### Fixed

Expand All @@ -45,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fixed an issue where long links would not break properly.
- Fixed spacing around links and buttons in portrait card on all breakpoints.
- Fixed links on portrait cards to improve screen reader capabilities.
- Fixed an issue causing multiple map-popups to open and overlay each other.

### Removed

Expand Down
107 changes: 7 additions & 100 deletions src/components/map/map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,108 +181,15 @@ <h2 class="ods-devtools-text-preset-2">Load map later</h2>
</div>
<div class="ods-grid__column--12">
<div class="ods-map" id="ods-map10">
<label class="ods-checkbox">
<input type="checkbox" v-model="loadMap" />
<span class="ods-checkbox__checkmark"></span>
<span class="ods-checkbox__text">Load map</span>
</label>
<ods-map :load-map="loadMap" :state="state" :points="[{ longitude: 10.74981, latitude: 59.913008, popupContent: '<h2>Bob the Builder</h2>' }]" ref="odsMap10" api-key="VW1Tn0fx1t3b6t0CHP6Q" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
</div>
</div>

<div class="ods-grid__column--12">
<h2 class="ods-devtools-text-preset-2">Map in filter</h2>
</div>
<div class="ods-grid__column--12 ods-flex ods-flex-align-items-center">
<button id="listViewBtn" class="ods-button ods-button--small ods-margin-right-4">
<span aria-hidden="true" class="ods-button__icon ods-icon--grid"></span>
<span class="ods-sr-only">Rutenettvisning</span>
</button>
<button id="mapViewBtn" class="ods-button ods-button--small ods-margin-right-4 ods-button--outline">
<span aria-hidden="true" class="ods-button__icon ods-icon--map"></span>
<span class="ods-sr-only">Vis i kart</span>
</button>
</div>
<div id="listView" class="ods-grid__column--12">
<h2 class="ods-devtools-text-preset-2">Placeholder cards</h2>
<div class="ods-grid ods-grid--gap">
<div class="ods-grid__column--12 ods-grid__column--6-breakpoint-medium ods-grid__column--3-breakpoint-large">
<div class="ods-portrait-card ods-portrait-card--xs">
<a class="ods-portrait-card__link" href="javascript:void(0)">
<div class="ods-portrait-card__media">
<img src="https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/images/300x300/1.jpg" alt="Lighthouse in the middle of the fjord" />
</div>
<div class="ods-portrait-card__content">
<h3 class="ods-portrait-card__heading">Heading</h3>
</div>
</a>
</div>
</div>
<div class="ods-grid__column--12 ods-grid__column--6-breakpoint-medium ods-grid__column--3-breakpoint-large">
<div class="ods-portrait-card ods-portrait-card--xs">
<a class="ods-portrait-card__link" href="javascript:void(0)">
<div class="ods-portrait-card__media">
<img src="https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/images/300x300/2.jpg" alt="Sunset in the mountain close to a lake" />
</div>
<div class="ods-portrait-card__content">
<h3 class="ods-portrait-card__heading">Heading</h3>
</div>
</a>
</div>
<div class="ods-checkbox">
<label class="ods-checkbox__wrapper">
<input class="ods-checkbox__input" type="checkbox" v-model="loadMap">
<span class="ods-checkbox__checkmark"></span>
<span class="ods-checkbox__text"> Load map </span>
</label>
</div>
<div class="ods-grid__column--12 ods-grid__column--6-breakpoint-medium ods-grid__column--3-breakpoint-large">
<div class="ods-portrait-card ods-portrait-card--xs">
<a class="ods-portrait-card__link" href="javascript:void(0)">
<div class="ods-portrait-card__media">
<img src="https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/images/300x300/3.jpg" alt="Boy doing cross country sky" />
</div>
<div class="ods-portrait-card__content">
<h3 class="ods-portrait-card__heading">Heading</h3>
</div>
</a>
</div>
</div>
<div class="ods-grid__column--12 ods-grid__column--6-breakpoint-medium ods-grid__column--3-breakpoint-large">
<div class="ods-portrait-card ods-portrait-card--xs ods-portrait-card--actions">
<a class="ods-portrait-card__link" href="javascript:void(0)">
<div class="ods-portrait-card__media">
<img src="https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/images/300x300/4.jpg" alt="Children running on the snow" />
</div>
<div class="ods-portrait-card__content">
<h3 class="ods-portrait-card__heading">Heading</h3>
</div>
</a>
</div>
</div>
</div>
</div>
<div id="mapView" class="ods-grid__column--12">
<div class="ods-map" id="ods-map11">
<h2>Map under here</h2>
<ods-map ref="odsMap11" api-key="VW1Tn0fx1t3b6t0CHP6Q" :load-map="loadMap" :geo-json="geoJsonData" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
<ods-map :load-map="loadMap" :state="state" :points="[{ longitude: 10.74981, latitude: 59.913008, popupContent: '<h2>Bob the Builder</h2>' }]" ref="odsMap10" api-key="VW1Tn0fx1t3b6t0CHP6Q" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const listViewBtn = document.getElementById('listViewBtn');
const mapViewBtn = document.getElementById('mapViewBtn');
const listView = document.getElementById('listView');
const mapView = document.getElementById('mapView');

// Initially show list view and hide map view
listView.style.display = 'block';
mapView.style.display = 'none';

listViewBtn.addEventListener('click', () => {
listView.style.display = 'block';
mapView.style.display = 'none';
});

mapViewBtn.addEventListener('click', () => {
listView.style.display = 'none';
mapView.style.display = 'block';
});
});
</script>
</div>
49 changes: 0 additions & 49 deletions src/components/map/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ document.addEventListener('DOMContentLoaded', () => {
const mapElement8 = document.getElementById('ods-map8');
const mapElement9 = document.getElementById('ods-map9');
const mapElement10 = document.getElementById('ods-map10');
const mapElement11 = document.getElementById('ods-map11');

if (mapElement) {
const app1 = createApp({
Expand Down Expand Up @@ -204,52 +203,4 @@ document.addEventListener('DOMContentLoaded', () => {
});
app10.mount(mapElement10);
}

if (mapElement11) {
const app11 = createApp({
name: 'OdsMapApp11',
components: { OdsMap },
data() {
return {
geoJsonData: null,
loadMap: false,
};
},
async created() {
try {
this.geoJsonData = await fetchGeoJsonData('https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/map/data/kindergarten-with-events-ods.geojson');
} catch (error) {
throw new Error('Error fetching GeoJSON data:', error);
}
},
methods: {
showMap() {
this.loadMap = true;
},
hideMap() {
this.loadMap = false;
},
},
async mounted() {
setTimeout(async () => {
try {
this.geoJsonData = await fetchGeoJsonData('https://ukeweb-public.s3.eu-central-1.amazonaws.com/map/data/featurecollection-with-popups-and-multi-variants.geojson');
} catch (error) {
throw new Error('Error fetching GeoJSON data:', error);
}
}, 15000);

const listViewBtn = document.getElementById('listViewBtn');
const mapViewBtn = document.getElementById('mapViewBtn');

listViewBtn.addEventListener('click', () => {
this.hideMap();
});
mapViewBtn.addEventListener('click', () => {
this.showMap();
});
},
});
app11.mount(mapElement11);
}
});
1 change: 0 additions & 1 deletion src/components/map/map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,6 @@ export default {
$_addPopupToMap(lngLat, feature) {
if (this.lastDisplayedPopup) {
this.lastDisplayedPopup.remove();
this.lastDisplayedPopup = null;
}
const html = this.$_getPopupHtml(feature);
Expand Down

0 comments on commit 33c1351

Please sign in to comment.