bitplatform/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor at develop · bitfoundation/bitplatform · GitHub

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
@namespace Bit.BlazorUI
@inherits BitComponentBase

@{
    var thumbStyle = FormattableString.Invariant($"top:{_saturationPickerThumbPosition?.Top}px;left:{_saturationPickerThumbPosition?.Left}px;background-color:{Rgb}");

    var alphaSliderBg = "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)";
    var alphaSliderStyle = $"background:linear-gradient(to left,{Rgb} 0%, transparent 100%), {alphaSliderBg};";
}

<div @ref="RootElement"
     @attributes="HtmlAttributes"
     id="@_Id"
     role="group"
     style="@StyleBuilder.Value"
     class="@ClassBuilder.Value"
     dir="@Dir?.ToString().ToLower()"
     aria-label="@GetRootElAriaLabel()">

    <div @ref="_saturationPickerRef"
         @onpointerdown="HandleOnSaturationPickerPointerDown"
         tabindex="0"
         role="slider"
         aria-valuemin="0"
         aria-valuemax="100"
         class="bit-clp-rec"
         aria-label="Color saturation"
         style="@_saturationPickerStyle">
        <div class="bit-clp-light"></div>
        <div class="bit-clp-dark"></div>
        <div class="bit-clp-thumb" style="@thumbStyle"></div>
    </div>

    <div class="bit-clp-cnt">
        <div class="bit-clp-sct">
            <div class="bit-clp-sld bit-clp-hsd">
                <input @oninput="HandleOnHueInput"
                       min="0"
                       max="359"
                       type="range"
                       tabindex="0"
                       role="slider"
                       value="@_selectedHue"
                       class="bit-clp-inp"
                       aria-label="Hue"
                       aria-valuemin="0"
                       aria-valuemax="359"
                       aria-valuenow="@_selectedHue"
                       aria-valuetext="@_selectedHue">
            </div>

            @if (ShowAlphaSlider)
            {
                <div class="bit-clp-sld bit-clp-asd" style=@alphaSliderStyle>
                    <input @oninput="HandleOnAlphaInput"
                           step="0.01"
                           min="0"
                           max="1"
                           type="range"
                           tabindex="0"
                           role="slider"
                           aria-valuemin="0"
                           aria-label="Alpha"
                           class="bit-clp-inp"
                           aria-valuemax="1"
                           value="@(FormattableString.Invariant($"{_color.A}"))"
                           aria-valuenow="@(FormattableString.Invariant($"{_color.A}"))"
                           aria-valuetext="@(FormattableString.Invariant($"{_color.A}"))">
                </div>
            }
        </div>

        @if (ShowPreview)
        {
            <div class="bit-clp-pre" style=@($"background: {_color.Rgba}")></div>
        }
    </div>
</div>