| 2 | |
| 3 | export class Preview { |
| 4 | constructor(el) { |
| 5 | // DOM elements |
| 6 | this.DOM = {el: el}; |
| 7 | // back to grid button |
| 8 | this.DOM.backCtrl = this.DOM.el.querySelector('.preview__item-back'); |
| 9 | // image elements (outer and inner) |
| 10 | this.DOM.imgWrap = this.DOM.el.querySelector('.preview__item-imgwrap'); |
| 11 | this.DOM.image = this.DOM.imgWrap.querySelector('.preview__item-img'); |
| 12 | // title |
| 13 | this.DOM.title = this.DOM.el.querySelector('.preview__item-title'); |
| 14 | // Splitting will run on the title element |
| 15 | // get the chars |
| 16 | this.DOM.titleChars = [...this.DOM.title.querySelectorAll('.char')]; |
| 17 | // content |
| 18 | this.DOM.content = this.DOM.el.querySelector('.preview__item-content'); |
| 19 | |
| 20 | // initial styles |
| 21 | this.init(); |
| 22 | } |
| 23 | // let's set the initial styles |
| 24 | // all elements inside the preview will be hidden so we can animate them in after clicking on a grid item |
| 25 | init() { |