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.