<!--TCD016--><script src='https://cdn.jsdelivr.net/npm/dragscroll@0.0.8/dragscroll.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var TCDscroling = $('#rec645419189'),
TCDartboardscroll = TCDscroling.find('.t396__artboard'),
TCDAdrrow = $('#rec645419188'),
isScrolling = false,
isAtEnd = false;
TCDartboardscroll.addClass('dragscroll');
function TiCodeScrollDistance() {
var w = $(window).width();
return w > 1200 ? 300 : w > 960 ? 200 : w > 640 ? 200 : w > 480 ? 100 : 300;
}
TCDAdrrow.find('.ti-arrow-left').on('click', function () {
if (isScrolling) return;
isScrolling = true;
var distance = TiCodeScrollDistance();
var container = $(this).closest('#rec645419188')
.siblings('#rec645419189')
.find('.t396__artboard');
container.animate({ scrollLeft: container.scrollLeft() - distance }, 500, function() {
isScrolling = false;
isAtEnd = false;
});
});
TCDAdrrow.find('.ti-arrow-right').on('click', function () {
if (isScrolling) return;
isScrolling = true;
var distance = TiCodeScrollDistance();
var container = $(this).closest('#rec645419188')
.siblings('#rec645419189')
.find('.t396__artboard');
if (isAtEnd) {
container.animate({ scrollLeft: 0 }, 500, function() {
isAtEnd = false;
isScrolling = false;
});
} else {
container.animate({ scrollLeft: container.scrollLeft() + distance }, 500, function () {
if (container.scrollLeft() >= container[0].scrollWidth - container.width()) {
isAtEnd = false;
}
isScrolling = false;
});
}
});
var TCDartboardscroll = $('#rec499165315 .t396__artboard');
TCDartboardscroll.on('mousedown', function () {
TCDartboardscroll.addClass('disable-scrolling');
});
$(document).on('mouseup', function () {
TCDartboardscroll.removeClass('disable-scrolling');
});
var checkInterval = setInterval(function () {
var container = TCDscroling[0];
if (!container) return;
var elements = container.querySelectorAll('.tn-elem');
if (!elements.length) return;
clearInterval(checkInterval);
var leftElem = elements[0],
rightElem = elements[0],
leftmost = leftElem.getBoundingClientRect().left,
rightmost = leftElem.getBoundingClientRect().right;
elements.forEach(function (el) {
var rect = el.getBoundingClientRect();
if (rect.left < leftmost) {
leftElem = el;
leftmost = rect.left;
}
if (rect.right > rightmost) {
rightElem = el;
rightmost = rect.right;
}
});
var leftDistance = leftElem.getBoundingClientRect().left;
var containerRect = container.getBoundingClientRect();
var rightOffset = rightElem.getBoundingClientRect().right - containerRect.left;
var overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.top = '0';
overlay.style.left = rightOffset + 'px';
overlay.style.width = leftDistance + 'px';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.0)';
overlay.style.pointerEvents = 'none';
container.querySelector('.t396__artboard').appendChild(overlay);
}, 1000);
});
</script>
<style>
.ti-arrow-right, .ti-arrow-left {
cursor: pointer;
}
#rec645419189 .t396__artboard::-webkit-scrollbar {
display: none;
}
#rec645419189 .t396__artboard {
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
@media (min-width: 320px) {
.dragscroll {
cursor: -webkit-grab;
cursor: grab;
transition: all 0.7s ease;
}
.dragscroll:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
}
.disable-scrolling::-webkit-scrollbar {
display: none;
}
</style>
<script> (function updateRecordType() { const scriptElement = document.currentScript; if (scriptElement) { const recordElement = scriptElement.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>