نمایش نوارهای پیشرفت در ارائه اسلایدهای Google

سطح کدنویسی : متوسط
مدت زمان : ۱۵ دقیقه
نوع پروژه : افزونه ویرایشگر

اهداف

  • بفهمید که راه حل چه کاری انجام می‌دهد.
  • درک کنید که سرویس‌های Apps Script در این راهکار چه کاری انجام می‌دهند.
  • اسکریپت را تنظیم کنید.
  • اسکریپت را اجرا کنید.

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

از این راهکار برای اضافه کردن یک نوار پیشرفت به پایین اسلایدهای ارائه خود استفاده کنید.

تصویر از نوار پیشرفت افزونه‌ی ویرایشگر اسلایدها

چگونه کار می‌کند؟

این اسکریپت تعداد اسلایدهای موجود در ارائه را محاسبه کرده و یک شکل مستطیل به پایین هر اسلاید اضافه می‌کند. این اسکریپت عرض هر شکل مستطیل را افزایش می‌دهد تا پیشرفت در اسلایدها را نشان دهد.

سرویس‌های اسکریپت برنامه‌ها

این راهکار از سرویس زیر استفاده می‌کند:

  • سرویس اسلایدها - اسلایدهای یک ارائه را دریافت کرده و به هر کدام یک شکل مستطیل اضافه می‌کند.

پیش‌نیازها

برای استفاده از این نمونه، به پیش‌نیازهای زیر نیاز دارید:

  • یک حساب گوگل (حساب‌های کاربری گوگل ورک‌اسپیس ممکن است نیاز به تأیید مدیر داشته باشند).
  • یک مرورگر وب با دسترسی به اینترنت.

اسکریپت را تنظیم کنید

  1. برای ایجاد یک کپی از ارائه Progress bar Slides، روی دکمه زیر کلیک کنید. پروژه Apps Script برای این راهکار به ارائه پیوست شده است.
    یک کپی تهیه کنید
  2. در ارائه، روی افزونه‌ها > نوار پیشرفت > نمایش نوار پیشرفت کلیک کنید.
  3. وقتی از شما خواسته شد، اسکریپت را تأیید کنید. اگر صفحه رضایت OAuth هشدار « این برنامه تأیید نشده است» را نشان می‌دهد، با انتخاب Advanced > Go to {Project Name} (unsafe) ادامه دهید.

  4. دوباره، روی افزونه‌ها > نوار پیشرفت > نمایش نوار پیشرفت کلیک کنید.

  5. برای حذف نوار پیشرفت، روی افزونه‌ها > نوار پیشرفت > مخفی کردن نوار پیشرفت کلیک کنید.

کد را مرور کنید

برای بررسی کد Apps Script برای این راهکار، روی مشاهده کد منبع در زیر کلیک کنید:

مشاهده کد منبع

اسلایدها/پیشرفت/پیشرفت.gs
/**
 * @OnlyCurrentDoc Adds progress bars to a presentation.
 */
const BAR_ID = 'PROGRESS_BAR_ID';
const BAR_HEIGHT = 10; // px

/**
 * Runs when the add-on is installed.
 * @param {object} e The event parameter for a simple onInstall trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode. (In practice, onInstall triggers always
 *     run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
 *     AuthMode.NONE.)
 */
function onInstall(e) {
  onOpen();
}

/**
 * Trigger for opening a presentation.
 * @param {object} e The onOpen event.
 */
function onOpen(e) {
  SlidesApp.getUi().createAddonMenu()
      .addItem('Show progress bar', 'createBars')
      .addItem('Hide progress bar', 'deleteBars')
      .addToUi();
}

/**
 * Create a rectangle on every slide with different bar widths.
 */
function createBars() {
  deleteBars(); // Delete any existing progress bars
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const ratioComplete = (i / (slides.length - 1));
    const x = 0;
    const y = presentation.getPageHeight() - BAR_HEIGHT;
    const barWidth = presentation.getPageWidth() * ratioComplete;
    if (barWidth > 0) {
      const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,
          barWidth, BAR_HEIGHT);
      bar.getBorder().setTransparent();
      bar.setLinkUrl(BAR_ID);
    }
  }
}

/**
 * Deletes all progress bar rectangles.
 */
function deleteBars() {
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const elements = slides[i].getPageElements();
    for (const el of elements) {
      if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&
        el.asShape().getLink() &&
        el.asShape().getLink().getUrl() === BAR_ID) {
        el.remove();
      }
    }
  }
}

مشارکت‌کنندگان

این نمونه توسط گوگل و با کمک متخصصان توسعه‌دهنده گوگل نگهداری می‌شود.

مراحل بعدی