You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@myfaces.apache.org by GitBox <gi...@apache.org> on 2020/03/04 11:43:42 UTC

[GitHub] [myfaces-tobago] lofwyr14 opened a new pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

lofwyr14 opened a new pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28
 
 
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [myfaces-tobago] henningn merged pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

Posted by GitBox <gi...@apache.org>.
henningn merged pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28
 
 
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [myfaces-tobago] henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

Posted by GitBox <gi...@apache.org>.
henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28#discussion_r387646316
 
 

 ##########
 File path: tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-sheet.js
 ##########
 @@ -638,12 +840,7 @@ Tobago.Sheet.selectRange = function($sheet, $rows, first, last, selectDeselected
 };
 
 Tobago.Sheet.getDataIndex = function(sheet, row) {
-  var rowIndex = row.data("tobago-row-index");
-  if (rowIndex) {
-    return +rowIndex;
-  } else {
-    return row.index() + sheet.data("tobago-first");
-  }
+  return row.data("tobago-row-index")
 
 Review comment:
   missing ';'

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [myfaces-tobago] henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

Posted by GitBox <gi...@apache.org>.
henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28#discussion_r387645447
 
 

 ##########
 File path: tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-sheet.js
 ##########
 @@ -426,7 +494,69 @@ Tobago.Sheet.setup2 = function (sheets) {
     sheet.find(".tobago-sheet-cell > input.tobago-sheet-columnSelector").click(function(event) {event.preventDefault()});
   });
 
