Glossary for SMF 2.1

[live627]

@GL700Wing I'm still noticing bugs.

I added a "before" and "after" picture as attachment.

This is the original text:

Do you want an admin to join the server and spectate NOW?
Yes! He's currently playing and can be spectated on AMG 1.
What would you like to report?
Aimbot/Wallhack or other cheat
Please provide us with the EA username of the player breaking the rules:
Rattanaboonbaram
Please provide us with your own Origin username or Discord nickname:
Ammo-kech
If possible, please describe what happened. A link to a screenshot or video would also be very useful:
Wallhacks

can you post a link to where this is happening?

[live627]

nvm

You cannot view this attachment.

@GL700Wing add entry for Bot

[GL700Wing]

nvm
...
add entry for Bot

Sorry - I don't understand the issue or what changes I need to make.

PS: I can't reproduce the issue on my test forum using the same Glossary (which already contains the 'Bot' keyword) and message text.  What mod options do you have enabled?

[live627]

all defaults except for "Show keyword and synonyms below definition in tooltip "

[GL700Wing]

all defaults except for "Show keyword and synonyms below definition in tooltip "

OK - can reproduce if both of the following options are enabled (neither are enabled by default):
Allow keywords to have synonyms
Show keyword and synonyms below definition in tooltip

And problem does not occur if second option is disabled.

[GL700Wing]

Version 1.3 : 28-Sep-24
o Fixed tooltip corruption issue reported by JRMBelgium that occurred in a very specific of circumstances if the 'Show keyword and synonyms below definition in tooltip' option was enabled.
o Minor performance/reliability improvements.

Note: Mod update option available for previous versions.

FYI @JRMBelgium

[JRMBelgium]

Version 1.3 : 28-Sep-24
o Fixed tooltip corruption issue reported by JRMBelgium that occurred in a very specific of circumstances if the 'Show keyword and synonyms below definition in tooltip' option was enabled.
o Minor performance/reliability improvements.

Note: Mod update option available for previous versions.

FYI @JRMBelgium

Did you figure out which mod ended up in conflict with yours? Or was it something else?

[GL700Wing]

Did you figure out which mod ended up in conflict with yours? Or was it something else?

The issue was in this mod and it was to do with how the list of keywords was being generated for message processing when the use of the [glossary][/glossary] tag is optional.

In this situation, and because a keyword could occur anywhere in the body of a message, keywords have to be identified/processed in a specific way in order for the tooltip to be created correctly.

Previously a unique string was only added to the beginning of each keyword (this was removed before the message was displayed) but in certain situations, and only if the 'Show keyword and synonyms below definition in tooltip' option was enabled, tooltips would not be displayed correctly if the end of a keyword was matched by a subsequent keyword in alphabetic order - in your case the end of the keyword 'Aimbot' was subsequently being matched by the keyword 'Bot'.

The fix now wraps the keywords in the unique string so that the whole keyword is matched.

[JRMBelgium]

Found another bug when you add a URL to a definition.

I added screenshots to show you how it looks with or without a URL in the definition:

[JRMBelgium]

Here is also css improvement to improve compatibility with more themes. I added a before and after screenshot.

Code Select Expand

/* ---- Glossary List Menu ------ */
/* Glossary list heading */
.glossarytitle {
    padding: 5px 2.5%;
    font-size: 1.2em;
}
.glossarytitle table tbody tr {
    margin: 4px 0 0 0;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.08);
}

.glossarytitle a {
    background: none;
    font-family: Georgia, TimesNewRoman, Times New Roman, Times, Baskerville, serif;
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
    padding-right: 5px;
    padding-left: 5px;
}

.glossarytitle a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.glossarytitle a img, .glossarytitle button span img {
    vertical-align: text-bottom;
}

div.letter_selection {
    border-bottom: 1px solid #696969;
    padding: 8px 0;
    font-weight: bold;
    font-size: 1.5em;
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-family: Georgia, TimesNewRoman, Times New Roman, Times, Baskerville, serif;
        border: 1px solid #696969;
}

.glossary_alert {
    color: red !important;
    text-decoration: underline;
}

/* Glossary actions, keywords and definitions */
.glossary_keyword_def {
    vertical-align: top;
    padding: 3px 0;
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-family: Georgia, TimesNewRoman, Times New Roman, Times, Baskerville, serif;
}

