Skip to content

Commit 4546205

Browse files
ivosdcivosdc
committed
enabled sadowed switch for individual dispatching
1 parent cae01e0 commit 4546205

File tree

5 files changed

+66
-82
lines changed

5 files changed

+66
-82
lines changed

‎dist/crud-table-1-config-html.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ let table_config = {
1616
let genericCrudTable = document.getElementById('crud-table-1');
1717
const sortStore = [];
1818

19+
genericCrudTable.setAttribute('shadowed', 'true');
1920
genericCrudTable.setAttribute('table_config', JSON.stringify(table_config));
2021
genericCrudTable.setAttribute('table_data', JSON.stringify(myData));
2122

‎dist/crud-table-2-config-html.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ let table_config2 = {
1616
let genericCrudTable2 = document.getElementById('crud-table-2');
1717
const sortStore2 = [];
1818

19+
genericCrudTable2.setAttribute('shadowed', 'true');
1920
genericCrudTable2.setAttribute('table_config', JSON.stringify(table_config2));
2021
genericCrudTable2.setAttribute('table_data', JSON.stringify(myData2));
2122

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svelte-generic-crud-table",
3-
"version": "1.5.83",
3+
"version": "1.5.84",
44
"description": "<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB",
55
"main": "dist/build/crud-table.js",
66
"module": "dist/build/crud-table.mjs",

‎src/SvelteGenericCrudTable.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
<svelte:options tag={'crud-table'}/>
22
<script>
3+
import {createEventDispatcher} from 'svelte';
34
import {SvelteGenericCrudTableService} from "./SvelteGenericCrudTableService";
45
import {icontrash, iconedit, iconsend, icondetail, iconcancel, iconcreate, iconsave} from './svgIcon'
56
7+
/* istanbul ignore next line */
8+
export let shadowed = false;
9+
10+
const dispatch = createEventDispatcher();
11+
612
const EDIT = 'EDIT';
713
const DELETE = 'DELETE';
814
const CREATE = 'CREATE';
@@ -96,11 +102,16 @@
96102
}
97103
98104
function dispatcher(name, details, event) {
105+
/* istanbul ignore next */
106+
if (shadowed) {
99107
event.target.dispatchEvent(
100108
new CustomEvent(name, {
101109
composed: true,
102110
detail: details
103111
}))
112+
} else {
113+
dispatch(name, details);
114+
}
104115
}
105116
106117

‎src/SvelteGenericCrudTableService.spec-old.js‎

Lines changed: 52 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,9 @@ const config = {
1111
}
1212

1313

14-
1514
describe('Test SvelteGenericCrudTableService', () => {
16-
let call = (val, callback) => {
17-
runTest(val);
18-
callback();
19-
}
20-
21-
call(false, () => {console.log('light DOM')})
22-
call(true, () => {console.log('shadow DOM')})
23-
});
24-
25-
26-
function runTest(shadowed) {
2715

28-
const genericCrudTable = new SvelteGenericCrudTableService(config, shadowed);
16+
const genericCrudTable = new SvelteGenericCrudTableService(config);
2917

3018

3119
it('testGetKey', async () => {
@@ -50,10 +38,14 @@ function runTest(shadowed) {
5038
const toEdit = 'name';
5139
const documentHTML = '<!doctype html><html><body>' +
5240
'<crud-table>' +
41+
'<div class="table">' +
42+
'<div class="row">' +
5343
'<div id="' + toEdit + '0' + '"></div>' +
54-
'<div id="' + toEdit + '0' + ':disabled"></div>' +
44+
'<div id="' + toEdit + '0' + '-disabled"></div>' +
5545
'<div id="' + config.name + 'options-default0"></div>' +
5646
'<div id="' + config.name + 'options-edit0"></div>' +
47+
'</div>' +
48+
'</div>' +
5749
'</crud-table>' +
5850
'</body></html>';
5951
document.body.innerHTML = documentHTML;
@@ -64,35 +56,27 @@ function runTest(shadowed) {
6456

6557
let actual = genericCrudTable.resetEditMode(0)
6658

67-
if (shadowed) {
68-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + toEdit + '0:disabled').classList.contains('shown')).toBe(true);
59+
expect(document.getElementById(config.name + toEdit + '0-disabled').classList.contains('shown')).toBe(true);
6960

70-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-default0").classList.contains('hidden')).toBe(false);
71-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-default0").classList.contains('shown')).toBe(true);
61+
expect(document.getElementById(config.name + "options-default0").classList.contains('hidden')).toBe(false);
62+
expect(document.getElementById(config.name + "options-default0").classList.contains('shown')).toBe(true);
7263

73-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-edit0").classList.contains('hidden')).toBe(true);
74-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-edit0").classList.contains('shown')).toBe(false);
75-
76-
} else {
77-
78-
expect(document.getElementById(config.name + toEdit + '0:disabled').classList.contains('shown')).toBe(true);
79-
80-
expect(document.getElementById(config.name + "options-default0").classList.contains('hidden')).toBe(false);
81-
expect(document.getElementById(config.name + "options-default0").classList.contains('shown')).toBe(true);
82-
83-
expect(document.getElementById(config.name + "options-edit0").classList.contains('hidden')).toBe(true);
84-
expect(document.getElementById(config.name + "options-edit0").classList.contains('shown')).toBe(false);
85-
}
64+
expect(document.getElementById(config.name + "options-edit0").classList.contains('hidden')).toBe(true);
65+
expect(document.getElementById(config.name + "options-edit0").classList.contains('shown')).toBe(false);
8666
})
8767

8868
it('testSetEditMode', async () => {
8969
const toEdit = 'name';
9070
const documentHTML = '<!doctype html><html><body>' +
9171
'<crud-table>' +
72+
'<div class="table">' +
73+
'<div class="row">' +
9274
'<div id="' + toEdit + '0' + '"></div>' +
93-
'<div id="' + toEdit + '0' + ':disabled"></div>' +
75+
'<div id="' + toEdit + '0' + '-disabled"></div>' +
9476
'<div id="options-default0"></div>' +
9577
'<div id="options-edit0"></div>' +
78+
'</div>' +
79+
'</div>' +
9680
'</crud-table>' +
9781
'</body></html>';
9882
document.body.innerHTML = documentHTML
@@ -103,63 +87,55 @@ function runTest(shadowed) {
10387

10488
let actual = genericCrudTable.setEditMode(0)
10589

106-
if (shadowed) {
107-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + toEdit + '0').classList.contains('shown')).toBe(true)
10890

109-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-default0").classList.contains('hidden')).toBe(true);
110-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-default0").classList.contains('shown')).toBe(false);
91+
expect(document.getElementById(config.name + toEdit + '0').classList.contains('shown')).toBe(true)
11192

112-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-edit0").classList.contains('hidden')).toBe(false);
113-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-edit0").classList.contains('shown')).toBe(true);
93+
expect(document.getElementById(config.name + "options-default0").classList.contains('hidden')).toBe(true);
94+
expect(document.getElementById(config.name + "options-default0").classList.contains('shown')).toBe(false);
11495

115-
} else {
116-
expect(document.getElementById(config.name + toEdit + '0').classList.contains('shown')).toBe(true)
117-
118-
expect(document.getElementById(config.name + "options-default0").classList.contains('hidden')).toBe(true);
119-
expect(document.getElementById(config.name + "options-default0").classList.contains('shown')).toBe(false);
120-
121-
expect(document.getElementById(config.name + "options-edit0").classList.contains('hidden')).toBe(false);
122-
expect(document.getElementById(config.name + "options-edit0").classList.contains('shown')).toBe(true);
123-
}
96+
expect(document.getElementById(config.name + "options-edit0").classList.contains('hidden')).toBe(false);
97+
expect(document.getElementById(config.name + "options-edit0").classList.contains('shown')).toBe(true);
12498
})
12599

126100
it('testResetDeleteMode', async () => {
127101
const documentHTML = '<!doctype html><html><body>' +
128102
'<crud-table>' +
103+
'<div class="table">' +
104+
'<div class="row">' +
129105
'<div id="options-default"></div>' +
130106
'<div id="options-delete"></div>' +
107+
'</div>' +
108+
'</div>' +
131109
'</crud-table>' +
132110
'</body></html>';
133111
document.body.innerHTML = documentHTML
134112

135113
const crudTable = document.querySelector('crud-table');
136114
const shadowRoot = crudTable.attachShadow({mode: 'open'});
137115
shadowRoot.innerHTML = documentHTML;
116+
let target = document.getElementById('options-default');
138117

139-
let actual = genericCrudTable.resetDeleteMode('')
118+
let e = new CustomEvent('dummy', { target: target })
140119

141-
if (shadowed) {
142-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-default").classList.contains('hidden')).toBe(false);
143-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-default").classList.contains('shown')).toBe(true);
120+
let actual = genericCrudTable.resetDeleteMode('', e)
144121

145-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-delete").classList.contains('hidden')).toBe(true);
146-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-delete").classList.contains('shown')).toBe(false);
122+
expect(document.getElementById(config.name + "options-default").classList.contains('hidden')).toBe(false);
123+
expect(document.getElementById(config.name + "options-default").classList.contains('shown')).toBe(true);
147124

148-
} else {
149-
expect(document.getElementById(config.name + "options-default").classList.contains('hidden')).toBe(false);
150-
expect(document.getElementById(config.name + "options-default").classList.contains('shown')).toBe(true);
151-
152-
expect(document.getElementById(config.name + "options-delete").classList.contains('hidden')).toBe(true);
153-
expect(document.getElementById(config.name + "options-delete").classList.contains('shown')).toBe(false);
154-
}
125+
expect(document.getElementById(config.name + "options-delete").classList.contains('hidden')).toBe(true);
126+
expect(document.getElementById(config.name + "options-delete").classList.contains('shown')).toBe(false);
155127
})
156128

157129

158130
it('testSetDeleteMode', async () => {
159131
const documentHTML = '<!doctype html><html><body>' +
160132
'<crud-table>' +
133+
'<div class="table">' +
134+
'<div class="row">' +
161135
'<div id="options-default"></div>' +
162136
'<div id="options-delete"></div>' +
137+
'</div>' +
138+
'</div>' +
163139
'</crud-table>' +
164140
'</body></html>';
165141
document.body.innerHTML = documentHTML
@@ -170,28 +146,24 @@ function runTest(shadowed) {
170146

171147
let actual = genericCrudTable.setDeleteMode('')
172148

173-
if (shadowed) {
174-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-default").classList.contains('hidden')).toBe(true);
175-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-default").classList.contains('shown')).toBe(false);
149+
expect(document.getElementById(config.name + "options-default").classList.contains('hidden')).toBe(true);
150+
expect(document.getElementById(config.name + "options-default").classList.contains('shown')).toBe(false);
176151

177-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-delete").classList.contains('hidden')).toBe(false);
178-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + "options-delete").classList.contains('shown')).toBe(true);
179-
} else {
180-
expect(document.getElementById(config.name + "options-default").classList.contains('hidden')).toBe(true);
181-
expect(document.getElementById(config.name + "options-default").classList.contains('shown')).toBe(false);
152+
expect(document.getElementById(config.name + "options-delete").classList.contains('hidden')).toBe(false);
153+
expect(document.getElementById(config.name + "options-delete").classList.contains('shown')).toBe(true);
182154

183-
expect(document.getElementById(config.name + "options-delete").classList.contains('hidden')).toBe(false);
184-
expect(document.getElementById(config.name + "options-delete").classList.contains('shown')).toBe(true);
185-
186-
}
187155
})
188156

