Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-513.24.1.lve.el8.x86_64

PHP Version:

8.2.23

User:

aptodayn

Directory:

/home/aptodayn/uturntime.com

Free Space:

1.4 TB

🔧 Quick Actions

✏️ Editing: epaper_clip.php

<?php
// /janasena/epaper_clip.php
require_once __DIR__ . '/config.php';

if (!function_exists('h')) {
    function h($s) {
        return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8');
    }
}

/**
 * SAME per-page image helper as epaper_view.php
 */
if (!function_exists('epaper_page_image')) {
    function epaper_page_image(string $coverImg, int $page): string
    {
        // Page 1 => always cover
        if ($page <= 1 || $coverImg === '') {
            return $coverImg;
        }

// Folder from cover path
        $dir = 'admin/uploads';
        $pos = strrpos($coverImg, '/');
        if ($pos !== false) {
            $dir = substr($coverImg, 0, $pos); // e.g. admin/uploads/epaper/covers
        }

// File name + extension
        $file   = basename($coverImg);
        $dotPos = strrpos($file, '.');

if ($dotPos !== false) {
            $name = substr($file, 0, $dotPos); // janasena-epaper-2025-12-08-cover
            $ext  = substr($file, $dotPos);    // .jpg / .webp / .png
        } else {
            $name = $file;
            $ext  = '';
        }

// Remove "-cover" suffix
        if (substr($name, -6) === '-cover') {
            $name = substr($name, 0, -6); // janasena-epaper-2025-12-08
        }

if ($name === '') {
            return $coverImg;
        }

// Final relative path: {dir}/{name}-{page}{ext}
        $relPath = $dir . '/' . $name . '-' . $page . $ext;
        $fsPath  = __DIR__ . '/' . ltrim($relPath, '/');

if (is_file($fsPath)) {
            return $relPath;
        }

// Fallback – show cover
        return $coverImg;
    }
}

// ---------- GET EPAPER ID & PAGE ----------
$epaperId    = isset($_GET['id']) ? (int)$_GET['id'] : 0;
$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1; // default page 1

if ($epaperId <= 0) {
    http_response_code(404);
    echo "Invalid ePaper.";
    exit;
}

// ---------- FETCH EPAPER RECORD ----------
$stmt = $conn->prepare("
    SELECT * 
    FROM epapers
    WHERE id = ? AND is_active = 1
    LIMIT 1
");
$stmt->bind_param("i", $epaperId);
$stmt->execute();
$res    = $stmt->get_result();
$epaper = $res->fetch_assoc();
$stmt->close();

if (!$epaper) {
    http_response_code(404);
    echo "ePaper not found.";
    exit;
}

$siteName = get_setting('site_name', 'Jana Sena News');

$title    = $epaper['title'] ?: ($siteName . ' ePaper');
$edition  = $epaper['edition'] ?: 'Edition';
$pubDate  = $epaper['published_date'] ?? null;
$niceDate = $pubDate ? date('d M Y', strtotime($pubDate)) : '';

$pdfUrl   = $epaper['pdf_url'] ?? '';
$coverImg = !empty($epaper['cover_image']) ? $epaper['cover_image'] : 'assets/images/epaper-placeholder.jpg';

// total pages – SAME logic as epaper_view.php (fallback to 8 if no column)
$totalPagesRaw = isset($epaper['total_pages']) ? (int)$epaper['total_pages'] : 0;
$totalPages    = $totalPagesRaw > 0 ? $totalPagesRaw : 8;
if ($totalPages < 1) {
    $totalPages = 1;
}

// clamp page
$currentPage = max(1, min($currentPage, $totalPages));

// current page image
$pageImageUrl = epaper_page_image($coverImg, $currentPage);

// SEO + canonical
$pageTitle = 'Clip Tool - ' . $title . ' (Page ' . $currentPage . ')';
$pageDescription = 'Create and download a custom clipping from ' . $edition . ' edition of '
    . $siteName . ' ePaper, page ' . $currentPage . '.';
$pageKeywords = get_setting('default_meta_keywords', 'jana sena, epaper, clip, cutting');

$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$host   = $_SERVER['HTTP_HOST'] ?? 'localhost';
$scriptDir = rtrim(str_replace('\\', '/', dirname($_SERVER['SCRIPT_NAME'] ?? '/janasena/epaper_clip.php')), '/');
if ($scriptDir === '') {
    $scriptDir = '/';
}
$canonicalPath = rtrim($scriptDir, '/') . '/epaper_clip.php';
$pageCanonical = $scheme . '://' . $host . $canonicalPath
    . '?id=' . $epaperId . '&page=' . $currentPage;

// original epaper_view url – share kosam
$viewPath = rtrim($scriptDir, '/') . '/epaper_view.php';
$viewUrl  = $scheme . '://' . $host . $viewPath
    . '?id=' . $epaperId . '&page=' . $currentPage;

// for header layout
$noMainMargin = true;

include 'header.php';
?>

.clip-layout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

/* LEFT: image + overlay */
.clip-image-col {
    flex: 1 1 auto;
    min-width: 0;
}

.clip-image-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 10px;
    box-shadow:
        0 20px 40px rgba(148, 163, 184, 0.5),
        0 0 0 1px rgba(243, 244, 246, 0.9);
    border: 1px solid #e5e7eb;
}

