Skip to content

Commit 83dd49b

Browse files
ghiscodingghiscoding
authored
chore(aurelia): add toggle subtitle to all Aurelia examples (#1986)
1 parent 4b560e3 commit 83dd49b

71 files changed

Lines changed: 707 additions & 551 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎demos/aurelia/src/examples/slickgrid/example1.html‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2>
2-
${title}
2+
Example 1: Basic Grids
33
<span class="float-end">
44
<a
55
style="font-size: 18px"
@@ -9,17 +9,12 @@ <h2>
99
<span class="mdi mdi-link-variant"></span> code
1010
</a>
1111
</span>
12-
<button
13-
class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
14-
type="button"
15-
data-test="toggle-subtitle"
16-
click.trigger="hideSubTitle = !hideSubTitle"
17-
>
12+
<button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" click.trigger="toggleSubTitle()">
1813
<span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
1914
</button>
2015
</h2>
2116

22-
<div class="subtitle" innerhtml.bind="subTitle" hidden.bind="hideSubTitle"></div>
17+
<div class="subtitle">Simple Grids with Fixed Sizes (800 x 225)</div>
2318

2419
<h3>
2520
<div class="column">

‎demos/aurelia/src/examples/slickgrid/example1.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ const NB_ITEMS = 995;
66

77
export class Example1 {
88
private _darkModeGrid1 = false;
9-
title = 'Example 1: Basic Grids';
10-
subTitle = `Simple Grids with Fixed Sizes (800 x 225)`;
11-
129
aureliaGrid1!: AureliaGridInstance;
1310
gridOptions1!: GridOption;
1411
gridOptions2!: GridOption;
@@ -110,4 +107,10 @@ export class Example1 {
110107
}
111108
this.aureliaGrid1.slickGrid?.setOptions({ darkMode: this._darkModeGrid1 });
112109
}
110+
111+
toggleSubTitle() {
112+
this.hideSubTitle = !this.hideSubTitle;
113+
const action = this.hideSubTitle ? 'add' : 'remove';
114+
document.querySelector('.subtitle')?.classList[action]('hidden');
115+
}
113116
}

‎demos/aurelia/src/examples/slickgrid/example10.html‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2>
2-
${title}
2+
Example 10: Multiple Grids with Row Selection
33
<span class="float-end">
44
<a
55
style="font-size: 18px"
@@ -9,17 +9,26 @@ <h2>
99
<span class="mdi mdi-link-variant"></span> code
1010
</a>
1111
</span>
12-
<button
13-
class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
14-
type="button"
15-
data-test="toggle-subtitle"
16-
click.trigger="hideSubTitle = !hideSubTitle"
17-
>
12+
<button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" click.trigger="toggleSubTitle()">
1813
<span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
1914
</button>
2015
</h2>
2116

22-
<div class="subtitle" innerhtml.bind="subTitle" hidden.bind="hideSubTitle"></div>
17+
<div class="subtitle">
18+
Row selection, single or multi-select (<a
19+
href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/row-selection"
20+
target="_blank"
21+
>Wiki docs</a
22+
>).
23+
<ul>
24+
<li>Single Select, you can click on any cell to make the row active</li>
25+
<li>Multiple Selections, you need to specifically click on the checkbox to make 1 or more selections</li>
26+
<li>
27+
NOTE: Any Row Selection(s) will be reset when using Pagination and changing Page (you will need to set it back manually if you want it
28+
back)
29+
</li>
30+
</ul>
31+
</div>
2332

2433
<div class="row">
2534
<div class="col-sm-4" style="max-width: 205px">

