webdlh-net/Views/Profil/Organisasi.cshtml

@{
    Layout = "_Layout";

    ViewData["Title"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Struktur Organisasi, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Struktur Organisasi";
    ViewData["TitleBeforeHighlight"] = "Struktur";
    ViewData["TitleHighlight"] = "Organisasi";
}

<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

<section class="container max-w-6xl mx-auto px-4 py-8">
    <div class="flex justify-center text-center">
         <img id="orgChart" class="sm:max-w-sm md:max-w-3xl lg:max-w-5xl cursor-pointer hover:opacity-80 transition-opacity" 
              src="@Url.Content("~/assets/images/profil/org.png")" 
              alt="Struktur Organisasi DLH DKI Jakarta"
              onclick="openImageModal()">
    </div>
</section>

<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center" onclick="closeImageModal()">
    <div class="relative w-full h-full overflow-hidden">
        <div id="imageContainer" class="w-full h-full flex items-center justify-center overflow-hidden touch-pan-x touch-pan-y">
            <img id="modalImage" class="max-w-none h-auto transition-transform duration-200 select-none" 
                 src="" alt="" 
                 onclick="event.stopPropagation()"
                 ondragstart="return false">
        </div>
        <button class="absolute top-4 right-4 text-white text-3xl hover:text-gray-300 z-10 bg-black bg-opacity-50 rounded-full w-12 h-12 flex items-center justify-center" onclick="closeImageModal()">&times;</button>
        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-white text-sm bg-black bg-opacity-50 px-4 py-2 rounded">
            <span class="hidden md:inline">Scroll untuk zoom • Drag untuk pan • </span>
            <span class="md:hidden">Pinch untuk zoom • Drag untuk pan • </span>
            ESC untuk tutup
        </div>
    </div>
</div>

<register-block dynamic-section="scripts" key="jsOrganisasi">
<script>
let currentScale = 1;
let currentTranslateX = 0;
let currentTranslateY = 0;
let isDragging = false;
let startX = 0;
let startY = 0;
let initialDistance = 0;
let initialScale = 1;

function openImageModal() {
    const modal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    const orgChart = document.getElementById('orgChart');
    
    modalImage.src = orgChart.src;
    modalImage.alt = orgChart.alt;
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // Reset transformasi
    currentScale = 1;
    currentTranslateX = 0;
    currentTranslateY = 0;
    updateImageTransform();
}

function closeImageModal() {
    const modal = document.getElementById('imageModal');
    modal.classList.add('hidden');
    document.body.style.overflow = 'auto';
    
    // Reset transformasi
    currentScale = 1;
    currentTranslateX = 0;
    currentTranslateY = 0;
    updateImageTransform();
}

function updateImageTransform() {
    const modalImage = document.getElementById('modalImage');
    modalImage.style.transform = `scale(${currentScale}) translate(${currentTranslateX}px, ${currentTranslateY}px)`;
}

function getDistance(touches) {
    const dx = touches[0].clientX - touches[1].clientX;
    const dy = touches[0].clientY - touches[1].clientY;
    return Math.sqrt(dx * dx + dy * dy);
}

// Event listeners
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeImageModal();
    }
});

// Desktop scroll zoom
document.getElementById('imageModal').addEventListener('wheel', function(e) {
    e.preventDefault();
    
    const delta = e.deltaY > 0 ? -0.1 : 0.1;
    const newScale = Math.max(0.5, Math.min(5, currentScale + delta));
    
    if (newScale !== currentScale) {
        currentScale = newScale;
        updateImageTransform();
    }
});

// Mouse events untuk desktop
document.getElementById('modalImage').addEventListener('mousedown', function(e) {
    e.preventDefault();
    isDragging = true;
    startX = e.clientX - currentTranslateX;
    startY = e.clientY - currentTranslateY;
    document.body.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', function(e) {
    if (isDragging) {
        currentTranslateX = e.clientX - startX;
        currentTranslateY = e.clientY - startY;
        updateImageTransform();
    }
});

document.addEventListener('mouseup', function() {
    isDragging = false;
    document.body.style.cursor = 'default';
});

// Touch events untuk mobile
document.getElementById('modalImage').addEventListener('touchstart', function(e) {
    e.preventDefault();
    
    if (e.touches.length === 1) {
        // Single touch - pan
        isDragging = true;
        startX = e.touches[0].clientX - currentTranslateX;
        startY = e.touches[0].clientY - currentTranslateY;
    } else if (e.touches.length === 2) {
        // Multi touch - zoom
        isDragging = false;
        initialDistance = getDistance(e.touches);
        initialScale = currentScale;
    }
});

document.getElementById('modalImage').addEventListener('touchmove', function(e) {
    e.preventDefault();
    
    if (e.touches.length === 1 && isDragging) {
        // Pan
        currentTranslateX = e.touches[0].clientX - startX;
        currentTranslateY = e.touches[0].clientY - startY;
        updateImageTransform();
    } else if (e.touches.length === 2) {
        // Zoom
        const currentDistance = getDistance(e.touches);
        const scale = (currentDistance / initialDistance) * initialScale;
        currentScale = Math.max(0.5, Math.min(5, scale));
        updateImageTransform();
    }
});

document.getElementById('modalImage').addEventListener('touchend', function(e) {
    if (e.touches.length === 0) {
        isDragging = false;
    }
});

// Double tap untuk reset zoom pada mobile
let lastTouchTime = 0;
document.getElementById('modalImage').addEventListener('touchend', function(e) {
    const currentTime = new Date().getTime();
    const tapLength = currentTime - lastTouchTime;
    
    if (tapLength < 500 && tapLength > 0) {
        // Double tap detected
        if (currentScale === 1) {
            currentScale = 2;
        } else {
            currentScale = 1;
            currentTranslateX = 0;
            currentTranslateY = 0;
        }
        updateImageTransform();
    }
    
    lastTouchTime = currentTime;
});
</script>
</register-block>