Как заставить Mixitup регистрироваться и фильтроваться по диапазону ввода - PullRequest
Новая
       21

Как заставить Mixitup регистрироваться и фильтроваться по диапазону ввода

0 голосов
/ 01 апреля 2019

Я пытаюсь отфильтровать коллекцию элементов по входу диапазона (среди других элементов управления). Вход диапазона содержит значение min / max и должен фильтровать элементы, находящиеся за пределами этого диапазона. Я не могу заставить это работать с предлагаемым кодом из демонстрационного фильтра patrickkunka по диапазону . Я что-то не так делаю?

Я не получаю никаких ошибок в JavaScript. Я консоль регистрирую каждую функцию, и единственная, которая не запускается при изменении ввода, - filterTestResult ().

Управление (слайдер Bootstrap): 

<li class="col-12">
       <label for="customRange3">1 to 5</label>
       <input type="text" class="level-range"
              data-filtertype="level"
              data-provide="slider"
              data-slider-ticks="[1, 2, 3, 4, 5]"
              data-slider-ticks-labels='["1", "2", "3", "4", "5"]'
              data-slider-min="1"
              data-slider-max="5"
              data-slider-step="1"
              data-slider-value="[2,3]"
              data-slider-tooltip="hide"
       >
</li>

JavaScript: 

    var mixer = mixitup('#mixContainer', {
        multifilter: {
            enable: true
        },
        animation: {
            duration: 250,
            nudge: true,
            reverseOut: false,
            effects: "fade translateZ(-100px) stagger(30ms)"
        }
    }); 

    $(".filterbox .level-range").on("change", function(){
        console.log('change runs');
        handleRangeInputChange();
    });

    function handleRangeInputChange() {
        console.log('handleInput runs');
        mixer.filter(mixer.getState().activeFilter);
    }

    function filterTestResult(testResult, target) {
        console.log('filterTestResult runs');
        var slidervalue = $(".level-range").val();
        var sliderArr = slidervalue.split(',');

        var num1 = parseInt(sliderArr[0]);
        var num2 = parseInt(sliderArr[1]);

        var size = Number(target.dom.el.getAttribute('data-level'));
        var range = getRange();

        if (size < num1 || size > num2) {
            testResult = false;
        }

        return testResult;
    }

    $(function(){
        handleRangeInputChange();
        mixitup.Mixer.registerFilter('testResultEvaluateHideShow', 'range', filterTestResult);  
    });

Пример микс-элемента: 

<a href="custom-url/" class="mix col-12 bg-white available" data-level="3" data-available="1" data-guaranteed="1" data-activity="xp-59"  title="Read more">
    .....
</a>
...