asp.netkenticoapp-themes

Is it possible to load JavaScript based on theme?


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.


Solution

  • 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.