Is it possible to load JavaScript based on theme?

776 views Asked by At

I'm developing a site for a client that has 3 themes available. I'm using the app_themes system to enable the user to change the style. Each theme uses a few different JavaScript files to load custom fonts. What would be the best approach to load these JavaScript files based on the chosen themes?

As far as I can tell, Kentico uses the same app themes system as default ASP.net webforms.

Ideally I would like to be able to add the appropriate JavaScript files to the corresponding App_Theme folder and let ASP add the tags to the document head. If this isn't an option I've considered writing a ScriptLoader JavaScript that will inspect the style sheet tags to determine which theme is being used. It would be better if I could just add the theme name as a class attribute on the body element and just look at that and pull in appropriate scripts.

1

There are 1 answers

0
Stephen__T On BEST ANSWER

I think I found a solution that involves making a webPart or control if you aren't using Kentico.

 public static void AddScriptToHead(HtmlHead h, string script, bool AddScriptTags)
{
    Literal l = new Literal();

    if (AddScriptTags)
        l.Text = "<script type=\"text/javascript\" src=\""
                + script +
                "\"></script>";
    else
        l.Text = script;
    h.Controls.Add(l);
}

protected void SetupControl()
{
    if (this.StopProcessing)
    {
        // Do nothing
    }
    else
    {
        string theme = Page.Theme;


        if (theme != null)
        {

            if (theme.Equals("Card"))
            {
                AddScriptToHead(Page.Header, "~/App_Themes/Cardamon/js/cufon-colors-classic.js", true);
                AddScriptToHead(Page.Header, "~/App_Themes/Cardamon/js/Charis_SIL_700.font.js", true);
            }
            else if (theme.Equals("CardamonWave"))
            {
                AddScriptToHead(Page.Header, "~/App_Themes/Cardamon/js/cufon-colors-wave.js" ,true);
                AddScriptToHead(Page.Header,  "~/App_Themes/Cardamon/js/Lobster_14_400.font.js",true);
            }
            else if (theme.Equals("CardamonAncient"))
            {
                AddScriptToHead(Page.Header, "~/App_Themes/Cardamon/js/cufon-colors-ancient.js", true);
                AddScriptToHead(Page.Header, "~/App_Themes/Cardamon/js/Charis_SIL_700.font.js", true);
            }
            else
            {
                //Y U no theme?
            }
        }

    }
}

I'd like to extend this to accept Scripts and themes as properties in the future but this will work for now.