.clip-image-header {
    padding: 4px 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clip-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
}

.clip-page-pill {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
}

/* Image container */
.clip-image-area {
    position: relative;
    background: #f3f4f6;
    border-radius: 10px;
    margin-top: 8px;
    overflow: hidden;
    max-height: 80vh;
}

.clip-image-area-inner {
    position: relative;
    text-align: center;
    padding: 10px;
}

.clip-image-area-inner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    cursor: crosshair;
}

/* Selection rectangle */
.clip-rect {
    position: absolute;
    border: 2px solid rgba(239, 68, 68, 0.95);
    background: rgba(248, 250, 252, 0.12);
    pointer-events: none;
    display: none;
    box-shadow:
        0 0 0 1px rgba(248,113,113,0.7),
        0 10px 25px rgba(15,23,42,0.35);
}

/* RIGHT: tools / instructions */
.clip-tools-col {
    flex: 0 0 270px;
    max-width: 270px;
}

.clip-tools-card {
    background: #020617;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.8),
        0 0 0 1px rgba(15,23,42,0.9);
    color: #e5e7eb;
    border: 1px solid #111827;
}

.clip-tools-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.clip-tools-sub {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 8px;
}

.clip-steps {
    font-size: 0.8rem;
    padding-left: 16px;
    margin-bottom: 10px;
}

.clip-steps li {
    margin-bottom: 4px;
}

/* buttons */
.clip-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.btn-clip-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 0.82rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(90deg, #f97316, #ea580c);
    color: #111827;
    font-weight: 600;
    cursor: pointer;
}

.btn-clip-primary i {
    font-size: 0.9rem;
}

.btn-clip-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 0.8rem;
    border-radius: 999px;
    border: 1px solid #4b5563;
    background: transparent;
    color: #e5e7eb;
    text-decoration: none;
}

.btn-clip-secondary i {
    font-size: 0.9rem;
}

/* INFO BADGE */
.clip-info-badge {
    font-size: 0.74rem;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(15,23,42,0.9);
    border: 1px solid #1e293b;
    color: #9ca3af;
}

/* MODAL styles (share box) */
.clip-preview-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow:
        0 14px 30px rgba(15,23,42,0.5),
        0 0 0 1px rgba(209,213,219,0.9);
}

.clip-link-input {
    font-size: 0.8rem;
}

/* share icons */
.clip-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-right: 4px;
}

