milgar / YemekSepeti Restoran Ürün Filtreleme

// ==UserScript==
// @name         YemekSepeti Restoran Ürün Filtreleme
// @namespace    https://www.milgar.net/
// @version      0.1
// @description  YemekSepeti restoran sayfasında filtreleme özelliği
// @author       milgar
// @match        https://www.yemeksepeti.com/*
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js
// @resource     https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css
// @license MIT
// @copyright 2018, Mehmet Ali İLGAR (https://milgar.net)
// ==/UserScript==

(function() {
    'use strict';
    let menus = document.getElementsByClassName("restaurantDetailBox");

    if(menus.length <= 0)
        return;

    let menu_items = [];
    let menu_item_prices = [];
    let basketContainer;
    let mostExpensivePrice = 0;
    let sliderMaxValue = 0;
    let currentLimit = 10;

    for( let i=0; i<menus.length; i++) {
        menu_items[i] = menus[i].getElementsByTagName("li");

        menu_item_prices[i] = [];
        for( let j=0; j<menu_items[i].length; j++) {

            let tmp = menu_items[i][j].getElementsByClassName("newPrice");
            if(tmp.length <= 0)
                menu_item_prices[i][j] = -1;
            else
                menu_item_prices[i][j] = parseFloat(tmp[0].innerText.substr(0, tmp[0].innerText.indexOf(" ")));

            if(menu_item_prices[i][j] > mostExpensivePrice)
                mostExpensivePrice = menu_item_prices[i][j];
        }
    }

    sliderMaxValue = mostExpensivePrice + mostExpensivePrice % 5;

    basketContainer = document.getElementById("basket-container");

    let slider = document.createElement('input');
    slider.setAttribute("id", "priceSlider");
    slider.setAttribute("type", "range");
    slider.setAttribute("step", 5);
    slider.setAttribute("min", 0);
    slider.setAttribute("max", mostExpensivePrice + mostExpensivePrice % 5);
    slider.setAttribute("value", mostExpensivePrice + mostExpensivePrice % 5);
    slider.style.display = "inline";
    slider.style.width = "138px";
    slider.oninput = function() {
        console.log(this.value);
        updateMenu(this.value);
        currentLimitInfo.innerHTML = this.value;
    };

    let clearLimit = document.createElement("span");
    clearLimit.innerHTML = "Hepsi";
    let currentLimitInfo = document.createElement("span");
    currentLimitInfo.innerHTML = mostExpensivePrice + mostExpensivePrice % 5;

    /*jshint multistr: true */

    let template = '\
<div class="ys-left-filter"> \
<div class="header"><div class="title">Ürün Filtreleri</div></div> \
<div class="filter select-box rateFilter active"> \
	<div class="slider-box-inline"> \
		<i class="ys-icons ys-icons-Standard-filterIcons-rate-passive"></i> \
		<i class="ys-icons ys-icons-Standard-filterIcons-rate-active"></i> \
		<i class="ys-icons ys-icons-redExitIcon remove-filter-icon"></i> \
		<div class="ys-filter-info"> \
			<span class="filterName">Fiyat</span> \
			<span class="filterValue"></span> \
		</div> \
		<div class="ys-pointSlider"> \
			<input name="hddnPointSlider" class="hddnPointSlider" type="hidden" value=""> \
\
		</div> \
	</div> \
</div> \
</div>';


    let parser = new DOMParser();
    let filterContainer = parser.parseFromString(template, "text/html").body.firstChild;
    filterContainer.style.marginBottom = "12px";
    basketContainer.prepend(filterContainer);
    let sliderContainer = basketContainer.getElementsByClassName("ys-pointSlider")[0];
    sliderContainer.append(currentLimitInfo);

    var range = document.createElement('div');
    range.style.width = "55%";
    range.style.display = "inline-flex";
    range.style.margin = "5% 8%";
    sliderContainer.append(range);
    sliderContainer.append(clearLimit);
    range.setAttribute("class", "ys-formSlider");

    noUiSlider.create(range, {
        start: [ currentLimit ],
        connect: [ false, false ],
        step: 5,
        range: {
            'min': [  0 ],
            'max': [ sliderMaxValue ]
        }
    });

    let handle = range.getElementsByClassName("noUi-handle")[0];

    range.noUiSlider.on('update', function(values){
        currentLimit = parseFloat(values[0]);
        updateMenu(currentLimit);
        currentLimitInfo.innerHTML = currentLimit + " TL";
        handle.innerHTML = currentLimit;
    });

    clearLimit.onclick = function() {
        currentLimit = sliderMaxValue;
        updateMenu(currentLimit);
        range.noUiSlider.set(currentLimit);
    };

    function updateMenu(limit) {
        for( let i=0; i<menus.length; i++) {
            let hiddenCount = 0;
            for( let j=0; j<menu_items[i].length; j++) {
                if(menu_item_prices[i][j] > limit){
                    menu_items[i][j].style.display = 'none';
                    hiddenCount++;
                } else {
                    menu_items[i][j].style.display = 'list-item';
                }
            }
            if(hiddenCount == menu_items[i].length){
                menus[i].style.display = 'none';
            } else {
                menus[i].style.display = 'block';
            }
        }
    }
})();