Skip to content

Buffer first, next refactoring #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Oct 31, 2017
Merged

Buffer first, next refactoring #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e4e6217
applyUpdate and buffer first/next refactoring
dhilt Oct 22, 2017
4965a4b
adapter spec refactoring
dhilt Oct 22, 2017
151fb92
adapter sync demo refactoring
dhilt Oct 22, 2017
8066241
buffer.first adjustment refactoring
dhilt Oct 23, 2017
385cd57
padding cache "first" edge case fix
dhilt Oct 23, 2017
a1efdfb
Padding cache Array prototype refactoring
dhilt Oct 23, 2017
1381deb
Padding Cache ES6 class refactoring
dhilt Oct 24, 2017
bf8dbd9
Adapter sync demo updates
dhilt Oct 24, 2017
6f870aa
an interim build
dhilt Oct 24, 2017
dd51f6d
Merge branch 'master' into buffer-first-next
dhilt Oct 24, 2017
3c29747
introduce ng-ui-scroll-hide class instead of built-in ng-hide
dhilt Oct 25, 2017
a4b745c
extract processUpdates method
dhilt Oct 25, 2017
7c8659f
interim build
dhilt Oct 25, 2017
8919de5
Merge branch 'master' of github.com:angular-ui/ui-scroll into buffer-…
dhilt Oct 26, 2017
a438a8e
split Adapter.applyUpdates method
dhilt Oct 26, 2017
6286e00
Merge branch 'master' into buffer-first-next
dhilt Oct 26, 2017
b99ee54
Merge branch 'master' into buffer-first-next
dhilt Oct 27, 2017
cd6a5cf
merge fix
dhilt Oct 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 67 additions & 64 deletions demo/adapterSync/adapterSync.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,82 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Adapter sync</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="../../dist/ui-scroll.js"></script>
<script src="adapterSync.js"></script>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<style>
.remove {
float: right;
margin-right: 15px;
cursor: pointer;
}
.remove:hover {
color: #a00;
}
</style>
<meta charset="utf-8">
<title>Adapter sync</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="../../dist/ui-scroll.js"></script>
<script src="adapterSync.js"></script>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<style>
.remove {
float: right;
margin-right: 15px;
cursor: pointer;
}
.remove:hover {
color: #a00;
}
.viewport2 .uid {
font-size: x-small;
}
</style>
</head>
<body ng-controller="mainController" ng-app="application">
<body ng-controller="mainController as mainCtrl" ng-app="application">

<div class="cont cont-global">

<a class="back" href="../index.html">browse other examples</a>
<a class="back" href="../index.html">browse other examples</a>

<h1 class="page-header page-header-exapmle">Adapter: append, prepend and remove sync</h1>
<h1 class="page-header page-header-exapmle">Adapter: append, prepend and remove sync</h1>

<div class="description">
<p>
In this demo we are playing with adding/removing items via adapter append, prepend and applyUpdates methods.
All changes have to be synced and stored on the back end.
For this purpose a special Server factory was introduced to emulate the remote.
Some public methods are implemented by this Server factory:<br/>
<ul>
<li>
<em>appendItem(params)</em> to add one new item (based on params) to the end of the remote data set,
</li>
<li>
<em>prependItem(params)</em> to add one new item (based on params) in the beginning of the remote data
set,
</li>
<li>
<em>removeItemById(id)</em> remove one item (based on id) form the remote data set,
set,
</li>
<li>
<em>request(index, count)</em> just to fetch a bunch of items for the viewport.
</li>
</ul>
The initial data set consists of 90 items and can be extended unlimitedly.
</p>
<p> Follow the sources of the demo! The implementation of the Server factory is not so trivial, it is based on
indexes variations. Also you may see that new items would not be appended (<em>adapter.append()</em>) to the
viewport immediately if the EOF (end of file) is not reached. The same is true for prepend operation
(<em>adapter.prepend()</em>): BOF (begin of file) must be reached, otherwise your new item will be rendered
only after scrolling to the very top... This is important to build proper UI.
</p>
</div>
<div class="description">
<p>
In this demo we are playing with adding/removing items via adapter append, prepend and applyUpdates methods.
All changes made on the front end have to be synced and stored on the back end.
For this purpose a special Server factory was introduced to emulate the remote.
The following public methods are implemented by this Server factory:<br/>
<ul>
<li>
<em>appendItem(params)</em> to add one new item (based on params) to the end of the remote data set,
</li>
<li>
<em>prependItem(params)</em> to add one new item (based on params) to the beginning of the remote data
set,
</li>
<li>
<em>removeItemById(id)</em> remove one item (based on id) form the remote data set,
set,
</li>
<li>
<em>request(index, count)</em> just to fetch a bunch of items for the viewport.
</li>
</ul>
The initial data set consists of 40 items and can be extended unlimitedly.
</p>
<p> Follow the sources of the demo! The implementation of the Server factory is not trivial, it is based on
indexes variations. Also you may see that new items would not be appended (<em>adapter.append()</em>) to the
viewport immediately if the EOF (end of file) is not reached. The same is true for prepend operation
(<em>adapter.prepend()</em>): BOF (begin of file) must be reached, otherwise your new item will be rendered
only after scrolling to the very top... This is important to build proper UI.
</p>
</div>

