re-frame-window-fx

re-frame effect handlers related to browser window.

Installation

Add [district0x/re-frame-window-fx "VERSION"] into your project.clj
Include [district0x.re-frame.window-fx] in your CLJS file

API Overview

• :window/on-resize
• :window/stop-on-resize
• :window/on-focus
• :window/stop-on-focus
• :window/on-blur
• :window/stop-on-blur
• :window/on-hashchange
• :window/stop-on-hashchange
• :window/scroll-to
• :window/set-title
• :window/set-hash

Usage

:window/on-resize

Fires :dispatch when browser window is resized. Can set :debounce-ms for debouncing event, to prevent too frequent firings.
Default :debounce-ms is 166ms.
Dispatched event receives [js/window.innerWidth js/window.innerHeight] as a last arg.

(reg-event-fx
  ::my-event
  (fn []
    {:window/on-resize {:dispatch [::window-resized]
                        :debounce-ms 200
                        ;; :id is optional
                        :id ::my-listener}}))

:window/stop-on-resize

If you passed :id into event handler above, you can stop listening by that :id

(reg-event-fx
  ::my-event
  (fn []
    {:window/stop-on-resize {:id ::my-listener}}))

:window/on-focus

Fires :dispatch when tab/window receives focus

(reg-event-fx
  ::my-event
  (fn []
    {:window/on-focus {:dispatch [::window-focused]
                       ;; :id is optional
                       :id ::my-listener}}))

:window/stop-on-focus

If you passed :id into event handler above, you can stop listening by that :id

:window/on-blur

Fires :dispatch when tab/window was blurred

(reg-event-fx
  ::my-event
  (fn []
    {:window/on-blur {:dispatch [::window-blurred]
                      ;; :id is optional
                      :id ::my-listener}}))

:window/stop-on-blur

If you passed :id into event handler above, you can stop listening by that :id

:window/on-hashchange

Fires :dispatch when location hash was changed

(reg-event-fx
  ::my-event
  (fn []
    {:window/on-hashchange {:dispatch [[::window-hashchanged]
                                       ;; :id is optional
                                       :id ::my-listener]}}))

:window/stop-on-hashchange

If you passed :id into event handler above, you can stop listening by that :id

:window/scroll-to

Scroll window into x y coordinates

(reg-event-fx
  ::my-event
  (fn []
    {:window/scroll-to [100 200]}))

:window/set-title

Change the window title

(reg-event-fx
  ::my-event
  (fn []
    {:window/set-title "New Title"}))

:window.location/set-hash

Change the window url hash ex. mysite.com/#<hash>

(reg-event-fx
  ::my-event
  (fn []
    {:window.location/set-hash "new-hash"}))

Development

Tested on linux and MacOS

Type make to see a list of common commands

Quickstart

make clean-all deps test

Setup

nvm use # optional
make clean-all deps

Testing

For Local Testing

Use

make test

or

make test-headless

To test using CircleCI (Recommended before pull requests)

make test-circleci