@docsector/docsector-reader 0.1.0

package/src/components/QZoom.js

@@ -0,0 +1,278 @@
+/*
+ * forked from https://github.com/quasarframework/app-extension-qzoom
+ * converted from Vue 2 to Vue 3 by Rodrigo Vieira
+ * author: Jeff Galbraith
+ */
+
+import {
+  h,
+  ref, computed,
+  onMounted, onBeforeUnmount
+} from 'vue'
+
+import { useColorize } from 'q-colorize-mixin'
+
+import { dom } from 'quasar'
+const { offset } = dom
+
+import './QZoom.styl'
+
+// @
+export default {
+  name: 'QZoom',
+
+  props: {
+    backgroundColor: {
+      type: String,
+      default: 'white'
+    },
+    restoreOnScroll: Boolean,
+    manual: Boolean,
+    scale: Boolean,
+    initialScale: { type: Number, default: 1.0, validator: v => v >= 0.05 && v <= 10 },
+    scaleText: Boolean,
+    initialScaleText: { type: Number, default: 100, validator: v => v >= 50 && v <= 500 },
+    noCenter: Boolean,
+    noWheelScale: Boolean,
+    noEscClose: Boolean
+  },
+
+  setup (props, { emit, slots }) {
+    const vComponent = ref(null)
+
+    const zooming = ref(false)
+    const zoomed = ref(false)
+    const restoring = ref(false)
+    const bgColor = ref('transparent')
+    const position = ref(null)
+    const scaleValue = ref(1.0)
+    const scaleTextValue = ref(100)
+
+    const isTransitioning = computed(() => zooming.value === true || zoomed.value === true || restoring.value === true)
+    const isZoomed = computed(() => zoomed.value === true || zooming.value === true)
+
+    const Colorize = useColorize()
+
+    // @ Methods
+    const show = () => {
+      emit('before-zoom')
+
+      zooming.value = true
+      zoomed.value = false
+      restoring.value = false
+
+      position.value = getPosition()
+
+      setTimeout(() => {
+        bgColor.value = props.backgroundColor
+      }, 100)
+
+      setTimeout(() => {
+        position.value = getFullScreenPosition()
+        zoomed.value = true
+
+        if (!props.restoreOnScroll) {
+          addClass(document.body, 'q-zoom__no-scroll')
+        }
+
+        if (props.scale && !props.scaleText) {
+          setScale(props.initialScale)
+        }
+
+        if (props.scaleText && !props.scale) {
+          setScaleText(props.initialScaleText)
+        }
+
+        emit('zoomed')
+      }, 500)
+    }
+
+    const hide = () => {
+      emit('before-restore')
+
+      restoring.value = true
+      zoomed.value = false
+      zooming.value = false
+
+      setScale(1.0)
+      setScaleText(100)
+
+      position.value = getPosition()
+
+      setTimeout(() => {
+        resetTransition()
+        removeClass(document.body, 'q-zoom__no-scroll')
+
+        emit('restored')
+      }, 400)
+    }
+
+    const toggle = () => {
+      if (isZoomed.value) {
+        hide()
+      } else {
+        show()
+      }
+    }
+
+    const setScale = (val) => {
+      if (val === scaleValue.value) return
+
+      if (val >= 0.05 && val <= 10) {
+        scaleValue.value = val
+
+        emit('scale', scaleValue.value)
+      }
+    }
+
+    const setScaleText = (val) => {
+      if (val === scaleTextValue.value) return
+
+      if (val >= 50 && val <= 500) {
+        scaleTextValue.value = val
+
+        emit('scale-text', scaleTextValue.value)
+      }
+    }
+
+    const addClass = (el, name) => {
+      const arr = el.className.split(' ')
+
+      if (arr.indexOf(name) === -1) {
+        arr.push(name)
+        el.className = arr.join(' ')
+      }
+    }
+
+    const removeClass = (el, name) => {
+      const arr = el.className.split(' ')
+      const index = arr.indexOf(name)
+
+      if (index !== -1) {
+        arr.splice(index, 1)
+        el.className = arr.join(' ')
+      }
+    }
+
+    const resetTransition = () => {
+      zoomed.value = false
+      zooming.value = false
+      restoring.value = false
+      bgColor.value = 'transparent'
+      scaleValue.value = 1.0
+      scaleTextValue.value = 100
+    }
+
+    const onScroll = (e) => {
+      if (isZoomed.value && props.restoreOnScroll) {
+        hide()
+
+        e.preventDefault()
+      }
+    }
+
+    const onKeyup = (e) => {
+      if (e.key === 'Escape') {
+        if (!props.noEscClose) {
+          if (isZoomed.value) {
+            hide()
+
+            e.preventDefault()
+          }
+        }
+      }
+    }
+
+    const getPosition = () => {
+      const position = offset(vComponent.value)
+
+      position.left = position.left + 'px'
+      position.top = position.top + 'px'
+      position.width = vComponent.value.clientWidth + 'px'
+      position.height = vComponent.value.clientHeight + 'px'
+
+      return position
+    }
+
+    const getFullScreenPosition = () => {
+      return { left: 0, top: 0, width: '100%', height: '100%' }
+    }
+
+    const wheelEvent = (e) => {
+      if (!props.noWheelScale) {
+        if (isZoomed.value && props.scale && !props.scaleText) {
+          const less = scaleValue.value > 1 ? -0.5 : -0.1
+          const more = scaleValue.value > 1 ? 0.5 : 0.1
+          const val = (e.wheelDeltaY < 0 ? less : more)
+
+          setScale(scaleValue.value + val)
+
+          e.preventDefault()
+        } else if (isZoomed.value && props.scaleText && !props.scale) {
+          const val = (e.wheelDeltaY < 0 ? -1 : 1)
+
+          setScaleText(scaleTextValue.value + val)
+
+          e.preventDefault()
+        }
+      }
+    }
+
+    // @ Events
+    onMounted(() => {
+      document.addEventListener('scroll', onScroll)
+      document.addEventListener('keyup', onKeyup)
+    })
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('scroll', onScroll)
+      document.removeEventListener('keyup', onKeyup)
+    })
+
+    // @
+    const __renderOverlayContent = () => {
+      const slot = slots.default
+
+      return h('div', Colorize.setBackgroundColor(props.backgroundColor, {
+        class: 'q-zoom__content' +
+          (props.noCenter ? ' q-zoom__no-center' : ''),
+        style: {
+          left: position.value.left,
+          top: position.value.top,
+          width: position.value.width,
+          height: position.value.height,
+          transform: props.scale && !props.scaleText && `scale(${scaleValue.value})`,
+          fontSize: props.scaleText && !props.scale && `${scaleTextValue.value}%`
+        }
+      }), [
+        slot && slot({ zoomed: isZoomed.value })
+      ])
+    }
+
+    const __renderOverlay = () => {
+      if (!isTransitioning.value) {
+        return null
+      }
+
+      return h('div', Colorize.setBackgroundColor(bgColor.value, {
+        class: 'q-zoom__overlay' +
+          (props.manual ? '' : ' q-zoom__zoom-out')
+      }), [
+        __renderOverlayContent()
+      ])
+    }
+
+    return () => h('div', {
+      class: 'q-zoom' +
+        (props.manual ? '' : ' q-zoom__zoom-in'),
+
+      onClick: toggle,
+      onWheel: wheelEvent,
+
+      ref: vComponent
+    }, [
+      slots.default && slots.default({ zoomed: isZoomed.value }),
+      __renderOverlay()
+    ])
+  }
+}

