('[role="menuitem"]');
if (e.shiftKey) {
if (document.activeElement === items[0]) {
e.preventDefault();
@@ -39,7 +62,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
} else if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
- this.button?._tippy.hide();
+ this.hidePopup();
this.button?.focus();
} else if (e.key === ' ' || e.code === 'Enter') {
if (document.activeElement?.matches('[role="menuitem"]')) {
@@ -48,20 +71,20 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
(document.activeElement as HTMLElement).click();
}
} else if (e.key === 'ArrowDown') {
- if (document.activeElement?.matches('.tippy-target')) {
+ if (document.activeElement === this.popup) {
e.preventDefault();
e.stopPropagation();
- document.activeElement.querySelector
('[role="menuitem"]:first-of-type')?.focus();
+ this.popup.querySelector('[role="menuitem"]:first-of-type')?.focus();
} else if (document.activeElement?.matches('[role="menuitem"]')) {
e.preventDefault();
e.stopPropagation();
(document.activeElement.nextElementSibling as HTMLElement)?.focus();
}
} else if (e.key === 'ArrowUp') {
- if (document.activeElement?.matches('.tippy-target')) {
+ if (document.activeElement === this.popup) {
e.preventDefault();
e.stopPropagation();
- document.activeElement.querySelector('[role="menuitem"]:last-of-type')?.focus();
+ this.popup.querySelector('[role="menuitem"]:last-of-type')?.focus();
} else if (document.activeElement?.matches('[role="menuitem"]')) {
e.preventDefault();
e.stopPropagation();
@@ -69,16 +92,15 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}
}
});
- div.classList.add('tippy-target');
- this.handleItemClick(div, '.tippy-target > .item');
- this.tippyContent = div;
- } // end if: no tippyContent and create a new one
+ this.handleItemClick(div, '.overflow-menu-popup > .item');
+ this.popup = div;
+ } // end if: no popup and create a new one
const itemFlexSpace = this.menuItemsEl.querySelector('.item-flex-space');
const itemOverFlowMenuButton = this.querySelector('.overflow-menu-button');
- // move items in tippy back into the menu items for subsequent measurement
- for (const item of this.tippyItems || []) {
+ // move items in popup back into the menu items for subsequent measurement
+ for (const item of this.overflowItems || []) {
if (!itemFlexSpace || item.getAttribute('data-after-flex-space')) {
this.menuItemsEl.append(item);
} else {
@@ -90,7 +112,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
// flex space and overflow menu are excluded from measurement
itemFlexSpace?.style.setProperty('display', 'none', 'important');
itemOverFlowMenuButton?.style.setProperty('display', 'none', 'important');
- this.tippyItems = [];
+ this.overflowItems = [];
const menuRight = this.offsetLeft + this.offsetWidth;
const menuItems = this.menuItemsEl.querySelectorAll('.item, .item-flex-space');
let afterFlexSpace = false;
@@ -102,64 +124,64 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
if (afterFlexSpace) item.setAttribute('data-after-flex-space', 'true');
const itemRight = item.offsetLeft + item.offsetWidth;
if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button with some extra space
- const onlyLastItem = idx === menuItems.length - 1 && this.tippyItems.length === 0;
+ const onlyLastItem = idx === menuItems.length - 1 && this.overflowItems.length === 0;
const lastItemFit = onlyLastItem && menuRight - itemRight > 0;
const moveToPopup = !onlyLastItem || !lastItemFit;
- if (moveToPopup) this.tippyItems.push(item);
+ if (moveToPopup) this.overflowItems.push(item);
}
}
itemFlexSpace?.style.removeProperty('display');
itemOverFlowMenuButton?.style.removeProperty('display');
// if there are no overflown items, remove any previously created button
- if (!this.tippyItems?.length) {
- const btn = this.querySelector('.overflow-menu-button');
- btn?._tippy?.destroy();
- btn?.remove();
+ if (!this.overflowItems?.length) {
+ this.hidePopup();
+ this.button?.remove();
+ this.popup?.remove();
this.button = null;
return;
}
- // remove aria role from items that moved from tippy to menu
+ // remove aria role from items that moved from popup to menu
for (const item of menuItems) {
- if (!this.tippyItems.includes(item)) {
+ if (!this.overflowItems.includes(item)) {
item.removeAttribute('role');
}
}
- // move all items that overflow into tippy
- for (const item of this.tippyItems) {
+ // move all items that overflow into popup
+ for (const item of this.overflowItems) {
item.setAttribute('role', 'menuitem');
- this.tippyContent.append(item);
+ this.popup.append(item);
}
- // update existing tippy
- if (this.button?._tippy) {
- this.button._tippy.setContent(this.tippyContent);
+ // update existing popup
+ if (this.button) {
this.updateButtonActivationState();
return;
}
- // create button initially
+ // create button and attach popup
+ const popupId = generateElemId('overflow-popup-');
+ this.popup.id = popupId;
+
this.button = document.createElement('button');
this.button.classList.add('overflow-menu-button');
this.button.setAttribute('aria-label', window.config.i18n.more_items);
+ this.button.setAttribute('aria-haspopup', 'true');
+ this.button.setAttribute('aria-expanded', 'false');
+ this.button.setAttribute('aria-controls', popupId);
this.button.innerHTML = octiconKebabHorizontal;
- this.append(this.button);
- createTippy(this.button, {
- trigger: 'click',
- hideOnClick: true,
- interactive: true,
- placement: 'bottom-end',
- role: 'menu',
- theme: 'menu',
- content: this.tippyContent,
- onShow: () => { // FIXME: onShown doesn't work (never be called)
- setTimeout(() => {
- this.tippyContent.focus();
- }, 0);
- },
+ this.button.addEventListener('click', (e) => {
+ e.stopPropagation();
+ if (this.popup.style.display === 'none') {
+ this.showPopup();
+ } else {
+ this.hidePopup();
+ }
});
+ this.append(this.button);
+ this.append(this.popup);
this.updateButtonActivationState();
});
@@ -202,7 +224,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
handleItemClick(el: Element, selector: string) {
addDelegatedEventListener(el, 'click', selector, () => {
- this.button?._tippy?.hide();
+ this.hidePopup();
this.updateButtonActivationState();
});
}
@@ -239,5 +261,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
disconnectedCallback() {
this.mutationObserver?.disconnect();
this.resizeObserver?.disconnect();
+ document.removeEventListener('click', this.onClickOutside, true);
}
});
diff --git a/webpack.config.ts b/webpack.config.ts
deleted file mode 100644
index e3ef996909d..00000000000
--- a/webpack.config.ts
+++ /dev/null
@@ -1,268 +0,0 @@
-import wrapAnsi from 'wrap-ansi';
-import AddAssetPlugin from 'add-asset-webpack-plugin';
-import LicenseCheckerWebpackPlugin from '@techknowlogick/license-checker-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
-import {VueLoaderPlugin} from 'vue-loader';
-import {EsbuildPlugin} from 'esbuild-loader';
-import {parse} from 'node:path';
-import webpack, {type Configuration, type EntryObject} from 'webpack';
-import {fileURLToPath} from 'node:url';
-import {readFileSync, globSync} from 'node:fs';
-import {env} from 'node:process';
-import tailwindcss from 'tailwindcss';
-import tailwindConfig from './tailwind.config.ts';
-
-const {SourceMapDevToolPlugin, DefinePlugin, EnvironmentPlugin} = webpack;
-const formatLicenseText = (licenseText: string) => wrapAnsi(licenseText || '', 80).trim();
-
-const themes: EntryObject = {};
-for (const path of globSync('web_src/css/themes/*.css', {cwd: import.meta.dirname})) {
- themes[parse(path).name] = [`./${path}`];
-}
-
-const isProduction = env.NODE_ENV !== 'development';
-
-// ENABLE_SOURCEMAP accepts the following values:
-// true - all enabled, the default in development
-// reduced - minimal sourcemaps, the default in production
-// false - all disabled
-let sourceMaps;
-if ('ENABLE_SOURCEMAP' in env) {
- sourceMaps = ['true', 'false'].includes(env.ENABLE_SOURCEMAP || '') ? env.ENABLE_SOURCEMAP : 'reduced';
-} else {
- sourceMaps = isProduction ? 'reduced' : 'true';
-}
-
-// define which web components we use for Vue to not interpret them as Vue components
-const webComponents = new Set([
- // our own, in web_src/js/webcomponents
- 'overflow-menu',
- 'origin-url',
- // from dependencies
- 'markdown-toolbar',
- 'relative-time',
- 'text-expander',
-]);
-
-const filterCssImport = (url: string, ...args: Array) => {
- const cssFile = args[1] || args[0]; // resourcePath is 2nd argument for url and 3rd for import
- const importedFile = url.replace(/[?#].+/, '').toLowerCase();
-
- if (cssFile.includes('fomantic')) {
- if (importedFile.includes('brand-icons')) return false;
- if (/(eot|ttf|otf|woff|svg)$/i.test(importedFile)) return false;
- }
-
- if (cssFile.includes('katex') && /(ttf|woff)$/i.test(importedFile)) {
- return false;
- }
-
- return true;
-};
-
-export default {
- mode: isProduction ? 'production' : 'development',
- entry: {
- index: [
- fileURLToPath(new URL('web_src/js/index.ts', import.meta.url)),
- fileURLToPath(new URL('web_src/css/index.css', import.meta.url)),
- ],
- swagger: [
- fileURLToPath(new URL('web_src/js/standalone/swagger.ts', import.meta.url)),
- fileURLToPath(new URL('web_src/css/standalone/swagger.css', import.meta.url)),
- ],
- 'external-render-iframe': [
- fileURLToPath(new URL('web_src/js/standalone/external-render-iframe.ts', import.meta.url)),
- fileURLToPath(new URL('web_src/css/standalone/external-render-iframe.css', import.meta.url)),
- ],
- 'eventsource.sharedworker': [
- fileURLToPath(new URL('web_src/js/features/eventsource.sharedworker.ts', import.meta.url)),
- ],
- ...(!isProduction && {
- devtest: [
- fileURLToPath(new URL('web_src/js/standalone/devtest.ts', import.meta.url)),
- fileURLToPath(new URL('web_src/css/standalone/devtest.css', import.meta.url)),
- ],
- }),
- ...themes,
- },
- devtool: false,
- output: {
- path: fileURLToPath(new URL('public/assets', import.meta.url)),
- filename: 'js/[name].js',
- chunkFilename: 'js/[name].[contenthash:8].js',
- },
- optimization: {
- minimize: isProduction,
- minimizer: [
- new EsbuildPlugin({
- target: 'es2020',
- minify: true,
- css: true,
- legalComments: 'none',
- }),
- ],
- moduleIds: 'named',
- chunkIds: 'named',
- },
- module: {
- rules: [
- {
- test: /\.vue$/i,
- exclude: /node_modules/,
- loader: 'vue-loader',
- options: {
- compilerOptions: {
- isCustomElement: (tag: string) => webComponents.has(tag),
- },
- },
- },
- {
- test: /\.js$/i,
- exclude: /node_modules/,
- use: [
- {
- loader: 'esbuild-loader',
- options: {
- loader: 'js',
- target: 'es2020',
- },
- },
- ],
- },
- {
- test: /\.ts$/i,
- exclude: /node_modules/,
- use: [
- {
- loader: 'esbuild-loader',
- options: {
- loader: 'ts',
- target: 'es2020',
- },
- },
- ],
- },
- {
- test: /\.css$/i,
- use: [
- {
- loader: MiniCssExtractPlugin.loader,
- },
- {
- loader: 'css-loader',
- options: {
- sourceMap: sourceMaps === 'true',
- url: {filter: filterCssImport},
- import: {filter: filterCssImport},
- importLoaders: 1,
- },
- },
- {
- loader: 'postcss-loader',
- options: {
- postcssOptions: {
- plugins: [
- tailwindcss(tailwindConfig),
- ],
- },
- },
- },
- ],
- },
- {
- test: /\.svg$/i,
- include: fileURLToPath(new URL('public/assets/img/svg', import.meta.url)),
- type: 'asset/source',
- },
- {
- test: /\.(ttf|woff2?)$/i,
- type: 'asset/resource',
- generator: {
- filename: 'fonts/[name].[contenthash:8][ext]',
- },
- },
- ],
- },
- plugins: [
- new DefinePlugin({
- __VUE_OPTIONS_API__: true, // at the moment, many Vue components still use the Vue Options API
- __VUE_PROD_DEVTOOLS__: false, // do not enable devtools support in production
- __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, // https://github.com/vuejs/vue-cli/pull/7443
- }),
- // all environment variables used in bundled js via process.env must be declared here
- new EnvironmentPlugin({
- TEST: 'false',
- }),
- new VueLoaderPlugin(),
- new MiniCssExtractPlugin({
- filename: 'css/[name].css',
- chunkFilename: 'css/[name].[contenthash:8].css',
- }),
- sourceMaps !== 'false' && new SourceMapDevToolPlugin({
- filename: '[file].[contenthash:8].map',
- ...(sourceMaps === 'reduced' && {include: /^js\/index\.js$/}),
- }),
- new MonacoWebpackPlugin({
- filename: 'js/monaco-[name].[contenthash:8].worker.js',
- }),
- isProduction ? new LicenseCheckerWebpackPlugin({
- outputFilename: 'licenses.txt',
- outputWriter: ({dependencies}: {dependencies: Array>}) => {
- const line = '-'.repeat(80);
- const goJson = readFileSync('assets/go-licenses.json', 'utf8');
- const goModules = JSON.parse(goJson).map(({name, licenseText}: Record) => {
- return {name, body: formatLicenseText(licenseText)};
- });
- const jsModules = dependencies.map(({name, version, licenseName, licenseText}) => {
- return {name, version, licenseName, body: formatLicenseText(licenseText)};
- });
-
- const modules = [...goModules, ...jsModules].sort((a, b) => a.name.localeCompare(b.name));
- return modules.map(({name, version, licenseName, body}) => {
- const title = licenseName ? `${name}@${version} - ${licenseName}` : name;
- return `${line}\n${title}\n${line}\n${body}`;
- }).join('\n');
- },
- override: {
- 'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33
- },
- emitError: true,
- allow: '(Apache-2.0 OR 0BSD OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)',
- }) : new AddAssetPlugin('licenses.txt', `Licenses are disabled during development`),
- ],
- performance: {
- hints: false,
- maxEntrypointSize: Infinity,
- maxAssetSize: Infinity,
- },
- resolve: {
- symlinks: true,
- modules: ['node_modules'],
- },
- watchOptions: {
- ignored: [
- 'node_modules/**',
- ],
- },
- stats: {
- assetsSort: 'name',
- assetsSpace: Infinity,
- cached: false,
- cachedModules: false,
- children: false,
- chunkModules: false,
- chunkOrigins: false,
- chunksSort: 'name',
- colors: true,
- entrypoints: false,
- groupAssetsByChunk: false,
- groupAssetsByEmitStatus: false,
- groupAssetsByInfo: false,
- groupModulesByAttributes: false,
- modules: false,
- reasons: false,
- runtimeModules: false,
- },
-} satisfies Configuration;