count registered instances

Author: dhilt

demo/multipleReloadTest/multipleReload.html

@@ -4,7 +4,7 @@
 	<meta charset="utf-8">
 	<title>Multiple reload test</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
-	<script src="../../src/ui-scroll.js"></script>
+	<script src="../../dist/ui-scroll.js"></script>
 	<script src="multipleReload.js"></script>
 	<link rel="stylesheet" href="../css/style.css" type="text/css"/>
 </head>
@@ -17,12 +17,12 @@
 		<h1 class="page-header page-header-exapmle">Multiple reload test</h1>
 
 		<div class="actions">
-			<button ng-click="doSingleReload()"> Do single reload</button>
+			<button ng-click="show = !show"> Do single reload</button>
 			<button ng-click="doMultipleReload()"> Do multiple reload</button>
 			Loading: {{adapter.isLoading}}
 		</div>
 
-		<div class="viewport" id="viewport-scopeDatasource" ui-scroll-viewport>
+		<div class="viewport" id="viewport-scopeDatasource" ui-scroll-viewport ng-if="show">
 			<div class="item" ui-scroll="item in datasource" adapter="adapter">{{item}}</div>
 		</div>
 

src/modules/elementRoutines.js

@@ -1,6 +1,14 @@
 const hideClassToken = 'ng-ui-scroll-hide';
 
-function addCSSRule(sheet, selector, rules, index) {
+function addCSSRule(sheet, rules, _index) {
+  const selector = '.' + hideClassToken;
+  let index;
+  try {
+    index = sheet.cssRules.length;
+    index = _index < index && _index >= 0 ? _index : index;
+  } catch (err) {
+    index = 0;
+  }
   if('insertRule' in sheet) {
     sheet.insertRule(selector + '{' + rules + '}', index);
   }
@@ -11,11 +19,13 @@ function addCSSRule(sheet, selector, rules, index) {
 
 export default class ElementRoutines {
 
-  constructor($injector, $q) {
+  constructor($injector, $q, uiScrollService) {
     this.$animate = ($injector.has && $injector.has('$animate')) ? $injector.get('$animate') : null;
     this.isAngularVersionLessThen1_3 = angular.version.major === 1 && angular.version.minor < 3;
     this.$q = $q;
-    addCSSRule(document.styleSheets[0], '.' + hideClassToken, 'display: none');
+    if (uiScrollService.count() === 1) {
+      addCSSRule(document.styleSheets[0], 'display: none'); 
+    }
   }
 
   hideElement(wrapper) {

src/ui-scroll.js

@@ -6,6 +6,11 @@ import Adapter from './modules/adapter.js';
 
 angular.module('ui.scroll', [])
 
+  .service('uiScrollService', function () {
+    let instances = 0;
+    this.register = () => instances++;
+    this.count = () => instances;
+  })
   .constant('JQLiteExtras', JQLiteExtras)
   .run(['JQLiteExtras', (JQLiteExtras) =>
     !window.jQuery ? (new JQLiteExtras()).registerFor(angular.element) : null
@@ -42,7 +47,8 @@ angular.module('ui.scroll', [])
     '$interval',
     '$q',
     '$parse',
-    function (console, $injector, $rootScope, $timeout, $interval, $q, $parse) {
+    'uiScrollService',
+    function (console, $injector, $rootScope, $timeout, $interval, $q, $parse, uiScrollService) {
 
       return {
         require: ['?^uiScrollViewport'],
@@ -59,6 +65,8 @@ angular.module('ui.scroll', [])
           throw new Error('Expected uiScroll in form of \'_item_ in _datasource_\' but got \'' + $attr.uiScroll + '\'');
         }
 
+        uiScrollService.register();
+
         function parseNumericAttr(value, defaultValue) {
           const result = $parse(value)($scope);
           return isNaN(result) ? defaultValue : result;
@@ -81,7 +89,7 @@ angular.module('ui.scroll', [])
         let ridActual = 0; // current data revision id
         let pending = [];
 
-        const elementRoutines = new ElementRoutines($injector, $q);
+        const elementRoutines = new ElementRoutines($injector, $q, uiScrollService);
         const buffer = new ScrollBuffer(elementRoutines, bufferSize, startIndex);
         const viewport = new Viewport(elementRoutines, buffer, element, viewportController, $rootScope, padding);
         const adapter = new Adapter($scope, $parse, $attr, viewport, buffer, doAdjust, reload);