/
observableColorPickerExample.js
118 lines (100 loc) · 5.82 KB
/
observableColorPickerExample.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import {Observable, addListener, setValue, getValue, newListener} from "../../observable.js";
import {firstOfTriple, secondOfTriple, thirdOfTriple, triple} from "../../../lambda-calculus-library/lambda-calculus.js";
import {toHexString, toRGBString, addUnSubscriberToggle, creatHtmlUnsubscribeToggle} from "../observableUtilities.js";
import {eitherDomElement, eitherElementsOrErrorsByFunction} from "../../../maybe/maybe.js";
import {Box, fold, fmap} from "../../../box/box.js";
import {reduce} from "../../../stack/stack.js";
import {convertListMapToArray} from "../../../listMap/listMap.js";
// Either all the necessary Dom-Element exist or display all missed Element
eitherElementsOrErrorsByFunction(eitherDomElement)("resultColor", "rgbValue", "hex", "hsl", "inputR", "inputG", "inputB","rangeR", "rangeG", "rangeB")
(err => document.body.innerHTML = Box(err)
(fmap)(reduce(acc => curr => acc + "<br>" + curr )("<h1>Error</h1>"))
(fold)(txt => `<div style="background: #ffcccb; padding: 10px; border-radius: 1rem">${txt}</div>`))
(result => {
const [resultColor, rgbValue, hex, hsl, inputR, inputG, inputB, rangeR, rangeG, rangeB] = convertListMapToArray(result);
// Getter methods for the RPG-Values (triple)
const getRed = firstOfTriple;
const getGreen = secondOfTriple;
const getBlue = thirdOfTriple;
// Create Listeners for every color (red, green, blue) to Text- & Slider-Input
const listenerInputR = newListener(nVal => _ => inputR.value = nVal(getRed));
const listenerRangeR = newListener(nVal => _ => rangeR.value = nVal(getRed));
const listenerInputG = newListener(nVal => _ => inputG.value = nVal(getGreen));
const listenerRangeG = newListener(nVal => _ => rangeG.value = nVal(getGreen));
const listenerInputB = newListener(nVal => _ => inputB.value = nVal(getBlue));
const listenerRangeB = newListener(nVal => _ => rangeB.value = nVal(getBlue));
// Create Listeners for the Background-Result, RGB- & Hex-Labels
const listenerBgColorRGB = newListener(nVal => _ => resultColor.style.backgroundColor = toRGBString(nVal(getRed), nVal(getGreen), nVal(getBlue)));
const listenerRgbTextRGB = newListener(nVal => _ => rgbValue.value = toRGBString(nVal(getRed), nVal(getGreen), nVal(getBlue)));
const listenerHexTextRGB = newListener(nVal => _ => hex.textContent = toHexString(nVal(getRed), nVal(getGreen), nVal(getBlue)));
// Create Observable-Object, define the three initial-Values RGB and append the Listeners
let rgbObservable = Observable(triple(55)(215)(150))
(addListener)( listenerInputR )
(addListener)( listenerRangeR )
(addListener)( listenerInputG )
(addListener)( listenerRangeG )
(addListener)( listenerInputB )
(addListener)( listenerRangeB )
(addListener)( listenerBgColorRGB )
(addListener)( listenerRgbTextRGB )
(addListener)( listenerHexTextRGB );
// Connecting the Observables with every Input-Field (Range and Text).
inputR.oninput = _ =>
rgbObservable = rgbObservable(setValue)(
triple
(inputR.value)
(rgbObservable(getValue)(getGreen))
(rgbObservable(getValue)(getBlue))
);
rangeR.oninput = _ =>
rgbObservable = rgbObservable(setValue)(
triple
(rangeR.value)
(rgbObservable(getValue)(getGreen))
(rgbObservable(getValue)(getBlue))
);
inputG.oninput = _ =>
rgbObservable = rgbObservable(setValue)(
triple
(rgbObservable(getValue)(getRed))
(inputG.value)
(rgbObservable(getValue)(getBlue))
);
rangeG.oninput = _ =>
rgbObservable = rgbObservable(setValue)(
triple
(rgbObservable(getValue)(getRed))
(rangeG.value)
(rgbObservable(getValue)(getBlue))
);
inputB.oninput = _ =>
rgbObservable = rgbObservable(setValue)(
triple
(rgbObservable(getValue)(getRed))
(rgbObservable(getValue)(getGreen))
(inputB.value)
);
rangeB.oninput = _ =>
rgbObservable = rgbObservable(setValue)(
triple
(rgbObservable(getValue)(getRed))
(rgbObservable(getValue)(getGreen))
(rangeB.value)
);
// Toggleable Un/Subscribers
const rgbResultElement = creatHtmlUnsubscribeToggle(resultColor, "RGB-Background");
rgbResultElement.onclick = _ =>
rgbObservable = addUnSubscriberToggle(rgbObservable, listenerBgColorRGB, rgbResultElement);
const rgbTextElement = creatHtmlUnsubscribeToggle(rgbValue, "RGB", true);
rgbTextElement.onclick = _ =>
rgbObservable = addUnSubscriberToggle(rgbObservable, listenerRgbTextRGB, rgbTextElement);
const hexTextElement = creatHtmlUnsubscribeToggle(hex, "HEX", true);
hexTextElement.onclick = _ =>
rgbObservable = addUnSubscriberToggle(rgbObservable, listenerHexTextRGB, hexTextElement);
const inputRTextElement = creatHtmlUnsubscribeToggle(inputR, "Input R", true);
inputRTextElement.onclick = _ =>
rgbObservable = addUnSubscriberToggle(rgbObservable, listenerInputR, inputRTextElement);
const rangeRTextElement = creatHtmlUnsubscribeToggle(rangeR, "Range R", true);
rangeRTextElement.onclick = _ =>
rgbObservable = addUnSubscriberToggle(rgbObservable, listenerRangeR, rangeRTextElement);
});