تم‌های سفارشی

نمایشگر با ظاهری خنثی و مبتنی بر Bootstrap ارائه می‌شود که از منابع جاسازی‌شده (viewer.css، به‌علاوهٔ شیوه‌نامه‌های ویژگی‑محور مانند searchBar.css و annotationBar.css) سرو می‌شود. تم‌سازی در سه سطح انجام می‌شود — کم‌عمق‌ترین سطحی را که به هدف می‌رسید انتخاب کنید.

سطح 1 — پیکربندی کروم

بخش زیادی از «تم‌سازی» در واقع پیکربندی است:

• ViewerConfig.ShowThumbs = false — بدون پنل تصویر بندانگشتی.
• ViewerConfig.FitType = "height" | "width" — نحوهٔ پر شدن صفحات در نمای پنجره.
• ViewerConfig.ShowThumbs = false همراه با بسته‌های انتخابی CssConfig/ScriptConfig — فقط کرومی را که میزبان شما استفاده می‌کند نگه دارید.

سطح 2 — بازنویسی CSS

Viewer.ReferenceCss() تگ‌های سادهٔ <link> تولید می‌کند؛ هر چیزی که بعد از آن‌ها بارگذاری کنید، بر سلسله‌مراتب پیروزی می‌یابد. اندازه و قاب نمایشگر را از طریق شیوه‌نامهٔ خود تنظیم کنید:

/* Your stylesheet, loaded after ReferenceCss() */

/* The two containers you own */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Widget page cards */
.docPage { max-width: none; }

صفحهٔ میزبان به‌طور کامل طرح بیرونی را کنترل می‌کند — ویجت داخل هر جعبه‌ای که به #divDocViewer / #div_ctlDoc اختصاص دهید رندر می‌شود (جفت کانتینر استاندارد از راه‌اندازی سریع).

دو قانون عملی:

• Bootstrap را دوبار بارگذاری نکنید. اگر برنامهٔ شما قبلاً Bootstrap را ارائه می‌دهد، IncludeBootstrapCss/IncludeBootstrap را نادیده بگیرید و اجازه دهید ویجت از آن ارث‌بری کند — این به تنهایی نمایشگر را بومی برنامهٔ شما می‌کند.
• فقط بسته‌هایی را که استفاده می‌کنید شامل کنید. هر پرچم CssConfig/ScriptConfig به‌صورت انتخابی است؛ بسته‌های کمتر، سبک‌های کمتری برای مقابله.

سطح 3 — ساخت نوار ابزار خودتان

برای تجربه‌ای کاملاً برندشده، ویجت را از رابط کاربری خودتان هدایت کنید — این دقیقاً همان روشی است که نمونهٔ مرجع نوار ابزار اصلی Viewer خود را می‌سازد. آن نوار ابزار شامل نشانه‌گذاری میزبان به‌اضافهٔ یک کمک‌کنندهٔ مخصوص برنامه است؛ این یک Ribbon SDK جاسازی‌شده نیست. نمونهٔ docViewer که پس از مقداردهی اولیه برگردانده می‌شود، سطح API شماست، به همراه نقاط انتهایی خودتان:

<div id="toolbar">
    <button id="btnOpen">Open</button>
    <button id="btnPrev">‹</button>
    <button id="btnNext">›</button>
    <!-- your design system, your icons -->
</div>
<div id="divDocViewer"><div id="div_ctlDoc"></div></div>

<script>
    const objViewer = $('#div_ctlDoc').docViewer({
        showThumbs: true,
        autoLoad:   false,
        BasePath:   '/',
        ResPath:    'doconut-res/images',
        onViewerReady: () => { /* enable your buttons */ },
        onError: (msg) => console.error('DocViewer:', msg)
    });

    document.getElementById('btnOpen').addEventListener('click', async () => {
        const resp  = await fetch('/api/open?fileName=Sample.pdf', { method: 'POST' });
        const token = await resp.text();
        objViewer.View(token);
    });
</script>

جستجو و حاشیه‌نویسی متفاوت هستند: مؤلفه‌های Ribbon اختیاری آن‌ها در SDK (IncludeSearchBar, IncludeAnnotationBar) جاسازی شده‌اند و DOM خود را تولید می‌کنند. می‌توانید آن‌ها را همراه با نوار ابزار سفارشی Viewer خود استفاده کنید یا آن‌ها را نادیده بگیرید و خودتان APIهای زیرساختی ویجت را فراخوانی کنید. برای ترتیب کامل یکپارچه‌سازی، به بستهٔ کامل Viewer در راه‌اندازی سریع مراجعه کنید.

حالت تاریک و RTL

ویجت تم تاریک ارائه نمی‌دهد؛ یک بازنویسی سطح ۲ که کلاس حالت‌تاریک شما را هدف قرار می‌دهد (مثلاً .dark #divDocViewer { … }) برای پس‌زمینه‌ها و حاشیه‌ها بیشتر نیازها را پوشش می‌دهد، زیرا محتوای صفحه به‌صورت تصویر رندر می‌شود. برای میزبان‌های RTL، نمایشگر به‌خوبی داخل یک طرح RTL کار می‌کند — نوار ابزار خود را با آگاهی از RTL نگه دارید.

کارهایی که نباید انجام داد

فورک یا ویرایش شیوه‌نامه‌های جاسازی‌شده را انجام ندهید: آن‌ها داخل بسته قرار دارند و در هر به‌روزرسانی جایگزین می‌شوند. بازنویسی‌ها در شیوه‌نامهٔ خودتان پس از ارتقاها باقی می‌مانند؛ ویرایش‌های viewer.css این‌گونه نیست.