TwinSpark API

HTML updates

Directive Description
ts-req Make a request for an HTML
ts-target Replace another part of a page with incoming HTML
ts-req-selector Select only a part of a response
ts-swap Select a strategy for HTML replacement
ts-swap-push "Push" HTML from server to a client
ts-trigger Specify event which triggers the request
ts-req-method Is it GET or POST?
ts-req-strategy How to deal with multiple requests being generated
ts-req-history Change URL after request
ts-data Additional data for request
ts-req-batch Combine multiple requests into a single one


Directive Description
ts-action Run actions
ts-trigger Specify event which triggers actions
ts-req-before Actions to run before request
ts-req-after Actions to run after request


Event Description
ts-ready When HTML is "activated"
ts-trigger Event generated by ts-trigger
ts-req-before Before request
ts-req-after After request
ts-req-error On request errors
ts-pushstate When a new entry is pushed to browser history
ts-replacestate When a browser history entry is replaced
visible When 1% of element appears on screen
invisible When element was visible and now less than 1% of it is
closeby When 1% of element is closer to viewport than half of window height
away Anthonym to closeby
remove When an element is removed (depends on a trigger subscribing)
empty When element becomes childless
notempty When element had hierarchy changes and has children
childrenChange Combination of empty and notempty


Header Description
accept TwinSpark requests are always text/html+partial
ts-url Current page URL
ts-origin Identifier of an element which made request
ts-target Identifier of a target element
ts-swap Override HTML swap strategy
ts-swap-push "Push" some HTML, replace: selector to <= selector from
ts-history New browser history URL
ts-title New page title in case of history push


Configuration attributes can be can set on twinspark script tag:

<script src="/static/twinspark.js" data-timeout="5000">
Attribute Default Description
data-timeout 3000 Timeout for ts-req requests
data-history 20 Limit for IndexedDB page history storage
data-settle class,style,width,height Attributes to settle during non-morph swap
data-active-class ts-active Class for an element which made a request, until it ends
data-insert-class ts-insert Class for a newly inserted elements with an id
data-remove-class ts-remove Class for an element with an id being removed from DOM

JavaScript API

To be done