Window

An Angular service with the following functions:

  • setWindowTitle(title) — Changes the browser window's title. If a product name is specified in bbWindowConfig, then the product name will be appended to the passed title.
  • getScrollbarWidth — Calculates and returns the width of the scrollbar for the current browser.
  • isIosUserAgent — Uses window navigator user agent to determine if current user agent is an iPod, iPad, or iPhone.

Demo

Current browser scrollbar width is: {{windowCtrl.scrollbarWidth}}px
This is not an iOS device

Markup

<div ng-controller="WindowServiceController as windowCtrl">
    <div class="row">
        <div class="col-md-6">
            <label>Change window title</label>
            <input ng-model="windowCtrl.windowTitle" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div>Current browser scrollbar width is: {{windowCtrl.scrollbarWidth}}px</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div>This is <span ng-show="!windowCtrl.isIosUserAgent">not </span>an iOS device</div>
        </div>
    </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function WindowServiceController($scope, bbWindow) {
        var self = this;

        self.windowTitle = '';
        self.scrollbarWidth = null;

        self.scrollbarWidth = bbWindow.getScrollbarWidth();

        self.isIosUserAgent = bbWindow.isIosUserAgent();

        $scope.$watch(function () {
            return self.windowTitle;
        }, function () {
            if (self.windowTitle) {
                bbWindow.setWindowTitle(self.windowTitle);
            }
        });
    }

    WindowServiceController.$inject = ['$scope', 'bbWindow'];

    angular.module('stache')
        .controller('WindowServiceController', WindowServiceController);
}());