Skip to content

Commit 6e63c07

Browse files
reakaleekreakaleek
authored
Refactor and optimize htmx attributes (#812)
* Refactor and optimize htmx attributes * Remove excess attribute * Fix tests
1 parent ddaf584 commit 6e63c07

File tree

8 files changed

+32
-44
lines changed

8 files changed

+32
-44
lines changed

‎src/Elastic.Markdown/Helpers/Htmx.cs

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,20 @@ public static string GetHxSelectOob(bool hasSameTopLevelGroup)
1717
return selectTargets;
1818
}
1919

20-
public static string GetPreload() => "true";
20+
public const string Preload = "mousedown";
21+
public const string HxSwap = "none";
22+
public const string HxPushUrl = "true";
23+
public const string HxIndicator = "#htmx-indicator";
2124

22-
private static string GetHxSwap() => "none";
23-
private static string GetHxPushUrl() => "true";
24-
private static string GetHxIndicator() => "#htmx-indicator";
25-
26-
public static string GetHxAttributes(string targetUrl, bool hasSameTopLevelGroup)
25+
public static string GetHxAttributes(string targetUrl, bool hasSameTopLevelGroup, string? preload = Preload)
2726
{
2827
var attributes = new StringBuilder();
2928
_ = attributes.Append($" hx-get={targetUrl}");
3029
_ = attributes.Append($" hx-select-oob={GetHxSelectOob(hasSameTopLevelGroup)}");
31-
_ = attributes.Append($" hx-swap={GetHxSwap()}");
32-
_ = attributes.Append($" hx-push-url={GetHxPushUrl()}");
33-
_ = attributes.Append($" hx-indicator={GetHxIndicator()}");
34-
_ = attributes.Append($" preload={GetPreload()}");
30+
_ = attributes.Append($" hx-swap={HxSwap}");
31+
_ = attributes.Append($" hx-push-url={HxPushUrl}");
32+
_ = attributes.Append($" hx-indicator={HxIndicator}");
33+
_ = attributes.Append($" preload={preload}");
3534
return attributes.ToString();
3635
}
3736
}

