myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From lof...@apache.org
Subject [myfaces-tobago] branch master updated: refactor: new custom element <tobago-sheet> fix: f:ajax inside sheet row
Date Thu, 07 Nov 2019 08:48:33 GMT
This is an automated email from the ASF dual-hosted git repository.

lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/master by this push:
     new 4598b51  refactor: new custom element <tobago-sheet> fix: f:ajax inside sheet
row
4598b51 is described below

commit 4598b512bee09610f8f21ccec14588e040aa38d4
Author: Udo Schnurpfeil <udo.schnurpfeil@irian.eu>
AuthorDate: Thu Nov 7 09:47:43 2019 +0100

    refactor: new custom element <tobago-sheet>
    fix: f:ajax inside sheet row
    
    issue: TOBAGO-1633: TS refactoring
---
 .../internal/renderkit/renderer/SheetRenderer.java |  23 ++-
 .../tobago/renderkit/html/DataAttributes.java      |   9 --
 .../tobago/renderkit/html/HtmlElements.java        |   1 +
 tobago-core/src/main/resources/scss/_tobago.scss   |   5 +-
 .../080-sheet/30-event/Sheet_Event.xhtml           |   8 +-
 .../src/main/npm/ts/tobago-command.ts              |  20 ++-
 .../src/main/npm/ts/tobago-sheet.ts                | 155 +++++----------------
 7 files changed, 66 insertions(+), 155 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SheetRenderer.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SheetRenderer.java