.glossary_keyword_def div, .glossary_keyword_def b div {
    float: left;
}

.glossary_hr {
    width: 95%;
    margin: 6px 0;
}

.glossary_heading {
    font-family: Georgia, TimesNewRoman, Times New Roman, Times, Baskerville, serif;
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

.glossary_item {
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-family: Georgia, TimesNewRoman, Times New Roman, Times, Baskerville, serif;
}

/* Tooltip for action titles */
.glossaryaction {
    vertical-align: top;
    padding: 5px 15px 0 0;
}

.glossaryaction a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.glossaryaction a:hover::after {
    content: attr(data-title);
    position: absolute;
    z-index: 1;
    white-space: nowrap;
    max-width: 300px;
    width: auto;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.6);
    border-width: thin;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    border-radius: 6px;
    padding: 5px 15px;
    top: 100%;
    left: 50%;
}

td.glossaryaction input, td.glossaryaction a img {
    padding: 0 1px;
}


/* ---- Modal Dialog Box ------ */
/* Overlay */
#ModalOverlay {
    background-color: #eee;
    cursor: wait;
}

/* Container */
#ModalContainer {
    position: fixed !important;
    top: 10vh !important;
    left: 50vw !important;
    transform: translate(-50%, 0);
    font-family: Georgia, TimesNewRoman, Times New Roman, Times, Baskerville, serif;
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-size: 1em;
    height: auto !important;
    width: 450px;
    padding-bottom: 10px;
    text-align: left;
    background: #fff;
    border: 2px solid #336699;
}

#ModalContainer .header {
    height: 30px;
    width: 100%;
    background: url(../glossary/images/glossary_header.gif) repeat-x;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
}

#ModalContainer .header span {
    padding-left: 8px;
}

#ModalContainer .buttons {
    float: right;
    padding: 0 8px;
}

#ModalContainer .buttons div {
    float: right;
    margin-left: 8px;
    width: 70px;
    height: 26px;
    color: #666;
    font-weight: bold;
    text-align: center;
    background: url(../glossary/images/glossary_button.gif) repeat-x;
    border: 1px solid #bbb;
    cursor: pointer;
    font-size: 0.8em;
}

#ModalContainer .ModalContent {
    font-size: 0.8em;
    padding: 10px;
}

#ModalContainer .ModalContent fieldset{
    padding: 5px;
}

#ModalContainer .ModalContent input.text {
    margin-bottom: 12px;
    width: 96%;
    padding: .4em;
}

#ModalContainer .ModalContent textarea {
    margin-bottom: 12px;
    width: 96%;
    padding: .4em;
}

#ModalContainer label {
    display: -moz-inline-box;
    display: inline-block;
    padding: 5px 0 0;
    font-weight: bold;
}

#IE #ModalContainer label,
#IE #ModalContainer .input-submit{
    display: inline;
}

#glossary_admin_menu {
    background-color: #F0F0F0;
    max-width: 240px;
    width: auto;
    position: absolute;
    margin-top: 7px;
    padding: 5px;
    border: 1px solid #969696;
    line-height: 150%;
    display: none;
    right: 21%;
}

#glossary_admin_menu img {
    vertical-align: middle;
    padding-left: 5px;
}

/* ---- Keyword Tooltips in Messages, PMs, signatures, and/or News items ------ */
/* Font and color used for showing keyword tooltip in message */
span.glossary {
    font-family: Georgia, TimesNewRoman, Times New Roman, Times, Baskerville, serif;
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    position: relative;
    z-index: 7;
    color: #3CA3FF;
    font-weight: bold;
    text-decoration: none;
    cursor: help;
}


Also a fix so that the context menu text hover doesn't become black and follows the installed theme default:

Code Select Expand

/* Generic context menu styles */
.contextMenu {
    position: absolute;
    width: 230px;
    z-index: 99999;
    border: solid 1px #CCC;
    background: #EEE;
    padding: 4px;
    margin: 0px;
    display: none;
}

.contextMenu li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

/* Remove hover class styles if not using them
.contextMenu li.hover a {
    color: #FFF;
    background-color: #3399FF;
}
*/

.contextMenu li.disabled a {
    color: #AAA;
    cursor: default;
}

.contextMenu li.hover.disabled a {
    background-color: transparent;
}

.contextMenu li.separator {
    border-top: solid 1px #CCC;
}

