Özelleştirilmiş aralığı filtresi Blazor üzerinde varsayılan geçirerek

oy
0

Im 2 işleyicilerle bir dizi filtre yapmaya çalışıyor ve bunun için bir javascript ve css dosyası bulduk, sorun ben projeyi çalıştırdığınızda özelleştirilmiş aralığı filtresi görünür ve 1 saniye sonra varsayılan pass. Bu bu sorunu görebilirsiniz Github depo projesini çalışan ve aralık filtresinde dikkat ve sayfayı yenileyerek.

HTML Kodu:

<input type=range multiple value=0,100 />

CSS Kodu:

@supports (--css: variables) {
    input[type=range].multirange {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

        input[type=range].multirange.original {
            position: absolute;
        }

            input[type=range].multirange.original::-webkit-slider-thumb {
                position: relative;
                z-index: 2;
            }

            input[type=range].multirange.original::-moz-range-thumb {
                transform: scale(1); /* FF doesn't apply position it seems */
                z-index: 1;
            }

        input[type=range].multirange::-moz-range-track {
            border-color: transparent; /* needed to switch FF to styleable control */
        }

        input[type=range].multirange.ghost {
            position: relative;
            background: var(--track-background);
            --track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0 ) no-repeat 0 45% / 100% 40%;
            --range-color: hsl(190, 80%, 40%);
        }

            input[type=range].multirange.ghost::-webkit-slider-runnable-track {
                background: var(--track-background);
            }

            input[type=range].multirange.ghost::-moz-range-track {
                background: var(--track-background);
            }
}

JavaScript kodu:

(function () {
    use strict;

    var supportsMultiple = self.HTMLInputElement && valueLow in HTMLInputElement.prototype;

    var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, value);

    var multirange = function (input) {
        if (supportsMultiple || input.classList.contains(multirange)) {
            return;
        }

        var value = input.getAttribute(value);
        var values = value === null ? [] : value.split(,);
        var min = +(input.min || 0);
        var max = +(input.max || 100);
        var ghost = input.cloneNode();

        input.classList.add(multirange, original);
        ghost.classList.add(multirange, ghost);

        input.value = values[0] || min + (max - min) / 2;
        ghost.value = values[1] || min + (max - min) / 2;

        input.parentNode.insertBefore(ghost, input.nextSibling);

        Object.defineProperty(input, originalValue, descriptor.get ? descriptor : {
            // Fuck you Safari >:(
            get: function () { return this.value; },
            set: function (v) { this.value = v; }
        });

        Object.defineProperties(input, {
            valueLow: {
                get: function () { return Math.min(this.originalValue, ghost.value); },
                set: function (v) { this.originalValue = v; },
                enumerable: true
            },
            valueHigh: {
                get: function () { return Math.max(this.originalValue, ghost.value); },
                set: function (v) { ghost.value = v; },
                enumerable: true
            }
        });

        if (descriptor.get) {
            // Again, fuck you Safari
            Object.defineProperty(input, value, {
                get: function () { return this.valueLow + , + this.valueHigh; },
                set: function (v) {
                    var values = v.split(,);
                    this.valueLow = values[0];
                    this.valueHigh = values[1];
                    update();
                },
                enumerable: true
            });
        }

        if (typeof input.oninput === function) {
            ghost.oninput = input.oninput.bind(input);
        }

        function update() {
            ghost.style.setProperty(--low, 100 * ((input.valueLow - min) / (max - min)) + 1 + %);
            ghost.style.setProperty(--high, 100 * ((input.valueHigh - min) / (max - min)) - 1 + %);
        }

        ghost.addEventListener(mousedown, function passClick(evt) {
            // Are the ghost and input elements inverted? (ghost is lower range)
            var isInverted = input.valueLow == ghost.value;
            // Find the horizontal position that was clicked (as a percentage of the element's width)
            var clickPoint = evt.offsetX / this.offsetWidth;
            // Map the percentage to a value in the range (note, assumes a min value of 0)
            var clickValue = max * clickPoint;

            // Get the distance to both high and low values in the range
            var highDiff = input.valueHigh - clickValue;
            var lowDiff = Math.abs(input.valueLow - clickValue);

            if (isInverted ? highDiff < lowDiff : lowDiff < highDiff) {
                // The low value is closer to the click point than the high value
                // We should update the low value input
                var passEvent = new MouseEvent(mousedown, evt);
                // Pass a new event to the low input element (which is obscured by the
                // higher ghost element, and doesn't get mouse events outside the drag handle
                input.dispatchEvent(passEvent);
                // The higher ghost element should not respond to this event
                evt.preventDefault();
                return false;
            }
        });
        input.addEventListener(input, update);
        ghost.addEventListener(input, update);

        update();
    }

    multirange.init = function () {
        [].slice.call(document.querySelectorAll(input[type=range][multiple]:not(.multirange))).forEach(multirange);
    }

    if (typeof module === undefined) {
        self.multirange = multirange;
        if (document.readyState == loading) {
            document.addEventListener(DOMContentLoaded, multirange.init);
        }
        else {
            multirange.init();
        }
    } else {
        module.exports = multirange;
    }

})();

