Skip to content

feat: code samples visual improvement #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jun 9, 2023
Merged

feat: code samples visual improvement #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dd57853
add data screen to server-rendered-list.html
hesamurai Jun 9, 2023
234562d
add data screen to server-rendered-multiple-lists.html
hesamurai Jun 9, 2023
8dc3e7e
add data screen to data-driven-list.html
hesamurai Jun 9, 2023
547a0db
add data screen to ordered-data-driven-list.html
hesamurai Jun 9, 2023
c4d674d
add data screen to mapped-data-driven-list.html
hesamurai Jun 9, 2023
ab935b4
add data screen to styling-data-driven-list.html
hesamurai Jun 9, 2023
28bdbff
add data screen to data-persistence-in-local-storage.html
hesamurai Jun 9, 2023
4b5ccac
add data screen to enable-disable.html
hesamurai Jun 9, 2023
f83ecbd
add data screen to nesting-levels.html
hesamurai Jun 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions dev/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,33 @@ body {
font-family: 'Roboto', sans-serif;
}

.sample-wrap {
display: flex;
gap: 10px;
margin: 20px 0;
}

#draggable,
.draggable {
flex-basis: 50%;
margin: 0;
}

#draggable li:last-child,
.draggable li:last-child {
margin-bottom: 0;
}

.result-wrap {
flex-basis: 50%;
margin: 0;
border: 1px solid #ccc;
padding: 10px;
}

.nested-sort {
padding: 0;
margin: 0;
}

.nested-sort--enabled li {
Expand Down
9 changes: 7 additions & 2 deletions dev/data-driven-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ <h1>A data-driven list</h1>

<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>

<div id="draggable2"></div>
<div class="sample-wrap">
<div id="draggable"></div>
<pre class="result-wrap"></pre>
</div>
</div>

<!-- Scripts -->
Expand Down Expand Up @@ -46,11 +49,13 @@ <h1>A data-driven list</h1>
new NestedSort({
actions: {
onDrop: function (data) {
const resultWrap = document.querySelector('.result-wrap')
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
console.log(data)
}
},
data: data,
el: '#draggable2',
el: '#draggable',
droppingEdge: 5
})
})()
Expand Down
9 changes: 7 additions & 2 deletions dev/data-persistence-in-local-storage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ <h1>Persisting Data in Local Storage</h1>
<p>Try to re-order the item and refresh the page. You'll see that your new order is persisting unless you clear your
browser local storage.</p>

<div id="draggable"></div>
<div class="sample-wrap">
<div id="draggable"></div>
<pre class="result-wrap"></pre>
</div>
</div>

