Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,user-scalable=no">
  <title>Mass autocomplete benchmark</title>
</head>
<body ng-app='app'>
  <div ng-controller="mainCtrl" class="container main">
    <div class="benchmark-header">
      <h1> UI-Typehead </h1> 
      <p>
        Watch count is <span class="measure"> {{ getWatchCount() }} </span>
      </p>
      <p>
        Total Digest time <span class="measure" id="total-digest-time"></span> ms
      </p>
    </div>
    <div class="matrix">
      <input ng-repeat="cell in dirty.states track by $index"
             ng-model=cell
             typeahead="state for state in states | filter:$viewValue | limitTo:8"
             typeahead-append-to-body="false"
             class="matrix-cell" /> 
      </div>
    </span>
    
    <h3> Digest cycles </h3>
    <ul id="timing-list">
    </ul>
    
</body>
</html>
 
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400;500);
​
@matrix-border: #ddd;
​
body { 
  font-family : Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size : 13px;
  padding : 0;
  margin : 0;
}
​
.dropdown-menu { 
  position: absolute;
  min-width: 200px;
  background-color: white;
  list-style: none;
  border: 1px solid @matrix-border;
  margin: 0;
  padding : 0;
  li { 
    a {
      display: block;
      padding : 5px 10px;
      border-bottom : 1px dashed lighten(@matrix-border,5%);
    }
    &.active a { 
      background-color : lightblue;
    }
  }
}
​
.benchmark-header { 
  background-color : #333;
  color : white;
  padding : 10px;
  box-shadow : 0px 2px 3px rgba(0,0,0,0.3);
  .measure { 
    font-size : 150%;
    color : gold;
  }
}
.matrix {
  display: inline-block;
  border-color : @matrix-border;
  border-style : solid;
  border-width : 1px 0 0 1px;
  .matrix-cell { 
    border-style : solid; 
    border-width : 0 1px 1px 0;
    border-color : @matrix-border;
    max-width : 50px;
    font-size : 13px;
    padding : 3px;
    background-color : white;
  }
}
 
angular.module('app',['ui.bootstrap'])
.factory('watchCounter', function() { 
  return {
    // Ugly non angularish hack but does the trick
    getWatchCount : function () {
      var total = 0;
      Array.prototype.slice.call(
        document.getElementsByClassName('ng-scope')
      ).concat(
        Array.prototype.slice.call(
          document.getElementsByClassName('ng-isolate-scope')
        )
      )
      .forEach(function(elm) { 
        var scope = angular.element(elm).scope();
        total += scope.$$watchers ? scope.$$watchers.length : 0;
      });
      return total;
    }
  };
})
​
.run(['$rootScope', function($rootScope) {  
  var $oldDigest = $rootScope.$digest;
  var timing_list = document.getElementById("timing-list");
  var total_digest_time = 0;
  var total_digest_time_elment = document.getElementById("total-digest-time");
  var $newDigest = function() {
    var t1 = performance.now();
    $oldDigest.apply($rootScope);
    var duration = Math.round((performance.now() - t1) * 100) / 100;
    total_digest_time += duration;
    total_digest_time_elment.innerHTML = Math.round(total_digest_time * 100) / 100;
    li = document.createElement('li');
    li.innerHTML = duration + 'ms';
    timing_list.insertBefore(li,timing_list.childNodes[0]);
  };
  $rootScope.$digest = $newDigest;
}])
​
.controller('mainCtrl', function($scope, $timeout, watchCounter) { 
  $scope.getWatchCount = watchCounter.getWatchCount;
  
  $scope.dirty = {};
  $scope.dirty.states = Array.apply(null, Array(100));
  
  $scope.states = [
      'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado',
      'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho',
      'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
      'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
      'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
      'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio',
      'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina',
      'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia',
      'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x