JavaScript 필터링 UI 연동 무한스크롤 스크립트 클래스
페이지 정보
작성자 최고관리자 작성일 24-04-30 16:51 조회 1,445 댓글 0본문
class Queue {
constructor() {
this._arr = [];
}
enqueue(item) {
this._arr.push(item);
}
dequeue() {
return this._arr.shift();
}
}
class Filter {
constructor() {
this.list_url = '/api/campaign_list'
this.page = new Queue()
this.next_count = 3
this.config = {
page: 1,
site_name: [],
channel: [],
category: [],
region: [],
script_fee: [],
individual: 'all',
order: 'apply_score',
keyword: ''
}
this.working = false;
this.site_list()
if (getUrlParam.get('search_campaign')) {
$('.keyword').val(getUrlParam.get('search_campaign'))
this.config.keyword = $('.keyword').val()
}
if (user_no) {
var _this = this;
this.getIndividualTotal()
this.getLastFilterConfig().then(function (data) {
for (const key in data) {
if (Object.hasOwnProperty.call(data, key)) {
if (data[key]) {
_this.initFilterConfig(key, data[key]);
_this.setFilterCheckBox(key, data[key])
}
}
}
_this.next()
})
} else {
this.next()
}
}
setFilterCheckBox(key, element) {
var element_arr = element.replaceAll('>=', 'U').replaceAll('<=', 'D').split(',');
console.log(key, element_arr);
element_arr.forEach(el => {
$(document).find('.' + key + '_tr [data-option="' + el + '"]').prop('checked', true);
$(document).find('.' + key + '_tr .all_check').prop('checked',false)
});
}
getLastFilterConfig() {
return new Promise((resolve) => {
$.getJSON('/api/filter_config?user_no=' + user_no).done(function (data) {
resolve(data)
})
})
}
initFilterConfig(key, element) {
this.config[key] = element.replaceAll('>=', 'U').replaceAll('<=', 'D').split(',')
}
site_list() {
$.ajax({
url: '/api/main/filter',
type: "GET",
success: function (data) {
if (!data || data == '') {
return false;
}
$('.filter-table').find('.site_name_tr:eq(0)').replaceWith(data);
}
})
}
init() {
$('.campaign-list-box').html('')
this.page = new Queue()
this.config.page = 1
this.config.keyword = $('.keyword').val()
this.next()
}
async next(callback) {
if (this.config.keyword) {
$('.campagin_search_result').css('opacity','1')
} else {
$('.campagin_search_result').css('opacity','0')
}
this.working = true;
const _this = this
for (let i = 0; i < this.next_count; i++) {
await this.getlist().then(function (data) {
_this.page.enqueue(data)
if (i == 0) {
_this.render()
if (callback) {
callback()
}
}
})
}
this.working = false;
}
getlist() {
const _this = this
const sendData = this.config
return new Promise((resolve) => {
$.get(this.list_url, sendData)
.done(function (data) {
resolve(data);
})
this.config.page += 1
});
}
render() {
$('.campaign-list-box').append(this.page.dequeue())
}
add_option(key, value) {
var find_index = this.config[key].indexOf(value)
if (find_index === -1) {
this.config[key].push(value)
}
}
sub_option(key, value) {
var find_index = this.config[key].indexOf(value)
if (find_index !== -1) {
this.config[key].splice(find_index, 1)
}
}
check_all(key, _this) {
this.config[key] = [];
$(document).find('.' + key + '_tr input[type=checkbox]').prop('checked', false)
$(_this).prop('checked', true)
}
getIndividualTotal() {
//var data = {};
var $status_menus = $(document).find('.status-menus .status-item');
$.ajax({
url: '/api/main/individual/total',
type: "GET", // request 전달 방식 (POST, GET 등)
dataType: 'JSON',
/*async: false,*/
success: function (_data) {
_data.forEach(ele => {
$(document).find(`.${ele.category} .count`).text(`(${ele.count})`);
});
}
})
//return data;
}
renewalIndividual() {
$.ajax({
url: '/api/main/individual/renew',
type: "GET", // request 전달 방식 (POST, GET 등)
dataType: 'JSON',
success: function (_data) {
user_info.individual = _data
}
})
}
}
댓글목록 0
등록된 댓글이 없습니다.