You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.9 KiB
104 lines
3.9 KiB
import $ from 'jquery';
|
|
import createHistory from 'history/createBrowserHistory';
|
|
|
|
// Создаем объект history API
|
|
const history = createHistory();
|
|
|
|
$(document).ready(function () {
|
|
// Обработчик кнопки "Подгрузить еще"
|
|
$('.courses').on('click', 'button.load__btn', function () {
|
|
load_courses($(this).attr('data-next-page-url'), false);
|
|
});
|
|
|
|
// Обработчик выбора категории
|
|
$('div.js-select-option[data-category-option]').on('click', function (e) {
|
|
e.preventDefault();
|
|
history.replace($(this).attr('data-category-url'));
|
|
load_courses($(this).attr('data-category-url'), true);
|
|
});
|
|
|
|
// Обработчик лайков
|
|
$('.courses').on('click', 'a[data-course-likes]', function (e) {
|
|
e.preventDefault();
|
|
|
|
const likedCourseElement = $(this);
|
|
const courseID = $(this).attr('data-course-id');
|
|
let isLiked = !!parseInt($(this).attr('data-liked'));
|
|
let likesCount = parseInt($(this).attr('data-course-likes-count'));
|
|
isLiked = !isLiked;
|
|
likesCount = isLiked ? likesCount + 1 : likesCount - 1;
|
|
likedCourseElement.children('.likes__counter').text(likesCount);
|
|
likedCourseElement.attr('data-course-likes-count', likesCount);
|
|
if (isLiked) {
|
|
likedCourseElement.addClass('active');
|
|
likedCourseElement.attr('data-liked', '1');
|
|
} else {
|
|
likedCourseElement.removeClass('active');
|
|
likedCourseElement.attr('data-liked', '0');
|
|
}
|
|
|
|
$.ajax(`/course/${courseID}/like`, {
|
|
method: 'POST'
|
|
})
|
|
.done(function (data) {
|
|
if (data.success === true) {
|
|
$(this).children('.likes__counter').text(data.likes_count);
|
|
likedCourseElement.attr('data-course-likes-count', data.likes_count);
|
|
if (data.is_liked) {
|
|
likedCourseElement.addClass('active');
|
|
likedCourseElement.attr('data-liked', '1');
|
|
} else {
|
|
likedCourseElement.removeClass('active');
|
|
likedCourseElement.attr('data-liked', '0');
|
|
}
|
|
}
|
|
})
|
|
.fail(function (xhr) {
|
|
isLiked = !isLiked;
|
|
likesCount = isLiked ? likesCount + 1 : likesCount - 1;
|
|
likedCourseElement.children('.likes__counter').text(likesCount);
|
|
likedCourseElement.attr('data-course-likes-count', likesCount);
|
|
if (isLiked) {
|
|
likedCourseElement.addClass('active');
|
|
likedCourseElement.attr('data-liked', '1');
|
|
} else {
|
|
likedCourseElement.removeClass('active');
|
|
likedCourseElement.attr('data-liked', '0');
|
|
}
|
|
});
|
|
})
|
|
});
|
|
|
|
function load_courses(coursesUrl, fromStart) {
|
|
$('.courses__list').css('opacity', '0.9');
|
|
const buttonElement = $('.courses').find('button.load__btn');
|
|
if (!fromStart) {
|
|
buttonElement.addClass('loading');
|
|
}
|
|
$.ajax(coursesUrl, {
|
|
method: 'GET'
|
|
})
|
|
.done(function (data) {
|
|
if (data.success === true) {
|
|
if (!fromStart) {
|
|
$('.courses__list').append(data.content);
|
|
} else {
|
|
$('.courses__list').html(data.content);
|
|
}
|
|
if (data.next_url) {
|
|
buttonElement.attr('data-next-page-url', data.next_url)
|
|
} else {
|
|
buttonElement.hide()
|
|
}
|
|
}
|
|
})
|
|
.fail(function (xhr) {
|
|
|
|
})
|
|
.always(function () {
|
|
$('.courses__list').css('opacity', '1');
|
|
if (buttonElement) {
|
|
buttonElement.removeClass('loading');
|
|
}
|
|
});
|
|
} |