@@ -19,27 +21,13 @@
{{/if}}
-
-
-
-
-
-
-
-
+
+ Version:
+
+
-
-
-
-
-
-
-
+
+ Version:
+
+
diff --git a/src/views/components/periods-dropdown.html b/src/views/components/periods-dropdown.html
index 16353f1f9..e48f81545 100644
--- a/src/views/components/periods-dropdown.html
+++ b/src/views/components/periods-dropdown.html
@@ -1,36 +1,45 @@
{{#if periodToDisplay}}
-
+
@@ -39,10 +48,35 @@
const _ = require('../../assets/js/_');
component.exports = {
+ computed: {
+ filteredPeriods () {
+ let filterBy = this.get('filterBy');
+ let prepStatPeriods = this.get('prepStatPeriods');
+
+ if (filterBy) {
+ return filterBy.toLowerCase().split(' ').reduce((results, filterPart) => {
+ return results.filter((i) => {
+ if (i.periodText) {
+ return i.periodText.toLowerCase().includes(filterPart);
+ }
+
+ return false;
+ });
+ }, [ ...prepStatPeriods ]);
+ }
+
+ return prepStatPeriods;
+ },
+ },
data () {
return {
periodToDisplay: null,
prepStatPeriods: [],
+ filterPlaceholder: 'Filter periods',
+ nothingFoundMsg: 'No periods found',
+ dropdownOpened: false,
+ currSelectedItemIdx: null,
+ currentSelectedClass: 'selected',
};
},
oninit () {
@@ -69,9 +103,88 @@
});
}
},
+ oncomplete () {
+ if (!Ractive.isServer) {
+ // close dropdown and clear filter on click outside the dropdown el
+ let el = this.find('.c-periods-dropdown');
+
+ document.addEventListener('click', (event) => {
+ let currDropdownOpened = this.get('dropdownOpened');
+
+ if (currDropdownOpened && !el.contains(event.target)) {
+ this.set('dropdownOpened', false);
+ }
+ });
+
+ this.observe('dropdownOpened', (newValue) => {
+ let ul = this.find('.dropdown_body_list');
+
+ if (!ul) { return; }
+
+ if (newValue) {
+ this.set('calculatedListWidth', ul.getBoundingClientRect().width);
+ this.find('.dropdown_body_filter input').focus();
+ this.find('.dropdown_body_list_item.selected')?.scrollIntoView?.({ block: 'nearest' });
+ } else {
+ this.set('calculatedListWidth', null);
+ }
+ }, { defer: true });
+
+ this.observe('currSelectedItemIdx', () => {
+ this.find('.dropdown_body_list_item.selected')?.scrollIntoView?.({ block: 'nearest' });
+ }, { defer: true });
+ }
+ },
+ onKeyDown (e) {
+ let listEl = this.find('.dropdown_body_list');
+
+ if (!listEl) { return; }
+
+ let currSelectedItemIdx = this.get('currSelectedItemIdx');
+ let periods = this.get('filteredPeriods');
+ let periodToDisplay = this.get('periodToDisplay');
+
+ // start nav from the selected value position
+ currSelectedItemIdx === null && periods.some((p, pIdx) => {
+ if (p.periodText === periodToDisplay) {
+ currSelectedItemIdx = pIdx;
+
+ return true;
+ }
+
+ return false;
+ });
+
+ if (e.key === 'ArrowDown') {
+ currSelectedItemIdx = currSelectedItemIdx === null ? 0 : currSelectedItemIdx + 1 > periods.length - 1 ? periods.length - 1 : currSelectedItemIdx + 1;
+
+ if (periods[currSelectedItemIdx].periodType === 'separator') {
+ currSelectedItemIdx++;
+ }
+
+ this.set('currSelectedItemIdx', currSelectedItemIdx);
+ } else if (e.key === 'ArrowUp') {
+ currSelectedItemIdx = currSelectedItemIdx === null ? 0 : currSelectedItemIdx - 1 < 0 ? 0 : currSelectedItemIdx - 1;
+
+ if (periods[currSelectedItemIdx].periodType === 'separator') {
+ currSelectedItemIdx--;
+ }
+
+ this.set('currSelectedItemIdx', currSelectedItemIdx);
+ } else if (e.key === 'Enter') {
+ this.handleClick(periods[currSelectedItemIdx]);
+ } else {
+ this.set('currSelectedItemIdx', 0);
+ }
+ },
+ toggleDropdown () {
+ this.set('dropdownOpened', !this.get('dropdownOpened'));
+ this.set('currSelectedItemIdx', null);
+ },
handleClick (periodData) {
let selectHandler = this.get('selectHandler');
+ this.toggleDropdown();
selectHandler(periodData);
},
};
diff --git a/src/views/components/version-dropdown.html b/src/views/components/version-dropdown.html
index 3b6cf8e7a..aa93318e5 100644
--- a/src/views/components/version-dropdown.html
+++ b/src/views/components/version-dropdown.html
@@ -1,22 +1,148 @@
-
{{#if pinnedLabel}}
{{>pinnedLabel}}
{{/if}}
-
+
+
+
{{/if}}
+ 
+
+
-
+ {{#if filteredPeriods.length }}
+
+
+ -
+ {{#each filteredPeriods:itemIndex}}
+ {{#if periodType === 'separator'}}
+
+ {{else}}
+
- + {{periodText}} + + {{/if}} + {{/each}} +
+ {{nothingFoundMsg}}
+
+ {{/if}}
+
{{#if versions.length > 1}}
- 
+
+
+
+
+
diff --git a/test/tests/package.js b/test/tests/package.js
index 8eb38b083..6cf685687 100644
--- a/test/tests/package.js
+++ b/test/tests/package.js
@@ -46,9 +46,9 @@ describe('package', () => {
await browser.navigate().to(`${BASE_URL}/package/npm/fontfamous`);
await browser.sleep(4000);
await browser.findElement({ id: 'tabRouteFiles' }).click();
- await browser.findElement({ css: '.version-dropdown-selected-version' }).click();
+ await browser.findElement({ css: '.version-dropdown_selected' }).click();
await browser.sleep(1000);
- await browser.findElement({ css: '.dropdown-menu-right li:last-of-type a' }).click();
+ await browser.findElement({ css: '.version-dropdown_wrapper_list li:last-of-type a' }).click();
await browser.sleep(4000);
await browser.findElement({ css: '.c-package-file-browser .box-content-wrapper .files-list .file-item:nth-child(2) a' }).click();
await expect(browser.findElement({ css: '.box-content-wrapper .files-list .file-item:nth-child(3) > a .file-path' }).getText()).to.eventually.equal('dist/fonts');
@@ -112,6 +112,6 @@ describe('package', () => {
let version = await browser.findElement({ css: '.c-top-stats-table:nth-child(1) .table-row:nth-child(2) a' }).getText();
await browser.findElement({ css: '.c-top-stats-table:nth-child(1) .table-row:nth-child(2) a' }).click();
await browser.sleep(4000);
- await expect(browser.findElement({ css: '.c-top-stats-table:nth-child(2) .version-dropdown-selected-version a' }).getText()).to.eventually.equal(version);
+ await expect(browser.findElement({ css: '.c-top-stats-table:nth-child(2) .version-dropdown_selected a' }).getText()).to.eventually.equal(version);
});
});
+
+
+
+
+
+
{{else}}
-
+
{{version}}
{{/if}}
+
+
+
-
+ {{#if filteredVersions.length }}
+
+
+ -
+ {{#each filteredVersions:itemIndex}}
+ {{#if this === 'separator'}}
+
+ {{else}}
+
- + {{this}} + + {{/if}} + {{/each}} +
+ {{noVersionsMsg}}
+
+ {{/if}}
+