Skip to content

Commit

Permalink
demo-folder
Browse files Browse the repository at this point in the history
  • Loading branch information
@tofsjonas
tofsjonas committed Nov 17, 2024
1 parent 470db69 commit 1bcf0cf
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 22 deletions.
214 changes: 214 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sortable test</title>

<link rel="stylesheet" href="../dist/example.css">
</head>
<body>
<h1>Sortable examples</h1>

<h2>Basic sort</h2>
<table class="sortable">
<thead>
<tr>
<th><span>Role</span></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Genius</td>
<td>Rick</td>
</tr>
<tr>
<td><a href="javascript:alert('Inline javascript works!');">Sidekick</a></td>
<td><a id="morty" href="#">Morty</a></td>
</tr>
</tbody>
</table>

<h2>Tiebreaker</h2>
<p>Sort by year</p>

<table class="sortable">
<thead>
<tr>
<th data-sort-tbr="2">Month</th>
<th data-sort-tbr="0">Year</th>
<th data-sort-tbr="3">Day</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>2010</td>
<td>25</td>
<td>12:00</td>
</tr>
<tr>
<td>11</td>
<td>2010</td>
<td>25</td>
<td>15:00</td>
</tr>
<tr>
<td>04</td>
<td>2010</td>
<td>12</td>
<td>13:00</td>
</tr>
</tbody>
</table>
<ul style="padding-left: 1.5em; font-style: italic">
<li>If year is the same, sort by month.</li>
<li>If month is the same, sort by day.</li>
<li>If day is the same, sort by time</li>
</ul>

<h2>Colspans</h2>

<table class="sortable sticky">
<thead>
<tr>
<th colspan="2">nums + chars</th>
<th data-sort-col="2">CHARS</th>
</tr>
</thead>
<tbody>
<tr>
<td>333</td>
<td>222</td>
<td>BB</td>
</tr>
<tr>
<td>1</td>
<td>111</td>
<td>CCC</td>
</tr>
<tr>
<td>22</td>
<td>333</td>
<td>A</td>
</tr>
</tbody>
</table>

<h2>Empty/null sorted last</h2>

<table class="sortable n-last lefty">
<thead>
<tr>
<th>Text</th>
<th class="indicator-left">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>jkl</td>
<td>0.4</td>
</tr>
<tr>
<td>abc</td>
<td>0</td>
</tr>
<tr>
<td>should be sorted last</td>
<td data-sort="">(if click in this column)</td>
</tr>
<tr>
<td>def</td>
<td>0.2</td>
</tr>
</tbody>
</table>
<h2>class="no-sort"</h2>
<table class="sortable">
<thead>
<tr>
<th>Role</th>
<th class="no-sort">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Genius</td>
<td>Rick</td>
</tr>
<tr>
<td>Sidekick</td>
<td>Morty</td>
</tr>
</tbody>
</table>

<h2>numeric sorting</h2>
<table class="sortable">
<thead>
<tr>
<th>Role</th>
<th>Time</th>
<th>Amount</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Genius</td>
<td>12:00:12</td>
<td>$18.49</td>
<td>2.49</td>
</tr>
<tr>
<td>Sidekick</td>
<td>12:22:11</td>
<td>$2.49</td>
<td>18.49</td>
</tr>
<tr>
<td>Butler</td>
<td>12:22:05</td>
<td>$1.96</td>
<td>1.96</td>
</tr>
</tbody>
</table>

<h2>Ascending sort</h2>

<table class="sortable asc">
<thead>
<tr>
<th><span>Role</span></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Genius</td>
<td>Rick</td>
</tr>
<tr>
<td><a href="javascript:alert('Inline javascript works!');">Sidekick</a></td>
<td><a id="morty" href="#">Morty</a></td>
</tr>
</tbody>
</table>

<script>
document.getElementById('morty').addEventListener('click', function (e) {
e.preventDefault()
alert('event listeners also work!')
})
</script>



<script src="../dist/sortable.js"></script>
<script src="../dist/sortable.a11y.js"></script>
</body>
</html>
8 changes: 0 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,15 +203,7 @@ <h2>Ascending sort</h2>
e.preventDefault()
alert('event listeners also work!')
})

