Skip to content

Commit 0924aa2

Browse files
jhaugajhauga
committed
Update to showTermTitleWithLink and example page added.
1 parent 6b050a2 commit 0924aa2

File tree

4 files changed

+158
-29
lines changed

4 files changed

+158
-29
lines changed

‎.scripts.lnk

1.2 KB
Binary file not shown.

‎README.md

+15-8
Original file line numberDiff line numberDiff line change
@@ -232,14 +232,21 @@ onclick="changeNextElementDisplay(this, this.nextElementSibling)"
232232
a. "text" - default | gets the parent elements "innerText" value.
233233
b. "html" - gets the parent elements "innerHTML" value.
234234

235-
<strong>showTermTitleWithLink</strong>(<em>cur</em>, <em>curData</em>, <em>curTitle</em>) <br>
236-
**TO USE** - Paste below example as is into HTML tag, then modify: <br>
235+
<strong>showTermTitleWithLink</strong>(<em>cur</em>, <em>curData</em>, <em>curTitle</em>)
236+
1. <strong>this</strong>: Required constant argument - this
237+
2. <strong>curData</strong>: Required constant argument - this.dataset
238+
3. <strong>curTitle</strong>: Required constant argument - this.dataset.title <br>
239+
240+
Options are controlled with the <strong>title</strong> attribute. Enter function arguments as noted above, but the title attribute follows this logic: <br>
241+
1. <strong>title</strong>\=" <em>A.</em> Definition :: <em>B. </em> \[Alternate text for\], \[Source Name\] :: <em>C. </em> \[link 1\] -:- \[link 2\]"
242+
<strong>A.</strong> - the definition or hint for the displayed html text. <em><strong>required</strong></em>
243+
<strong>B.</strong> - Alternative text to reference source link (default is "Source Page"). Separate with "," using "\[l\]" (defaults to first item) to denote which text is nested in link (when one link); and if multiple links leave blank, or denote with: a. "\[l\]" (matches link order with or without \[l\]) or b. "\[i\]" (where i links index in array and can be used with or without \[l\]). <em>optional</em>
244+
<strong>C. </strong> - The link(s) that the definition was derived from. Separate with "-:-" if over one. <em>optional</em>
245+
**To Use** - Paste one of the below examples (as is) into and HTML tag (as attribute), then modify **title** attribute only: <br>
237246
```markdown
238247
onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition. ::https ://change_source_linke.com"
239248
```
240-
1. <strong>this</strong>: Required
241-
2. <strong>curData</strong>: Required
242-
3. <strong>curTitle</strong>: Required.
243-
For best results set arguments as such - (this, this.dataset, this.dataset.title). Example:
244-
showTermTitleWithLink(this, this.dataset, this.dataset.title)
245-
And place in a "onmouseover" attribute of HTML element, ensuring there is also a "title" attribute.
249+
<strong>NOTE</strong> - mind indexes if using below example.
250+
```markdown
251+
onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: One\[0\], two\[1\]::https ://changelink1.com -:- https ://changelink2.com"
252+
```

‎reusableJavascriptFunctions.js

