https://www.ragusaoggi.it/wp-content/themes/ragusaoggi-2021/js/paywall/Views/Paywall.js

1import Container from "./Container.js";
2import Overlay from "./Overlay.js";
3import Text from "./Text.js";
4import CallToActionContainer from "./CallToActionContainer.js";
5import CallToActionLink from "./CallToActionLink.js";
6
7export default class Paywall {
8
9    constructor(PAYWALL_DATA) {
10        this.elements = {};
11        this.data = {};
12
13        this.data.text = PAYWALL_DATA.text;
14        this.data.actions = PAYWALL_DATA.actions;
15		this.data.top_actions = PAYWALL_DATA.top_actions;
16
17        /**
18         * Creating Paywall Elements
19         */
20        this.elements.root = Paywall.createRoot();
21        this.elements.overlay = Overlay.createRoot();
22        this.elements.container = Container.createRoot();
23		this.elements.callToActionTopContainer = CallToActionContainer.createRoot('paywall-cta-top-container'); 
24        this.elements.callToActionContainer = CallToActionContainer.createRoot('');
25        this.elements.text = new Text(this.data.text).elements.root;
26        this.elements.cta = {};
27
28        /**
29         * Append created elements
30         */
31        for ( const action of this.data.top_actions ) {
32            this.elements.callToActionTopContainer.append(new CallToActionLink(action).elements.root);
33        }
34        
35        this.elements.container.append(this.elements.callToActionTopContainer);
36
37        this.elements.container.append(this.elements.text);
38        for ( const action of this.data.actions ) {
39            this.elements.callToActionContainer.append(new CallToActionLink(action).elements.root);
40        }
41        
42        this.elements.container.append(this.elements.callToActionContainer);
43        
44        this.elements.overlay.append(this.elements.container);
45        this.elements.root.append(this.elements.overlay);
46        
47        /**
48         * Add to body
49         */
50        document.body.append(this.elements.root);
51    }
52
53
54    static createRoot() {
55        const range = document.createRange();
56        range.selectNode(document.body);
57        return range.createContextualFragment(`
58            <div class="paywall__noconsent">
59            </div>
60        `).children[0];
61    }
62}