chore(ui): remove fomantic's dimmer module (#7416)

+39

tests/e2e/dimmer.test.e2e.ts

··· 1 + // @watch start 2 + // templates/shared/user/** 3 + // web_src/css/modules/dimmer.ts 4 + // web_src/css/modules/dimmer.css 5 + // @watch end 6 + 7 + import {expect} from '@playwright/test'; 8 + import {save_visual, test} from './utils_e2e.ts'; 9 + 10 + test.use({user: 'user2'}); 11 + 12 + test('Dimmed modal', async ({page}) => { 13 + await page.goto('/user1'); 14 + 15 + await expect(page.locator('.block')).toContainText('Block'); 16 + 17 + // Ensure the modal is hidden 18 + await expect(page.locator('#block-user')).toBeHidden(); 19 + 20 + await page.locator('.block').click(); 21 + 22 + // Modal and dimmer should be visible. 23 + await expect(page.locator('#block-user')).toBeVisible(); 24 + await expect(page.locator('.ui.dimmer')).toBeVisible(); 25 + await save_visual(page); 26 + 27 + // After canceling, modal and dimmer should be hidden. 28 + await page.locator('#block-user .cancel').click(); 29 + await expect(page.locator('.ui.dimmer')).toBeHidden(); 30 + await expect(page.locator('#block-user')).toBeHidden(); 31 + await save_visual(page); 32 + 33 + // Open the block modal and make the dimmer visible again. 34 + await page.locator('.block').click(); 35 + await expect(page.locator('#block-user')).toBeVisible(); 36 + await expect(page.locator('.ui.dimmer')).toBeVisible(); 37 + await expect(page.locator('.ui.dimmer')).toHaveCount(1); 38 + await save_visual(page); 39 + });

-4

web_src/css/base.css

··· 757 757 box-shadow: 0 6px 18px var(--color-shadow) !important; 758 758 } 759 759 760 - .ui.dimmer { 761 - background: var(--color-overlay-backdrop); 762 - } 763 - 764 760 /* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */ 765 761 /* This fixes the commit graph button on the commits page */ 766 762 /* modal svg icons, copied from fomantic except width and height */

+1

web_src/css/index.css

··· 16 16 @import "./modules/card.css"; 17 17 @import "./modules/checkbox.css"; 18 18 @import "./modules/modal.css"; 19 + @import "./modules/dimmer.css"; 19 20 20 21 @import "./modules/switch.css"; 21 22 @import "./modules/select.css";

+20

web_src/css/modules/dimmer.css

··· 1 + .ui.active.dimmer { 2 + display: flex; 3 + opacity: 1; 4 + } 5 + 6 + .ui.dimmer { 7 + align-items: center; 8 + animation-fill-mode: both; 9 + background: var(--color-overlay-backdrop); 10 + display: none; 11 + flex-direction: column; 12 + height: 100%; 13 + position: absolute; 14 + opacity: 0; 15 + justify-content: center; 16 + user-select: none; 17 + width: 100%; 18 + will-change: opacity; 19 + z-index: 1000; 20 + }

-357

web_src/fomantic/build/semantic.css