-    // init reload
+  // lazy load by scrolling
+  jQuery(sheets).each(function () {
+    var $sheet = jQuery(this);
+    var lazy = $sheet.data("tobago-lazy");
+
+    function getTemplate(height, columns, rowIndex) {
+      var tr = document.createElement("tr");
+      tr.dataset.tobagoRowIndex = rowIndex;
+      tr.classList.add("tobago-sheet-row");
+      tr.setAttribute("dummy", "dummy");
+      tr.style.height = height + "px";
+      var td = document.createElement("td");
+      td.classList.add("tobago-sheet-cell");
+      td.colSpan = columns;
+      tr.appendChild(td);
+      return tr;
+    }
+
+    console.time("lazy");
+    if (lazy) {
+      // prepare the sheet with some auto-created (empty) rows
+      var rows = $sheet.data("tobago-rows");
+      var rowCount = $sheet.data("tobago-row-count");
+      var $sheetBody = $sheet.find(".tobago-sheet-body");
+      var $tbody = $sheetBody.find("tbody");
+      var columns = $tbody.find("tr:first").find("td").length;
+      var height = $tbody.height() / rows;
+      var pointer = $tbody.get(0).rows[0]; // points current row
+      console.time("lazy2");
+      for (var i = 0; i < rowCount; i++) {
+        if (pointer) {
+          var rowIndex = Number(pointer.dataset.tobagoRowIndex);
+          if (i < rowIndex) {
+            var template = getTemplate(height, columns, i);
+            pointer.insertAdjacentElement("beforebegin", template);
+          } else if (i === rowIndex) {
+            pointer = pointer.nextElementSibling;
+          } else {
+            template = getTemplate(height, columns, i);
+            pointer.insertAdjacentElement("afterend", template);
+            pointer = template;
+          }
+        } else {
+          template = getTemplate(height, columns, i);
+          $tbody.get(0).insertAdjacentElement("beforeend", template);
+          pointer = template;
+        }
+      }
+      console.timeEnd("lazy2");
+
+      $sheetBody.bind("scroll", function () {
+        Tobago.Sheet.lazyCheck($sheet);
+      });
+
+      // initial
+      Tobago.Sheet.lazyCheck($sheet);
+
+      $sheet.data("tobago-lazy-initialized", true);
+    }
+    console.timeEnd("lazy");
 
 Review comment:
   dev_only missing

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [myfaces-tobago] henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

Posted by GitBox <gi...@apache.org>.
henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28#discussion_r387645341
 
 

 ##########
 File path: tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-sheet.js
 ##########
 @@ -426,7 +494,69 @@ Tobago.Sheet.setup2 = function (sheets) {
     sheet.find(".tobago-sheet-cell > input.tobago-sheet-columnSelector").click(function(event) {event.preventDefault()});
   });
 
-    // init reload
+  // lazy load by scrolling
+  jQuery(sheets).each(function () {
+    var $sheet = jQuery(this);
+    var lazy = $sheet.data("tobago-lazy");
+
+    function getTemplate(height, columns, rowIndex) {
+      var tr = document.createElement("tr");
+      tr.dataset.tobagoRowIndex = rowIndex;
+      tr.classList.add("tobago-sheet-row");
+      tr.setAttribute("dummy", "dummy");
+      tr.style.height = height + "px";
+      var td = document.createElement("td");
+      td.classList.add("tobago-sheet-cell");
+      td.colSpan = columns;
+      tr.appendChild(td);
+      return tr;
+    }
+
+    console.time("lazy");
+    if (lazy) {
+      // prepare the sheet with some auto-created (empty) rows
+      var rows = $sheet.data("tobago-rows");
+      var rowCount = $sheet.data("tobago-row-count");
+      var $sheetBody = $sheet.find(".tobago-sheet-body");
+      var $tbody = $sheetBody.find("tbody");
+      var columns = $tbody.find("tr:first").find("td").length;
+      var height = $tbody.height() / rows;
+      var pointer = $tbody.get(0).rows[0]; // points current row
+      console.time("lazy2");
+      for (var i = 0; i < rowCount; i++) {
+        if (pointer) {
+          var rowIndex = Number(pointer.dataset.tobagoRowIndex);
+          if (i < rowIndex) {
+            var template = getTemplate(height, columns, i);
+            pointer.insertAdjacentElement("beforebegin", template);
+          } else if (i === rowIndex) {
+            pointer = pointer.nextElementSibling;
+          } else {
+            template = getTemplate(height, columns, i);
+            pointer.insertAdjacentElement("afterend", template);
+            pointer = template;
+          }
+        } else {
+          template = getTemplate(height, columns, i);
+          $tbody.get(0).insertAdjacentElement("beforeend", template);
+          pointer = template;
+        }
+      }
+      console.timeEnd("lazy2");
 
 Review comment:
   dev_only missing

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [myfaces-tobago] henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

Posted by GitBox <gi...@apache.org>.
henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28#discussion_r387643790
 
 

 ##########
 File path: tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-sheet.js
 ##########
 @@ -426,7 +494,69 @@ Tobago.Sheet.setup2 = function (sheets) {
     sheet.find(".tobago-sheet-cell > input.tobago-sheet-columnSelector").click(function(event) {event.preventDefault()});
   });
 
-    // init reload
+  // lazy load by scrolling
+  jQuery(sheets).each(function () {
+    var $sheet = jQuery(this);
+    var lazy = $sheet.data("tobago-lazy");
+
+    function getTemplate(height, columns, rowIndex) {
+      var tr = document.createElement("tr");
+      tr.dataset.tobagoRowIndex = rowIndex;
+      tr.classList.add("tobago-sheet-row");
+      tr.setAttribute("dummy", "dummy");
+      tr.style.height = height + "px";
+      var td = document.createElement("td");
+      td.classList.add("tobago-sheet-cell");
+      td.colSpan = columns;
+      tr.appendChild(td);
+      return tr;
+    }
+
+    console.time("lazy");
 
 Review comment:
   dev_only missing

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [myfaces-tobago] henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

Posted by GitBox <gi...@apache.org>.
henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28#discussion_r387645232
 
 

 ##########
 File path: tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-sheet.js
 ##########
 @@ -426,7 +494,69 @@ Tobago.Sheet.setup2 = function (sheets) {
     sheet.find(".tobago-sheet-cell > input.tobago-sheet-columnSelector").click(function(event) {event.preventDefault()});
   });
 
-    // init reload
+  // lazy load by scrolling
+  jQuery(sheets).each(function () {
+    var $sheet = jQuery(this);
+    var lazy = $sheet.data("tobago-lazy");
+
+    function getTemplate(height, columns, rowIndex) {
+      var tr = document.createElement("tr");
+      tr.dataset.tobagoRowIndex = rowIndex;
+      tr.classList.add("tobago-sheet-row");
+      tr.setAttribute("dummy", "dummy");
+      tr.style.height = height + "px";
+      var td = document.createElement("td");
+      td.classList.add("tobago-sheet-cell");
+      td.colSpan = columns;
+      tr.appendChild(td);
+      return tr;
+    }
+
+    console.time("lazy");
+    if (lazy) {
+      // prepare the sheet with some auto-created (empty) rows
+      var rows = $sheet.data("tobago-rows");
+      var rowCount = $sheet.data("tobago-row-count");
+      var $sheetBody = $sheet.find(".tobago-sheet-body");
+      var $tbody = $sheetBody.find("tbody");
+      var columns = $tbody.find("tr:first").find("td").length;
+      var height = $tbody.height() / rows;
+      var pointer = $tbody.get(0).rows[0]; // points current row
+      console.time("lazy2");
 
 Review comment:
   dev_only missing

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [myfaces-tobago] lofwyr14 commented on issue #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

Posted by GitBox <gi...@apache.org>.
lofwyr14 commented on issue #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28#issuecomment-594508193
 
 
   fixed suggestions from @henningn  

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [myfaces-tobago] henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events

Posted by GitBox <gi...@apache.org>.
henningn commented on a change in pull request #28: TOBAGO-2021: Sheet should be able to lazy load rows by scroll events
URL: https://github.com/apache/myfaces-tobago/pull/28#discussion_r387644714
 
 

 ##########
 File path: tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-sheet.js
 ##########
 @@ -90,24 +93,89 @@ Tobago.Sheet.prototype.reloadWithAction = function(source, action) {
     console.debug("reload sheet with action '" + action + "'"); // @DEV_ONLY
   var executeIds = this.id;
   var renderIds = this.id;
-//  if (this.behaviorCommands && this.behaviorCommands.reload) {
-//    if (this.behaviorCommands.reload.execute) {
-//      executeIds +=  " " + behaviorCommands.reload.execute;
-//    }
-//    if (this.behaviorCommands.reload.render) {
-//      renderIds +=  " " + this.behaviorCommands.reload.render;
-//    }
-//  }
+  var lazy = jQuery(Tobago.Utils.escapeClientId(this.id)).data("tobago-lazy");
+
   jsf.ajax.request(
       action,
       null,
       {
         "javax.faces.behavior.event": "reload",
         execute: executeIds,
-        render: renderIds
+        render: renderIds,
+        onevent: lazy ? Tobago.Sheet.lazyResponse : undefined,
+        onerror: lazy ? Tobago.Sheet.lazyError: undefined
       });
 };
 
+Tobago.Sheet.lazyResponse = function(event) {
+  if (event.status === "complete") {
+    var updates = event.responseXML.querySelectorAll("update");
+    for (var i = 0; i < updates.length; i++) {
+      var update = updates[i];
+      var id = update.getAttribute("id");
+      if (id.indexOf(":") > -1) { // is a JSF element id, but not a technical id from the framework
+        console.debug("[tobago-sheet][complete] Update after jsf.ajax complete: #" + id); // @DEV_ONLY
+
+        var sheet = document.getElementById(id);
+        sheet.id = id + "::lazy-temporary";
+
+        var page = Tobago.findPage();
+        page.get(0).insertAdjacentHTML("beforeend", "<div id='" + id + "'></div>");
+        var sheetLoader = document.getElementById(id);
+      }
+    }
+  } else   if (event.status === "success") {
 
 Review comment:
   formatting code

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services