‎demos/aurelia/src/examples/slickgrid/example10.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,6 @@ import { type AureliaGridInstance, type Column, Filters, Formatters, type GridOp
33
import './example10.scss'; // provide custom CSS/SASS styling
44

55
export class Example10 {
6-
title = 'Example 10: Multiple Grids with Row Selection';
7-
subTitle = `
8-
Row selection, single or multi-select (<a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/row-selection" target="_blank">Wiki docs</a>).
9-
<ul>
10-
<li>Single Select, you can click on any cell to make the row active</li>
11-
<li>Multiple Selections, you need to specifically click on the checkbox to make 1 or more selections</li>
12-
<li>NOTE: Any Row Selection(s) will be reset when using Pagination and changing Page (you will need to set it back manually if you want it back)</li>
13-
</ul>
14-
`;
156
@bindable() isGrid2WithPagination = true;
167

178
aureliaGrid1!: AureliaGridInstance;
@@ -310,4 +301,11 @@ export class Example10 {
310301
});
311302
}
312303
}
304+
305+
toggleSubTitle() {
306+
this.hideSubTitle = !this.hideSubTitle;
307+
const action = this.hideSubTitle ? 'add' : 'remove';
308+
document.querySelector('.subtitle')?.classList[action]('hidden');
309+
this.aureliaGrid2.resizerService.resizeGrid(0);
310+
}
313311
}

‎demos/aurelia/src/examples/slickgrid/example11.html‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2>
2-
${title}
2+
Example 11: Add / Update / Highlight a Datagrid Item
33
<span class="float-end">
44
<a
55
style="font-size: 18px"
@@ -14,7 +14,42 @@ <h2>
1414
</button>
1515
</h2>
1616

17-
<div class="subtitle" innerhtml.bind="subTitle"></div>
17+
<div class="subtitle">
18+
Add / Update / Hightlight an Item from the Datagrid (<a
19+
href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/add-update-highlight"
20+
target="_blank"
21+
>Wiki docs</a
22+
>).
23+
<ul>
24+
<li><b>Note:</b> this demo is <b>only</b> on the datagrid (client) side, you still need to deal with the backend yourself</li>
25+
<li>Adding an item, will always be showing as the 1st item in the grid because that is the best visual place to add it</li>
26+
<li>Add/Update an item requires a valid Slickgrid Selection Model, you have 2 choices to deal with this:</li>
27+
<ul>
28+
<li>You can enable "enableCheckboxSelector" or "enableRowSelection" to True</li>
29+
</ul>
30+
<li>Click on any of the buttons below to test this out</li>
31+
<li>
32+
You can change the highlighted color &amp; animation by changing the
33+
<a
34+
href="https://github.com/ghiscoding/aurelia-slickgrid/blob/master/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss"
35+
target="_blank"
36+
>SASS Variables</a
37+
>
38+
</li>
39+
<ul>
40+
<li>"$row-highlight-background-color" or "$row-highlight-fade-animation"</li>
41+
</ul>
42+
<li>You can also add CSS class(es) on the fly (or on page load) on rows with certain criteria, (e.g. click on last button)</li>
43+
<li>
44+
<ul>
45+
<li>
46+
Example, click on button "Highlight Rows with Duration over 50" to see row styling changing.
47+
<a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/dynamic-item-metadata" target="_blank">Wiki doc</a>
48+
</li>
49+
</ul>
50+
</li>
51+
</ul>
52+
</div>
1853

1954
<div class="col-sm-12">
2055
<span>

