-
-
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.
Showing
21 changed files
with
381 additions
and
53 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
54 changes: 54 additions & 0 deletions
54
packages/common/src/interfaces/customFooterOption.interface.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,54 @@ | ||
| export interface CustomFooterOption { | ||
| /** Optionally pass some text to be displayed on the left side (in the "left-footer" css class) */ | ||
| leftFooterText?: string; | ||
|
|
||
| /** CSS class used for the left container */ | ||
| leftContainerClass?: string; | ||
|
|
||
| /** Date format used when showing the "Last Update" timestamp in the metrics section. */ | ||
| dateFormat?: string; | ||
|
|
||
| /** Defaults to 20, height of the Custom Footer in pixels (this is required and is used by the auto-resizer) */ | ||
| footerHeight?: number; | ||
|
|
||
| /** Defaults to false, do we want to hide the last update timestamp (endTime)? */ | ||
| hideLastUpdateTimestamp?: boolean; | ||
|
|
||
| /** | ||
| * Defaults to false, do we want to hide the metrics (right section) when the footer is displayed? | ||
| * That could be used when we want to display only the left section with custom text | ||
| */ | ||
| hideMetrics?: boolean; | ||
|
|
||
| /** Defaults to false, do we want to hide the total item count of the entire dataset (the count exclude any filtered data) */ | ||
| hideTotalItemCount?: boolean; | ||
|
|
||
| /** Defaults to "|", separator between the timestamp and the total count */ | ||
| metricSeparator?: string; | ||
|
|
||
| /** Text shown in the custom footer on the far right for the metrics */ | ||
| metricTexts?: { | ||
| /** Defaults to empty string, optionally pass a text (Last Update) to display before the metrics endTime timestamp. */ | ||
| lastUpdate?: string; | ||
|
|
||
| /** Defaults to "items", word to display at the end of the metrics to represent the items (e.g. you could change it for "users" or anything else). */ | ||
| items?: string; | ||
|
|
||
| /** Defaults to "of", text word separator to display between the filtered items count and the total unfiltered items count (e.g.: "10 of 100 items"). */ | ||
| of?: string; | ||
|
|
||
| // -- Translation Keys --// | ||
|
|
||
| /** Defaults to "ITEMS", translation key used for the word displayed at the end of the metrics to represent the items (e.g. you could change it for "users" or anything else). */ | ||
| itemsKey?: string; | ||
|
|
||
| /** Defaults to empty string, optionally pass a translation key (internally we use "LAST_UPDATE") to display before the metrics endTime timestamp. */ | ||
| lastUpdateKey?: string; | ||
|
|
||
| /** Defaults to "OF", translation key used for the to display between the filtered items count and the total unfiltered items count. */ | ||
| ofKey?: string; | ||
| }; | ||
|
|
||
| /** CSS class used for the right container */ | ||
| rightContainerClass?: string; | ||
| } |
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
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,75 @@ | ||
| export class BindingService { | ||
| _value: any = null; | ||
| _binding: any; | ||
| _property: string; | ||
| elementBindings: any[]; | ||
|
|
||
| constructor(binding: { variable: any; property?: string; }) { | ||
| this._binding = binding; | ||
| this._property = binding.property; | ||
| this.elementBindings = []; | ||
| if (binding.variable.hasOwnProperty(binding.property)) { | ||
| this._value = binding.variable[binding.property]; | ||
| } else { | ||
| this._value = binding.variable; | ||
| } | ||
| } | ||
|
|
||
| get property() { | ||
| return this._property; | ||
| } | ||
|
|
||
| valueGetter() { | ||
| return this._value; | ||
| } | ||
|
|
||
| valueSetter(val: any) { | ||
| this._value = val; | ||
| for (let i = 0; i < this.elementBindings.length; i++) { | ||
| const binding = this.elementBindings[i]; | ||
| binding.element[binding.attribute] = val; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Add binding to an element by an object attribute and optionally on an event, we can do it in couple ways | ||
| * 1- if there's no event provided, it will simply replace the DOM elemnt (by an attribute), for example an innerHTML | ||
| * 2- when an event is provided, we will replace the DOM elemnt (by an attribute) every time an event is triggered | ||
| * 2.1- we could also provide an extra callback method to execute when the event is triggered | ||
| */ | ||
| bind(element: Element | null, attribute: string, eventName?: string, callback?: (val: any) => any) { | ||
| const binding = { | ||
| element, | ||
| attribute, | ||
| event: null, | ||
| }; | ||
|
|
||
| if (element) { | ||
| if (eventName) { | ||
| element.addEventListener(eventName, () => { | ||
| const elmValue = element[attribute]; | ||
| this.valueSetter(elmValue); | ||
| if (this._binding.variable.hasOwnProperty(this._binding.property)) { | ||
| this._binding.variable[this._binding.property] = this.valueGetter(); | ||
| } else { | ||
| this._binding.variable = this.valueGetter(); | ||
| } | ||
| if (typeof callback === 'function') { | ||
| return callback(this.valueGetter()); | ||
| } | ||
| }); | ||
| binding.event = eventName; | ||
| } | ||
| this.elementBindings.push(binding); | ||
| element[attribute] = this._value ?? null; | ||
| } | ||
| return this; | ||
| } | ||
|
|
||
| /** Unbind (remove) an event from an element */ | ||
| unbind(element: Element | null, eventName: string, callback: () => void) { | ||
| if (element) { | ||
| element.removeEventListener(eventName, callback); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.