··· 2327 2327 Site Overrides 2328 2328 *******************************/ 2329 2329 /*! 2330 - * # Fomantic-UI - Dimmer 2331 - * http://github.com/fomantic/Fomantic-UI/ 2332 - * 2333 - * 2334 - * Released under the MIT license 2335 - * http://opensource.org/licenses/MIT 2336 - * 2337 - */ 2338 - 2339 - /******************************* 2340 - Dimmer 2341 - *******************************/ 2342 - 2343 - .dimmable:not(body) { 2344 - position: relative; 2345 - } 2346 - 2347 - .ui.dimmer { 2348 - display: none; 2349 - position: absolute; 2350 - top: 0 !important; 2351 - left: 0 !important; 2352 - width: 100%; 2353 - height: 100%; 2354 - text-align: center; 2355 - vertical-align: middle; 2356 - padding: 1em; 2357 - background: rgba(0, 0, 0, 0.85); 2358 - opacity: 0; 2359 - line-height: 1; 2360 - animation-fill-mode: both; 2361 - animation-duration: 0.5s; 2362 - transition: background-color 0.5s linear; 2363 - flex-direction: column; 2364 - align-items: center; 2365 - justify-content: center; 2366 - -webkit-user-select: none; 2367 - -moz-user-select: none; 2368 - user-select: none; 2369 - will-change: opacity; 2370 - z-index: 1000; 2371 - } 2372 - 2373 - /* Dimmer Content */ 2374 - 2375 - .ui.dimmer > .content { 2376 - -webkit-user-select: text; 2377 - -moz-user-select: text; 2378 - user-select: text; 2379 - color: #FFFFFF; 2380 - } 2381 - 2382 - /* Loose Coupling */ 2383 - 2384 - .ui.segment > .ui.dimmer:not(.page) { 2385 - border-radius: inherit; 2386 - } 2387 - 2388 - /* Scrollbars */ 2389 - 2390 - /******************************* 2391 - States 2392 - *******************************/ 2393 - 2394 - /* Animating */ 2395 - 2396 - .animating.dimmable:not(body), 2397 - .dimmed.dimmable:not(body) { 2398 - overflow: hidden; 2399 - } 2400 - 2401 - /* Animating / Active / Visible */ 2402 - 2403 - .dimmed.dimmable > .ui.animating.dimmer, 2404 - .dimmed.dimmable > .ui.visible.dimmer, 2405 - .ui.active.dimmer { 2406 - display: flex; 2407 - opacity: 1; 2408 - } 2409 - 2410 - /* Disabled */ 2411 - 2412 - .ui.disabled.dimmer { 2413 - width: 0 !important; 2414 - height: 0 !important; 2415 - } 2416 - 2417 - /******************************* 2418 - Variations 2419 - *******************************/ 2420 - 2421 - /*-------------- 2422 - Legacy 2423 - ---------------*/ 2424 - 2425 - /* Animating / Active / Visible */ 2426 - 2427 - .dimmed.dimmable > .ui.animating.legacy.dimmer, 2428 - .dimmed.dimmable > .ui.visible.legacy.dimmer, 2429 - .ui.active.legacy.dimmer { 2430 - display: block; 2431 - } 2432 - 2433 - /*-------------- 2434 - Alignment 2435 - ---------------*/ 2436 - 2437 - .ui[class*="top aligned"].dimmer { 2438 - justify-content: flex-start; 2439 - } 2440 - 2441 - .ui[class*="bottom aligned"].dimmer { 2442 - justify-content: flex-end; 2443 - } 2444 - 2445 - /*-------------- 2446 - Page 2447 - ---------------*/ 2448 - 2449 - .ui.page.dimmer { 2450 - position: fixed; 2451 - transform-style: ''; 2452 - perspective: 2000px; 2453 - transform-origin: center center; 2454 - } 2455 - 2456 - .ui.page.dimmer.modals { 2457 - -moz-perspective: none; 2458 - } 2459 - 2460 - body.animating.in.dimmable, 2461 - body.dimmed.dimmable { 2462 - overflow: hidden; 2463 - } 2464 - 2465 - body.dimmable > .dimmer { 2466 - position: fixed; 2467 - } 2468 - 2469 - /*-------------- 2470 - Blurring 2471 - ---------------*/ 2472 - 2473 - .blurring.dimmable > :not(.dimmer) { 2474 - filter: initial; 2475 - transition: 800ms filter ease; 2476 - } 2477 - 2478 - .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) { 2479 - filter: blur(5px) grayscale(0.7); 2480 - } 2481 - 2482 - /* Dimmer Color */ 2483 - 2484 - .blurring.dimmable > .dimmer { 2485 - background: rgba(0, 0, 0, 0.6); 2486 - } 2487 - 2488 - .blurring.dimmable > .inverted.dimmer { 2489 - background: rgba(255, 255, 255, 0.6); 2490 - } 2491 - 2492 - /*-------------- 2493 - Aligned 2494 - ---------------*/ 2495 - 2496 - .ui.dimmer > .top.aligned.content > * { 2497 - vertical-align: top; 2498 - } 2499 - 2500 - .ui.dimmer > .bottom.aligned.content > * { 2501 - vertical-align: bottom; 2502 - } 2503 - 2504 - /*-------------- 2505 - Shades 2506 - ---------------*/ 2507 - 2508 - .medium.medium.medium.medium.medium.dimmer { 2509 - background: rgba(0, 0, 0, 0.65); 2510 - } 2511 - 2512 - .light.light.light.light.light.dimmer { 2513 - background: rgba(0, 0, 0, 0.45); 2514 - } 2515 - 2516 - .very.light.light.light.light.dimmer { 2517 - background: rgba(0, 0, 0, 0.25); 2518 - } 2519 - 2520 - /*-------------- 2521 - Simple 2522 - ---------------*/ 2523 - 2524 - /* Displays without javascript */ 2525 - 2526 - .ui.simple.dimmer { 2527 - display: block; 2528 - overflow: hidden; 2529 - opacity: 0; 2530 - width: 0; 2531 - height: 0; 2532 - z-index: -100; 2533 - background: rgba(0, 0, 0, 0); 2534 - } 2535 - 2536 - .dimmed.dimmable > .ui.simple.dimmer { 2537 - overflow: visible; 2538 - opacity: 1; 2539 - width: 100%; 2540 - height: 100%; 2541 - background: rgba(0, 0, 0, 0.85); 2542 - z-index: 1; 2543 - } 2544 - 2545 - .ui.simple.inverted.dimmer { 2546 - background: rgba(255, 255, 255, 0); 2547 - } 2548 - 2549 - .dimmed.dimmable > .ui.simple.inverted.dimmer { 2550 - background: rgba(255, 255, 255, 0.85); 2551 - } 2552 - 2553 - /*-------------- 2554 - Partially 2555 - ----------------*/ 2556 - 2557 - .ui[class*="top dimmer"], 2558 - .ui[class*="center dimmer"], 2559 - .ui[class*="bottom dimmer"] { 2560 - height: auto; 2561 - } 2562 - 2563 - .ui[class*="bottom dimmer"] { 2564 - top: auto !important; 2565 - bottom: 0; 2566 - } 2567 - 2568 - .ui[class*="center dimmer"] { 2569 - top: 50% !important; 2570 - transform: translateY(-50%); 2571 - -webkit-transform: translateY(calc(-50% - 0.5px)); 2572 - } 2573 - 2574 - .ui.segment > .ui.ui[class*="top dimmer"] { 2575 - border-bottom-left-radius: 0; 2576 - border-bottom-right-radius: 0; 2577 - } 2578 - 2579 - .ui.segment > .ui.ui[class*="center dimmer"] { 2580 - border-radius: 0; 2581 - } 2582 - 2583 - .ui.segment > .ui.ui[class*="bottom dimmer"] { 2584 - border-top-left-radius: 0; 2585 - border-top-right-radius: 0; 2586 - } 2587 - 2588 - .ui[class*="center dimmer"].transition[class*="fade up"].in { 2589 - animation-name: fadeInUpCenter; 2590 - } 2591 - 2592 - .ui[class*="center dimmer"].transition[class*="fade down"].in { 2593 - animation-name: fadeInDownCenter; 2594 - } 2595 - 2596 - .ui[class*="center dimmer"].transition[class*="fade up"].out { 2597 - animation-name: fadeOutUpCenter; 2598 - } 2599 - 2600 - .ui[class*="center dimmer"].transition[class*="fade down"].out { 2601 - animation-name: fadeOutDownCenter; 2602 - } 2603 - 2604 - .ui[class*="center dimmer"].bounce.transition { 2605 - animation-name: bounceCenter; 2606 - } 2607 - 2608 - @keyframes fadeInUpCenter { 2609 - 0% { 2610 - opacity: 0; 2611 - transform: translateY(-40%); 2612 - -webkit-transform: translateY(calc(-40% - 0.5px)); 2613 - } 2614 - 2615 - 100% { 2616 - opacity: 1; 2617 - transform: translateY(-50%); 2618 - -webkit-transform: translateY(calc(-50% - 0.5px)); 2619 - } 2620 - } 2621 - 2622 - @keyframes fadeInDownCenter { 2623 - 0% { 2624 - opacity: 0; 2625 - transform: translateY(-60%); 2626 - -webkit-transform: translateY(calc(-60% - 0.5px)); 2627 - } 2628 - 2629 - 100% { 2630 - opacity: 1; 2631 - transform: translateY(-50%); 2632 - -webkit-transform: translateY(calc(-50% - 0.5px)); 2633 - } 2634 - } 2635 - 2636 - @keyframes fadeOutUpCenter { 2637 - 0% { 2638 - opacity: 1; 2639 - transform: translateY(-50%); 2640 - -webkit-transform: translateY(calc(-50% - 0.5px)); 2641 - } 2642 - 2643 - 100% { 2644 - opacity: 0; 2645 - transform: translateY(-45%); 2646 - -webkit-transform: translateY(calc(-45% - 0.5px)); 2647 - } 2648 - } 2649 - 2650 - @keyframes fadeOutDownCenter { 2651 - 0% { 2652 - opacity: 1; 2653 - transform: translateY(-50%); 2654 - -webkit-transform: translateY(calc(-50% - 0.5px)); 2655 - } 2656 - 2657 - 100% { 2658 - opacity: 0; 2659 - transform: translateY(-55%); 2660 - -webkit-transform: translateY(calc(-55% - 0.5px)); 2661 - } 2662 - } 2663 - 2664 - @keyframes bounceCenter { 2665 - 0%, 20%, 50%, 80%, 100% { 2666 - transform: translateY(-50%); 2667 - -webkit-transform: translateY(calc(-50% - 0.5px)); 2668 - } 2669 - 2670 - 40% { 2671 - transform: translateY(calc(-50% - 30px)); 2672 - } 2673 - 2674 - 60% { 2675 - transform: translateY(calc(-50% - 15px)); 2676 - } 2677 - } 2678 - 2679 - /******************************* 2680 - Theme Overrides 2681 - *******************************/ 2682 - 2683 - /******************************* 2684 - User Overrides 2685 - *******************************/ 2686 - /*! 2687 2330 * # Fomantic-UI - Dropdown 2688 2331 * http://github.com/fomantic/Fomantic-UI/ 2689 2332 *

-754

web_src/fomantic/build/semantic.js

··· 1187 1187 })( jQuery, window, document ); 1188 1188 1189 1189 /*! 1190 - * # Fomantic-UI - Dimmer 1191 - * http://github.com/fomantic/Fomantic-UI/ 1192 - * 1193 - * 1194 - * Released under the MIT license 1195 - * http://opensource.org/licenses/MIT 1196 - * 1197 - */ 1198 - 1199 - ;(function ($, window, document, undefined) { 1200 - 1201 - 'use strict'; 1202 - 1203 - $.isFunction = $.isFunction || function(obj) { 1204 - return typeof obj === "function" && typeof obj.nodeType !== "number"; 1205 - }; 1206 - 1207 - window = (typeof window != 'undefined' && window.Math == Math) 1208 - ? window 1209 - : (typeof self != 'undefined' && self.Math == Math) 1210 - ? self 1211 - : Function('return this')() 1212 - ; 1213 - 1214 - $.fn.dimmer = function(parameters) { 1215 - var 1216 - $allModules = $(this), 1217 - 1218 - time = new Date().getTime(), 1219 - performance = [], 1220 - 1221 - query = arguments[0], 1222 - methodInvoked = (typeof query == 'string'), 1223 - queryArguments = [].slice.call(arguments, 1), 1224 - 1225 - returnedValue 1226 - ; 1227 - 1228 - $allModules 1229 - .each(function() { 1230 - var 1231 - settings = ( $.isPlainObject(parameters) ) 1232 - ? $.extend(true, {}, $.fn.dimmer.settings, parameters) 1233 - : $.extend({}, $.fn.dimmer.settings), 1234 - 1235 - selector = settings.selector, 1236 - namespace = settings.namespace, 1237 - className = settings.className, 1238 - error = settings.error, 1239 - 1240 - eventNamespace = '.' + namespace, 1241 - moduleNamespace = 'module-' + namespace, 1242 - moduleSelector = $allModules.selector || '', 1243 - 1244 - clickEvent = "click", unstableClickEvent = ('ontouchstart' in document.documentElement) 1245 - ? 'touchstart' 1246 - : 'click', 1247 - 1248 - $module = $(this), 1249 - $dimmer, 1250 - $dimmable, 1251 - 1252 - element = this, 1253 - instance = $module.data(moduleNamespace), 1254 - module 1255 - ; 1256 - 1257 - module = { 1258 - 1259 - preinitialize: function() { 1260 - if( module.is.dimmer() ) { 1261 - 1262 - $dimmable = $module.parent(); 1263 - $dimmer = $module; 1264 - } 1265 - else { 1266 - $dimmable = $module; 1267 - if( module.has.dimmer() ) { 1268 - if(settings.dimmerName) { 1269 - $dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName); 1270 - } 1271 - else { 1272 - $dimmer = $dimmable.find(selector.dimmer); 1273 - } 1274 - } 1275 - else { 1276 - $dimmer = module.create(); 1277 - } 1278 - } 1279 - }, 1280 - 1281 - initialize: function() { 1282 - module.debug('Initializing dimmer', settings); 1283 - 1284 - module.bind.events(); 1285 - module.set.dimmable(); 1286 - module.instantiate(); 1287 - }, 1288 - 1289 - instantiate: function() { 1290 - module.verbose('Storing instance of module', module); 1291 - instance = module; 1292 - $module 1293 - .data(moduleNamespace, instance) 1294 - ; 1295 - }, 1296 - 1297 - destroy: function() { 1298 - module.verbose('Destroying previous module', $dimmer); 1299 - module.unbind.events(); 1300 - module.remove.variation(); 1301 - $dimmable 1302 - .off(eventNamespace) 1303 - ; 1304 - }, 1305 - 1306 - bind: { 1307 - events: function() { 1308 - if(settings.on == 'hover') { 1309 - $dimmable 1310 - .on('mouseenter' + eventNamespace, module.show) 1311 - .on('mouseleave' + eventNamespace, module.hide) 1312 - ; 1313 - } 1314 - else if(settings.on == 'click') { 1315 - $dimmable 1316 - .on(clickEvent + eventNamespace, module.toggle) 1317 - ; 1318 - } 1319 - if( module.is.page() ) { 1320 - module.debug('Setting as a page dimmer', $dimmable); 1321 - module.set.pageDimmer(); 1322 - } 1323 - 1324 - if( module.is.closable() ) { 1325 - module.verbose('Adding dimmer close event', $dimmer); 1326 - $dimmable 1327 - .on(clickEvent + eventNamespace, selector.dimmer, module.event.click) 1328 - ; 1329 - } 1330 - } 1331 - }, 1332 - 1333 - unbind: { 1334 - events: function() { 1335 - $module 1336 - .removeData(moduleNamespace) 1337 - ; 1338 - $dimmable 1339 - .off(eventNamespace) 1340 - ; 1341 - } 1342 - }, 1343 - 1344 - event: { 1345 - click: function(event) { 1346 - module.verbose('Determining if event occurred on dimmer', event); 1347 - if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) { 1348 - module.hide(); 1349 - event.stopImmediatePropagation(); 1350 - } 1351 - } 1352 - }, 1353 - 1354 - addContent: function(element) { 1355 - var 1356 - $content = $(element) 1357 - ; 1358 - module.debug('Add content to dimmer', $content); 1359 - if($content.parent()[0] !== $dimmer[0]) { 1360 - $content.detach().appendTo($dimmer); 1361 - } 1362 - }, 1363 - 1364 - create: function() { 1365 - var 1366 - $element = $( settings.template.dimmer(settings) ) 1367 - ; 1368 - if(settings.dimmerName) { 1369 - module.debug('Creating named dimmer', settings.dimmerName); 1370 - $element.addClass(settings.dimmerName); 1371 - } 1372 - $element 1373 - .appendTo($dimmable) 1374 - ; 1375 - return $element; 1376 - }, 1377 - 1378 - show: function(callback) { 1379 - callback = $.isFunction(callback) 1380 - ? callback 1381 - : function(){} 1382 - ; 1383 - module.debug('Showing dimmer', $dimmer, settings); 1384 - module.set.variation(); 1385 - if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) { 1386 - module.animate.show(callback); 1387 - settings.onShow.call(element); 1388 - settings.onChange.call(element); 1389 - } 1390 - else { 1391 - module.debug('Dimmer is already shown or disabled'); 1392 - } 1393 - }, 1394 - 1395 - hide: function(callback) { 1396 - callback = $.isFunction(callback) 1397 - ? callback 1398 - : function(){} 1399 - ; 1400 - if( module.is.dimmed() || module.is.animating() ) { 1401 - module.debug('Hiding dimmer', $dimmer); 1402 - module.animate.hide(callback); 1403 - settings.onHide.call(element); 1404 - settings.onChange.call(element); 1405 - } 1406 - else { 1407 - module.debug('Dimmer is not visible'); 1408 - } 1409 - }, 1410 - 1411 - toggle: function() { 1412 - module.verbose('Toggling dimmer visibility', $dimmer); 1413 - if( !module.is.dimmed() ) { 1414 - module.show(); 1415 - } 1416 - else { 1417 - if ( module.is.closable() ) { 1418 - module.hide(); 1419 - } 1420 - } 1421 - }, 1422 - 1423 - animate: { 1424 - show: function(callback) { 1425 - callback = $.isFunction(callback) 1426 - ? callback 1427 - : function(){} 1428 - ; 1429 - if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { 1430 - if(settings.useFlex) { 1431 - module.debug('Using flex dimmer'); 1432 - module.remove.legacy(); 1433 - } 1434 - else { 1435 - module.debug('Using legacy non-flex dimmer'); 1436 - module.set.legacy(); 1437 - } 1438 - if(settings.opacity !== 'auto') { 1439 - module.set.opacity(); 1440 - } 1441 - $dimmer 1442 - .transition({ 1443 - displayType : settings.useFlex 1444 - ? 'flex' 1445 - : 'block', 1446 - animation : settings.transition + ' in', 1447 - queue : false, 1448 - duration : module.get.duration(), 1449 - useFailSafe : true, 1450 - onStart : function() { 1451 - module.set.dimmed(); 1452 - }, 1453 - onComplete : function() { 1454 - module.set.active(); 1455 - callback(); 1456 - } 1457 - }) 1458 - ; 1459 - } 1460 - else { 1461 - module.verbose('Showing dimmer animation with javascript'); 1462 - module.set.dimmed(); 1463 - if(settings.opacity == 'auto') { 1464 - settings.opacity = 0.8; 1465 - } 1466 - $dimmer 1467 - .stop() 1468 - .css({ 1469 - opacity : 0, 1470 - width : '100%', 1471 - height : '100%' 1472 - }) 1473 - .fadeTo(module.get.duration(), settings.opacity, function() { 1474 - $dimmer.removeAttr('style'); 1475 - module.set.active(); 1476 - callback(); 1477 - }) 1478 - ; 1479 - } 1480 - }, 1481 - hide: function(callback) { 1482 - callback = $.isFunction(callback) 1483 - ? callback 1484 - : function(){} 1485 - ; 1486 - if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { 1487 - module.verbose('Hiding dimmer with css'); 1488 - $dimmer 1489 - .transition({ 1490 - displayType : settings.useFlex 1491 - ? 'flex' 1492 - : 'block', 1493 - animation : settings.transition + ' out', 1494 - queue : false, 1495 - duration : module.get.duration(), 1496 - useFailSafe : true, 1497 - onComplete : function() { 1498 - module.remove.dimmed(); 1499 - module.remove.variation(); 1500 - module.remove.active(); 1501 - callback(); 1502 - } 1503 - }) 1504 - ; 1505 - } 1506 - else { 1507 - module.verbose('Hiding dimmer with javascript'); 1508 - $dimmer 1509 - .stop() 1510 - .fadeOut(module.get.duration(), function() { 1511 - module.remove.dimmed(); 1512 - module.remove.active(); 1513 - $dimmer.removeAttr('style'); 1514 - callback(); 1515 - }) 1516 - ; 1517 - } 1518 - } 1519 - }, 1520 - 1521 - get: { 1522 - dimmer: function() { 1523 - return $dimmer; 1524 - }, 1525 - duration: function() { 1526 - if(typeof settings.duration == 'object') { 1527 - if( module.is.active() ) { 1528 - return settings.duration.hide; 1529 - } 1530 - else { 1531 - return settings.duration.show; 1532 - } 1533 - } 1534 - return settings.duration; 1535 - } 1536 - }, 1537 - 1538 - has: { 1539 - dimmer: function() { 1540 - if(settings.dimmerName) { 1541 - return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0); 1542 - } 1543 - else { 1544 - return ( $module.find(selector.dimmer).length > 0 ); 1545 - } 1546 - } 1547 - }, 1548 - 1549 - is: { 1550 - active: function() { 1551 - return $dimmer.hasClass(className.active); 1552 - }, 1553 - animating: function() { 1554 - return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) ); 1555 - }, 1556 - closable: function() { 1557 - if(settings.closable == 'auto') { 1558 - if(settings.on == 'hover') { 1559 - return false; 1560 - } 1561 - return true; 1562 - } 1563 - return settings.closable; 1564 - }, 1565 - dimmer: function() { 1566 - return $module.hasClass(className.dimmer); 1567 - }, 1568 - dimmable: function() { 1569 - return $module.hasClass(className.dimmable); 1570 - }, 1571 - dimmed: function() { 1572 - return $dimmable.hasClass(className.dimmed); 1573 - }, 1574 - disabled: function() { 1575 - return $dimmable.hasClass(className.disabled); 1576 - }, 1577 - enabled: function() { 1578 - return !module.is.disabled(); 1579 - }, 1580 - page: function () { 1581 - return $dimmable.is('body'); 1582 - }, 1583 - pageDimmer: function() { 1584 - return $dimmer.hasClass(className.pageDimmer); 1585 - } 1586 - }, 1587 - 1588 - can: { 1589 - show: function() { 1590 - return !$dimmer.hasClass(className.disabled); 1591 - } 1592 - }, 1593 - 1594 - set: { 1595 - opacity: function(opacity) { 1596 - var 1597 - color = $dimmer.css('background-color'), 1598 - colorArray = color.split(','), 1599 - isRGB = (colorArray && colorArray.length >= 3) 1600 - ; 1601 - opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity; 1602 - if(isRGB) { 1603 - colorArray[2] = colorArray[2].replace(')',''); 1604 - colorArray[3] = opacity + ')'; 1605 - color = colorArray.join(','); 1606 - } 1607 - else { 1608 - color = 'rgba(0, 0, 0, ' + opacity + ')'; 1609 - } 1610 - module.debug('Setting opacity to', opacity); 1611 - $dimmer.css('background-color', color); 1612 - }, 1613 - legacy: function() { 1614 - $dimmer.addClass(className.legacy); 1615 - }, 1616 - active: function() { 1617 - $dimmer.addClass(className.active); 1618 - }, 1619 - dimmable: function() { 1620 - $dimmable.addClass(className.dimmable); 1621 - }, 1622 - dimmed: function() { 1623 - $dimmable.addClass(className.dimmed); 1624 - }, 1625 - pageDimmer: function() { 1626 - $dimmer.addClass(className.pageDimmer); 1627 - }, 1628 - disabled: function() { 1629 - $dimmer.addClass(className.disabled); 1630 - }, 1631 - variation: function(variation) { 1632 - variation = variation || settings.variation; 1633 - if(variation) { 1634 - $dimmer.addClass(variation); 1635 - } 1636 - } 1637 - }, 1638 - 1639 - remove: { 1640 - active: function() { 1641 - $dimmer 1642 - .removeClass(className.active) 1643 - ; 1644 - }, 1645 - legacy: function() { 1646 - $dimmer.removeClass(className.legacy); 1647 - }, 1648 - dimmed: function() { 1649 - $dimmable.removeClass(className.dimmed); 1650 - }, 1651 - disabled: function() { 1652 - $dimmer.removeClass(className.disabled); 1653 - }, 1654 - variation: function(variation) { 1655 - variation = variation || settings.variation; 1656 - if(variation) { 1657 - $dimmer.removeClass(variation); 1658 - } 1659 - } 1660 - }, 1661 - 1662 - setting: function(name, value) { 1663 - module.debug('Changing setting', name, value); 1664 - if( $.isPlainObject(name) ) { 1665 - $.extend(true, settings, name); 1666 - } 1667 - else if(value !== undefined) { 1668 - if($.isPlainObject(settings[name])) { 1669 - $.extend(true, settings[name], value); 1670 - } 1671 - else { 1672 - settings[name] = value; 1673 - } 1674 - } 1675 - else { 1676 - return settings[name]; 1677 - } 1678 - }, 1679 - internal: function(name, value) { 1680 - if( $.isPlainObject(name) ) { 1681 - $.extend(true, module, name); 1682 - } 1683 - else if(value !== undefined) { 1684 - module[name] = value; 1685 - } 1686 - else { 1687 - return module[name]; 1688 - } 1689 - }, 1690 - debug: function() { 1691 - if(!settings.silent && settings.debug) { 1692 - if(settings.performance) { 1693 - module.performance.log(arguments); 1694 - } 1695 - else { 1696 - module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); 1697 - module.debug.apply(console, arguments); 1698 - } 1699 - } 1700 - }, 1701 - verbose: function() { 1702 - if(!settings.silent && settings.verbose && settings.debug) { 1703 - if(settings.performance) { 1704 - module.performance.log(arguments); 1705 - } 1706 - else { 1707 - module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); 1708 - module.verbose.apply(console, arguments); 1709 - } 1710 - } 1711 - }, 1712 - error: function() { 1713 - if(!settings.silent) { 1714 - module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); 1715 - module.error.apply(console, arguments); 1716 - } 1717 - }, 1718 - performance: { 1719 - log: function(message) { 1720 - var 1721 - currentTime, 1722 - executionTime, 1723 - previousTime 1724 - ; 1725 - if(settings.performance) { 1726 - currentTime = new Date().getTime(); 1727 - previousTime = time || currentTime; 1728 - executionTime = currentTime - previousTime; 1729 - time = currentTime; 1730 - performance.push({ 1731 - 'Name' : message[0], 1732 - 'Arguments' : [].slice.call(message, 1) || '', 1733 - 'Element' : element, 1734 - 'Execution Time' : executionTime 1735 - }); 1736 - } 1737 - clearTimeout(module.performance.timer); 1738 - module.performance.timer = setTimeout(module.performance.display, 500); 1739 - }, 1740 - display: function() { 1741 - var 1742 - title = settings.name + ':', 1743 - totalTime = 0 1744 - ; 1745 - time = false; 1746 - clearTimeout(module.performance.timer); 1747 - $.each(performance, function(index, data) { 1748 - totalTime += data['Execution Time']; 1749 - }); 1750 - title += ' ' + totalTime + 'ms'; 1751 - if(moduleSelector) { 1752 - title += ' \'' + moduleSelector + '\''; 1753 - } 1754 - if($allModules.length > 1) { 1755 - title += ' ' + '(' + $allModules.length + ')'; 1756 - } 1757 - if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { 1758 - console.groupCollapsed(title); 1759 - if(console.table) { 1760 - console.table(performance); 1761 - } 1762 - else { 1763 - $.each(performance, function(index, data) { 1764 - console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); 1765 - }); 1766 - } 1767 - console.groupEnd(); 1768 - } 1769 - performance = []; 1770 - } 1771 - }, 1772 - invoke: function(query, passedArguments, context) { 1773 - var 1774 - object = instance, 1775 - maxDepth, 1776 - found, 1777 - response 1778 - ; 1779 - passedArguments = passedArguments || queryArguments; 1780 - context = element || context; 1781 - if(typeof query == 'string' && object !== undefined) { 1782 - query = query.split(/[\. ]/); 1783 - maxDepth = query.length - 1; 1784 - $.each(query, function(depth, value) { 1785 - var camelCaseValue = (depth != maxDepth) 1786 - ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) 1787 - : query 1788 - ; 1789 - if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { 1790 - object = object[camelCaseValue]; 1791 - } 1792 - else if( object[camelCaseValue] !== undefined ) { 1793 - found = object[camelCaseValue]; 1794 - return false; 1795 - } 1796 - else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { 1797 - object = object[value]; 1798 - } 1799 - else if( object[value] !== undefined ) { 1800 - found = object[value]; 1801 - return false; 1802 - } 1803 - else { 1804 - module.error(error.method, query); 1805 - return false; 1806 - } 1807 - }); 1808 - } 1809 - if ( $.isFunction( found ) ) { 1810 - response = found.apply(context, passedArguments); 1811 - } 1812 - else if(found !== undefined) { 1813 - response = found; 1814 - } 1815 - if(Array.isArray(returnedValue)) { 1816 - returnedValue.push(response); 1817 - } 1818 - else if(returnedValue !== undefined) { 1819 - returnedValue = [returnedValue, response]; 1820 - } 1821 - else if(response !== undefined) { 1822 - returnedValue = response; 1823 - } 1824 - return found; 1825 - } 1826 - }; 1827 - 1828 - module.preinitialize(); 1829 - 1830 - if(methodInvoked) { 1831 - if(instance === undefined) { 1832 - module.initialize(); 1833 - } 1834 - module.invoke(query); 1835 - } 1836 - else { 1837 - if(instance !== undefined) { 1838 - instance.invoke('destroy'); 1839 - } 1840 - module.initialize(); 1841 - } 1842 - }) 1843 - ; 1844 - 1845 - return (returnedValue !== undefined) 1846 - ? returnedValue 1847 - : this 1848 - ; 1849 - }; 1850 - 1851 - $.fn.dimmer.settings = { 1852 - 1853 - name : 'Dimmer', 1854 - namespace : 'dimmer', 1855 - 1856 - silent : false, 1857 - debug : false, 1858 - verbose : false, 1859 - performance : true, 1860 - 1861 - // whether should use flex layout 1862 - useFlex : true, 1863 - 1864 - // name to distinguish between multiple dimmers in context 1865 - dimmerName : false, 1866 - 1867 - // whether to add a variation type 1868 - variation : false, 1869 - 1870 - // whether to bind close events 1871 - closable : 'auto', 1872 - 1873 - // whether to use css animations 1874 - useCSS : true, 1875 - 1876 - // css animation to use 1877 - transition : 'fade', 1878 - 1879 - // event to bind to 1880 - on : false, 1881 - 1882 - // overriding opacity value 1883 - opacity : 'auto', 1884 - 1885 - // transition durations 1886 - duration : { 1887 - show : 500, 1888 - hide : 500 1889 - }, 1890 - // whether the dynamically created dimmer should have a loader 1891 - displayLoader: false, 1892 - loaderText : false, 1893 - loaderVariation : '', 1894 - 1895 - onChange : function(){}, 1896 - onShow : function(){}, 1897 - onHide : function(){}, 1898 - 1899 - error : { 1900 - method : 'The method you called is not defined.' 1901 - }, 1902 - 1903 - className : { 1904 - active : 'active', 1905 - animating : 'animating', 1906 - dimmable : 'dimmable', 1907 - dimmed : 'dimmed', 1908 - dimmer : 'dimmer', 1909 - disabled : 'disabled', 1910 - hide : 'hide', 1911 - legacy : 'legacy', 1912 - pageDimmer : 'page', 1913 - show : 'show', 1914 - loader : 'ui loader' 1915 - }, 1916 - 1917 - selector: { 1918 - dimmer : '> .ui.dimmer', 1919 - content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' 1920 - }, 1921 - 1922 - template: { 1923 - dimmer: function(settings) { 1924 - var d = $('<div/>').addClass('ui dimmer'),l; 1925 - if(settings.displayLoader) { 1926 - l = $('<div/>') 1927 - .addClass(settings.className.loader) 1928 - .addClass(settings.loaderVariation); 1929 - if(!!settings.loaderText){ 1930 - l.text(settings.loaderText); 1931 - l.addClass('text'); 1932 - } 1933 - d.append(l); 1934 - } 1935 - return d; 1936 - } 1937 - } 1938 - 1939 - }; 1940 - 1941 - })( jQuery, window, document ); 1942 - 1943 - /*! 1944 1190 * # Fomantic-UI - Dropdown 1945 1191 * http://github.com/fomantic/Fomantic-UI/ 1946 1192 *

-1

web_src/fomantic/semantic.json

··· 23 23 "components": [ 24 24 "api", 25 25 "button", 26 - "dimmer", 27 26 "dropdown", 28 27 "form", 29 28 "menu",

+47

web_src/js/modules/dimmer.ts

··· 1 + import $ from 'jquery'; 2 + 3 + class Dimmer { 4 + dimmerEl: HTMLDivElement; 5 + active: boolean; 6 + 7 + constructor() { 8 + this.dimmerEl = document.querySelector('body > div.ui.dimmer') as HTMLDivElement; 9 + if (!this.dimmerEl) { 10 + this.dimmerEl = document.createElement('div'); 11 + this.dimmerEl.classList.add('ui', 'dimmer', 'transition'); 12 + document.body.append(this.dimmerEl); 13 + } 14 + } 15 + 16 + // eslint-disable-next-line @typescript-eslint/no-explicit-any 17 + dimmer(functionName: string, ...args: any[]) { 18 + if (functionName === 'add content') { 19 + this.dimmerEl.append(args[0][0]); 20 + } else if (functionName === 'get dimmer') { 21 + return $(this.dimmerEl); 22 + } else if (functionName === 'show') { 23 + this.dimmerEl.classList.add('active'); 24 + this.dimmerEl.classList.remove('hidden'); 25 + this.active = true; 26 + } else if (functionName === 'hide') { 27 + this.dimmerEl.classList.remove('active'); 28 + this.dimmerEl.classList.add('hidden'); 29 + this.active = false; 30 + } else if (functionName === 'is active') { 31 + return this.active; 32 + } 33 + } 34 + 35 + // JQuery compatibility functions. 36 + get(_index: number): HTMLElement { 37 + return document.body; 38 + } 39 + removeClass() {} 40 + hasClass() {} 41 + } 42 + 43 + export function initDimmer() { 44 + $.fn.dimmer = (arg: string | object) => { 45 + if (typeof arg === 'object') return new Dimmer(); 46 + }; 47 + }

+2

web_src/js/modules/fomantic.js

··· 6 6 import {initAriaModalPatch} from './fomantic/modal.js'; 7 7 import {initFomanticTransition} from './fomantic/transition.js'; 8 8 import {svg} from '../svg.js'; 9 + import {initDimmer} from './dimmer.ts'; 9 10 10 11 export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)'); 11 12 ··· 31 32 initAriaFormFieldPatch(); 32 33 initAriaDropdownPatch(); 33 34 initAriaModalPatch(); 35 + initDimmer(); 34 36 }

Configure Feed

Configure Feed