mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-08 22:50:00 +08:00
refactor: replace select2 with slim-select (#5065)
* i cant figure this oooout * fix: closing commandline causing settings page update * remove log * fix event looping issues rerendering selects when updating settings * remove comment * move section back to where it should be * update styling * move redrawing to settings group * no need to save to a variable * types * fix styles * search placeholder * fix structure * fix styles * using slim for the rest of selects * disabled styling * use slim * styling * use slim * multi select styling * use slim * use slim * use slim * use slim * remove everything else related to select2 * last select2 mention * comment * fix(settings page): font family buttons not working * fix: input indicators remaining visible after leaving the login page (underscoore) (#5062) * chore: update node version to 18.19.1 (#5060) * impr(quote): add Code C quotes (penguin-teal) (#5053) * fix: question mark appearing next to unrated quotes * removed unnecessary link --------- Co-authored-by: Ajay kumar <ajaykumar.bit.1995@gmail.com> Co-authored-by: Christian Fehmer <fehmer@users.noreply.github.com> Co-authored-by: penguin-teal <130006737+penguin-teal@users.noreply.github.com>
This commit is contained in:
Jack
GitHub
parent
197f2c36cf
commit
3e0be2e210
19 changed files with 405 additions and 396 deletions
71
frontend/package-lock.json
generated
71
frontend/package-lock.json
generated
|
|
@ -28,7 +28,7 @@
|
|||
"konami": "1.6.3",
|
||||
"lz-ts": "1.1.2",
|
||||
"object-hash": "3.0.0",
|
||||
"select2": "4.1.0-rc.0",
|
||||
"slim-select": "2.8.1",
|
||||
"stemmer": "2.0.0",
|
||||
"throttle-debounce": "3.0.1",
|
||||
"workbox-window": "6.5.4"
|
||||
|
|
@ -42,7 +42,6 @@
|
|||
"@types/jest": "27.5.0",
|
||||
"@types/jquery": "3.5.14",
|
||||
"@types/object-hash": "2.2.1",
|
||||
"@types/select2": "4.0.55",
|
||||
"@types/throttle-debounce": "2.1.0",
|
||||
"@types/tinycolor2": "1.4.3",
|
||||
"autoprefixer": "10.4.14",
|
||||
|
|
@ -3860,15 +3859,6 @@
|
|||
"integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/select2": {
|
||||
"version": "4.0.55",
|
||||
"resolved": "https://registry.npmjs.org/@types/select2/-/select2-4.0.55.tgz",
|
||||
"integrity": "sha512-lqngYTv7W1e8HiLSEq7cJhnnKqV3vuwCBkfka6ZXBoM0Z8aVoZrR9gxjbwRzcqBBw4EpAvVXZGPuaDOM+apeZw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/jquery": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/serve-index": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
|
||||
|
|
@ -14699,8 +14689,7 @@
|
|||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
"version": "4.1.0",
|
||||
|
|
@ -15400,6 +15389,17 @@
|
|||
"resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
|
||||
"integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lower-case": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
|
||||
|
|
@ -18248,6 +18248,29 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
|
|
@ -19092,6 +19115,14 @@
|
|||
"node": ">=v12.22.7"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/schema-utils": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
|
||||
|
|
@ -19116,11 +19147,6 @@
|
|||
"integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/select2": {
|
||||
"version": "4.1.0-rc.0",
|
||||
"resolved": "https://registry.npmjs.org/select2/-/select2-4.1.0-rc.0.tgz",
|
||||
"integrity": "sha512-Hr9TdhyHCZUtwznEH2CBf7967mEM0idtJ5nMtjvk3Up5tPukOLXbHUNmh10oRfeNIhj+3GD3niu+g6sVK+gK0A=="
|
||||
},
|
||||
"node_modules/selfsigned": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
|
||||
|
|
@ -19616,6 +19642,15 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/slim-select": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/slim-select/-/slim-select-2.8.1.tgz",
|
||||
"integrity": "sha512-/wi+4dau48edrPZ/ggD+R8qD6FbCLGv5zvrYh4rqp1RNEIbkb1pRYJbljLjvr7/QqBvX3Hjbnvdnw9FPzJ8o5Q==",
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/snapdragon": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
"@types/jest": "27.5.0",
|
||||
"@types/jquery": "3.5.14",
|
||||
"@types/object-hash": "2.2.1",
|
||||
"@types/select2": "4.0.55",
|
||||
"@types/throttle-debounce": "2.1.0",
|
||||
"@types/tinycolor2": "1.4.3",
|
||||
"autoprefixer": "10.4.14",
|
||||
|
|
@ -99,7 +98,7 @@
|
|||
"konami": "1.6.3",
|
||||
"lz-ts": "1.1.2",
|
||||
"object-hash": "3.0.0",
|
||||
"select2": "4.1.0-rc.0",
|
||||
"slim-select": "2.8.1",
|
||||
"stemmer": "2.0.0",
|
||||
"throttle-debounce": "3.0.1",
|
||||
"workbox-window": "6.5.4"
|
||||
|
|
|
|||
|
|
@ -178,189 +178,145 @@ select:-webkit-autofill:focus {
|
|||
caret-color: var(--text-color);
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
// slim-select styles
|
||||
.ss-main {
|
||||
border-radius: var(--roundness);
|
||||
outline: none;
|
||||
}
|
||||
.select2-container--default.select2-container--disabled
|
||||
.select2-selection--single {
|
||||
background: var(--sub-alt-color) !important;
|
||||
opacity: 0.33;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.select2-selection {
|
||||
border: none;
|
||||
border-radius: var(--roundness);
|
||||
background: var(--sub-alt-color);
|
||||
height: fit-content;
|
||||
height: -moz-fit-content;
|
||||
padding: 5px;
|
||||
border-radius: var(--roundness);
|
||||
color: var(--text-color);
|
||||
font: var(--font);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__rendered {
|
||||
color: var(--text-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-results__option--highlighted.select2-results__option--selectable {
|
||||
background-color: var(--text-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--selected {
|
||||
background-color: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
|
||||
.select2-container--open .select2-dropdown--below,
|
||||
.select2-container--open .select2-dropdown--above {
|
||||
border-color: var(--sub-alt-color);
|
||||
background: var(--bg-color);
|
||||
color: var(--sub-color);
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
color: var(--text-color);
|
||||
background: var(--sub-alt-color);
|
||||
outline: none;
|
||||
border: none;
|
||||
height: auto;
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--disabled
|
||||
.select2-selection--single {
|
||||
background: #5051517a;
|
||||
}
|
||||
|
||||
.select2-selection:focus {
|
||||
height: fit-content;
|
||||
height: -moz-fit-content;
|
||||
padding: 5px;
|
||||
border-radius: var(--roundness);
|
||||
color: var(--text-color);
|
||||
font: var(--font);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.select2-selection:active {
|
||||
height: fit-content;
|
||||
height: -moz-fit-content;
|
||||
padding: 5px;
|
||||
border-radius: var(--roundness);
|
||||
color: var(--text-color);
|
||||
font: var(--font);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__arrow {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
.select2-selection__arrow
|
||||
b {
|
||||
border-color: var(--text-color) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--open
|
||||
.select2-selection--single
|
||||
.select2-selection__arrow
|
||||
b {
|
||||
border-color: var(--text-color) transparent;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-search--dropdown .select2-search__field {
|
||||
border-color: var(--sub-alt-color);
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__group {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
background: var(--sub-alt-color);
|
||||
border-radius: var(--roundness);
|
||||
color: var(--text-color);
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select2-selection__choice__display {
|
||||
color: var(--bg-color);
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.select2-container .select2-search--inline .select2-search__field {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
padding: 0.5em;
|
||||
font-size: 1em;
|
||||
font-family: var(--font);
|
||||
line-height: 1rem;
|
||||
caret-color: var(--main-color);
|
||||
line-height: 1.25em;
|
||||
&:focus {
|
||||
box-shadow: inherit;
|
||||
}
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem var(--bg-color), 0 0 0 0.2rem var(--text-color);
|
||||
}
|
||||
.ss-arrow path {
|
||||
stroke: var(--text-color);
|
||||
transition: none;
|
||||
}
|
||||
&.ss-disabled {
|
||||
opacity: 0.33;
|
||||
pointer-events: none;
|
||||
background: var(--sub-alt-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.ss-values {
|
||||
.ss-placeholder {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: var(--sub-color);
|
||||
}
|
||||
.ss-single {
|
||||
margin: 0;
|
||||
}
|
||||
.ss-value {
|
||||
animation: unset !important;
|
||||
background-color: unset;
|
||||
.ss-value-text {
|
||||
height: 100%;
|
||||
color: var(--bg-color);
|
||||
background: var(--main-color);
|
||||
border-radius: calc(var(--roundness) / 2) 0 0 calc(var(--roundness) / 2);
|
||||
}
|
||||
.ss-value-delete {
|
||||
border-left: 1px solid var(--bg-color);
|
||||
background: var(--main-color);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-radius: 0 calc(var(--roundness) / 2) calc(var(--roundness) / 2) 0;
|
||||
transition: background 0.125s;
|
||||
svg path {
|
||||
stroke: var(--bg-color);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--text-color);
|
||||
svg path {
|
||||
stroke: var(--bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus
|
||||
.select2-selection--multiple {
|
||||
.ss-content {
|
||||
transition: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice {
|
||||
background-color: var(--main-color);
|
||||
border: none;
|
||||
border-radius: calc(var(--roundness) / 2);
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0;
|
||||
padding-left: 1.25rem;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice__remove {
|
||||
line-height: 1.5rem;
|
||||
border-right: 1px solid var(--bg-color);
|
||||
color: var(--bg-color) !important;
|
||||
transition: 0.125s;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice__remove:hover {
|
||||
background-color: var(--text-color);
|
||||
background: var(--sub-alt-color);
|
||||
color: var(--text-color);
|
||||
.ss-search {
|
||||
padding: 0.5em;
|
||||
border-top: 0.1em solid var(--bg-color);
|
||||
border-bottom: 0.1em solid var(--bg-color);
|
||||
input {
|
||||
border: none;
|
||||
background: var(--bg-color);
|
||||
font-size: 1em;
|
||||
padding: 0.5em;
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem var(--bg-color), 0 0 0 0.2rem var(--text-color);
|
||||
}
|
||||
&:focus {
|
||||
border: none;
|
||||
}
|
||||
&::placeholder {
|
||||
color: var(--sub-color);
|
||||
}
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ss-list {
|
||||
.ss-optgroup {
|
||||
.ss-optgroup-label {
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
padding-left: 1em;
|
||||
.ss-optgroup-label-text {
|
||||
color: var(--sub-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ss-optgroup .ss-option,
|
||||
.ss-optgroup .ss-option:not(.ss-disabled),
|
||||
.ss-option,
|
||||
.ss-option:not(.ss-disabled) {
|
||||
padding: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
color: var(--text-color);
|
||||
&.ss-selected {
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
&:hover,
|
||||
&.ss-highlighted {
|
||||
background: var(--text-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
// &:last-child {
|
||||
// margin-bottom: 1em;
|
||||
// }
|
||||
}
|
||||
.ss-optgroup .ss-option,
|
||||
.ss-optgroup .ss-option:not(.ss-disabled) {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
&.ss-open-below {
|
||||
border-bottom-left-radius: var(--roundness);
|
||||
border-bottom-right-radius: var(--roundness);
|
||||
}
|
||||
&.ss-open-above {
|
||||
border-top-left-radius: var(--roundness);
|
||||
border-top-right-radius: var(--roundness);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
grid-area: buttons;
|
||||
.timeRange {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.select2 {
|
||||
.languageSelect {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { getHTMLById as getBadgeHTMLbyId } from "../controllers/badge-controller
|
|||
import * as ConnectionState from "../states/connection";
|
||||
import * as Skeleton from "../popups/skeleton";
|
||||
import { debounce } from "throttle-debounce";
|
||||
import SlimSelect from "slim-select";
|
||||
|
||||
const wrapperId = "leaderboardsWrapper";
|
||||
|
||||
|
|
@ -680,52 +681,57 @@ $("#leaderboardsWrapper").on("click", (e) => {
|
|||
}
|
||||
});
|
||||
|
||||
const languageSelector = $(
|
||||
"#leaderboardsWrapper #leaderboards .leaderboardsTop .buttonGroup.timeRange .languageSelect"
|
||||
).select2({
|
||||
placeholder: "select a language",
|
||||
width: "100%",
|
||||
const languageSelector = new SlimSelect({
|
||||
select:
|
||||
"#leaderboardsWrapper #leaderboards .leaderboardsTop .buttonGroup.timeRange .languageSelect",
|
||||
settings: {
|
||||
showSearch: false,
|
||||
contentLocation: document.querySelector(
|
||||
"#leaderboardsWrapper"
|
||||
) as HTMLElement,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: "english",
|
||||
value: "english",
|
||||
text: "english",
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
id: "spanish",
|
||||
value: "spanish",
|
||||
text: "spanish",
|
||||
},
|
||||
{
|
||||
id: "german",
|
||||
value: "german",
|
||||
text: "german",
|
||||
},
|
||||
{
|
||||
id: "french",
|
||||
value: "french",
|
||||
text: "french",
|
||||
},
|
||||
{
|
||||
id: "portuguese",
|
||||
value: "portuguese",
|
||||
text: "portuguese",
|
||||
},
|
||||
{
|
||||
id: "indonesian",
|
||||
value: "indonesian",
|
||||
text: "indonesian",
|
||||
},
|
||||
{
|
||||
id: "italian",
|
||||
value: "italian",
|
||||
text: "italian",
|
||||
},
|
||||
{
|
||||
id: "russian",
|
||||
value: "russian",
|
||||
text: "russian",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
languageSelector.on("select2:select", (e) => {
|
||||
currentLanguage = e.params.data.id;
|
||||
updateTitle();
|
||||
void update();
|
||||
events: {
|
||||
afterChange: (newVal): void => {
|
||||
currentLanguage = newVal[0]?.value as string;
|
||||
updateTitle();
|
||||
void update();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
let leftScrollEnabled = true;
|
||||
|
|
@ -852,9 +858,8 @@ $(
|
|||
).on("click", () => {
|
||||
currentTimeRange = "allTime";
|
||||
currentLanguage = "english";
|
||||
languageSelector.prop("disabled", true);
|
||||
languageSelector.val("english");
|
||||
languageSelector.trigger("change");
|
||||
languageSelector.disable();
|
||||
languageSelector.setSelected("english");
|
||||
void update();
|
||||
});
|
||||
|
||||
|
|
@ -863,7 +868,7 @@ $(
|
|||
).on("click", () => {
|
||||
currentTimeRange = "daily";
|
||||
updateYesterdayButton();
|
||||
languageSelector.prop("disabled", false);
|
||||
languageSelector.enable();
|
||||
void update();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import "jquery";
|
||||
import "jquery-color";
|
||||
import "jquery.easing";
|
||||
import "select2";
|
||||
|
||||
import "../styles/index.scss";
|
||||
import "./firebase";
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { getAuthenticatedUser, isAuthenticated } from "../firebase";
|
|||
import Ape from "../ape";
|
||||
import { areFunboxesCompatible } from "../test/funbox/funbox-validation";
|
||||
import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
|
||||
import SlimSelect from "slim-select";
|
||||
|
||||
import * as Skeleton from "../popups/skeleton";
|
||||
import * as CustomBackgroundFilter from "../elements/custom-background-filter";
|
||||
|
|
@ -421,10 +422,12 @@ function reset(): void {
|
|||
$(".pageSettings .section.themes .favThemes.buttons").empty();
|
||||
$(".pageSettings .section.themes .allThemes.buttons").empty();
|
||||
$(".pageSettings .section.themes .allCustomThemes.buttons").empty();
|
||||
$(".pageSettings .section.languageGroups .buttons").empty();
|
||||
$(".pageSettings select").empty().select2("destroy");
|
||||
$(".pageSettings .section[data-config-name='funbox'] .buttons").empty();
|
||||
$(".pageSettings .section[data-config-name='fontFamily'] .buttons").empty();
|
||||
for (const select of document.querySelectorAll(".pageSettings select")) {
|
||||
//@ts-expect-error
|
||||
select?.slim?.destroy?.();
|
||||
}
|
||||
}
|
||||
|
||||
let groupsInitialized = false;
|
||||
|
|
@ -436,11 +439,6 @@ async function fillSettingsPage(): Promise<void> {
|
|||
}
|
||||
|
||||
// Language Selection Combobox
|
||||
const languageEl = document.querySelector(
|
||||
".pageSettings .section[data-config-name='language'] select"
|
||||
) as HTMLSelectElement;
|
||||
languageEl.innerHTML = "";
|
||||
let languageElHTML = "";
|
||||
|
||||
let languageGroups;
|
||||
try {
|
||||
|
|
@ -454,37 +452,32 @@ async function fillSettingsPage(): Promise<void> {
|
|||
);
|
||||
}
|
||||
|
||||
const languageSelectData = [];
|
||||
if (languageGroups) {
|
||||
for (const group of languageGroups) {
|
||||
let langComboBox = `<optgroup label="${group.name}">`;
|
||||
group.languages.forEach((language: string) => {
|
||||
langComboBox += `<option value="${language}">
|
||||
${Misc.getLanguageDisplayString(language)}
|
||||
</option>`;
|
||||
});
|
||||
langComboBox += `</optgroup>`;
|
||||
languageElHTML += langComboBox;
|
||||
const groupData = {
|
||||
label: group.name,
|
||||
options: group.languages.map((language: string) => {
|
||||
return {
|
||||
value: language,
|
||||
text: Misc.getLanguageDisplayString(language),
|
||||
selected: language === Config.language,
|
||||
};
|
||||
}),
|
||||
};
|
||||
languageSelectData.push(groupData);
|
||||
}
|
||||
languageEl.innerHTML = languageElHTML;
|
||||
}
|
||||
$(languageEl).select2({
|
||||
width: "100%",
|
||||
new SlimSelect({
|
||||
select: ".pageSettings .section[data-config-name='language'] select",
|
||||
data: languageSelectData,
|
||||
settings: {
|
||||
searchPlaceholder: "search",
|
||||
},
|
||||
});
|
||||
|
||||
await Misc.sleep(0);
|
||||
|
||||
const layoutEl = document.querySelector(
|
||||
".pageSettings .section[data-config-name='layout'] select"
|
||||
) as HTMLSelectElement;
|
||||
layoutEl.innerHTML = `<option value='default'>off</option>`;
|
||||
let layoutElHTML = "";
|
||||
|
||||
const keymapEl = document.querySelector(
|
||||
".pageSettings .section[data-config-name='keymapLayout'] select"
|
||||
) as HTMLSelectElement;
|
||||
keymapEl.innerHTML = `<option value='overrideSync'>emulator sync</option>`;
|
||||
let keymapElHTML = "";
|
||||
|
||||
let layoutsList;
|
||||
try {
|
||||
layoutsList = await Misc.getLayoutsList();
|
||||
|
|
@ -492,45 +485,48 @@ async function fillSettingsPage(): Promise<void> {
|
|||
console.error(Misc.createErrorMessage(e, "Failed to refresh keymap"));
|
||||
}
|
||||
|
||||
const layoutSelectData = [];
|
||||
const keymapLayoutSelectData = [];
|
||||
|
||||
layoutSelectData.push({
|
||||
value: "default",
|
||||
text: "off",
|
||||
});
|
||||
|
||||
keymapLayoutSelectData.push({
|
||||
value: "overrideSync",
|
||||
text: "emulator sync",
|
||||
});
|
||||
|
||||
if (layoutsList) {
|
||||
for (const layout of Object.keys(layoutsList)) {
|
||||
if (layout.toString() !== "korean") {
|
||||
layoutElHTML += `<option value='${layout}'>${layout.replace(
|
||||
/_/g,
|
||||
" "
|
||||
)}</option>`;
|
||||
layoutSelectData.push({
|
||||
value: layout,
|
||||
text: layout.replace(/_/g, " "),
|
||||
});
|
||||
}
|
||||
if (layout.toString() !== "default") {
|
||||
keymapElHTML += `<option value='${layout}'>${layout.replace(
|
||||
/_/g,
|
||||
" "
|
||||
)}</option>`;
|
||||
keymapLayoutSelectData.push({
|
||||
value: layout,
|
||||
text: layout.replace(/_/g, " "),
|
||||
});
|
||||
}
|
||||
}
|
||||
layoutEl.innerHTML += layoutElHTML;
|
||||
keymapEl.innerHTML += keymapElHTML;
|
||||
}
|
||||
$(layoutEl).select2({
|
||||
width: "100%",
|
||||
|
||||
new SlimSelect({
|
||||
select: ".pageSettings .section[data-config-name='layout'] select",
|
||||
data: layoutSelectData,
|
||||
});
|
||||
$(keymapEl).select2({
|
||||
width: "100%",
|
||||
|
||||
new SlimSelect({
|
||||
select: ".pageSettings .section[data-config-name='keymapLayout'] select",
|
||||
data: keymapLayoutSelectData,
|
||||
});
|
||||
|
||||
await Misc.sleep(0);
|
||||
|
||||
const themeEl1 = document.querySelector(
|
||||
".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.light"
|
||||
) as HTMLSelectElement;
|
||||
themeEl1.innerHTML = "";
|
||||
let themeEl1HTML = "";
|
||||
|
||||
const themeEl2 = document.querySelector(
|
||||
".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.dark"
|
||||
) as HTMLSelectElement;
|
||||
themeEl2.innerHTML = "";
|
||||
let themeEl2HTML = "";
|
||||
|
||||
let themes;
|
||||
try {
|
||||
themes = await Misc.getThemesList();
|
||||
|
|
@ -540,40 +536,47 @@ async function fillSettingsPage(): Promise<void> {
|
|||
);
|
||||
}
|
||||
|
||||
const themeSelectLightData = [];
|
||||
const themeSelectDarkData = [];
|
||||
if (themes) {
|
||||
for (const theme of themes) {
|
||||
themeEl1HTML += `<option value='${theme.name}'>${theme.name.replace(
|
||||
/_/g,
|
||||
" "
|
||||
)}</option>`;
|
||||
themeEl2HTML += `<option value='${theme.name}'>${theme.name.replace(
|
||||
/_/g,
|
||||
" "
|
||||
)}</option>`;
|
||||
themeSelectLightData.push({
|
||||
value: theme.name,
|
||||
text: theme.name.replace(/_/g, " "),
|
||||
selected: theme.name === Config.themeLight,
|
||||
});
|
||||
themeSelectDarkData.push({
|
||||
value: theme.name,
|
||||
text: theme.name.replace(/_/g, " "),
|
||||
selected: theme.name === Config.themeDark,
|
||||
});
|
||||
}
|
||||
themeEl1.innerHTML = themeEl1HTML;
|
||||
themeEl2.innerHTML = themeEl2HTML;
|
||||
}
|
||||
$(themeEl1).select2({
|
||||
width: "100%",
|
||||
|
||||
new SlimSelect({
|
||||
select:
|
||||
".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.light",
|
||||
data: themeSelectLightData,
|
||||
events: {
|
||||
afterChange: (newVal): void => {
|
||||
UpdateConfig.setThemeLight(newVal[0]?.value as string);
|
||||
},
|
||||
},
|
||||
});
|
||||
$(themeEl2).select2({
|
||||
width: "100%",
|
||||
|
||||
new SlimSelect({
|
||||
select:
|
||||
".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.dark",
|
||||
data: themeSelectDarkData,
|
||||
events: {
|
||||
afterChange: (newVal): void => {
|
||||
UpdateConfig.setThemeDark(newVal[0]?.value as string);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await Misc.sleep(0);
|
||||
|
||||
$(
|
||||
`.pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.light`
|
||||
)
|
||||
.val(Config.themeLight)
|
||||
.trigger("change.select2");
|
||||
$(
|
||||
`.pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.dark`
|
||||
)
|
||||
.val(Config.themeDark)
|
||||
.trigger("change.select2");
|
||||
|
||||
const funboxEl = document.querySelector(
|
||||
".pageSettings .section[data-config-name='funbox'] .buttons"
|
||||
) as HTMLDivElement;
|
||||
|
|
@ -1257,30 +1260,6 @@ $(".pageSettings .section.updateCookiePreferences button").on("click", () => {
|
|||
CookiePopup.showSettings();
|
||||
});
|
||||
|
||||
$(".pageSettings .section[data-config-name='autoSwitchThemeInputs']").on(
|
||||
"change",
|
||||
`select.light`,
|
||||
(e) => {
|
||||
const target = $(e.currentTarget);
|
||||
if (target.hasClass("disabled") || target.hasClass("no-auto-handle")) {
|
||||
return;
|
||||
}
|
||||
UpdateConfig.setThemeLight(target.val() as string);
|
||||
}
|
||||
);
|
||||
|
||||
$(".pageSettings .section[data-config-name='autoSwitchThemeInputs']").on(
|
||||
"change",
|
||||
`select.dark`,
|
||||
(e) => {
|
||||
const target = $(e.currentTarget);
|
||||
if (target.hasClass("disabled") || target.hasClass("no-auto-handle")) {
|
||||
return;
|
||||
}
|
||||
UpdateConfig.setThemeDark(target.val() as string);
|
||||
}
|
||||
);
|
||||
|
||||
$(".pageSettings .section.discordIntegration .getLinkAndGoToOauth").on(
|
||||
"click",
|
||||
() => {
|
||||
|
|
@ -1314,8 +1293,8 @@ export const page = new Page(
|
|||
//
|
||||
},
|
||||
async () => {
|
||||
Skeleton.remove("pageSettings");
|
||||
reset();
|
||||
Skeleton.remove("pageSettings");
|
||||
},
|
||||
async () => {
|
||||
Skeleton.append("pageSettings", "main");
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import QuotesController from "../controllers/quotes-controller";
|
|||
import * as CaptchaController from "../controllers/captcha-controller";
|
||||
import * as Skeleton from "./skeleton";
|
||||
import { isPopupVisible, removeLanguageSize } from "../utils/misc";
|
||||
import SlimSelect from "slim-select";
|
||||
|
||||
const wrapperId = "quoteReportPopupWrapper";
|
||||
|
||||
|
|
@ -34,6 +35,8 @@ const defaultOptions: Options = {
|
|||
noAnim: false,
|
||||
};
|
||||
|
||||
let reasonSelect: SlimSelect | undefined = undefined;
|
||||
|
||||
export async function show(options = defaultOptions): Promise<void> {
|
||||
Skeleton.append(wrapperId);
|
||||
|
||||
|
|
@ -59,9 +62,14 @@ export async function show(options = defaultOptions): Promise<void> {
|
|||
$("#quoteReportPopup .reason").val("Grammatical error");
|
||||
$("#quoteReportPopup .comment").val("");
|
||||
$("#quoteReportPopup .characterCount").text("-");
|
||||
$("#quoteReportPopup .reason").select2({
|
||||
minimumResultsForSearch: Infinity,
|
||||
|
||||
reasonSelect = new SlimSelect({
|
||||
select: "#quoteReportPopup .reason",
|
||||
settings: {
|
||||
showSearch: false,
|
||||
},
|
||||
});
|
||||
|
||||
$("#quoteReportPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
|
|
@ -90,6 +98,8 @@ async function hide(): Promise<void> {
|
|||
if (state.previousPopupShowCallback) {
|
||||
state.previousPopupShowCallback();
|
||||
}
|
||||
reasonSelect?.destroy();
|
||||
reasonSelect = undefined;
|
||||
Skeleton.remove(wrapperId);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import Ape from "../ape";
|
|||
import * as Loader from "../elements/loader";
|
||||
import * as Skeleton from "./skeleton";
|
||||
import { isPopupVisible } from "../utils/misc";
|
||||
import SlimSelect from "slim-select";
|
||||
|
||||
const wrapperId = "quoteSearchPopupWrapper";
|
||||
|
||||
|
|
@ -209,6 +210,8 @@ async function updateResults(searchText: string): Promise<void> {
|
|||
});
|
||||
}
|
||||
|
||||
let lengthSelect: SlimSelect | undefined = undefined;
|
||||
|
||||
export async function show(clearText = true): Promise<void> {
|
||||
Skeleton.append(wrapperId);
|
||||
|
||||
|
|
@ -233,31 +236,28 @@ export async function show(clearText = true): Promise<void> {
|
|||
$("#quoteSearchPopup #goToApproveQuotes").addClass("hidden");
|
||||
}
|
||||
|
||||
$("#quoteSearchPopup .quoteLengthFilter").select2({
|
||||
placeholder: "Filter by length",
|
||||
maximumSelectionLength: Infinity,
|
||||
multiple: true,
|
||||
width: "100%",
|
||||
lengthSelect = new SlimSelect({
|
||||
select: "#quoteSearchPopup .quoteLengthFilter",
|
||||
settings: {
|
||||
showSearch: false,
|
||||
placeholderText: "Filter by length",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: 0,
|
||||
text: "short",
|
||||
selected: false,
|
||||
value: "0",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
text: "medium",
|
||||
selected: false,
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "long",
|
||||
selected: false,
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "thicc",
|
||||
selected: false,
|
||||
value: "3",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
@ -289,6 +289,9 @@ function hide(noAnim = false, focusWords = true): void {
|
|||
() => {
|
||||
$("#quoteSearchPopupWrapper").addClass("hidden");
|
||||
|
||||
lengthSelect?.destroy();
|
||||
lengthSelect = undefined;
|
||||
|
||||
if (focusWords) {
|
||||
TestUI.focusWords();
|
||||
$("#quoteSearchPopup .quoteLengthFilter").val([]);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import * as CaptchaController from "../controllers/captcha-controller";
|
|||
import * as Misc from "../utils/misc";
|
||||
import Config from "../config";
|
||||
import * as Skeleton from "./skeleton";
|
||||
import SlimSelect from "slim-select";
|
||||
|
||||
const wrapperId = "quoteSubmitPopupWrapper";
|
||||
|
||||
|
|
@ -18,10 +19,11 @@ async function initDropdown(): Promise<void> {
|
|||
`<option value="${group.name}">${group.name.replace(/_/g, " ")}</option>`
|
||||
);
|
||||
}
|
||||
$("#quoteSubmitPopup #submitQuoteLanguage").select2();
|
||||
dropdownReady = true;
|
||||
}
|
||||
|
||||
let select: SlimSelect | undefined = undefined;
|
||||
|
||||
async function submitQuote(): Promise<void> {
|
||||
const text = $("#quoteSubmitPopup #submitQuoteText").val() as string;
|
||||
const source = $("#quoteSubmitPopup #submitQuoteSource").val() as string;
|
||||
|
|
@ -57,6 +59,11 @@ export async function show(noAnim = false): Promise<void> {
|
|||
"submitQuote"
|
||||
);
|
||||
await initDropdown();
|
||||
|
||||
select = new SlimSelect({
|
||||
select: "#quoteSubmitPopup #submitQuoteLanguage",
|
||||
});
|
||||
|
||||
$("#quoteSubmitPopup #submitQuoteLanguage").val(
|
||||
Misc.removeLanguageSize(Config.language)
|
||||
);
|
||||
|
|
@ -86,6 +93,8 @@ function hide(): void {
|
|||
$("#quoteSubmitPopupWrapper").addClass("hidden");
|
||||
CaptchaController.reset("submitQuote");
|
||||
Skeleton.remove(wrapperId);
|
||||
select?.destroy();
|
||||
select = undefined;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import * as Notifications from "../elements/notifications";
|
|||
import * as CaptchaController from "../controllers/captcha-controller";
|
||||
import * as Skeleton from "./skeleton";
|
||||
import { isPopupVisible } from "../utils/misc";
|
||||
import SlimSelect from "slim-select";
|
||||
|
||||
const wrapperId = "userReportPopupWrapper";
|
||||
|
||||
|
|
@ -23,6 +24,8 @@ type ShowOptions = {
|
|||
lbOptOut: boolean;
|
||||
};
|
||||
|
||||
let select: SlimSelect | undefined = undefined;
|
||||
|
||||
export async function show(options: ShowOptions): Promise<void> {
|
||||
Skeleton.append(wrapperId);
|
||||
if (!isPopupVisible(wrapperId)) {
|
||||
|
|
@ -39,9 +42,14 @@ export async function show(options: ShowOptions): Promise<void> {
|
|||
$("#userReportPopup .reason").val("Inappropriate name");
|
||||
$("#userReportPopup .comment").val("");
|
||||
$("#userReportPopup .characterCount").text("-");
|
||||
$("#userReportPopup .reason").select2({
|
||||
minimumResultsForSearch: Infinity,
|
||||
|
||||
select = new SlimSelect({
|
||||
select: "#userReportPopup .reason",
|
||||
settings: {
|
||||
showSearch: false,
|
||||
},
|
||||
});
|
||||
|
||||
$("#userReportPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
|
|
@ -63,6 +71,8 @@ async function hide(): Promise<void> {
|
|||
},
|
||||
125,
|
||||
() => {
|
||||
select?.destroy();
|
||||
select = undefined;
|
||||
CaptchaController.reset("userReportPopup");
|
||||
$("#userReportPopupWrapper").addClass("hidden");
|
||||
Skeleton.remove(wrapperId);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import * as Misc from "../utils/misc";
|
|||
import * as CustomText from "../test/custom-text";
|
||||
import * as Notifications from "../elements/notifications";
|
||||
import * as Skeleton from "./skeleton";
|
||||
import SlimSelect from "slim-select";
|
||||
|
||||
const wrapperId = "wordFilterPopupWrapper";
|
||||
|
||||
|
|
@ -117,14 +118,6 @@ async function init(): Promise<void> {
|
|||
return;
|
||||
}
|
||||
|
||||
LanguageList.forEach((language) => {
|
||||
let prettyLang = language;
|
||||
prettyLang = prettyLang.replace("_", " ");
|
||||
$("#wordFilterPopup .languageInput").append(`
|
||||
<option value=${language}>${prettyLang}</option>
|
||||
`);
|
||||
});
|
||||
|
||||
try {
|
||||
LayoutList = await Misc.getLayoutsList();
|
||||
} catch (e) {
|
||||
|
|
@ -137,9 +130,17 @@ async function init(): Promise<void> {
|
|||
return;
|
||||
}
|
||||
|
||||
LanguageList.forEach((language) => {
|
||||
const prettyLang = language.replace(/_/gi, " ");
|
||||
$("#wordFilterPopup .languageInput").append(`
|
||||
<option value=${language}>${prettyLang}</option>
|
||||
`);
|
||||
});
|
||||
|
||||
for (const layout in LayoutList) {
|
||||
const prettyLayout = layout.replace(/_/gi, " ");
|
||||
$("#wordFilterPopup .layoutInput").append(`
|
||||
<option value=${layout}>${layout}</option>
|
||||
<option value=${layout}>${prettyLayout}</option>
|
||||
`);
|
||||
}
|
||||
|
||||
|
|
@ -153,6 +154,10 @@ async function init(): Promise<void> {
|
|||
}
|
||||
}
|
||||
|
||||
let languageSelect: SlimSelect | undefined = undefined;
|
||||
let layoutSelect: SlimSelect | undefined = undefined;
|
||||
let presetSelect: SlimSelect | undefined = undefined;
|
||||
|
||||
let callbackFuncOnHide: (() => void) | undefined = undefined;
|
||||
|
||||
export async function show(
|
||||
|
|
@ -163,16 +168,14 @@ export async function show(
|
|||
if (!Misc.isPopupVisible(wrapperId)) {
|
||||
await init();
|
||||
callbackFuncOnHide = callbackOnHide;
|
||||
$("#wordFilterPopup .languageInput").select2({
|
||||
width: "100%",
|
||||
languageSelect = new SlimSelect({
|
||||
select: "#wordFilterPopup .languageInput",
|
||||
});
|
||||
|
||||
$("#wordFilterPopup .layoutInput").select2({
|
||||
width: "100%",
|
||||
layoutSelect = new SlimSelect({
|
||||
select: "#wordFilterPopup .layoutInput",
|
||||
});
|
||||
|
||||
$("#wordFilterPopup .presetInput").select2({
|
||||
width: "100%",
|
||||
presetSelect = new SlimSelect({
|
||||
select: "#wordFilterPopup .presetInput",
|
||||
});
|
||||
$("#wordFilterPopupWrapper .loadingIndicator").addClass("hidden");
|
||||
$("#wordFilterPopupWrapper .button").removeClass("hidden");
|
||||
|
|
@ -189,12 +192,6 @@ export async function show(
|
|||
|
||||
function hide(noAnim = false): void {
|
||||
if (Misc.isPopupVisible(wrapperId)) {
|
||||
$("#wordFilterPopup .languageInput").select2("close");
|
||||
|
||||
$("#wordFilterPopup .layoutInput").select2("close");
|
||||
|
||||
$("#wordFilterPopup .presetInput").select2("close");
|
||||
|
||||
$("#wordFilterPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 1)
|
||||
|
|
@ -204,6 +201,12 @@ function hide(noAnim = false): void {
|
|||
},
|
||||
noAnim ? 0 : 125,
|
||||
() => {
|
||||
languageSelect?.destroy();
|
||||
layoutSelect?.destroy();
|
||||
presetSelect?.destroy();
|
||||
languageSelect = undefined;
|
||||
layoutSelect = undefined;
|
||||
presetSelect = undefined;
|
||||
$("#wordFilterPopupWrapper").addClass("hidden");
|
||||
Skeleton.remove(wrapperId);
|
||||
if (callbackFuncOnHide) callbackFuncOnHide();
|
||||
|
|
@ -286,10 +289,6 @@ $("#wordFilterPopupWrapper").on("mousedown", (e) => {
|
|||
}
|
||||
});
|
||||
|
||||
$("#wordFilterPopup .languageInput").one("select2:open", function () {
|
||||
$("input.select2-search__field").prop("placeholder", "search");
|
||||
});
|
||||
|
||||
$("#wordFilterPopupWrapper .button.addButton").on("mousedown", () => {
|
||||
$("#wordFilterPopupWrapper .loadingIndicator").removeClass("hidden");
|
||||
$("#wordFilterPopupWrapper .button").addClass("hidden");
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ void UpdateConfig.loadFromLocalStorage();
|
|||
Focus.set(true, true);
|
||||
|
||||
$(document).ready(() => {
|
||||
Misc.loadCSS("/./css/select2.min.css", true);
|
||||
Misc.loadCSS("/./css/slimselect.min.css", true);
|
||||
Misc.loadCSS("/./css/balloon.min.css", true);
|
||||
Misc.loadCSS("/./css/fa.min.css", true);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Config from "../config";
|
||||
import * as Notifications from "../elements/notifications";
|
||||
import SlimSelect from "slim-select";
|
||||
|
||||
export default class SettingsGroup<T extends SharedTypes.ConfigValue> {
|
||||
public configName: string;
|
||||
|
|
@ -25,20 +26,16 @@ export default class SettingsGroup<T extends SharedTypes.ConfigValue> {
|
|||
this.updateUI();
|
||||
|
||||
if (this.mode === "select") {
|
||||
$(".pageSettings").on(
|
||||
"change",
|
||||
`.section[data-config-name='${this.configName}'] select`,
|
||||
(e) => {
|
||||
const target = $(e.currentTarget);
|
||||
if (
|
||||
target.hasClass("disabled") ||
|
||||
target.hasClass("no-auto-handle")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.setValue(target.val() as T);
|
||||
}
|
||||
const selectElement = document.querySelector(
|
||||
`.pageSettings .section[data-config-name=${this.configName}] select`
|
||||
);
|
||||
selectElement?.addEventListener("change", (e) => {
|
||||
const target = $(e.target as HTMLSelectElement);
|
||||
if (target.hasClass("disabled") || target.hasClass("no-auto-handle")) {
|
||||
return;
|
||||
}
|
||||
this.setValue(target.val() as T);
|
||||
});
|
||||
} else if (this.mode === "button") {
|
||||
$(".pageSettings").on(
|
||||
"click",
|
||||
|
|
@ -83,9 +80,16 @@ export default class SettingsGroup<T extends SharedTypes.ConfigValue> {
|
|||
`.pageSettings .section[data-config-name='${this.configName}'] button`
|
||||
).removeClass("active");
|
||||
if (this.mode === "select") {
|
||||
$(`.pageSettings .section[data-config-name='${this.configName}'] select`)
|
||||
.val(this.configValue as string)
|
||||
.trigger("change.select2");
|
||||
const select = document.querySelector(
|
||||
`.pageSettings .section[data-config-name='${this.configName}'] select`
|
||||
) as HTMLSelectElement;
|
||||
select.value = this.configValue as string;
|
||||
|
||||
//@ts-expect-error
|
||||
const ss = select.slim as SlimSelect | undefined;
|
||||
ss?.store.setSelectedBy("value", [this.configValue as string]);
|
||||
ss?.render.renderValues();
|
||||
ss?.render.renderOptions(ss.store.getData());
|
||||
} else if (this.mode === "button") {
|
||||
$(
|
||||
// this cant be an object?
|
||||
|
|
|
|||
1
frontend/static/css/select2.min.css
vendored
1
frontend/static/css/select2.min.css
vendored
File diff suppressed because one or more lines are too long
1
frontend/static/css/slimselect.min.css
vendored
Normal file
1
frontend/static/css/slimselect.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -956,7 +956,9 @@
|
|||
<span>keymap layout</span>
|
||||
</div>
|
||||
<div class="text">Controls which layout is displayed on the keymap.</div>
|
||||
<select></select>
|
||||
<div class="inputs">
|
||||
<select></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section fullWidth" data-config-name="keymapStyle">
|
||||
<div class="groupTitle">
|
||||
|
|
|
|||
|
|
@ -638,7 +638,7 @@
|
|||
autocomplete="off"
|
||||
placeholder="Filter by text"
|
||||
/>
|
||||
<select class="quoteLengthFilter"></select>
|
||||
<select class="quoteLengthFilter" multiple></select>
|
||||
<div id="toggleShowFavorites" class="button">Favorites Only</div>
|
||||
</div>
|
||||
<div id="quoteSearchResults" class="quoteSearchResults"></div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
const { resolve, join } = require("path");
|
||||
const { resolve } = require("path");
|
||||
const webpack = require("webpack");
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
const CircularDependencyPlugin = require("circular-dependency-plugin");
|
||||
|
|
@ -115,7 +115,6 @@ const BASE_CONFIG = {
|
|||
jQuery: "jquery",
|
||||
jQueryColor: "jquery-color",
|
||||
jQueryEasing: "jquery.easing",
|
||||
select2: "select2",
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: "./index.html",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue