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 05:31:26 -06:00
import $ from 'jquery' ;
import { initAriaCheckboxPatch } from './aria/checkbox.js' ;
import { initAriaDropdownPatch } from './aria/dropdown.js' ;
2023-07-03 00:04:50 -06: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 05:31:26 -06:00
import { svg } from '../svg.js' ;
2023-06-23 13:51:43 -06: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 05:31:26 -06: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' ;
2023-09-24 07:42:00 -06:00
// The default selector has a bug: if there is a "search input" in the "menu", Fomantic will only "focus the input" but not "toggle the menu" when the "dropdown icon" is clicked.
// Actually, the "search input in menu" shouldn't be considered as the dropdown's input
$ . fn . dropdown . settings . selector . search = '> input.search, :not(.menu) > .search > input, :not(.menu) input.search' ;
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 05:31:26 -06:00
// 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-08-16 16:12:40 -06:00
// stand-in for removed transition module
$ . fn . transition = function ( arg ) {
if ( arg === 'is supported' ) return true ;
if ( arg === 'is animating' ) return false ;
if ( arg === 'is inward' ) return false ;
if ( arg === 'is outward' ) return false ;
if ( arg === 'stop all' ) return ;
const isIn = arg ? . animation ? . endsWith ( ' in' ) ;
const isOut = arg ? . animation ? . endsWith ( ' out' ) ;
let ret ;
if ( arg === 'show' || isIn ) {
arg ? . onStart ? . ( this ) ;
ret = this . each ( ( _ , el ) => {
el . classList . remove ( 'hidden' ) ;
el . classList . add ( 'visible' ) ;
if ( isIn ) el . classList . add ( 'transition' ) ;
if ( arg ? . displayType ) el . style . setProperty ( 'display' , arg . displayType , 'important' ) ;
arg ? . onShow ? . ( this ) ;
} ) ;
arg ? . onComplete ? . ( this ) ;
} else if ( arg === 'hide' || isOut ) {
arg ? . onStart ? . ( this ) ;
ret = this . each ( ( _ , el ) => {
el . classList . add ( 'hidden' ) ;
el . classList . remove ( 'visible' ) ;
// don't remove the transition class because fomantic didn't do it either
el . style . removeProperty ( 'display' ) ;
arg ? . onHidden ? . ( this ) ;
} ) ;
arg ? . onComplete ? . ( this ) ;
}
return ret ;
} ;
2023-04-06 18:11:02 -06: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 05:31:26 -06: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 00:04:50 -06: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 05:31:26 -06:00
}
2023-04-06 18:11:02 -06: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 ;
}