Skip to content

Commit c156631

Browse files
dotpipedotpipe
committed
Search feature inductee
1 parent cf209f5 commit c156631

12 files changed

Lines changed: 8803 additions & 4568 deletions

File tree

‎API/dotpipe.js‎

Lines changed: 938 additions & 470 deletions
Large diffs are not rendered by default.

‎activeMenu/dotpipe.js‎

Lines changed: 938 additions & 470 deletions
Large diffs are not rendered by default.

‎carousel/dotpipe.js‎

Lines changed: 938 additions & 470 deletions
Large diffs are not rendered by default.

editor/dotpipe.js renamed to csv-test/dotpipe.js

Lines changed: 938 additions & 470 deletions
Large diffs are not rendered by default.

‎csv-test/products.html‎

Lines changed: 361 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,361 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>DotPipe CSV Example</title>
8+
<script src="dotpipe.js"></script>
9+
<style>
10+
/* General styling */
11+
body {
12+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13+
line-height: 1.6;
14+
color: #333;
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
padding: 20px;
18+
}
19+
20+
/* .container {
21+
background-color: white;
22+
border-radius: 8px;
23+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
24+
padding: 20px;
25+
margin-bottom: 30px;
26+
}
27+
*/
28+
h1, h2 {
29+
color: #2c3e50;
30+
}
31+
32+
.controls {
33+
margin-bottom: 20px;
34+
display: flex;
35+
gap: 10px;
36+
}
37+
38+
button {
39+
padding: 8px 16px;
40+
background-color: #4a90e2;
41+
color: white;
42+
border: none;
43+
border-radius: 4px;
44+
cursor: pointer;
45+
}
46+
47+
button:hover {
48+
background-color: #3a80d2;
49+
}
50+
51+
/* CSV component styling */
52+
.csv-container {
53+
width: 100%;
54+
margin-bottom: 20px;
55+
}
56+
57+
/* Search styling */
58+
.csv-search-container {
59+
display: flex;
60+
margin-bottom: 15px;
61+
gap: 10px;
62+
}
63+
64+
.csv-search-input {
65+
flex: 1;
66+
padding: 8px 12px;
67+
border: 1px solid #ddd;
68+
border-radius: 4px;
69+
font-size: 14px;
70+
}
71+
72+
.csv-search-button {
73+
padding: 8px 16px;
74+
background-color: #4a90e2;
75+
color: white;
76+
border: none;
77+
border-radius: 4px;
78+
cursor: pointer;
79+
font-size: 14px;
80+
}
81+
82+
.csv-search-button:hover {
83+
background-color: #3a80d2;
84+
}
85+
86+
/* Table styling */
87+
.csv-table-container {
88+
overflow-x: auto;
89+
margin-bottom: 15px;
90+
}
91+
92+
.csv-table {
93+
width: 100%;
94+
border-collapse: collapse;
95+
margin-bottom: 0;
96+
}
97+
98+
.csv-table th, .csv-table td {
99+
padding: 10px 12px;
100+
text-align: left;
101+
border-bottom: 1px solid #ddd;
102+
}
103+
104+
.csv-table thead th {
105+
background-color: #f8f9fa;
106+
border-bottom: 2px solid #ddd;
107+
position: relative;
108+
cursor: pointer;
109+
padding-right: 25px;
110+
}
111+
112+
.csv-table thead th:hover {
113+
background-color: #e9ecef;
114+
}
115+
116+
.csv-table thead th.csv-sort-asc::after {
117+
content: "↑";
118+
position: absolute;
119+
right: 8px;
120+
color: #333;
121+
}
122+
123+
.csv-table thead th.csv-sort-desc::after {
124+
content: "↓";
125+
position: absolute;
126+
right: 8px;
127+
color: #333;
128+
}
129+
130+
.csv-table tbody tr:hover {
131+
background-color: #f5f5f5;
132+
}
133+
134+
/* Cards styling */
135+
.csv-cards {
136+
display: grid;
137+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
138+
gap: 20px;
139+
}
140+
141+
.csv-card {
142+
border: 1px solid #ddd;
143+
border-radius: 8px;
144+
padding: 15px;
145+
background-color: white;
146+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
147+
}
148+
149+
.csv-field {
150+
margin-bottom: 8px;
151+
}
152+
153+
.csv-label {
154+
font-weight: bold;
155+
margin-right: 5px;
156+
}
157+
158+
/* Pagination styling */
159+
.csv-pagination-container {
160+
display: flex;
161+
justify-content: center;
162+
margin-top: 20px;
163+
gap: 5px;
164+
}
165+
166+
.csv-pagination-prev,
167+
.csv-pagination-next,
168+
.csv-pagination-number {
169+
padding: 5px 10px;
170+
border: 1px solid #ddd;
171+
background-color: #fff;
172+
cursor: pointer;
173+
border-radius: 4px;
174+
}
175+
176+
.csv-pagination-number.csv-pagination-current {
177+
background-color: #4a90e2;
178+
color: white;
179+
border-color: #4a90e2;
180+
}
181+
182+
.csv-pagination-prev:disabled,
183+
.csv-pagination-next:disabled {
184+
opacity: 0.5;
185+
cursor: not-allowed;
186+
}
187+
188+
.csv-pagination-ellipsis {
189+
padding: 5px;
190+
}
191+
192+
/* Load more button */
193+
.csv-load-more-container {
194+
text-align: center;
195+
margin-top: 20px;
196+
}
197+
198+
.csv-load-more-button {
199+
padding: 8px 16px;
200+
background-color: #28a745;
201+
color: white;
202+
border: none;
203+
border-radius: 4px;
204+
cursor: pointer;
205+
}
206+
207+
.csv-load-more-button:hover {
208+
background-color: #218838;
209+
}
210+
211+
/* Custom class for the CSV block */
212+
.csv-used-in-this-block {
213+
border: 1px solid #e0e0e0;
214+
padding: 15px;
215+
border-radius: 5px;
216+
background-color: #fafafa;
217+
}
218+
219+
/* Table styling */
220+
table {
221+
width: 100%;
222+
border-collapse: collapse;
223+
margin-bottom: 20px;
224+
}
225+
226+
th, td {
227+
padding: 10px;
228+
border: 1px solid #ddd;
229+
text-align: left;
230+
}
231+
232+
th {
233+
background-color: #f8f9fa;
234+
font-weight: bold;
235+
}
236+
237+
tr:nth-child(even) {
238+
background-color: #f9f9f9;
239+
}
240+
241+
/* Content box styling */
242+
.content-box {
243+
border: 1px solid #ddd;
244+
padding: 15px;
245+
margin-bottom: 15px;
246+
border-radius: 4px;
247+
}
248+
249+
/* Search component styling */
250+
.search-container {
251+
display: flex;
252+
align-items: center;
253+
margin-bottom: 15px;
254+
}
255+
256+
.search-input {
257+
padding: 6px 12px;
258+
border: 1px solid #ddd;
259+
border-radius: 4px 0 0 4px;
260+
font-size: 14px;
261+
flex: 1;
262+
}
263+
264+
.search-button {
265+
padding: 6px 12px;
266+
background-color: #4a90e2;
267+
color: white;
268+
border: none;
269+
border-radius: 0 4px 4px 0;
270+
cursor: pointer;
271+
font-size: 14px;
272+
}
273+
274+
.search-button:hover {
275+
background-color: #3a80d2;
276+
}
277+
278+
.search-highlight {
279+
background-color: #ffeb3b;
280+
font-weight: bold;
281+
padding: 0 2px;
282+
border-radius: 2px;
283+
}
284+
</style>
285+
</head>
286+
287+
<body>
288+
<h1>CSV Data Example</h1>
289+
290+
<div class="controls">
291+
<button id="refresh-btn">Refresh Data</button>
292+
<button id="change-view-btn">Toggle View Mode</button>
293+
<button id="change-sort-btn">Change Sort Order</button>
294+
</div>
295+
296+
<div id="csv-container">
297+
<csv id="product-csv" csv-class="csv-used-in-this-block" sources="sales.csv;products.csv" sort="name:csv-asc"
298+
csv-as="table" page-size="5">
299+
<template>
300+
<tr>
301+
<td>{{name}}</td>
302+
<td>{{price}}</td>
303+
<td>{{category}}</td>
304+
<td>{{stock}}</td>
305+
</tr>
306+
</template>
307+
</csv>
308+
</div>
309+
310+
<script>
311+
// Initialize when the page loads
312+
document.addEventListener('DOMContentLoaded', function () {
313+
// Process CSV tags
314+
processCsvTags();
315+
316+
// Set up event handlers for controls
317+
document.getElementById('refresh-btn').addEventListener('click', function () {
318+
// Re-process CSV tags to refresh data
319+
processCsvTags();
320+
});
321+
322+
document.getElementById('change-view-btn').addEventListener('click', function () {
323+
const csvElement = document.getElementById('product-csv');
324+
const currentView = csvElement.getAttribute('csv-as') || 'table';
325+
326+
// Toggle between table and cards view
327+
if (currentView === 'table') {
328+
csvElement.setAttribute('csv-as', 'cards');
329+
} else {
330+
csvElement.setAttribute('csv-as', 'table');
331+
}
332+
333+
// Re-process to apply the change
334+
processCsvTags();
335+
});
336+
337+
document.getElementById('change-sort-btn').addEventListener('click', function () {
338+
const csvElement = document.getElementById('product-csv');
339+
const currentSort = csvElement.getAttribute('sort') || 'name:csv-asc';
340+
341+
// Toggle between ascending and descending sort
342+
if (currentSort.includes('csv-asc')) {
343+
csvElement.setAttribute('sort', 'name:csv-desc');
344+
} else {
345+
csvElement.setAttribute('sort', 'name:csv-asc');
346+
}
347+
348+
// Re-process to apply the change
349+
processCsvTags();
350+
});
351+
});
352+
353+
// Listen for CSV load events
354+
document.addEventListener('csvLoaded', function (e) {
355+
console.log('CSV data loaded:', e.detail.element.id);
356+
// You can perform additional actions here after CSV is loaded
357+
});
358+
</script>
359+
</body>
360+
361+
</html>

editor/sales.csv renamed to csv-test/sales.csv

File renamed without changes.

0 commit comments

Comments
 (0)