index af165c7..47e2e4e 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SheetRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SheetRenderer.java
@@ -262,13 +262,12 @@ public class SheetRenderer extends RendererBase {
     sheet.init(facesContext);
 
     // Outer sheet div
-    writer.startElement(HtmlElements.DIV);
+    writer.startElement(HtmlElements.TOBAGO_SHEET);
     writer.writeIdAttribute(sheetId);
     HtmlRendererUtils.writeDataAttributes(facesContext, writer, sheet);
     writer.writeClassAttribute(
-        TobagoClass.SHEET,
-        TobagoClass.SHEET.createMarkup(markup),
         sheet.getCustomClass(),
+        TobagoClass.SHEET.createMarkup(markup),
         markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null);
     if (reload != null && reload.isRendered()) {
       writer.writeAttribute(DataAttributes.RELOAD, reload.getFrequency());
@@ -517,7 +516,7 @@ public class SheetRenderer extends RendererBase {
       writer.endElement(HtmlElements.INPUT);
     }
 
-    writer.endElement(HtmlElements.DIV);
+    writer.endElement(HtmlElements.TOBAGO_SHEET);
     UIComponent header = sheet.getHeader();
     if (header.isTransient()) {
       sheet.getFacets().remove("header");
@@ -672,8 +671,6 @@ public class SheetRenderer extends RendererBase {
           row != null ? row.getCustomClass() : null,
           sheet.isRowVisible() ? null : BootstrapClass.D_NONE);
 
-      encodeBehavior(writer, facesContext, row);
-
       for (final AbstractUIColumnBase column : columns) {
         if (column.isRendered()) {
           if (column instanceof AbstractUIColumn || column instanceof AbstractUIColumnSelector
@@ -722,14 +719,12 @@ public class SheetRenderer extends RendererBase {
         }
       }
 
-      if (!autoLayout) {
-        writer.startElement(HtmlElements.TD);
-        writer.writeClassAttribute(TobagoClass.SHEET__CELL, TobagoClass.SHEET__CELL.createMarkup(Markup.FILLER));
-//      writer.write("&nbsp;");
-        writer.startElement(HtmlElements.DIV);
-        writer.endElement(HtmlElements.DIV);
-        writer.endElement(HtmlElements.TD);
-      }
+      writer.startElement(HtmlElements.TD);
+      writer.writeClassAttribute(TobagoClass.SHEET__CELL, TobagoClass.SHEET__CELL.createMarkup(Markup.FILLER));
+      writer.startElement(HtmlElements.DIV);
+      writer.endElement(HtmlElements.DIV);
+      encodeBehavior(writer, facesContext, row);
+      writer.endElement(HtmlElements.TD);
 
       writer.endElement(HtmlElements.TR);
     }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
index 8e22447..385f88a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
@@ -27,13 +27,6 @@ package org.apache.myfaces.tobago.renderkit.html;
 public enum DataAttributes implements MarkupLanguageAttributes {
 
   /**
-   * Ajax behaviors execute and render attributes for TabGroup and Sheet reload
-   * @deprecated since 3.0.0, please use COMMANDS
-   */
-  @Deprecated
-  BEHAVIOR_COMMANDS("data-tobago-behavior-commands"),
-
-  /**
    * Contains the closed tree icon or style.
    */
   CLOSED("data-tobago-closed"),
@@ -128,8 +121,6 @@ public enum DataAttributes implements MarkupLanguageAttributes {
    */
   RELOAD("data-tobago-reload"),
 
-  ROW_ACTION("data-tobago-row-action"),
-
   /*
    * Holds the index of the row in a sheet, if the sheet has a rowRendered attribute.
    */
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index f6ecb2c..abd1dac 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -146,6 +146,7 @@ public enum HtmlElements {
   TOBAGO_SELECT_BOOLEAN_TOGGLE("tobago-select-boolean-toggle"),
   TOBAGO_SELECT_MANY_CHECKBOX("tobago-select-many-checkbox"),
   TOBAGO_SELECT_MANY_SHUTTLE("tobago-select-many-shuttle"),
+  TOBAGO_SHEET("tobago-sheet"),
   TOBAGO_STARS("tobago-stars"),
   TOBAGO_SUGGEST("tobago-suggest"),
   TOBAGO_TAB("tobago-tab"),
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 77ff64f..36f5902 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -1152,11 +1152,12 @@ p.tobago-separator {
 }
 
 /* sheet -------------------------------------------------------------- */
+.tobago-sheet,
 .tobago-sheet-expanded,
 .tobago-sheet-row {
 }
 
-.tobago-sheet {
+tobago-sheet {
   .tobago-sheet-cell {
     > .tobago-treeNode {
       display: flex;
@@ -1215,7 +1216,7 @@ th.tobago-sheet-headerCell-markup-filler > .tobago-sheet-header {
   margin-bottom: ($spacer-y * 0.75);
 }
 
-.tobago-sheet {
+tobago-sheet {
   display: flex;
   flex-direction: column;
   margin-bottom: $spacer;
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/30-event/Sheet_Event.xhtml
b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/30-event/Sheet_Event.xhtml
index 49dce6a..8520827 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/30-event/Sheet_Event.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/30-event/Sheet_Event.xhtml
@@ -36,6 +36,7 @@
       <tc:selectItem itemValue="1" itemLabel="on click with full request"/>
       <tc:selectItem itemValue="2" itemLabel="on double click with full request"/>
       <tc:selectItem itemValue="3" itemLabel="open popup on click with AJAX"/>
+      <tc:selectItem itemValue="4" itemLabel="on dblclick with AJAX"/>
       <f:ajax render="example"/>
     </tc:selectOneRadio>
     <p>Select an object from the SolarObjects list.</p>
@@ -61,7 +62,6 @@
               <tc:resetInputActionListener/>
             </tc:event>
           </tc:row>
-
           <tc:row id="sample3" rendered="#{sheetController.columnEventSample == 3}">
             <tc:event>
               <f:ajax id="columnEventPopup" execute=":::popup" render=":::popup"
@@ -69,11 +69,15 @@
               <tc:operation name="show" for=":::popup"/>
             </tc:event>
           </tc:row>
+          <tc:row id="sample4" rendered="#{sheetController.columnEventSample == 4}">
+            <f:ajax render=":::detail" listener="#{sheetController.selectSolarObject}"
id="columnEventAjax"
+                    event="dblclick"/>
+          </tc:row>
 
         </tc:sheet>
       </tc:box>
 
-      <tc:box id="detail" label="Details" rendered="#{sheetController.columnEventSample
le 2}">
+      <tc:box id="detail" label="Details" rendered="#{sheetController.columnEventSample
ne 3}">
         <tc:panel rendered="#{sheetController.selectedSolarObject != null}">
           <tc:in id="name" label="Name" value="#{sheetController.selectedSolarObject.name}"
required="true"/>
           <tc:in label="Number" value="#{sheetController.selectedSolarObject.number}"/>
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-command.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-command.ts
index 68b116a..59e3142 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-command.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-command.ts
@@ -36,15 +36,15 @@ class Behavior extends HTMLElement {
         document.body.addEventListener(this.event, this.callback.bind(this));
         break;
       default:
-        this.parentElement.addEventListener(this.event, this.callback.bind(this));
+        this.element.addEventListener(this.event, this.callback.bind(this));
     }
   }
 
   callback(event?: Event): void {
 
     if (this.collapseAction && this.collapseTarget) {
-      const target = this.getRootNode() as ShadowRoot | Document;
-      Collapse.execute(this.collapseAction, target.getElementById(this.collapseTarget));
+      const rootNode = this.getRootNode() as ShadowRoot | Document;
+      Collapse.execute(this.collapseAction, rootNode.getElementById(this.collapseTarget));
     }
 
     if (this.execute || this.render) { // this means: AJAX case?
@@ -56,9 +56,10 @@ class Behavior extends HTMLElement {
         }
       }
       jsf.ajax.request(
-          this.parentElement,
-          event, {
-            //"javax.faces.behavior.event": this.event,
+          this.element,
+          event,
+          {
+            "javax.faces.behavior.event": this.event,
             execute: this.execute,
             render: this.render
           });
@@ -179,7 +180,12 @@ class Behavior extends HTMLElement {
   }
 
   get element(): HTMLElement {
-    return this.parentElement;
+    if (this.parentElement.matches("td.tobago-sheet-cell-markup-filler")) {
+      // XXX special case, using the row, but <tobago-behavior> can't be a child of
<tr>
+      return this.parentElement.parentElement;
+    } else {
+      return this.parentElement;
+    }
   }
 }
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-sheet.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-sheet.ts
index ce6e700..375fda5 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-sheet.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-sheet.ts
@@ -15,35 +15,16 @@
  * limitations under the License.
  */
 
-import {Listener, Phase} from "./tobago-listener";
 import {DomUtils} from "./tobago-utils";
-import {CommandHelper} from "./tobago-command";
 import {Page} from "./tobago-page";
 
-class Sheet {
+class Sheet extends HTMLElement {
 
-  static readonly SHEETS: Map<string, Sheet> = new Map<string, Sheet>();
   static readonly SCROLL_BAR_SIZE: number = Sheet.getScrollBarSize();
 
-  id: string;
-
-  clickActionId: string;
-  clickReloadComponentId: string;
-  dblClickActionId: string;
-  dblClickReloadComponentId: string;
-
   mousemoveData: any;
   mousedownOnRowData: any;
 
-  static init(element: HTMLElement): void {
-    console.time("[tobago-sheet] init");
-    for (const sheetElement of DomUtils.selfOrElementsByClassName(element, "tobago-sheet"))
{
-      const sheet = new Sheet(sheetElement);
-      Sheet.SHEETS.set(sheet.id, sheet);
-    }
-    console.timeEnd("[tobago-sheet] init");
-  }
-
   private static getScrollBarSize(): number {
     const body = document.getElementsByTagName("body").item(0);
 
@@ -67,14 +48,11 @@ class Sheet {
     return ["INPUT", "TEXTAREA", "SELECT", "A", "BUTTON"].indexOf(element.tagName) > -1;
   }
 
-  constructor(element: HTMLElement) {
-    this.id = element.id;
-    const commands = element.dataset.tobagoRowAction;
-    const behavior = element.dataset.tobagoBehaviorCommands;
-    this.clickActionId = null;//todo commands.click.action;
-    this.clickReloadComponentId = null;//todo commands.click.partially; // fixme: partially
no longer used?
-    this.dblClickActionId = null;//todo commands.dblclick.action;
-    this.dblClickReloadComponentId = null;//todo commands.dblclick.partially;// fixme: partially
no longer used?
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
 
     // synchronize column widths -----------------------------------------------------------------------------------
//
 
@@ -88,17 +66,18 @@ class Sheet {
     // So, if the 2nd is set, we use it, if not set, we use the 1st source.
 
     let columnWidths = this.loadColumnWidths();
-    console.info("columnWidths: " + columnWidths);
+    console.info("columnWidths: %s", JSON.stringify(columnWidths));
     if (columnWidths && columnWidths.length === 0) { // active, but empty
       // otherwise use the layout definition
-      const tokens = JSON.parse(element.dataset.tobagoLayout).columns;
+      const tokens = JSON.parse(this.dataset.tobagoLayout).columns;
       const columnRendered = this.isColumnRendered();
 
       const headerCols = this.getHeaderCols();
       const bodyTable = this.getBodyTable();
       const bodyCols = this.getBodyCols();
 
-      console.assert(headerCols.length - 1 === bodyCols.length, "header and body column number
doesn't match");
+      console.assert(headerCols.length - 1 === bodyCols.length,
+          "header and body column number doesn't match: %d != %d ", headerCols.length - 1,
bodyCols.length);
 
       let sumRelative = 0; // tbd: is this needed?
       let widthRelative = bodyTable.offsetWidth;
@@ -150,7 +129,7 @@ class Sheet {
 
     // resize column: mouse events --------------------------------------------------------------------------------
//
 
-    for (const resizeElement of <NodeListOf<HTMLElement>>element.querySelectorAll(".tobago-sheet-headerResize"))
{
+    for (const resizeElement of <NodeListOf<HTMLElement>>this.querySelectorAll(".tobago-sheet-headerResize"))
{
       resizeElement.addEventListener("click", function (): boolean {
         return false;
       });
@@ -171,26 +150,17 @@ class Sheet {
     sheetBody.addEventListener("scroll", this.scroll.bind(this));
 
     // add selection listeners ------------------------------------------------------------------------------------
//
-    const selectionMode = element.dataset.tobagoSelectionMode;
+    const selectionMode = this.dataset.tobagoSelectionMode;
     if (selectionMode === "single" || selectionMode === "singleOrNone" || selectionMode ===
"multi") {
 
       for (const row of this.getRows()) {
         row.addEventListener("mousedown", this.mousedownOnRow.bind(this));
 
         row.addEventListener("click", this.clickOnRow.bind(this));
-
-        // todo: check if this works correctly
-        const sheet = Sheet.SHEETS.get(this.id);
-        if (sheet && sheet.dblClickActionId) {
-          row.addEventListener("dblclick", function (event: Event): void {
-            // todo: re-implement
-            sheet.doDblClick(event);
-          });
-        }
       }
     }
 
-    for (const checkbox of <NodeListOf<HTMLInputElement>>element.querySelectorAll(
+    for (const checkbox of <NodeListOf<HTMLInputElement>>this.querySelectorAll(
         ".tobago-sheet-cell > input.tobago-sheet-columnSelector")) {
       checkbox.addEventListener("click", (event) => {
         event.preventDefault();
@@ -199,14 +169,14 @@ class Sheet {
 
     // ----------------------------------------------------------------------------------------
//
 
-    for (const checkbox of <NodeListOf<HTMLInputElement>>element.querySelectorAll(
+    for (const checkbox of <NodeListOf<HTMLInputElement>>this.querySelectorAll(
         ".tobago-sheet-header .tobago-sheet-columnSelector")) {
       checkbox.addEventListener("click", this.clickOnCheckbox.bind(this));
     }
 
     // init paging by pages ----------------------------------------------------------------------------------------
//
 
-    for (const pagingText of <NodeListOf<HTMLElement>>element.querySelectorAll(".tobago-sheet-pagingText"))
{
+    for (const pagingText of <NodeListOf<HTMLElement>>this.querySelectorAll(".tobago-sheet-pagingText"))
{
 
       pagingText.addEventListener("click", this.clickOnPaging.bind(this));
 
@@ -242,10 +212,6 @@ class Sheet {
     }
   }
 
-  getElement(): HTMLElement {
-    return document.getElementById(this.id);
-  }
-
   isColumnRendered(): boolean[] {
     const hidden = document.getElementById(this.id + DomUtils.SUB_COMPONENT_SEP + "rendered");
     return JSON.parse(hidden.getAttribute("value"));
@@ -302,7 +268,7 @@ class Sheet {
     document.removeEventListener("mousemove", this.mousemoveData.mousemoveListener);
     document.removeEventListener("mouseup", this.mousemoveData.mouseupListener);
     // copy the width values from the header to the body, (and build a list of it)
-    const tokens = JSON.parse(this.getElement().dataset.tobagoLayout).columns;
+    const tokens = JSON.parse(this.dataset.tobagoLayout).columns;
     const columnRendered = this.isColumnRendered();
     const columnWidths = this.loadColumnWidths();
 
@@ -380,7 +346,6 @@ class Sheet {
 
     const row = event.currentTarget as HTMLTableRowElement;
     if (row.classList.contains("tobago-sheet-columnSelector") || !Sheet.isInputElement(row))
{
-      const sheet = this.getElement();
 
       if (Math.abs(this.mousedownOnRowData.x - event.clientX)
           + Math.abs(this.mousedownOnRowData.y - event.clientY) > 5) {
@@ -395,7 +360,7 @@ class Sheet {
 
       const rows = this.getRows();
       const selector = this.getSelectorCheckbox(row);
-      const selectionMode = this.getElement().dataset.tobagoSelectionMode;
+      const selectionMode = this.dataset.tobagoSelectionMode;
 
       if ((!event.ctrlKey && !event.metaKey && !selector)
           || selectionMode === "single" || selectionMode === "singleOrNone") {
@@ -403,7 +368,7 @@ class Sheet {
         this.resetSelected();
       }
 
-      const lastClickedRowIndex = parseInt(sheet.dataset.tobagoLastClickedRowIndex);
+      const lastClickedRowIndex = parseInt(this.dataset.tobagoLastClickedRowIndex);
       if (event.shiftKey && selectionMode === "multi" && lastClickedRowIndex
> -1) {
         if (lastClickedRowIndex <= row.sectionRowIndex) {
           this.selectRange(rows, lastClickedRowIndex, row.sectionRowIndex, true, false);
@@ -413,35 +378,6 @@ class Sheet {
       } else if (selectionMode !== "singleOrNone" || !this.isRowSelected(row)) {
         this.toggleSelection(row, selector);
       }
-      const rowAction = sheet.dataset.tobagoRowAction;
-      const commands = rowAction ? JSON.parse(rowAction) : undefined;
-      const click = commands ? commands.click : undefined;
-      const clickActionId = click ? click.action : undefined;
-      const clickExecuteIds = click ? click.execute : undefined;
-      const clickRenderIds = click ? click.render : undefined;
-
-      if (clickActionId) {
-        let action: string;
-        const index = clickActionId.indexOf(sheet.id);
-        const rowIndex = this.getDataIndex(row);
-        if (index >= 0) {
-          action = sheet.id + ":" + rowIndex + ":" + clickActionId.substring(index + sheet.id.length
+ 1);
-        } else {
-          action = sheet.id + ":" + rowIndex + ":" + clickActionId;
-        }
-        if (clickExecuteIds && clickExecuteIds.length > 0) {
-          jsf.ajax.request(
-              action,
-              event,
-              {
-                //"javax.faces.behavior.event": "click",
-                execute: clickExecuteIds,
-                render: clickRenderIds
-              });
-        } else {
-          CommandHelper.submitAction(row, action);
-        }
-      }
     }
   }
 
@@ -488,67 +424,43 @@ class Sheet {
   }
 
   getHeader(): HTMLElement {
-    return this.getElement().querySelector(".tobago-sheet>header");
+    return this.querySelector("tobago-sheet>header");
   }
 
   getHeaderTable(): HTMLElement {
-    return this.getElement().querySelector(".tobago-sheet>header>table");
+    return this.querySelector("tobago-sheet>header>table");
   }
 
   getHeaderCols(): NodeListOf<HTMLElement> {
-    return this.getElement().querySelectorAll(".tobago-sheet>header>table>colgroup>col");
+    return this.querySelectorAll("tobago-sheet>header>table>colgroup>col");
   }
 
   getBody(): HTMLElement {
-    return this.getElement().querySelector(".tobago-sheet>.tobago-sheet-body");
+    return this.querySelector("tobago-sheet>.tobago-sheet-body");
   }
 
   getBodyTable(): HTMLElement {
-    return this.getElement().querySelector(".tobago-sheet>.tobago-sheet-body>.tobago-sheet-bodyTable");
+    return this.querySelector("tobago-sheet>.tobago-sheet-body>.tobago-sheet-bodyTable");
   }
 
   getBodyCols(): NodeListOf<HTMLElement> {
-    return this.getElement().querySelectorAll(".tobago-sheet>.tobago-sheet-body>.tobago-sheet-bodyTable>colgroup>col");
+    return this.querySelectorAll("tobago-sheet>.tobago-sheet-body>.tobago-sheet-bodyTable>colgroup>col");
   }
 
   getHiddenSelected(): HTMLInputElement {
-    return document.getElementById(this.id + DomUtils.SUB_COMPONENT_SEP + "selected") as
HTMLInputElement;
+    const rootNode = this.getRootNode() as ShadowRoot | Document;
+    return rootNode.getElementById(this.id + DomUtils.SUB_COMPONENT_SEP + "selected")  as
HTMLInputElement;
   }
 
   getHiddenScrollPosition(): HTMLInputElement {
-    return document.getElementById(this.id + DomUtils.SUB_COMPONENT_SEP + "scrollPosition")
as HTMLInputElement;
-  }
-
-  doDblClick(event): void {
-    const row = event.currentTarget as HTMLTableRowElement;
-    const rowIndex = row.sectionRowIndex + this.getFirst();
-    if (this.dblClickActionId) {
-      let action;
-      const index = this.dblClickActionId.indexOf(this.id);
-      if (index >= 0) {
-        action = this.id + ":" + rowIndex + ":" + this.dblClickActionId.substring(index +
this.id.length + 1);
-      } else {
-        action = this.id + ":" + rowIndex + ":" + this.dblClickActionId;
-      }
-      if (this.dblClickReloadComponentId && this.dblClickReloadComponentId.length
> 0) {
-        jsf.ajax.request(
-            action,
-            event,
-            {
-              //"javax.faces.behavior.event": "dblclick",
-              execute: this.dblClickReloadComponentId,
-              render: this.dblClickReloadComponentId
-            });
-      } else {
-        CommandHelper.submitAction(row, action);
-      }
-    }
+    const rootNode = this.getRootNode() as ShadowRoot | Document;
+    return rootNode.getElementById(this.id + DomUtils.SUB_COMPONENT_SEP + "scrollPosition")
 as HTMLInputElement;
   }
 
   /**
    * Get the element, which indicates the selection
    */
-  getSelectorCheckbox(row): HTMLInputElement {
+  getSelectorCheckbox(row: HTMLTableRowElement): HTMLInputElement {
     return row.querySelector("tr>td>input.tobago-sheet-columnSelector");
   }
 
@@ -557,7 +469,7 @@ class Sheet {
   }
 
   getFirst(): number {
-    return parseInt(this.getElement().dataset.tobagoFirst);
+    return parseInt(this.dataset.tobagoFirst);
   }
 
   isRowSelected(row: HTMLTableRowElement): boolean {
@@ -578,7 +490,7 @@ class Sheet {
   }
 
   toggleSelection(row: HTMLTableRowElement, checkbox: HTMLInputElement): void {
-    this.getElement().dataset.tobagoLastClickedRowIndex = String(row.sectionRowIndex);
+    this.dataset.tobagoLastClickedRowIndex = String(row.sectionRowIndex);
     if (checkbox && !checkbox.disabled) {
       const selected = this.getHiddenSelected();
       const rowIndex = this.getDataIndex(row);
@@ -673,5 +585,6 @@ class Sheet {
 
 }
 
-Listener.register(Sheet.init, Phase.DOCUMENT_READY);
-Listener.register(Sheet.init, Phase.AFTER_UPDATE);
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+  window.customElements.define("tobago-sheet", Sheet);
+});


Mime
View raw message