-
-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add support for grid inside Shadow DOM (#1166)
* feat: add support for grid inside Shadow DOM
- Loading branch information
1 parent
90876c9
commit f7b8c46
Showing
18 changed files
with
263 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
examples/vite-demo-vanilla-bundle/src/examples/example20.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <h3 class="title is-3"> | ||
| Example 20 - Basic grid inside a Shadow DOM | ||
| <span class="subtitle">(with Salesforce Theme)</span> | ||
| <div class="subtitle" style="float: right; margin-top: -20px"> | ||
| <span class="is-size-6">see</span> | ||
| <a class="is-size-5" target="_blank" | ||
| href="https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/vite-demo-vanilla-bundle/src/examples/example19.ts"> | ||
| <span class="mdi mdi-link-variant mdi-v-align-sub"></span> code | ||
| </a> | ||
| </div> | ||
| </h3> | ||
|
|
||
| <div id="host"> | ||
| </div> |
135 changes: 135 additions & 0 deletions
135
examples/vite-demo-vanilla-bundle/src/examples/example20.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import { Column, FieldType, Filters, Formatters, GridOption, SlickEventHandler, SlickNamespace, } from '@slickgrid-universal/common'; | ||
| import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; | ||
| import { ExampleGridOptions } from './example-grid-options'; | ||
|
|
||
| const NB_ITEMS = 100; | ||
| declare const Slick: SlickNamespace; | ||
|
|
||
| interface ShadowContainer { | ||
| shadow: ShadowRoot; | ||
| gridContainer: HTMLDivElement; | ||
| } | ||
|
|
||
| export default class Example20 { | ||
| protected _eventHandler: SlickEventHandler; | ||
|
|
||
| columnDefinitions: Column[] = []; | ||
| dataset: any[] = []; | ||
| gridOptions!: GridOption; | ||
| gridContainerElm: HTMLDivElement; | ||
| isWithPagination = true; | ||
| sgb: SlickVanillaGridBundle; | ||
|
|
||
| attached() { | ||
| this._eventHandler = new Slick.EventHandler(); | ||
| const shadowObj = this.createShadowElement(); | ||
|
|
||
| // define the grid options & columns and then create the grid itself | ||
| this.defineGrid(shadowObj); | ||
|
|
||
| // mock some data (different in each dataset) | ||
| this.dataset = this.getData(NB_ITEMS); | ||
| this.gridContainerElm = document.querySelector<HTMLDivElement>(`#host`) as HTMLDivElement; | ||
| document.body.classList.add('salesforce-theme'); | ||
|
|
||
| setTimeout(() => { | ||
| this.sgb = new Slicker.GridBundle(shadowObj.gridContainer as HTMLDivElement, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset); | ||
| }, 25); | ||
| } | ||
|
|
||
| /** | ||
| * Build the Shadow DOM. In this example, it will | ||
| * have just a div for the grid, and a <link> | ||
| * for the Alpine style. | ||
| * | ||
| * Notice that the <link> tag must be placed inside | ||
| * the Shadow DOM tree, it cannot be placed on the <head> | ||
| * tag because the Shadow DOM is unaffected by external | ||
| * styles | ||
| */ | ||
| createShadowElement(): ShadowContainer { | ||
| const host = document.querySelector('#host') as HTMLDivElement; | ||
| const shadow = host.attachShadow({ mode: 'open' }); | ||
| const gridContainer = document.createElement('div'); | ||
| // gridContainer.style.width = '600px'; | ||
| // gridContainer.style.height = '500px'; | ||
| gridContainer.classList.add('grid20'); | ||
| shadow.appendChild(gridContainer); | ||
|
|
||
| const linkElement = document.createElement('link'); | ||
| linkElement.type = 'text/css'; | ||
| linkElement.rel = 'stylesheet'; | ||
| linkElement.href = './src/styles.scss'; | ||
| shadow.appendChild(linkElement); | ||
| return { shadow, gridContainer }; | ||
| } | ||
|
|
||
| dispose() { | ||
| this._eventHandler.unsubscribeAll(); | ||
| this.sgb?.dispose(); | ||
| this.gridContainerElm.remove(); | ||
| document.body.classList.remove('salesforce-theme'); | ||
| } | ||
|
|
||
| /* Define grid Options and Columns */ | ||
| defineGrid(shadowObj) { | ||
| this.columnDefinitions = [ | ||
| { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100, filterable: true }, | ||
| { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100, filterable: true, type: FieldType.number }, | ||
| { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100, filterable: true, type: FieldType.number }, | ||
| { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, filter: { model: Filters.compoundDate }, type: FieldType.date, exportWithFormatter: true, filterable: true }, | ||
| { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, filter: { model: Filters.compoundDate }, type: FieldType.date, exportWithFormatter: true, filterable: true }, | ||
| { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100, filterable: true } | ||
| ]; | ||
|
|
||
| this.gridOptions = { | ||
| gridHeight: 450, | ||
| gridWidth: 800, | ||
| enableCellNavigation: true, | ||
| enableFiltering: true, | ||
| headerRowHeight: 35, | ||
| rowHeight: 30, | ||
| shadowRoot: shadowObj.shadow | ||
| }; | ||
| } | ||
|
|
||
| getData(itemCount: number) { | ||
| // mock a dataset | ||
| const datasetTmp: any[] = []; | ||
| for (let i = 0; i < itemCount; i++) { | ||
| const randomYear = 2000 + Math.floor(Math.random() * 10); | ||
| const randomMonth = Math.floor(Math.random() * 11); | ||
| const randomDay = Math.floor((Math.random() * 29)); | ||
| const randomPercent = Math.round(Math.random() * 100); | ||
|
|
||
| datasetTmp.push({ | ||
| id: i, | ||
| title: 'Task ' + i, | ||
| duration: Math.round(Math.random() * 100) + '', | ||
| percentComplete: randomPercent, | ||
| start: new Date(randomYear, randomMonth + 1, randomDay), | ||
| finish: new Date(randomYear + 1, randomMonth + 1, randomDay), | ||
| effortDriven: (i % 5 === 0) | ||
| }); | ||
| } | ||
|
|
||
| return datasetTmp; | ||
| } | ||
|
|
||
| generatePhoneNumber(): string { | ||
| let phone = ''; | ||
| for (let i = 0; i < 10; i++) { | ||
| phone += Math.round(Math.random() * 9) + ''; | ||
| } | ||
| return phone; | ||
| } | ||
|
|
||
| // Toggle the Grid Pagination | ||
| // IMPORTANT, the Pagination MUST BE CREATED on initial page load before you can start toggling it | ||
| // Basically you cannot toggle a Pagination that doesn't exist (must created at the time as the grid) | ||
| togglePagination() { | ||
| this.isWithPagination = !this.isWithPagination; | ||
| this.sgb.paginationService!.togglePaginationVisibility(this.isWithPagination); | ||
| this.sgb.slickGrid!.setSelectedRows([]); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.