<!-- Scripts -->
Expand All @@ -30,9 +33,11 @@ <h1>Persisting Data in Local Storage</h1>
{ item_id: 4, item_title: 'Four', position: 2 },
{ item_id: 5, item_title: 'Five', position: 1 },
]
const dataKey = 'nestedSortData'
const dataKey = 'nestedSortDataDataPersistenceSample'
const data = JSON.parse(localStorage.getItem(dataKey)) || originalData
function onDrop (data) {
const resultWrap = document.querySelector('.result-wrap')
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
console.log(data)
const newData = originalData.map(origItem => {
const newItem = data.find(item => parseInt(item.item_id) === origItem.item_id)
Expand Down
114 changes: 64 additions & 50 deletions dev/enable-disable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,41 +18,79 @@ <h2>Server rendered list</h2>
<button type="button" onclick="initServerRenderedList()">Init / Enable</button>
<button type="button" onclick="destroyServerRenderedList()">Destroy / Disable</button>

<ul id="server-rendered">
<li data-id="1">Topic 1</li>
<li data-id="2">Topic 2</li>
<li data-id="3">Topic 3
<ul data-id="3">
<li data-id="31">Topic 3-1</li>
<li data-id="32">Topic 3-2</li>
</ul>
</li>
<li data-id="4">Topic 4</li>
<li data-id="5">Topic 5</li>
</ul>

<hr>
<div class="sample-wrap">
<ul class="draggable">
<li data-id="1">Topic 1</li>
<li data-id="2">Topic 2</li>
<li data-id="3">Topic 3
<ul data-id="3">
<li data-id="31">Topic 3-1</li>
<li data-id="32">Topic 3-2</li>
</ul>
</li>
<li data-id="4">Topic 4</li>
<li data-id="5">Topic 5</li>
</ul>
<pre class="result-wrap result-wrap-1"></pre>
</div>

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

<div id="data-driven"></div>
<div class="sample-wrap">
<div id="draggable"></div>
<pre class="result-wrap result-wrap-2"></pre>
</div>
</div>

<!-- Scripts -->
<script src="../dist/nested-sort.umd.js"></script>
<script>
// Local storage persistent data-driven list
const originalData = [
{ item_id: 1, item_title: 'One', position: 5 },
{ item_id: 2, item_title: 'Two', position: 4 },
{ item_id: 3, item_title: 'Three', position: 3 },
{ item_id: 4, item_title: 'Four', position: 2 },
{ item_id: 5, item_title: 'Five', position: 1 },
]
const dataKey = 'nestedSortDataEnableDisableSample'
let data = JSON.parse(localStorage.getItem(dataKey)) || originalData

function onDropHandler (orderedItems) {
console.log(orderedItems)
const newData = originalData.map(origItem => {
const newItem = orderedItems.find(item => parseInt(item.item_id) === origItem.item_id)
return Object.assign({}, origItem, {
position: newItem.position,
item_parent: newItem.item_parent
})
})
data = newData
localStorage.setItem(dataKey, JSON.stringify(newData))
}

const propertyMap = {
id: 'item_id',
parent: 'item_parent',
text: 'item_title',
order: 'position',
}

// Server rendered list
const startServerRenderedList = () => {
window.serverRenderedList = new NestedSort({
actions: {
onDrop: function (data) {
console.log(data)
onDrop(data) {
const resultWrap = document.querySelector('.result-wrap-1')
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
onDropHandler(data)
}
},
propertyMap,
init: false,
el: '#server-rendered',
el: '.draggable',
droppingEdge: 5
})
}
Expand All @@ -69,43 +107,19 @@ <h2>Local storage persistent data-driven list</h2>

startServerRenderedList()

// Local storage persistent data-driven list
const originalData = [
{ item_id: 1, item_title: 'One', position: 5 },
{ item_id: 2, item_title: 'Two', position: 4 },
{ item_id: 3, item_title: 'Three', position: 3 },
{ item_id: 4, item_title: 'Four', position: 2 },
{ item_id: 5, item_title: 'Five', position: 1 },
]
const dataKey = 'nestedSortData'
let data = JSON.parse(localStorage.getItem(dataKey)) || originalData
function onDrop (orderedItems) {
console.log(orderedItems)
const newData = originalData.map(origItem => {
const newItem = orderedItems.find(item => parseInt(item.item_id) === origItem.item_id)
return Object.assign({}, origItem, {
position: newItem.position,
item_parent: newItem.item_parent
})
})
data = newData
localStorage.setItem(dataKey, JSON.stringify(newData))
}

const startDataDrivenList = () => {
window.dataDrivenList = new NestedSort({
actions: {
onDrop
onDrop(data) {
const resultWrap = document.querySelector('.result-wrap-2')
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
onDropHandler(data)
}
},
data: data,
data,
init: false,
propertyMap: {
id: 'item_id',
parent: 'item_parent',
text: 'item_title',
order: 'position',
},
el: '#data-driven',
propertyMap,
el: '#draggable',
droppingEdge: 5
})
}
Expand Down
7 changes: 6 additions & 1 deletion dev/mapped-data-driven-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ <h1>A mapped data-driven list</h1>

<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>

<div id="draggable"></div>
<div class="sample-wrap">
<div id="draggable"></div>
<pre class="result-wrap"></pre>
</div>
</div>

<!-- Scripts -->
Expand All @@ -37,6 +40,8 @@ <h1>A mapped data-driven list</h1>
new NestedSort({
actions: {
onDrop: function (data) {
const resultWrap = document.querySelector('.result-wrap')
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
console.log(data)
}
},
Expand Down
29 changes: 17 additions & 12 deletions dev/nesting-levels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,21 @@ <h1>Nesting Levels Option</h1>
<label for="nesting-level">Nesting Levels:</label>
<input type="number" id="nesting-level" onchange="updateNestingLevels()" value="-1">

<ul id="draggable">
<li data-id="1">Topic 1</li>
<li data-id="2">Topic 2</li>
<li data-id="3">Topic 3</li>
<li data-id="4">Topic 4</li>
<li data-id="5">Topic 5</li>
<li data-id="6">Topic 6</li>
<li data-id="7">Topic 7</li>
<li data-id="8">Topic 8</li>
<li data-id="9">Topic 9</li>
<li data-id="10">Topic 10</li>
</ul>
<div class="sample-wrap">
<ul id="draggable">
<li data-id="1">Topic 1</li>
<li data-id="2">Topic 2</li>
<li data-id="3">Topic 3</li>
<li data-id="4">Topic 4</li>
<li data-id="5">Topic 5</li>
<li data-id="6">Topic 6</li>
<li data-id="7">Topic 7</li>
<li data-id="8">Topic 8</li>
<li data-id="9">Topic 9</li>
<li data-id="10">Topic 10</li>
</ul>
<pre class="result-wrap"></pre>
</div>
</div>

<!-- Scripts -->
Expand All @@ -38,6 +41,8 @@ <h1>Nesting Levels Option</h1>
window.ns = new NestedSort({
actions: {
onDrop: function (data) {
const resultWrap = document.querySelector('.result-wrap')
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
console.log(data)
}
},
Expand Down
7 changes: 6 additions & 1 deletion dev/ordered-data-driven-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ <h1>An ordered data-driven list</h1>

<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>

<div id="draggable"></div>
<div class="sample-wrap">
<div id="draggable"></div>
<pre class="result-wrap"></pre>
</div>
</div>

<!-- Scripts -->
Expand All @@ -38,6 +41,8 @@ <h1>An ordered data-driven list</h1>
new NestedSort({
actions: {
onDrop: function (data) {
const resultWrap = document.querySelector('.result-wrap')
resultWrap.innerHTML = JSON.stringify(data, null, ' ')
console.log(data)
}
},
Expand Down
43 changes: 26 additions & 17 deletions dev/server-rendered-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,34 @@
<div class="container">
<h1>A server-rendered list</h1>

<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>
<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.
The result would appear on the right side of the screen.
</p>

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

<ul id="draggable">
<li data-id="1">Topic 1</li>
<li data-id="2">Topic 2</li>
<li data-id="3">Topic 3
<ul data-id="3">
<li data-id="31">Topic 3-1</li>
<li data-id="32">Topic 3-2</li>
<li data-id="33">Topic 3-3</li>
</ul>
</li>
<li data-id="4">Topic 4</li>
<li data-id="5">Topic 5</li>
<li data-id="6">Topic 6</li>
<li data-id="7">Topic 7</li>
<li data-id="8">Topic 8</li>
</ul>
<div class="sample-wrap">
<ul id="draggable">
<li data-id="1">Topic 1</li>
<li data-id="2">Topic 2</li>
<li data-id="3">Topic 3
<ul data-id="3">
<li data-id="31">Topic 3-1</li>
<li data-id="32">Topic 3-2</li>
<li data-id="33">Topic 3-3</li>
</ul>
</li>
<li data-id="4">Topic 4</li>
<li data-id="5">Topic 5</li>
<li data-id="6">Topic 6</li>
<li data-id="7">Topic 7</li>
<li data-id="8">Topic 8</li>
</ul>

<pre class="result-wrap"></pre>
</div>
</div>

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