CableReady
Search…
v4.5.0
Welcome
Installation
Setup
CableReady 101
Working with CableReady
CableReady Everywhere
Leveraging Stimulus
Stream Identifiers
Broadcasting to Resources
Customization
Troubleshooting
Advocating for "Reactive Rails"
Release History
Reference
Methods
Operations
DOM Mutations
Element Property Mutations
DOM Events
Browser Manipulations
Notifications
Powered By GitBook
Browser Manipulations

clear_storage

Removes all key/values pair on the local persistant storage of the user's browser. Defaults to local storage, which is saved across browser sessions. Specify type: 'session' if session storage is desired.
Data stored in either local or session storage is specific to the protocol of the page.
cable_ready["MyChannel"].clear_storage(
cancel: true|false, # [false] - cancel the operation (for use on client)
type: "session" # ["local"] - local storage vs session storage
)

Life-cycle Callback Events

  • cable-ready:before-clear-storage
  • cable-ready:after-clear-storage
Life-cycle events for clear_storage are raised on document.

Reference

go

Load a specific page from the session history. You can use it to move forwards and backwards through the history depending on the value of a parameter.
delta is the position in the history to which you want to move, relative to the current page. A negative value moves backwards, a positive value moves forwards. delta: -1 is equivalent to pressing the browsers "Back" button.
If no value is passed or if delta equals 0, it has the same result as calling location.reload().
cable_ready["MyChannel"].go(
cancel: true|false, # [false] - cancel the operation (for use on client)
delta: Integer # optional integer
)

Life-cycle Callback Events

  • cable-ready:before-go
  • cable-ready:after-go
Life-cycle events for go are raised on window. Add a listener for the popstate event in order to determine when the navigation has completed.

Reference

push_state

Add an entry to the browser's session history stack.
This is similar to setting window.location = "#foo" in that both will also create and activate another history entry associated with the current document. The new URL can be any URL in the same origin as the current URL.
You can associate arbitrary data with your new history entry by passing a Hash to the optional state parameter.
cable_ready["MyChannel"].push_state(
cancel: true|false, # [false] - cancel the operation (for use on client)
url: "/", # required - URL String
title: "Home", # [""] - optional String
state: {} # [{}] - optional Hash
)
Note that push_state never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash.

Life-cycle Callback Events

  • cable-ready:before-push-state
  • cable-ready:after-push-state
Life-cycle events for push_state are raised on window. Add a listener for the popstate event in order to determine when the navigation has completed.

Reference

remove_storage_item

Remove a key/value pair on the local persistant storage of the user's browser. Defaults to local storage, which is saved across browser sessions. Specify type: 'session' if session storage is desired.
Data stored in either local or session storage is specific to the protocol of the page. Integer keys are automatically converted to strings.
cable_ready["MyChannel"].remove_storage_item(
cancel: true|false, # [false] - cancel the operation (for use on client)
key: "string", # required
type: "session" # ["local"] - local storage vs session storage
)

Life-cycle Callback Events

  • cable-ready:before-remove-storage-item
  • cable-ready:after-remove-storage-item
Life-cycle events for remove_storage_item are raised on document.

Reference

replace_state

Modify the current browser history entry. The browser will not load the page specified by the url and indeed, it doesn't actually have to exist.
You can associate arbitrary data with the history entry by passing a Hash to the optional state parameter.
Most of the time, you probably want to use push_state.
cable_ready["MyChannel"].replace_state(
cancel: true|false, # [false] - cancel the operation (for use on client)
url: "/", # required - URL String
title: "Home", # [""] - optional String
state: {} # [{}] - optional Hash
)

Life-cycle Callback Events

  • cable-ready:before-replace-state
  • cable-ready:after-replace-state
Life-cycle events for replace_state are raised on window. Add a listener for the popstate event in order to determine when the navigation has completed.

Reference

scroll_into_view

Scroll the viewport so that the element with the specified anchor (id attribute) is in view.
<div id="i-am-an-anchor">⚓</div>
The default behavior is to instantly jump to the element such that the top of the element is touching the top of the browser viewport.
If you're looking for a more human experience, give behavior: "smooth", block: "center" a try.
cable_ready["MyChannel"].scroll_into_view(
behavior: "string", # ["auto"] - auto or smooth
block: "string", # ["start"] - start, center, end, nearest
cancel: true|false, # [false] - cancel the operation (for use on client)
inline: "string", # ["nearest"] - start, center, end, nearest
selector: "string", # required - string containing a CSS selector or XPath expression
xpath: true|false # [false] - process the selector as an XPath expression
)

Life-cycle Callback Events

  • cable-ready:before-scroll-into-view
  • cable-ready:after-scroll-into-view

Reference

set_cookie

Writes a cookie to the document cookie store.
cable_ready["MyChannel"].set_cookie(
cancel: true|false, # [false] - cancel the operation (for use on client)
cookie: "string" # required - "example=value; path=/; expires=Sat, 07 Mar 2020 16:19:19 GMT"
)
Note that you can only set/update a single cookie at a time using this method.

Life-cycle Callback Events

  • cable-ready:before-set-cookie
  • cable-ready:after-set-cookie
Life-cycle events for set_cookie are raised on document.

Reference

set_focus

Set focus on the specified element, if it can be focused. The focused element is the element which will receive keyboard and similar events by default.
cable_ready["MyChannel"].set_focus(
cancel: true|false, # [false] - cancel the operation (for use on client)
selector: "string", # required - string containing a CSS selector or XPath expression
xpath: true|false # [false] - process the selector as an XPath expression
)

Life-cycle Callback Events

  • cable-ready:before-set-focus
  • cable-ready:after-set-focus

Reference

set_storage_item

Create or update a key/value pair on the local persistant storage of the user's browser. Defaults to local storage, which is saved across browser sessions. Specify type: 'session' if session storage is desired.
Data stored in either local or session storage is specific to the protocol of the page. Integer keys are automatically converted to strings.
cable_ready["MyChannel"].set_storage_item(
cancel: true|false, # [false] - cancel the operation (for use on client)
key: "string", # required
value: "string", # required
type: "session" # ["local"] - local storage vs session storage
)

Life-cycle Callback Events

  • cable-ready:before-set-storage-item
  • cable-ready:after-set-storage-item
Life-cycle events for set_storage_item are raised on document.

Reference

Previous
DOM Events
Next
Notifications
Last modified 1yr ago
Export as PDF
Copy link
Outline
clear_storage
go
push_state
remove_storage_item
replace_state
scroll_into_view
set_cookie
set_focus
set_storage_item