Skip to content

Commit f9397ce

Browse files
hesamuraihesamurai
authored
feat: code samples visual improvement (#88)
* add data screen to server-rendered-list.html * add data screen to server-rendered-multiple-lists.html * add data screen to data-driven-list.html * add data screen to ordered-data-driven-list.html * add data screen to mapped-data-driven-list.html * add data screen to styling-data-driven-list.html * add data screen to data-persistence-in-local-storage.html * add data screen to enable-disable.html * add data screen to nesting-levels.html
1 parent 79f5749 commit f9397ce

10 files changed

+197
-107
lines changed

‎dev/css/main.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,33 @@ body {
22
font-family: 'Roboto', sans-serif;
33
}
44

5+
.sample-wrap {
6+
display: flex;
7+
gap: 10px;
8+
margin: 20px 0;
9+
}
10+
11+
#draggable,
12+
.draggable {
13+
flex-basis: 50%;
14+
margin: 0;
15+
}
16+
17+
#draggable li:last-child,
18+
.draggable li:last-child {
19+
margin-bottom: 0;
20+
}
21+
22+
.result-wrap {
23+
flex-basis: 50%;
24+
margin: 0;
25+
border: 1px solid #ccc;
26+
padding: 10px;
27+
}
28+
529
.nested-sort {
630
padding: 0;
31+
margin: 0;
732
}
833

934
.nested-sort--enabled li {

‎dev/data-driven-list.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ <h1>A data-driven list</h1>
1515

1616
<p>The main goal is to create a tree-like list of nested items. You should be able to achieve that by simply dragging and dropping the items using your mouse. Touch screens are not supported yet! 😐</p>
1717

18-
<div id="draggable2"></div>
18+
<div class="sample-wrap">
19+
<div id="draggable"></div>
20+
<pre class="result-wrap"></pre>
21+
</div>
1922
</div>
2023

2124
<!-- Scripts -->
@@ -46,11 +49,13 @@ <h1>A data-driven list</h1>
4649
new NestedSort({
4750
actions: {
4851
onDrop: function (data) {
52+
const resultWrap = document.querySelector('.result-wrap')
53+
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
4954
console.log(data)
5055
}
5156
},
5257
data: data,
53-
el: '#draggable2',
58+
el: '#draggable',
5459
droppingEdge: 5
5560
})
5661
})()

‎dev/data-persistence-in-local-storage.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ <h1>Persisting Data in Local Storage</h1>
1616
<p>Try to re-order the item and refresh the page. You'll see that your new order is persisting unless you clear your
1717
browser local storage.</p>
1818

19-
<div id="draggable"></div>
19+
<div class="sample-wrap">
20+
<div id="draggable"></div>
21+
<pre class="result-wrap"></pre>
22+
</div>
2023
</div>
2124

