TwinSpark API
HTML updates
| Directive | Description |
|---|---|
| Core | |
| 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 |
| Additional | |
| 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-json | As ts-data, but for JSON requests |
| ts-req-batch | Combine multiple requests into a single one |
Actions
| 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 |
Events
| 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 |
Headers
| Header | Description |
|---|---|
| Request | |
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 |
| Response | |
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 |
ts-location | Redirect to target URL |
Config
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 (set to 0 to disable) |
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