Copied to clipboard

Flag this post as spam?

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


  • Vincent Baaij 95 posts 344 karma points c-trib
    Jan 19, 2012 @ 09:45
    Vincent Baaij
    2

    Solution for using ClientDependency 1.4

     

    Hi,

    First of all: great package. Great resource for learning razor etc.

    We're using ClientDepedency 1.4 (why doesn't Umbraco use this version standard??) in our environment and that doesn't work out of the box with the supplied cdloader.cshtml. I managed to get it working so I thought I would share my solution here.

    I'm not using the html5standardrenderer. The ClientDependency standardrenderer works ok for me. As far as I can see the only difference is the addition of type="text/css" in the output. (If that's not right, please explain in a reply)

    In my solution I also implemented a third standard path for .less files. I added an extra parameter "LessPaths" to the CD Loader macro. It saves you from having to add /less/ for each file. As you can see in the code, the priority for the .less files is continued from the css files. Css file calls will be placed before less files in the html.

    Here is the code:

    @*
        This class will help you to load all scripts and stylesheets using ClientDependency
        Parameters:
        CssPaths (string) Pipe-separated css. The order how you put them is important
    LessPaths (string) Pipe-separated less. The order how you put them is important
        JsPaths (string) Pipe-separated js
        IncludeDefaultPaths (bool, default false) If true, it will prepend ~/css, ~/less and ~/scripts
    *@
    @inherits umbraco.MacroEngines.DynamicNodeContext
    @using ClientDependency.Core
    @using ClientDependency.Core.Controls
    @{
        var cssPaths = Parameter.CssPaths;
        var lessPaths = Parameter.LessPaths;
        var jsPaths = Parameter.JsPaths;
        bool includeDefaultPaths;
        bool.TryParse(Parameter.IncludeDefaultPaths, out includeDefaultPaths);
        CdObjects cdPaths = GetClientDependencyPaths(cssPaths, lessPaths, jsPaths, includeDefaultPaths);
        @Html.Raw(cdPaths.Styles)
        @Html.Raw(cdPaths.Scripts)
    }
    @functions 
    {
        CdObjects GetClientDependencyPaths(string cssPaths, string lessPaths, string jsPaths, bool includeDefaultPaths)
        {
            var paths = new HashSet<IClientDependencyPath>
            {
                new ClientDependencyPath {Name = "Styles", Path = "~/css"}, 
                new ClientDependencyPath {Name = "Less", Path = "~/less"}, 
                new ClientDependencyPath {Name = "Scripts", Path = "~/scripts"}
            };
            var allDependencies = new List<IClientDependencyFile>();
            string cssOutput, jsOutput;
            int priority = 0;
            if (!string.IsNullOrEmpty(cssPaths))
            {
                allDependencies.AddRange(cssPaths.Split('|').Select(path => new CssInclude { PathNameAlias = includeDefaultPaths ? "Styles" : string.Empty, FilePath = path, Priority = priority++ }));
            }
            if (!string.IsNullOrEmpty(lessPaths))
            {
                allDependencies.AddRange(lessPaths.Split('|').Select(path => new CssInclude { PathNameAlias = includeDefaultPaths ? "Less" : string.Empty, FilePath = path, Priority = priority++ }));
            }
            if (!string.IsNullOrEmpty(jsPaths))
            {
                priority = 0;
                allDependencies.AddRange(jsPaths.Split('|').Select(path => new JsInclude { PathNameAlias = includeDefaultPaths ? "Scripts" : string.Empty, FilePath = path, Priority = priority++ }));
            }
            var renderer = new ClientDependency.Core.FileRegistration.Providers.StandardRenderer();
            renderer.RegisterDependencies(allDependencies, paths, out jsOutput, out cssOutput, Context);
            return new CdObjects { Styles = cssOutput, Scripts = jsOutput };
        }
        class CdObjects
        {
            public string Styles { get; set; }
            public string Scripts { get; set; }
        }
    }

    Remember this needs an extra parameter on the macro. See screenshot

    Hope this helps someone. Comments? Errors? Please reply.

  • J 150 posts 489 karma points
    Jan 19, 2012 @ 10:05
    J
    0

    Hi Vincent,

    Thanks for sharing this. I'm currently working on a new version where the parameters are specified in the macro so it is compatible with Umbraco version 4.7.1.1.

    One of the reasons why I used the Html5StandardRenderer apart from removing the type="text/css" attribute, it is because encodes the & symbol so it produces a valid html and also because when working in debug mode you can see the scripts/css one on each line, which I found easier to read.

    Regarding Umbraco to use the latest ClientDependency version, I have created a new topic in http://umbraco.codeplex.com/workitem/30684. If you agree with it, maybe you can upvote 

    Thanks,

    Jorge

  • J 150 posts 489 karma points
    Jan 19, 2012 @ 16:18
    J
    1

    Hi Vincent,

    I have just release a new version 1.0.4 which solved the issue with the missing macro parameters.

    Thanks,

    J

  • Anthony Candaele 1197 posts 2049 karma points
    Apr 28, 2012 @ 16:35
    Anthony Candaele
    0

    Hi Jorge,

    I just ran into this issue when upgrading to Umbraco 4.7.1.1 see my blogpost . How can implement your new version 1.0.4 so that my upgrade to Umbraco 4.7.1.1 works?

    Thanks for your help,

    Anthony

  • Anthony Candaele 1197 posts 2049 karma points
    Apr 29, 2012 @ 16:35
    Anthony Candaele
    1

    I implemented the CdLoader.cshtml for my Umbraco 4.7.1.1 website.

    These are the steps I took:

    I downloaded the uBootstrap 1.0.4 package and unzipped it
    Copy and pasted the code for the CdLoader.cshtml script file
    Created the macro parameters on the CdLoader macro (see screenshot)
    Copied the Bootstrap.Logic.dll from the unzipped uBootstrap package
    Changed the version number in the config/ClientDependency.config file 

    The layout of my website is now fine again, it uses the Client Depency Framework and it is upgraded to Umbraco 4.7.1.1 :)

    Greetings,
    Anthony

Please Sign in or register to post replies

Write your reply to:

Draft