‎src/Elastic.Markdown/Myst/Renderers/HtmxLinkInlineRenderer.cs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ protected override void Write(HtmlRenderer renderer, LinkInline link)
4242
_ = renderer.WriteEscapeUrl(url);
4343
_ = renderer.Write('"');
4444
_ = renderer.Write($" hx-select-oob=\"{Htmx.GetHxSelectOob(currentRootNavigation?.Id == targetRootNavigation?.Id)}\"");
45-
_ = renderer.Write(" hx-swap=\"none\"");
46-
_ = renderer.Write(" hx-push-url=\"true\"");
47-
_ = renderer.Write(" hx-indicator=\"#htmx-indicator\"");
48-
_ = renderer.Write($" preload=\"{Htmx.GetPreload()}\"");
45+
_ = renderer.Write($" hx-swap=\"{Htmx.HxSwap}\"");
46+
_ = renderer.Write($" hx-push-url=\"{Htmx.HxPushUrl}\"");
47+
_ = renderer.Write($" hx-indicator=\"{Htmx.HxIndicator}\"");
48+
_ = renderer.Write($" preload=\"{Htmx.Preload}\"");
4949
}
5050
else if (link.Url?.StartsWith("http") == true && (link.GetData("isCrossLink") as bool?) == false)
5151
{

‎src/Elastic.Markdown/Slices/Layout/_PrevNextNav.cshtml

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@
77
{
88
<a
99
href="@Model.Previous.Url"
10-
hx-get="@Model.Previous.Url"
11-
hx-select-oob="@Htmx.GetHxSelectOob(Model.CurrentDocument.RootNavigation.Id == Model.Previous.RootNavigation.Id)"
12-
hx-swap="none"
13-
hx-push-url="true"
14-
hx-indicator="#htmx-indicator"
15-
preload="@Htmx.GetPreload()"
10+
@Htmx.GetHxAttributes(Model.Previous.Url, Model.CurrentDocument.RootNavigation.Id == Model.Previous.RootNavigation.Id)
1611
class="flex h-full items-center text-ink-light hover:black border-1 border-grey-20 hover:border-grey-80 rounded-lg p-6 shadow-md"
1712
>
1813
<svg class="size-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -30,12 +25,7 @@
3025
{
3126
<a
3227
href="@Model.Next.Url"
33-
hx-get="@Model.Next.Url"
34-
hx-select-oob="@Htmx.GetHxSelectOob(Model.CurrentDocument.RootNavigation.Id == Model.Next.RootNavigation.Id)"
35-
hx-swap="none"
36-
hx-push-url="true"
37-
hx-indicator="#htmx-indicator"
38-
preload="@Htmx.GetPreload()"
28+
@Htmx.GetHxAttributes(Model.Next.Url, Model.CurrentDocument.RootNavigation.Id == Model.Next.RootNavigation.Id)
3929
class="flex h-full items-center justify-end text-ink-light hover:black border-1 border-grey-20 hover:border-grey-80 rounded-lg p-6 shadow-md text-right"
4030
>
4131
<div>

‎src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<a
1414
class="hover:underline text-blue-elastic hover:text-blue-elastic-100"
1515
href="@current.Group.Index?.Url"
16-
@Htmx.GetHxAttributes(current.Group.Index?.Url!, true)
16+
@Htmx.GetHxAttributes(current.Group.Index?.Url!, false)
1717
>
1818
@current.Group.Index?.NavigationTitle
1919
</a>
@@ -39,10 +39,9 @@
3939
<a
4040
class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
4141
href="@item.Group.Index.Url"
42-
hx-get="@item.Group.Index.Url"
43-
hx-select-oob="#pages-nav,#content-container,#toc-nav"
44-
hx-push-url="true"
45-
preload>@item.Group.Index.NavigationTitle</a>
42+
@Htmx.GetHxAttributes(item.Group.Index.Url, false, "mouseover")>
43+
@item.Group.Index.NavigationTitle
44+
</a>
4645
</li>
4746
}
4847
</ul>

‎tests/Elastic.Markdown.Tests/Inline/AnchorLinkTests.cs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ [Sub Requirements](testing/req.md#sub-requirements)
7575
public void GeneratesHtml() =>
7676
// language=html
7777
Html.Should().Contain(
78-
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
78+
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
7979
);
8080

8181
[Fact]
@@ -93,7 +93,7 @@ [Sub Requirements](testing/req.md#new-reqs)
9393
public void GeneratesHtml() =>
9494
// language=html
9595
Html.Should().Contain(
96-
"""<p><a href="/docs/testing/req#new-reqs" hx-get="/docs/testing/req#new-reqs" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
96+
"""<p><a href="/docs/testing/req#new-reqs" hx-get="/docs/testing/req#new-reqs" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
9797
);
9898

9999
[Fact]
@@ -110,7 +110,7 @@ public class ExternalPageAnchorAutoTitleTests(ITestOutputHelper output) : Anchor
110110
public void GeneratesHtml() =>
111111
// language=html
112112
Html.Should().Contain(
113-
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements &gt; Sub Requirements</a></p>"""
113+
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Special Requirements &gt; Sub Requirements</a></p>"""
114114
);
115115

116116
[Fact]
@@ -146,7 +146,7 @@ [Sub Requirements](testing/req.md#sub-requirements2)
146146
public void GeneratesHtml() =>
147147
// language=html
148148
Html.Should().Contain(
149-
"""<p><a href="/docs/testing/req#sub-requirements2" hx-get="/docs/testing/req#sub-requirements2" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
149+
"""<p><a href="/docs/testing/req#sub-requirements2" hx-get="/docs/testing/req#sub-requirements2" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
150150
);
151151

152152
[Fact]
@@ -165,7 +165,7 @@ [Heading inside dropdown](testing/req.md#heading-inside-dropdown)
165165
public void GeneratesHtml() =>
166166
// language=html
167167
Html.Should().Contain(
168-
"""<a href="/docs/testing/req#heading-inside-dropdown" hx-get="/docs/testing/req#heading-inside-dropdown" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Heading inside dropdown</a>"""
168+
"""<a href="/docs/testing/req#heading-inside-dropdown" hx-get="/docs/testing/req#heading-inside-dropdown" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Heading inside dropdown</a>"""
169169
);
170170
[Fact]
171171
public void HasError() => Collector.Diagnostics.Should().HaveCount(0);

‎tests/Elastic.Markdown.Tests/Inline/DirectiveBlockLinkTests.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ [Sub Requirements](testing/req.md#hint_ref)
6666
public void GeneratesHtml() =>
6767
// language=html
6868
Html.Should().Contain(
69-
"""<p><a href="/docs/testing/req#hint_ref" hx-get="/docs/testing/req#hint_ref" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
69+
"""<p><a href="/docs/testing/req#hint_ref" hx-get="/docs/testing/req#hint_ref" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
7070
);
7171

7272
[Fact]

‎tests/Elastic.Markdown.Tests/Inline/InlineAnchorTests.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ [Sub Requirements](testing/req.md#custom-anchor)
200200
public void GeneratesHtml() =>
201201
// language=html
202202
Html.Should().Contain(
203-
"""<p><a href="/docs/testing/req#custom-anchor" hx-get="/docs/testing/req#custom-anchor" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
203+
"""<p><a href="/docs/testing/req#custom-anchor" hx-get="/docs/testing/req#custom-anchor" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
204204
);
205205

206206
[Fact]

‎tests/Elastic.Markdown.Tests/Inline/InlineLinkTests.cs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ public class InlineLinkTests(ITestOutputHelper output) : LinkTestBase(output,
4949
public void GeneratesHtml() =>
5050
// language=html
5151
Html.Should().Be(
52-
"""<p><a href="/docs/_static/img/observability.png" hx-get="/docs/_static/img/observability.png" hx-select-oob="#content-container,#toc-nav,#pages-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Elasticsearch</a></p>"""
52+
"""<p><a href="/docs/_static/img/observability.png" hx-get="/docs/_static/img/observability.png" hx-select-oob="#content-container,#toc-nav,#pages-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Elasticsearch</a></p>"""
5353
);
5454

5555
[Fact]
@@ -66,7 +66,7 @@ public class LinkToPageTests(ITestOutputHelper output) : LinkTestBase(output,
6666
public void GeneratesHtml() =>
6767
// language=html
6868
Html.Should().Contain(
69-
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Requirements</a></p>"""
69+
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Requirements</a></p>"""
7070
);
7171

7272
[Fact]
@@ -86,7 +86,7 @@ public class InsertPageTitleTests(ITestOutputHelper output) : LinkTestBase(outpu
8686
public void GeneratesHtml() =>
8787
// language=html
8888
Html.Should().Contain(
89-
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></p>"""
89+
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Special Requirements</a></p>"""
9090
);
9191

9292
[Fact]
@@ -108,7 +108,7 @@ public class LinkReferenceTest(ITestOutputHelper output) : LinkTestBase(output,
108108
public void GeneratesHtml() =>
109109
// language=html
110110
Html.Should().Contain(
111-
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">test</a></p>"""
111+
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">test</a></p>"""
112112
);
113113

114114
[Fact]
@@ -270,10 +270,10 @@ public void GeneratesHtml() =>
270270
Html.ReplaceLineEndings().TrimEnd().Should().Be("""
271271
<p>Links:</p>
272272
<ul>
273-
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
273+
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Special Requirements</a></li>
274274
</ul>
275275
<ul>
276-
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
276+
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Special Requirements</a></li>
277277
</ul>
278278
""".ReplaceLineEndings());
279279

0 commit comments

Comments
 (0)