Modding Tekno.FlexSlider Module

Topics: Customizing Orchard
Oct 30, 2014 at 11:00 PM
Edited Oct 30, 2014 at 11:05 PM
I'm trying to add some custom options to the Tekno.FlexSlider module but don't understand how the edit views are being created. Instead of having the controller within the module have a create method the author calls the create method in the Orchard.Core.Contents AdminController passing the id "FlexSlider" for slider items and "FlexSliderGroup" for slider groups. This in turn pulls up an edit view that contains the Parts.Title.TitlePart.cshtml view for slider groups and the Parts.Title.TitlePart.cshtml and FlexSlider.cshtml views for slider items. Neither of the affor mentioned views contains a button for adding a media image to the content and yet this is also being rendered in the view. I'm confused how these edit views are being created and called. Any help would be very appreciated. I'm trying to add some fields to the FlexSliderGroup that will be used to customize the javascript options in the Flex Slider such as animation, pauseOnHover, etc.

Thank you.

Edit: When stepping through the code the view being returned by the Contents controller is Orchard.UI.Zones.ZoneHolding. How does this turn into the view that is rendered?
Oct 30, 2014 at 11:46 PM
Edited Oct 31, 2014 at 12:14 AM
Hi!

Are you talking about this method? If so, i tried to add comments to get you an better understanding.
public ActionResult Items()
{
    // Permission Check
    if (!Services.Authorizer.Authorize(Permissions.ManageSlider, T("Not allowed to manage slide items")))
        return new HttpUnauthorizedResult();

    // Get all FlexSliderParts from the ContentManager
    var items = _contentManager.Query<FlexSliderPart, FlexSliderPartRecord>().OrderBy(i => i.Sort).List();

    // Not exactly sure - but I think it creates a shapeList
    var list = Shape.List();

    // Add for each SliderPart a Shape in 'SummaryAdmin' View (I think this should call the FlexSliderPartDriver.Editor(...) to build the shape 
        // -> EditorTemplates/Parts/FlexSlider.cshtml)
    list.AddRange(items.Select(i => _contentManager.BuildDisplay(i, "SummaryAdmin")));

    // Get the current ViewModel
    dynamic viewModel = Shape.ViewModel();
    
    // Add the List of View to the ViewModel Property 'ContentItems'
    viewModel.ContentItems(list);
    // Add the number of Shapes (= number of flexsliders) to the 'NumberOfItems' Property
    viewModel.NumberOfItems(items.Count());

    return View(viewModel);
}
And then it uses that ViewModel in the view. The Model in the view is the ViewModel from the Controller and the display Method displays the shapes stored in the list of the ViewModel.
@if (Model.NumberOfItems > 0)
{
    using (Html.BeginFormAntiForgeryPost(Url.Action("List", "Admin", new { area = "Contents", id = "" })))
    {
        <fieldset class="contentItems bulk-items">
            @Display(Model.ContentItems)
        </fieldset>
    }
}
else
{
    <p>@T("You have not yet created any slider items. Create a") @Html.ActionLink(T("new slider item").ToString(), "Create", "Admin", new { area = "Contents", id = "FlexSlider" }, null) @T("now.")</p>
}
I hope it is a little bit clearer now?!

edit: Found whats 'Shape.List()' is doing. It's create a shape that renders a list.

Orchard.Core.Shapes.CoreShapes.cs:
 builder.Describe("List")
                .OnCreated(created => {
                    var list = created.Shape;
                    list.Tag = "ul";
                    list.ItemClasses = new List<string>();
                    list.ItemAttributes = new Dictionary<string, string>();
                });
Oct 31, 2014 at 6:08 PM
Thank you for the information.

I was able to extend the module by adding FlexSliderGroupHandler.cs, FlexSliderGroupPart.cs, FlexSliderGroupPartRecord.cs, and then altering the views for FlexSliderGroup which were blank. Everything appears to be working and I don't receive any errors, but when I try to access the values that should have been written to the database within my view they come back as empty. I set mine up the same way the FlexSliderPart was set up except for using ViewModels. I haven't had to use ViewModels within any of my other content parts and when I tried to change the FlexSliderGroupDriver.cs to use ViewModels I would get errors. Any ideas why the database is either not getting written to or accessing it is coming back blank? Thank you.
Oct 31, 2014 at 6:34 PM
Edited Oct 31, 2014 at 6:55 PM
Okay, I figured out how to use the ViewModels to get everything working. Is there a way I can get the values stored in the database for my FlexSliderGroupPart and somehow access them in my FlexSliderWidgetPart so I can get them into the FlexSliderWidget .cshtml display view?

Edit: I also need to somehow grab the class that gets set for the widget as a variable within my view. I have this javascript function within the FlexSliderWidget.cshtml view that I need to replace the ".widget-HomepageFlexSlider ...." with ".widget-[specified name for css by widget creator] ..." I also need to find a way to access the values from my FlexSliderGroupPart and inject them into the javascript for each value such as animation and direction.

<script type="text/javascript">
    $(document).ready(function () {

        //$(".flex-control-paging").append("<li class='slide-text-bottom'></li>");

        $('.widget-HomepageFlexSlider .flexslider').flexslider({

            //animation: 'fade',              //String: Select your animation type, "fade" or "slide"
            //direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
            //reverse: false,                 //{NEW} Boolean: Reverse the animation direction
            //slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
            //animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
            //randomize: false,               //Boolean: Randomize slide order
            //pauseOnAction: false,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
            //pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
            //controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
            //directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)

            //after: function () {
            //    $(".slide-text-bottom").text($(".flex-active-slide>span").text());
            //}
        });