Home.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <script>
  2. import Vue from 'vue'
  3. export default {
  4. props: ['html'], // 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');
  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. setTimeout(this.initShowroomCarroussel.bind(this), 250)
  42. },
  43. initShowroomCarroussel(){
  44. console.log("startShowroomCarroussel");
  45. this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
  46. console.log('showrooms', this.showrooms);
  47. for (var i = 0; i < this.showrooms.length; i++) {
  48. if (i%2 === 0) {
  49. this.showroomsOdd.push(this.showrooms[i])
  50. }else{
  51. this.showroomsEven.push(this.showrooms[i])
  52. }
  53. }
  54. console.log('Odd', this.showroomsOdd);
  55. console.log('Even', this.showroomsEven);
  56. // TODO: share media query and variables between scss and js
  57. let column_width= 205
  58. let column_goutiere= 13
  59. let bp = (column_width + column_goutiere )*7 +1
  60. const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`)
  61. // Register event listener
  62. mediaQuery.addListener(this.checkShowroomMode)
  63. this.checkShowroomMode(mediaQuery)
  64. // this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
  65. // console.log('this.showroomInterval', this.showroomInterval);
  66. // this.switchShowroomCarroussel()
  67. },
  68. checkShowroomMode(mq){
  69. // default mode 1
  70. let newmode = 1
  71. if (mq.matches) {
  72. // if mediaquery match switch to mode 2
  73. newmode = 2
  74. }
  75. if(newmode !== this.showroomMode) {
  76. // if new mode different from old mode
  77. // reset sowrooms classes
  78. for (var i = 0; i < this.showrooms.length; i++) {
  79. this.showrooms[i].classList.remove('active')
  80. }
  81. // record new mode
  82. this.showroomMode = newmode
  83. // clear interval
  84. // if (this.showroomInterval) {
  85. clearInterval(this.showroomInterval)
  86. this.showroomInterval = 0
  87. // }
  88. // reset indexes
  89. this.showroomI = 0
  90. this.showroomJ = 0
  91. }
  92. // in any case (re)launch the animation
  93. this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);
  94. console.log('this.showroomInterval', this.showroomInterval);
  95. this.switchShowroomCarroussel()
  96. },
  97. switchShowroomCarroussel(){
  98. // console.log('switchShowroomCarroussel i', $elmts, i);
  99. if (this.showroomMode === 1) {
  100. this.showrooms[this.showroomI].classList.add('active')
  101. this.showrooms[this.showroomI-1 < 0 ? this.showrooms.length -1 : this.showroomI-1].classList.remove('active')
  102. this.showroomI = this.showroomI+1 >= this.showrooms.length ? 0 : this.showroomI+1
  103. }else{
  104. this.showroomsOdd[this.showroomI].classList.add('active')
  105. this.showroomsOdd[this.showroomI-1 < 0 ? this.showroomsOdd.length -1 : this.showroomI-1].classList.remove('active')
  106. this.showroomI = this.showroomI+1 >= this.showroomsOdd.length ? 0 : this.showroomI+1
  107. this.showroomsEven[this.showroomJ].classList.add('active')
  108. this.showroomsEven[this.showroomJ-1 < 0 ? this.showroomsEven.length -1 : this.showroomJ-1].classList.remove('active')
  109. this.showroomJ = this.showroomJ+1 >= this.showroomsEven.length ? 0 : this.showroomJ+1
  110. }
  111. },
  112. onClickLink(e){
  113. console.log("onClickLink", e, this.$router, this.$route);
  114. let path = null;
  115. // find existing router route compared with link href
  116. for (var i = 0; i < this.$router.options.routes.length; i++) {
  117. if (this.$router.options.routes[i].path == e.originalTarget.pathname) {
  118. if (e.originalTarget.pathname !== this.$route.path) {
  119. path = e.originalTarget.pathname
  120. }
  121. break;
  122. }
  123. }
  124. if (path) {
  125. this.$router.push({
  126. path: path
  127. })
  128. }
  129. },
  130. onClickFieldLabel(e){
  131. console.log("onClickFieldLabel", e, this.$router, this.$route);
  132. }
  133. },
  134. watch: {
  135. html: function(val) {
  136. console.log('html prop changed', val)
  137. this.compileTemplate()
  138. }
  139. }
  140. }
  141. </script>
  142. <style lang="scss" scoped>
  143. </style>