https://0-60-time.com/markups/null_60_times/script/app.js

1$('document').ready(function () {
2
3    let select = {
4        choose: function (option) {
5            $('.js-option', option.parent()).removeClass('active')
6            option.addClass('active')
7            option.closest('.select__list_opened').removeClass('select__list_opened')
8            option.closest('.select').find('.select__selected-title').text(option.text())
9            option.closest('.select').find('.select__arrow').removeClass('select__arrow_rotate')
10        },
11        value: function (select) {
12            let val = $('.js-option.active', select).data('value')
13            if (typeof val == 'undefined') {
14                val = ''
15            }
16            return val
17        }
18    }
19
20    // main
21    $('body').on('click', '#select_main_make .js-option', function (e) {
22        let self = $(this)
23        select.choose(self)
24
25        let list = $('#select_main_model .js-list')
26        list.empty();
27        $.get('/ajax/get-models-by-make/?make_alias=' + self.data('value') , function(response) {
28            list.append(`<div class="select__list-item js-option" data-value="" data-item="true">-</div>`);
29            $.each(response.items, function(value, item){
30                list.append(`<div class="select__list-item js-option" data-value="${item.alias}

30" data-item="true">${item.title}</div>`);
31            });
32        }, 'json');
33
34    })
35
36    $('body').on('click', '#select_main_model .js-option', function (e) {
37        let self = $(this)
38        select.choose(self)
39
40        $('#select_main_model .select__selected-title').text(self.text())
41    })
42
43    $('body').on('click', '#btn_filter_home_main', function (e) {
44        e.preventDefault()
45        let paths = [
46            '0-60-times',
47            select.value($('#select_main_make')),
48            select.value($('#select_main_model'))
49        ];
50        paths = paths.filter((item) => {
51            return item != '' && typeof item != 'undefined'
52        })
53        if (paths.length > 1) {
54            window.location.href = '/' + paths.join('/') + '/'
55        }
56    })
57
58    //discover
59    $('body').on('click', '#select_discover_make .js-option', function (e) {
60        let self = $(this)
61        select.choose(self)
62
63        let list = $('#select_discover_model .js-list')
64        let listYear = $('#select_discover_model_year .js-list')
65        list.empty();
66        listYear.empty();
67
68        $.get('/ajax/get-models-by-make/?make_alias=' + self.data('value') , function(response) {
69            $.each(response.items, function(value, item){
70                list.append(`<div class="select__list-item js-option" data-value="${item.alias}

70" data-item="true">${item.title}</div>`);
71            });
72        }, 'json');
73
74    })
75
76    $('body').on('click', '#select_discover_model .js-option', function (e) {
77        let self = $(this)
78        select.choose(self)
79        let listYear = $('#select_discover_model_year .js-list')
80        listYear.empty();
81
82        $.get('/ajax/get-years-by-model/?make_alias=' + select.value($('#select_discover_make')) + '&model_alias=' + self.data('value') , function(response) {
83            $.each(response.items, function(value, item){
84                listYear.append(`<div class="select__list-item js-option" data-value="${item.year}" data-item="true">${item.year}</div>`);
85            });
86        }, 'json');
87    })
88
89    $('body').on('click', '#select_discover_model_year .js-option', function (e) {
90        let self = $(this)
91        select.choose(self)
92        let paths = [
93            '0-60-times',
94            select.value($('#select_discover_make')),
95            select.value($('#select_discover_model')),
96            select.value($('#select_discover_model_year'))
97        ];
98        window.location.href = '/' + paths.join('/') + '/'
99    })
100
101    let spoiler = {
102        control: `<div class="show-btn show-btn_margin-top-md js-spoiler-control">
103                        <button class="show-btn__btn">
104                            <div class="show-btn__btn-hrs">
105                                <hr class="hr hr_accent">
106                                <hr class="hr hr_danger">
107                            </div>
108                            <div class="show-btn__btn-bottom js-text">
109                                Show all
110                            </div>
111                            <div class="show-btn__btn-hrs">
112                                <hr class="hr hr_accent">
113                                <hr class="hr hr_danger">
114                            </div>
115                        </button>
116                    </div>`,
117
118        hide: function (spoilerList) {
119            let i = spoilerList.data('limit') - 1;
120            $('.js-item:gt('+i+')', spoilerList).addClass('hidden')
121            if (typeof spoilerList.data('hidden') == 'undefined') {
122                this.appendControl(spoilerList);
123            }
124            spoilerList.data('hidden', true)
125            spoilerList.next('.js-spoiler-control').find('.js-text').text('Show more')
126        },
127
128        show: function (spoilerList) {
129            $('.js-item', spoilerList).removeClass('hidden')
130            spoilerList.next('.js-spoiler-control').find('.js-text').text('Show less')
131            spoilerList.data('hidden', false)
132        },
133
134        appendControl: function (spoilerList) {
135            $(this.control).insertAfter(spoilerList)
136        }
137    }
138
139    $('body').on('click', '.js-spoiler-control', function (e) {
140        let spoilerList = $(this).prev('.js-spoiler')
141        if (spoilerList.data('hidden')) {
142            spoiler.show(spoilerList)
143        } else {
144            spoiler.hide(spoilerList)
145        }
146    })
147
148    $('.js-spoiler').each(function (index) {
149        let spoilerList = $(this)
150
151        if ($('.js-item', spoilerList).length > spoilerList.data('limit')) {
152            spoiler.hide(spoilerList)
153        }
154    })
155
156
157
158})