Noosphere Possibilities Maximized

npm

Join us for the "JavaScript Supply Chain Security" tech talk, presented by VP of Security, Adam Baldwin. 6/20 at 10am PT.Sign up here »

angular-window-events

1.1.6 • Public • Published

angular-window-events

npm version Build Status js-standard-style

Easy window event handling! Support focus, blur, show, and hide.

  • Support for $broadcasting of events.
  • A windowState service for tracking state and adding event handlers.
  • Support for show and hide for browsers that support the W3C Page Visibility spec.
  • Support for IE9 and up. IE10 if you want show and hide support.

Usage Example

angular
  .module('myApp', [
    'window-events'
  ])
 
  .controller('MyCtrl', function ($scope, windowState) {
    if (windowState.isShowing) alert('Hello!')
 
    var deregisterHide = windowState.on('hide', function (event, eventType) {
      alert('No, please look at me!')
    })
 
    windowState.on('show', function (event, eventType) {
      alert('Oh, you left? I had not noticed.')
      deregisterHide()
    })
 
    $scope.$on('windowBlur', function (event, eventType) {
      alert('Pay attention; I need your focus.')
    })
  })

Quick Guide

Installation

$ npm install angular-window-events

Or download from master/release

Event Handling

windowState Service

Methods
.controller('myCtrl', function (windowState) {
  function eventHandler (event, eventType) {
    // Do things
  }
 
  windowState.on('focus', eventHandler)
  // Returns deregistration function. Calling it is the same as...
  windowState.off('focus', eventHandler)
  // Or, to remove all handlers for an eventType...
  windowState.off('focus')
 
  // Multiple event types can also be passed at once
  windowState.on('blur focus hide show', eventHandler)
  // As with the `off` method
  windowState.off('blur focus hide show', eventHandler)
})
Properties
windowState.hasVisibilitySupport // => boolean
windowState.isShowing // => boolean
windowState.isHidden // => boolean
windowState.isFocused // => boolean
windowState.isBlurred // => boolean

$scope.$on

You can also use the $scope.$on method to attach event handlers. When using $scope.$on, the window events are broadcast under the following names:

  • windowBlur
  • windowFocus
  • windowHide
  • windowShow
$scope.$on('windowHide', function (event, eventType) {
  // Do things
})

install

npm i angular-window-events

Downloadsweekly downloads

84

version

1.1.6

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability