Fix various Fomantic UI and htmx problems (go-gitea#33851)

Also fix go-gitea#31328, fix go-gitea#33854

Author: wxiaoguang

.dockerignore

@@ -79,7 +79,6 @@ cpu.out
 /public/assets/fonts
 /public/assets/img/avatar
 /vendor
-/web_src/fomantic
 /VERSION
 /.air
 /.go-licenses

web_src/fomantic/build/components/api.js

@@ -754,17 +754,9 @@ $.api = $.fn.api = function(parameters) {
             ;
           },
           urlEncodedValue: function(value) {
-            var
-              decodedValue   = window.decodeURIComponent(value),
-              encodedValue   = window.encodeURIComponent(value),
-              alreadyEncoded = (decodedValue !== value)
-            ;
-            if(alreadyEncoded) {
-              module.debug('URL value is already encoded, avoiding double encoding', value);
-              return value;
-            }
-            module.verbose('Encoding value using encodeURIComponent', value, encodedValue);
-            return encodedValue;
+            // GITEA-PATCH: always encode the value.
+            // Old code does "decodeURIComponent" first to guess whether the value is encoded, it is not right.
+            return window.encodeURIComponent(value);
           },
           defaultData: function() {
             var

web_src/fomantic/build/components/dropdown.js

@@ -31,9 +31,9 @@ $.fn.dropdown = function(parameters) {
     moduleSelector = $allModules.selector || '',
 
     hasTouch       = ('ontouchstart' in document.documentElement),
-    clickEvent      = hasTouch
-        ? 'touchstart'
-        : 'click',
+    // GITEA-PATCH: always "click" as clickEvent, old code used "touchstart" as clickEvent, it is wrong,
+    // because "touchstart" caused problems when users try to scroll and the touch point is in the dropdown.
+    clickEvent      = 'click',
 
     time           = new Date().getTime(),
     performance    = [],
@@ -768,7 +768,7 @@ $.fn.dropdown = function(parameters) {
                     preSelected = preSelected && preSelected!=="" ? preSelected.split(settings.delimiter) : [];
                 }
                 $.each(preSelected,function(index,value){
-                  $item.filter('[data-value="'+value+'"]')
+                  $item.filter('[data-value="'+CSS.escape(value)+'"]') // GITEA-PATCH: use "CSS.escape" for query selector
                       .addClass(className.filtered)
                   ;
                 });
@@ -1027,7 +1027,7 @@ $.fn.dropdown = function(parameters) {
               $input.append('<option disabled selected value></option>');
               $.each(values, function(index, item) {
                 var
-                  value = settings.templates.deQuote(item[fields.value]),
+                  value = settings.templates.escape(item[fields.value]), // GITEA-PATCH: use "escape" for attribute value
                   name = settings.templates.escape(
                     item[fields.name] || '',
                     settings.preserveHTML
@@ -4180,13 +4180,14 @@ $.fn.dropdown.settings.templates = {
       if( itemType === 'item' ) {
         var
           maybeText = (option[fields.text])
-            ? ' data-text="' + deQuote(option[fields.text]) + '"'
+            ? ' data-text="' + escape(option[fields.text]) + '"' // GITEA-PATCH: use "escape" for attribute value
             : '',
           maybeDisabled = (option[fields.disabled])
             ? className.disabled+' '
             : ''
         ;
-        html += '<div class="'+ maybeDisabled + (option[fields.class] ? deQuote(option[fields.class]) : className.item)+'" data-value="' + deQuote(option[fields.value]) + '"' + maybeText + '>';
+        // GITEA-PATCH: use "escape" for attribute value
+        html += '<div class="'+ maybeDisabled + (option[fields.class] ? deQuote(option[fields.class]) : className.item)+'" data-value="' + escape(option[fields.value]) + '"' + maybeText + '>';
         if(option[fields.image]) {
           html += '<img class="'+(option[fields.imageClass] ? deQuote(option[fields.imageClass]) : className.image)+'" src="' + deQuote(option[fields.image]) + '">';
         }

web_src/fomantic/build/fomantic.js

@@ -3,8 +3,4 @@ import './components/dropdown.js';
 import './components/modal.js';
 import './components/search.js';
 
-// Hard forked from Fomantic 2.8.7
-
-// TODO: need to apply the patch from Makefile
-// # fomantic uses "touchstart" as click event for some browsers, it's not ideal, so we force fomantic to always use "click" as click event
-// $(SED_INPLACE) -e 's/clickEvent[ \t]*=/clickEvent = "click", unstableClickEvent =/g' $(FOMANTIC_WORK_DIR)/build/semantic.js
+// Hard-forked from Fomantic UI 2.8.7, patches are commented with "GITEA-PATCH"

web_src/js/features/repo-diff.ts

@@ -196,7 +196,9 @@ function initRepoDiffShowMore() {
       const resp = await response.text();
       const respDoc = parseDom(resp, 'text/html');
       const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body');
-      el.parentElement.replaceWith(...Array.from(respFileBody.children));
+      const respFileBodyChildren = Array.from(respFileBody.children); // respFileBody.children will be empty after replaceWith
+      el.parentElement.replaceWith(...respFileBodyChildren);
+      for (const el of respFileBodyChildren) window.htmx.process(el);
       // FIXME: calling onShowMoreFiles is not quite right here.
       // But since onShowMoreFiles mixes "init diff box" and "init diff body" together,
       // so it still needs to call it to make the "ImageDiff" and something similar work.

web_src/js/globals.d.ts

@@ -64,6 +64,7 @@ interface Window {
   jQuery: typeof import('@types/jquery'),
   htmx: Omit<typeof import('htmx.org/dist/htmx.esm.js').default, 'config'> & {
     config?: Writable<typeof import('htmx.org').default.config>,
+    process?: (elt: Element | string) => void,
   },
   _globalHandlerErrors: Array<ErrorEvent & PromiseRejectionEvent> & {
     _inited: boolean,

web_src/js/modules/fomantic.ts

@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import {initFomanticApiPatch} from './fomantic/api.ts';
 import {initAriaCheckboxPatch} from './fomantic/checkbox.ts';
 import {initAriaFormFieldPatch} from './fomantic/form.ts';
 import {initAriaDropdownPatch} from './fomantic/dropdown.ts';
@@ -27,7 +26,6 @@ export function initGiteaFomantic() {
   initFomanticTransition();
   initFomanticDimmer();
   initFomanticTab();
-  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.
   initAriaCheckboxPatch();