.clip-share-btn.fb {
    background: #1877f2;
    color: #fff;
}
.clip-share-btn.x {
    background: #000;
    color: #fff;
}
.clip-share-btn.wa {
    background: #25d366;
    color: #fff;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .clip-layout {
        flex-direction: column;
    }

.clip-tools-col {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .clip-page-wrap {
        padding-top: 8px;
        padding-bottom: 24px;
    }

.clip-image-card {
        padding: 8px;
        border-radius: 12px;
    }

.clip-tools-card {
        border-radius: 12px;
    }
}
</style>

<div class="clip-image-col">
            <div class="clip-image-card">
                <div class="clip-image-header">
                    <div class="clip-title">
                        <?= h($title); ?>
                    </div>
                    <div class="clip-page-pill">
                        Page <?= $currentPage; ?>
                    </div>
                </div>

<div class="clip-image-area">
                    <div class="clip-image-area-inner" id="clipImageContainer">
                        <?php if (!empty($pageImageUrl)): ?>
                            <img src="<?= h($pageImageUrl); ?>"
                                 alt="ePaper page <?= $currentPage; ?>"
                                 id="clipImage">
                            <div class="clip-rect" id="clipRect"></div>
                        <?php else: ?>
                            <div style="padding:40px 20px; text-align:center; color:#4b5563;">
                                No image configured for this ePaper page.
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

<aside class="clip-tools-col">
            <div class="clip-tools-card">
                <div class="clip-tools-title">
                    Clip &amp; Share
                </div>
                <div class="clip-tools-sub">
                    Drag on the page to select an area. Then preview, share or download the clipping.
                </div>

<ol class="clip-steps">
                    <li>Click and drag on the ePaper page.</li>
                    <li>Adjust selection if needed.</li>
                    <li>Click <strong>Share / Download Clip</strong>.</li>
                </ol>

<div class="clip-buttons">
                    <button type="button" class="btn-clip-primary" id="shareClipBtn">
                        <i class="fas fa-share-alt"></i>
                        <span>Share / Download Clip</span>
                    </button>

<a href="epaper_view.php?id=<?= $epaperId; ?>&page=<?= $currentPage; ?>"
                       class="btn-clip-secondary">
                        <i class="fas fa-arrow-left"></i>
                        <span>Back to ePaper</span>
                    </a>
                </div>

<div class="clip-info-badge">
                    Tip: Clippings are generated in your browser only. No image is uploaded to the server.
                </div>
            </div>
        </aside>
    </div>
</div>

<div class="modal fade" id="clipShareModal" tabindex="-1" aria-labelledby="clipShareLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title" id="clipShareLabel">Share It</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="" alt="Clip preview" id="clipPreviewImg" class="clip-preview-img mb-2">

<input type="text"
               class="form-control form-control-sm clip-link-input mb-2"
               id="clipShareLink"
               value="<?= h($viewUrl); ?>"
               readonly
               onclick="this.select();">

<div class="d-flex justify-content-between mt-2">
          <a href="<?= h($viewUrl); ?>"
             target="_blank"
             class="btn btn-outline-secondary btn-sm">
             Open
          </a>
          <a href="#"
             id="clipDownloadLink"
             class="btn btn-primary btn-sm">
             Download
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

if (!img || !rect || !container || !shareBtn) return;

let isSelecting = false;
    let startX = 0, startY = 0;
    let currentX = 0, currentY = 0;

let selection = { x: 0, y: 0, w: 0, h: 0 };

function getOffset(e) {
        const box = img.getBoundingClientRect();
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;

let x = clientX - box.left;
        let y = clientY - box.top;

// clamp
        x = Math.max(0, Math.min(x, box.width));
        y = Math.max(0, Math.min(y, box.height));

return { x, y, box };
    }

function onDown(e) {
        e.preventDefault();
        const pos = getOffset(e);
        isSelecting = true;
        startX = pos.x;
        startY = pos.y;

selection.x = startX;
        selection.y = startY;
        selection.w = 0;
        selection.h = 0;

rect.style.display = 'block';
        rect.style.left = startX + 'px';
        rect.style.top = startY + 'px';
        rect.style.width = '0px';
        rect.style.height = '0px';
    }

