monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 15:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

changed the way dom elements are referenced in js

Browse source
This commit is contained in:
Jack 2021-04-06 01:13:21 +01:00
parent b7f4d3c01a
commit f5c65314b6
2 changed files with 50 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/js/popups/custom-background-filter.js
View file

@ -39,37 +39,51 @@ export function apply() {
}
function syncSliders() {
$(".blur").val(filters["blur"].value);
$(".brightness").val(filters["brightness"].value);
$(".saturate").val(filters["saturate"].value);
$(".opacity").val(filters["opacity"].value);
$(".section.customBackgroundFilter .blur input").val(filters["blur"].value);
$(".section.customBackgroundFilter .brightness input").val(
filters["brightness"].value
);
$(".section.customBackgroundFilter .saturate input").val(
filters["saturate"].value
);
$(".section.customBackgroundFilter .opacity input").val(
filters["opacity"].value
);
}
$(".blur").on("input", (e) => {
filters["blur"].value = $(".blur").val();
$(".section.customBackgroundFilter .blur input").on("input", (e) => {
filters["blur"].value = $(
".section.customBackgroundFilter .blur input"
).val();
updateNumbers();
apply();
});
$(".brightness").on("input", (e) => {
filters["brightness"].value = $(".brightness").val();
$(".section.customBackgroundFilter .brightness input").on("input", (e) => {
filters["brightness"].value = $(
".section.customBackgroundFilter .brightness input"
).val();
updateNumbers();
apply();
});
$(".saturate").on("input", (e) => {
filters["saturate"].value = $(".saturate").val();
$(".section.customBackgroundFilter .saturate input").on("input", (e) => {
filters["saturate"].value = $(
".section.customBackgroundFilter .saturate input"
).val();
updateNumbers();
apply();
});
$(".opacity").on("input", (e) => {
filters["opacity"].value = $(".opacity").val();
$(".section.customBackgroundFilter .opacity input").on("input", (e) => {
filters["opacity"].value = $(
".section.customBackgroundFilter .opacity input"
).val();
updateNumbers();
apply();
});
$(".customBackgroundFilter .button").click((e) => {
$(".section.customBackgroundFilter .save.button").click((e) => {
let arr = [];
Object.keys(filters).forEach((filterKey) => {
arr.push(filters[filterKey].value);
@ -87,8 +101,16 @@ export function loadConfig(config) {
}
function updateNumbers() {
$(".blurValue").html(parseFloat(filters.blur.value).toFixed(1));
$(".brightnessValue").html(parseFloat(filters.brightness.value).toFixed(1));
$(".saturateValue").html(parseFloat(filters.saturate.value).toFixed(1));
$(".opacityValue").html(parseFloat(filters.opacity.value).toFixed(1));
$(".section.customBackgroundFilter .blur .value").html(
parseFloat(filters.blur.value).toFixed(1)
);
$(".section.customBackgroundFilter .brightness .value").html(
parseFloat(filters.brightness.value).toFixed(1)
);
$(".section.customBackgroundFilter .saturate .value").html(
parseFloat(filters.saturate.value).toFixed(1)
);
$(".section.customBackgroundFilter .opacity .value").html(
parseFloat(filters.opacity.value).toFixed(1)
);
}

24
static/index.html
View file

@ -2979,56 +2979,54 @@
</div>
<div class="tabs">
<div class="groups">
<div class="group">
<div class="group blur">
<div class="title">blur</div>
<div class="blurValue"></div>
<div class="value"></div>
<input
type="range"
min="0"
max="5"
value="0"
step="0.1"
class="blur"
/>
</div>
<div class="group">
<div class="group brightness">
<div class="title">brightness</div>
<div class="brightnessValue"></div>
<div class="value"></div>
<input
type="range"
min="0"
max="2"
value="1"
step="0.1"
class="brightness"
/>
</div>
<div class="group">
<div class="group saturate">
<div class="title">saturate</div>
<div class="saturateValue"></div>
<div class="value"></div>
<input
type="range"
min="0"
max="2"
value="1"
step="0.1"
class="saturate"
/>
</div>
<div class="group">
<div class="group opacity">
<div class="title">opacity</div>
<div class="opacityValue"></div>
<div class="value"></div>
<input
type="range"
min="0"
max="1"
value="1"
step="0.1"
class="opacity"
/>
</div>
</div>
<div class="button"><i class="fas fa-save fa-fw"></i></div>
<div class="save button">
<i class="fas fa-save fa-fw"></i>
</div>
</div>
</div>
<div class="section themes">