Home.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <script>
  2. import Vue from 'vue'
  3. export default {
  4. props: ['html', 'full'], // get the html from parent with props
  5. data() {
  6. return {
  7. template: null, // compiled template from html used in render
  8. showrooms: [],
  9. showroomsOdd: [],
  10. showroomsEven: [],
  11. showroomMode: 1,
  12. showroomInterval: 0,
  13. showroomI:0,
  14. showroomJ:0
  15. }
  16. },
  17. beforeMount() {
  18. console.log('Home beforeMount, full', this.full)
  19. // compile the html src (coming from parent with props or from ajax call)
  20. if (this.html) {
  21. // console.log('html', this.html)
  22. this.compileTemplate()
  23. }
  24. },
  25. render(h) {
  26. if (!this.template) {
  27. return h('span', 'Loading ...')
  28. } else {
  29. return this.template.render.call(this)
  30. }
  31. },
  32. mounted(){
  33. // this.initShowroomCarroussel()
  34. },
  35. methods: {
  36. compileTemplate(){
  37. this.template = Vue.compile(this.html)
  38. this.$options.staticRenderFns = []
  39. this._staticTrees = []
  40. this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
  41. console.log('compileTemplate, full', this.full)
  42. if (this.full) {
  43. setTimeout(this.initShowroomCarroussel.bind(this), 250)
  44. }
  45. },
  46. initShowroomCarroussel(){
  47. console.log('startShowroomCarroussel')
  48. this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
  49. console.log('showrooms', this.showrooms)
  50. for (let i = 0; i < this.showrooms.length; i++) {
  51. if (i%2 === 0) {
  52. this.showroomsOdd.push(this.showrooms[i])
  53. } else {
  54. this.showroomsEven.push(this.showrooms[i])
  55. }
  56. }
  57. console.log('Odd', this.showroomsOdd)
  58. console.log('Even', this.showroomsEven)
  59. // TODO: share media query and variables between scss and js
  60. let column_width= 205
  61. let column_goutiere= 13
  62. let bp = (column_width + column_goutiere )*7 +1
  63. const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`)
  64. // Register event listener
  65. mediaQuery.addListener(this.checkShowroomMode)
  66. this.checkShowroomMode(mediaQuery)
  67. // this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
  68. // console.log('this.showroomInterval', this.showroomInterval)
  69. // this.switchShowroomCarroussel()
  70. },
  71. checkShowroomMode(mq){
  72. // default mode 1
  73. let newmode = 1
  74. if (mq.matches) {
  75. // if mediaquery match switch to mode 2
  76. newmode = 2
  77. }
  78. if(newmode !== this.showroomMode) {
  79. // if new mode different from old mode
  80. // reset sowrooms classes
  81. for (let i = 0; i < this.showrooms.length; i++) {
  82. this.showrooms[i].classList.remove('active')
  83. }
  84. // record new mode
  85. this.showroomMode = newmode
  86. // clear interval
  87. // if (this.showroomInterval) {
  88. clearInterval(this.showroomInterval)
  89. this.showroomInterval = 0
  90. // }
  91. // reset indexes
  92. this.showroomI = 0
  93. this.showroomJ = 0
  94. }
  95. // in any case (re)launch the animation
  96. this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);
  97. console.log('this.showroomInterval', this.showroomInterval)
  98. this.switchShowroomCarroussel()
  99. },
  100. switchShowroomCarroussel(){
  101. // console.log('switchShowroomCarroussel i', $elmts, i)
  102. if (this.showroomMode === 1) {
  103. this.showrooms[this.showroomI].classList.add('active')
  104. this.showrooms[this.showroomI-1 < 0 ? this.showrooms.length -1 : this.showroomI-1].classList.remove('active')
  105. this.showroomI = this.showroomI+1 >= this.showrooms.length ? 0 : this.showroomI+1
  106. } else {
  107. this.showroomsOdd[this.showroomI].classList.add('active')
  108. this.showroomsOdd[this.showroomI-1 < 0 ? this.showroomsOdd.length -1 : this.showroomI-1].classList.remove('active')
  109. this.showroomI = this.showroomI+1 >= this.showroomsOdd.length ? 0 : this.showroomI+1
  110. this.showroomsEven[this.showroomJ].classList.add('active')
  111. this.showroomsEven[this.showroomJ-1 < 0 ? this.showroomsEven.length -1 : this.showroomJ-1].classList.remove('active')
  112. this.showroomJ = this.showroomJ+1 >= this.showroomsEven.length ? 0 : this.showroomJ+1
  113. }
  114. },
  115. onClickLink(e){
  116. console.log("onClickLink", e, this.$router, this.$route)
  117. let path = null;
  118. // find existing router route compared with link href
  119. for (let i = 0; i < this.$router.options.routes.length; i++) {
  120. if (this.$router.options.routes[i].path == e.originalTarget.pathname) {
  121. if (e.originalTarget.pathname !== this.$route.path) {
  122. path = e.originalTarget.pathname
  123. }
  124. break
  125. }
  126. }
  127. if (path) {
  128. this.$router.push({
  129. path: path
  130. })
  131. }
  132. },
  133. onClickFieldLabel(e){
  134. console.log("onClickFieldLabel", e, this.$router, this.$route)
  135. }
  136. },
  137. watch: {
  138. html: function(val) {
  139. console.log('html prop changed', val)
  140. this.compileTemplate()
  141. }
  142. }
  143. }
  144. </script>
  145. <style lang="scss" scoped>
  146. </style>