//TH-Header
//*****************************************************************************************
// Copyright (c)  2022 Antwise Solutions
// All rights reserved.
//
// $FileName    : SyncFusion\AppSrc\csfWebCarousel.pkg
// $ProjectName : SyncFusion Library
// $Authors     : Wil van Antwerpen
// $Created     : 2022-10-06
//
// Contents:
// This is a web framework wrapper class for the Carousel control.
// Documentation for the API is here:
// https://ej2.syncfusion.com/documentation/api/carousel
// and tips & tricks here:
// https://ej2.syncfusion.com/javascript/documentation/carousel/es5-getting-started/
// Syncfusion demo’s:
// https://ej2.syncfusion.com/javascript/demos/#/material/carousel/default.html
//
//*****************************************************************************************
//TH-RevisionStart
// ********************
// MODIFICATION SUMMARY
// ********************
// ####### DD/MM/YYYY  WHO COMMENT
//TH-RevisionEnd
Use csfWebBaseControl.pkg

Struct tCarouselItem
  Integer iID
  String sImage
  String sAltText
  String sCaption
  String sCustomId      // free to use - userdefined
  String sPath          // free to use - userdefined
End_Struct


{ OverrideProperty=pCarouselItems Visibility=Private }
Class csfWebCarousel is a csfWebBaseControl
    
    Procedure Construct_Object
        Forward Send Construct_Object
        
        //
        // Used as the item template.
        // The data references in ${} used are the member names from the JSON string in LoadImages.
        { WebProperty=Client }
        Property String  psItemTemplate               '<div class="fs-5"><img src="${image}" alt="${altText}" style="height:100%;width:100%;"/><figcaption class="img-caption">${caption}</figcaption></div>'
        
        //
        // Specifies the type of animation effects. The possible values for this property as follows
        // Default = "Slide"
        { EnumList="None, Slide, Fade" }
        { InitialValue="Slide" }
        { WebProperty=Client }
        Property String psAnimationEffect             'Slide'
        
        //
        // Defines whether the slide transition is automatic or manual.
        // Default = True
        { WebProperty=Client }
        Property Boolean pbAutoPlay                   True
        
        //
        // Defines how to show the previous, next and play pause buttons visibility.
        // The possible values for this property as follows
        // Default = "Visible"
        { EnumList="Hidden, Visible, VisibleOnHover" }
        { InitialValue="Visible" }
        { WebProperty=Client }
        Property String psButtonsVisibility           "Visible"
        
        //
        // Defines whether to enable swipe action in touch devices or not.
        // Default = True
        { WebProperty=Client }
        Property Boolean pbEnableTouchSwipe           True
        
        //
        // Specifies the interval duration in milliseconds for carousel item transition.
        // Default = 5000
        { WebProperty=Client }
        Property Integer piInterval                   5000
        
        //
        // Defines whether the slide transitions loop end or not.
        // When set to false, the transition stops at last slide.
        // Default = True
        { WebProperty=Client }
        Property Boolean pbLoop                       True
        
        //
        // Enables active slide with partial previous/next slides.
        // Slide animation only applicable if the partialVisible is enabled.
        //
        // Default = False
        { WebProperty=Client }
        Property Boolean pbPartialVisible             False
        
        // Defines whether to show the indicator positions or not.
        // The indicator positions allow to know the current slide position of the carousel component.
        //
        // Default = True
        { WebProperty=Client }
        Property Boolean pbShowIndicators             True

        // An indicator template can be either a CSS style id pointing to a template OR it can be
        // the html for the template itself. The template can be passed variable index for the slide/image
        // to display and the selectedIndex for the currently selected index.
        //
        // Default = ""
        // Design only
        { WebProperty=Client }
        Property String  psIndicatorsTemplate         ""
        
        // A setting that makes it more convenient to create a thumbnail indicator.
        // Under the hood it uses psIndicatorsTemplate and sets it to:
        // <div class="indicator" indicator-index="${index}">
        //   <img src="${getThumbImage(index)}" alt="image" style="height:100%;width:100%;" />
        // </div>
        // Please note that this also depends on styles set in application.css
        //
        // Default = False
        // Design only
        { WebProperty=Client }
        Property Boolean pbThumbnailIndicators        False
        
        //
        // Specifies index of the current carousel item.
        // Default = 0
        { WebProperty=Client }
        Property Integer piSelectedIndex              0
        
        // enable/disable onCreated event
        { WebProperty=Client }
        Property Boolean pbServerOnCreated            False
        
        // enable/disable onCreated event
        { WebProperty=Client }
        Property Boolean pbServerOnSlideChanged       False
        
        // enable/disable onCreated event
        { WebProperty=Client }
        Property Boolean pbServerOnSlideChanging      False
        
        // Private properties used for configuring the Carousel.
        
        { WebProperty=Client }
        Property tCarouselItem[]  pCarouselItems

        Set psCssClass To "default-carousel"        // Default carousel CSS class to use
        
        Set psJSClass To "sf.WebCarousel"
    End_Procedure

    //
    // Clears the CarouselItems on server side only
    //
    Procedure Clear
        String[] sData
        tCarouselItem[]  EmptyCarouselItems
        Set pCarouselItems to EmptyCarouselItems
        //Send ClientAction "unloadCarousel"
    End_Procedure

    //
    // Refresh
    //
    Procedure RefreshCarousel
        Send ClientAction "refreshCarousel"
    End_Procedure
    
    //
    // Passes the data to the grid. It does this via a JSON encoded object that contains
    // both data as well as meta data such as CSS and Tooltips
    //
    Procedure LoadData String[] sData
        String[] aParams
        tWebValueTree tVT
        
        ValueTreeSerializeParameter sData to tVT
        Send ClientAction "loadData" aParams tVT
    End_Procedure
    

    //
    // Load the data as a JSON object.
    //
    Procedure LoadImages
        Handle hoData
        Handle hoRow
        Integer iItem
        Integer iCount
        String[] sData
        tCarouselItem   CarouselItem
        tCarouselItem[] CarouselItems
        
        Get Create (RefClass(cJsonObject)) to hoData
        If (hoData) Begin
          Send InitializeJsonType of hoData jsonTypeArray
          
          Get pCarouselItems To CarouselItems
          Move (SizeOfArray(CarouselItems)) To iCount
          For iItem from 0 to (iCount-1)
            Get Create (RefClass(cJsonObject)) To hoRow
            If (hoRow) Begin
              Move CarouselItems[iItem] To CarouselItem
              Send InitializeJsonType Of hoRow jsonTypeObject
              
              Send SetMemberValue Of hoRow "ID" jsonTypeInteger CarouselItem.iID
              Send SetMemberValue Of hoRow "image" jsonTypeString CarouselItem.sImage
              Send SetMemberValue Of hoRow "altText" jsonTypeString CarouselItem.sAltText
              Send SetMemberValue Of hoRow "caption" jsonTypeString CarouselItem.sCaption
              
              Send SetMemberValue of hoRow "customid" jsonTypeString CarouselItem.sCustomId
              Send SetMemberValue of hoRow "path" jsonTypeString CarouselItem.sPath

              
              Send AddMember of hoData hoRow
              Send Destroy Of hoRow
            End
          Loop
          Get JsonDataToStringArray hoData To sData
          Send Destroy Of hoData
        End
        Send LoadData sData
        WebSet pCarouselItems to CarouselItems
    End_Procedure
    
    Procedure OnFill
    End_Procedure
    
    Procedure AddImage String sImage String sAltText String sCaption String sCustomId String sPath
        Integer  iArgs
        tCarouselItem    CarouselItem
        tCarouselItem[]  CarouselItems
        Get pCarouselItems To CarouselItems
        Move ((SizeOfArray(CarouselItems))+1) To CarouselItem.iID
        Move sImage   to CarouselItem.sImage
        Move num_arguments to iArgs
        If (iArgs>1) Begin
          Move sAltText To CarouselItem.sAltText
          If (iArgs=2) Begin
            Move sAltText To CarouselItem.sCaption
          End
          If (iArgs>2) Begin
            Move sCaption to CarouselItem.sCaption
          End
          //
          If (iArgs>3) Begin
            Move sCustomId to CarouselItem.sCustomId
          End
          If (iArgs=5) Begin
            Move sPath     to CarouselItem.sPath
          End  
        End
        Move CarouselItem to CarouselItems[(SizeOfArray(CarouselItems))]
        Set pCarouselItems to CarouselItems
    End_Procedure

    //
    // Add an item to the carousel when the carousel is already rendered and
    // displaying images. This is used to dynamically add images to the carousel.
    //
    Procedure AddCarouselItem String sImage String sAltText String sCaption String sCustomId String sPath
      Integer iArgs
      tCarouselItem[]  CarouselItems
      
      WebGet pCarouselItems to CarouselItems
      // add an image to the CarouselItems array
      Move num_arguments to iArgs
      If (iArgs=1) Begin
        Send AddImage sImage
      End
      Else If (iArgs=2) Begin
        Send AddImage sImage sAltText 
      End
      Else If (iArgs=3) Begin
        Send AddImage sImage sAltText sCaption
      End
      Else If (iArgs=4) Begin
        Send AddImage sImage sAltText sCaption sCustomId
      End
      Else If (iArgs=5) Begin
        Send AddImage sImage sAltText sCaption sCustomId sPath
      End
      // get the local array and
      Get pCarouselItems to CarouselItems
      // set it at javascript level
      WebSet pCarouselItems to CarouselItems
    End_Procedure
    

    //
    // Remove an item from the carousel when the carousel is already rendered and
    // displaying images. This is used to dynamically remove images from the carousel.
    //
    Procedure RemoveCarouselItem Integer iItem
      Integer iCount
      tCarouselItem[]  CarouselItems
      WebGet pCarouselItems to CarouselItems
      Move (SizeOfArray(CarouselItems)) to iCount
      If (iCount>iItem) Begin
        Move (RemoveFromArray(CarouselItems,iItem)) to CarouselItems
        Set pCarouselItems to CarouselItems // without this we're getting out of sync somehow.. so it is important!
        WebSet pCarouselItems to CarouselItems
      End
    End_Procedure

    // Hook that can be used to load data or to do any post configure grid
    // actions.
    Procedure onPostConfigureCarousel
    End_Procedure
    
    { Visibility=Private }
    Procedure doPostConfigureCarousel
         Send Clear
         Send onFill
         Send onPostConfigureCarousel
         Send LoadImages
    End_Procedure
    
    Procedure doRenderCarousel
        Send OnRender
        Send ClientAction "renderCarousel"
    End_Procedure
    
    
    { Visibility=Private }
    Procedure ConfigureWebCarousel
        String[] asParams
        tWebValueTree tVT
        
        Send ClientAction "configureWebCarousel" asParams tVT
        Send doPostConfigureCarousel
        Send doRenderCarousel
    End_Procedure
    
    
    //
    // Executes before we ask the carousel to render itself.
    //
    Procedure OnRender
    End_Procedure
    
    // Currently NOT called
    // Triggers when the component in the browser is created. (needs to be enabled)
    { MethodType=Event }
    Procedure OnCreated
    End_Procedure
    
    // The event will be fired after the slide changed.
    { MethodType=Event }
    Procedure OnSlideChanged Integer iCurrentIndex Integer iPreviousIndex Boolean bIsSwiped String sSlideDirection
    End_Procedure
    
    // The event will be fired before the slide change.
    { MethodType=Event }
    Procedure OnSlideChanging Integer iCurrentIndex Integer iNextIndex Boolean bIsSwiped String sSlideDirection Boolean bCancel
    End_Procedure

    Procedure NextSlide
        Send ClientAction "nextSlide"
    End_Procedure

    Procedure Pause
        Send ClientAction "pause"
    End_Procedure

    Procedure Play
        Send ClientAction "play"
    End_Procedure

    Procedure PreviousSlide
        Send ClientAction "previousSlide"
    End_Procedure
    
    Procedure End_Construct_Object
        WebPublishProcedure ConfigureWebCarousel
        WebPublishProcedure OnCreated
        WebPublishProcedure OnSlideChanged
        WebPublishProcedure OnSlideChanging
        Forward Send End_Construct_Object
    End_Procedure


End_Class