Skip to content

Commit 1fb52ff

Browse files
ConradSollittConradSollitt
committed
📄 Example Update for JS Control
1 parent b282b09 commit 1fb52ff

File tree

5 files changed

+36
-83
lines changed

5 files changed

+36
-83
lines changed

‎examples/css/countries.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ nav img.download {
1616
}
1717
nav img.download:hover { transform: translate(0, -2px); }
1818
.download-links,
19-
[data-template-id="download-links"] {
19+
[data-template-id="download-links"],
20+
[data-control="download-links"] {
2021
display: flex;
2122
align-items: center;
2223
}

‎examples/html/cities-js.htm‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,7 @@ <h1><span data-i18n="Largest Cities in"></span> <span data-bind="country"></span
66
<nav>
77
<a href="#/en/" data-i18n="Countries" data-i18n-href></a>
88
<a href="#/[window.i18n_Locale]/regions/[country]" data-i18n="Regions" data-bind-attr="href"></a>
9-
<div class="download-links ml-20">
10-
<span class="download" data-i18n="Download"></span>
11-
<img class="download"
12-
src="img/Excel.svg"
13-
height="16"
14-
width="16"
15-
alt="Download to Excel"
16-
title="Download to Excel"
17-
data-export-excel-selector="table"
18-
data-export-file-name="[[Cities]].xlsx"
19-
data-i18n-attr="alt, title, data-export-file-name">
20-
<img class="download"
21-
src="img/CSV.svg"
22-
height="16"
23-
width="16"
24-
alt="Download to CSV"
25-
title="Download to CSV"
26-
data-export-csv-selector="table"
27-
data-export-file-name="[[Cities]].csv"
28-
data-i18n-attr="alt, title, data-export-file-name">
29-
</div>
9+
<download-links class="ml-20" data-file-name="Cities"></download-links>
3010
</nav>
3111

3212
<input data-filter-selector="table" placeholder="Enter filter" data-i18n-attr="placeholder">

‎examples/html/regions-js.htm‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,7 @@ <h1></h1>
55

66
<nav>
77
<a href="#/en/" data-i18n="Countries" data-i18n-href></a>
8-
<div class="download-links ml-20">
9-
<span class="download" data-i18n="Download"></span>
10-
<img class="download"
11-
src="img/Excel.svg"
12-
height="16"
13-
width="16"
14-
alt="Download to Excel"
15-
title="Download to Excel"
16-
data-export-excel-selector="table"
17-
data-export-file-name="[[Regions]].xlsx"
18-
data-i18n-attr="alt, title, data-export-file-name">
19-
<img class="download"
20-
src="img/CSV.svg"
21-
height="16"
22-
width="16"
23-
alt="Download to CSV"
24-
title="Download to CSV"
25-
data-export-csv-selector="table"
26-
data-export-file-name="[[Regions]].csv"
27-
data-i18n-attr="alt, title, data-export-file-name">
28-
</div>
8+
<download-links class="ml-20" data-file-name="Regions"></download-links>
299
</nav>
3010

3111
<input

‎examples/html/search-places-js.htm‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -67,25 +67,7 @@ <h2><span data-bind="search.cities.length"></span> <span data-i18n="Cities Found
6767

6868
<div data-show="typeof search === 'object' && search.cities && search.cities.length > 0">
6969
<nav style="display: inline-flex;">
70-
<span class="download" data-i18n="Download" style="margin-left: 0;"></span>
71-
<img class="download"
72-
src="img/Excel.svg"
73-
height="16"
74-
width="16"
75-
alt="Download to Excel"
76-
title="Download to Excel"
77-
data-export-excel-selector="table"
78-
data-export-file-name="[[Search]].xlsx"
79-
data-i18n-attr="alt, title, data-export-file-name">
80-
<img class="download"
81-
src="img/CSV.svg"
82-
height="16"
83-
width="16"
84-
alt="Download to CSV"
85-
title="Download to CSV"
86-
data-export-csv-selector="table"
87-
data-export-file-name="[[Search]].csv"
88-
data-i18n-attr="alt, title, data-export-file-name">
70+
<download-links data-file-name="Search"></download-links>
8971
</nav>
9072
</div>
9173

‎examples/places-demo-js.htm‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -45,27 +45,7 @@ <h1 data-i18n="Countries"></h1>
4545
<nav>
4646
<a href="#/en/search" data-i18n="Search" data-i18n-href></a>
4747
<a href="#/en/info" data-i18n="Info" data-i18n-href></a>
48-
<div class="download-links ml-20">
49-
<span class="download" data-i18n="Download"></span>
50-
<img class="download"
51-
src="img/Excel.svg"
52-
height="16"
53-
width="16"
54-
alt="Download to Excel"
55-
title="Download to Excel"
56-
data-export-excel-selector="table"
57-
data-export-file-name="[[Countries]].xlsx"
58-
data-i18n-attr="alt, title, data-export-file-name">
59-
<img class="download"
60-
src="img/CSV.svg"
61-
height="16"
62-
width="16"
63-
alt="Download to CSV"
64-
title="Download to CSV"
65-
data-export-csv-selector="table"
66-
data-export-file-name="[[Countries]].csv"
67-
data-i18n-attr="alt, title, data-export-file-name">
68-
</div>
48+
<download-links class="ml-20" data-file-name="Countries"></download-links>
6949
</nav>
7050

7151
<input
@@ -215,5 +195,35 @@ <h1 data-i18n="Countries"></h1>
215195
return text;
216196
}
217197
</script>
198+
199+
<script>
200+
// Create a custom JavaScript "Control" to handle <download-links>.
201+
// When the control is rendered `this.fileName` is passed from the
202+
// [data-file-name] HTML attribute.
203+
(function() {
204+
app.addControl('download-links', {
205+
html: function () {
206+
var html = '<span class="download">' + window.i18nText('Download') + '</span>';
207+
html += '<img class="download"';
208+
html += ' src="img/Excel.svg"';
209+
html += ' height="16"';
210+
html += ' width="16"';
211+
html += ' alt="' + window.i18nText('Download to Excel') + '"';
212+
html += ' title="' + window.i18nText('Download to Excel') + '"';
213+
html += ' data-export-excel-selector="table"';
214+
html += ' data-export-file-name="' + window.i18nText(this.fileName) + '.xlsx">';
215+
html += '<img class="download"';
216+
html += ' src="img/CSV.svg"';
217+
html += ' height="16"';
218+
html += ' width="16"';
219+
html += ' alt="' + window.i18nText('Download to CSV') + '"';
220+
html += ' title="' + window.i18nText('Download to CSV') + '"';
221+
html += ' data-export-csv-selector="table"';
222+
html += ' data-export-file-name="' + window.i18nText(this.fileName) + '.csv">';
223+
return html;
224+
},
225+
});
226+
})();
227+
</script>
218228
</body>
219229
</html>

0 commit comments

Comments
 (0)