blob: 28c13b6ad7616175ca3ab7ec8c59e6a920920922 [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2019 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html} from 'lit-element';
6
7import {store, connectStore} from 'reducers/base.js';
8import * as userV0 from 'reducers/userV0.js';
9import * as projectV0 from 'reducers/projectV0.js';
10import 'elements/chops/chops-toggle/chops-toggle.js';
11import {logEvent} from 'monitoring/client-logger.js';
12
13/**
14 * `<mr-pref-toggle>`
15 *
16 * Toggle button for any user pref, including code font and
17 * rendering markdown. For our purposes, pressing it causes
18 * issue description and comment text to switch either to
19 * monospace font or to render in markdown and the setting
20 * is saved in the user's preferences.
21 */
22export class MrPrefToggle extends connectStore(LitElement) {
23 /** @override */
24 render() {
25 return html`
26 <chops-toggle
27 ?checked=${this._checked}
28 ?disabled=${this._prefsInFlight}
29 @checked-change=${this._togglePref}
30 title=${this.title}
31 >${this.label}</chops-toggle>
32 `;
33 }
34
35 /** @override */
36 static get properties() {
37 return {
38 prefs: {type: Object},
39 userDisplayName: {type: String},
40 initialValue: {type: Boolean},
41 _prefsInFlight: {type: Boolean},
42 label: {type: String},
43 title: {type: String},
44 prefName: {type: String},
45 };
46 }
47
48 /** @override */
49 stateChanged(state) {
50 this.prefs = userV0.prefs(state);
51 this._prefsInFlight = userV0.requests(state).fetchPrefs.requesting ||
52 userV0.requests(state).setPrefs.requesting;
53 this._projectName = projectV0.viewedProjectName(state);
54 }
55
56 /** @override */
57 constructor() {
58 super();
59 this.initialValue = false;
60 this.userDisplayName = '';
61 this.label = '';
62 this.title = '';
63 this.prefName = '';
64 this._projectName = '';
65 }
66
67 // Used by the legacy EZT page to interact with Redux.
68 fetchPrefs() {
69 store.dispatch(userV0.fetchPrefs());
70 }
71
72 get _checked() {
73 const {prefs, initialValue} = this;
74 if (prefs && prefs.has(this.prefName)) return prefs.get(this.prefName);
75 return initialValue;
76 }
77
78 /**
79 * Toggles the code font in response to the user activating the button.
80 * @param {Event} e
81 * @fires CustomEvent#font-toggle
82 * @private
83 */
84 _togglePref(e) {
85 const checked = e.detail.checked;
86 this.dispatchEvent(new CustomEvent('font-toggle', {detail: {checked}}));
87
88 const newPrefs = [{name: this.prefName, value: '' + checked}];
89 store.dispatch(userV0.setPrefs(newPrefs, !!this.userDisplayName));
90
91 logEvent('mr-pref-toggle', `${this.prefName}: ${checked}`, this._projectName);
92 }
93}
94customElements.define('mr-pref-toggle', MrPrefToggle);