blob: 585eca62d81ec9a7ef963d683e3b46e4e4ea41c4 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Head Merge Test</title>
</head>
<body style="padding: 20px; font-family: sans-serif;" hx-ext="head-support">
<script src="../../../src/htmx.js"></script>
<script src="../../../src/ext/head-support.js"></script>
<h1>head-support Extension Testing</h1>
<h2>CSS + Boosting</h2>
<h3>Basic Merge 1 (inline CSS)</h3>
<a href="./basic-css-1.html"
hx-boost="true"
hx-target="this"
hx-push-url="false">
Basic CSS Merge (Should Add Red Border)
</a>
<p id="basic-css-1">
Basic Merge 1
</p>
<h3>Basic Merge 2 (inline CSS)</h3>
<a href="./basic-css-2.html"
hx-boost="true"
hx-target="this"
hx-push-url="false">
Basic CSS Merge (Should Add Blue Border)
</a>
<p id="basic-css-2">
Basic Merge 2
</p>
<h3>Basic Merge 3 (CSS File)</h3>
<button hx-get="./basic-css-3.html">Basic CSS Merge 3 (Should Add Green Border)</button>
<p id="basic-css-3">
Basic Merge 3
</p>
<h2>History</h2>
<button hx-get="./basic-history-1.html" hx-push-url="true">Basic CSS Merge (Should Add Red Border)</button>
<p id="basic-history-1">
Basic History 1
</p>
<h2>Title</h2>
<h2>Title + Boosting</h2>
<a href="./basic-title.html"
hx-boost="true"
hx-target="this"
hx-push-url="false">
Basic Title Merge (Should Set Title to "A New Title")
</a>
<h2>Javascript + Boosting</h2>
<h3>Inline Script</h3>
<a href="./basic-script.html"
hx-boost="true"
hx-target="this"
hx-push-url="false">
Basic Inline Script (Should Alert)
</a>
<h3>Script File</h3>
<a href="reeval-basic-script-2.html"
hx-boost="true"
hx-target="this"
hx-push-url="false">Basic Sourced Script (Should Alert)</a>
<h2>Re-Evaluate + Boosting</h2>
<h3>Inline Script</h3>
<a href="./reeval-script.html"
hx-boost="true"
hx-target="this"
hx-push-url="false">
Basic Inline Script (Should Alert)
</a>
<h3>Script File</h3>
<a href="reeval-script-2.html"
hx-boost="true"
hx-target="this"
hx-push-url="false">Basic Sourced Script (Should Alert)</a>
<h2>Appending</h2>
<h3><code>hx-preserve</code> keeps element in head</h3>
<button hx-get="./preserve-1.html">Adds Preserved Style via hx-preserve</button>
<p id="basic-preserve-1">
Basic Preserve 1
</p>
<h3>Normal GET appends</h3>
<button hx-get="./preserve-2.html">Preserves Current Style via hx-get</button>
<p id="basic-preserve-2">
Basic Preserve 2
</p>
<h3>Script can keep element in head</h3>
<script>
htmx.on("htmx:removingHeadElement", function(evt){
if (evt.detail.headElement && evt.detail.headElement.getAttribute("sample-preserve")) {
evt.preventDefault();
}
})
</script>
<button hx-get="./preserve-3.html">Adds Preserved Style via event</button>
<p id="basic-preserve-3">
Basic Preserve 3
</p>
</body>
|
