EdPagination.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <div v-if="options.length">
  3. <!-- <select class="" name="page-nav" v-model="page_selected" placeholder="Pages">
  4. <option value="" disabled selected>Pages</option>
  5. <option v-for="(page, index) in pages" :key="index" :value="page">{{ page }}</option>
  6. </select> -->
  7. <v-select
  8. id="page-nav-select"
  9. type="select"
  10. placeholder="Aller à la page ..."
  11. append-to-body
  12. :calculate-position="dropDownMenuPos"
  13. :options="options"
  14. :clearable="false"
  15. :value="page_selected"
  16. :selectable="option => ! option.disabled"
  17. @input="onClickPaginationItem"
  18. >
  19. <template v-slot:option="option">
  20. <span v-for="l in option.level" :key="l" class="op-tab">&nbsp;</span>
  21. <span v-html="option.label" />
  22. </template>
  23. </v-select>
  24. </div>
  25. </template>
  26. <script>
  27. import { createPopper } from '@popperjs/core'
  28. export default {
  29. name: 'EdPagination',
  30. props: {
  31. pagination: Array
  32. },
  33. data: () => ({
  34. options: [],
  35. page_selected: ''
  36. }),
  37. created () {
  38. this.parsePagesToOptions(this.pagination)
  39. },
  40. // watch: {
  41. // loadedtextsuuids (n, o) {
  42. // console.log('EdToc watch loadedtxtsuuids', o, n)
  43. // }
  44. // },
  45. methods: {
  46. parsePagesToOptions (p, vol = null, i = 0, l = 0) {
  47. console.log('EdPagination parsePagesToOptions', p)
  48. for (var j = 0; j < p.length; j++) {
  49. // if it is just a section without page like a volume
  50. // not used anymore
  51. if (p[j].text) {
  52. this.options.push({
  53. key: i,
  54. code: p[j].text,
  55. label: p[j].text,
  56. disabled: true,
  57. level: l
  58. })
  59. }
  60. // if its a volume
  61. if (p[j].vol) {
  62. this.options.push({
  63. code: p[j].vol.label,
  64. label: `<b>${p[j].vol.label}</b>`,
  65. disabled: true,
  66. level: l
  67. })
  68. }
  69. // if it's a real page break
  70. if (p[j].pageBreak) {
  71. let label
  72. if (vol) {
  73. label = `${vol.unit}${vol.n} page ${p[j].pageNum}`
  74. } else {
  75. label = p[j].pageNum
  76. }
  77. this.options.push({
  78. key: i,
  79. code: p[j].pageBreak,
  80. label: label,
  81. uuid: p[j].uuid,
  82. level: l
  83. })
  84. }
  85. if (p[j].pages && p[j].pages.length) {
  86. this.parsePagesToOptions(p[j].pages, p[j].vol, i++, l + 1)
  87. } else {
  88. i++
  89. }
  90. }
  91. },
  92. dropDownMenuPos (dropdownList, component, { width }) {
  93. /**
  94. * We need to explicitly define the dropdown width since
  95. * it is usually inherited from the parent with CSS.
  96. */
  97. dropdownList.style.width = width
  98. /**
  99. * Here we position the dropdownList relative to the $refs.toggle Element.
  100. *
  101. * The 'offset' modifier aligns the dropdown so that the $refs.toggle and
  102. * the dropdownList overlap by 1 pixel.
  103. *
  104. * The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
  105. * wrapper so that we can set some styles for when the dropdown is placed
  106. * above.
  107. */
  108. const popper = createPopper(component.$refs.toggle, dropdownList, {
  109. placement: 'top',
  110. modifiers: [
  111. {
  112. name: 'offset',
  113. options: {
  114. offset: [0, -1]
  115. }
  116. },
  117. {
  118. name: 'toggleClass',
  119. enabled: true,
  120. phase: 'write',
  121. fn ({ state }) {
  122. component.$el.classList.toggle('drop-up', state.placement === 'top')
  123. }
  124. }]
  125. })
  126. /**
  127. * To prevent memory leaks Popper needs to be destroyed.
  128. * If you return function, it will be called just before dropdown is removed from DOM.
  129. */
  130. return () => popper.destroy()
  131. },
  132. onClickPaginationItem (o) {
  133. this.page_selected = o
  134. this.$emit('onClickPaginationItem', o)
  135. }
  136. }
  137. }
  138. </script>
  139. <style lang="scss" scoped>
  140. </style>