https://reader.exacteditions.com/assets/reader/lib/PageFlow/PageStack-7d65f78b.js

1import Tag from 'reader/helpers/Tag';
2import CloudFront from 'reader/lib/CloudFront';
3import CustomElement from 'reader/lib/CustomElement';
4import { pagestack as stylesheet } from 'reader/lib/PageFlow/Stylesheet';
5
6export default class PageStack extends CustomElement {
7  get issue() {
8    return super._jsonParse(document.querySelector('page-flow').getAttribute('issue'));
9  }
10
11  policy(type) {
12    return this.issue.cloudfrontPolicies[type];
13  }
14
15  connected() {
16    this.attachListeners();
17    this.updateStyles();
18  }
19
20  directionChanged(oldValue, newValue) {
21    const setClassNames = () => {
22      super._fromShadow('.pageStack-inner').classList.remove(oldValue);
23      super._fromShadow('.pageStack-inner').classList.add(newValue);
24    };
25
26    const animate = ([first, second], direction, duration = 250) => {
27      const className = `animate-${direction}`;
28      first.classList.add(`${className}-firstHalf`);
29
30      // The image is not visible in the dom. It is at a 90 degree angle.
31      // let's sneakily change the image, and add another animation class
32      // to finish the animation off.
33      window.setTimeout(() => {
34        setClassNames();
35        first.classList.remove(`${className}-firstHalf`);
36        second.classList.add(`${className}-secondHalf`);
37      }, duration / 2);
38
39      window.setTimeout((() => {
40        second.classList.remove(`${className}-secondHalf`);
41      }), duration);
42    };
43
44    const container = super._fromShadow('.pageStack-inner');
45
46    if (oldValue === 'right' && newValue === 'left') {
47      const first = container.querySelector('.first');
48      const second = container.querySelector('.last');
49
50      animate([first, second], 'rtl');
51    } else if (oldValue === 'left' && newValue === 'right') {
52      const first = container.querySelector('.last');
53      const second = container.querySelector('.first');
54
55      animate([first, second], 'ltr');
56    } else /* This path is to set the nitial state.  */ {
57      setClassNames();
58    }
59
60    if (newValue === 'right') {
61      super._fromShadow('.first').style.zIndex = 5000 - this.key;
62    }
63  }
64
65  styles() { return Tag.style`${stylesheet}`; }
66
67  template() {

68    let className = '';
69    if (!this.pages.length) className = 'nullPage';
70
71    return Tag.template`
72      <div class="pageStack-inner ${className} ${this.direction}">
73        ${this.img(this.pages[0], 'first')}
74        ${this.img(this.pages[1], 'last')}
75      </div>
76    `;
77  }
78
79  img(page, className) {
80    if (!page) {
81      return `<div class="pageStack-image ${className}"></div>`;
82    }
83
84    let webpSrc = '';
85
86    if (this.issue.webp) {
87      webpSrc = `
88        <source srcset=${CloudFront.constructImageUrl(this.issue, page, 1, this.policy('webp'), 'webp')} type="image/webp" />
89      `;
90    }
91
92    return (`
93      <div class="pageStack-image ${className}">
94        <picture>
95          ${webpSrc}
96          <source srcset=${CloudFront.constructImageUrl(this.issue, page, 1, this.policy('jpeg'))} type="image/jpeg" />
97          <img draggable="false" loading="lazy" alt="" src="${CloudFront.constructImageUrl(this.issue, page, 1, this.policy('jpeg'))}" />
98        </picture>
99      </div>
100    `);
101  }
102
103  attachListeners() {
104    super._fromShadow('.first').addEventListener('click', this.onClick.bind(this, this.pages[0]));
105
106    const elem = super._fromShadow('.last');
107
108    if (elem) {
109      elem.addEventListener('click', this.onClick.bind(this, this.pages[1]));
110    }
111  }
112
113  onClick(page) {
114    document.dispatchEvent(
115      new CustomEvent('routeTo', { detail: page }),
116    );
117
118    const pageFlowBtn = document.querySelector('#btnPageFlow');
119
120    if (pageFlowBtn.getAttribute('open') === 'true') {
121      pageFlowBtn.removeAttribute('open');
122      document.querySelector('page-flow').remove();
123    }
124  }
125
126  updateStyles() {
127    super._fromShadow('style').textContent = stylesheet;
128  }
129}
130
131PageStack.properties = ['direction', 'int:key', 'json:pages'];