İlginiz için teşekkür ederim.

Oluştur 24/10/2019 saat 12:01
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

Ben verilen CSS alınmış ve JavaScript olmadan Blazor uyguladığımızı.

(- özellikle etrafında hatlarıyla odak CSS üzerinde daha fazla çalışmamız gerektiğini) Eğer bir üs olarak ele geçirebilir Bunun altında kavramının bir kanıtıdır.

Ben MouseDown elleçleme sevmedim gibi verilen JS sürümüne biraz farklıdır - bu hacky hissetti.

Böyle bu örnek denetimini kullanın:

<RangeControl @bind-ValueHigh="ValueHigh" @bind-ValueLow="ValueLow"></RangeControl>
<span>@ValueLow</span>-<span>@ValueHigh</span>

@code {
    int ValueHigh=75;
    int ValueLow=25;
}

işaretleme / CSS / kod kolay, burada yazılan gerçek hayatta bundan biraz ayırmak isteyebilirsiniz yapmak adına tek bir dosyada hepsi (veya belki: Bir RangeControl.razor dosyası oluşturun ve içine koymak Not değil - Blazor ile o) sizin seçiminiz

<div id="rc-@ID">
@(new MarkupString($@"<style>
        #rc-{ID} {{
            position: relative;
            width: {Width}px;
        }}

        #rc-{ID} > input[type='range'] {{            
            padding: 0;
            margin: 0;
            display: inline-block;
            vertical-align: top;
            width: 100%;
            --range-color: hsl(190, 80%, 40%);
            background: var(--track-background);
        }}
        #rc-{ID} > input[type='range']::-moz-range-track {{
            border-color: transparent; /* needed to switch FF to 'styleable' control */
        }}
        #rc-{ID} > input[name='low-range'] {{
            position: absolute;
            --track-background: linear-gradient(to right, transparent {100 * (ValueLow - MinValue) / (MaxValue - MinValue) + 1}%, var(--range-color) 0, var(--range-color) {100 * (ValueHigh - MinValue) / (MaxValue - MinValue) - 1}%, transparent 0 ) no-repeat 0 45% / 100% 40%;
        }}
        #rc-{ID} > input[name='low-range']::-webkit-slider-thumb {{
            position: relative;
            z-index: 2;
        }}
        #rc-{ID} > input[name='low-range']::-moz-range-thumb {{
                transform: scale(1); /* FF doesn't apply position it seems */
                z-index: 1;
            }}
        #rc-{ID} > input[name='high-range'] {{
            position: relative;
            --track-background: linear-gradient(to right, transparent {100 * (ValueLow - MinValue) / (MaxValue - MinValue) + 1}%, var(--range-color) 0, var(--range-color) {100 * (ValueHigh - MinValue) / (MaxValue - MinValue) - 1}%, transparent 0 ) no-repeat 0 45% / 100% 40%;
            clip-path: polygon({50 * (ValueLow + ValueHigh) / (MaxValue - MinValue) + 1}% 0, 100% 0, 100% 100%, {50 * (ValueLow + ValueHigh) / (MaxValue - MinValue) + 1}% 100%);
        }}

        #rc-{ID} > input[type='range']::-webkit-slider-runnable-track {{
            background: var(--track-background);
        }}

        #rc-{ID} > input[type='range']::-moz-range-track {{
            background: var(--track-background);
        }}
    </style>"))
    <input name="low-range" type="range" min="@MinValue" max="@MaxValue" @bind="@ValueLow" @bind:event="oninput" />
    <input name="high-range" type="range" min="@MinValue" max="@MaxValue" @bind="@ValueHigh" @bind:event="oninput" />
</div>
@code
{
    int _valueLow = 0;
    int _valueHigh = 100;
    [Parameter] public int Width { get; set; } = 200;
    [Parameter] public int MinValue { get; set; } = 0;
    [Parameter] public int MaxValue { get; set; } = 100;
    [Parameter] public int ValueLow {
        get => Math.Min(_valueLow,_valueHigh);
        set {
            if (_valueLow.Equals(value))
                return;
            _valueLow = value;
            if (_valueLow >= _valueHigh)
            {
                _valueLow = _valueHigh;
                _valueHigh = value;
                ValueHighChanged.InvokeAsync(_valueHigh);
            }
            ValueLowChanged.InvokeAsync(_valueLow);
        }
    }
    [Parameter] public int ValueHigh {
        get => Math.Max(_valueLow,_valueHigh);
        set {
            if (_valueHigh.Equals(value))
                return;
            _valueHigh = value;
            if (_valueLow >= _valueHigh)
            {
                _valueHigh = _valueLow;
                _valueLow = value;
                ValueLowChanged.InvokeAsync(_valueLow);
            }
            ValueHighChanged.InvokeAsync(_valueHigh);
        }
    }
    [Parameter] public EventCallback<int> ValueLowChanged { get; set; }
    [Parameter] public EventCallback<int> ValueHighChanged { get; set; }
    string ID = Guid.NewGuid().ToString().Replace("-", "").Substring(15);
}
Cevap 24/10/2019 saat 17:34
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more