+109-21
Original file line numberDiff line numberDiff line change
@@ -2438,8 +2438,15 @@ function showTermTitleWithLink(cur, curData, curTitle) {
24382438
};
24392439
// Functio Variables
24402440
var curTermOffsetTop, tempTermBox, tempTermBoxScrollHeight;
2441-
var termTitleWithLinkData, termTitleWithLinkDefinition, termTitleWithLinkTerm,
2442-
termBox, termBoxid, termBoxHTML, termLink, termLinkBox, termBoxTop, termBoxPos, termLinkTag;
2441+
var termTitleWithLinkData, termTitleWithLinkDefinition, termTitleWithLinkTerm, termTitleArray, termTitleArrayLen,
2442+
termTitleLinkArray, termTitleLinkArrayLen, termLinkArray, termLinkArrayLen,
2443+
termBox, termBoxid, termBoxHTML, termLinkBox, termBoxTop, termBoxPos, termLinkTag;
2444+
var termLink = "javascript:void(0)";
2445+
var sourcePage = "Source Page";
2446+
var termTitleStyle = "display:none";
2447+
var closeLinkText = "";
2448+
var multipeTermLinks = 0;
2449+
termLinkBox = "";
24432450
termTitleWithLinkData = curData;
24442451
termTitleWithLinkTerm = cur.innerHTML;
24452452
termTitleWithLinkDefinition = curData.title;
@@ -2465,22 +2472,107 @@ function showTermTitleWithLink(cur, curData, curTitle) {
24652472
termBox.setAttribute("onmouseleave", "showTermTitleWithLink(this, 1)");
24662473

24672474
if (termTitleWithLinkDefinition.indexOf("::") > -1) {
2468-
termLink = termTitleWithLinkDefinition
2469-
.substr(termTitleWithLinkDefinition
2470-
.lastIndexOf("::") + 2);
2475+
termTitleArray = termTitleWithLinkDefinition.split("::");
2476+
termTitleArrayLen = termTitleArray.length;
2477+
termTitleStyle = "color: black; width: auto";
2478+
if (termTitleArrayLen > 2) {
2479+
if (termTitleArray[1].indexOf(",") > -1) {
2480+
termTitleLinkArray = termTitleArray[1].split(",");
2481+
termTitleLinkArrayLen = termTitleLinkArray.length;
2482+
(function() {
2483+
if (termTitleArray[2].indexOf("-:-") > -1) {
2484+
let updateNeeded;
2485+
multipeTermLinks = 1;
2486+
termLinkArray = termTitleArray[2].split("-:-");
2487+
termLinkArrayLen = termLinkArray.length;
2488+
let usingBrackets = 0;
2489+
for (i = 0; i < termLinkArrayLen; i++) {
2490+
if (termTitleLinkArray[i].indexOf("[") > -1 && termTitleLinkArray[i].indexOf("]") > -1) {
2491+
usingBrackets = 1; break;
2492+
}
2493+
}
2494+
let tempTermLinkBox = "";
2495+
for (i = 0; i < termLinkArrayLen; i++) {
2496+
2497+
2498+
if (termTitleLinkArray[i].indexOf("[") > -1 && termTitleLinkArray[i].indexOf("]") > -1) {
2499+
if (termTitleLinkArray[i].indexOf("["+i+"]") > -1) {
2500+
termLink = termLinkArray[i];
2501+
sourcePage = termTitleLinkArray[i].replace("["+i+"]", "");
2502+
} else {
2503+
if (termTitleLinkArray[i].indexOf("[l]") > -1) {
2504+
termLink = termLinkArray[i];
2505+
sourcePage = termTitleLinkArray[i].replace("[l]", "");
2506+
} else {
2507+
let j;
2508+
for (ii = 0; ii < termLinkArrayLen; ii++) {
2509+
if (termTitleLinkArray[i].indexOf("["+ii+"]") > -1) {
2510+
j = ii;
2511+
break;
2512+
} else {
2513+
j = -1;
2514+
}
2515+
}
2516+
if (j == -1) {
2517+
termLink = termLinkArray[i];
2518+
sourcePage = termTitleLinkArray[i];
2519+
} else {
2520+
termLink = termLinkArray[j];
2521+
sourcePage = termTitleLinkArray[i].replace("["+j+"]", "");
2522+
}
2523+
}
2524+
}
2525+
} else {
2526+
termLink = termLinkArray[i];
2527+
sourcePage = termTitleLinkArray[i];
2528+
}
2529+
if (i == termLinkArrayLen-1) closeLinkText = ""; else closeLinkText = ", ";
2530+
tempTermLinkBox += ' ' +
2531+
'<a style="' + termTitleStyle + '" href="' + termLink +
2532+
'" target="_blank" rel="external" ' +
2533+
'data-keepdefinitionbox="0" ' +
2534+
'onmouseover="this.dataset.keepdefinitionbox = 1;" ' +
2535+
'onmouseout="this.dataset.keepdefinitionbox = 0;">' + sourcePage + '</a>' + closeLinkText;
2536+
}
2537+
termLinkBox = tempTermLinkBox;
2538+
} else {
2539+
if (termTitleArray[1].indexOf("[") > -1 && termTitleArray[1].indexOf("]") > -1) {
2540+
if (termTitleLinkArrayLen > 2) {
2541+
let updateNeeded;
2542+
}
2543+
termLink = termTitleArray[2];
2544+
closeLinkText = ", ";
2545+
for (i = 0; i < termTitleLinkArrayLen; i++) {
2546+
if (termTitleLinkArray[i].indexOf("[l]") > -1) {
2547+
sourcePage = termTitleLinkArray[i].replace("[l]", "");
2548+
} else {
2549+
closeLinkText += termTitleLinkArray[i];
2550+
}
2551+
}
2552+
} else {
2553+
termLink = termTitleArray[2];
2554+
sourcePage = termTitleLinkArray[0];
2555+
closeLinkText = ", " + termTitleLinkArray[1];
2556+
}
2557+
}
2558+
}) ();
2559+
} else {
2560+
termLink = termTitleArray[2];
2561+
sourcePage = termTitleArray[1];
2562+
}
2563+
} else {
2564+
termLink = termTitleArray[1];
2565+
}
2566+
}
24712567

2568+
if (multipeTermLinks == 0) {
24722569
termLinkBox = ' ' +
2473-
'<a style="color: black; width: auto" href="' + termLink +
2474-
'" target="_blank" rel="external" ' +
2475-
'data-keepdefinitionbox="0" ' +
2476-
'onmouseover="this.dataset.keepdefinitionbox = 1;" ' +
2477-
'onmouseout="this.dataset.keepdefinitionbox = 0;">Source Page</a>';
2478-
} else {
2479-
termLinkBox = ' ' +
2480-
'<a style="display: none" href="javascript:void(0)" ' +
2481-
'target="_blank" rel="external" ' +
2482-
'data-keepdefinitionbox="0">Source Page</a>';
2483-
}
2570+
'<a style="' + termTitleStyle + '" href="' + termLink +
2571+
'" target="_blank" rel="external" ' +
2572+
'data-keepdefinitionbox="0" ' +
2573+
'onmouseover="this.dataset.keepdefinitionbox = 1;" ' +
2574+
'onmouseout="this.dataset.keepdefinitionbox = 0;">' + sourcePage + '</a>' + closeLinkText;
2575+
}
24842576

