{{svg "octicon-triangle-down" 14 "dropdown icon"}}
diff --git a/web_src/css/modules/dropdown.css b/web_src/css/modules/dropdown.css
index 459d9339e8e..a31597ba974 100644
--- a/web_src/css/modules/dropdown.css
+++ b/web_src/css/modules/dropdown.css
@@ -939,6 +939,10 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
margin: 0;
}
+.ui.dropdown .menu.items-width-limit .item {
+ max-width: min(500px, calc(100vw - 2em));
+}
+
.ui.dropdown.ellipsis-text-items {
/* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */
padding-top: 0;
diff --git a/web_src/fomantic/build/components/api.js b/web_src/fomantic/build/components/api.js
index 3bfe27e13cc..09067734809 100644
--- a/web_src/fomantic/build/components/api.js
+++ b/web_src/fomantic/build/components/api.js
@@ -75,6 +75,8 @@ $.api = $.fn.api = function(parameters) {
data,
requestStartTime,
+ cachedResponses = {},
+
// standard module
element = this,
context = $context[0],
@@ -141,34 +143,16 @@ $.api = $.fn.api = function(parameters) {
read: {
cachedResponse: function(url) {
- var
- response
- ;
- if(window.Storage === undefined) {
- module.error(error.noStorage);
- return;
- }
- response = sessionStorage.getItem(url);
- module.debug('Using cached response', url, response);
- response = module.decode.json(response);
- return response;
+ const cacheItem = cachedResponses[url];
+ if (!cacheItem) return null;
+ return module.decode.json(cacheItem.respText);
}
},
write: {
cachedResponse: function(url, response) {
- if(response && response === '') {
- module.debug('Response empty, not caching', response);
- return;
- }
- if(window.Storage === undefined) {
- module.error(error.noStorage);
- return;
- }
- if( $.isPlainObject(response) ) {
- response = JSON.stringify(response);
- }
- sessionStorage.setItem(url, response);
- module.verbose('Storing cached response for url', url, response);
+ if(!response) return;
+ if($.isPlainObject(response) || $.isArray(response)) response = JSON.stringify(response);
+ cachedResponses[url] = {cacheTime: Date.now(), respText: response};
}
},
@@ -243,10 +227,12 @@ $.api = $.fn.api = function(parameters) {
module.debug('Querying URL', ajaxSettings.url);
module.verbose('Using AJAX settings', ajaxSettings);
- if(settings.cache === 'local' && module.read.cachedResponse(url)) {
+
+ const cachedObj = module.read.cachedResponse(url);
+ if(settings.cache === 'local' && cachedObj) {
module.debug('Response returned from local cache');
module.request = module.create.request();
- module.request.resolveWith(context, [ module.read.cachedResponse(url) ]);
+ module.request.resolveWith(context, [ cachedObj ]);
return;
}
@@ -537,13 +523,13 @@ $.api = $.fn.api = function(parameters) {
}
},
request: {
- done: function(response, xhr) {
+ done: function(response) {
module.debug('Successful API Response', response);
if(settings.cache === 'local' && url) {
module.write.cachedResponse(url, response);
module.debug('Saving server response locally', module.cache);
}
- settings.onSuccess.call(context, response, $module, xhr);
+ settings.onSuccess.call(context, response, $module);
},
complete: function(firstParameter, secondParameter) {
var
@@ -1081,7 +1067,7 @@ $.api.settings = {
throttle : 0,
// whether to throttle first request or only repeated
- throttleFirstRequest : true,
+ throttleFirstRequest : false,
// standard ajax settings
method : 'get',
@@ -1110,7 +1096,7 @@ $.api.settings = {
// response was successful, if JSON passed validation
onSuccess : function(response, $module) {},
- // request finished without aborting
+ // request completed, either success or error/failure/abort: jQuery.ajax().always()
onComplete : function(response, $module) {},
// failed JSON success test
diff --git a/web_src/fomantic/build/components/dropdown.js b/web_src/fomantic/build/components/dropdown.js
index f971fecda4c..b56c0fdf4d4 100644
--- a/web_src/fomantic/build/components/dropdown.js
+++ b/web_src/fomantic/build/components/dropdown.js
@@ -431,7 +431,12 @@ $.fn.dropdown = function(parameters) {
module.refresh();
},
menu: function(values) {
- $menu.html( templates.menu(values, fields,settings.preserveHTML,settings.className));
+ const $menuItems = $(templates.menu(values, fields,settings.preserveHTML,settings.className));
+ $menuItems.attr('data-item-dynamic', '');
+ $menu.find('[data-item-dynamic]').remove();
+ $menu.append(...$menuItems);
+ settings.onMenuUpdated();
+
$item = $menu.find(selector.item);
$divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
},
@@ -515,8 +520,10 @@ $.fn.dropdown = function(parameters) {
? callback
: function(){}
;
- if(!module.can.show() && module.is.remote()) {
+ const dataKeyRemoteQueried = 'remote-queried';
+ if(module.is.remote() && !$module.data(dataKeyRemoteQueried)) {
module.debug('No API results retrieved, searching before show');
+ $module.data(dataKeyRemoteQueried, true)
module.queryRemote(module.get.query(), module.show);
}
if( module.can.show() && !module.is.active() ) {
@@ -793,6 +800,9 @@ $.fn.dropdown = function(parameters) {
},
queryRemote: function(query, callback) {
+ const dataKeyRemoteQuerying = 'remote-querying';
+ if ($module.data(dataKeyRemoteQuerying) === query) return;
+ $module.data(dataKeyRemoteQuerying, query);
var
apiSettings = {
errorDuration : false,
@@ -801,6 +811,11 @@ $.fn.dropdown = function(parameters) {
urlData : {
query: query
},
+ onComplete: function() {
+ if ($module.data(dataKeyRemoteQuerying) === query) {
+ $module.removeData(dataKeyRemoteQuerying);
+ }
+ },
onError: function() {
module.add.message(message.serverError);
callback();
@@ -3930,7 +3945,8 @@ $.fn.dropdown.settings = {
minCharacters : 0, // Minimum characters required to trigger API call
filterRemoteData : false, // Whether API results should be filtered after being returned for query term
- saveRemoteData : true, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh
+ saveRemoteData : false, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh
+ // saveRemoteData is a wrong design and buggy, don't use it.
throttle : 200, // How long to wait after last user input to search remotely
@@ -3996,6 +4012,7 @@ $.fn.dropdown.settings = {
onLabelCreate : function(value, text) { return $(this); },
onLabelRemove : function(value) { return true; },
onNoResults : function(searchTerm) { return true; },
+ onMenuUpdated : function(){},
onShow : function(){},
onHide : function(){},
@@ -4222,6 +4239,8 @@ $.fn.dropdown.settings.templates = {
if(option[fields.divider]){
html += '
';
}
+ } else if( itemType === 'html' ) {
+ html += option.html;
}
});
return html;
diff --git a/web_src/js/features/common-page.ts b/web_src/js/features/common-page.ts
index 61e2e872322..c90a7f68eda 100644
--- a/web_src/js/features/common-page.ts
+++ b/web_src/js/features/common-page.ts
@@ -6,6 +6,7 @@ import {addDelegatedEventListener, queryElems} from '../utils/dom.ts';
import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
import {initCompSearchRepoBox} from './comp/SearchRepoBox.ts';
+import {initRepoSwitcher} from './repo-switcher.ts';
import {initScopedWorkflowRequired} from './comp/ScopedWorkflows.ts';
const {appUrl, appSubUrl} = window.config;
@@ -38,7 +39,7 @@ function initFooterThemeSelector() {
const $dropdown = fomanticQuery(elDropdown);
$dropdown.dropdown({
direction: 'upward',
- apiSettings: {url: `${appSubUrl}/-/web-theme/list`, cache: false},
+ apiSettings: {url: `${appSubUrl}/-/web-theme/list`},
});
addDelegatedEventListener(elDropdown, 'click', '.menu > .item', async (el) => {
const themeName = el.getAttribute('data-value')!;
@@ -105,6 +106,7 @@ export function initGlobalComponent() {
registerGlobalInitFunc('initTabSwitcher', initTabSwitcher);
registerGlobalInitFunc('initAvatarUploader', initAvatarUploaderWithCropper);
registerGlobalInitFunc('initSearchRepoBox', initCompSearchRepoBox);
+ registerGlobalInitFunc('initRepoSwitcher', initRepoSwitcher);
registerGlobalInitFunc('initScopedWorkflowRequired', initScopedWorkflowRequired);
}
diff --git a/web_src/js/features/repo-home.ts b/web_src/js/features/repo-home.ts
index 29bad895e68..fc225158fb7 100644
--- a/web_src/js/features/repo-home.ts
+++ b/web_src/js/features/repo-home.ts
@@ -79,7 +79,6 @@ export function initRepoTopicBar() {
forceSelection: false,
fullTextSearch: 'exact',
fields: {name: 'description', value: 'data-value'},
- saveRemoteData: false,
label: {
transition: 'horizontal flip',
duration: 200,
@@ -88,7 +87,6 @@ export function initRepoTopicBar() {
apiSettings: {
url: `${appSubUrl}/explore/topics/search?q={query}`,
throttle: 500,
- cache: false,
onResponse(this: any, res: any) {
const formattedResponse = {
success: false,
diff --git a/web_src/js/features/repo-issue-content.ts b/web_src/js/features/repo-issue-content.ts
index ebd21c2c512..ef7785057ed 100644
--- a/web_src/js/features/repo-issue-content.ts
+++ b/web_src/js/features/repo-issue-content.ts
@@ -111,10 +111,8 @@ function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, co
$fomanticDropdown.dropdown({
action: 'hide',
apiSettings: {
- cache: false,
url: `${issueBaseUrl}/content-history/list?comment_id=${commentId}`,
},
- saveRemoteData: false,
onHide() {
$fomanticDropdown.dropdown('change values', null);
},
diff --git a/web_src/js/features/repo-issue-list.ts b/web_src/js/features/repo-issue-list.ts
index 0c16c2a241b..fe04ffd4a98 100644
--- a/web_src/js/features/repo-issue-list.ts
+++ b/web_src/js/features/repo-issue-list.ts
@@ -3,7 +3,6 @@ import {html, htmlRaw} from '../utils/html.ts';
import {confirmModal} from './comp/ConfirmModal.ts';
import {createSortable} from '../modules/sortable.ts';
import {DELETE, POST} from '../modules/fetch.ts';
-import {parseDom} from '../utils.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {performFetchAction} from './common-fetch-action.ts';
import type {SortableEvent} from 'sortablejs';
@@ -101,8 +100,7 @@ function initDropdownUserRemoteSearch(el: Element) {
elMenu.querySelector(`.item[data-value="${CSS.escape(username)}"]`)?.classList.add('selected');
};
- type ProcessedResult = {value: string, name: string};
- const processedResults: ProcessedResult[] = []; // to be used by dropdown to generate menu items
+ const processedResults: Record
[] = []; // to be used by dropdown to generate menu items
const syncItemFromInput = () => {
const inputVal = elSearchInput.value.trim();
elItemFromInput.setAttribute('data-value', inputVal);
@@ -115,10 +113,13 @@ function initDropdownUserRemoteSearch(el: Element) {
elSearchInput.value = selectedUsername;
if (!searchUrl) {
elSearchInput.addEventListener('input', syncItemFromInput);
- } else {
- if (!searchUrl.includes('?')) searchUrl += '?';
- $searchDropdown.dropdown('setting', 'apiSettings', {
- cache: false,
+ return;
+ }
+
+ if (!searchUrl.includes('?')) searchUrl += '?';
+ $searchDropdown.dropdown('setting', {
+ onMenuUpdated: () => syncItemFromInput(),
+ apiSettings: {
url: `${searchUrl}&q={query}`,
onResponse(resp: any) {
// the content is provided by backend IssuePosters handler
@@ -126,41 +127,16 @@ function initDropdownUserRemoteSearch(el: Element) {
for (const item of resp.results) {
const htmlAvatar = html`(${item.full_name}) ` : '';
- const htmlItem = html`${htmlRaw(htmlAvatar)}${item.username} ${htmlRaw(htmlFullName)} `;
+ const htmlItemInner = html`${htmlRaw(htmlAvatar)}${item.username} ${htmlRaw(htmlFullName)} `;
if (selectedUsername.toLowerCase() === item.username.toLowerCase()) selectedUsername = item.username;
- processedResults.push({value: item.username, name: htmlItem});
+ const htmlItem = html`${htmlRaw(htmlItemInner)}
`;
+ processedResults.push({type: 'html', html: htmlItem});
}
resp.results = processedResults;
return resp;
},
- });
- $searchDropdown.dropdown('setting', 'onShow', () => $searchDropdown.dropdown('filter', ' ')); // trigger a search on first show
- }
-
- // we want to generate the dropdown menu items by ourselves, replace its internal setup functions
- const dropdownSetup = {...$searchDropdown.dropdown('internal', 'setup')};
- const dropdownTemplates = $searchDropdown.dropdown('setting', 'templates');
- $searchDropdown.dropdown('internal', 'setup', dropdownSetup);
- dropdownSetup.menu = function (values: any) {
- // remove old dynamic items
- for (const el of elMenu.querySelectorAll(':scope > .dynamic-item')) {
- el.remove();
- }
-
- const newMenuHtml = dropdownTemplates.menu(values, $searchDropdown.dropdown('setting', 'fields'), true /* html */, $searchDropdown.dropdown('setting', 'className'));
- if (newMenuHtml) {
- const newMenuItems = parseDom(newMenuHtml, 'text/html').querySelectorAll('body > div');
- for (const newMenuItem of newMenuItems) {
- newMenuItem.classList.add('dynamic-item');
- }
- const div = document.createElement('div');
- div.classList.add('divider', 'dynamic-item');
- elMenu.append(div, ...newMenuItems);
- }
- $searchDropdown.dropdown('refresh');
- // defer our selection to the next tick, because dropdown will set the selection item after this `menu` function
- setTimeout(() => syncItemFromInput(), 0);
- };
+ },
+ });
}
function initPinRemoveButton() {
diff --git a/web_src/js/features/repo-issue-sidebar.ts b/web_src/js/features/repo-issue-sidebar.ts
index 2983b6e1af9..6a5dd7719b4 100644
--- a/web_src/js/features/repo-issue-sidebar.ts
+++ b/web_src/js/features/repo-issue-sidebar.ts
@@ -62,9 +62,8 @@ export function initRepoIssueSidebarDependency(elSidebar: HTMLElement) {
fomanticQuery(elDropdown).dropdown({
fullTextSearch: true,
apiSettings: {
- cache: false,
- rawResponse: true,
url: issueSearchUrl,
+ rawResponse: true, // backend responds an array, prevent fomantic api from converting it to an object
onResponse(response: any) {
const filteredResponse = {success: true, results: [] as Array>};
const currIssueId = elDropdown.getAttribute('data-issue-id');
diff --git a/web_src/js/features/repo-issue.ts b/web_src/js/features/repo-issue.ts
index 8441377c12c..460cc65ada0 100644
--- a/web_src/js/features/repo-issue.ts
+++ b/web_src/js/features/repo-issue.ts
@@ -303,8 +303,6 @@ export function initRepoIssueReferenceIssue() {
fomanticQuery(elDropdown).dropdown({
fullTextSearch: true,
apiSettings: {
- cache: false,
- rawResponse: true,
url: `${appSubUrl}/repo/search?q={query}&limit=20`,
onResponse(response: any) {
const filteredResponse = {success: true, results: [] as Array>};
diff --git a/web_src/js/features/repo-new.ts b/web_src/js/features/repo-new.ts
index 8b1188f19f1..07e15f65e2e 100644
--- a/web_src/js/features/repo-new.ts
+++ b/web_src/js/features/repo-new.ts
@@ -49,7 +49,6 @@ function initRepoNewTemplateSearch(form: HTMLFormElement) {
}
return {results};
},
- cache: false,
},
});
};
diff --git a/web_src/js/features/repo-switcher.ts b/web_src/js/features/repo-switcher.ts
new file mode 100644
index 00000000000..b4034e92387
--- /dev/null
+++ b/web_src/js/features/repo-switcher.ts
@@ -0,0 +1,39 @@
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {html, htmlRaw} from '../utils/html.ts';
+import {svg} from '../svg.ts';
+
+type RepoItem = {full_name: string; html_url: string; private: boolean; fork: boolean};
+type RepoSearchResponse = {data: Array<{repository: RepoItem}>};
+
+function repoIcon(repo: RepoItem): string {
+ if (repo.private) return svg('octicon-lock', 16);
+ if (repo.fork) return svg('octicon-repo-forked', 16);
+ return svg('octicon-repo', 16);
+}
+
+// quick repo switcher: the caret next to the repo name opens a remote-search dropdown
+// listing the owner's repositories, and navigates to the selected one
+export function initRepoSwitcher(el: HTMLElement) {
+ const currentFullName = el.getAttribute('data-current-full-name');
+ const $dropdown = fomanticQuery(el);
+ $dropdown.dropdown({
+ showOnFocus: false, // don't auto popup the dropdown menu, avoid interrupting users keyboard navigation on the page
+ apiSettings: {
+ url: el.getAttribute('data-query-url')!,
+ onResponse: (response: RepoSearchResponse) => ({results: response.data.map(({repository: repo}) => {
+ const svgCheck = repo.full_name === currentFullName ? svg('octicon-check', 16) : '';
+ const svgRepoIcon = repoIcon(repo);
+ return {
+ type: 'html',
+ html: html`
+
+ ${htmlRaw(svgCheck)}
+ ${htmlRaw(svgRepoIcon)}
+ ${repo.full_name.split('/')[1]}
+
+ `,
+ };
+ })}),
+ },
+ });
+}