cardMixins.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. // https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
  2. export default {
  3. directives: {
  4. lazy: {
  5. bind (img, binding) {
  6. // console.log('lazy bind', img, binding)
  7. // show only the first image
  8. if (binding.value === 0) {
  9. img.setAttribute('src', img.getAttribute('data-src'))
  10. img.removeAttribute('data-src')
  11. img.classList.remove('lazy')
  12. }
  13. }
  14. },
  15. switcher: {
  16. inserted (el, binding) {
  17. // switch images on mousemove
  18. el.addEventListener('mousemove', function (event) {
  19. const figs = this.querySelectorAll('figure')
  20. // console.log('mousemove', this, event, figs.length)
  21. // let len = figs.length
  22. // let w = this.clientWidth;
  23. // let g = w / len;
  24. // let delta = Math.floor(event.layerX / g)
  25. const delta = Math.floor(event.layerX / (this.clientWidth / figs.length))
  26. // console.log('delta', delta)
  27. figs.forEach((fig, index) => {
  28. // console.log(index)
  29. if (index === delta) {
  30. // fig.style.display = "block"
  31. fig.classList.remove('hide')
  32. fig.classList.add('show')
  33. } else {
  34. // fig.style.display = "none"
  35. fig.classList.remove('show')
  36. fig.classList.add('hide')
  37. }
  38. })
  39. })
  40. }
  41. }
  42. },
  43. mounted () {
  44. // lazy load images on mouseover
  45. console.log('card mounted', this.$options.name)
  46. // if (this.$options.name ==! 'ModalCard') {
  47. this.$el.addEventListener('mouseover', function (event) {
  48. const imgs = this.querySelectorAll('.images figure img.lazy')
  49. // console.log('mousemove', this, imgs)
  50. imgs.forEach((img) => {
  51. // console.log('forEach img',img)
  52. img.setAttribute('src', img.getAttribute('data-src'))
  53. img.removeAttribute('data-src')
  54. img.classList.remove('lazy')
  55. })
  56. }, { once: true })
  57. // }
  58. },
  59. methods: {
  60. activateLazyLoad () {
  61. console.log('card activateLazyLoad', this.$options.name)
  62. this.$el.addEventListener('mousemove', function (event) {
  63. const imgs = this.querySelectorAll('.images figure img.lazy')
  64. // console.log('mousemove', this, imgs)
  65. imgs.forEach((img) => {
  66. // console.log('forEach img',img)
  67. img.setAttribute('src', img.getAttribute('data-src'))
  68. img.removeAttribute('data-src')
  69. img.classList.remove('lazy')
  70. })
  71. }, { once: true })
  72. }
  73. // deg2rad (deg) {
  74. // return deg * (Math.PI / 180)
  75. // },
  76. }
  77. }