looking for next Angular version? try ngx-ui-scroll ☞ @@ -86,9 +85,9 @@ _Important!_ The viewport height must be constrained. If the height of the viewp in the datasource. Even if it does not, using the directive this way does not provide any advantages over using ng-repeat, because item template will be always instantiated for every item in the datasource. -_Important!_ There is a Scroll Anchoring feature enforced by Google Chrome (since Chrome 56) which makes scroller behaviour incorrect. +_Important!_ There is a Scroll Anchoring feature enforced by some browsers (e.g Google Chrome since v56) which makes scroller behavior incorrect. The ui-scroll-viewport directive eliminates this effect by disabling the 'overflow-anchor' css-property on its element. -But if the ui-scroll-viewport is not presented in the template, you should take care of this manually. +But if the ui-scroll-viewport is not presented in the template, you should take care of this manually by switching it off on the body/html container. ### Examples @@ -135,6 +134,8 @@ To use it in your angular-app you should add the module (modules) angular.module('application', ['ui.scroll', 'ui.scroll.grid']) ``` +_Note:_ angular-ui-scroll works with AngularJS v1.2.0 and above. + Currently we have 2 regular modules which can be added to the angular-app you are developing: - __ui.scroll__ module which has - [uiScroll directive](#uiscroll-directive) @@ -229,13 +230,7 @@ exactly `count` elements unless it hit eof/bof. * Properties `minIndex` and `maxIndex` - As the scroller receives the items requested by the `get` method, the value of minimum and maximum values of the item index are placed in the `minIndex` and `maxIndex` properties respectively. These values are used to maintain the appearance of the scrollbar. The values of the properties can be internaly changed by the ui-scroll engine in three cases: - * reset both properties in response to a call to the adapter `reload` method; - * increment `minIndex` in response to deleting the topmost element via adapter `applyUpdates` method; - * decrement `maxIndex` in response to deleting anything other than the topmost element via adapter `applyUpdates` method. - - Values of the properties can be assigned programmatically. If the range of the index values is known in advance, assigning them programmatically would improve the usability of the scrollBar. - + If the boundaries of the dataset are known, we may virtualize all the dataset by assigning appropriate values to `minIndex` and `maxIndex` datasource properties. This would improve the usability of the scroll bar: the uiScroll will maintain forward and backward padding elements of the viewport assuming the dataset consists of (maxIndex - minIndex) items. So it will be possible to jump to any position immediately. ### Adapter @@ -249,6 +244,8 @@ Adapter object implements the following properties: * `topVisible`/`bottomVisible` - a read only reference to the item currently in the topmost/bottommost visible position. * `topVisibleElement`/`bottomVisibleElement` - a read only reference to the DOM element currently in the topmost/bottommost visible position. * `topVisibleScope`/`bottomVisibleScope` - a read only reference to the scope created for the item currently in the topmost/bottommost visible position. +* `bufferLength` - a number of items currently in the ui-scroll buffer; equal to a number of DOM elements that are present in visible and invisible parts of the ui-scroll viewport. +* `bufferFirst`/`bufferLast` - a read only reference to the first/last item currently in the ui-scroll buffer. * `disabled` - setting `disabled` to `true` disables scroller's scroll/resize events handlers. This can be useful if you have multiple scrollers within the same scrollViewport and you want to prevent some of them from responding to the events. Adapter object implements the following methods @@ -278,13 +275,13 @@ Adapter object implements the following methods reload(startIndex) - Calling this method reinitializes and reloads the scroller content. `startIndex` is an integer indicating what item index the scroller will use to start the load process. The value of the argument replaces the value provided with the start-index attribute. Calling `reload()` is equivalent to calling `reload` method with current value of the `start-index` attribute. + Calling this method re-initializes and reloads the scroller content. `startIndex` is an integer indicating what item index the scroller will use to start the load process. The value of the argument replaces the value provided with the start-index attribute. Calling `reload()` is equivalent to calling `reload` method with current value of the `start-index` attribute. - _Important!_ `startIndex` should fall within underlying datset boundaries. The scroller will request two batches of items one starting from the `startIndex` and another one preceding the first one (starting from `startIndex - bufferSize`). If both requests come back empty, the scroller will consider the dataset to be empty and will place no further data requests. + _Important!_ `startIndex` should fall within underlying dataset boundaries. The scroller will request two batches of items one starting from the `startIndex` and another one preceding the first one (starting from `startIndex - bufferSize`). If both requests come back empty, the scroller will consider the dataset to be empty and will place no further data requests. * Method `applyUpdates` - applyUpdates(index, newItems) + applyUpdates(index, newItems, options) Replaces the item in the buffer at the given index with the new items. @@ -292,13 +289,18 @@ Adapter object implements the following methods * **index** provides position of the item to be affected in the dataset (not in the buffer). If the item with the given index currently is not in the buffer no updates will be applied. `$index` property of the item $scope can be used to access the index value for a given item * **newItems** is an array of items to replace the affected item. If the array is empty (`[]`) the item will be deleted, otherwise the items in the array replace the item. If the newItem array contains the old item, the old item stays in place. - applyUpdates(updater) + applyUpdates(updater, options) Updates scroller content as determined by the updater function Parameters * **updater** is a function to be applied to every item currently in the buffer. The function will receive 3 parameters: `item`, `scope`, and `element`. Here `item` is the item to be affected, `scope` is the item $scope, and `element` is the html element for the item. The return value of the function should be an array of items. Similarly to the `newItem` parameter (see above), if the array is empty(`[]`), the item is deleted, otherwise the item is replaced by the items in the array. If the return value is not an array, the item remains unaffected, unless some updates were made to the item in the updater function. This can be thought of as in place update. + Options for both signatures, an object with following fields + * **immutableTop** is a boolean flag with `false` default value. This option has an impact on removing/inserting items procedure. If it's `false`, deleting the topmost item will lead to incrementing min index, also inserting new item(s) before the topmost one will lead to decrementing min index. If it's `true`, min index will not be affected, max index will be shifted instead. If it's `true`, no matter which item is going to be removed/inserted, max index will be reduced/increased respectively. + + Let's discuss a little sample. We have `{{$index}}: {{item}}` template and three rows: `1: item1`, `2: item2`, `3: item3`. Then we want to remove the first item. Without `immutableTop` we'll get `2: item2`, `3: item3`. With `immutableTop` we'll get `1: item2`, `2: item3`. The same for inserting, say, `item0` before `item1`. Without `immutableTop` we'll get `0: item0`, `1: item1`, `2: item2`, `3: item3`. With `immutableTop` we'll get `1: item0`, `2: item1`, `3: item2`, `4: item3`. + * Method `append` append(newItems) @@ -310,12 +312,13 @@ Adapter object implements the following methods * Method `prepend` - prepend(newItems) + prepend(newItems, options) - Adds new items before the first item in the buffer. + Adds new items before the first item in the buffer. Works exactly as inserting new item(s) before the topmost one via `applyUpdates` method. Parameters * **newItems** provides an array of items to be prepended. + * **options** the same object as the last argument of `applyUpdates` method; `options.immutableTop` set to `true` will make min index unchangeable, max index will be increased. Otherwise (`options.immutableTop = false`, the default case), min index will be increased. #### Manipulating the scroller content with the adapter methods Adapter methods `applyUpdates`, `append` and `prepend` provide a way to update the scroller content without full reload of the content from the datasource. The updates are performed by changing the items in the scroller internal buffer after they are loaded from the datasource. Items in the buffer can be deleted or replaced with one or more items. @@ -411,7 +414,7 @@ A reference to this object is injected as a property named `gridAdapter`in the s `GridAdapter` object implements the following methods: * Method `getLayout()` - returns an object describing current scrollable grid layout. -* Method `applyLayout(layout)` - restores scrollabel grid layout to the state as defined by the object passed as the parameter +* Method `applyLayout(layout)` - restores scrollable grid layout to the state as defined by the object passed as the parameter * Method `columnFromPoint(x,y)` - if the coordinates belong to a scrollable grid column returns the appropriate ColumnAdapter object. Otherwise, returns `undefined`. `ColumnAdapter` object implements the following methods: @@ -467,7 +470,7 @@ npm run build b) generate compressed and uncompressed versions of the ui-scroll distributive in the public [./dist](https://github.com/angular-ui/ui-scroll/tree/master/dist) folder, c) run tests over minified distributive files. -Pull Rerquest should include source code (./scr) changes, may include tests (./test) changes and may not include public distributive (./dist) changes. +Pull Request should include source code (./scr) changes, may include tests (./test) changes and may not include public distributive (./dist) changes. ------------------- @@ -475,6 +478,32 @@ Pull Rerquest should include source code (./scr) changes, may include tests (./t ## Change log +### v1.9.1 + * Fixed ES5 build. + +### v1.9.0 + * Webpack 5 build. + +### v1.8.2 + * Fixed edge cases when removing items. + +### v1.8.1 + * Removed deprecated bind/unbind methods. + +### v1.8.0 + * Reconsidered scroll event handling. + * Fixed inertia scrolling issues. + +### v1.7.6 + * Added immutableTop option for applyUpdates and prepend Adapter methods. + +### v1.7.5 + * Added bufferFirst, bufferLast, bufferLength read-only properties to the Adapter. + * Fixed reload unsubscribe issue [226](https://github.com/angular-ui/ui-scroll/issues/226). + +### v1.7.4 + * Fixed jqLite/jQuery confrontation. + ### v1.7.3 * Fixed some html-attributes and Adapter.reload argument parsing. @@ -542,7 +571,7 @@ Pull Rerquest should include source code (./scr) changes, may include tests (./t ### v1.3.1 * Changed the logic of viewport scroll/padding recalculation. -* Splitted test specifications. +* Reorganized test specifications. * Updated dev-dependencies (package.json). * Implemented append/prepend methods on the adapter. diff --git a/bower.json b/bower.json index 011c229d..e1e021d9 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angular-ui-scroll", "description": "AngularJS infinite scrolling module", - "version": "1.7.3", + "version": "1.9.1", "main": "./dist/ui-scroll.js", "homepage": "https://github.com/angular-ui/ui-scroll.git", "license": "MIT", @@ -13,6 +13,7 @@ "ui.scroll", "ui-scroll", "angular-ui-scroll", + "virtual", "unlimited", "infinite", "live", @@ -26,12 +27,12 @@ "src", "temp", "test", + ".github", ".gitignore", ".jshintrc", ".npmignore", - ".travis.yml", "Gruntfile.js", "package.json", "webpack.config.js" ] -} +} \ No newline at end of file diff --git a/demo/bufferItems/bufferItems.html b/demo/bufferItems/bufferItems.html new file mode 100644 index 00000000..6b3ac7b5 --- /dev/null +++ b/demo/bufferItems/bufferItems.html @@ -0,0 +1,52 @@ + + + +
+ +{{adapter.bufferFirst}}
+{{adapter.bufferLast}}
+{{adapter.bufferLength}}
+
+<li ui-scroll="item in datasource" adapter="adapter">{{item}}</li>
+ Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: