mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 22:41:23 +00:00
119 lines
2.8 KiB
HTML
119 lines
2.8 KiB
HTML
<!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> |