{"id":15696951,"url":"https://github.com/zkat/bacon-browser","last_synced_at":"2026-03-08T21:03:37.197Z","repository":{"id":58233395,"uuid":"20324910","full_name":"zkat/bacon-browser","owner":"zkat","description":"Utility library for higher-level, declarative interaction with various bits of browser-level events and features.","archived":false,"fork":false,"pushed_at":"2015-01-13T09:09:01.000Z","size":1135,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T18:54:49.415Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zkat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-30T09:46:52.000Z","updated_at":"2015-02-06T11:55:54.000Z","dependencies_parsed_at":"2022-08-30T22:31:32.276Z","dependency_job_id":null,"html_url":"https://github.com/zkat/bacon-browser","commit_stats":null,"previous_names":["sykopomp/bacon-browser"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkat%2Fbacon-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkat%2Fbacon-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkat%2Fbacon-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkat%2Fbacon-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkat","download_url":"https://codeload.github.com/zkat/bacon-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253162313,"owners_count":21863889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T19:10:32.745Z","updated_at":"2025-12-12T03:02:05.652Z","avatar_url":"https://github.com/zkat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bacon-browser\n\n`bacon-browser` is\n[hosted at Github](http://github.com/zkat/bacon-browser). `bacon-browser` is\na public domain work, dedicated using\n[CC0 1.0](https://creativecommons.org/publicdomain/zero/1.0/). Feel free to do\nwhatever you want with it.\n\n# Quickstart\n\n### Install\n\n`$ npm install bacon-browser`\nor\n`$ bower install bacon-browser`\n\n### Example\n\n#### Bacon.Browser.Window\n\n```javascript\nvar Window = Bacon.Browser.Window;\n\nvar pageState = Bacon.combineTemplate({\n  location: Window.location(),\n  state: Window.state()\n})\n\npageState.log(\"page state:\");\n\nhistory.pushState({pageId: 1}, null, \"/pagse/1\");\nhistory.replaceState({pageId: 1}, null, \"/pages/1\");\nhistory.back();\nhistory.forward();\n```\n\n```javascript\nvar display = $(\"\u003cdiv\u003e\").appendTo(\"body\");\nWindow.dimensions().onValue(function(dims) {\n  display.text(\"window width: \" + dims.width +\n               \" window height: \" + dims.height);\n})\n```\n\n#### Bacon.Browser.Mouse\n\n```javascript\nvar Mouse = Bacon.Browser.Mouse;\n\n// Just some jQuery code to create a 100pxx100px pink box with position: fixed\nvar box = $(\"\u003cdiv\u003e\").appendTo(\"body\");\nbox.css({\n  \"background-color\": \"hotpink\",\n  \"height\": \"100px\",\n  \"width\": \"100px\",\n  \"position\": \"fixed\"\n});\n\n// Mouse.isHeld(target) is a property that is true while the target is\n// \"grabbed\". This is different from isDown(target) because it's true even if the\n// mouse leaves the area of the target. This is useful for drag drop behaviors\n// where the target might not be able to follow the mouse past a certain point, if\n// at all.\nvar boxIsHeld = Mouse.isHeld(box);\nboxIsHeld.onValue(function(isHeld) {\n  if (isHeld) {\n    // Mouse.deltas() returns {x: Int, y: Int} objects for every mousemove which\n    // represent the number of pixels in those axes that the mouse has moved since\n    // the last mousemove.\n    Mouse.deltas()\n    // and we only use this stream until the box is no longer being held.\n    .takeWhile(boxIsHeld)\n    // Finally we set the css position based on the deltas.\n    .onValue(function(delta) {\n      var pos = box.position();\n      box.css({\n        left: pos.left + delta.x,\n        top: pos.top + delta.y\n      });\n    });\n  }\n});\n\n```\n\n# Introduction\n\n`bacon-browser` is a collection of browser-related `Bacon.Observable`s for use\nwith [Bacon.js](https://github.com/baconjs/bacon.js). It provides a variety of\nuseful utilities for commonly-performed tasks, such as checking whether a DOM\nelevent is being \"held\" with a mouse click (for drag and drop), properties that\nrepresent the `window` dimensions (instead of having to hook into\n`window.onresize` yourself), hooking into browser `animationFrames`, and many\nmore.\n\n`bacon-browser` does not provide pre-made event streams for standard DOM events\n-- it is a (usually small) wrapper on top of many of them providing\nhigher-level, FRPish interaction. Use `jQuery#asEventStream`, provided by\n`Bacon` itself, for that.\n\n# Documentation\n\n`bacon-browser` plugs into the `Bacon` object, regardless of whether it's\nincluded through CommonJS, AMD, or as a global variable. It enriches the object\nwith a new `Browser` module, with several other modules listed below it.\n\nAll exported values under every modules are functions that return either\n`EventStream` or `Property` objects. While you should be able to treat all of\nthem as if new streams or properties were created, it is not allowed to\nside-effect the return values of these functions, as they may be (and often are)\ncached.\n\n## Bacon.Browser.Window\n\n### EventStream\n\n#### `statechanged()`\n\nSpecial `EventStream` that fires whenever the current history state is set,\nwhether from `history.pushState`, `history.replaceState`, or by anything that\ntriggers `window.onpopstate`.\n\n#### `animationFrames()`\n\nEvent stream that fires whenever a browser animation frame is available. The\nevent value is a `DOMHighResTimeStamp` representing the time at which the frame\nbecame ready (which may be noticeable earlier than when the event is actually\ncaptured).\n\n### Property\n\n#### `location()`\n\nThe latest value of `window.location`. Updates whenever the URL changes either\nfrom a `hashchanged` or using the `history` API, if available.\n\n#### `hash()`\n\nThe latest value of `window.location.hash`. Updates whenever the URL changes\neither from a `hashchanged` or using the `history` API, if available.\n\n#### `state()`\n\nThe current `history` state. Updates whenever `history.pushState` or\n`history.replaceState` are called, or when anything triggers\n`window.onpopstate`.\n\n#### `dimensions()`\n\nThe current `window` outer dimensions, in pixels.\n\n#### `height()`\n\nThe current window height.\n\n#### `width()`\n\nThe current window width.\n\n### `scroll([target=document])`\n\nThe current scroll position for `target`, in the form of an object with `x` and\n`y` properties.\n\n### `scrollX([target=document])`\n\nThe horizontal scroll position for `target`.\n\n### `scrollY([target=document])`\n\nThe vertical scroll position for `target`.\n\n## Bacon.Browser.Mouse\n\n### EventStream\n\n#### `hover([target=document])`\n\nCreates an event stream that returns a boolean whenever the mouse enters or\nleaves the target.\n\n#### `clicks([target=document [, useOffset=false]])`\n\nCreates an `EventStream` of coordinates where clicks have occurred. If the\n`useOffset` argument is given, the `click` events' `offsetX/offsetY` values are\nused, otherwise `pageX/pageY` are given.\n\n#### `deltas([target=document])`\n\nCreates an EventStream of mouse movement deltas, based on the preceding\nmousemove. The stream values represent the pixel x/y offsets.\n\n### Property\n\n#### `hovering([target=document])`\n\n`true` if the mouse is currently hovering over `target`, otherwise `false`. This\nis simply the `Property` version of `Mouse.hover()`.\n\n#### `position([target=document [, useOffset=false]])`\n\nThe current mouse position as `{x: Int, y: Int}`. If the `useOffset` argument is\ngiven, the `mousemove` events' `offsetX/offsetY` values are used. Otherwise\n`pageX/pageY` are given.\n\n#### `isUp([target=document])`\n\n`true` if the mouse is currently up, otherwise `false`. If `target` is given,\nreturns `true` only when the mouse is hovering over `target` without being held\ndown.\n\n#### `isDown([target=document])`\n\n`true` if the mouse is currently down. If `target` is given, returns `true` only\nwhen the mouse is hovering over `target` while being held down.\n\n#### `isHeld([target=document])`\n\n`true` if the target is being \"held\" -- meaning, if the mouse was pressed on it,\nand it hasn't been released. The difference between this property and the one\ncreated by `Mouse.isDown()` is that `isDown()` will be `false` if the mouse\nleaves the `target`.\n\nThis is usually the function you want for drag-and-drop behaviors.\n\n## Bacon.Browser.Keyboard\n\n### EventStream\n\n#### `keyCodes([target=document [, filter [, useKeyup]]])`\n\nStream of `keydownEvent.keyCode`s. This is intended for handling key input meant\nfor something other than text processing. (detecting `escape`, arrow keys, etc.)\nThe `keyCode` values are normalized by `jQuery` for better cross-browser support.\n\nThe `filter` argument will be used to filter which `keyCode`s will actually\ntrigger the event. `filter` can be one of an integer matching the `keyCode`, an\narray of integers of the possible `keyCode`s, or a function which will receive\nthe `keyCode` as an argument and accept it into the stream if a truthy value is\nreturned.\n\nIf `useKeyup` is truthy, `keyCodes()` will only fire on the `keyup` event,\ninstead of the default `keydown`.\n\n### Property\n\n#### `isUp([target=document [, filter]])`\n\n`true` if a key is currently up and `target` is focused. If `filter` is\nprovided, the property will toggle only when `filter` matches the event\nkeyCode. See `Keyboard.keyCodes()` for information on `filter`.\n\n#### `isDown([target=document [, filter]])`\n\n`true` if a key is currently down and `target` is focused. If `filter` is\nprovided, the property will toggle only when `filter` matches the event\nkeyCode. See `Keyboard.keyCodes()` for information on `filter`.\n\n#### `isHeld([target=document [, filter]])`\n\nAlias for `Keyboard.isDown()`.\n\n#### `held([target=document [, filter]])`\n\nAn array of the `keyCode`s currently held down, if `target` is in focus. If\n`filter` is provided, the property will toggle only when `filter` matches the\nevent `keyCode`. See `Keyboard.keyCodes()` for information on `filter`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkat%2Fbacon-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkat%2Fbacon-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkat%2Fbacon-browser/lists"}