London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!


Sep 3, 2009
  4849
(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
Optimizely Frontend Hosting Beta – Early Thoughts and Key Questions

Optimizely has opened the waitlist for its new Frontend Hosting capability. I’m part of the beta programme, but my invite isn’t due until May, whil...

Minesh Shah (Netcel) | Apr 23, 2025

Developer Meetup - London, 21st May 2025

The London Dev Meetup has been rescheduled for Wednesday, 21st May and will be Candyspace 's first Optimizely Developer Meetup, and the first one...

Gavin_M | Apr 22, 2025

Frontend hosting for PaaS & SaaS CMS

Just announced on the DXP, we FINALLY have a front end hosting solution coming as part of the DXP for modern decoupled solutions in both the PaaS a...

Scott Reed | Apr 22, 2025

Routing to a page in SaaS CMS

More early findings from using a SaaS CMS instance; setting up Graph queries that works for both visitor pageviews and editor previews.

Johan Kronberg | Apr 14, 2025 |