Skip to content

Commit

Permalink
refactor(entity): swapper and finder rework
Browse files Browse the repository at this point in the history
  • Loading branch information
Novout committed Oct 12, 2021
1 parent a116a67 commit b7f8b72
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 122 deletions.
97 changes: 16 additions & 81 deletions src/components/editor/absolute/shortcuts/EditorShortcutsFinder.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,13 @@
<div class="flex items-center justify-between w-full mb-1">
<div class="flex">
<div class="wb-text font-poppins">
{{ state.actuallyLetterCounter }} / {{ state.maxLetterCounter }}
{{ entity.fstate.actuallyLetterCounter }} /
{{ entity.fstate.maxLetterCounter }}
</div>
<HeroIcon class="text-2xs ml-2 wb-icon" @click.prevent="onUp">
<HeroIcon
class="text-2xs ml-2 wb-icon"
@click.prevent="entity.finder().onUp"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
Expand All @@ -36,7 +40,10 @@
/>
</svg>
</HeroIcon>
<HeroIcon class="text-2xs wb-icon" @click.prevent="onDown">
<HeroIcon
class="text-2xs wb-icon"
@click.prevent="entity.finder().onDown"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
Expand Down Expand Up @@ -70,100 +77,28 @@
</div>
<input
ref="search"
v-model="state.entry"
v-model="entity.fstate.entry"
class="bg-transparent border border-gray-900 px-1 mb-1 wb-text"
:placeholder="t('editor.text.placeholder.shortcuts.finderEntry')"
@input="onFinder"
@keypress.enter.prevent="onUp"
@input="entity.finder().onFinder"
@keypress.enter.prevent="entity.finder().onUp"
/>
</div>
</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import { ContextState } from '@/types/context'
import { ContextStatePageContent } from '@/types/context'
import { useScroll } from '@/use/scroll'
import { useEntity } from '@/use/entity'
const { t } = useI18n()
const store = useStore()
const entity = useEntity()
const pages = computed(() => store.state.project.pages)
const state = reactive({
entry: '' as string,
actuallyLetterCounter: 0 as number,
actuallyLetterRaw: '' as string,
listOfLettersExists: [] as Array<Record<string, any>>,
maxLetterCounter: 0 as number,
})
const search = ref<HTMLElement | null>(null)
const onFinder = () => {
state.listOfLettersExists = []
state.actuallyLetterCounter = 0
state.actuallyLetterRaw = ''
state.maxLetterCounter = 0
pages.value.forEach((context: ContextState) => {
context.entity.forEach((entity: ContextStatePageContent) => {
if (!state.entry) return
if (entity.raw.includes(state.entry)) {
state.listOfLettersExists.push({ entity, page: context })
state.maxLetterCounter++
}
})
})
if (state.maxLetterCounter === 0) return
onSearchGo(state.listOfLettersExists[0])
}
const onSearchGo = (object: Record<string, any>) => {
state.actuallyLetterRaw = object.letter
state.actuallyLetterCounter = state.listOfLettersExists.indexOf(object) + 1
const pageIndex = store.state.project.pages.indexOf(object.page)
const entityIndex = store.state.project.pages[pageIndex].entity.indexOf(
object.entity
)
onGo(`entity-${entityIndex}`, object.page)
}
const onGo = async (go: string | symbol, page: ContextState) => {
if (store.state.context.id !== page.id) store.commit('context/load', page)
await nextTick
useScroll().to(`#${String(go)}`, 'center')
}
const onUp = () => {
if (state.actuallyLetterCounter >= state.maxLetterCounter) {
onSearchGo(state.listOfLettersExists[0])
} else {
const object = state.listOfLettersExists[state.actuallyLetterCounter]
onSearchGo(object)
}
}
const onDown = () => {
if (state.actuallyLetterCounter <= 1) {
onSearchGo(
state.listOfLettersExists[state.listOfLettersExists.length - 1]
)
} else {
const object = state.listOfLettersExists[state.actuallyLetterCounter - 2]
onSearchGo(object)
}
}
const onClose = () => {
store.commit('absolute/switchShortcutFinder', false)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
const { t } = useI18n()
const store = useStore()
const entity = useEntity()
const state = reactive({
entry: '' as string,
Expand All @@ -107,7 +108,7 @@
const entry = ref<HTMLElement | null>(null)
const onSwitcherAll = () => {
useEntity().switcherText(store, {
entity.swapper().switcherText({
entry: state.entry,
output: state.output,
equal: state.equal,
Expand Down
13 changes: 7 additions & 6 deletions src/components/editor/entity/EditorEntityInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
const store = useStore()
const { t } = useI18n()
const emitter = useEmitter()
const entity = useEntity()
const props = defineProps({
modelValue: String,
Expand Down Expand Up @@ -98,28 +99,28 @@
store.commit('absolute/commands')
}
if (useEntity().entry(_cmp, 'p')) {
if (entity.utils().entry(_cmp, 'p')) {
type.value = 'paragraph'
cmp.value = ''
input.value.placeholder = t('editor.text.placeholder.paragraph')
return
}
if (useEntity().entry(_cmp, 'h2')) {
if (entity.utils().entry(_cmp, 'h2')) {
type.value = 'heading-two'
cmp.value = ''
input.value.placeholder = t('editor.text.placeholder.headingtwo')
return
}
if (useEntity().entry(_cmp, 'h3')) {
if (entity.utils().entry(_cmp, 'h3')) {
type.value = 'heading-three'
cmp.value = ''
input.value.placeholder = t('editor.text.placeholder.headingthree')
return
}
if (useEntity().entry(_cmp, 'bp')) {
if (entity.utils().entry(_cmp, 'bp')) {
cmp.value = ''
const content = {
Expand All @@ -137,7 +138,7 @@
return
}
if (useEntity().entry(_cmp, 'lb')) {
if (entity.utils().entry(_cmp, 'lb')) {
cmp.value = ''
const content = {
Expand All @@ -155,7 +156,7 @@
return
}
if (useEntity().entry(_cmp, 'im')) {
if (entity.utils().entry(_cmp, 'im')) {
cmp.value = ''
const _ = document.createElement('input')
Expand Down
154 changes: 120 additions & 34 deletions src/use/entity.ts
Original file line number Diff line number Diff line change
@@ -1,43 +1,129 @@
import { ContextStatePageContent } from '@/types/context'
import { Store } from 'vuex'
import { ContextState } from '@/types/context'
import { useScroll } from '@/use/scroll'
import { useStore } from 'vuex'
import { computed, reactive, nextTick } from 'vue'

export const useEntity = () => {
const entry = (input: string, target: string): boolean => {
return (
input.startsWith('/' + target) ||
input.startsWith('/' + target.toUpperCase())
)
const store = useStore()
const pages = computed(() => store.state.project.pages)
const fstate = reactive({
entry: '' as string,
actuallyLetterCounter: 0 as number,
actuallyLetterRaw: '' as string,
listOfLettersExists: [] as Array<Record<string, any>>,
maxLetterCounter: 0 as number,
})

const utils = () => {
const entry = (input: string, target: string): boolean => {
return (
input.startsWith('/' + target) ||
input.startsWith('/' + target.toUpperCase())
)
}

return { entry }
}

const switcherText = (
store: Store<any>,
{ entry, output, equal }: Record<any, any>
) => {
const arr = store.state.context.entity

// TODO: Deletar em caso de output vazio
if (!entry || !output) return

arr.forEach((e: ContextStatePageContent) => {
const text = e.raw.split(' ')

text.forEach((t: string) => {
if (equal && t === entry) {
store.commit('context/switchEntityRaw', {
entity: e,
match: t,
raw: output,
})
} else if (!equal && t.includes(entry)) {
store.commit('context/switchEntityRaw', {
entity: e,
match: entry,
raw: output,
})
}
const swapper = () => {
const switcherText = ({ entry, output, equal }: Record<any, any>) => {
const arr = store.state.context.entity

// TODO: Deletar em caso de output vazio
if (!entry || !output) return

arr.forEach((e: ContextStatePageContent) => {
const text = e.raw.split(' ')

text.forEach((t: string) => {
if (equal && t === entry) {
store.commit('context/switchEntityRaw', {
entity: e,
match: t,
raw: output,
})
} else if (!equal && t.includes(entry)) {
store.commit('context/switchEntityRaw', {
entity: e,
match: entry,
raw: output,
})
}
})
})
}

return { switcherText }
}

const finder = () => {
const onFinder = () => {
fstate.listOfLettersExists = []
fstate.actuallyLetterCounter = 0
fstate.actuallyLetterRaw = ''
fstate.maxLetterCounter = 0

pages.value.forEach((context: ContextState) => {
context.entity.forEach((entity: ContextStatePageContent) => {
if (!fstate.entry) return

if (entity.raw.includes(fstate.entry)) {
fstate.listOfLettersExists.push({ entity, page: context })
fstate.maxLetterCounter++
}
})
})
})

if (fstate.maxLetterCounter === 0) return

onSearchGo(fstate.listOfLettersExists[0])
}

const onSearchGo = (object: Record<string, any>) => {
fstate.actuallyLetterRaw = object.letter
fstate.actuallyLetterCounter =
fstate.listOfLettersExists.indexOf(object) + 1

const pageIndex = store.state.project.pages.indexOf(object.page)
const entityIndex = store.state.project.pages[pageIndex].entity.indexOf(
object.entity
)

onGo(`entity-${entityIndex}`, object.page)
}

const onGo = async (go: string | symbol, page: ContextState) => {
if (store.state.context.id !== page.id) store.commit('context/load', page)
await nextTick
useScroll().to(`#${String(go)}`, 'center')
}

const onUp = () => {
if (fstate.actuallyLetterCounter >= fstate.maxLetterCounter) {
onSearchGo(fstate.listOfLettersExists[0])
} else {
const object = fstate.listOfLettersExists[fstate.actuallyLetterCounter]

onSearchGo(object)
}
}

const onDown = () => {
if (fstate.actuallyLetterCounter <= 1) {
onSearchGo(
fstate.listOfLettersExists[fstate.listOfLettersExists.length - 1]
)
} else {
const object =
fstate.listOfLettersExists[fstate.actuallyLetterCounter - 2]

onSearchGo(object)
}
}

return { onFinder, onSearchGo, onGo, onUp, onDown }
}

return { entry, switcherText }
return { utils, swapper, finder, fstate }
}

0 comments on commit b7f8b72

Please sign in to comment.