Skip to content

Commit

Permalink
fix: move to typescript
Browse files Browse the repository at this point in the history
Signed-off-by: Julius Härtl <[email protected]>
  • Loading branch information
juliusknorr committed Feb 29, 2024
1 parent 4d8d4e7 commit 78fb885
Show file tree
Hide file tree
Showing 8 changed files with 129 additions and 81 deletions.
3 changes: 3 additions & 0 deletions l10n/messages.pot
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,9 @@ msgstr ""
msgid "Emoji picker"
msgstr ""

msgid "Enable interactive view"
msgstr ""

msgid "Enter link"
msgstr ""

Expand Down
2 changes: 1 addition & 1 deletion src/components/NcRichText/NcReferenceList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default {
},
interactive: {
type: Boolean,
default: false,
default: true,
},
interactiveOptIn: {
type: Boolean,
Expand Down
38 changes: 26 additions & 12 deletions src/components/NcRichText/NcReferenceWidget.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,18 @@
</div>
</component>
<NcButton v-if="hasInteractiveView && !isInteractive" class="toggle-interactive--button" @click="enableInteractive">
Enable interative mode
{{ enableLabel }}
</NcButton>
</div>
</template>
<script>
import { RouterLink } from 'vue-router'
import { getRoute } from './autolink.js'
import { renderWidget, isWidgetRegistered, destroyWidget, hasInteractiveView } from './../../functions/reference/widgets.js'
import { useElementVisibility, useResizeObserver } from '@vueuse/core'
import { renderWidget, isWidgetRegistered, destroyWidget, hasInteractiveView } from './../../functions/reference/widgets.ts'
import { useIntersectionObserver, useResizeObserver } from '@vueuse/core'
import NcButton from '../../components/NcButton/index.js'
import { t } from '../../l10n.js'
export default {
name: 'NcReferenceWidget',
Expand All @@ -45,7 +46,7 @@ export default {
},
interactive: {
type: Boolean,
default: false,
default: true,
},
interactiveOptIn: {
type: Boolean,
Expand All @@ -55,9 +56,10 @@ export default {
data() {
return {
compact: 3,
isVisible: false,
showInteractive: false,
isVisible: false,
rendered: false,
enableLabel: t('Enable interactive view'),
}
},
computed: {
Expand Down Expand Up @@ -113,15 +115,21 @@ export default {
},
},
watch: {
isVisible(val) {
if (!val || this.rendered) {
return
}
this.renderWidget()
isVisible: {
handler(val) {
if (!val) {
this.destroyWidget()
return
}
this.renderWidget()
},
immediate: true,
},
},
mounted() {
this.isVisible = useElementVisibility(this.$el)
useIntersectionObserver(this.$el, entries => {
this.isVisible = entries[0]?.isIntersecting ?? false
})
useResizeObserver(this.$el, entries => {
if (entries[0].contentRect.width < 450) {
this.compact = 0
Expand All @@ -136,7 +144,7 @@ export default {
})
},
beforeDestroy() {
destroyWidget(this.reference.richObjectType, this.$el)
this.destroyWidget()
},
methods: {
enableInteractive() {
Expand All @@ -162,6 +170,12 @@ export default {
this.rendered = true
})
},
destroyWidget() {
if (this.rendered) {
destroyWidget(this.reference.richObjectType, this.$el)
this.rendered = false
}
},
},
}
</script>
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcRichText/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

import NcRichText from './NcRichText.vue'

import { registerWidget, renderWidget, isWidgetRegistered } from './../../functions/reference/widgets.js'
import { registerWidget, renderWidget, isWidgetRegistered } from './../../functions/reference/widgets.ts'
import NcReferenceList from './NcReferenceList.vue'
import NcReferenceWidget from './NcReferenceWidget.vue'
import NcReferencePicker from './NcReferencePicker/NcReferencePicker.vue'
Expand Down
2 changes: 1 addition & 1 deletion src/functions/reference/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView } from './widgets.js'
import { registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView } from './widgets.ts'
import { getLinkWithPicker } from './referencePickerModal.js'
import {
getProvider,
Expand Down
65 changes: 0 additions & 65 deletions src/functions/reference/widgets.js

This file was deleted.

96 changes: 96 additions & 0 deletions src/functions/reference/widgets.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
interface WidgetRenderProperties {
richObjectType: string;
richObject: object;
accessible: boolean;
interactive: boolean;
}

type widgetRenderCallback = (el: HTMLElement, properties: WidgetRenderProperties) => void;
type widgetDestroyCallback = (el: HTMLElement) => void;

interface WidgetProps {
id: string;
hasInteractiveView: boolean;
callback: widgetRenderCallback;
onDestroy: widgetDestroyCallback;
}

interface WidgetPropsOptional {
hasInteractiveView?: boolean;
}

declare global {
interface Window {
_vue_richtext_widgets: Record<string, WidgetProps>;
_registerWidget: (id: string, callback: widgetRenderCallback, onDestroy: widgetDestroyCallback, props: WidgetPropsOptional) => void;
}
}

if (!window._vue_richtext_widgets) {
window._vue_richtext_widgets = {}
}

const isWidgetRegistered = (id: string) => {
return !!window._vue_richtext_widgets[id]
}

const hasInteractiveView = (id: string) => {
return !!window._vue_richtext_widgets[id]?.hasInteractiveView
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const registerWidget = (id: string, callback: widgetRenderCallback, onDestroy = (el: HTMLElement) => {}, props: WidgetPropsOptional) => {
const propsWithDefaults = {
hasInteractiveView: true,
...props,
}

if (window._vue_richtext_widgets[id]) {
console.error('Widget for id ' + id + ' already registered')
return
}

window._vue_richtext_widgets[id] = {
id,
callback,
onDestroy,
...propsWithDefaults,
}
}

const renderWidget = (el: HTMLElement, { richObjectType, richObject, accessible, interactive }) => {
if (richObjectType === 'open-graph') {
return
}

if (!window._vue_richtext_widgets[richObjectType]) {
console.error('Widget for rich object type ' + richObjectType + ' not registered')
return
}

window._vue_richtext_widgets[richObjectType].callback(el, { richObjectType, richObject, accessible, interactive })
}

const destroyWidget = (richObjectType: string, el: HTMLElement) => {
if (richObjectType === 'open-graph') {
return
}

if (!window._vue_richtext_widgets[richObjectType]) {
return
}

window._vue_richtext_widgets[richObjectType].onDestroy(el)
}

window._registerWidget = (id: string, callback: widgetRenderCallback, onDestroy: widgetDestroyCallback, props: WidgetPropsOptional) => {
registerWidget(id, callback, onDestroy, props)
}

export {
registerWidget,
renderWidget,
destroyWidget,
isWidgetRegistered,
hasInteractiveView,
}
2 changes: 1 addition & 1 deletion src/functions/registerReference/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export {
renderWidget,
destroyWidget,
isWidgetRegistered,
} from './../reference/widgets.js'
} from './../reference/widgets.ts'
export {
NcCustomPickerRenderResult,
registerCustomPickerElement,
Expand Down

0 comments on commit 78fb885

Please sign in to comment.