package/src/components/QZoom.styl

@@ -0,0 +1,43 @@
+$box-shadow ?= 1px 1px 7px 1px rgba(0,0,0,.2)
+
+.q-zoom
+  position relative
+  padding 0
+  margin 0
+
+  &__zoom-in
+    cursor zoom-in
+
+  &__zoom-out
+    cursor zoom-out
+
+  &__overlay
+    position fixed
+    transition all .5s linear
+    left 0
+    top 0
+    width 100%
+    height 100%
+    background-color transparent
+    padding 0
+    margin 0
+    z-index 6000
+
+  &__content
+    position relative
+    display block
+    transition all .5s cubic-bezier(.2,0,.2,1)
+    text-align center
+    vertical-align middle
+    width 100%
+    height 0
+    max-width 100%
+    max-height 100%
+    overflow hidden
+
+  &__no-center
+    text-align unset
+    vertical-align unset
+
+  &__no-scroll
+    overflow: hidden;

package/src/composables/useNavigator.js

@@ -0,0 +1,113 @@
+import { scroll, Platform } from 'quasar'
+import { useStore } from 'vuex'
+import { useRouter, useRoute } from 'vue-router'
+import { ref } from 'vue'
+
+export default function useNavigator() {
+  const store = useStore()
+  const router = useRouter()
+  const route = useRoute()
+  const selected = ref(null)
+
+  const register = (id) => {
+    store.commit('page/pushAnchors', id)
+  }
+
+  const index = (id, child = false) => {
+    store.commit('page/pushNodes', {
+      id,
+      label: selected.value,
+      child,
+      children: []
+    })
+  }
+
+  const select = (id) => {
+    store.commit('page/setAnchor', Number(id))
+    store.commit('page/pushNodesExpanded', Number(id))
+  }
+
+  const anchor = (id, toSelect = true) => {
+    store.commit('page/setScrolling', false)
+
+    id = '' + id
+    const Anchor = document.getElementById(id)
+
+    if (Anchor !== null && typeof Anchor === 'object') {
+      const ScrollTarget = scroll.getScrollTarget(Anchor)
+      const AnchorOffsetTop = Anchor.offsetTop
+
+      scroll.setVerticalScrollPosition(ScrollTarget, AnchorOffsetTop, 300)
+
+      setTimeout(() => {
+        store.commit('page/setScrolling', true)
+      }, 600)
+    }
+
+    if (toSelect) {
+      select(id)
+    }
+  }
+
+  const scrolling = (scroll) => {
+    const scrolling = store.state.page.scrolling
+    if (!scrolling) {
+      return
+    }
+
+    const scrollPositionTop = scroll.position.top + 50
+    const anchors = store.state.page.anchors
+
+    for (let i = 0; i < anchors.length; i++) {
+      const anchorId = anchors[i]
+
+      if (anchorId === 0) {
+        continue
+      }
+
+      const Anchor = document.getElementById(anchorId)
+      let AnchorOffsetTop = 20
+      if (Anchor !== null && typeof Anchor === 'object') {
+        AnchorOffsetTop = Anchor.offsetTop
+      }
+
+      if (scrollPositionTop >= AnchorOffsetTop) {
+        select(anchorId)
+      }
+    }
+  }
+
+  const navigate = (value, toAnchor = true) => {
+    if (toAnchor) {
+      if (('#' + value) === route.hash) {
+        anchor(value)
+        return
+      } else if (value === null) {
+        anchor(selected.value, false)
+        return
+      }
+    }
+
+    router.push(route.path + '#' + value)
+
+    if (toAnchor) {
+      if (Platform.is.desktop) {
+        anchor(value)
+      } else {
+        setTimeout(() => {
+          anchor(value)
+        }, 600)
+      }
+    }
+  }
+
+  return {
+    register,
+    index,
+    select,
+    anchor,
+    scrolling,
+    navigate,
+    selected
+  }
+}

