TourIAm/TIAMSharedUI/Shared/SliderItemSelector.razor

@using System.Linq.Expressions
@using TIAMWebApp.Shared.Application.Utility
@inject LogToBrowserConsole logToBrowserConsole

<style>
    .underlineInput{
        padding-left: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid;
    }

    .underlineInput > input {
        padding-left: 10px;
        
        border-bottom: 1px solid;
    }

    #@OwlId .item {
        height: 30vh;
        overflow-y: hidden;
        vertical-align: middle;
        align-content: center;
    }

        #@OwlId .item img {
            display: block;
            width: 100%;
            height: auto;
        }
</style>


<div id=@OwlId class="owl-carousel owl-theme">
    
    
    <div class="item" id="1" style="background-image: url(https://images.unsplash.com/photo-1551867633-194f125bddfa?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Liszt Ferenc Airport</h3>            
           
        </div>
    </div>
    <div class="item" id="2" style="background-image: url(https://images.unsplash.com/photo-1549877452-9c387954fbc2?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Buda Castle</h3>
            
        </div>
    </div>
    <div class="item" id="3" style="background-image: url(https://images.unsplash.com/photo-1507622560124-621e26755fb8?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Chain Bridge</h3>
            
        </div>
    </div>
</div>
<p>Please type an address or swipe to select from preset destinations!</p>




<script>
    var JsOwlId;    
    
    //var owl = $('#' + JsOwlId);
    var i = 0;


    /*CStoJSCall = function (dotNetObjRef) {
        function mouseCoordinatesHandler() {
            dotNetObjRef.invokeMethodAsync("ShowCoordinates", "Hugrabug" + i);
            i++;
        };

        mouseCoordinatesHandler();

        owl.owlCarousel({
            onDragged: mouseCoordinatesHandler
        });

    };*/

    /*$(document).ready(function () {


        owl.owlCarousel({
            
            navigation: true, // Show next and prev buttons
            loop: true,
            slideSpeed: 300,
            paginationSpeed: 400,
            items: 1,
            itemsDesktop: false,
            itemsDesktopSmall: false,
            itemsTablet: false,
            itemsMobile: false            
        });

        owl.trigger("to.owl.carousel", owl.maximum)

    });*/

    function InitOwl(id) {
        JsOwlId= id;
        owl = $('#' + JsOwlId);
        owl.owlCarousel({

            navigation: true, // Show next and prev buttons
            loop: true,
            slideSpeed: 300,
            paginationSpeed: 400,
            items: 1,
            itemsDesktop: false,
            itemsDesktopSmall: false,
            itemsTablet: false,
            itemsMobile: false
        });

        owl.trigger("to.owl.carousel", owl.maximum)
    };

    function CStoJSCall(dotNetObjRef) {
        

        mouseCoordinatesHandler(dotNetObjRef);        

        /*owl.on('changed.owl.carousel', function (e) {
            mouseCoordinatesHandler(dotNetObjRef);
        });*/

        owl.on('changed.owl.carousel', function (property) {
            var current = property.item.index;
            var src = $(property.target).find(".item").eq(current).attr('id');
            console.log('Image current is ' + src);
            mouseCoordinatesHandler(dotNetObjRef, src);
        });

    };

    function mouseCoordinatesHandler(objRef, itemId) {
        objRef.invokeMethodAsync("ShowCoordinates", "Hugrabug" + i, itemId);
        i++;
    };

    function setOwlId(id) {
        JsOwlId = id;
        console.log('SetOwlId called, value is ' + owlId);        
    };
        
</script>

@code {
    [Parameter]
    public string OwlId { get; set; }

    public string TextValue { get; set; } = null;
    int? InputDelay { get; set; } = 3500;
    BindValueMode BindValueMode { get; set; } = BindValueMode.OnInput;
    bool BindDelayEnabled { get { return BindValueMode == BindValueMode.OnDelayedInput; } }

    public int SliderElementId = 0;
    string content = "";
    [Parameter]
    public EventCallback<string> OnSliderChanged { get; set; }

    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    protected override void OnParametersSet()
    {
        logToBrowserConsole.LogToBC($"SliderItemSelector is initialized with OwlId: {OwlId}");
        
        base.OnParametersSet();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if(firstRender)
        {
            var dotNetObjRef = DotNetObjectReference.Create(this);
            JSRuntime.InvokeVoidAsync("setOwlId", OwlId);
            JSRuntime.InvokeVoidAsync("InitOwl", OwlId);
            JSRuntime.InvokeVoidAsync("CStoJSCall", dotNetObjRef);

        }

    }     


    [JSInvokable]
    public void ShowCoordinates(string coordinates, string itemId)
    {
        logToBrowserConsole.LogToBC($"Slider is changing: {coordinates}, {itemId}");
        //content = coordinates + "item = " + itemId;
        SliderElementId = Convert.ToInt32(itemId);
        
        OnSliderChanged.InvokeAsync(itemId);

        /*StateHasChanged();*/
    }    

}