monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-05 04:56:48 +08:00
Code Issues Projects Releases Packages Wiki Activity

removed contrast

Browse source 
changed the way numbers are updated
This commit is contained in:
Jack 2021-04-06 01:09:15 +01:00
parent 0d802703b8
commit b7f4d3c01a
2 changed files with 69 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,34 +2,32 @@ import * as UpdateConfig from "./config";
let filters = {
blur: {
value: 0,
default: 0
value: 0,
default: 0,
},
brightness: {
value: 1,
default: 1
default: 1,
},
saturate: {
value: 1,
default: 1
},
contrast: {
value: 1,
default: 1
default: 1,
},
opacity: {
value: 1,
default: 1
}
}
default: 1,
},
};
export function getCSS(){
export function getCSS() {
let ret = "";
Object.keys(filters).forEach((filterKey) => {
if (filters[filterKey].value != filters[filterKey].default){
ret += `${filterKey}(${filters[filterKey].value}${filterKey == "blur" ? "rem" : ""}) `
if (filters[filterKey].value != filters[filterKey].default) {
ret += `${filterKey}(${filters[filterKey].value}${
filterKey == "blur" ? "rem" : ""
}) `;
}
})
});
return ret;
}
@ -40,64 +38,57 @@ export function apply() {
});
}
function syncSliders(){
function syncSliders() {
$(".blur").val(filters["blur"].value);
$(".brightness").val(filters["brightness"].value);
$(".saturate").val(filters["saturate"].value);
$(".contrast").val(filters["contrast"].value);
$(".opacity").val(filters["opacity"].value);
}
$(".blur").on("input", (e) => {
filters["blur"].value = $(".blur").val();
$(".blurValue").html(filters["blur"].value);
updateNumbers();
apply();
})
});
$(".brightness").on("input", (e) => {
filters["brightness"].value = $(".brightness").val();
$(".brightnessValue").html(filters["brightness"].value);
updateNumbers();
apply();
})
});
$(".saturate").on("input", (e) => {
filters["saturate"].value = $(".saturate").val();
$(".saturateValue").html(filters["saturate"].value);
updateNumbers();
apply();
})
$(".contrast").on("input", (e) => {
filters["contrast"].value = $(".contrast").val();
$(".contrastValue").html(filters["contrast"].value);
apply();
})
});
$(".opacity").on("input", (e) => {
filters["opacity"].value = $(".opacity").val();
$(".opacityValue").html(filters["opacity"].value);
updateNumbers();
apply();
})
});
$(".customBackgroundFilter .button").click( (e) => {
$(".customBackgroundFilter .button").click((e) => {
let arr = [];
Object.keys(filters).forEach(filterKey => {
Object.keys(filters).forEach((filterKey) => {
arr.push(filters[filterKey].value);
})
});
UpdateConfig.setCustomBackgroundFilter(arr, false);
});
export function loadConfig(config){
export function loadConfig(config) {
filters.blur.value = config[0];
filters.brightness.value = config[1];
filters.saturate.value = config[2];
filters.contrast.value = config[3];
filters.opacity.value = config[4];
$(".blurValue").html(config[0]);
$(".brightnessValue").html(config[1]);
$(".saturateValue").html(config[2]);
$(".contrastValue").html(config[3]);
$(".opacityValue").html(config[4]);
filters.opacity.value = config[3];
updateNumbers();
syncSliders();
}
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));
}

45
static/index.html
View file

@ -2974,33 +2974,58 @@
</div>
<div class="section customBackgroundFilter">
<h1>custom background filter</h1>
<div class="text">Apply various effects to the custom background.</div>
<div class="text">
Apply various effects to the custom background.
</div>
<div class="tabs">
<div class="groups">
<div class="group">
<div class="title">blur</div>
<div class="blurValue"></div>
<input type="range" min="0" max="5" value="0" step="0.1" class="blur">
<input
type="range"
min="0"
max="5"
value="0"
step="0.1"
class="blur"
/>
</div>
<div class="group">
<div class="title">brightness</div>
<div class="brightnessValue"></div>
<input type="range" min="0" max="2" value="1" step="0.1" class="brightness">
<input
type="range"
min="0"
max="2"
value="1"
step="0.1"
class="brightness"
/>
</div>
<div class="group">
<div class="title">saturate</div>
<div class="saturateValue"></div>
<input type="range" min="0" max="2" value="1" step="0.1" class="saturate">
</div>
<div class="group">
<div class="title">contrast</div>
<div class="contrastValue"></div>
<input type="range" min="0" max="2" value="1" step="0.1" class="contrast">
<input
type="range"
min="0"
max="2"
value="1"
step="0.1"
class="saturate"
/>
</div>
<div class="group">
<div class="title">opacity</div>
<div class="opacityValue"></div>
<input type="range" min="0" max="1" value="1" step="0.1" class="opacity">
<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>