2225
<!-- Scripts -->
@@ -30,9 +33,11 @@ <h1>Persisting Data in Local Storage</h1>
3033
{ item_id: 4, item_title: 'Four', position: 2 },
3134
{ item_id: 5, item_title: 'Five', position: 1 },
3235
]
33-
const dataKey = 'nestedSortData'
36+
const dataKey = 'nestedSortDataDataPersistenceSample'
3437
const data = JSON.parse(localStorage.getItem(dataKey)) || originalData
3538
function onDrop (data) {
39+
const resultWrap = document.querySelector('.result-wrap')
40+
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
3641
console.log(data)
3742
const newData = originalData.map(origItem => {
3843
const newItem = data.find(item => parseInt(item.item_id) === origItem.item_id)

‎dev/enable-disable.html‎

Lines changed: 64 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -18,41 +18,79 @@ <h2>Server rendered list</h2>
1818
<button type="button" onclick="initServerRenderedList()">Init / Enable</button>
1919
<button type="button" onclick="destroyServerRenderedList()">Destroy / Disable</button>
2020

21-
<ul id="server-rendered">
22-
<li data-id="1">Topic 1</li>
23-
<li data-id="2">Topic 2</li>
24-
<li data-id="3">Topic 3
25-
<ul data-id="3">
26-
<li data-id="31">Topic 3-1</li>
27-
<li data-id="32">Topic 3-2</li>
28-
</ul>
29-
</li>
30-
<li data-id="4">Topic 4</li>
31-
<li data-id="5">Topic 5</li>
32-
</ul>
33-
34-
<hr>
21+
<div class="sample-wrap">
22+
<ul class="draggable">
23+
<li data-id="1">Topic 1</li>
24+
<li data-id="2">Topic 2</li>
25+
<li data-id="3">Topic 3
26+
<ul data-id="3">
27+
<li data-id="31">Topic 3-1</li>
28+
<li data-id="32">Topic 3-2</li>
29+
</ul>
30+
</li>
31+
<li data-id="4">Topic 4</li>
32+
<li data-id="5">Topic 5</li>
33+
</ul>
34+
<pre class="result-wrap result-wrap-1"></pre>
35+
</div>
3536

3637
<h2>Local storage persistent data-driven list</h2>
3738
<button type="button" onclick="initDataDrivenList()">Init / Enable</button>
3839
<button type="button" onclick="destroyDataDrivenList()">Destroy / Disable</button>
3940

40-
<div id="data-driven"></div>
41+
<div class="sample-wrap">
42+
<div id="draggable"></div>
43+
<pre class="result-wrap result-wrap-2"></pre>
44+
</div>
4145
</div>
4246

4347
<!-- Scripts -->
4448
<script src="../dist/nested-sort.umd.js"></script>
4549
<script>
50+
// Local storage persistent data-driven list
51+
const originalData = [
52+
{ item_id: 1, item_title: 'One', position: 5 },
53+
{ item_id: 2, item_title: 'Two', position: 4 },
54+
{ item_id: 3, item_title: 'Three', position: 3 },
55+
{ item_id: 4, item_title: 'Four', position: 2 },
56+
{ item_id: 5, item_title: 'Five', position: 1 },
57+
]
58+
const dataKey = 'nestedSortDataEnableDisableSample'
59+
let data = JSON.parse(localStorage.getItem(dataKey)) || originalData
60+
61+
function onDropHandler (orderedItems) {
62+
console.log(orderedItems)
63+
const newData = originalData.map(origItem => {
64+
const newItem = orderedItems.find(item => parseInt(item.item_id) === origItem.item_id)
65+
return Object.assign({}, origItem, {
66+
position: newItem.position,
67+
item_parent: newItem.item_parent
68+
})
69+
})
70+
data = newData
71+
localStorage.setItem(dataKey, JSON.stringify(newData))
72+
}
73+
74+
const propertyMap = {
75+
id: 'item_id',
76+
parent: 'item_parent',
77+
text: 'item_title',
78+
order: 'position',
79+
}
80+
4681
// Server rendered list
4782
const startServerRenderedList = () => {
4883
window.serverRenderedList = new NestedSort({
4984
actions: {
50-
onDrop: function (data) {
51-
console.log(data)
85+
onDrop(data) {
86+
const resultWrap = document.querySelector('.result-wrap-1')
87+
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
88+
onDropHandler(data)
5289
}
5390
},
91+
propertyMap,
5492
init: false,
55-
el: '#server-rendered',
93+
el: '.draggable',
5694
droppingEdge: 5
5795
})
5896
}
@@ -69,43 +107,19 @@ <h2>Local storage persistent data-driven list</h2>
69107

70108
startServerRenderedList()
71109

72-
// Local storage persistent data-driven list
73-
const originalData = [
74-
{ item_id: 1, item_title: 'One', position: 5 },
75-
{ item_id: 2, item_title: 'Two', position: 4 },
76-
{ item_id: 3, item_title: 'Three', position: 3 },
77-
{ item_id: 4, item_title: 'Four', position: 2 },
78-
{ item_id: 5, item_title: 'Five', position: 1 },
79-
]
80-
const dataKey = 'nestedSortData'
81-
let data = JSON.parse(localStorage.getItem(dataKey)) || originalData
82-
function onDrop (orderedItems) {
83-
console.log(orderedItems)
84-
const newData = originalData.map(origItem => {
85-
const newItem = orderedItems.find(item => parseInt(item.item_id) === origItem.item_id)
86-
return Object.assign({}, origItem, {
87-
position: newItem.position,
88-
item_parent: newItem.item_parent
89-
})
90-
})
91-
data = newData
92-
localStorage.setItem(dataKey, JSON.stringify(newData))
93-
}
94-
95110
const startDataDrivenList = () => {
96111
window.dataDrivenList = new NestedSort({
97112
actions: {
98-
onDrop
113+
onDrop(data) {
114+
const resultWrap = document.querySelector('.result-wrap-2')
115+
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
116+
onDropHandler(data)
117+
}
99118
},
100-
data: data,
119+
data,
101120
init: false,
102-
propertyMap: {
103-
id: 'item_id',
104-
parent: 'item_parent',
105-
text: 'item_title',
106-
order: 'position',
107-
},
108-
el: '#data-driven',
121+
propertyMap,
122+
el: '#draggable',
109123
droppingEdge: 5
110124
})
111125
}

‎dev/mapped-data-driven-list.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ <h1>A mapped data-driven list</h1>
1515

1616
<p>The main goal is to create a tree-like list of nested items. You should be able to achieve that by simply dragging and dropping the items using your mouse. Touch screens are not supported yet! 😐</p>
1717

18-
<div id="draggable"></div>
18+
<div class="sample-wrap">
19+
<div id="draggable"></div>
20+
<pre class="result-wrap"></pre>
21+
</div>
1922
</div>
2023

2124
<!-- Scripts -->
@@ -37,6 +40,8 @@ <h1>A mapped data-driven list</h1>
3740
new NestedSort({
3841
actions: {
3942
onDrop: function (data) {
43+
const resultWrap = document.querySelector('.result-wrap')
44+
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
4045
console.log(data)
4146
}
4247
},

‎dev/nesting-levels.html‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,21 @@ <h1>Nesting Levels Option</h1>
1616
<label for="nesting-level">Nesting Levels:</label>
1717
<input type="number" id="nesting-level" onchange="updateNestingLevels()" value="-1">
1818

19-
<ul id="draggable">
20-
<li data-id="1">Topic 1</li>
21-
<li data-id="2">Topic 2</li>
22-
<li data-id="3">Topic 3</li>
23-
<li data-id="4">Topic 4</li>
24-
<li data-id="5">Topic 5</li>
25-
<li data-id="6">Topic 6</li>
26-
<li data-id="7">Topic 7</li>
27-
<li data-id="8">Topic 8</li>
28-
<li data-id="9">Topic 9</li>
29-
<li data-id="10">Topic 10</li>
30-
</ul>
19+
<div class="sample-wrap">
20+
<ul id="draggable">
21+
<li data-id="1">Topic 1</li>
22+
<li data-id="2">Topic 2</li>
23+
<li data-id="3">Topic 3</li>
24+
<li data-id="4">Topic 4</li>
25+
<li data-id="5">Topic 5</li>
26+
<li data-id="6">Topic 6</li>
27+
<li data-id="7">Topic 7</li>
28+
<li data-id="8">Topic 8</li>
29+
<li data-id="9">Topic 9</li>
30+
<li data-id="10">Topic 10</li>
31+
</ul>
32+
<pre class="result-wrap"></pre>
33+
</div>
3134
</div>
3235

3336
<!-- Scripts -->
@@ -38,6 +41,8 @@ <h1>Nesting Levels Option</h1>
3841
window.ns = new NestedSort({
3942
actions: {
4043
onDrop: function (data) {
44+
const resultWrap = document.querySelector('.result-wrap')
45+
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
4146
console.log(data)
4247
}
4348
},

‎dev/ordered-data-driven-list.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ <h1>An ordered data-driven list</h1>
1515

1616
<p>The main goal is to create a tree-like list of nested items. You should be able to achieve that by simply dragging and dropping the items using your mouse. Touch screens are not supported yet! 😐</p>
1717

18-
<div id="draggable"></div>
18+
<div class="sample-wrap">
19+
<div id="draggable"></div>
20+
<pre class="result-wrap"></pre>
21+
</div>
1922
</div>
2023

2124
<!-- Scripts -->
@@ -38,6 +41,8 @@ <h1>An ordered data-driven list</h1>
3841
new NestedSort({
3942
actions: {
4043
onDrop: function (data) {
44+
const resultWrap = document.querySelector('.result-wrap')
45+
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
4146
console.log(data)
4247
}
4348
},

‎dev/server-rendered-list.html‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,34 @@
1313
<div class="container">
1414
<h1>A server-rendered list</h1>
1515

16-
<p>The main goal is to create a tree-like list of nested items. You should be able to achieve that by simply dragging and dropping the items using your mouse. Touch screens are not supported yet! 😐</p>
16+
<p>
17+
The main goal is to create a tree-like list of nested items. You should be able to achieve that by simply dragging and dropping the items using your mouse.
18+
The result would appear on the right side of the screen.
19+
</p>
1720

1821
<input type="checkbox" id="property-mapping" onchange="updateList()">
1922
<label for="property-mapping">Use property mapping (affects the list data structure logged to the console after each drag and drop)</label>
2023

21-
<ul id="draggable">
22-
<li data-id="1">Topic 1</li>
23-
<li data-id="2">Topic 2</li>
24-
<li data-id="3">Topic 3
25-
<ul data-id="3">
26-
<li data-id="31">Topic 3-1</li>
27-
<li data-id="32">Topic 3-2</li>
28-
<li data-id="33">Topic 3-3</li>
29-
</ul>
30-
</li>
31-
<li data-id="4">Topic 4</li>
32-
<li data-id="5">Topic 5</li>
33-
<li data-id="6">Topic 6</li>
34-
<li data-id="7">Topic 7</li>
35-
<li data-id="8">Topic 8</li>
36-
</ul>
24+
<div class="sample-wrap">
25+
<ul id="draggable">
26+
<li data-id="1">Topic 1</li>
27+
<li data-id="2">Topic 2</li>
28+
<li data-id="3">Topic 3
29+
<ul data-id="3">
30+
<li data-id="31">Topic 3-1</li>
31+
<li data-id="32">Topic 3-2</li>
32+
<li data-id="33">Topic 3-3</li>
33+
</ul>
34+
</li>
35+
<li data-id="4">Topic 4</li>
36+
<li data-id="5">Topic 5</li>
37+
<li data-id="6">Topic 6</li>
38+
<li data-id="7">Topic 7</li>
39+
<li data-id="8">Topic 8</li>
40+
</ul>
41+
42+
<pre class="result-wrap"></pre>
43+
</div>
3744
</div>
3845

3946
<!-- Scripts -->
@@ -46,6 +53,8 @@ <h1>A server-rendered list</h1>
4653
window.ns = new NestedSort({
4754
actions: {
4855
onDrop: function (data) {
56+
const resultWrap = document.querySelector('.result-wrap')
57+
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
4958
console.log(`data ${usePropertyMapping ? 'with' : 'without'} property mapping`, data)
5059
}
5160
},

0 commit comments

Comments
 (0)