https://an0ncer.github.io/javascript/pages/list/mod_html.js

1const HtmlItemCollection = ({ count = 0, bgs = [], title, id } = {}) => {
2    return `<div class="item-collection" data-id="${id}">
3                ${getbgcollection(bgs, count)}
4                <div class="info-collection">
5                    <span class="collection-name">${title}</span>
6                    <span class="collection-counts">${count} Аниме</span>
7                </div>
8            </div>`;
9
10    function getbgcollection(bg = [], count = 0) {
11        let block1 = bg.length > 0 ? bg[0] : '';
12        let previews = '';
13
14        for (let i = 1; i < 4; i++) {
15            if (bg[i]) {
16                previews += `<div class="preview" style="--bg-image: url(${bg[i]})"></div>`;
17            }
18        }
19
20        return `<div class="bg-collection count-${count}">
21                    <div class="block-1" style="--bg-image: url(${block1})"></div>
22                        <div class="block-2">
23                            ${previews}
24                        </div>
25                </div>`;
26    }
27}
28
29const HtmlItemLoadCollection = ({ title, id, count } = {}) => {
30    return `<div class="item-collection" data-id="${id}">
31                ${getbgcollection(count)}
32                <div class="info-collection">
33                    <span class="collection-name">${title}</span>
34                    <span class="collection-counts">${count} Аниме</span>
35                </div>
36            </div>`;
37
38    function getbgcollection(count = 0) {
39        let previews = '';
40
41        for (let i = 0; i < count && i < 3; i++) {
42            previews += `<div class="preview loading"></div>`;
43        }
44
45        return `<div class="bg-collection count-${count}">
46                    <div class="block-1 loading"></div>
47                    <div class="block-2">
48                        ${previews}
49                    </div>
50                </div>`;
51    }
52}
53
54class HtmlNotFoundCollection {
55    #classes = ['item-collection', 'not-found'];
56    constructor() {
57        this.image = '/images/collections.png';
58        this.name = 'Не найдено';
59    }
60
61    get dom() {
62        return `.${this.#classes.join('.')}`;
63    }
64
65    Get() {
66        return `<div class="${this.#classes.join(' ')}">
67                    <div class="bg-collection count-1">
68                        <div class="block-1" style="--bg-image: url(${this.image})"></div>
69                    </div>
70                    <div class="info-collection">
71                        <span class="collection-name">${this.name}</span>
72                    </div>
73                </div>`
74    }
75
76    Show(path) {
77        let element = $(`${path} > ${this.dom}`)
78        if (element.length > 0) {
79            element.show();
80        } else {
81            $(path).append(this.Get());
82        }
83    }
84
85    Hide(path) {
86        let element = $(`${path} > ${this.dom}`)
87        if (element.length > 0) {
88            element.hide();
89        }
90    }
91}
92
93export const HCollection = {
94    Iteam: HtmlItemCollection,
95    Load: HtmlItemLoadCollection,
96    NotFound: new HtmlNotFoundCollection()
97}
98
99export class ISearch {
100    constructor() {
101        this.dom = $('#active-icon');
102        this.#SetStatus('default');
103    }
104
105    Search() {
106        this.#SetStatus('load');
107    }
108
109    Result(count = 0) {
110        $('#active-icon > .wrapper > .num').text(count);
111        this.#SetStatus('result');
112    }
113
114    Empty() {
115        $('#active-icon > .wrapper > .num').text('Очистить');
116        this.#SetStatus('empty');
117    }
118
119    Clear() {
120        this.#SetStatus('default');
121    }
122
123    #SetStatus(status) {
124        this.status = status;
125        this.dom.attr('data-status', this.status);
126    }
127}