itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-03 15:55:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Triggers working

Browse Source
This commit is contained in:
Ben Pate 2021-10-25 20:15:56 -06:00
parent a1113ec111
commit dd5b92b46a
3 changed files with 58 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/ext/sse.js
View File

@ -53,7 +53,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
source.onerror = function (err) { source.onerror = function (err) {
api.triggerErrorEvent(parent, "htmx:sseError", {error:err, source:source}); api.triggerErrorEvent(parent, "htmx:sseError", {error:err, source:source});
maybeCloseSSESource(parent); maybeCloseSSESource(api, parent);
}; };
api.getInternalData(parent).sseEventSource = source; api.getInternalData(parent).sseEventSource = source;
@ -79,7 +79,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
// Register the new listener // Register the new listener
api.getInternalData(parent).sseEventListener = listener; api.getInternalData(parent).sseEventListener = listener;
source.addEventListener(sseEventName, listener); source.addEventListener(sseEventName, listener);
}) });
// Add message handlers for every `hx-trigger="sse:*"` attribute // Add message handlers for every `hx-trigger="sse:*"` attribute
queryAttributeOnThisOrChildren(api, parent, "hx-trigger").forEach(function(child) { queryAttributeOnThisOrChildren(api, parent, "hx-trigger").forEach(function(child) {
@ -100,13 +100,13 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
} }
// Trigger events to be handled by the rest of htmx // Trigger events to be handled by the rest of htmx
api.triggerEvent(child, sseEventName, event) htmx.trigger(child, sseEventName, event)
api.triggerEvent(child, "htmx:sseMessage", event) htmx.trigger(child, "htmx:sseMessage", event)
} }
// Register the new listener // Register the new listener
api.getInternalData(parent).sseEventListener = listener; api.getInternalData(parent).sseEventListener = listener;
source.addEventListener(sseEventName, listener); source.addEventListener(sseEventName.slice(4), listener);
}) })
} }
} }

2
src/htmx.js
View File

@ -882,8 +882,6 @@ return (function () {
every.eventFilter = eventFilter; every.eventFilter = eventFilter;
} }
triggerSpecs.push(every); triggerSpecs.push(every);
} else if (trigger.indexOf("sse:") === 0) {
triggerSpecs.push({trigger: 'sse', sseEvent: trigger.substr(4)});
} else { } else {
var triggerSpec = {trigger: trigger}; var triggerSpec = {trigger: trigger};
var eventFilter = maybeGenerateConditional(elt, tokens, "event"); var eventFilter = maybeGenerateConditional(elt, tokens, "event");

53
test/manual/sse-triggers.html Normal file
View File

@ -0,0 +1,53 @@
<html>
<head>
<script src="../../src/htmx.js"></script>
<script src="../../src/ext/sse.js"></script>
<script>
htmx.createEventSource = function(url){
return new EventSource(url, {withCredentials:false})
}
</script>
<style>
*{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
background-color: #eeeeee;
}
.container {
padding: 10px;
border: solid 1px gray;
margin-bottom: 20px;
background-color:white;
}
.bold {
font-weight:bold;
}
</style>
</head>
<body>
<div id="page" hx-ext="sse" sse-url="http://localhost/posts.html?types=event1%2cevent2%2cevent3%2cevent4">
<h3>Multiple Listeners. message only</h3>
<div id="first" class="container" hx-get="http://localhost/page/random" hx-trigger="sse:event1">Waiting for Posts in Event1 channel...</div>
<div class="container" hx-get="http://localhost/page/random" hx-trigger="sse:event2">Waiting for Posts in Event2 channel...</div>
<div class="container" hx-get="http://localhost/page/random" hx-trigger="sse:event3">Waiting for Posts in Event3 channel...</div>
<div class="container" hx-get="http://localhost/page/random" hx-trigger="sse:event4">Waiting for Posts in Event4 channel...</div>
</div>
</body>
<!--script>
setInterval(function() {
htmx.trigger("#first", "sse:event1")
/*
var e = new Event("event1")
var id = document.getElementById("first")
id.dispatchEvent(e)
console.log("SENT ***************************",id, e)
*/
}, 500)
</script-->
</html>