ערכות נושא מותאמות

הצופה מגיע עם מראה נייטרלי המבוסס על Bootstrap, המסופק מהמשאבים המוטמעים (viewer.css, בנוסף לקבצי CSS לכל תכונה כגון searchBar.css ו‑annotationBar.css). התאמה נעשית בשלושה רמות — בחרו את הרמה השטוחה ביותר שמביאה אתכם לשם.

רמה 1 — הגדרת הכרום

הרבה ממה שנקרא "התאמה" הוא בעצם תצורה:

• ViewerConfig.ShowThumbs = false — ללא לוח תצוגות ממוזערות.
• ViewerConfig.FitType = "height" | "width" — כיצד הדפים ממלאים את תצוגת החלון.
• ViewerConfig.ShowThumbs = false יחד עם חבילות CssConfig/ScriptConfig נבחרות — שמרו רק את הכרום שהמארח שלכם משתמש בו.

רמה 2 — שכתוב ה‑CSS

Viewer.ReferenceCss() מפיק תגיות <link> פשוטות; כל מה שתטענו לאחר הן ינצח את סדר העדיפויות. הגדירו את הגודל והמסגרת של הצופה באמצעות קובץ ה‑CSS שלכם:

/* 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 — בניית סרגל כלים משלכם

לחוויית מותג מלאה, שלוטו בווידג'ט דרך ממשק המשתמש שלכם — זה בדיוק איך הדוגמה הרפרנסית בונה את סרגל הכלים הראשי של הצופה. סרגל זה הוא סימון של המארח בתוספת עוזר ייחודי לאפליקציה; הוא אינו ריבון 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>

חיפוש והערות שונים: רכיבי הריבון האופציונליים שלהם משולבים ב‑SDK (IncludeSearchBar, IncludeAnnotationBar) ויוצרים DOM משלהם. ניתן להשתמש בהם יחד עם סרגל הכלים המותאם שלכם או לדלג עליהם ולקרוא ישירות ל‑APIs של הווידג'ט. ראו את חבילת הצופה המלאה במדריך ההתחלה המהירה לקבלת סדר האינטגרציה המלא.

מצב כהה ו‑RTL

הווידג'ט אינו מספק ערכת נושא כהה; שכתוב ברמה 2 המכוון למחלקת מצב כהה שלכם (למשל .dark #divDocViewer { … }) ברקעים ובקצוות מכסה את רוב הצרכים, מכיוון שהתוכן של הדף עצמו מוצג כתמונות. עבור מארחים עם RTL, הצופה פועל ללא בעיה בתוך פריסת RTL — שמרו על כך שסרגל הכלים שלכם מודע ל‑RTL.

מה שלא לעשות

אל תבצעו פיצול (fork) או עריכה של קבצי ה‑CSS המוטמעים: הם מגיעים כחלק מהחבילה ומוחלפים בכל עדכון. שינויים בקובץ ה‑CSS שלכם נשארים לאחר שדרוגים; עריכות ל‑viewer.css אינן נשמרות.