// document.addEventListener('sort-start', function (e) {
// console.log('🚀 COMMANDER ~ file: index.html ~ line ~ 196 ~ ', e.target)
// })
// document.addEventListener('sort-end', function (e) {
// console.log('🚀 COMMANDER ~ file: index.html ~ line ~ 200 ~ ', e.target)
// })
</script>

<script type="module" src="/src/sortable.ts"></script>
<script type="module" src="/src/sortable.a11y.ts"></script>
</body>
Expand Down
42 changes: 28 additions & 14 deletions scripts/prepare-tests.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import fs from 'fs'
import path from 'path'

const DIST_TYPES = ['bundled', 'standalone', 'esm'] as const
const DIST_TYPES = ['bundled', 'standalone', 'esm', 'demo'] as const

function createHTML(type: (typeof DIST_TYPES)[number], minified: boolean = false) {
if (type === 'demo' && minified) return
let template = fs.readFileSync('index.html', 'utf8')

// Remove the existing script tags
Expand All @@ -12,12 +13,13 @@ function createHTML(type: (typeof DIST_TYPES)[number], minified: boolean = false
.replace('<script type="module" src="/src/sortable.ts"></script>', '')
.replace('<script type="module" src="/src/sortable.a11y.ts"></script>', '')

// Add CSS
const cssFiles = minified ? ['sortable.min.css', 'example.min.css'] : ['sortable.css', 'example.css']
const css_file_name = `example${minified ? '.min' : ''}.css`

const cssLinks = cssFiles.map((file) => `<link rel="stylesheet" href="/${file}">`).join('\n')
const css_url = type !== 'demo' ? `/${css_file_name}` : `../dist/${css_file_name}`

template = template.replace('</head>', `${cssLinks}\n</head>`)
const css_link = `<link rel="stylesheet" href="${css_url}">`

template = template.replace('</head>', `${css_link}\n</head>`)

// Generate script tags based on format and minified state
let scripts = ''
Expand All @@ -26,33 +28,45 @@ function createHTML(type: (typeof DIST_TYPES)[number], minified: boolean = false
switch (type) {
case 'bundled':
scripts = `
<script src="/sortable${jsExt}"></script>
<script src="/sortable.a11y${jsExt}"></script>`
<script src="/sortable${jsExt}"></script>
<script src="/sortable.a11y${jsExt}"></script>`
break
case 'demo':
scripts = `
<script src="../dist/sortable.js"></script>
<script src="../dist/sortable.a11y.js"></script>`
break
case 'standalone':
scripts = `
<script src="/${type}/sortable${jsExt}"></script>
<script src="/${type}/sortable.a11y${jsExt}"></script>`
<script src="/${type}/sortable${jsExt}"></script>
<script src="/${type}/sortable.a11y${jsExt}"></script>`
break
case 'esm':
scripts = `
<script type="module">
import './esm/sortable${jsExt}';
import './esm/sortable.a11y${jsExt}';
</script>`
<script type="module">
import './esm/sortable${jsExt}';
import './esm/sortable.a11y${jsExt}';
</script>`
break
}

template = template.replace('</body>', `${scripts}\n</body>`)

// Save the file
const outputPath = `dist/${type}${minified ? '.min' : ''}.html`
const outputPath = type === 'demo' ? 'demo/index.html' : `dist/${type}${minified ? '.min' : ''}.html`

// if no such directory, create it
if (!fs.existsSync(path.dirname(outputPath))) {
fs.mkdirSync(path.dirname(outputPath), { recursive: true })
}

fs.writeFileSync(outputPath, template)
console.log(`Created ${outputPath}`)
}

function cleanup() {
DIST_TYPES.forEach((type) => {
if (type === 'demo') return
;['', '.min'].forEach((suffix) => {
const filePath = `dist/${type}${suffix}.html`
if (fs.existsSync(filePath)) {
Expand Down

0 comments on commit 1bcf0cf

Please sign in to comment.