feat(gfi): migrate plugin #447
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,17 @@ | ||
| <template> | ||
| <div style="background: #fff; z-index: 99999; pointer-events: all"> | ||
| Awesome | ||
| <button @click="goHamburg()">Go to Hamburg</button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| // eslint-disable-next-line | ||
| // @ts-nocheck | ||
|
|
||
| const coreStore = document.getElementById('snowbox').store | ||
|
|
||
| function goHamburg() { | ||
| coreStore.center = [561210, 5932600] | ||
| } | ||
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { getStore } from '@polar/polar' | ||
|
|
||
| function initializeDebugAssistant() { | ||
| const map = document.getElementById('snowbox') | ||
| const coreStore = getStore(map, 'core') | ||
| const activePluginIds = coreStore.activePluginIds | ||
|
|
||
| window.map = map | ||
| window.olMap = coreStore.map | ||
| window.coreStore = coreStore | ||
| window.activePluginIds = activePluginIds | ||
| for (const pluginId of activePluginIds) { | ||
| window[`${pluginId}Store`] = coreStore.getPluginStore(pluginId) | ||
| } | ||
| } | ||
|
|
||
| // We want to load as late as possible. | ||
| // Especially, the timeout stuff from snowbox code should be done when doing this. | ||
| setTimeout(() => { | ||
| initializeDebugAssistant() | ||
|
|
||
| // 7 seconds may be long sometimes, inform the developer about it. | ||
| // eslint-disable-next-line no-console | ||
| console.info('POLAR debug assistant was successfully initialized') | ||
| }, 7000) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Member
There was a problem hiding this comment. I prefer the way the navigation shows the dots in the middle and gives me more options towards the end. 
Also, I prefer the navigation to not spread apart like it currently does. 
These screenshots are taken from Meldemichel.
Collaborator
Author
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| <template> | ||
| <nav | ||
| v-if="pageCount > 1" | ||
| :aria-label="$t(($) => $.pagination.wrapper, { ns: 'shared' })" | ||
| > | ||
| <ul> | ||
| <li> | ||
| <button | ||
| class="kern-btn kern-btn--secondary" | ||
| :disabled="currentPage <= 1" | ||
| @click="currentPage--" | ||
| > | ||
| <span class="kern-icon kern-icon--arrow-back" /> | ||
| <span class="kern-label kern-sr-only"> | ||
| {{ $t(($) => $.pagination.previous, { ns: 'shared' }) }} | ||
| </span> | ||
| </button> | ||
| </li> | ||
| <li | ||
| v-for="option of visibleOptions" | ||
| :key="'dots' in option ? option.dots : option.page" | ||
| > | ||
| <template v-if="'dots' in option">…</template> | ||
| <button | ||
| v-else-if="option.page" | ||
| class="kern-btn kern-btn--secondary" | ||
| :class="{ active: currentPage === option.page }" | ||
| :aria-label=" | ||
| $t(($) => $.pagination.page, { ns: 'shared', page: option.page }) | ||
| " | ||
| @click="currentPage = option.page" | ||
| > | ||
| <span class="kern-label"> | ||
| {{ option.page }} | ||
| </span> | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button | ||
| class="kern-btn kern-btn--secondary" | ||
| :disabled="currentPage >= pageCount" | ||
| @click="currentPage++" | ||
| > | ||
| <span class="kern-icon kern-icon--arrow-forward" /> | ||
| <span class="kern-label kern-sr-only"> | ||
| {{ $t(($) => $.pagination.next, { ns: 'shared' }) }} | ||
| </span> | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { computed, watch } from 'vue' | ||
|
|
||
| const props = defineProps<{ | ||
| count: number | ||
| pageSize: number | ||
| }>() | ||
|
|
||
| const startIndex = defineModel<number>({ required: true }) | ||
| const currentPage = computed({ | ||
| get: () => startIndex.value / props.pageSize + 1, | ||
| set: (page) => { | ||
| startIndex.value = (page - 1) * props.pageSize | ||
| }, | ||
| }) | ||
|
|
||
| const pageCount = computed(() => Math.ceil(props.count / props.pageSize)) | ||
|
|
||
| watch([() => props.count, () => props.pageSize], () => { | ||
| if (currentPage.value > pageCount.value) { | ||
| startIndex.value = 0 | ||
| } | ||
| }) | ||
|
|
||
| const visibleOptions = computed<({ dots: string } | { page: number })[]>(() => { | ||
|
oeninghe-dataport marked this conversation as resolved.
Outdated
|
||
| const generatePageInterval = (start: number, end: number) => | ||
| new Array(end - start + 1).fill(null).map((_, idx) => ({ | ||
| page: idx + start, | ||
| })) | ||
|
|
||
| if (pageCount.value <= 7) { | ||
| return generatePageInterval(1, pageCount.value) | ||
| } | ||
|
|
||
| if (currentPage.value < 5) { | ||
| return [ | ||
| ...generatePageInterval(1, 5), | ||
| { dots: 'only' }, | ||
| ...generatePageInterval(pageCount.value, pageCount.value), | ||
| ] | ||
| } | ||
|
|
||
| if (currentPage.value > pageCount.value - 4) { | ||
| return [ | ||
| ...generatePageInterval(1, 1), | ||
| { dots: 'only' }, | ||
| ...generatePageInterval(pageCount.value - 4, pageCount.value), | ||
| ] | ||
| } | ||
|
|
||
| return [ | ||
| ...generatePageInterval(1, 1), | ||
| { dots: 'only' }, | ||
| ...generatePageInterval(currentPage.value - 1, currentPage.value + 1), | ||
| { dots: 'only' }, | ||
| ...generatePageInterval(pageCount.value, pageCount.value), | ||
| ] | ||
| }) | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| nav { | ||
| width: 100%; | ||
| } | ||
|
|
||
| ul { | ||
| width: 100%; | ||
| display: flex; | ||
| list-style-type: none; | ||
| padding: 0; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| gap: var(--kern-metric-space-x-small); | ||
|
dopenguin marked this conversation as resolved.
Outdated
|
||
| } | ||
|
|
||
| .kern-btn { | ||
| padding: 0; | ||
| min-width: var(--kern-metric-dimension-large); | ||
| min-height: calc( | ||
| var(--kern-metric-dimension-large) + var(--kern-metric-dimension-2x-small) | ||
| ); | ||
|
|
||
| &:has(.kern-sr-only) { | ||
| width: var(--kern-metric-dimension-large); | ||
| } | ||
|
|
||
| &.active { | ||
| background-color: var(--kern-color-action-default); | ||
| pointer-events: none; | ||
|
|
||
| .kern-label { | ||
| color: white; | ||
|
dopenguin marked this conversation as resolved.
Outdated
|
||
| } | ||
| } | ||
|
|
||
| .kern-label { | ||
| font-size: var(--kern-typography-font-size-static-small); | ||
| line-height: var(--kern-typography-line-height-static-small); | ||
|
dopenguin marked this conversation as resolved.
Outdated
|
||
| } | ||
| } | ||
| </style> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The previous function also received the
map.As this example also uses the same logic, I prefer to include that function in this example as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here you go: a3b965e