function onMove(e) {
        if (!isSelecting) return;
        e.preventDefault();
        const pos = getOffset(e);

currentX = pos.x;
        currentY = pos.y;

const x = Math.min(startX, currentX);
        const y = Math.min(startY, currentY);
        const w = Math.abs(currentX - startX);
        const h = Math.abs(currentY - startY);

selection.x = x;
        selection.y = y;
        selection.w = w;
        selection.h = h;

rect.style.left = x + 'px';
        rect.style.top = y + 'px';
        rect.style.width = w + 'px';
        rect.style.height = h + 'px';
    }

function onUp(e) {
        if (!isSelecting) return;
        e.preventDefault();
        isSelecting = false;
    }

img.addEventListener('mousedown', onDown);
    img.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);

img.addEventListener('touchstart', onDown, { passive: false });
    img.addEventListener('touchmove', onMove, { passive: false });
    window.addEventListener('touchend', onUp, { passive: false });

// SHARE / DOWNLOAD MODAL LOGIC
    shareBtn.addEventListener('click', function() {
        if (selection.w < 10 || selection.h < 10) {
            alert('Please drag on the page to select an area before sharing.');
            return;
        }

const naturalWidth = img.naturalWidth;
        const naturalHeight = img.naturalHeight;
        const displayWidth = img.getBoundingClientRect().width;
        const displayHeight = img.getBoundingClientRect().height;

if (!naturalWidth || !naturalHeight || !displayWidth || !displayHeight) {
            alert('Unable to read image size. Please try again.');
            return;
        }

const scaleX = naturalWidth / displayWidth;
        const scaleY = naturalHeight / displayHeight;

const sx = selection.x * scaleX;
        const sy = selection.y * scaleY;
        const sw = selection.w * scaleX;
        const sh = selection.h * scaleY;

const canvas = document.createElement('canvas');
        canvas.width = sw;
        canvas.height = sh;

const ctx = canvas.getContext('2d');
        ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh);

const dataURL = canvas.toDataURL('image/jpeg', 0.95);

// preview image
        const previewImg = document.getElementById('clipPreviewImg');
        const downloadLink = document.getElementById('clipDownloadLink');
        const fbBtn = document.getElementById('clipShareFb');
        const xBtn = document.getElementById('clipShareX');
        const waBtn = document.getElementById('clipShareWa');
        const linkInput = document.getElementById('clipShareLink');

previewImg.src = dataURL;
        downloadLink.href = dataURL;

const d = new Date();
        const stamp = d.getFullYear().toString()
            + ('0' + (d.getMonth() + 1)).slice(-2)
            + ('0' + d.getDate()).slice(-2)
            + '-'
            + ('0' + d.getHours()).slice(-2)
            + ('0' + d.getMinutes()).slice(-2);

downloadLink.download = 'janasena-epaper-clip-page<?= $currentPage; ?>-' + stamp + '.jpg';

// share links use page URL (not image URL)
        const pageUrl = encodeURIComponent(linkInput.value);
        const shareText = encodeURIComponent('<?= h($title); ?>');

fbBtn.onclick = function() {
            window.open('https://www.facebook.com/sharer/sharer.php?u=' + pageUrl, '_blank');
        };
        xBtn.onclick = function() {
            window.open('https://x.com/intent/tweet?url=' + pageUrl + '&text=' + shareText, '_blank');
        };
        waBtn.onclick = function() {
            window.open('https://api.whatsapp.com/send?text=' + shareText + '%20' + pageUrl, '_blank');
        };

// show modal (Bootstrap 5)
        var modal = new bootstrap.Modal(document.getElementById('clipShareModal'));
        modal.show();
    });
})();
</script>

<?php include 'footer.php'; ?>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: epaper_clip.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation