Refactor VK service URLs in CreateVkPostJob and UpdateVkPostJob to use 'vk.ru' instead of 'vk.com' for consistency; update BasicCarousel component to improve button visibility and touch event handling.
This commit is contained in:
@@ -83,7 +83,7 @@ class CreateVkPostJob implements ShouldQueue
|
|||||||
// Если не все изображения вошли, создаем альбом
|
// Если не все изображения вошли, создаем альбом
|
||||||
$album = $this->createAlbum($this->title, $this->images);
|
$album = $this->createAlbum($this->title, $this->images);
|
||||||
if (isset($album['id'])) {
|
if (isset($album['id'])) {
|
||||||
$albumLink = "https://vk.com/album-{$this->public_id}_{$album['id']}";
|
$albumLink = "https://vk.ru/album-{$this->public_id}_{$album['id']}";
|
||||||
$this->message .= "\n\n[{$albumLink}|Ссылка на все фотографии]";
|
$this->message .= "\n\n[{$albumLink}|Ссылка на все фотографии]";
|
||||||
} else {
|
} else {
|
||||||
Log::error('Не удалось создать альбом');
|
Log::error('Не удалось создать альбом');
|
||||||
@@ -154,7 +154,7 @@ class CreateVkPostJob implements ShouldQueue
|
|||||||
|
|
||||||
foreach ($imagePaths as $imagePath) {
|
foreach ($imagePaths as $imagePath) {
|
||||||
try {
|
try {
|
||||||
$uploadServerResponse = Http::get('https://api.vk.com/method/photos.getWallUploadServer', [
|
$uploadServerResponse = Http::get('https://api.vk.ru/method/photos.getWallUploadServer', [
|
||||||
'group_id' => $groupId,
|
'group_id' => $groupId,
|
||||||
'access_token' => (new VkAuthService())->getToken()->access_token,
|
'access_token' => (new VkAuthService())->getToken()->access_token,
|
||||||
'v' => '5.131',
|
'v' => '5.131',
|
||||||
@@ -177,7 +177,7 @@ class CreateVkPostJob implements ShouldQueue
|
|||||||
throw new \Exception('Не удалось загрузить фотографию: ' . $imagePath);
|
throw new \Exception('Не удалось загрузить фотографию: ' . $imagePath);
|
||||||
}
|
}
|
||||||
|
|
||||||
$saveResponse = Http::get('https://api.vk.com/method/photos.saveWallPhoto', [
|
$saveResponse = Http::get('https://api.vk.ru/method/photos.saveWallPhoto', [
|
||||||
'group_id' => $groupId,
|
'group_id' => $groupId,
|
||||||
'photo' => $uploadData['photo'],
|
'photo' => $uploadData['photo'],
|
||||||
'server' => $uploadData['server'],
|
'server' => $uploadData['server'],
|
||||||
@@ -207,7 +207,7 @@ class CreateVkPostJob implements ShouldQueue
|
|||||||
|
|
||||||
foreach ($videoPaths as $videoPath) {
|
foreach ($videoPaths as $videoPath) {
|
||||||
try {
|
try {
|
||||||
$saveResponse = Http::timeout(360)->get('https://api.vk.com/method/video.save', [
|
$saveResponse = Http::timeout(360)->get('https://api.vk.ru/method/video.save', [
|
||||||
'group_id' => $groupId,
|
'group_id' => $groupId,
|
||||||
'access_token' => (new VkAuthService())->getToken()->access_token,
|
'access_token' => (new VkAuthService())->getToken()->access_token,
|
||||||
'v' => '5.131',
|
'v' => '5.131',
|
||||||
@@ -247,7 +247,7 @@ class CreateVkPostJob implements ShouldQueue
|
|||||||
foreach ($documentPaths as $docPath) {
|
foreach ($documentPaths as $docPath) {
|
||||||
try {
|
try {
|
||||||
// Получение сервера для загрузки документов на стену группы
|
// Получение сервера для загрузки документов на стену группы
|
||||||
$uploadServerResponse = Http::get('https://api.vk.com/method/docs.getWallUploadServer', [
|
$uploadServerResponse = Http::get('https://api.vk.ru/method/docs.getWallUploadServer', [
|
||||||
'group_id' => $groupId,
|
'group_id' => $groupId,
|
||||||
'access_token' => (new VkAuthService())->getToken()->access_token,
|
'access_token' => (new VkAuthService())->getToken()->access_token,
|
||||||
'v' => '5.131',
|
'v' => '5.131',
|
||||||
@@ -273,7 +273,7 @@ class CreateVkPostJob implements ShouldQueue
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Сохранение документа
|
// Сохранение документа
|
||||||
$saveResponse = Http::get('https://api.vk.com/method/docs.save', [
|
$saveResponse = Http::get('https://api.vk.ru/method/docs.save', [
|
||||||
'file' => $uploadData['file'],
|
'file' => $uploadData['file'],
|
||||||
'access_token' => (new VkAuthService())->getToken()->access_token,
|
'access_token' => (new VkAuthService())->getToken()->access_token,
|
||||||
'v' => '5.131',
|
'v' => '5.131',
|
||||||
|
|||||||
@@ -103,7 +103,7 @@ class UpdateVkPostJob implements ShouldQueue
|
|||||||
// Если не все изображения вошли, создаем альбом
|
// Если не все изображения вошли, создаем альбом
|
||||||
$album = $this->createAlbum($this->title, $this->images);
|
$album = $this->createAlbum($this->title, $this->images);
|
||||||
if (isset($album['id'])) {
|
if (isset($album['id'])) {
|
||||||
$albumLink = "https://vk.com/album-{$this->public_id}_{$album['id']}";
|
$albumLink = "https://vk.ru/album-{$this->public_id}_{$album['id']}";
|
||||||
$this->message .= "\n\n[{$albumLink}|Ссылка на все фотографии]";
|
$this->message .= "\n\n[{$albumLink}|Ссылка на все фотографии]";
|
||||||
} else {
|
} else {
|
||||||
Log::error('Не удалось создать альбом');
|
Log::error('Не удалось создать альбом');
|
||||||
@@ -175,7 +175,7 @@ class UpdateVkPostJob implements ShouldQueue
|
|||||||
|
|
||||||
foreach ($imagePaths as $imagePath) {
|
foreach ($imagePaths as $imagePath) {
|
||||||
try {
|
try {
|
||||||
$uploadServerResponse = Http::get('https://api.vk.com/method/photos.getWallUploadServer', [
|
$uploadServerResponse = Http::get('https://api.vk.ru/method/photos.getWallUploadServer', [
|
||||||
'group_id' => $groupId,
|
'group_id' => $groupId,
|
||||||
'access_token' => (new VkAuthService())->getToken()->access_token,
|
'access_token' => (new VkAuthService())->getToken()->access_token,
|
||||||
'v' => '5.131',
|
'v' => '5.131',
|
||||||
@@ -198,7 +198,7 @@ class UpdateVkPostJob implements ShouldQueue
|
|||||||
throw new \Exception('Не удалось загрузить фотографию: ' . $imagePath);
|
throw new \Exception('Не удалось загрузить фотографию: ' . $imagePath);
|
||||||
}
|
}
|
||||||
|
|
||||||
$saveResponse = Http::get('https://api.vk.com/method/photos.saveWallPhoto', [
|
$saveResponse = Http::get('https://api.vk.ru/method/photos.saveWallPhoto', [
|
||||||
'group_id' => $groupId,
|
'group_id' => $groupId,
|
||||||
'photo' => $uploadData['photo'],
|
'photo' => $uploadData['photo'],
|
||||||
'server' => $uploadData['server'],
|
'server' => $uploadData['server'],
|
||||||
@@ -228,7 +228,7 @@ class UpdateVkPostJob implements ShouldQueue
|
|||||||
|
|
||||||
foreach ($videoPaths as $videoPath) {
|
foreach ($videoPaths as $videoPath) {
|
||||||
try {
|
try {
|
||||||
$saveResponse = Http::timeout(360)->get('https://api.vk.com/method/video.save', [
|
$saveResponse = Http::timeout(360)->get('https://api.vk.ru/method/video.save', [
|
||||||
'group_id' => $groupId,
|
'group_id' => $groupId,
|
||||||
'access_token' => (new VkAuthService())->getToken()->access_token,
|
'access_token' => (new VkAuthService())->getToken()->access_token,
|
||||||
'v' => '5.131',
|
'v' => '5.131',
|
||||||
@@ -268,7 +268,7 @@ class UpdateVkPostJob implements ShouldQueue
|
|||||||
foreach ($documentPaths as $docPath) {
|
foreach ($documentPaths as $docPath) {
|
||||||
try {
|
try {
|
||||||
// Получение сервера для загрузки документов на стену группы
|
// Получение сервера для загрузки документов на стену группы
|
||||||
$uploadServerResponse = Http::get('https://api.vk.com/method/docs.getWallUploadServer', [
|
$uploadServerResponse = Http::get('https://api.vk.ru/method/docs.getWallUploadServer', [
|
||||||
'group_id' => $groupId,
|
'group_id' => $groupId,
|
||||||
'access_token' => (new VkAuthService())->getToken()->access_token,
|
'access_token' => (new VkAuthService())->getToken()->access_token,
|
||||||
'v' => '5.131',
|
'v' => '5.131',
|
||||||
@@ -294,7 +294,7 @@ class UpdateVkPostJob implements ShouldQueue
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Сохранение документа
|
// Сохранение документа
|
||||||
$saveResponse = Http::get('https://api.vk.com/method/docs.save', [
|
$saveResponse = Http::get('https://api.vk.ru/method/docs.save', [
|
||||||
'file' => $uploadData['file'],
|
'file' => $uploadData['file'],
|
||||||
'access_token' => (new VkAuthService())->getToken()->access_token,
|
'access_token' => (new VkAuthService())->getToken()->access_token,
|
||||||
'v' => '5.131',
|
'v' => '5.131',
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
class="relative w-full max-w-7xl mx-auto cursor-grab"
|
class="relative w-full max-w-7xl mx-auto cursor-grab"
|
||||||
ref="carouselContainer"
|
ref="carouselContainer"
|
||||||
@mousedown.prevent="onDragStart"
|
@mousedown.prevent="onDragStart"
|
||||||
@touchstart.prevent="onDragStart"
|
@touchstart="onDragStart"
|
||||||
:class="{ 'cursor-grabbing': isDragging }"
|
:class="{ 'cursor-grabbing': isDragging }"
|
||||||
>
|
>
|
||||||
<div class="overflow-hidden h-full" ref="viewportElement">
|
<div class="overflow-hidden h-full" ref="viewportElement">
|
||||||
@@ -26,21 +26,21 @@
|
|||||||
<button
|
<button
|
||||||
@click.stop="prev"
|
@click.stop="prev"
|
||||||
:disabled="currentIndex === 0"
|
:disabled="currentIndex === 0"
|
||||||
class="hidden md:absolute top-1/2 left-0 transform -translate-y-1/2 -ml-4 md:-ml-10 bg-gray-700/70 text-white p-2 rounded-full hover:bg-gray-600/90 focus:outline-none z-100000 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity"
|
class="absolute top-1/2 left-0 transform -translate-y-1/2 md:-ml-10 bg-gray-700/70 text-white p-2 rounded-full hover:bg-gray-600/90 focus:outline-none z-10 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity"
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@click.stop="next"
|
@click.stop="next"
|
||||||
:disabled="currentIndex >= maxScrollIndex"
|
:disabled="currentIndex >= maxScrollIndex"
|
||||||
class="hidden md:absolute top-1/2 right-0 transform -translate-y-1/2 -mr-4 md:-mr-10 bg-gray-700/70 text-white p-2 rounded-full hover:bg-gray-600/90 focus:outline-none z-100000 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity"
|
class="absolute top-1/2 right-0 transform -translate-y-1/2 md:-mr-10 bg-gray-700/70 text-white p-2 rounded-full hover:bg-gray-600/90 focus:outline-none z-10 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity"
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="numberOfDots > 1"
|
v-if="numberOfDots > 1"
|
||||||
class="absolute left-1/2 transform -translate-x-1/2 flex space-x-2 p-6 z-20"
|
class="absolute -bottom-15 left-1/2 transform -translate-x-1/2 flex space-x-2 p-4 z-10"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
v-for="dotIdx in numberOfDots"
|
v-for="dotIdx in numberOfDots"
|
||||||
@@ -77,9 +77,9 @@ const props = defineProps({
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: 0.1,
|
default: 0.1,
|
||||||
},
|
},
|
||||||
gapSizePx: { // НОВЫЙ ПРОПС: Размер промежутка в пикселях
|
gapSizePx: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 16, // Соответствует TailwindCSS gap-4 (1rem = 16px)
|
default: 16,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -115,57 +115,33 @@ onBeforeUnmount(() => {
|
|||||||
if (mediaQueryList) {
|
if (mediaQueryList) {
|
||||||
mediaQueryList.removeEventListener('change', handleMediaQueryChange);
|
mediaQueryList.removeEventListener('change', handleMediaQueryChange);
|
||||||
}
|
}
|
||||||
window.removeEventListener('mousemove', onDragMove);
|
removeDragListeners();
|
||||||
window.removeEventListener('mouseup', onDragEnd);
|
|
||||||
window.removeEventListener('touchmove', onDragMove);
|
|
||||||
window.removeEventListener('touchend', onDragEnd);
|
|
||||||
window.removeEventListener('touchcancel', onDragEnd);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const totalItems = computed(() => props.items.length);
|
const totalItems = computed(() => props.items.length);
|
||||||
|
|
||||||
const itemOuterWidthPercentage = computed(() => {
|
const itemOuterWidthPercentage = computed(() => {
|
||||||
if (currentItemsToShow.value <= 0 || !viewportElement.value) return 0;
|
if (currentItemsToShow.value <= 0 || !viewportElement.value) return 0;
|
||||||
|
|
||||||
const viewportWidth = viewportElement.value.offsetWidth;
|
const viewportWidth = viewportElement.value.offsetWidth;
|
||||||
if (viewportWidth === 0) return 0;
|
if (viewportWidth === 0) return 0;
|
||||||
|
|
||||||
// Общая ширина промежутков, которую нужно вычесть из 100%
|
|
||||||
// Промежутков на 1 меньше, чем элементов
|
|
||||||
const totalGapWidthPx = (currentItemsToShow.value - 1) * props.gapSizePx;
|
const totalGapWidthPx = (currentItemsToShow.value - 1) * props.gapSizePx;
|
||||||
const totalGapWidthPercentage = (totalGapWidthPx / viewportWidth) * 100;
|
const totalGapWidthPercentage = (totalGapWidthPx / viewportWidth) * 100;
|
||||||
|
|
||||||
// Ширина, доступная для самих элементов (без промежутков)
|
|
||||||
const availableWidthForItemsPercentage = 100 - totalGapWidthPercentage;
|
const availableWidthForItemsPercentage = 100 - totalGapWidthPercentage;
|
||||||
|
|
||||||
// Ширина каждого элемента как процент от общей ширины вьюпорта
|
|
||||||
return availableWidthForItemsPercentage / currentItemsToShow.value;
|
return availableWidthForItemsPercentage / currentItemsToShow.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const itemPixelWidth = computed(() => {
|
const itemPixelWidth = computed(() => {
|
||||||
if (viewportElement.value && currentItemsToShow.value > 0) {
|
if (viewportElement.value && currentItemsToShow.value > 0) {
|
||||||
const viewportWidth = viewportElement.value.offsetWidth;
|
const viewportWidth = viewportElement.value.offsetWidth;
|
||||||
const totalGapWidthPx = (currentItemsToShow.value - 1) * props.gapSizePx;
|
const totalGapWidthPx = (currentItemsToShow.value - 1) * props.gapSizePx;
|
||||||
|
|
||||||
// Ширина каждого элемента без учета промежутка
|
|
||||||
const widthOfSingleItemPx = (viewportWidth - totalGapWidthPx) / currentItemsToShow.value;
|
const widthOfSingleItemPx = (viewportWidth - totalGapWidthPx) / currentItemsToShow.value;
|
||||||
|
|
||||||
// Для расчета смещения `translateX` нам нужно смещаться на ширину элемента
|
|
||||||
// плюс ширину одного промежутка, если он есть.
|
|
||||||
// Если мы на последнем элементе, который не имеет промежутка справа,
|
|
||||||
// но при переходе к следующему (если он есть), смещение все равно должно учитывать "отправную точку" следующего элемента.
|
|
||||||
// Поэтому всегда добавляем gapSizePx.
|
|
||||||
return widthOfSingleItemPx + props.gapSizePx;
|
return widthOfSingleItemPx + props.gapSizePx;
|
||||||
}
|
}
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const maxScrollIndex = computed(() => {
|
const maxScrollIndex = computed(() => {
|
||||||
if (!totalItems.value || totalItems.value <= currentItemsToShow.value) return 0;
|
if (!totalItems.value || totalItems.value <= currentItemsToShow.value) return 0;
|
||||||
// Максимальный индекс, до которого можно прокрутить, чтобы последний видимый элемент
|
|
||||||
// был последним элементом в массиве items.
|
|
||||||
return totalItems.value - currentItemsToShow.value;
|
return totalItems.value - currentItemsToShow.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -182,26 +158,14 @@ const currentSliderTranslateX = computed(() => {
|
|||||||
}
|
}
|
||||||
if (itemPixelWidth.value > 0) {
|
if (itemPixelWidth.value > 0) {
|
||||||
const clampedIndex = Math.min(currentIndex.value, maxScrollIndex.value);
|
const clampedIndex = Math.min(currentIndex.value, maxScrollIndex.value);
|
||||||
// При вычислении translate, мы должны смещаться на ширину элемента
|
|
||||||
// плюс один промежуток между элементами.
|
|
||||||
// Но последний промежуток на самом деле не должен быть частью смещения
|
|
||||||
// при прокрутке до последнего элемента.
|
|
||||||
//
|
|
||||||
// Давайте переопределим `itemPixelWidth` для ясности:
|
|
||||||
// `effectiveItemWidth` - это ширина одного элемента без учета его правого промежутка.
|
|
||||||
const effectiveItemWidth = (viewportElement.value.offsetWidth - (currentItemsToShow.value - 1) * props.gapSizePx) / currentItemsToShow.value;
|
const effectiveItemWidth = (viewportElement.value.offsetWidth - (currentItemsToShow.value - 1) * props.gapSizePx) / currentItemsToShow.value;
|
||||||
|
|
||||||
// Смещение = (индекс * ширина_элемента) + (индекс * размер_промежутка)
|
|
||||||
return -(clampedIndex * effectiveItemWidth + clampedIndex * props.gapSizePx);
|
return -(clampedIndex * effectiveItemWidth + clampedIndex * props.gapSizePx);
|
||||||
}
|
}
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const numberOfDots = computed(() => {
|
const numberOfDots = computed(() => {
|
||||||
if (totalItems.value === 0) return 0;
|
if (totalItems.value <= currentItemsToShow.value) return 0;
|
||||||
if (totalItems.value > 0 && totalItems.value <= currentItemsToShow.value) return 1;
|
|
||||||
// Количество точек равно максимальному индексу прокрутки + 1
|
|
||||||
return maxScrollIndex.value + 1;
|
return maxScrollIndex.value + 1;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -222,7 +186,10 @@ const goToDot = (dotIndex) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onDragStart = (event) => {
|
const onDragStart = (event) => {
|
||||||
// Не перетаскивать, если элементов мало для прокрутки
|
if (event.target.closest('button')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (totalItems.value <= currentItemsToShow.value || itemPixelWidth.value === 0) return;
|
if (totalItems.value <= currentItemsToShow.value || itemPixelWidth.value === 0) return;
|
||||||
|
|
||||||
isDragging.value = true;
|
isDragging.value = true;
|
||||||
@@ -230,7 +197,6 @@ const onDragStart = (event) => {
|
|||||||
dragStartX.value = touch.clientX;
|
dragStartX.value = touch.clientX;
|
||||||
dragCurrentX.value = touch.clientX;
|
dragCurrentX.value = touch.clientX;
|
||||||
|
|
||||||
// Рассчитываем dragStartTranslateX на основе текущего валидного индекса
|
|
||||||
const currentValidIndex = Math.min(currentIndex.value, maxScrollIndex.value);
|
const currentValidIndex = Math.min(currentIndex.value, maxScrollIndex.value);
|
||||||
const effectiveItemWidth = (viewportElement.value.offsetWidth - (currentItemsToShow.value - 1) * props.gapSizePx) / currentItemsToShow.value;
|
const effectiveItemWidth = (viewportElement.value.offsetWidth - (currentItemsToShow.value - 1) * props.gapSizePx) / currentItemsToShow.value;
|
||||||
dragStartTranslateX.value = -(currentValidIndex * effectiveItemWidth + currentValidIndex * props.gapSizePx);
|
dragStartTranslateX.value = -(currentValidIndex * effectiveItemWidth + currentValidIndex * props.gapSizePx);
|
||||||
@@ -248,11 +214,16 @@ const onDragStart = (event) => {
|
|||||||
|
|
||||||
const onDragMove = (event) => {
|
const onDragMove = (event) => {
|
||||||
if (!isDragging.value) return;
|
if (!isDragging.value) return;
|
||||||
|
|
||||||
|
if (event.cancelable) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
const touch = event.type === 'touchmove' ? event.touches[0] : event;
|
const touch = event.type === 'touchmove' ? event.touches[0] : event;
|
||||||
dragCurrentX.value = touch.clientX;
|
dragCurrentX.value = touch.clientX;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onDragEnd = (event) => {
|
const onDragEnd = () => {
|
||||||
if (!isDragging.value) {
|
if (!isDragging.value) {
|
||||||
removeDragListeners();
|
removeDragListeners();
|
||||||
return;
|
return;
|
||||||
@@ -260,11 +231,9 @@ const onDragEnd = (event) => {
|
|||||||
isDragging.value = false;
|
isDragging.value = false;
|
||||||
|
|
||||||
const draggedDistance = dragCurrentX.value - dragStartX.value;
|
const draggedDistance = dragCurrentX.value - dragStartX.value;
|
||||||
|
|
||||||
// Здесь мы должны использовать ширину одного элемента, *включая* его промежуток для расчета смещения.
|
|
||||||
const effectiveItemWidthWithGap = (viewportElement.value.offsetWidth - (currentItemsToShow.value - 1) * props.gapSizePx) / currentItemsToShow.value + props.gapSizePx;
|
const effectiveItemWidthWithGap = (viewportElement.value.offsetWidth - (currentItemsToShow.value - 1) * props.gapSizePx) / currentItemsToShow.value + props.gapSizePx;
|
||||||
|
|
||||||
if (effectiveItemWidthWithGap === 0) { // Защита от деления на ноль
|
if (effectiveItemWidthWithGap === 0) {
|
||||||
removeDragListeners();
|
removeDragListeners();
|
||||||
if (carouselContainer.value) carouselContainer.value.style.userSelect = '';
|
if (carouselContainer.value) carouselContainer.value.style.userSelect = '';
|
||||||
return;
|
return;
|
||||||
@@ -295,7 +264,6 @@ const removeDragListeners = () => {
|
|||||||
window.removeEventListener('touchend', onDragEnd);
|
window.removeEventListener('touchend', onDragEnd);
|
||||||
window.removeEventListener('touchcancel', onDragEnd);
|
window.removeEventListener('touchcancel', onDragEnd);
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user