SetPositionPage.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <Window ref="window" height="130px" max-width="600px" :top-shift="-50" @close="close">
  3. <template #header>
  4. Установить позицию
  5. </template>
  6. <div id="set-position-slider" class="slider q-px-md column justify-center">
  7. <q-slider
  8. v-model="sliderValue"
  9. thumb-path="M 2, 10 a 8.5,8.5 0 1,0 17,0 a 8.5,8.5 0 1,0 -17,0"
  10. :max="sliderMax"
  11. label
  12. :label-value="(sliderMax ? (sliderValue/sliderMax*100).toFixed(2) + '%' : 0)"
  13. color="primary"
  14. />
  15. </div>
  16. </Window>
  17. </template>
  18. <script>
  19. //-----------------------------------------------------------------------------
  20. import vueComponent from '../../vueComponent.js';
  21. import Window from '../../share/Window.vue';
  22. const componentOptions = {
  23. components: {
  24. Window,
  25. },
  26. watch: {
  27. sliderValue: function(newValue) {
  28. if (this.initialized)
  29. this.$emit('book-pos-changed', {bookPos: newValue});
  30. },
  31. },
  32. };
  33. class SetPositionPage {
  34. _options = componentOptions;
  35. sliderValue = null;
  36. sliderMax = null;
  37. created() {
  38. this.commit = this.$store.commit;
  39. this.reader = this.$store.state.reader;
  40. this.initialized = false;
  41. }
  42. init(sliderValue, sliderMax) {
  43. this.$refs.window.init();
  44. this.sliderMax = sliderMax;
  45. this.sliderValue = sliderValue;
  46. this.initialized = true;
  47. }
  48. close() {
  49. this.$emit('set-position-toggle');
  50. }
  51. keyHook(event) {
  52. if (event.type == 'keydown') {
  53. const action = this.$root.readerActionByKeyEvent(event);
  54. if (event.key == 'Escape' || action == 'setPosition') {
  55. this.close();
  56. }
  57. }
  58. return true;
  59. }
  60. }
  61. export default vueComponent(SetPositionPage);
  62. //-----------------------------------------------------------------------------
  63. </script>
  64. <style scoped>
  65. .slider {
  66. margin: 20px;
  67. height: 40px;
  68. background-color: #efefef;
  69. border-radius: 15px;
  70. }
  71. </style>
  72. <style>
  73. #set-position-slider .q-slider__thumb path {
  74. fill: white !important;
  75. stroke: blue !important;
  76. stroke-width: 2 !important;
  77. }
  78. </style>