24852577
if (cur.offsetTop > 50 || curTermOffsetTop > 50) {
24862578
if (cur.parentElement.nodeName != "BODY") {
@@ -2514,11 +2606,7 @@ function showTermTitleWithLink(cur, curData, curTitle) {
25142606
"width: auto;");
25152607

25162608
if (termTitleWithLinkDefinition.indexOf("::") > -1) {
2517-
termBox.innerHTML =
2518-
termTitleWithLinkDefinition
2519-
.replace(termTitleWithLinkDefinition
2520-
.substr(termTitleWithLinkDefinition
2521-
.lastIndexOf("::") - 1), termLinkBox);
2609+
termBox.innerHTML = termTitleArray[0] + termLinkBox;
25222610
} else {
25232611
termBox.innerHTML = termTitleWithLinkDefinition + termLinkBox;
25242612
}

‎showTermTitleWithLinkExample.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Show Term Title With Link Example</title>
6+
<script src="reusableJavascriptFunctions.js"></script>
7+
</head>
8+
9+
<body>
10+
11+
<h1>Show Term Title with Link</h1><hr>
12+
<p>Hover over the bold words below to see how setting title attribute will alter how the funciton created title block.</p>
13+
<br>
14+
<code>onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition."</code><br>
15+
<strong onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.">ONE</strong><br>
16+
<br>
17+
<code>onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: https://example.com"</code><br>
18+
<strong onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: https://example.com">TWO</strong><br>
19+
<br>
20+
<code>onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: Some Article, John Smith::https://example.com"</code><br>
21+
<strong onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: Some Article, John Smith::https://example.com">THREE</strong><br>
22+
<br>
23+
<code>onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: Some Article, John Smith[l]::https://en.wikipedia.org/wiki/John_Smith_(explorer)"</code><br>
24+
<strong onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: Some Article, John Smith[l]::https://en.wikipedia.org/wiki/John_Smith_(explorer)">FOUR</strong><br>
25+
<br>
26+
<code>onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: Some Article[1], John Smith[0]::https://en.wikipedia.org/wiki/John_Smith_(explorer)-:-https://example.com"</code><br>
27+
<strong onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: Some Article[1], John Smith[0]::https://en.wikipedia.org/wiki/John_Smith_(explorer)-:-https://example.com">FIVE</strong><br>
28+
<br>
29+
<p><strong>NOTE</strong> - As there is really no need for "[l]" after text, index mark in link text can be omitted if links are in correct order.</p>
30+
<code>onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: Some Article[0], John Smith[l]::https://example.com-:-https://en.wikipedia.org/wiki/John_Smith_(explorer)"</code><br>
31+
<strong onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition.:: Some Article[0], John Smith[l]::https://example.com-:-https://en.wikipedia.org/wiki/John_Smith_(explorer)">FIVE</strong><br>
32+
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)