Remove fomantic dimmer module (#30723)

Tested extensively using modal which is the only dependant.
This commit is contained in:
silverwind 2024-04-29 16:49:50 +02:00 committed by GitHub
parent e80466f734
commit a21ca9b5a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 62 additions and 1116 deletions

View File

@ -680,10 +680,6 @@ input:-webkit-autofill:active,
box-shadow: 0 6px 18px var(--color-shadow) !important; box-shadow: 0 6px 18px var(--color-shadow) !important;
} }
.ui.dimmer {
background: var(--color-overlay-backdrop);
}
.ui.dropdown .menu > .header { .ui.dropdown .menu > .header {
font-size: 0.8em; font-size: 0.8em;
} }

View File

@ -16,6 +16,7 @@
@import "./modules/table.css"; @import "./modules/table.css";
@import "./modules/card.css"; @import "./modules/card.css";
@import "./modules/checkbox.css"; @import "./modules/checkbox.css";
@import "./modules/dimmer.css";
@import "./modules/modal.css"; @import "./modules/modal.css";
@import "./modules/select.css"; @import "./modules/select.css";

View File

@ -0,0 +1,30 @@
/* These are the remnants of the fomantic dimmer module */
.ui.dimmer {
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-overlay-backdrop);
opacity: 0;
z-index: 1000;
overflow-y: auto;
justify-content: center;
padding: 8px 0;
animation-name: fadein;
animation-duration: .2s;
user-select: none;
}
.ui.active.dimmer {
display: flex;
opacity: 1;
}
.ui.dimmer > * {
position: static;
margin-top: auto !important;
margin-bottom: auto !important;
}

View File

