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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import React from "react";
import { connect } from "react-redux";
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
export class _WallpapersSection extends React.PureComponent {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleReset = this.handleReset.bind(this);
this.prefersHighContrastQuery = null;
this.prefersDarkQuery = null;
}
componentDidMount() {
this.prefersDarkQuery = globalThis.matchMedia(
"(prefers-color-scheme: dark)"
);
}
handleChange(event) {
const { id } = event.target;
const prefs = this.props.Prefs.values;
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
this.handleUserEvent({
selected_wallpaper: id,
hadPreviousWallpaper: !!this.props.activeWallpaper,
});
// bug 1892095
if (
prefs["newtabWallpapers.wallpaper-dark"] === "" &&
colorMode === "light"
) {
this.props.setPref(
"newtabWallpapers.wallpaper-dark",
id.replace("light", "dark")
);
}
if (
prefs["newtabWallpapers.wallpaper-light"] === "" &&
colorMode === "dark"
) {
this.props.setPref(
`newtabWallpapers.wallpaper-light`,
id.replace("dark", "light")
);
}
}
handleReset() {
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
this.handleUserEvent({
selected_wallpaper: "none",
hadPreviousWallpaper: !!this.props.activeWallpaper,
});
}
// Record user interaction when changing wallpaper and reseting wallpaper to default
handleUserEvent(data) {
this.props.dispatch(
ac.OnlyToMain({
type: at.WALLPAPER_CLICK,
data,
})
);
}
render() {
const { wallpaperList } = this.props.Wallpapers;
const { activeWallpaper } = this.props;
return (
<div>
<fieldset className="wallpaper-list">
{wallpaperList.map(({ title, theme, fluent_id }) => {
return (
<>
<input
onChange={this.handleChange}
type="radio"
name={`wallpaper-${title}`}
id={title}
value={title}
checked={title === activeWallpaper}
aria-checked={title === activeWallpaper}
className={`wallpaper-input theme-${theme} ${title}`}
/>
<label
htmlFor={title}
className="sr-only"
data-l10n-id={fluent_id}
>
{fluent_id}
</label>
</>
);
})}
</fieldset>
<button
className="wallpapers-reset"
onClick={this.handleReset}
data-l10n-id="newtab-wallpaper-reset"
/>
</div>
);
}
}
export const WallpapersSection = connect(state => {
return {
Wallpapers: state.Wallpapers,
Prefs: state.Prefs,
};
})(_WallpapersSection);
|