package/src/css/app.sass

@@ -0,0 +1,279 @@
+/* --- Docsector Reader --- */
+@font-face
+  font-family: "Fira Code Nerd Font"
+  src: url('/fonts/FiraCodeNerdFont-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+// * General
+body
+  font-family: "Roboto", "Consolas"
+
+// * Coloring
+// Light mode
+body.body--light
+  --q-primary: #655529 !important
+  --q-secondary: #000080 !important
+
+  --q-primary-background: #FFF !important
+
+  .content
+    h1, h2, h3, h4, h5, h6
+      color: black
+
+      &:hover
+        color: #595959
+      &:hover:after
+        color: #69562b
+    // token
+    code:not(pre > code)
+      color: var(--q-primary) !important
+      background: var(--q-primary-background) !important
+      border: 1px solid #e6e6e6 !important
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125)
+
+    a
+      color: #34495e
+      &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):hover
+        &:not(.button)
+          color: #286fa3
+          background-color: #cde3f3
+      &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):not(.line)
+        color: #1b4a6c
+        border-bottom: 1px dotted #1b4a6c
+// Dark mode
+body.body--dark
+  --q-primary: #69562b !important
+  --q-primary-in-dark-bg: #C1A667 !important
+  --q-secondary: #FFA07A !important
+  --q-negative: #fc001b !important
+
+  --q-light-in-dark-1: #ababab
+  --q-light-in-dark-2: #c9c9c9
+
+  --q-primary-background: #FFF !important
+
+  color: var(--q-light-in-dark-1)
+
+  .content
+    h1, h2, h3, h4, h5, h6
+      color: var(--q-light-in-dark-1)
+
+      &:hover
+        color: #969696
+      &:hover:after
+        color: #B19248
+    section
+      color: var(--q-light-in-dark-2)
+    // token
+    code:not(pre > code)
+      color: var(--q-primary-in-dark-bg) !important
+      background: var(--q-dark) !important
+      border: 1px solid #e6e6e6
+      box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
+
+    a
+      color: #34495e
+      &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):hover
+        &:not(.button)
+          color: #286fa3
+          background-color: #cde3f3
+      &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):not(.line)
+        color: #3da6f3
+        border-bottom: 1px dotted #1b4a6c
+
+// * General
+.content
+  --big-play-button-background: #000 !important
+  --big-play-button-background-dark: #000 !important
+
+  h1, h2, h3, h4, h5, h6
+    font-weight: 600
+    padding: 6px
+    cursor: pointer
+    user-select: none
+
+    &:hover:after
+      content: ' #'
+      font-weight: bold
+
+  h1
+    font-size: 2rem
+    line-height: 2rem
+    margin: 0 0 0.7em
+  h2
+    font-size: 1.7rem
+    line-height: 1.7rem
+    margin: 1.35em 0 0.7em
+    border-bottom: 1px solid #ddd
+  h3
+    font-size: 1.5rem
+    line-height: 1.5rem
+    margin: 1.4em 0 0.7em
+
+    &:first-child
+      margin-top: 0
+    &:before
+      content: '# '
+  h4
+    font-size: 1.25rem
+    line-height: 1.25rem
+    margin: 1em 0 0.7em
+  h5
+    font-size: 1.12rem
+    line-height: 1.12rem
+    margin: 0.5em 0 0.3em
+  h6
+    font-size: 1.06rem
+    line-height: 1.06rem
+    margin: 0.3em 0 0.1em
+
+  code:not(pre > code)
+    padding: 3px 5px
+    margin: 0 2px
+    border-radius: 2px
+    white-space: pre-wrap
+    display: inline-block
+    line-height: 0.85em
+
+  a
+    text-decoration: none
+    outline: 0
+    cursor: pointer
+    &:not([data-scroll]):not(.search-result):not(.support-button):not(.header-link):not(.line)
+      font-weight: 700
+      padding: 0 2px
+      transition: all 0.3s ease
+
+  &.overview
+    blockquote
+      margin: 2.5em 0
+      padding: 0
+      p
+        padding: 0.5em 1em
+        background-color: #fafafa !important
+        letter-spacing: 0.5px
+    img
+      border: 0
+      max-width: 100%
+    strong
+      font-weight: 600
+    hr
+      margin: 2em 0
+      height: 2px
+      background-color: #e5e5e5
+      border: 0
+      padding: 0
+    iframe
+      border: 0
+      margin: 1em 0
+    ul
+      padding-left: 1.25em
+      line-height: 1.4em
+    span
+      &.light
+        color: #57a0d6
+      &.info
+        font-size: 0.85em
+        display: inline-block
+        vertical-align: middle
+        width: 280px
+        margin-left: 20px
+    table
+      max-width: 100%
+      border: 1px solid #eee
+      border-radius: 4px
+      border-spacing: 0
+      box-shadow: 1px 2px 2px 1px rgba(0,0,0,0.125)
+      th
+        font-weight: bold
+        border-bottom: 2px solid #eee
+        text-align: left
+      tr
+        vertical-align: top
+      &:not(.js-file-line-container)
+        tr
+          &:nth-child(2n)
+            background: #f8f8f8
+    figure
+      table
+        border: 0
+        box-shadow: none
+        th
+          border-bottom: 0
+    .highlight
+      pre
+        padding: 0
+        .line
+          min-height: 20px
+    & > h1
+      i
+        font-size: 70%
+        vertical-align: middle
+        color: #286fa3
+    ul ul,
+    ul p
+      margin: 0.6em 0
+    ul,
+    ol
+      line-height: 1.6em
+    ul,
+    ol
+      padding-left: 1.5em
+    table th,
+    table td
+      padding: 10px 10px
+
+
+
+/* --- Quasar --- */
+// * General
+.q-item__section--avatar
+  min-width: 45px
+// ! Layouts
+// QDrawer
+.q-drawer__opener
+  top: 86px
+
+// ! Components
+// QDialog
+.q-dialog__inner > div
+  border-radius: 0 !important
+// QList
+// QList -> Item
+.q-item__section--main + .q-item__section--main
+  margin-left: 0
+// QList -> Item -> Label
+.q-item__label--header
+  font-weight: 500
+  padding-left: 0
+  padding-bottom: 10px
+// QBtn
+.q-btn
+  &.filled
+    padding: 13px
+// QScrollArea
+.q-scrollarea__thumb
+  z-index: 3
+// QTree
+.q-tree__node
+  padding: 0 0 3px 5px
+.q-tree__node-header:before
+  width: 15px
+  left: -18px !important
+// QSelect
+.q-field--labeled .q-field__native,
+.q-field--labeled .q-field__prefix,
+.q-field--labeled .q-field__suffix
+  padding-bottom: 0
+
+// * Coloring
+// Light mode
+body.body--light
+  .q-item__label--header
+    color: #565656
+  .q-tree__arrow
+    color: #474747
+// Dark mode
+body.body--dark
+  .q-tree__arrow
+    color: #a9a9a9