إظهار أشرطة التقدم في عرض تقديمي باستخدام "العروض التقديمية من Google"

مستوى الترميز: متوسط
المدة: 15 دقيقة
نوع المشروع: إضافة محرِّر

الأهداف

  • افهم وظيفة الحلّ.
  • افهم ما تفعله خدمات "برمجة تطبيقات Google" ضمن الحل.
  • إعداد النص البرمجي
  • شغِّل النص البرمجي.

لمحة عن هذا الحل

استخدِم هذا الحل لإضافة شريط تقدّم إلى أسفل الشرائح في عرضك التقديمي.

لقطة شاشة لإضافة "محرّر العروض التقديمية" في شريط التقدّم

آلية العمل

يحسب النص عدد الشرائح في العرض التقديمي ويضيف شكل مستطيل إلى أسفل كل شريحة. يزيد البرنامج النصي عرض كل شكل مستطيل لإظهار التقدم داخل الشرائح.

خدمات "برمجة التطبيقات"

يستخدم هذا الحل الخدمة التالية:

المتطلبات الأساسية

لاستخدام هذا النموذج، يجب توفّر المتطلبات الأساسية التالية:

  • حساب Google (قد تتطلب حسابات Google Workspace موافقة المشرف).
  • متصفح ويب يمكنه الوصول إلى الإنترنت.

إعداد النص البرمجي

  1. انقر على الزر التالي لإنشاء نسخة من العرض التقديمي في شريط التقدم في "العروض التقديمية من Google". تم إرفاق مشروع "برمجة تطبيقات Google" لهذا الحل بالعرض التقديمي.
    إنشاء نسخة
  2. في العرض التقديمي، انقر على الإضافات > شريط التقدم > إظهار شريط التقدم.
  3. امنح الإذن للنصّ البرمجي عند مطالبتك بذلك. إذا كانت شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth تعرض التحذير، لم يتم التحقّق من هذا التطبيق، يمكنك المتابعة من خلال اختيار إعدادات متقدّمة > الانتقال إلى {Project Name} (غير آمن).

  4. انقر مرة أخرى على الإضافات > شريط التقدم > إظهار شريط التقدم.

  5. لإزالة شريط التقدم، انقر على الإضافات > شريط التقدم > إخفاء شريط التقدم.

مراجعة الرمز

لمراجعة رمز برمجة التطبيقات لهذا الحل، انقر على عرض رمز المصدر أدناه:

عرض رمز المصدر

Slides/progress/progress.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();
      }
    }
  }
}

المساهمون

وتحتفظ Google بهذا النموذج بمساعدة خبراء المطوّرين في Google.

الخطوات التالية