@bildvitta/quasar-ui-asteroid 3.14.0-beta.0 → 3.14.0-beta.2

package/src/components/date/QasDate.vue

@@ -1,479 +1,440 @@
 <template>
   <q-date
-    v-model="model"
     v-bind="attributes"
+    ref="parentDate"
+    v-model="model"
   />
 </template>
 
-<script>
-import { date } from 'quasar'
+<script setup>
 import { date as asteroidDate } from '../../helpers/filters'
+import { MaskOptions } from './enums/DateMaskOptions'
 
-const MaskOptions = {
-  Dash: 'YYYY-MM-DD',
-  Slash: 'YYYY/MM/DD',
-  SlashPtBR: 'DD/MM/YYYY',
-  SlashDateAndHourPtBR: 'DD/MM/YYYY HH:mm'
-}
+import { date } from 'quasar'
+import { ref, computed, onMounted, onUnmounted, watch, useAttrs, nextTick } from 'vue'
 
-export default {
+defineOptions({
   name: 'QasDate',
+  inheritAttrs: false
+})
 
-  inheritAttrs: false,
-
-  props: {
-    events: {
-      type: [Array, Function],
-      default: () => []
-    },
-
-    eventColor: {
-      type: [String, Function],
-      default: ''
-    },
-
-    mask: {
-      type: String,
-      default: MaskOptions.Dash,
-      validator: value => Object.values(MaskOptions).includes(value)
-    },
-
-    modelValue: {
-      type: [String, Array],
-      default: ''
-    },
-
-    multiple: {
-      type: Boolean
-    },
-
-    options: {
-      type: [Array, Function],
-      default: undefined
-    },
-
-    useIso: {
-      type: Boolean
-    },
-
-    useInactiveDates: {
-      default: true,
-      type: Boolean
-    },
-
-    useUnmaskEvents: {
-      default: true,
-      type: Boolean
-    },
-
-    useUnmaskOptions: {
-      default: true,
-      type: Boolean
-    },
-
-    width: {
-      type: String,
-      default: ''
-    }
+const props = defineProps({
+  events: {
+    type: [Array, Function],
+    default: () => []
   },
 
-  emits: [
-    'update:modelValue',
-    'navigation'
-  ],
+  eventColor: {
+    type: [String, Function],
+    default: ''
+  },
 
-  data () {
-    return {
-      currentDate: {},
-      dateElement: null,
-      dateObserver: undefined
-    }
+  mask: {
+    type: String,
+    default: MaskOptions.Dash,
+    validator: value => Object.values(MaskOptions).includes(value)
   },
 
-  computed: {
-    attributes () {
-      const {
-        color,
-        minimal,
-        textColor,
-        ...attributes
-      } = this.$attrs
-
-      return {
-        class: this.classes,
-        color: 'primary',
-        mask: this.mask,
-        minimal: true,
-        multiple: this.multiple,
-        options: this.normalizedOptions,
-        ref: 'date',
-        style: this.styles,
-        textColor: 'white',
-
-        // events
-        onNavigation: this.onNavigation,
-
-        ...attributes
-      }
-    },
+  modelValue: {
+    type: [String, Array],
+    default: ''
+  },
 
-    classes () {
-      return ['qas-date', 'shadow-2', { 'qas-date--inative': this.useInactiveDates }]
-    },
+  multiple: {
+    type: Boolean
+  },
 
-    hasModelValue () {
-      return this.multiple ? !!this.modelValue.length : !!this.modelValue
-    },
+  options: {
+    type: [Array, Function],
+    default: undefined
+  },
 
-    isEventsCallback () {
-      return typeof this.events === 'function'
-    },
+  useIso: {
+    type: Boolean
+  },
 
-    isEventColorCallback () {
-      return typeof this.eventColor === 'function'
-    },
+  useInactiveDates: {
+    default: true,
+    type: Boolean
+  },
 
-    model: {
-      get () {
-        return this.modelValue
-      },
+  useUnmaskOptions: {
+    default: true,
+    type: Boolean
+  },
 
-      set (value) {
-        this.$emit('update:modelValue', this.useIso ? this.getISODate(value) : value)
-      }
-    },
+  width: {
+    type: String,
+    default: ''
+  }
+})
 
-    styles () {
-      return {
-        ...(this.width && { width: this.width })
-      }
-    },
+const emit = defineEmits(['update:modelValue', 'navigation'])
 
-    normalizedOptions () {
-      return this.useUnmaskOptions ? this.getUnmaskedList(this.options) : this.options
-    }
-  },
+const attrs = useAttrs()
 
-  watch: {
-    events () {
-      this.setEvents(this.currentDate)
-    }
-  },
+// template refs
+const parentDate = ref(null)
+const dateElement = ref(null)
 
-  mounted () {
-    this.dateElement = this.$refs.date.$el
+const currentDate = ref({})
+const dateObserver = ref(undefined)
 
-    // muda estilo da navegação
-    this.setNewNavigatorDisplay()
+onMounted(() => {
+  dateElement.value = parentDate.value?.$el
 
-    // observa as mudanças no DOM do QDate > .q-date__content
-    this.setObserveDate()
+  // muda estilo da navegação
+  setNewNavigatorDisplay()
 
-    // seta data atual de acordo com a view do mês atual
-    this.setCurrentDate()
+  // observa as mudanças no DOM do QDate > .q-date__content
+  setObserveDate()
 
-    // seta os eventos, ativos e inativos
-    this.setEvents(this.currentDate)
-  },
+  // seta data atual de acordo com a view do mês atual
+  setCurrentDate()
 
-  unmounted () {
-    this.dateObserver.disconnect()
-  },
+  // seta os eventos, ativos e inativos
+  setEvents(currentDate.value)
+})
 
-  methods: {
-    createActiveEventElement (dayElement, eventElement) {
-      const buttonElement = dayElement.querySelector('.q-btn__content')
+onUnmounted(() => dateObserver.value.disconnect())
 
-      buttonElement?.appendChild?.(eventElement)
-    },
+const classes = computed(() => {
+  return ['qas-date', 'shadow-2', { 'qas-date--inative': props.useInactiveDates }]
+})
 
-    createCounterInactiveEventElement (dayElement, eventElement) {
-      const spanElement = document.createElement('span')
-      const [child] = dayElement.children
+const styles = computed(() => (props.width && { width: props.width }))
 
-      spanElement.setAttribute('data-event', true)
-      dayElement.setAttribute('data-has-inactive-event', true)
+const normalizedOptions = computed(() => {
+  return props.useUnmaskOptions ? getUnmaskedList(props.options) : props.options
+})
 
-      spanElement.classList.add('flex', 'items-center', 'justify-center', 'text-center')
+const attributes = computed(() => {
+  const {
+    color,
+    minimal,
+    textColor,
+    ...restAttrs
+  } = attrs
 
-      child.setAttribute('data-day-content', child.textContent)
+  return {
+    class: classes.value,
+    color: 'primary',
+    mask: props.mask,
+    minimal: true,
+    multiple: props.multiple,
+    options: normalizedOptions.value,
+    style: styles.value,
+    textColor: 'white',
 
-      spanElement.appendChild(child)
-      spanElement.appendChild(eventElement)
-      dayElement.appendChild(spanElement)
-    },
+    // events
+    onNavigation,
 
-    createPointerEventElement (isInactive, currentColor, eventElement) {
-      const eventPointerElement = document.createElement('div')
+    ...restAttrs
+  }
+})
 
-      eventPointerElement.classList.add(
-        'qas-date__event-pointer',
-        `bg-${isInactive ? 'grey-4' : currentColor || 'primary'}`
-      )
+const model = computed({
+  get () {
+    return props.modelValue
+  },
 
-      eventElement.appendChild(eventPointerElement)
-    },
+  set (value) {
+    emit('update:modelValue', props.useIso ? getISODate(value) : value)
+  }
+})
 
-    getCurrentColor (date, color) {
-      return (
-        (this.isEventColorCallback ? this.eventColor(date) : this.eventColor) || color
-      )
-    },
+const hasModelValue = computed(() => props.multiple ? !!props.modelValue.length : !!props.modelValue)
 
-    getCurrentDate () {
-      const modelDate = this.multiple ? this.modelValue[0] : this.modelValue
-      const extractedDate = this.hasModelValue ? date.extractDate(modelDate, this.mask) : new Date()
+const isEventColorCallback = computed(() => typeof props.eventColor === 'function')
+const isEventsCallback = computed(() => typeof props.events === 'function')
 
-      return this.getDate(extractedDate)
-    },
+watch(() => props.events, () => setEvents(currentDate.value))
 
-    getCurrentEvent (date) {
-      return this.events.find(event => event.date === date)
-    },
+// functions
+function createActiveEventElement (dayElement, eventElement) {
+  const buttonElement = dayElement.querySelector('.q-btn__content')
 
-    getDate (date) {
-      return {
-        year: date.getFullYear(),
-        month: date.getMonth() + 1,
-        day: date.getDate()
-      }
-    },
+  buttonElement?.appendChild?.(eventElement)
+}
 
-    getEventColor (currentDate) {
-      if (!this.modelValue) return 'primary'
+function createCounterInactiveEventElement (dayElement, eventElement) {
+  const spanElement = document.createElement('span')
+  const [child] = dayElement.children
 
-      const model = this.multiple ? this.modelValue : [this.modelValue]
+  spanElement.setAttribute('data-event', true)
+  dayElement.setAttribute('data-has-inactive-event', true)
 
-      const extractedModel = model.filter(Boolean).map(dateItem => {
-        const extractedDate = date.extractDate(dateItem, this.mask)
-        return asteroidDate(extractedDate, 'yyyy/MM/dd')
-      })
+  spanElement.classList.add('flex', 'items-center', 'justify-center', 'text-center')
 
-      return extractedModel.includes(currentDate) ? 'white' : 'primary'
-    },
+  child.setAttribute('data-day-content', child.textContent)
 
-    getEventClasses (currentColor, hasCounter, isInactive) {
-      return [
-        'qas-date__event',
+  spanElement.appendChild(child)
+  spanElement.appendChild(eventElement)
+  dayElement.appendChild(spanElement)
+}
 
-        isInactive ? 'qas-date__event--inactive' : 'qas-date__event--active',
+function createPointerEventElement (isInactive, currentColor, eventElement) {
+  const eventPointerElement = document.createElement('div')
 
-        `text-${currentColor || (isInactive ? 'grey-4' : 'primary')}`,
+  eventPointerElement.classList.add(
+    'qas-date__event-pointer',
+    `bg-${isInactive ? 'grey-4' : currentColor || 'primary'}`
+  )
 
-        hasCounter ? 'qas-date__event--counter' : 'qas-date__event--pointer'
-      ]
-    },
+  eventElement.appendChild(eventPointerElement)
+}
 
-    getISODate (value) {
-      if (!value || (this.multiple && !value.length)) return value
+function getCurrentColor (date, color) {
+  return (isEventColorCallback.value ? props.eventColor(date) : props.eventColor) || color
+}
 
-      return this.multiple
-        ? value.map(dateItem => date.extractDate(dateItem, this.mask).toISOString())
-        : date.extractDate(value, this.mask).toISOString()
-    },
+function getUnmaskedList (list) {
+  const invalidTypes = ['function', 'undefined']
 
-    getUnmaskedList (list) {
-      const invalidTypes = ['function', 'undefined']
+  return invalidTypes.includes(typeof list)
+    ? list
+    : list.map(item => asteroidDate(item, 'yyyy/MM/dd'))
+}
 
-      return invalidTypes.includes(typeof list)
-        ? list
-        : list.map(item => asteroidDate(item, 'yyyy/MM/dd'))
-    },
+function getDate (date) {
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate()
+  }
+}
 
-    getStatusDay ({ currentDay, index }) {
-      const status = {
-        isPrevious: false,
-        isNext: false,
-        isActiveMonthDay: false
-      }
+function getISODate (value) {
+  if (!value || (props.multiple && !value.length)) return value
 
-      if (currentDay > index) {
-        status.isPrevious = true
+  return props.multiple
+    ? value.map(dateItem => date.extractDate(dateItem, props.mask).toISOString())
+    : date.extractDate(value, props.mask).toISOString()
+}
 
-        return status
-      }
+function getCurrentDate () {
+  const modelDate = props.multiple ? props.modelValue[0] : props.modelValue
+  const extractedDate = hasModelValue.value ? date.extractDate(modelDate, props.mask) : new Date()
 
-      if (index - 7 > currentDay) {
-        status.isNext = true
+  return getDate(extractedDate)
+}
 
-        return status
-      }
+function getCurrentEvent (date) {
+  return props.events.find(event => event.date === date)
+}
 
-      status.isActiveMonthDay = true
+function getEventClasses (currentColor, hasCounter, isInactive) {
+  return [
+    'qas-date__event',
 
-      return status
-    },
+    isInactive ? 'qas-date__event--inactive' : 'qas-date__event--active',
 
-    getNormalizedYear ({ isNext, isPrevious, month, year }) {
-      if (isPrevious && month === 1) return year - 1
+    `text-${currentColor || (isInactive ? 'grey-4' : 'primary')}`,
 
-      if (isNext && month === 12) return year + 1
+    hasCounter ? 'qas-date__event--counter' : 'qas-date__event--pointer'
+  ]
+}
 
-      return year
-    },
+function getStatusDay ({ currentDay, index }) {
+  const status = {
+    isPrevious: false,
+    isNext: false,
+    isActiveMonthDay: false
+  }
 
-    getNormalizedMonth ({ month, isPrevious, isNext }) {
-      if (isPrevious) return month === 1 ? (month = 12) : month - 1
+  if (currentDay > index) {
+    status.isPrevious = true
 
-      if (isNext) return month === 12 ? (month = 1) : month + 1
+    return status
+  }
 
-      return month
-    },
+  if (index - 7 > currentDay) {
+    status.isNext = true
 
-    resetInactiveEvents () {
-      const inactiveElementsToRemove = this.dateElement.querySelectorAll('[data-has-inactive-event]')
+    return status
+  }
 
-      inactiveElementsToRemove.forEach(inactiveElement => {
-        const [element] = inactiveElement.children
+  status.isActiveMonthDay = true
 
-        const hasDayContent = element.querySelector('[data-day-content]')
+  return status
+}
 
-        if (hasDayContent) inactiveElement.append(hasDayContent)
-      })
-    },
+function isJanuary (month) {
+  return month === 1
+}
 
-    resetEvents () {
-      if (this.useInactiveDates) this.resetInactiveEvents()
+function isDecember (month) {
+  return month === 12
+}
 
-      this.resetActiveEvents()
-    },
+function getNormalizedYear ({ isNext, isPrevious, month, year }) {
+  if (isPrevious && isJanuary(month)) return year - 1
 
-    resetActiveEvents () {
-      const elementsToRemove = this.dateElement.querySelectorAll('[data-event]')
+  if (isNext && isDecember(month)) return year + 1
 
-      elementsToRemove.forEach(nodeElement => nodeElement.remove())
-    },
+  return year
+}
 
-    setCurrentDate (date) {
-      this.currentDate = date || this.getCurrentDate()
-    },
+function getNormalizedMonth ({ month, isPrevious, isNext }) {
+  if (isPrevious) return isJanuary(month) ? (month = 12) : month - 1
 
-    setEventClasses (currentColor, eventElement, hasCounter, isInactive) {
-      const classes = this.getEventClasses(currentColor, hasCounter, isInactive)
+  if (isNext) return isDecember(month) ? (month = 1) : month + 1
 
-      eventElement.classList.add(...classes)
-    },
+  return month
+}
 
-    setEvents ({ year, month }) {
-      this.resetEvents()
+function resetActiveEvents () {
+  const elementsToRemove = dateElement.value.querySelectorAll('[data-event]')
 
-      if (!this.events.length || !year || !month) return
+  elementsToRemove.forEach(nodeElement => nodeElement.remove())
+}
 
-      const daysElement = this.dateElement.querySelectorAll('.q-date__calendar-days .q-date__calendar-item')
-      const daysElementList = Array.from(daysElement)
+function resetInactiveEvents () {
+  const inactiveElementsToRemove = dateElement.value.querySelectorAll('[data-has-inactive-event]')
 
-      daysElementList.forEach((dayElement, index) => {
-        const [child] = dayElement.children
+  inactiveElementsToRemove.forEach(inactiveElement => {
+    const [element] = inactiveElement.children
 
-        const day = child.textContent
+    const hasDayContent = element.querySelector('[data-day-content]')
 
-        const { isActiveMonthDay, isNext, isPrevious } = this.getStatusDay({ currentDay: day, index: index + 1 })
+    if (hasDayContent) inactiveElement.append(hasDayContent)
+  })
+}
 
-        const normalizedYear = this.getNormalizedYear({ isNext, month, isPrevious, year })
-        const normalizedMonth = this.getNormalizedMonth({ isNext, isPrevious, month })
-        const newDate = date.buildDate({ year: normalizedYear, month: normalizedMonth, day })
-        const normalizedDate = asteroidDate(newDate, 'yyyy-MM-dd')
+function resetEvents () {
+  if (props.useInactiveDates) resetInactiveEvents()
 
-        const currentEvent = this.isEventsCallback ? this.events(normalizedDate) : this.getCurrentEvent(normalizedDate)
+  resetActiveEvents()
+}
 
-        const hasDisabledClass = dayElement.classList.contains('q-date__calendar-item--out')
-        const isInactive = !isActiveMonthDay || hasDisabledClass
+function setCurrentDate (date) {
+  currentDate.value = date || getCurrentDate()
+}
 
-        /*
-          * Se não tiver evento para o dia atual no loop ou
-          * a opção de eventos inativos estiver desabilitada e o dia atual do loop
-          * for referente ao mês anterior ou ao mês posterior, então retorna
-        */
-        if (!currentEvent || (!this.useInactiveDates && !isActiveMonthDay)) return
+function setEventClasses (currentColor, eventElement, hasCounter, isInactive) {
+  const classes = getEventClasses(currentColor, hasCounter, isInactive)
 
-        const hasCounter = currentEvent.counter
+  eventElement.classList.add(...classes)
+}
 
-        const currentColor = this.getCurrentColor(normalizedDate, currentEvent?.color)
+function setTextCountEvent (eventElement, currentEvent) {
+  eventElement.innerText = `(${currentEvent.counter})`
+}
 
-        const eventElement = document.createElement('div')
+function setEvents ({ year, month }) {
+  resetEvents()
 
-        eventElement.setAttribute('data-event', true)
+  if (!props.events.length || !year || !month) return
 
-        dayElement.classList.add('qas-date__calendar-item-event')
+  const daysElement = dateElement.value.querySelectorAll('.q-date__calendar-days .q-date__calendar-item')
+  const daysElementList = Array.from(daysElement)
 
-        this.setEventClasses(currentColor, eventElement, hasCounter, isInactive)
+  daysElementList.forEach((dayElement, index) => {
+    const [child] = dayElement.children
 
-        if (hasCounter) {
-          this.setTextCountEvent(eventElement, currentEvent)
-        } else {
-          this.createPointerEventElement(isInactive, currentColor, eventElement)
-        }
+    const day = child.textContent
 
-        if (isInactive) {
-          this.createCounterInactiveEventElement(dayElement, eventElement)
+    const { isActiveMonthDay, isNext, isPrevious } = getStatusDay({ currentDay: day, index: index + 1 })
 
-          return
-        }
+    const normalizedYear = getNormalizedYear({ isNext, month, isPrevious, year })
+    const normalizedMonth = getNormalizedMonth({ isNext, isPrevious, month })
+    const newDate = date.buildDate({ year: normalizedYear, month: normalizedMonth, day })
+    const normalizedDate = asteroidDate(newDate, 'yyyy-MM-dd')
 
-        this.createActiveEventElement(dayElement, eventElement)
-      })
-    },
+    const currentEvent = isEventsCallback.value ? props.events(normalizedDate) : getCurrentEvent(normalizedDate)
 
-    setNewNavigatorDisplay () {
-      const navigationElement = this.dateElement.querySelector('.q-date__navigation')
-      const navigationChildren = navigationElement?.children || []
+    const hasDisabledClass = dayElement.classList.contains('q-date__calendar-item--out')
+    const isInactive = !isActiveMonthDay || hasDisabledClass
 
-      const nodesList = Array.from(navigationChildren)
+    /*
+      * Se não tiver evento para o dia atual no loop ou
+      * a opção de eventos inativos estiver desabilitada e o dia atual do loop
+      * for referente ao mês anterior ou ao mês posterior, então retorna
+    */
+    if (!currentEvent || (!props.useInactiveDates && !isActiveMonthDay)) return
 
-      if (nodesList.length <= 2) return
+    const hasCounter = currentEvent.counter
 
-      const firstDivElement = document.createElement('div')
-      const secondDivElement = document.createElement('div')
+    const currentColor = getCurrentColor(normalizedDate, currentEvent?.color)
 
-      firstDivElement.classList.add('flex')
-      secondDivElement.classList.add('flex')
+    const eventElement = document.createElement('div')
 
-      const firstList = nodesList.slice(0, 3)
-      const secondList = nodesList.slice(3, 6)
+    eventElement.setAttribute('data-event', true)
 
-      const newFirstElement = navigationElement.appendChild(firstDivElement)
-      const newSecondElement = navigationElement.appendChild(secondDivElement)
+    dayElement.classList.add('qas-date__calendar-item-event')
 
-      this.$nextTick(() => firstList.forEach(node => newFirstElement.appendChild(node)))
-      this.$nextTick(() => secondList.forEach(node => newSecondElement.appendChild(node)))
-    },
+    setEventClasses(currentColor, eventElement, hasCounter, isInactive)
 
-    setObserveDate () {
-      const element = this.dateElement.querySelector('.q-date__content')
-      const config = { childList: true, subtree: true }
+    if (hasCounter) {
+      setTextCountEvent(eventElement, currentEvent)
+    } else {
+      createPointerEventElement(isInactive, currentColor, eventElement)
+    }
 
-      const callback = mutationList => {
-        mutationList.forEach(({ removedNodes, target }) => {
-          const [removedNode] = removedNodes
+    if (isInactive) {
+      createCounterInactiveEventElement(dayElement, eventElement)
 
-          if (!removedNode) return
+      return
+    }
 
-          const hasCalendarDaysContainer = target.classList.contains('q-date__calendar-days-container')
-          const hasContent = target.classList.contains('q-date__content')
-          const hasMonths = removedNode.classList.contains('q-date__months')
+    createActiveEventElement(dayElement, eventElement)
+  })
+}
 
-          if (hasCalendarDaysContainer || (hasContent && hasMonths)) {
-            this.setEvents(this.currentDate)
-          }
-        })
-      }
+function setNewNavigatorDisplay () {
+  const navigationElement = dateElement.value.querySelector('.q-date__navigation')
+  const navigationChildren = navigationElement?.children || []
 
-      this.dateObserver = new MutationObserver(callback)
-      this.dateObserver.observe(element, config)
-    },
+  const nodesList = Array.from(navigationChildren)
 
-    setTextCountEvent (eventElement, currentEvent) {
-      eventElement.innerText = `(${currentEvent.counter})`
-    },
+  if (nodesList.length <= 2) return
 
-    async onNavigation (date) {
-      this.$emit('navigation', date)
+  const firstDivElement = document.createElement('div')
+  const secondDivElement = document.createElement('div')
 
-      this.setCurrentDate(date)
+  firstDivElement.classList.add('flex')
+  secondDivElement.classList.add('flex')
 
-      this.$nextTick(() => this.setNewNavigatorDisplay())
-    }
+  const firstList = nodesList.slice(0, 3)
+  const secondList = nodesList.slice(3, 6)
+
+  const newFirstElement = navigationElement.appendChild(firstDivElement)
+  const newSecondElement = navigationElement.appendChild(secondDivElement)
+
+  nextTick(() => firstList.forEach(node => newFirstElement.appendChild(node)))
+  nextTick(() => secondList.forEach(node => newSecondElement.appendChild(node)))
+}
+
+function setObserveDate () {
+  const element = dateElement.value.querySelector('.q-date__content')
+  const config = { childList: true, subtree: true }
+
+  const callback = mutationList => {
+    mutationList.forEach(({ removedNodes, target }) => {
+      const [removedNode] = removedNodes
+
+      if (!removedNode) return
+
+      const hasCalendarDaysContainer = target.classList.contains('q-date__calendar-days-container')
+      const hasContent = target.classList.contains('q-date__content')
+      const hasMonths = removedNode.classList.contains('q-date__months')
+
+      if (hasCalendarDaysContainer || (hasContent && hasMonths)) {
+        setEvents(currentDate.value)
+      }
+    })
   }
+
+  dateObserver.value = new MutationObserver(callback)
+  dateObserver.value.observe(element, config)
+}
+
+function onNavigation (date) {
+  emit('navigation', date)
+
+  setCurrentDate(date)
+
+  nextTick(() => setNewNavigatorDisplay())
 }
 </script>