189157
it('testGatherUpdates', async () => {
190158
const table = [{id: 42, name: 'A_NAME'}];
191159
const documentHTML = '<!doctype html><html><body>' +
192160
'<crud-table>' +
161+
'<div class="table">' +
162+
'<div class="row">' +
193163
'<input id="' + config.name + 'id0" value="42"/>' +
194164
'<input id="' + config.name + 'name0" value="A_NAME"/>' +
165+
'</div>' +
166+
'</div>' +
195167
'</crud-table>' +
196168
'</body></html>';
197169
document.body.innerHTML = documentHTML;
@@ -209,8 +181,12 @@ function runTest(shadowed) {
209181
const table = [{id: 42, name: 'A_NAME'}];
210182
const documentHTML = '<!doctype html><html><body>' +
211183
'<crud-table>' +
184+
'<div class="table">' +
185+
'<div class="row">' +
212186
'<input id="' + config.name + 'id0" value="424242"/>' +
213187
'<input id="' + config.name + 'name0" value="ANOTHER_NAME"/>' +
188+
'</div>' +
189+
'</div>' +
214190
'</crud-table>' +
215191
'</body></html>';
216192
document.body.innerHTML = documentHTML;
@@ -221,13 +197,8 @@ function runTest(shadowed) {
221197

222198
genericCrudTable.resetRawValues(0, table);
223199

224-
if (shadowed) {
225-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + 'id0').value).toBe('424242');
226-
expect(document.querySelector('crud-table').shadowRoot.getElementById(config.name + 'name0').value).toBe('A_NAME');
227-
} else {
228-
expect(document.getElementById(config.name + 'id0').value).toBe('424242');
229-
expect(document.getElementById(config.name + 'name0').value).toBe('A_NAME');
230-
}
200+
expect(document.getElementById(config.name + 'id0').value).toBe('424242');
201+
expect(document.getElementById(config.name + 'name0').value).toBe('A_NAME');
231202
})
232203

233204
it('testIsShowField', async () => {
@@ -268,10 +239,10 @@ function runTest(shadowed) {
268239
{name: 'name', show: true, edit: true}
269240
]
270241
}
271-
const genericCrudTable = new SvelteGenericCrudTableService(config, shadowed);
242+
const genericCrudTable = new SvelteGenericCrudTableService(config);
272243
let actual = genericCrudTable.getShowFieldWidth('name');
273244

274245
expect(actual).toBe('100px');
275246
})
276247

277-
};
248+
});

0 commit comments

Comments
 (0)