Orbit Simple Carousel Example

Orbit.js

import React from 'react';

import OrbitItem from '../Orbit__Item/Orbit__Item';
import OrbitLoader from '../Orbit__Loader/Orbit__Loader';

export default class Orbit extends React.Component {

    constructor( props ) {

        super( props );

        this.state = {
            page: 1,
            isLoaded: 0,
            offset: 0,
            slideItems: 0,
        };

        this.apiCallComplete = this.apiCallComplete.bind( this );
    }

    componentDidMount(){
        if(this.refs.api){
            this.refs.api.loadFromEndpoint();
        }
    }

    render() {
        if(this.state.isLoaded != 0 && this.state.slideItems != 0) {
            return (

                <div>

                    <div className="heading-wrapper">
                        <div className="secondary">{this.props.sectionTitle}</div>
                    </div>

                    <div className="orbit courses">

                        <div className="small-buttons">
                            <div className="prev-button" onClick={() => {
                                this.prevSlide();
                            }}><p>&lt;</p></div>
                            <div className="next-button" onClick={() => {
                                this.nextSlide();
                            }}><p>&gt;</p></div>
                        </div>

                        <div className="big-button prev-button" onClick={() => {
                            this.prevSlide();
                        }}><p>&lt;</p></div>

                        {this.renderOrbitItem()}

                        <div className="big-button next-button" onClick={() => {
                            this.nextSlide();
                        }}><p>&gt;</p></div>

                    </div>

                </div>


            );
        } else if(this.state.isLoaded != 0 && this.state.slideItems == 0){
            return(
                <div></div>
            )
        } else {
            return(
                <div>
                    <OrbitLoader/>
                    {this.prepareAPI()}
                </div>
            );
        }
    }

    renderOrbitItem(){
        return this.state.slideItems.map((slide, index)=>{
            return React.createElement( OrbitItem, {
                additionalComponents: this.props.components,
                slideInfo: slide,
                key: index,
                index: index,
                maxSlides: this.props.maxSlides,
            } );
        });
    }

    prepareAPI() {
        return React.createElement( this.props.api, {
            endpointUrl: this.props.endpointUrl,
            ref: 'api',
            apiCallComplete: this.apiCallComplete,
        } );
    }

    apiCallComplete() {
        this.setState({
            slideItems: this.refs.api.state.items,
            isLoaded: 1,
        });
    }

    nextSlide() {
        let slideItems = this.state.slideItems;
        this.shiftArrayToLeft(slideItems, 1);
        this.setState({
            slideItems: slideItems,
        });
    }

    prevSlide() {
        let slideItems = this.state.slideItems;
        this.shiftArrayToRight(slideItems, 1);
        this.setState({
            slideItems: slideItems,
        });
    }

    shiftArrayToLeft(arr, places) {
        for (let i = 0; i < places; i++) {
            arr.push(arr.shift());
        }
    }

    shiftArrayToRight(arr, places) {
        for (let i = 0; i < places; i++) {
            arr.unshift(arr.pop());
        }
    }

    adjustOffset(operator){
        if(operator == 'add' && this.offset <= this.state.slideItems.count){
            this.setState( {
                offset: this.offset + this.props.maxSlides
            });
        } else if(operator == 'subtract' && this.state.offset != 0){
            this.setState({
                offset: this.offset - this.props.maxSlides
            });
        }
    }

}

Orbit.defaultProps = {
    maxSlides: 4,
};

Orbit__API.js

import React from 'react';
import { api } from "../../../../assets/scripts/js/api";

export default class OrbitAPI extends React.Component {

    render() {
        return(
          <div style={{display:'none'}}>I have no mouth and I must scream.</div>
        );
    }

    loadFromEndpoint() {
        return api.get( this.props.endpointUrl, {} ).then( ( response ) => {
            let workshops = [];
            response.map( ( workshop ) => {
                let result = {
                    title: workshop.name,
                    url: workshop.url,
                    progress: workshop.progress,
                    image: workshop.image,
                    video_count: workshop.video_count,
                    duration: workshop.duration,
                    enrolled: workshop.enrolled,
                    is_new: workshop.is_new,
                };
                workshops.push( result )
            } );

            this.setState({
                items: workshops,
                itemsLoaded: 1,
            });

            this.props.apiCallComplete();
        } );
    }

    returnEndpointItems() {
        return this.state.items;
    }

}

Orbit__Item.js

import React from 'react';
import OrbitThumbnail from '../Orbit__Thumbnail/Orbit__Thumbnail';

export default class OrbitItem extends React.Component {

