Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bendik Engebretsen 105 posts 198 karma points
    Jun 10, 2015 @ 20:40
    Bendik Engebretsen
    0

    Grid Layout renderer for SkelJS

    Just wanted to know if anyone has tried to write a custom Grid Layout renderer for the SkelJS framework, which is used in the TXT Starter Kit? (If someone has, I don't have to reinvent the wheel...)

  • Bendik Engebretsen 105 posts 198 karma points
    Jun 11, 2015 @ 11:14
    Bendik Engebretsen
    0

    Okay, so I watched the video on rendering content (http://www.umbraco.tv/videos/umbraco-v7/implementor/fundamentals/grid-layouts/rendering-content/) and realized this shouldn't be too hard. Basically what I did was to create a new partial under Partial Views/Grid called SkelJS and cloned the existing Bootstrap3 renderer.

    Then it was quite easy to tweak the renderer to render SkelJS markup. Here's the code:

    @inherits UmbracoViewPage<dynamic>
    @using Umbraco.Web.Templates
    @using Newtonsoft.Json.Linq
    
    @* 
        Razor helpers located at the bottom of this file
    *@
    
    @if (Model != null && Model.sections != null)
    {
        var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1;
    
        if (oneColumn)
        {
            foreach (var section in Model.sections)
            {
                foreach (var row in section.rows)
                {
                    @renderRow(row, true);
                }
            }   
        }
        else
        { 
            <div class="container">
                <div class="row">
                    @foreach (var s in Model.sections)
                    {
                        <div class="@(s.grid)u">
                            @foreach (var row in s.rows)
                            {
                                @renderRow(row, false);
                            }
                        </div>
                    }
            </div>
                </div>   
        }
    }
    
    @helper renderRow(dynamic row, bool singleColumn){
        <div @RenderElementAttributes(row)>
            @Umbraco.If(singleColumn, "<div class='container'>")
            <div class="row">
                @foreach ( var area in row.areas )
                {
                    <div class="@(area.grid)u">
                        @*<div @RenderElementAttributes(area)>*@
                            @foreach (var control in area.controls)
                            {
                                if (control !=null && control.editor != null && control.editor.view != null )
                                {
                                    <text>@Html.Partial("grid/editors/base", (object)control)</text>
                                }
                            }
                        @*</div>*@
                    </div>
                }
            </div>
            @Umbraco.If(singleColumn, "</div>")
        </div>
    }
    
    @functions {
        public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
        {
            var attrs = new List<string>();
            JObject cfg = contentItem.config;
    
            if(cfg != null)
                foreach (JProperty property in cfg.Properties()) {
                    attrs.Add(property.Name + "=\"" + property.Value.ToString() + "\"");
                }
    
            JObject style = contentItem.styles;
    
            if (style != null) { 
            var cssVals = new List<string>();
            foreach (JProperty property in style.Properties())
                cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");
    
            if (cssVals.Any())
                attrs.Add("style=\"" + string.Join(" ", cssVals) + "\"");
            }
    
            return new MvcHtmlString(string.Join(" ", attrs));
        }
    }
    
  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies