-
Notifications
You must be signed in to change notification settings - Fork 6.6k
/
top_visit.ts
149 lines (124 loc) · 4.42 KB
/
top_visit.ts
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
// Copyright 2021 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import './search_query.js';
import './shared_style.js';
import './url_visit.js';
import 'chrome://resources/cr_elements/cr_icons_css.m.js';
import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {URLVisit} from './history_clusters.mojom-webui.js';
/**
* @fileoverview This file provides a custom element displaying a top visit
* within a Cluster. A top visit is a featured, i.e., visible, visit with an
* optional set of related visits which are not visible by default.
*/
declare global {
interface HTMLElementTagNameMap {
'top-visit': TopVisitElement;
}
}
class TopVisitElement extends PolymerElement {
static get is() {
return 'top-visit';
}
static get template() {
return html`{__html_template__}`;
}
static get properties() {
return {
/**
* The top visit to display
*/
visit: Object,
/**
* Whether the related visits of the top visit are expanded/visible.
*/
expanded_: {
type: Boolean,
reflectToAttribute: true,
value: false,
},
/**
* Related visits that are initially hidden.
*/
hiddenRelatedVisits_: {
type: Object,
computed: `computeHiddenRelatedVisits_(visit.*)`,
},
toggleButtonLabel_: {
type: String,
computed: `computeToggleButtonLabel_(expanded_)`,
},
/**
* Related visits that are always visible.
*/
visibleRelatedVisits_: {
type: Object,
computed: `computeVisibleRelatedVisits_(visit.*)`,
},
};
}
//============================================================================
// Properties
//============================================================================
visit: URLVisit = new URLVisit();
private expanded_: boolean = false;
private hiddenRelatedVisits_: Array<URLVisit> = [];
private toggleButtonLabel_: string = '';
private visibleRelatedVisits_: Array<URLVisit> = [];
//============================================================================
// Event handlers
//============================================================================
private onToggleButtonKeyDown_(e: KeyboardEvent) {
if (e.key !== 'Enter' && e.key !== ' ') {
return;
}
e.stopPropagation();
e.preventDefault();
this.onToggleButtonClick_();
}
private onToggleButtonClick_() {
this.expanded_ = !this.expanded_;
// Dispatch an event to notify the parent elements of a resize. Note that
// this simple solution only works because the child iron-collapse has
// animations disabled. Otherwise, it gets an incorrect mid-animation size.
this.dispatchEvent(new CustomEvent('iron-resize', {
bubbles: true,
composed: true,
}));
}
//============================================================================
// Helper methods
//============================================================================
private computeHiddenRelatedVisits_(): Array<URLVisit> {
return this.visit && this.visit.relatedVisits ?
this.visit.relatedVisits.filter((visit: URLVisit) => {
// 'Ghost' visits with scores of 0 (or below) are never to be shown,
// unless the debug flag is switched on.
if (visit.score <= 0 && !loadTimeData.getBoolean('isDebug')) {
return false;
}
return visit.belowTheFold;
}) :
[];
}
private computeToggleButtonLabel_(): string {
return loadTimeData.getString(
this.expanded_ ? 'toggleButtonLabelLess' : 'toggleButtonLabelMore');
}
private computeVisibleRelatedVisits_(): Array<URLVisit> {
return this.visit && this.visit.relatedVisits ?
this.visit.relatedVisits.filter((visit: URLVisit) => {
// 'Ghost' visits with scores of 0 (or below) are never to be shown,
// unless the debug flag is switched on.
if (visit.score <= 0 && !loadTimeData.getBoolean('isDebug')) {
return false;
}
return !visit.belowTheFold;
}) :
[];
}
}
customElements.define(TopVisitElement.is, TopVisitElement);