add year selector in popup search (#1411)
This commit is contained in:
tophf
GitHub
parent
9d3fa1c5f9
commit
5379f62c90
|
|
@ -1434,7 +1434,7 @@
|
|||
"description": "Text for label that shows the number of times a search result was installed during last week"
|
||||
},
|
||||
"searchStyleQueryHint": {
|
||||
"message": "Search style names case-insensitively:\nsome words - all words in any order\n\"some phrase\" - this exact phrase without quotes\n2020 - a year like this also shows styles updated in 2020",
|
||||
"message": "Search style names (case-sensitively if an uppercase letter is used):\nsome words - all these words in any order\n\"some phrase\" - this exact phrase without quotes\n/foo.*bar/i - regular expression without spaces (use \\s instead)",
|
||||
"description": "Tooltip shown for the text input in the popup's inline style finder"
|
||||
},
|
||||
"searchStylesAll": {
|
||||
|
|
|
|||
|
|
@ -624,11 +624,11 @@ a:hover .svg-icon {
|
|||
fill: transparent;
|
||||
stroke: currentColor;
|
||||
}
|
||||
html:not(.styles-last) #popup-options .split-btn-menu {
|
||||
html:not(.styles-last):not(.search-results-shown) #popup-options .split-btn-menu {
|
||||
bottom: 0;
|
||||
transform: translateY(-20px); /* global button style: 13(font) * 1.2(line) + 4(pad) + 2(border) */
|
||||
}
|
||||
html:not(.styles-last) .split-btn-pedal::after {
|
||||
html:not(.styles-last):not(.search-results-shown) .split-btn-pedal::after {
|
||||
border-top: var(--side) solid transparent;
|
||||
border-bottom: calc(var(--side) * 1.3) solid currentColor;
|
||||
vertical-align: top;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
This file is loaded dynamically when the inline search is invoked.
|
||||
So don't put main popup's stuff here. */
|
||||
|
||||
body.search-results-shown {
|
||||
.search-results-shown body {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -288,35 +288,39 @@ search-result-meta [data-type="rating"][data-class="none"] dd {
|
|||
flex-direction: row;
|
||||
text-align: center;
|
||||
word-break: keep-all;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.search-results-nav[data-type="top"] {
|
||||
padding-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.search-results-nav[data-type="bottom"] {
|
||||
margin-top: -1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.search-results-nav label {
|
||||
vertical-align: middle;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.search-results-nav [data-type="page"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
#search-results .search-results-nav button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 1rem;
|
||||
padding: 0 .5rem;
|
||||
margin: 0 .5rem;
|
||||
font-size: 150%;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#search-results .search-results-nav button:disabled {
|
||||
cursor: auto;
|
||||
opacity: .25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#search-results .search-results-nav button:not(:disabled):hover {
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
|
@ -338,3 +342,8 @@ search-result-meta [data-type="rating"][data-class="none"] dd {
|
|||
margin-right: .5em;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
#search-years {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,17 @@
|
|||
<div id="search-results" hidden>
|
||||
<div class="search-results-nav" data-type="top"></div>
|
||||
<div id="search-params">
|
||||
<div id="search-years">
|
||||
<div class="select-resizer">
|
||||
<select></select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
-
|
||||
<div class="select-resizer">
|
||||
<select></select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<input id="search-query" type="search" i18n="placeholder:search, title:searchStyleQueryHint">
|
||||
<div class="select-resizer">
|
||||
<select id="search-order" i18n="title:sortStylesHelpTitle">
|
||||
|
|
@ -31,6 +42,7 @@
|
|||
<span data-type="page" i18n="title:paginationCurrent">-</span>
|
||||
/
|
||||
<span data-type="total" i18n="title:paginationEstimated">-</span>
|
||||
(<span data-type="num"></span>)
|
||||
</label>
|
||||
<button data-type="next" i18n="title:paginationNext" disabled>►</button>
|
||||
</div>
|
||||
|
|
|
|||
121
popup/search.js
121
popup/search.js
|
|
@ -2,7 +2,7 @@
|
|||
/* global $entry tabURL */// popup.js
|
||||
/* global API */// msg.js
|
||||
/* global Events */
|
||||
/* global FIREFOX URLS debounce download tryURL */// toolbox.js
|
||||
/* global FIREFOX URLS debounce download stringAsRegExp tryRegExp tryURL */// toolbox.js
|
||||
/* global prefs */
|
||||
/* global t */// localization.js
|
||||
'use strict';
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
title: URLS.usw,
|
||||
});
|
||||
const STYLUS_CATEGORY = 'chrome-extension';
|
||||
const PAGE_LENGTH = 10;
|
||||
const PAGE_LENGTH = 100;
|
||||
// update USO style install counter if the style isn't uninstalled immediately
|
||||
const PINGBACK_DELAY = 5e3;
|
||||
const BUSY_DELAY = .5e3;
|
||||
|
|
@ -38,17 +38,20 @@
|
|||
* @prop {string} an - authorName
|
||||
* @prop {string} sn - screenshotName
|
||||
* @prop {boolean} sa - screenshotArchived
|
||||
* --------------------- Stylus' internally added extras
|
||||
* @prop {boolean} installed
|
||||
* @prop {number} installedStyleId
|
||||
*
|
||||
* @prop {boolean} _installed
|
||||
* @prop {number} _installedStyleId
|
||||
* @prop {number} _year
|
||||
*/
|
||||
/** @type IndexEntry[] */
|
||||
let results;
|
||||
let results, resultsAllYears;
|
||||
/** @type IndexEntry[] */
|
||||
let index;
|
||||
let category = '';
|
||||
/** @type RegExp */
|
||||
let rxCategory;
|
||||
let searchGlobals = $('#search-globals').checked;
|
||||
/** @type string[] */
|
||||
/** @type {RegExp[]} */
|
||||
let query = [];
|
||||
let order = prefs.get('popup.findSort');
|
||||
let scrollToFirstResult = true;
|
||||
|
|
@ -97,17 +100,24 @@
|
|||
};
|
||||
$('#search-query').oninput = function () {
|
||||
query = [];
|
||||
const text = this.value.trim().toLocaleLowerCase();
|
||||
const thisYear = new Date().getFullYear();
|
||||
for (let re = /"(.+?)"|(\S+)/g, m; (m = re.exec(text));) {
|
||||
const n = Number(m[2]);
|
||||
query.push(n >= 2000 && n <= thisYear ? n : m[1] || m[2]);
|
||||
const text = this.value.trim();
|
||||
for (let re = /(")(.+?)"|((\/)?(\S+?)(\/\w*)?)(?=\s|$)/g, m; (m = re.exec(text));) {
|
||||
const [
|
||||
all,
|
||||
q, qt,
|
||||
t, rx1 = '', rx, rx2 = '',
|
||||
] = m;
|
||||
query.push(rx1 && rx2 && tryRegExp(rx, rx2.slice(1)) ||
|
||||
stringAsRegExp(q ? qt : t, all === all.toLocaleLowerCase() ? 'i' : ''));
|
||||
}
|
||||
if (category === STYLUS_CATEGORY && !query.includes('stylus')) {
|
||||
query.push('stylus');
|
||||
if (category === STYLUS_CATEGORY) {
|
||||
query.push(/\bStylus\b/);
|
||||
}
|
||||
ready = ready.then(start);
|
||||
};
|
||||
$('#search-years').onchange = () => {
|
||||
ready = ready.then(() => start({keepYears: true}));
|
||||
};
|
||||
$('#search-order').value = order;
|
||||
$('#search-order').onchange = function () {
|
||||
order = this.value;
|
||||
|
|
@ -146,7 +156,7 @@
|
|||
|
||||
window.on('styleDeleted', ({detail: {style: {id}}}) => {
|
||||
restoreScrollPosition();
|
||||
const result = results.find(r => r.installedStyleId === id);
|
||||
const result = results.find(r => r._installedStyleId === id);
|
||||
if (result) {
|
||||
API.uso.pingback(result.i, false);
|
||||
renderActionButtons(result.i, -1);
|
||||
|
|
@ -178,11 +188,11 @@
|
|||
dom.error.hidden = false;
|
||||
dom.list.hidden = true;
|
||||
if (dom.error.getBoundingClientRect().bottom < 0) {
|
||||
dom.error.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||||
dom.error.scrollIntoView(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function start() {
|
||||
async function start({keepYears} = {}) {
|
||||
resetUI.timer = resetUI.timer || setTimeout(resetUI, 500);
|
||||
try {
|
||||
results = [];
|
||||
|
|
@ -194,6 +204,8 @@
|
|||
const allSupportedIds = new Set(installedStyles.map(calcId));
|
||||
results = results.filter(r => !allSupportedIds.has(r.i));
|
||||
}
|
||||
if (!keepYears) resultsAllYears = results;
|
||||
renderYears();
|
||||
render();
|
||||
dom.list.hidden = !results.length;
|
||||
if (!results.length && !$('#search-query').value) {
|
||||
|
|
@ -201,6 +213,7 @@
|
|||
} else {
|
||||
resetUI();
|
||||
}
|
||||
resetUI();
|
||||
} catch (reason) {
|
||||
error(reason);
|
||||
}
|
||||
|
|
@ -209,12 +222,44 @@
|
|||
}
|
||||
|
||||
function resetUI() {
|
||||
document.body.classList.add('search-results-shown');
|
||||
$.rootCL.add('search-results-shown');
|
||||
dom.container.hidden = false;
|
||||
dom.list.hidden = false;
|
||||
dom.error.hidden = true;
|
||||
}
|
||||
|
||||
function renderYears() {
|
||||
const SCALE = 1000;
|
||||
const BASE = new Date(0).getFullYear(); // 1970
|
||||
const DAYS = 365.2425;
|
||||
const DAY = 24 * 3600e3;
|
||||
const YEAR = DAYS * DAY / SCALE;
|
||||
const SAFETY = 1 / DAYS; // 1 day safety margin: recheck Jan 1 and Dec 31
|
||||
const years = [];
|
||||
for (const r of resultsAllYears) {
|
||||
let y = r._year;
|
||||
if (!y) {
|
||||
y = r.u / YEAR + BASE;
|
||||
r._year = y = Math.abs(y % 1 - 1) <= SAFETY
|
||||
? new Date(r.u * SCALE).getFullYear()
|
||||
: y | 0;
|
||||
}
|
||||
years[y] = (years[y] || 0) + 1;
|
||||
}
|
||||
const texts = years.reduceRight((res, num, y) => res.push(`${y} (${num})`) && res, []);
|
||||
const selects = $$('#search-years select');
|
||||
selects.forEach((sel, selNum) => {
|
||||
if (texts.length !== sel.length || texts.some((v, i) => v !== sel[i].text)) {
|
||||
const {value} = sel;
|
||||
sel.textContent = '';
|
||||
sel.append(...texts.map(t => $create('option', {value: t.split(' ')[0]}, t)));
|
||||
sel.value = value in years ? value : (sel[`${selNum ? 'first' : 'last'}Child`] || {}).value;
|
||||
}
|
||||
});
|
||||
const [y1, y2] = selects.map(el => Number(el.value)).sort();
|
||||
results = y1 ? resultsAllYears.filter(r => (r = r._year) >= y1 && r <= y2) : resultsAllYears;
|
||||
}
|
||||
|
||||
function render() {
|
||||
totalPages = Math.ceil(results.length / PAGE_LENGTH);
|
||||
displayedPage = Math.min(displayedPage, totalPages) || 1;
|
||||
|
|
@ -262,13 +307,14 @@
|
|||
nav._next.disabled = displayedPage >= totalPages;
|
||||
nav._page.textContent = displayedPage;
|
||||
nav._total.textContent = totalPages;
|
||||
nav._num.textContent = results.length;
|
||||
}
|
||||
}
|
||||
|
||||
function doScrollToFirstResult() {
|
||||
if (dom.container.scrollHeight > window.innerHeight * 2) {
|
||||
scrollToFirstResult = false;
|
||||
dom.container.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||||
dom.container.scrollIntoView(true);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -377,10 +423,10 @@
|
|||
if (!entry) return;
|
||||
const result = entry._result;
|
||||
if (typeof installedId === 'number') {
|
||||
result.installed = installedId > 0;
|
||||
result.installedStyleId = installedId;
|
||||
result._installed = installedId > 0;
|
||||
result._installedStyleId = installedId;
|
||||
}
|
||||
const isInstalled = result.installed;
|
||||
const isInstalled = result._installed;
|
||||
const status = $('.search-result-status', entry).textContent =
|
||||
isInstalled ? t('clickToUninstall') :
|
||||
entry.dataset.noImage != null ? t('installButton') :
|
||||
|
|
@ -422,7 +468,7 @@
|
|||
}
|
||||
|
||||
function configure() {
|
||||
const styleEntry = $entry($resultEntry(this).result.installedStyleId);
|
||||
const styleEntry = $entry($resultEntry(this).result._installedStyleId);
|
||||
Events.configure.call(this, {target: styleEntry});
|
||||
}
|
||||
|
||||
|
|
@ -456,7 +502,7 @@
|
|||
function uninstall() {
|
||||
const {entry, result} = $resultEntry(this);
|
||||
saveScrollPosition(entry);
|
||||
API.styles.delete(result.installedStyleId);
|
||||
API.styles.delete(result._installedStyleId);
|
||||
}
|
||||
|
||||
function saveScrollPosition(entry) {
|
||||
|
|
@ -495,6 +541,7 @@
|
|||
);
|
||||
category = (keepThird && `${third}.` || '') + main + (keepTld || keepThird ? `.${tld}` : '');
|
||||
}
|
||||
rxCategory = new RegExp(`\\b${stringAsRegExp(category, '', true)}\\b`, 'i');
|
||||
return category !== old;
|
||||
}
|
||||
|
||||
|
|
@ -519,31 +566,29 @@
|
|||
}
|
||||
|
||||
async function search({retry} = {}) {
|
||||
return retry && !calcCategory({retry})
|
||||
return retry && !query.length && !calcCategory({retry})
|
||||
? []
|
||||
: (index || await fetchIndex()).filter(isResultMatching).sort(comparator);
|
||||
}
|
||||
|
||||
function isResultMatching(res) {
|
||||
// We're trying to call calcHaystack only when needed, not on all 100K items
|
||||
const {c} = res;
|
||||
return (
|
||||
c === category ||
|
||||
(category === STYLUS_CATEGORY
|
||||
? c === 'stylus' // USW
|
||||
: c === 'global' && searchGlobals &&
|
||||
(query.length || calcHaystack(res)._nLC.includes(category))
|
||||
(query.length || rxCategory.test(res.n))
|
||||
)
|
||||
) && (
|
||||
!query.length || // to skip calling calcHaystack
|
||||
query.every(isInHaystack, calcHaystack(res))
|
||||
);
|
||||
) && query.every(isInHaystack, res);
|
||||
}
|
||||
|
||||
/** @this {IndexEntry} haystack */
|
||||
function isInHaystack(needle) {
|
||||
return this._year === needle && this.c !== 'global' ||
|
||||
this._nLC.includes(needle);
|
||||
/**
|
||||
* @this {IndexEntry} haystack
|
||||
* @param {RegExp} q
|
||||
*/
|
||||
function isInHaystack(q) {
|
||||
return q.test(this.n);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -570,10 +615,4 @@
|
|||
function calcId(style) {
|
||||
return calcUsoId(style) || calcUswId(style);
|
||||
}
|
||||
|
||||
function calcHaystack(res) {
|
||||
if (!res._nLC) res._nLC = res.n.toLocaleLowerCase();
|
||||
if (!res._year) res._year = new Date(res.u * 1000).getFullYear();
|
||||
return res;
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user