Refactoring: convert qr_code to Svelte, deprecate Img.ts
This commit is contained in:
parent
a7c7064636
commit
c892022073
5 changed files with 64 additions and 46 deletions
|
|
@ -1,11 +1,15 @@
|
|||
import { Utils } from "../../Utils"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export default class Img extends BaseUIElement {
|
||||
private readonly _src: string
|
||||
private readonly _rawSvg: boolean
|
||||
private readonly _options: { readonly fallbackImage?: string }
|
||||
|
||||
/** @deprecated
|
||||
*/
|
||||
constructor(
|
||||
src: string,
|
||||
rawSvg = false,
|
||||
|
|
|
|||
|
|
@ -20,10 +20,17 @@
|
|||
</script>
|
||||
|
||||
{#if $txt}
|
||||
{#if cls}
|
||||
<span class={cls}>
|
||||
<span lang={$lang}>
|
||||
{@html Utils.purify($txt)}
|
||||
</span>
|
||||
<WeblateLink context={t?.context} />
|
||||
</span>
|
||||
{:else}
|
||||
<span lang={$lang}>
|
||||
{@html Utils.purify($txt)}
|
||||
</span>
|
||||
<WeblateLink context={t?.context} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,8 @@
|
|||
import Tr from "../Base/Tr.svelte"
|
||||
import Translations from "../i18n/Translations"
|
||||
import { Utils } from "../../Utils"
|
||||
import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import Img from "../Base/Img"
|
||||
import Qr from "../../Utils/Qr"
|
||||
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
|
||||
import Share from "@babeard/svelte-heroicons/solid/Share"
|
||||
import Constants from "../../Models/Constants"
|
||||
import Copyable from "../Base/Copyable.svelte"
|
||||
|
||||
|
|
@ -127,9 +123,7 @@
|
|||
<Copyable {state} text={linkToShare} />
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<ToSvelte
|
||||
construct={() => new Img(new Qr(linkToShare).toImageElement(125)).SetStyle("width: 125px")}
|
||||
/>
|
||||
<img src={new Qr(linkToShare).toImageElement(125)} style="width: 125px"/>
|
||||
</div>
|
||||
|
||||
<Tr t={tr.embedIntro} />
|
||||
|
|
|
|||
46
src/UI/Popup/QrCode.svelte
Normal file
46
src/UI/Popup/QrCode.svelte
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<script lang="ts">
|
||||
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import type { Feature } from "geojson"
|
||||
import Loading from "../Base/Loading.svelte"
|
||||
import Qr from "../../Utils/Qr"
|
||||
import { GeoOperations } from "../../Logic/GeoOperations"
|
||||
|
||||
const smallSize = 100
|
||||
const bigSize = 200
|
||||
let size = new UIEventSource(smallSize)
|
||||
|
||||
export let state: SpecialVisualizationState
|
||||
export let tags: UIEventSource<Record<string, string>>
|
||||
export let feature: Feature
|
||||
|
||||
let [lon, lat] = GeoOperations.centerpointCoordinates(feature)
|
||||
|
||||
const includeLayout = window.location.pathname
|
||||
.split("/")
|
||||
.at(-1)
|
||||
.startsWith("theme")
|
||||
const layout = includeLayout
|
||||
? "layout=" + state.layout.id + "&"
|
||||
: ""
|
||||
let id: Store<string> = tags.mapD(tags => tags.id)
|
||||
let url = id.mapD(id => `${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` +
|
||||
`#${id}`)
|
||||
|
||||
|
||||
|
||||
function toggleSize() {
|
||||
if (size.data !== bigSize) {
|
||||
size.setData(bigSize)
|
||||
} else {
|
||||
size.setData(smallSize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $id.startsWith("node/-")}
|
||||
<!-- Not yet uploaded, doesn't have a fixed ID -->
|
||||
<Loading />
|
||||
{:else}
|
||||
<img on:click={() => toggleSize()} src={new Qr($url).toImageElement($size)} style={`width: ${$size}px; height: ${$size}px`} />
|
||||
{/if}
|
||||
|
|
@ -96,6 +96,8 @@ import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch"
|
|||
import { And } from "../Logic/Tags/And"
|
||||
import CloseNoteButton from "./Popup/Notes/CloseNoteButton.svelte"
|
||||
import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"
|
||||
import Loading from "./Base/Loading"
|
||||
import QrCode from "./Popup/QrCode.svelte"
|
||||
|
||||
class NearbyImageVis implements SpecialVisualization {
|
||||
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
|
||||
|
|
@ -1682,46 +1684,11 @@ export default class SpecialVisualizations {
|
|||
docs: "Generates a QR-code to share the selected object",
|
||||
constr(
|
||||
state: SpecialVisualizationState,
|
||||
tagSource: UIEventSource<Record<string, string>>,
|
||||
tags: UIEventSource<Record<string, string>>,
|
||||
argument: string[],
|
||||
feature: Feature
|
||||
): BaseUIElement {
|
||||
const smallSize = 100
|
||||
const bigSize = 200
|
||||
const size = new UIEventSource(smallSize)
|
||||
return new VariableUiElement(
|
||||
tagSource
|
||||
.map((tags) => tags.id)
|
||||
.map(
|
||||
(id) => {
|
||||
if (id.startsWith("node/-")) {
|
||||
// Not yet uploaded
|
||||
return undefined
|
||||
}
|
||||
const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
|
||||
const includeLayout = window.location.pathname
|
||||
.split("/")
|
||||
.at(-1)
|
||||
.startsWith("theme")
|
||||
const layout = includeLayout
|
||||
? "layout=" + state.layout.id + "&"
|
||||
: ""
|
||||
const url =
|
||||
`${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` +
|
||||
`#${id}`
|
||||
return new Img(new Qr(url).toImageElement(size.data)).SetStyle(
|
||||
`width: ${size.data}px`
|
||||
)
|
||||
},
|
||||
[size]
|
||||
)
|
||||
).onClick(() => {
|
||||
if (size.data !== bigSize) {
|
||||
size.setData(bigSize)
|
||||
} else {
|
||||
size.setData(smallSize)
|
||||
}
|
||||
})
|
||||
): SvelteUIElement {
|
||||
return new SvelteUIElement(QrCode , {state, tags, feature} )
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue