Skip to content

Commit

Permalink
chore: fix eslint errors for new components
Browse files Browse the repository at this point in the history
  • Loading branch information
@raaymax
raaymax committed Feb 19, 2024
1 parent e7ab9d3 commit d0e1b6c
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 76 deletions.
85 changes: 46 additions & 39 deletions ui/src/core_components/embed/CoreGoogleMaps.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
<template>
<div class="CoreGoogleMaps" ref="rootEl">
<div class="map" ref="mapEl" />
<div class="mask" />
<div ref="rootEl" class="CoreGoogleMaps">
<div ref="mapEl" class="map" />
<div class="mask" />
</div>
</template>

<script lang="ts">
/* global google */
import { FieldType } from "../../streamsyncTypes";
import { cssClasses } from "../../renderer/sharedStyleFields";
const description = "A component to embed a Google Map. It can be used to display a map with markers.";
const description =
"A component to embed a Google Map. It can be used to display a map with markers.";
const markersDefaultData = [
{lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker"}
{ lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker" },
];
export default {
Expand All @@ -24,19 +25,19 @@ export default {
fields: {
apiKey: {
name: "API Key",
default: '',
default: "",
desc: "API Key from Google Cloud Console",
type: FieldType.Text,
},
mapId: {
name: "Map ID",
default: '',
default: "",
desc: "ID of map from Google Cloud Console, needed for markers",
type: FieldType.Text,
},
mapType: {
name: "Map type",
default: 'roadmap',
default: "roadmap",
type: FieldType.Text,
desc: "One of 'roadmap', 'satellite', 'hybrid' or 'terrain'",
},
Expand Down Expand Up @@ -78,21 +79,23 @@ export default {
<script setup lang="ts">
import { Ref, inject, ref, onMounted, watch, computed } from "vue";
import injectionKeys from "../../injectionKeys";
import { Loader } from "@googlemaps/js-api-loader"
import { Loader } from "@googlemaps/js-api-loader";
const rootEl: Ref<HTMLElement> = ref(null);
const mapEl: Ref<HTMLElement> = ref(null);
const fields = inject(injectionKeys.evaluatedFields);
let map : google.maps.Map | null = null;
let map: google.maps.Map | null = null;
let markers = [];
const center = computed<{ lat: number; lng: number; }>(() => ({ lat: fields.lat.value, lng: fields.lng.value }));;
const mapType = computed(() => (
['roadmap', 'satellite', 'hybrid', 'terrain'].includes(fields.mapType.value)
? fields.mapType.value
: 'roadmap'
));
const center = computed<{ lat: number; lng: number }>(() => ({
lat: fields.lat.value,
lng: fields.lng.value,
}));
const mapType = computed(() =>
["roadmap", "satellite", "hybrid", "terrain"].includes(fields.mapType.value)
? fields.mapType.value
: "roadmap",
);
const initMap = async () => {
clearMarkers();
Expand All @@ -108,7 +111,7 @@ const initMap = async () => {
mapId: fields.mapId.value,
});
map.addListener('click', (e: any) => {
map.addListener("click", (e: any) => {
const event = new CustomEvent("gmap-click", {
detail: {
payload: e.latLng.toJSON(),
Expand All @@ -118,14 +121,20 @@ const initMap = async () => {
});
buildMarkers();
}
};
const buildMarkers = async () => {
if (!fields.mapId.value) return;
if (!fields.markers.value) return;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const { AdvancedMarkerElement } = (await google.maps.importLibrary(
"marker",
)) as google.maps.MarkerLibrary;
clearMarkers();
const markersData = fields.markers.value as ({ lat: number; lng: number; name: string; }[])
const markersData = fields.markers.value as {
lat: number;
lng: number;
name: string;
}[];
markersData.forEach((markerData) => {
const marker = new AdvancedMarkerElement({
position: {
Expand All @@ -138,7 +147,7 @@ const buildMarkers = async () => {
markers.push(marker);
marker.addListener('click', () => {
marker.addListener("click", () => {
const event = new CustomEvent("gmap-marker-click", {
detail: {
payload: markerData,
Expand Down Expand Up @@ -178,8 +187,6 @@ watch(mapType, async (newVal) => {
watch(fields.markers, buildMarkers);
watch(fields.apiKey, initMap);
watch(fields.mapId, initMap);
</script>

<style scoped>
Expand All @@ -191,28 +198,28 @@ watch(fields.mapId, initMap);
height: 80vh;
}
.CoreGoogleMaps .map{
width: 100%;
height: 100%;
display: block;
margin: auto;
border: 1px solid var(--separatorColor);
.CoreGoogleMaps .map {
width: 100%;
height: 100%;
display: block;
margin: auto;
border: 1px solid var(--separatorColor);
}
.CoreGoogleMaps .mask {
pointer-events: none;
pointer-events: none;
}
.CoreGoogleMaps.beingEdited .mask {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.CoreGoogleMaps.beingEdited.selected .mask {
pointer-events: none;
pointer-events: none;
}
</style>
28 changes: 14 additions & 14 deletions ui/src/core_components/embed/CoreIFrame.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,29 +65,29 @@ function handleLoad() {
}
.CoreIFrame.beingEdited:not(.selected) iframe {
pointer-events: none;
pointer-events: none;
}
.CoreIFrame iframe {
width: 100%;
height: 100%;
display: block;
margin: auto;
border: 1px solid var(--separatorColor);
.CoreIFrame iframe {
width: 100%;
height: 100%;
display: block;
margin: auto;
border: 1px solid var(--separatorColor);
}
.CoreIFrame .mask {
pointer-events: none;
}
.CoreIFrame.beingEdited .mask {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.CoreIFrame.beingEdited.selected .mask {
Expand Down
50 changes: 27 additions & 23 deletions ui/src/core_components/embed/CorePDF.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
<template>
<div class="CorePDF">
<object class="pdf" :data="fields.source.value" :key="fields.source.value" type="application/pdf">
<object
:key="fields.source.value"
class="pdf"
:data="fields.source.value"
type="application/pdf"
>
<p>
You're not authorised to embed in the browser or you don't have PDF plugin
You're not authorised to embed in the browser or you don't have
PDF plugin
<a :href="fields.source.value">download the PDF file. </a>
</p>
</object>
<div class="mask" />
</div>
</template>

<script lang='ts'>
<script lang="ts">
import { FieldType } from "../../streamsyncTypes";
import { cssClasses } from "../../renderer/sharedStyleFields";
const description =
"A component to embed a PDF document.";
const description = "A component to embed a PDF document.";
export default {
streamsync: {
Expand Down Expand Up @@ -43,39 +48,38 @@ const fields = inject(injectionKeys.evaluatedFields);
<style scoped>
@import "../../renderer/sharedStyles.css";
.CorePDF {
position: relative;
width: 100%;
height: 80vh;
position: relative;
width: 100%;
height: 80vh;
}
.CorePDF.beingEdited:not(.selected) object {
pointer-events: none;
}
.CorePDF .pdf {
width: 100%;
height: 100%;
display: block;
margin: auto;
border: 1px solid var(--separatorColor);
width: 100%;
height: 100%;
display: block;
margin: auto;
border: 1px solid var(--separatorColor);
}
.CorePDF .mask {
pointer-events: none;
pointer-events: none;
}
.CorePDF.beingEdited .mask {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.CorePDF.beingEdited.selected .mask {
pointer-events: none;
pointer-events: none;
}
</style>

0 comments on commit d0e1b6c

Please sign in to comment.