Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.
Diff: `+79 −84`, everything becomes much better.
### Improve the dropdown settings.
Move all fomantic-init related code into our `fomantic.js`
Fine-tune some dropdown global settings, see the comments.
Also help to fix the first problem in #23625 , cc: @yp05327
The "language" menu has been simplified, and it works with small-height
window better.
### Use SVG instead of `<i class="delete icon">`
It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind
### Remove incorrect `tabable` CSS class
It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.
### Improve the Repo Topic Edit form
* Simplify the code
* Add a "Cancel" button
* Align elements
Before:
<details>
![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)
</details>
After:
![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
2023-03-26 07:31:26 -04:00
import $ from 'jquery' ;
import { initAriaCheckboxPatch } from './aria/checkbox.js' ;
import { initAriaDropdownPatch } from './aria/dropdown.js' ;
2023-07-03 05:09:38 -04:00
import { initAriaModalPatch } from './aria/modal.js' ;
Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.
Diff: `+79 −84`, everything becomes much better.
### Improve the dropdown settings.
Move all fomantic-init related code into our `fomantic.js`
Fine-tune some dropdown global settings, see the comments.
Also help to fix the first problem in #23625 , cc: @yp05327
The "language" menu has been simplified, and it works with small-height
window better.
### Use SVG instead of `<i class="delete icon">`
It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind
### Remove incorrect `tabable` CSS class
It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.
### Improve the Repo Topic Edit form
* Simplify the code
* Add a "Cancel" button
* Align elements
Before:
<details>
![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)
</details>
After:
![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
2023-03-26 07:31:26 -04:00
import { svg } from '../svg.js' ;
2023-06-23 22:16:15 -04:00
export const fomanticMobileScreen = window . matchMedia ( 'only screen and (max-width: 767.98px)' ) ;
Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.
Diff: `+79 −84`, everything becomes much better.
### Improve the dropdown settings.
Move all fomantic-init related code into our `fomantic.js`
Fine-tune some dropdown global settings, see the comments.
Also help to fix the first problem in #23625 , cc: @yp05327
The "language" menu has been simplified, and it works with small-height
window better.
### Use SVG instead of `<i class="delete icon">`
It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind
### Remove incorrect `tabable` CSS class
It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.
### Improve the Repo Topic Edit form
* Simplify the code
* Add a "Cancel" button
* Align elements
Before:
<details>
![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)
</details>
After:
![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
2023-03-26 07:31:26 -04:00
export function initGiteaFomantic ( ) {
// Silence fomantic's error logging when tabs are used without a target content element
$ . fn . tab . settings . silent = true ;
// Disable the behavior of fomantic to toggle the checkbox when you press enter on a checkbox element.
$ . fn . checkbox . settings . enableEnterKey = false ;
// By default, use "exact match" for full text search
$ . fn . dropdown . settings . fullTextSearch = 'exact' ;
// Do not use "cursor: pointer" for dropdown labels
$ . fn . dropdown . settings . className . label += ' gt-cursor-default' ;
// Always use Gitea's SVG icons
$ . fn . dropdown . settings . templates . label = function ( _value , text , preserveHTML , className ) {
const escape = $ . fn . dropdown . settings . templates . escape ;
return escape ( text , preserveHTML ) + svg ( 'octicon-x' , 16 , ` ${ className . delete } icon ` ) ;
} ;
2023-04-06 20:11:02 -04:00
initFomanticApiPatch ( ) ;
Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.
Diff: `+79 −84`, everything becomes much better.
### Improve the dropdown settings.
Move all fomantic-init related code into our `fomantic.js`
Fine-tune some dropdown global settings, see the comments.
Also help to fix the first problem in #23625 , cc: @yp05327
The "language" menu has been simplified, and it works with small-height
window better.
### Use SVG instead of `<i class="delete icon">`
It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind
### Remove incorrect `tabable` CSS class
It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.
### Improve the Repo Topic Edit form
* Simplify the code
* Add a "Cancel" button
* Align elements
Before:
<details>
![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)
</details>
After:
![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
2023-03-26 07:31:26 -04:00
// 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 ( ) ;
initAriaDropdownPatch ( ) ;
2023-07-03 05:09:38 -04:00
initAriaModalPatch ( ) ;
Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.
Diff: `+79 −84`, everything becomes much better.
### Improve the dropdown settings.
Move all fomantic-init related code into our `fomantic.js`
Fine-tune some dropdown global settings, see the comments.
Also help to fix the first problem in #23625 , cc: @yp05327
The "language" menu has been simplified, and it works with small-height
window better.
### Use SVG instead of `<i class="delete icon">`
It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind
### Remove incorrect `tabable` CSS class
It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.
### Improve the Repo Topic Edit form
* Simplify the code
* Add a "Cancel" button
* Align elements
Before:
<details>
![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)
</details>
After:
![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
2023-03-26 07:31:26 -04:00
}
2023-04-06 20:11:02 -04:00
function initFomanticApiPatch ( ) {
//
// Fomantic API module has some very buggy behaviors:
//
// If encodeParameters=true, it calls `urlEncodedValue` to encode the parameter.
// However, `urlEncodedValue` just tries to "guess" whether the parameter is already encoded, by decoding the parameter and encoding it again.
//
// There are 2 problems:
// 1. It may guess wrong, and skip encoding a parameter which looks like encoded.
// 2. If the parameter can't be decoded, `decodeURIComponent` will throw an error, and the whole request will fail.
//
// This patch only fixes the second error behavior at the moment.
//
const patchKey = '_giteaFomanticApiPatch' ;
const oldApi = $ . api ;
$ . api = $ . fn . api = function ( ... args ) {
const apiCall = oldApi . bind ( this ) ;
const ret = oldApi . apply ( this , args ) ;
if ( typeof args [ 0 ] !== 'string' ) {
const internalGet = apiCall ( 'internal' , 'get' ) ;
if ( ! internalGet . urlEncodedValue [ patchKey ] ) {
const oldUrlEncodedValue = internalGet . urlEncodedValue ;
internalGet . urlEncodedValue = function ( value ) {
try {
return oldUrlEncodedValue ( value ) ;
} catch {
// if Fomantic API module's `urlEncodedValue` throws an error, we encode it by ourselves.
return encodeURIComponent ( value ) ;
}
} ;
internalGet . urlEncodedValue [ patchKey ] = true ;
}
}
return ret ;
} ;
$ . api . settings = oldApi . settings ;
}