1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
'use strict';
class PresetTitlePanel
{
constructor(parentDiv, preset, clickable, onLoadedCallback, favoritePresets)
{
PresetTitlePanel.s_panelCounter ++;
this._parentDiv = parentDiv;
this._onLoadedCallback = onLoadedCallback;
this._domId = `preset_title_panel_${PresetTitlePanel.s_panelCounter}`;
this._preset = preset;
this._clickable = clickable;
this._favoritePresets = favoritePresets;
this._parentDiv.append(`<div class="${this._domId}"></div>`);
this._domWrapperDiv = $(`.${this._domId}`);
this._domWrapperDiv.toggle(false);
this._starJustClicked = false;
this._mouseOnStar = false;
this._mouseOnPanel = false;
this._clickable = clickable;
if (clickable) {
this._domWrapperDiv.addClass("preset_title_panel_border");
// setting up hover effect here, because if setup in SCC it stops working after background animation like - this._domWrapperDiv.animate({ backgroundColor....
}
}
_updateHoverEffects() {
let starMouseHover = false;
if (this._clickable && this._mouseOnPanel && !this._mouseOnStar) {
this._domWrapperDiv.css({"background-color": "var(--subtleAccent)"});
} else {
this._domWrapperDiv.css({"background-color": "var(--boxBackground)"});
}
if (this._mouseOnStar || (this._mouseOnPanel && this._clickable)) {
this._domStar.css({"background-color": "var(--subtleAccent)"});
starMouseHover = true;
} else {
this._domWrapperDiv.css({"background-color": "var(--boxBackground)"});
this._domStar.css({"background-color": "var(--boxBackground)"});
}
if (this._preset.lastPickDate) {
this._domStar.css("background-image", "url('../../../images/icons/star_orange.svg')");
} else if (starMouseHover) {
this._domStar.css("background-image", "url('../../../images/icons/star_orange_stroke.svg')");
} else {
this._domStar.css("background-image", "url('../../../images/icons/star_transparent.svg')");
}
}
load() {
this._domWrapperDiv.load("./tabs/presets/TitlePanel/PresetTitlePanelBody.html", () => this._setupHtml());
}
subscribeClick(presetsDetailedDialog, presetsRepo)
{
this._domWrapperDiv.on("click", () => {
if (!this._starJustClicked) {
this._showPresetsDetailedDialog(presetsDetailedDialog, presetsRepo);
}
this._starJustClicked = false;
});
}
_showPresetsDetailedDialog(presetsDetailedDialog, presetsRepo) {
presetsDetailedDialog.open(this._preset, presetsRepo).then(isPresetPicked => {
if (isPresetPicked) {
const color = this._domWrapperDiv.css( "background-color" );
this._domWrapperDiv.css('background-color', 'green');
this._domWrapperDiv.animate({ backgroundColor: color }, 2000);
this.setPicked(true);
}
this._updateHoverEffects();
});
}
setPicked(isPicked) {
if (!this._clickable) {
return;
}
this._preset.isPicked = isPicked;
if (isPicked) {
this._domWrapperDiv.css({"border": "2px solid green"});
} else {
this._domWrapperDiv.css({"border": "1px solid var(--subtleAccent)"});
}
}
_setupHtml()
{
this._readDom();
this._domCategory.text(this._preset.category);
this._domTitle.text(this._preset.title);
this._domTitle.prop("title", this._preset.title);
this._domAuthor.text(this._preset.author);
this._domVersions.text(this._preset.firmware_version?.join("; "));
this._domKeywords.text(this._preset.keywords?.join("; "));
this._domKeywords.prop("title", this._preset.keywords?.join("; "));
this._domStatusOfficial.toggle(this._preset.status === "OFFICIAL");
this._domStatusCommunity.toggle(this._preset.status === "COMMUNITY");
this._domStatusExperimental.toggle(this._preset.status === "EXPERIMENTAL");
this.setPicked(this._preset.isPicked);
this._setupStar();
this._domWrapperDiv.on("mouseenter", () => { this._mouseOnPanel = true; this._updateHoverEffects(); });
this._domWrapperDiv.on("mouseleave", () => { this._mouseOnPanel = false; this._updateHoverEffects(); } );
this._domStar.on("mouseenter", () => { this._mouseOnStar = true; this._updateHoverEffects(); });
this._domStar.on("mouseleave", () => { this._mouseOnStar = false; this._updateHoverEffects(); });
i18n.localizePage();
this._domWrapperDiv.toggle(true);
this._onLoadedCallback?.();
}
_readDom()
{
this._domTitle = this._domWrapperDiv.find('.preset_title_panel_title');
this._domStar = this._domWrapperDiv.find('.preset_title_panel_star');
this._domCategory = this._domWrapperDiv.find('.preset_title_panel_category');
this._domAuthor = this._domWrapperDiv.find('.preset_title_panel_author_text');
this._domKeywords = this._domWrapperDiv.find('.preset_title_panel_keywords_text');
this._domVersions = this._domWrapperDiv.find('.preset_title_panel_versions_text');
this._domStatusOfficial = this._domWrapperDiv.find('.preset_title_panel_status_official');
this._domStatusCommunity = this._domWrapperDiv.find('.preset_title_panel_status_community');
this._domStatusExperimental = this._domWrapperDiv.find('.preset_title_panel_status_experimental');
}
_setupStar() {
this._updateHoverEffects();
this._domStar.on("click", () => {
this._starJustClicked = true;
this._processStarClick();
});
}
_processStarClick() {
if (this._preset.lastPickDate) {
this._favoritePresets.delete(this._preset);
} else {
this._favoritePresets.add(this._preset);
}
this._favoritePresets.saveToStorage();
this._updateHoverEffects();
}
remove()
{
this._domWrapperDiv.remove();
}
}
PresetTitlePanel.s_panelCounter = 0;
|