    constructor( props ) {

        super( props );

        this.state = {
        };
    }

    render() {
        if(this.props.index < this.props.maxSlides){
            return (

                <div className={`course-container hide-${this.props.index}`}>
                    <a href={this.props.slideInfo.url}>
                        <OrbitThumbnail imageUrl={this.props.slideInfo.image} isNew={this.props.slideInfo.is_new}/>
                        {this.renderAdditionalComponents()}
                    </a>
                </div>
            );
        } else{
            return (
                <div className={`course-container hide-${this.props.index} hidden`}>
                    <a href={this.props.slideInfo.url}>
                        <OrbitThumbnail imageUrl={this.props.slideInfo.image} isNew={this.props.slideInfo.is_new}/>
                        {this.renderAdditionalComponents()}
                    </a>
                </div>
            );
        }

    }

    renderAdditionalComponents(){
        return this.props.additionalComponents.map((component, index)=>{
            return React.createElement( component, {
                slideInfo: this.props.slideInfo,
                key: index,
            } );
        });
    }

}

Orbit__ResumeWorkshopInfo.js

import React from 'react';

export default class OrbitResumeWorkshopInfo extends React.Component {

    constructor( props ) {

        super( props );

        this.state = {
        };
    }

    render() {
        return (
            <div className="course-info">
                <p className="course-title" dangerouslySetInnerHTML={{__html: this.props.slideInfo.title}}></p>
                <div className="course-progress-bar">
                    <p>{this.props.slideInfo.progress}% Completed</p>
                    <div className="progress-bar">
                        <span className="meter" style={{width: this.props.slideInfo.progress + '%'}}></span>
                    </div>
                </div>
            </div>
        );
    }


}

Orbit__Thumbnail.js

import React from 'react';
import Icon from '../_shared/Icon';

export default class OrbitThumbnail extends React.Component {

    constructor( props ) {

        super( props );

        this.state = {
        };
    }

    render() {
        return (
            <div className="course-image">
                {this.renderNewBadge()}
                <span dangerouslySetInnerHTML={{__html: this.props.imageUrl}} />
                <div className="hover-overlay">
                    <Icon name="play-circle"/>
                </div>
            </div>
        );
    }

    renderNewBadge(){
        if(this.props.isNew == true){
            return(
                <div className="new-badge">New</div>
            )
        }
    }


}

OrbitInitializer.js

import React from 'react';
import ReactDOM from 'react-dom';
import Orbit from '../Orbit/Orbit';
import OrbitResumeWorkshopInfo from '../Orbit__ResumeWorkshopInfo/Orbit__ResumeWorkshopInfo';
import OrbitAPI from '../Orbit__API/Orbit__API';

let props = {
    components: [
     OrbitResumeWorkshopInfo
    ],
    api: OrbitAPI,
    endpointUrl: '/wp-json/slr/workshop/recent-workshops',
    sectionTitle: 'Resume Watching'
};

if(document.getElementById('resume-watching-carousel') != null){
    let div = document.getElementById('resume-watching-carousel');

    ReactDOM.render(
        React.createElement(Orbit, props),
        div
    );

}

WorkshopEndpoint

<?php

namespace SLR;

class WorkshopEndpoint {

	public function __construct() {
		add_action( 'rest_api_init', array( $this, 'register_routes' ) );
	}


	public function register_routes() {

		register_rest_route(
		    'slr', '/workshop/recent-workshops',
            array(
                'methods'  => 'GET',
                'callback' => array($this, 'getRecentlyViewedWorkshops')
            )
        );
        

	}
    

	public function getRecentlyViewedWorkshops() {
        $recent_courses   = \SLR\WorkshopModule::GetInstance()->getUserRecentCourses();

        if ( $recent_courses ) {
            foreach ( $recent_courses as $item ) {

                if(!$item instanceof Course) { continue; }

                $workshop_ids = explode(',', $item->GetWorkshopIdList());
                $latest_workshop = get_post($workshop_ids[0]);

                if(is_time_new(get_the_date('', $latest_workshop), 24)){
                    $item->is_new = true;
                }

                $item->progress = $item->UserProgressPercent();
                $item->url = $item->GetPermalinkToResumeCourse();
                $item->image = slr_responsive_image(\SLR\ImagesModule::GetAttachedImageID($item->GetFirstWorkshopID()), 'width-400', ['sizes' => '(max-width: 768px) 98vw, (max-width: 2000px) 22vw, 430px', 'class' => 'fill-aspect-ratio']);
            }
        }

        return $recent_courses;
    }
    

}

new WorkshopEndpoint();