‎demos/aurelia/src/examples/slickgrid/example11.ts‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,6 @@ import {
1212
import './example11.scss';
1313

1414
export class Example11 {
15-
title = 'Example 11: Add / Update / Highlight a Datagrid Item';
16-
subTitle = `
17-
Add / Update / Hightlight an Item from the Datagrid (<a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/add-update-highlight" target="_blank">Wiki docs</a>).
18-
<ul>
19-
<li><b>Note:</b> this demo is <b>only</b> on the datagrid (client) side, you still need to deal with the backend yourself</li>
20-
<li>Adding an item, will always be showing as the 1st item in the grid because that is the best visual place to add it</li>
21-
<li>Add/Update an item requires a valid Slickgrid Selection Model, you have 2 choices to deal with this:</li>
22-
<ul><li>You can enable "enableCheckboxSelector" or "enableRowSelection" to True</li></ul>
23-
<li>Click on any of the buttons below to test this out</li>
24-
<li>You can change the highlighted color &amp; animation by changing the <a href="https://github.com/ghiscoding/aurelia-slickgrid/blob/master/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss" target="_blank">SASS Variables</a></li>
25-
<ul>
26-
<li>"$row-highlight-background-color" or "$row-highlight-fade-animation"</li>
27-
</ul>
28-
<li>You can also add CSS class(es) on the fly (or on page load) on rows with certain criteria, (e.g. click on last button)<li>
29-
<ul>
30-
<li>Example, click on button "Highlight Rows with Duration over 50" to see row styling changing. <a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/dynamic-item-metadata" target="_blank">Wiki doc</a></li>
31-
</ul>
32-
</ul>
33-
`;
34-
3515
aureliaGrid!: AureliaGridInstance;
3616
dataView!: SlickDataView;
3717
grid!: SlickGrid;

‎demos/aurelia/src/examples/slickgrid/example12.html‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2>
2-
${title}
2+
Example 12: Localization (i18n)
33
<span class="float-end">
44
<a
55
style="font-size: 18px"
@@ -14,7 +14,45 @@ <h2>
1414
</button>
1515
</h2>
1616

17-
<div class="subtitle" innerhtml.bind="subTitle"></div>
17+
<div class="subtitle">
18+
Support multiple locales with the i18next plugin, following these steps. Take a look at the (<a
19+
href="https://ghiscoding.gitbook.io/aurelia-slickgrid/localization/localization"
20+
target="_blank"
21+
>Wiki documentation</a
22+
>)
23+
<ol class="small">
24+
<li>You first need to "enableTranslate" in the Grid Options</li>
25+
<li>In the Column Definitions, you have following options</li>
26+
<ul>
27+
<li>To translate a header title, use "nameKey" with a translate key (nameKey: 'TITLE')</li>
28+
<li>For the cell values, you need to use a Formatter, there's 2 ways of doing it</li>
29+
<ul>
30+
<li>formatter: myCustomTranslateFormatter <b>&lt;= "Title" column uses it</b></li>
31+
<li>formatter: Formatters.translate <b>&lt;= "Completed" column uses it</b></li>
32+
</ul>
33+
</ul>
34+
<li>For date localization, you need to create your own custom formatter.</li>
35+
<ul>
36+
<li>You can easily implement logic to switch between Formatters "dateIso" or "dateUs", depending on current locale.</li>
37+
</ul>
38+
<li>For the Select (dropdown) filter, you can fill in the "labelKey" property, if found it will use it, else it will use "label"</li>
39+
<ul>
40+
<li>
41+
What if your select options have totally different value/label pair? In this case, you can use the
42+
<b>customStructure: { label: 'customLabel', value: 'customValue'}</b> to change the property name(s) to use.'
43+
</li>
44+
<li>What if you want to use "customStructure" and translation? Simply pass this flag <b>enableTranslateLabel: true</b></li>
45+
<li>
46+
More info on the Select Filter
47+
<a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/column-functionalities/filters/select-filter" target="_blank">Wiki page</a>
48+
</li>
49+
</ul>
50+
<li>
51+
For more info about "Download to File", read the
52+
<a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/export-to-excel" target="_blank">Wiki page</a>
53+
</li>
54+
</ol>
55+
</div>
1856

1957
<hr />
2058

‎demos/aurelia/src/examples/slickgrid/example12.ts‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -28,33 +28,6 @@ const taskTranslateFormatter: Formatter = (_row, _cell, value, _columnDef, _data
2828
};
2929

3030
export class Example12 {
31-
title = 'Example 12: Localization (i18n)';
32-
subTitle = `Support multiple locales with the i18next plugin, following these steps.
33-
Take a look at the (<a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/localization/localization" target="_blank">Wiki documentation</a>)
34-
<ol class="small">
35-
<li>You first need to "enableTranslate" in the Grid Options</li>
36-
<li>In the Column Definitions, you have following options</li>
37-
<ul>
38-
<li>To translate a header title, use "nameKey" with a translate key (nameKey: 'TITLE')</li>
39-
<li>For the cell values, you need to use a Formatter, there's 2 ways of doing it</li>
40-
<ul>
41-
<li>formatter: myCustomTranslateFormatter <b>&lt;= "Title" column uses it</b></li>
42-
<li>formatter: Formatters.translate <b>&lt;= "Completed" column uses it</b></li>
43-
</ul>
44-
</ul>
45-
<li>For date localization, you need to create your own custom formatter. </li>
46-
<ul>
47-
<li>You can easily implement logic to switch between Formatters "dateIso" or "dateUs", depending on current locale.</li>
48-
</ul>
49-
<li>For the Select (dropdown) filter, you can fill in the "labelKey" property, if found it will use it, else it will use "label"</li>
50-
<ul>
51-
<li>What if your select options have totally different value/label pair? In this case, you can use the <b>customStructure: { label: 'customLabel', value: 'customValue'}</b> to change the property name(s) to use.'</li>
52-
<li>What if you want to use "customStructure" and translation? Simply pass this flag <b>enableTranslateLabel: true</b></li>
53-
<li>More info on the Select Filter <a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/column-functionalities/filters/select-filter" target="_blank">Wiki page</a></li>
54-
</ul>
55-
<li>For more info about "Download to File", read the <a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/export-to-excel" target="_blank">Wiki page</a></li>
56-
</ol>`;
57-
5831
aureliaGrid!: AureliaGridInstance;
5932
gridOptions!: GridOption;
6033
columnDefinitions: Column[] = [];

‎demos/aurelia/src/examples/slickgrid/example13.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2>
2-
${title}
2+
Example 13: Grouping & Aggregators
33
<span class="float-end">
44
<a
55
style="font-size: 18px"
@@ -14,7 +14,16 @@ <h2>
1414
</button>
1515
</h2>
1616

17-
<div class="subtitle" innerhtml.bind="subTitle"></div>
17+
<div class="subtitle">
18+
<ul>
19+
<li>
20+
<a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/grouping-aggregators" target="_blank">Wiki docs</a>
21+
</li>
22+
<li>Fully dynamic and interactive multi-level grouping with filtering and aggregates over 50'000 items</li>
23+
<li>Each grouping level can have its own aggregates (over child rows, child groups, or all descendant rows)..</li>
24+
<li>Use "Aggregators" and "GroupTotalFormatters" directly from Aurelia-Slickgrid</li>
25+
</ul>
26+
</div>
1827

1928
<div class="row">
2029
<div class="col-sm-12">

‎demos/aurelia/src/examples/slickgrid/example13.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,6 @@ import {
1616
} from 'aurelia-slickgrid';
1717

1818
export class Example13 {
19-
title = 'Example 13: Grouping & Aggregators';
20-
subTitle = `
21-
<ul>
22-
<li><a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/grouping-aggregators" target="_blank">Wiki docs</a></li>
23-
<li>Fully dynamic and interactive multi-level grouping with filtering and aggregates over 50'000 items</li>
24-
<li>Each grouping level can have its own aggregates (over child rows, child groups, or all descendant rows)..</li>
25-
<li>Use "Aggregators" and "GroupTotalFormatters" directly from Aurelia-Slickgrid</li>
26-
</ul>
27-
`;
28-
2919
aureliaGrid!: AureliaGridInstance;
3020
columnDefinitions: Column[] = [];
3121
gridOptions!: GridOption;

0 commit comments

Comments
 (0)