From a21ca9b5a5e85d2734bd4cd9e308800eda41a524 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 29 Apr 2024 16:49:50 +0200 Subject: [PATCH] Remove fomantic dimmer module (#30723) Tested extensively using modal which is the only dependant. --- web_src/css/base.css | 4 - web_src/css/index.css | 1 + web_src/css/modules/dimmer.css | 30 + web_src/fomantic/build/semantic.css | 357 ------------ web_src/fomantic/build/semantic.js | 754 -------------------------- web_src/fomantic/semantic.json | 1 - web_src/js/modules/fomantic.js | 2 + web_src/js/modules/fomantic/dimmer.js | 29 + 8 files changed, 62 insertions(+), 1116 deletions(-) create mode 100644 web_src/css/modules/dimmer.css create mode 100644 web_src/js/modules/fomantic/dimmer.js diff --git a/web_src/css/base.css b/web_src/css/base.css index 58a5723cb56..df9028b50aa 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -680,10 +680,6 @@ input:-webkit-autofill:active, box-shadow: 0 6px 18px var(--color-shadow) !important; } -.ui.dimmer { - background: var(--color-overlay-backdrop); -} - .ui.dropdown .menu > .header { font-size: 0.8em; } diff --git a/web_src/css/index.css b/web_src/css/index.css index edd6cdca8bd..817f6997da2 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -16,6 +16,7 @@ @import "./modules/table.css"; @import "./modules/card.css"; @import "./modules/checkbox.css"; +@import "./modules/dimmer.css"; @import "./modules/modal.css"; @import "./modules/select.css"; diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css new file mode 100644 index 00000000000..a552d103e53 --- /dev/null +++ b/web_src/css/modules/dimmer.css @@ -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; +} diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 7c404bdb30a..aef7a6bdbee 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -8,363 +8,6 @@ * 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 * http://github.com/fomantic/Fomantic-UI/ diff --git a/web_src/fomantic/build/semantic.js b/web_src/fomantic/build/semantic.js index c150c8d9dbf..1297216a311 100644 --- a/web_src/fomantic/build/semantic.js +++ b/web_src/fomantic/build/semantic.js @@ -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 = $('
').addClass('ui dimmer'),l; - if(settings.displayLoader) { - l = $('
') - .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 ); /*! diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index 489ca7b9b79..63d0b30218f 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -22,7 +22,6 @@ "admin": false, "components": [ "api", - "dimmer", "dropdown", "form", "modal", diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index c04bc6e8636..06e4e97c485 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -5,6 +5,7 @@ import {initAriaFormFieldPatch} from './fomantic/form.js'; import {initAriaDropdownPatch} from './fomantic/dropdown.js'; import {initAriaModalPatch} from './fomantic/modal.js'; import {initFomanticTransition} from './fomantic/transition.js'; +import {initFomanticDimmer} from './fomantic/dimmer.js'; import {svg} from '../svg.js'; export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)'); @@ -24,6 +25,7 @@ export function initGiteaFomantic() { }; initFomanticTransition(); + initFomanticDimmer(); 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. diff --git a/web_src/js/modules/fomantic/dimmer.js b/web_src/js/modules/fomantic/dimmer.js new file mode 100644 index 00000000000..f434e1ca59b --- /dev/null +++ b/web_src/js/modules/fomantic/dimmer.js @@ -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; + }; +}