Permalink
Browse files

Revisions to handling of observable notifications at page boundaries

  • Loading branch information...
1 parent bb23488 commit b327630b51d0e9db50d39a0f3cb162c7f065cbe2 @kriszyp committed with Kenneth G. Franqueiro Dec 27, 2013
Showing with 59 additions and 6 deletions.
  1. +44 −3 List.js
  2. +1 −1 OnDemandList.js
  3. +13 −1 test/JsonRest.html
  4. +1 −1 test/data/rest.php
View
@@ -493,7 +493,10 @@ function(kernel, declare, listen, has, miscUtil, TouchScroll, hasClass, put){
// First determine the DOM node that this should be placed before.
if(rows.length){
nextNode = rows[to];
- if(!nextNode){
+ if(nextNode){
+ // Re-retrieve the element in case we are referring to an orphan
+ nextNode = correctElement(nextNode);
+ }else{
nextNode = rows[to - 1];
if(nextNode){
// Make sure to skip connected nodes, so we don't accidentally
@@ -532,12 +535,40 @@ function(kernel, declare, listen, has, miscUtil, TouchScroll, hasClass, put){
}
options.count++;
}
+
+ if(from === 0){
+ overlapRows([1,1]);
+ }
+ else if(from === results.length - 1){
+ overlapRows([0,0]);
+ }
+
from != to && firstRow && self.adjustRowIndices(firstRow);
self._onNotification(rows, object, from, to);
}, true)) - 1;
}
var rowsFragment = document.createDocumentFragment(),
lastRow;
+
+ function overlapRows(sides){
+ // Only perform row overlap in the case of observable results
+ if(observerIndex > -1){
+ for(var i = 0; i < sides.length; i++){
+ var top = sides[i];
+ var lastRow = correctElement(rows[top ? 0 : rows.length-1]);
+ var row = self[top ? "up" : "down"](self.row(lastRow));
+ if(row && row.element != lastRow){
+ var method = top ? "unshift" : "push";
+ results[method](row.data);
+ rows[method](row.element);
+ }
+ }
+ }
+ }
+ function correctElement(row){
+ // if a node has been orphaned, this will retrieve the correct, in-document, element.
+ return self.row(row.id.slice(self.id.length + 5)).element;
+ }
function mapEach(object){
lastRow = self.insertRow(object, rowsFragment, null, start++, options);
@@ -573,7 +604,12 @@ function(kernel, declare, listen, has, miscUtil, TouchScroll, hasClass, put){
if(results.map){
rows = results.map(mapEach, console.error);
if(rows.then){
- return rows.then(whenDone, whenError);
+ results.then(function(resultsArray){
+ results = resultsArray;
+ // overlap rows in the results array when using observable so that we can determine page boundary changes
+ overlapRows([1,1,0,0]);
+ });
+ return rows.then(whenDone);
}
}else{
rows = [];
@@ -582,7 +618,9 @@ function(kernel, declare, listen, has, miscUtil, TouchScroll, hasClass, put){
}
}
- return whenDone(rows);
+ whenDone(rows);
+ overlapRows([1,1,0,0]);
+ return rows;
},
_onNotification: function(rows, object, from, to){
@@ -611,6 +649,9 @@ function(kernel, declare, listen, has, miscUtil, TouchScroll, hasClass, put){
previousRow = row && row.previousSibling;
if(row){// if it existed elsewhere in the DOM, we will remove it, so we can recreate it
+ if(row === beforeNode){
+ beforeNode = (beforeNode.connected || beforeNode).nextSibling;
+ }
this.removeRow(row);
}
row = this.renderRow(object, options);
View
@@ -38,7 +38,7 @@ return declare([List, _StoreMixin], {
// Indicates the number of rows to overlap queries. This helps keep
// continuous data when underlying data changes (and thus pages don't
// exactly align)
- queryRowsOverlap: 1,
+ queryRowsOverlap: 0,
// pagingMethod: String
// Method (from dgrid/util/misc) to use to either throttle or debounce
View
@@ -32,20 +32,24 @@
query = "parent=" + query.parent;
}
return JsonRest.prototype.query.call(this, query, options);
+ },
+ put: function(object){
+ return object;
}
}), Memory()));
testStore.getChildren = function(parent, options){
return testStore.query({parent: parent.id}, options);
};
var columns = [
tree({label:'Name', field:'name', sortable: false}),
- {label:'Id', field:'id', sortable: false},
+ {label:'Id', field:'id', sortable: true},
editor({label:'Comment', field:'comment', sortable: false}, "text"),
editor({label:'Boolean', field:'boo', sortable: false, autoSave: true}, "checkbox")
];
window.grid = new (declare([Grid, Selection, Keyboard]))({
store: testStore,
+ sort: "id",
getBeforePut: false,
columns: columns
}, "grid");
@@ -54,6 +58,13 @@
testStore.remove(i);
}
}
+ addPage = function(){
+ var selectedId = 0;
+ for(var i in grid.selection){
+ selectedId = +i;
+ }
+ testStore.put({name:"new item", id: selectedId + Math.random()});
+ }
});
</script>
@@ -62,6 +73,7 @@
<h2>A basic grid with JsonRest store</h2>
<div id="grid"></div>
<button onclick='deleteSelected()'>Delete Page</div>
+ <button onclick='addPage()'>Add Page</div>
<button onclick='grid.save();'>Save</div>
<button onclick='grid.revert();'>Revert</div>
</body>
View
@@ -30,7 +30,7 @@
if($i != $start){
echo ',';
}
- echo '{"id":"'.$id_prefix.$i.'","name":"Item '.$i.'","comment":"hello"}';
+ echo '{"id":'.$id_prefix.$i.',"name":"Item '.$i.'","comment":"hello"}';
}
echo ']';
?>

0 comments on commit b327630

Please sign in to comment.