.contextMenu a {
    color: #333;
    text-decoration: none;
    display: block;
    line-height: 22px;
    background-position: 6px center;
    background-repeat: no-repeat;
    outline: none;
    padding: 1px 5px;
}

.contextMenu a img {
    vertical-align: middle;
    padding-right: 5px;
}

/* Add hover styles using :hover */
.contextMenu li:hover a {
    color: #FFF;
    background-color: #3399FF;
}



[GL700Wing]

Found another bug when you add a URL to a definition.

It's not a bug - as per the mod documentation URLs are not supported in keywords, synonyms or definitions.

[GL700Wing]

Here is also css improvement to improve compatibility with more themes. I added a before and after screenshot.

When providing suggestions for code updates it's helpful to include the filename (including it's path) relative to the forum root directory.

[live627]

I have slightly rewritten the parser to improve performance by not repeating queries. Also fixes a some unreported errors, such as the bbcode not working for me at all. Parsing is now done after all the regular bbcodes are processed, enabling me to leave tags alone.

One thing though is that keywords that do not require the bbcode still get highlighted even when wrapped in the bbcode. Not sure if we consider that a bug or a feature.

[GL700Wing]

I have slightly rewritten the parser to improve performance by not repeating queries. Also fixes a some unreported errors, such as the bbcode not working for me at all. Parsing is now done after all the regular bbcodes are processed, enabling me to leave tags alone.

Not having much luck with that file (see error log image) - an error from line 1695 which I don't know how to fix and I was getting errors from around line 1747 which I was able to fix (fixed file attached).

Attached is an image showing how the mod works with the latest release of my code on the left and how it works with your code on the right with the Glossary I use for testing (attached).
You cannot view this attachment.

One thing though is that keywords that do not require the bbcode still get highlighted even when wrapped in the bbcode. Not sure if we consider that a bug or a feature.

This is by design because I know some SMF 2.0 forums which used the original Glossary mod did not always or consistently require the use of the BBCode tag so in order to not have keywords in the Glossary BBCode tags orphaned if the option 'Only show tooltips for keywords inside a Glossary BBCode tag' is disabled tooltips are shown for all keywords in the message body.

[JRMBelgium]

Found another bug when you add a URL to a definition.

It's not a bug - as per the mod documentation URLs are not supported in keywords, synonyms or definitions.

I'm sorry. Didn't know that. I don't really understand why it's not supported though. A link to a source of the defenition can be very usefull in a glossary.

Here is also css improvement to improve compatibility with more themes. I added a before and after screenshot.

When providing suggestions for code updates it's helpful to include the filename (including it's path) relative to the forum root directory.

/Themes/default/css/glossary/glossary.css
/Themes/default/css/glossary/glossary.contextMenu.css

[Kindred]

Because the programming and processing would increase if the was supported

[GL700Wing]

I don't really understand why it's not supported though. A link to a source of the defenition can be very usefull in a glossary.

That's not a feature I plan to add - however, you are welcome to ask if someone else is willing to customise this mod for you.

[live627]

I loaded your test glossary and ran your version of the mod to end up with a 14 second load time! Also "credit" had a different tooltip than the rest of the line A credit for your thoughts'

[GL700Wing]

I loaded your test glossary and ran your version of the mod to end up with a 14 second load time!

There was an issue with long load times for the large Glossary lists early on when I was updating this mod but I thought that was resolved when I changed from using JS (as per the original mod) to CSS for showing the tooltips of the Glossary action icons (eg, edit keyword, delete keyword, etc).

I'll send you a PM with login details for an account on my test forum so that you can let me know if you see the same issue there (just wondering if it might be an OS/browser issue).

Also "credit" had a different tooltip than the rest of the line A credit for your thoughts'

Correct - they are two different Glossary keywords and additional tooltips are not created within a keyword/synonym that contains other keywords/synonyms.
Edit: Actually I've just realised the situation you were describing and additional tooltips are created within a keyword/synonym that contains other keywords/synonyms.

Feature or bug? I'm not sure - guess it depends on whether or not it's something useful ...

[Kindred]

I loaded your test glossary and ran your version of the mod to end up with a 14 second load time! Also "credit" had a different tooltip than the rest of the line A credit for your thoughts'

on test2.turtleshellprod.com, I have an extensive glossary added...    and it performs a really quick load for me on the glossary page.