@ -8,363 +8,6 @@
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* *
*/ */
/*!
* # Fomantic-UI - Dimmer
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Dimmer
*******************************/
.dimmable:not(body) {
position: relative;
}
.ui.dimmer {
display: none;
position: absolute;
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
padding: 1em;
background: rgba(0, 0, 0, 0.85);
opacity: 0;
line-height: 1;
animation-fill-mode: both;
animation-duration: 0.5s;
transition: background-color 0.5s linear;
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
will-change: opacity;
z-index: 1000;
}
/* Dimmer Content */
.ui.dimmer > .content {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
color: #FFFFFF;
}
/* Loose Coupling */
.ui.segment > .ui.dimmer:not(.page) {
border-radius: inherit;
}
/* Scrollbars */
/*******************************
States
*******************************/
/* Animating */
.animating.dimmable:not(body),
.dimmed.dimmable:not(body) {
overflow: hidden;
}
/* Animating / Active / Visible */
.dimmed.dimmable > .ui.animating.dimmer,
.dimmed.dimmable > .ui.visible.dimmer,
.ui.active.dimmer {
display: flex;
opacity: 1;
}
/* Disabled */
.ui.disabled.dimmer {
width: 0 !important;
height: 0 !important;
}
/*******************************
Variations
*******************************/
/*--------------
Legacy
---------------*/
/* Animating / Active / Visible */
.dimmed.dimmable > .ui.animating.legacy.dimmer,
.dimmed.dimmable > .ui.visible.legacy.dimmer,
.ui.active.legacy.dimmer {
display: block;
}
/*--------------
Alignment
---------------*/
.ui[class*="top aligned"].dimmer {
justify-content: flex-start;
}
.ui[class*="bottom aligned"].dimmer {
justify-content: flex-end;
}
/*--------------
Page
---------------*/
.ui.page.dimmer {
position: fixed;
transform-style: '';
perspective: 2000px;
transform-origin: center center;
}
.ui.page.dimmer.modals {
-moz-perspective: none;
}
body.animating.in.dimmable,
body.dimmed.dimmable {
overflow: hidden;
}
body.dimmable > .dimmer {
position: fixed;
}
/*--------------
Blurring
---------------*/
.blurring.dimmable > :not(.dimmer) {
filter: initial;
transition: 800ms filter ease;
}
.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
filter: blur(5px) grayscale(0.7);
}
/* Dimmer Color */
.blurring.dimmable > .dimmer {
background: rgba(0, 0, 0, 0.6);
}
.blurring.dimmable > .inverted.dimmer {
background: rgba(255, 255, 255, 0.6);
}
/*--------------
Aligned
---------------*/
.ui.dimmer > .top.aligned.content > * {
vertical-align: top;
}
.ui.dimmer > .bottom.aligned.content > * {
vertical-align: bottom;
}
/*--------------
Shades
---------------*/
.medium.medium.medium.medium.medium.dimmer {
background: rgba(0, 0, 0, 0.65);
}
.light.light.light.light.light.dimmer {
background: rgba(0, 0, 0, 0.45);
}
.very.light.light.light.light.dimmer {
background: rgba(0, 0, 0, 0.25);
}
/*--------------
Simple
---------------*/
/* Displays without javascript */
.ui.simple.dimmer {
display: block;
overflow: hidden;
opacity: 0;
width: 0;
height: 0;
z-index: -100;
background: rgba(0, 0, 0, 0);
}
.dimmed.dimmable > .ui.simple.dimmer {
overflow: visible;
opacity: 1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 1;
}
.ui.simple.inverted.dimmer {
background: rgba(255, 255, 255, 0);
}
.dimmed.dimmable > .ui.simple.inverted.dimmer {
background: rgba(255, 255, 255, 0.85);
}
/*--------------
Partially
----------------*/
.ui[class*="top dimmer"],
.ui[class*="center dimmer"],
.ui[class*="bottom dimmer"] {
height: auto;
}
.ui[class*="bottom dimmer"] {
top: auto !important;
bottom: 0;
}
.ui[class*="center dimmer"] {
top: 50% !important;
transform: translateY(-50%);
-webkit-transform: translateY(calc(-50% - 0.5px));
}
.ui.segment > .ui.ui[class*="top dimmer"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ui.segment > .ui.ui[class*="center dimmer"] {
border-radius: 0;
}
.ui.segment > .ui.ui[class*="bottom dimmer"] {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ui[class*="center dimmer"].transition[class*="fade up"].in {
animation-name: fadeInUpCenter;
}
.ui[class*="center dimmer"].transition[class*="fade down"].in {
animation-name: fadeInDownCenter;
}
.ui[class*="center dimmer"].transition[class*="fade up"].out {
animation-name: fadeOutUpCenter;
}
.ui[class*="center dimmer"].transition[class*="fade down"].out {
animation-name: fadeOutDownCenter;
}
.ui[class*="center dimmer"].bounce.transition {
animation-name: bounceCenter;
}
@keyframes fadeInUpCenter {
0% {
opacity: 0;
transform: translateY(-40%);
-webkit-transform: translateY(calc(-40% - 0.5px));
}
100% {
opacity: 1;
transform: translateY(-50%);
-webkit-transform: translateY(calc(-50% - 0.5px));
}
}
@keyframes fadeInDownCenter {
0% {
opacity: 0;
transform: translateY(-60%);
-webkit-transform: translateY(calc(-60% - 0.5px));
}
100% {
opacity: 1;
transform: translateY(-50%);
-webkit-transform: translateY(calc(-50% - 0.5px));
}
}
@keyframes fadeOutUpCenter {
0% {
opacity: 1;
transform: translateY(-50%);
-webkit-transform: translateY(calc(-50% - 0.5px));
}
100% {
opacity: 0;
transform: translateY(-45%);
-webkit-transform: translateY(calc(-45% - 0.5px));
}
}
@keyframes fadeOutDownCenter {
0% {
opacity: 1;
transform: translateY(-50%);
-webkit-transform: translateY(calc(-50% - 0.5px));
}
100% {
opacity: 0;
transform: translateY(-55%);
-webkit-transform: translateY(calc(-55% - 0.5px));
}
}
@keyframes bounceCenter {
0%, 20%, 50%, 80%, 100% {
transform: translateY(-50%);
-webkit-transform: translateY(calc(-50% - 0.5px));
}
40% {
transform: translateY(calc(-50% - 30px));
}
60% {
transform: translateY(calc(-50% - 15px));
}
}
/*******************************
Theme Overrides
*******************************/
/*******************************
User Overrides
*******************************/
/*! /*!
* # Fomantic-UI - Dropdown * # Fomantic-UI - Dropdown
* http://github.com/fomantic/Fomantic-UI/ * http://github.com/fomantic/Fomantic-UI/

View File

@ -1184,760 +1184,6 @@ $.api.settings = {
})( jQuery, window, document );
/*!
* # Fomantic-UI - Dimmer
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
;(function ($, window, document, undefined) {
'use strict';
$.isFunction = $.isFunction || function(obj) {
return typeof obj === "function" && typeof obj.nodeType !== "number";
};
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
? self
: Function('return this')()
;
$.fn.dimmer = function(parameters) {
var
$allModules = $(this),
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
returnedValue
;
$allModules
.each(function() {
var
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.dimmer.settings, parameters)
: $.extend({}, $.fn.dimmer.settings),
selector = settings.selector,
namespace = settings.namespace,
className = settings.className,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
clickEvent = "click", unstableClickEvent = ('ontouchstart' in document.documentElement)
? 'touchstart'
: 'click',
$module = $(this),
$dimmer,
$dimmable,
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
preinitialize: function() {
if( module.is.dimmer() ) {
$dimmable = $module.parent();
$dimmer = $module;
}
else {
$dimmable = $module;
if( module.has.dimmer() ) {
if(settings.dimmerName) {
$dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName);
}
else {
$dimmer = $dimmable.find(selector.dimmer);
}
}
else {
$dimmer = module.create();
}
}
},
initialize: function() {
module.debug('Initializing dimmer', settings);
module.bind.events();
module.set.dimmable();
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of module', module);
instance = module;
$module
.data(moduleNamespace, instance)
;
},
destroy: function() {
module.verbose('Destroying previous module', $dimmer);
module.unbind.events();
module.remove.variation();
$dimmable
.off(eventNamespace)
;
},
bind: {
events: function() {
if(settings.on == 'hover') {
$dimmable
.on('mouseenter' + eventNamespace, module.show)
.on('mouseleave' + eventNamespace, module.hide)
;
}
else if(settings.on == 'click') {
$dimmable
.on(clickEvent + eventNamespace, module.toggle)
;
}
if( module.is.page() ) {
module.debug('Setting as a page dimmer', $dimmable);
module.set.pageDimmer();
}
if( module.is.closable() ) {
module.verbose('Adding dimmer close event', $dimmer);
$dimmable
.on(clickEvent + eventNamespace, selector.dimmer, module.event.click)
;
}
}
},
unbind: {
events: function() {
$module
.removeData(moduleNamespace)
;
$dimmable
.off(eventNamespace)
;
}
},
event: {
click: function(event) {
module.verbose('Determining if event occured on dimmer', event);
if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
module.hide();
event.stopImmediatePropagation();
}
}
},
addContent: function(element) {
var
$content = $(element)
;
module.debug('Add content to dimmer', $content);
if($content.parent()[0] !== $dimmer[0]) {
$content.detach().appendTo($dimmer);
}
},
create: function() {
var
$element = $( settings.template.dimmer(settings) )
;
if(settings.dimmerName) {
module.debug('Creating named dimmer', settings.dimmerName);
$element.addClass(settings.dimmerName);
}
$element
.appendTo($dimmable)
;
return $element;
},
show: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
module.debug('Showing dimmer', $dimmer, settings);
module.set.variation();
if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
module.animate.show(callback);
settings.onShow.call(element);
settings.onChange.call(element);
}
else {
module.debug('Dimmer is already shown or disabled');
}
},
hide: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( module.is.dimmed() || module.is.animating() ) {
module.debug('Hiding dimmer', $dimmer);
module.animate.hide(callback);
settings.onHide.call(element);
settings.onChange.call(element);
}
else {
module.debug('Dimmer is not visible');
}
},
toggle: function() {
module.verbose('Toggling dimmer visibility', $dimmer);
if( !module.is.dimmed() ) {
module.show();
}
else {
if ( module.is.closable() ) {
module.hide();
}
}
},
animate: {
show: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
if(settings.useFlex) {
module.debug('Using flex dimmer');
module.remove.legacy();
}
else {
module.debug('Using legacy non-flex dimmer');
module.set.legacy();
}
if(settings.opacity !== 'auto') {
module.set.opacity();
}
$dimmer
.transition({
displayType : settings.useFlex
? 'flex'
: 'block',
animation : settings.transition + ' in',
queue : false,
duration : module.get.duration(),
useFailSafe : true,
onStart : function() {
module.set.dimmed();
},
onComplete : function() {
module.set.active();
callback();
}
})
;
}
else {
module.verbose('Showing dimmer animation with javascript');
module.set.dimmed();
if(settings.opacity == 'auto') {
settings.opacity = 0.8;
}
$dimmer
.stop()
.css({
opacity : 0,
width : '100%',
height : '100%'
})
.fadeTo(module.get.duration(), settings.opacity, function() {
$dimmer.removeAttr('style');
module.set.active();
callback();
})
;
}
},
hide: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
module.verbose('Hiding dimmer with css');
$dimmer
.transition({
displayType : settings.useFlex
? 'flex'
: 'block',
animation : settings.transition + ' out',
queue : false,
duration : module.get.duration(),
useFailSafe : true,
onComplete : function() {
module.remove.dimmed();
module.remove.variation();
module.remove.active();
callback();
}
})
;
}
else {
module.verbose('Hiding dimmer with javascript');
$dimmer
.stop()
.fadeOut(module.get.duration(), function() {
module.remove.dimmed();
module.remove.active();
$dimmer.removeAttr('style');
callback();
})
;
}
}
},
get: {
dimmer: function() {
return $dimmer;
},
duration: function() {
if(typeof settings.duration == 'object') {
if( module.is.active() ) {
return settings.duration.hide;
}
else {
return settings.duration.show;
}
}
return settings.duration;
}
},
has: {
dimmer: function() {
if(settings.dimmerName) {
return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
}
else {
return ( $module.find(selector.dimmer).length > 0 );
}
}
},
is: {
active: function() {
return $dimmer.hasClass(className.active);
},
animating: function() {
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
},
closable: function() {
if(settings.closable == 'auto') {
if(settings.on == 'hover') {
return false;
}
return true;
}
return settings.closable;
},
dimmer: function() {
return $module.hasClass(className.dimmer);
},
dimmable: function() {
return $module.hasClass(className.dimmable);
},
dimmed: function() {
return $dimmable.hasClass(className.dimmed);
},
disabled: function() {
return $dimmable.hasClass(className.disabled);
},
enabled: function() {
return !module.is.disabled();
},
page: function () {
return $dimmable.is('body');
},
pageDimmer: function() {
return $dimmer.hasClass(className.pageDimmer);
}
},
can: {
show: function() {
return !$dimmer.hasClass(className.disabled);
}
},
set: {
opacity: function(opacity) {
var
color = $dimmer.css('background-color'),
colorArray = color.split(','),
isRGB = (colorArray && colorArray.length >= 3)
;
opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity;
if(isRGB) {
colorArray[2] = colorArray[2].replace(')','');
colorArray[3] = opacity + ')';
color = colorArray.join(',');
}
else {
color = 'rgba(0, 0, 0, ' + opacity + ')';
}
module.debug('Setting opacity to', opacity);
$dimmer.css('background-color', color);
},
legacy: function() {
$dimmer.addClass(className.legacy);
},
active: function() {
$dimmer.addClass(className.active);
},
dimmable: function() {
$dimmable.addClass(className.dimmable);
},
dimmed: function() {
$dimmable.addClass(className.dimmed);
},
pageDimmer: function() {
$dimmer.addClass(className.pageDimmer);
},
disabled: function() {
$dimmer.addClass(className.disabled);
},
variation: function(variation) {
variation = variation || settings.variation;
if(variation) {
$dimmer.addClass(variation);
}
}
},
remove: {
active: function() {
$dimmer
.removeClass(className.active)
;
},
legacy: function() {
$dimmer.removeClass(className.legacy);
},
dimmed: function() {
$dimmable.removeClass(className.dimmed);
},
disabled: function() {
$dimmer.removeClass(className.disabled);
},
variation: function(variation) {
variation = variation || settings.variation;
if(variation) {
$dimmer.removeClass(variation);
}
}
},
setting: function(name, value) {
module.debug('Changing setting', name, value);
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else if(value !== undefined) {
if($.isPlainObject(settings[name])) {
$.extend(true, settings[name], value);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else if(value !== undefined) {
module[name] = value;
}
else {
return module[name];
}
},
debug: function() {
if(!settings.silent && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(!settings.silent && settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
if(!settings.silent) {
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
module.error.apply(console, arguments);
}
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Element' : element,
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
title = settings.name + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if($allModules.length > 1) {
title += ' ' + '(' + $allModules.length + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
object = instance,
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && object !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
object = object[camelCaseValue];
}
else if( object[camelCaseValue] !== undefined ) {
found = object[camelCaseValue];
return false;
}
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
object = object[value];
}
else if( object[value] !== undefined ) {
found = object[value];
return false;
}
else {
module.error(error.method, query);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
returnedValue = [returnedValue, response];
}
else if(response !== undefined) {
returnedValue = response;
}
return found;
}
};
module.preinitialize();
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
instance.invoke('destroy');
}
module.initialize();
}
})
;
return (returnedValue !== undefined)
? returnedValue
: this
;
};
$.fn.dimmer.settings = {
name : 'Dimmer',
namespace : 'dimmer',
silent : false,
debug : false,
verbose : false,
performance : true,
// whether should use flex layout
useFlex : true,
// name to distinguish between multiple dimmers in context
dimmerName : false,
// whether to add a variation type
variation : false,
// whether to bind close events
closable : 'auto',
// whether to use css animations
useCSS : true,
// css animation to use
transition : 'fade',
// event to bind to
on : false,
// overriding opacity value
opacity : 'auto',
// transition durations
duration : {
show : 500,
hide : 500
},
// whether the dynamically created dimmer should have a loader
displayLoader: false,
loaderText : false,
loaderVariation : '',
onChange : function(){},
onShow : function(){},
onHide : function(){},
error : {
method : 'The method you called is not defined.'
},
className : {
active : 'active',
animating : 'animating',
dimmable : 'dimmable',
dimmed : 'dimmed',
dimmer : 'dimmer',
disabled : 'disabled',
hide : 'hide',
legacy : 'legacy',
pageDimmer : 'page',
show : 'show',
loader : 'ui loader'
},
selector: {
dimmer : '> .ui.dimmer',
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
},
template: {
dimmer: function(settings) {
var d = $('<div/>').addClass('ui dimmer'),l;
if(settings.displayLoader) {
l = $('<div/>')
.addClass(settings.className.loader)
.addClass(settings.loaderVariation);
if(!!settings.loaderText){
l.text(settings.loaderText);
l.addClass('text');
}
d.append(l);
}
return d;
}
}
};
})( jQuery, window, document ); })( jQuery, window, document );
/*! /*!

View File

@ -22,7 +22,6 @@
"admin": false, "admin": false,
"components": [ "components": [
"api", "api",
"dimmer",
"dropdown", "dropdown",
"form", "form",
"modal", "modal",

View File

@ -5,6 +5,7 @@ import {initAriaFormFieldPatch} from './fomantic/form.js';
import {initAriaDropdownPatch} from './fomantic/dropdown.js'; import {initAriaDropdownPatch} from './fomantic/dropdown.js';
import {initAriaModalPatch} from './fomantic/modal.js'; import {initAriaModalPatch} from './fomantic/modal.js';
import {initFomanticTransition} from './fomantic/transition.js'; import {initFomanticTransition} from './fomantic/transition.js';
import {initFomanticDimmer} from './fomantic/dimmer.js';
import {svg} from '../svg.js'; import {svg} from '../svg.js';
export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)'); export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
@ -24,6 +25,7 @@ export function initGiteaFomantic() {
}; };
initFomanticTransition(); initFomanticTransition();
initFomanticDimmer();
initFomanticApiPatch(); initFomanticApiPatch();
// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future. // Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.

View File

@ -0,0 +1,29 @@
import $ from 'jquery';
import {queryElemChildren} from '../../utils/dom.js';
export function initFomanticDimmer() {
// stand-in for removed dimmer module
$.fn.dimmer = function (arg0, $el) {
if (arg0 === 'add content') {
const existingDimmer = document.querySelector('body > .ui.dimmer');
if (existingDimmer) {
queryElemChildren(existingDimmer, '*', (el) => el.remove());
this._dimmer = existingDimmer;
} else {
this._dimmer = document.createElement('div');
this._dimmer.classList.add('ui', 'dimmer');
document.body.append(this._dimmer);
}
this._dimmer.append($el[0]);
} else if (arg0 === 'get dimmer') {
return $(this._dimmer);
} else if (arg0 === 'show') {
this._dimmer.classList.add('active');
document.body.classList.add('tw-overflow-hidden');
} else if (arg0 === 'hide') {
this._dimmer.classList.remove('active');
document.body.classList.remove('tw-overflow-hidden');
}
return this;
};
}