-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
61 lines (51 loc) · 2.46 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
let pendants = document.querySelectorAll("#pendant");
let pendantSizeInput = document.getElementById("pendant-size");
pendantSizeInput.addEventListener("input", function(event){
// Lose focus after 2 digits are entered
if (pendantSizeInput.value.length >= 2) {
event.target.blur();
}
})
const pendantInfo = document.getElementById("pendant-info");
let pendantSize, emptySpaceColor;
pendantInfo.addEventListener("change", function(event) {
pendantSize = parseInt(pendantSizeInput.value);
emptySpaceColor = document.getElementById("empty-space-color").value;
for (i = 0; i < pendants.length; i++) {
pendants[i].style.height = pendantSize + 'mm';
pendants[i].style.width = pendantSize + 'mm';
pendants[i].style.backgroundColor = emptySpaceColor;
}
})
const uploadBtn = document.getElementById('customer-photo-upload');
uploadBtn.addEventListener("change", function(event) {
for (i = 0; i < pendants.length; i++) {
pendants[i].style.backgroundImage = "url(" + URL.createObjectURL(event.target.files[0]) + ")";
}
});
let scale, positionUpDown, positionLeftRight, rotate;
let brightness = document.getElementById('brightness').value;
const photoEditor = document.getElementById('photo-editor');
photoEditor.addEventListener("input", function(event) {
scale = document.getElementById('scale').value;
positionUpDown = document.getElementById('position-up-down').value;
positionLeftRight = document.getElementById('position-left-right').value;
rotate = document.getElementById('rotate').value;
brightness = document.getElementById('brightness').value;
pendantPreviewChanges(scale, positionUpDown, positionLeftRight, rotate, brightness);
changeBrightnessValueText();
})
const brightnessValueText = document.getElementById('brightness-value-text');
function changeBrightnessValueText() {
brightnessValueText.innerText = brightness;
}
changeBrightnessValueText();
function pendantPreviewChanges(scale, positionUpDown, positionLeftRight, rotate, brightness) {
for (i = 0; i < pendants.length; i++) {
pendants[i].style.backgroundSize = scale + '%';
pendants[i].style.backgroundPositionX = positionLeftRight + '%';
pendants[i].style.backgroundPositionY = positionUpDown + '%';
pendants[i].style.transform = 'rotate(' + rotate + 'deg)';
pendants[i].style.filter = 'brightness(' + brightness + ')';
}
}