MasterStudy Theme Documentation
Theme PageVideo TutorialsChangelogCreate a TicketGet MasterStudy
  • Education WordPress Theme - Masterstudy
  • General
    • System Requirements
    • What's Included In My Purchase
    • Where Is My Purchase Code?
    • Theme License
    • Hosting
    • How to Get Support
  • Installation & Activation
    • MasterStudy Installation
    • Common Installation Errors
    • Theme Activation
    • Multiple Websites on One License
    • License Key Deactivation
    • Activation FAQ
  • Getting Started
    • Import The Demo Content
    • Switch Between Different Demos
    • How To Update MasterStudy
    • System Status
    • LMS Wizard
    • Patch: Convert from WPB to Elementor
  • Blocks & Sidebars
    • Header Setup
    • Sidebars Setup
    • Footer Setup
    • Elementor Header & Footer
  • Theme Options
    • General Settings
    • Header
    • Top Bar
    • Styling
    • Post Type Settings
    • Events
    • Typography
    • Footer
    • Social Media
    • MailChimp
    • Custom CSS
    • Import / Export
  • LMS Settings
    • General
    • Courses
    • Course
    • Course Player
    • Reports & Analytics
    • Quiz
    • LMS Pages
    • Payment Methods
    • reCAPTCHA
    • Profiles
      • Authorization
      • Social Login
      • Profile Menu Reordering
    • Grades
    • Certificates
    • Payout
    • Privacy Policy
    • Shortcodes
    • Import/Export
  • MasterStudy LMS Pro Addons
    • Certificate Builder
    • Email Manager
    • LMS Forms Editor
      • How to edit the registration form?
    • Zoom Conferencing
    • Assignments
    • Drip Content
    • Group Courses
    • Live Streaming
    • Course Bundle
    • Point System
    • Media File Manager
    • SCORM
    • Trial courses
    • Statistics and Payout
    • Online Testing
    • Multi-instructors
    • Google Classroom
    • Udemy Importer
    • Prerequisites
    • The Gradebook
  • LMS Course Features
    • Course Builder
      • How to Add Math Equations in MasterStudy?
    • Lessons
    • How to add a video to the lesson
    • Quizzes
    • Questions
    • Reviews
    • Orders
    • Courses Category
    • Course & Lesson Materials
    • Course Drafts for instructors
    • Manage Students by Admin
    • Change Course Author
    • Instructors requests
    • Course Announcements
    • Public Profiles
  • PayPal Payouts Setup
    • General Settings
    • Business Account Settings
    • Developer Account Settings
    • Instructor Settings
    • Payouts Process
    • Automatic Payouts (Expert)
  • Integrations
    • Membership System
    • Restore Password
    • BuddyPress
    • Contact Form 7
    • H5P plugin
    • Presto Player Integration
    • VdoCipher
    • Polylang Integration
      • LMS Contents Translation
    • WPML
  • Post Types
    • Blog Posts
    • Event Posts
    • Galleries
    • Testimonials
    • Teachers
  • WooCommerce
    • Installation and Settings
    • Orders Managament
    • WooCommerce Shop
    • Woocommerce Courses (not LMS)
    • WooCommerce Products
  • MasterStudy Translate
    • Translation Basics
    • Translation Prepаration
    • Homepage
    • All Courses Page
    • Single Course
    • Course Items
    • Profile Page
    • Course Builder
    • Login/Registration
    • Events
    • Shop
    • Offline Course (not LMS)
    • Blog
  • Developer's guide
    • Components
      • Back-link
      • Button
      • Countdown
      • Curriculum-accordion
      • Discussions
      • File-attachment
      • Progress
      • Tabs
      • Nav-button
      • Hint
      • Editor
      • Alert
      • File-upload
      • Loader
      • Tabs-pagination
      • Dark-mode-button
      • Buy-button
      • Pagination
    • Course Builder Custom Fields
    • Course Player Templates
  • Extra Materials
    • Changelog
    • Demos
    • Facebook Community
  • StylemixThemes
    • MasterStudy Theme
    • MasterStudy LMS Plugin
  • Plugins
  • Themes
Powered by GitBook
On this page

Was this helpful?

  1. Developer's guide

Components

This guide will help developers understand what is a component and how to use them.

<?php
STM_LMS_Templates::show_lms_template(
    'components/tabs',
    array(
        'items' => array(
            array(
                'id'    => 'lesson',
                'title' => __( 'Lesson', 'masterstudy-lms-learning-management-system' ),
            ),
            array(
                'id'    => 'materials',
                'title' => __( 'Materials', 'masterstudy-lms-learning-management-system' ),
            ),
        ),
        'style'            => 'nav-sm',
        'active_tab_index' => 0,
        'dark_mode'        => false,
    )
);
?>
<?php

/**
 * @var array $items
 * @var string $style
 * @var int $active_tab_index
 * @var boolean $dark_mode
 *
 * masterstudy-tabs_dark-mode - for dark mode
 * masterstudy-tabs__item_active - for item active state
 * masterstudy-tabs_style-default|nav-sm|nav-md - for tabs style change
 */

wp_enqueue_style( 'masterstudy-tabs', STM_LMS_URL . '/assets/css/components/tabs.css', null, MS_LMS_VERSION );
?>

<ul class="masterstudy-tabs <?php echo esc_attr( $dark_mode ? 'masterstudy-tabs_dark-mode' : '' ); ?> <?php echo esc_attr( 'masterstudy-tabs_style-' . $style ); ?>">
    <?php foreach ( $items as $index => $item ) { ?>
        <li class="masterstudy-tabs__item <?php echo $active_tab_index === $index ? 'masterstudy-tabs__item_active' : ''; ?>" data-id="<?php echo esc_attr( $item['id'] ); ?>">
            <?php echo esc_html( $item['title'] ); ?>
        </li>
    <?php } ?>
</ul>

But sometimes there are cases when you need to modify a component via javascript, like changing the style, or color theme of the component or highlighting the active tab when you click on it. For such cases, all the names of modifier classes are contained in the comments at the top of the component template. You can assign them via custom JavaScript code on the page.

Example:

// tabs toggler depending on the visibility in the window
$('.masterstudy-course-player-content__wrapper').on('scroll', function() {
    let materialsTab = $('.masterstudy-course-player-header .masterstudy-tabs__item[data-id="materials"]'),
        lessonTab = $('.masterstudy-course-player-header .masterstudy-tabs__item[data-id="lesson"]'),
        materialsInView = isElementInView('.masterstudy-course-player-lesson-materials');
            
    if (materialsInView) {
        materialsTab.addClass('masterstudy-tabs__item_active');
        lessonTab.removeClass('masterstudy-tabs__item_active');
    } else {
        materialsTab.removeClass('masterstudy-tabs__item_active');
        lessonTab.addClass('masterstudy-tabs__item_active');
    }
});

function isElementInView(selector) {
    let element = document.querySelector(selector),
        rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}
PreviousBlogNextBack-link

Last updated 1 year ago

Was this helpful?