Try our conversational search powered by Generative AI!

Hjalmar Moa
Sep 3, 2009
  4671
(0 votes)

Adding glossary functionality in XHtml-property content

A customer wanted to be able to have explanation for the words in the site dictionary. The chosen solution for making this popup was to mark the text with a span around it.

<span rel="description">Word</span>

The replacement of this should only be displayed in view-mode. To make this I extended the xhtml-control to return a new control

[PageDefinitionTypePlugIn]
public class DictionaryXHTMLString : PropertyXhtmlString
{
    public override IPropertyControl CreatePropertyControl()
    {
        return new DictionaryXHTMLStringControl();
    }
}
public class DictionaryXHTMLStringControl : PropertyLongStringControl
{
    public override void CreateDefaultControls()
    {
        base.CreateDefaultControls();
        foreach (Control ctrl in Controls[0].Controls)
        {
            Literal lit = ctrl as Literal;
            if (lit != null)
            {
                lit.Text = GlossaryFilter.GetDictionaryMarkup(lit.Text);
            }
        }
    }
}

The PropertyLongStringControl populates the control tree with a panel and a list of Literals. If dynamic content is included it comes as a different class so we don’t have to worry about it.

The magic is performed by the glossary filter which adds the span tags by parsing the content with a small regex.

public static string GetDictionaryMarkup(string markup)
{
    try
    {
        GlossaryWordCollection gc = GlossaryWord.GetAllGlossaryWords(false);

        foreach (GlossaryWord word in gc)
        {
            if (!string.IsNullOrEmpty(word.ToolTip))
            {
                Regex ex = new Regex(string.Format(@"(>[^<]*?)(?<data>\b{0}\b)", word.Word), RegexOptions.IgnoreCase);
                string replaceString = string.Format("$1<span class=\"tooltip\" rel=\"{0}\">$2</span>",word.Description);
                string newmarkup = ex.Replace(markup, replaceString);
                markup = newmarkup;
            }
        }
        return markup;
    }
    catch //if whatever happens, return the original string.
    {
        return markup;
    }
}

This replaces the first occurrence of a word in the text after any tag. If all occurrences should be matched the regex could be changed or perhaps loop it for a while….

The attribute rel in the tag was chosen as to not have a tooltip when hovering the tag. The popup is then created with javascript, but that’s just a matter of choosing how to display it.

Sep 03, 2009

Comments

Please login to comment.
Latest blogs
New Series: Building a .NET Core headless site on Optimizely Graph and SaaS CMS

Welcome to this new multi-post series where you can follow along as I indulge in yet another crazy experiment: Can we make our beloved Alloy site r...

Allan Thraen | Jun 14, 2024 | Syndicated blog

Inspect In Index is finally back

EPiCode.InspectInIndex was released 9 years ago . The Search and Navigation addon is now finally upgraded to support Optimizely CMS 12....

Haakon Peder Haugsten | Jun 14, 2024

Change the IP HTTP Header used for geo-lookup in Application Insights

.

Johan Kronberg | Jun 10, 2024 | Syndicated blog

Copying property values

In this article I’d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts...

Grzegorz Wiecheć | Jun 8, 2024 | Syndicated blog

Auto-translate with OpenAI GPT-4o in Optimizely CMS

Improvements for Episerver.Labs.LanguageManager! It's now possible to auto-translate both a page and its children at the same time! Additionally, m...

Tomas Hensrud Gulla | Jun 7, 2024 | Syndicated blog

Upgrade To Optimizely CMS 12 Issue: List item fields have become Required

There are many funny details to be aware of when upgrading from Episerver CMS 11 to Optimizely CMS 12. One of them that might feel a bit confusing ...

Allan Thraen | Jun 7, 2024 | Syndicated blog