<div class="actions">
<button ng-click="prepend()">Prepend one item</button>
<button ng-click="append()">Append one item</button>
<!--button ng-click="removeAll()">Clear the viewport</button-->
</div>
<div class="actions">
<button ng-click="mainCtrl.prepend()">Prepend one item</button>
<button ng-click="mainCtrl.append()">Append one item</button>
<!--button ng-click="mainCtrl.removeAll()">Clear the viewport</button-->
</div>

<br/>
<br/>

<ul class="viewport2" ui-scroll-viewport>
<li ui-scroll="item in datasource" adapter="adapter">
<div>
<span>{{item.content}} <span class="uid">({{item.id}})</span></span>
<span class="remove" ng-click="remove(item)">[x]</span>
</div>
</li>
</ul>
<ul class="viewport2" ui-scroll-viewport>
<li ui-scroll="item in mainCtrl.datasource" adapter="mainCtrl.adapter">
<div>
<span>{{$index}}: {{item.content}} <span class="uid">({{item.id}})</span></span>
<span class="remove" ng-click="mainCtrl.remove(item)">[x]</span>
</div>
</li>
</ul>

</div>
</body>
Expand Down
68 changes: 46 additions & 22 deletions demo/adapterSync/adapterSync.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ app.factory('Server', [

data: [],

absIndex: 1,

generateId: function () {
var d = '-';
function S4() {
Expand All @@ -21,11 +23,11 @@ app.factory('Server', [
return (S4() + S4() + d + S4() + d + S4() + d + S4() + d + S4() + S4() + S4());
},

generateItem: function (number) {
generateItem: function (index) {
return {
index: number,
index: index,
id: this.generateId(),
content: 'Item #' + number
content: 'Item #' + this.absIndex++
}
},

Expand Down Expand Up @@ -68,16 +70,14 @@ app.factory('Server', [
},

prependItem: function (params) {
var prependedDataIndex = this.firstIndex-- - 1;
var newItem = this.generateItem(prependedDataIndex);
var newItem = this.generateItem(--this.firstIndex);
newItem.content += params;
this.data.unshift(newItem);
return this.returnDeferredResult(newItem);
},

appendItem: function (params) {
var appendedDataIndex = this.lastIndex++ + 1;
var newItem = this.generateItem(appendedDataIndex);
var newItem = this.generateItem(++this.lastIndex);
newItem.content += params;
this.data.push(newItem);
return this.returnDeferredResult(newItem);
Expand All @@ -88,13 +88,29 @@ app.factory('Server', [
for (var i = 0; i < length; i++) {
if (this.data[i].id === itemId) {
this.data.splice(i, 1);
for (var j = i; j < length - 1; j++) {
this.data[j].index--;
}
this.setIndicies();
return this.returnDeferredResult(true);
}
}
return this.returnDeferredResult(false);
},

setIndicies: function() {
if(!this.data.length) {
this.firstIndex = 1;
this.lastIndex = 1;
return;
}
this.firstIndex = this.data[0].index;
this.lastIndex = this.data[0].index;
for (var i = this.data.length - 1; i >= 0; i--) {
if(this.data[i].index > this.lastIndex) {
this.lastIndex = this.data[i].index;
}
if(this.data[i].index < this.firstIndex) {
this.firstIndex = this.data[i].index;
}
}
}
};

Expand All @@ -109,7 +125,9 @@ app.factory('Server', [
app.controller('mainController', [
'$scope', 'Server', function ($scope, Server) {

$scope.datasource = {
var ctrl = this;

ctrl.datasource = {
get: function (index, count, success) {
console.log('request by index = ' + index + ', count = ' + count);
Server.request(index, count).then(function (result) {
Expand All @@ -121,34 +139,40 @@ app.controller('mainController', [
}
};

$scope.prepend = function () {
$scope.$watch('adapter', (prev, next) => {
console.log('The adapter has been initialized');
});

ctrl.prepend = function () {
Server.prependItem(' ***').then(function (newItem) {
if ($scope.adapter.isBOF()) {
$scope.adapter.prepend([newItem]);
if (ctrl.adapter.isBOF()) {
ctrl.adapter.prepend([newItem]);
}
});
};

$scope.append = function () {
ctrl.append = function () {
Server.appendItem(' ***').then(function (newItem) {
if ($scope.adapter.isEOF()) {
$scope.adapter.append([newItem]);
if (ctrl.adapter.isEOF()) {
ctrl.adapter.append([newItem]);
}
});
};

/*$scope.removeAll = function () {
$scope.adapter.applyUpdates(function (item) {
// todo dhilt : need to implement it properly
ctrl.removeAll = function () {
ctrl.adapter.applyUpdates(function (item) {
if (item.id) {
Server.removeItemById(item.id);
return [];
}
});
};*/
};

$scope.remove = function (itemRemove) {
ctrl.remove = function (itemRemove) {
Server.removeItemById(itemRemove.id).then(function (result) {
if (result) {
$scope.adapter.applyUpdates(function (item) {
ctrl.adapter.applyUpdates(function (item) {
if (item.id === itemRemove.id) {
return [];
}
Expand Down
2 changes: 1 addition & 1 deletion dist/ui-scroll-grid.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/ui-scroll-grid.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/ui-scroll-grid.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/ui-scroll-grid.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading