https://pgventuresstudio.com/js/scroll-accumulator-a.js

1import { extend_custom_element } from '/js/cwi.js';
2
3export default class SCROLL_ACCUMULATOR_A extends extend_custom_element(HTMLElement) {
4    constructor() {
5        super();
6        this._fill = 0;
7    }
8
9    get styles() {
10        return `
11        scroll-accumulator-a{
12            display:block;
13        }
14        `;
15    }
16
17    static get observedAttributes() {
18        return ["capacity", "orientation", "trigger"];
19    }
20
21    attributeChangedCallback(name, oldValue, newValue) {
22        switch (name) {
23            case "capacity":
24                //TODO: Validation
25                break;
26            case "trigger":
27                if (newValue != "centered" && newValue != "top_aligned") {
28                    console.error(`${newValue} is not a valid value.`)
29                }
30                break;
31            case "orientation":
32                if (this.orientation != "horizontal" && this.orientation != "vertical") {
33                    console.error(`${newValue} is not a valid value.`);
34                }
35                break;
36        }
37        this.request_render();
38    }
39
40    render() {
41        this.appendChild(this.original_contents);
42    }
43
44    get orientation() {
45        return this.getAttribute("orientation") == "horizontal" ? "horizontal" : "vertical";
46    }
47
48    get trigger() {
49        switch (this.getAttribute("trigger")) {
50            case "top_aligned":
51                return "top_aligned";
52            default:
53                return "centered";
54        }
55    }
56
57    get capacity() {
58        let attr = this.getAttribute("capacity");
59        if (attr) {
60            var reg_match = attr.match(/^(\d*\.?\d*)(vh|vw|%|px)$/);
61            if (reg_match.length < 3) {
62                return 0;
63            }
64            let numeric_match = reg_match[1];
65            let unit = reg_match[2];
66
67            let numeric;
68            if (isNaN(parseFloat(numeric_match))) {
69                return 0;
70            } else {
71                numeric = parseFloat(numeric_match);
72            }
73
74            switch (unit) {
75                case "px":
76                    return numeric;
77                case "vh":
78                    return numeric * window.innerHeight / 100;
79                case "vw":
80                    return numeric * window.innerWidth / 100;
81                case "%":
82                    if (orientation == "vertical") {
83                        return numeric * this.parentElement.clientHeight / 100;
84                    } else {
85                        return numeric * this.parentElement.clientWidth / 100;
86                    }
87                default:
88                    console.error("Only supported units are px, vh, vw, and %.");
89                    return 0;
90            }
91        } else {
92            return 0;
93        }
94    }
95
96    set fill(value) {
97        const requested_fill = Math.max(0, Math.min(this.capacity, value));
98        if (this._fill != requested_fill) {
99            const event = new CustomEvent("scroll_fill_change", {
100                detail: {
101                    current: this._fill,
102                    requested: requested_fill
103                },
104                cancelable: false,
105                bubbles: true
106            });
107            this.dispatchEvent(event);
108
109            this._fill = requested_fill;
110            if (value >= this.capacity) {
111                this.setAttribute("full", "");
112            } else {
113                this.removeAttribute("full");
114            }
115
116            if (value <= 0) {
117                this.setAttribute("empty", "");
118            } else {
119                this.removeAttribute("empty");
120            }
121        }
122    }
123
124    get fill() {
125        return this._fill;
126    }
127
128    get fill_percent() {
129        return this._fill / this.capacity;
130    }
131
132    get empty() {
133        return this.fill == false;
134    }
135
136    get full() {
137        return this.fill >= this.capacity;
138    }
139}
140
141customElements.define('scroll-accumulator-a', SCROLL_ACCUMULATOR_A);