tablewrap 1.0.4 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env.example +1 -1
- package/.eslintrc.js +0 -0
- package/.github/workflows/ci.yml +42 -0
- package/.nvmrc +1 -0
- package/README.md +38 -36
- package/_build/_js/demo.js +15 -0
- package/_build/_js/tablewrap.js +82 -0
- package/_html/index.html +7 -9
- package/_js/demo.js +0 -0
- package/_js/tablewrap.js +0 -5
- package/package.json +33 -40
- package/postcss.config.js +0 -0
- package/tablewrap.gif +0 -0
- package/vite.config.js +61 -0
- package/.babelrc +0 -15
package/.env.example
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
DOMAIN=http://vielhuber.
|
|
1
|
+
DOMAIN=http://vielhuber.vielhuber.dev
|
package/.eslintrc.js
CHANGED
|
File without changes
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
name: CI
|
|
2
|
+
|
|
3
|
+
env:
|
|
4
|
+
CI: true
|
|
5
|
+
|
|
6
|
+
on:
|
|
7
|
+
push:
|
|
8
|
+
tags:
|
|
9
|
+
- 'v*'
|
|
10
|
+
- '[0-9]*'
|
|
11
|
+
|
|
12
|
+
jobs:
|
|
13
|
+
publish:
|
|
14
|
+
runs-on: ubuntu-latest
|
|
15
|
+
|
|
16
|
+
permissions:
|
|
17
|
+
contents: read
|
|
18
|
+
id-token: write
|
|
19
|
+
|
|
20
|
+
steps:
|
|
21
|
+
- name: Checkout
|
|
22
|
+
uses: actions/checkout@v6
|
|
23
|
+
|
|
24
|
+
- name: Node
|
|
25
|
+
uses: actions/setup-node@v6
|
|
26
|
+
with:
|
|
27
|
+
node-version-file: '.nvmrc'
|
|
28
|
+
registry-url: 'https://registry.npmjs.org'
|
|
29
|
+
package-manager-cache: false
|
|
30
|
+
|
|
31
|
+
- name: NPM
|
|
32
|
+
run: npm install
|
|
33
|
+
|
|
34
|
+
- name: Version
|
|
35
|
+
run: npm version "${GITHUB_REF_NAME#v}" --no-git-tag-version --allow-same-version
|
|
36
|
+
|
|
37
|
+
- name: Build
|
|
38
|
+
run: npm run prod --if-present
|
|
39
|
+
|
|
40
|
+
- name: Publish
|
|
41
|
+
run: npm publish
|
|
42
|
+
|
package/.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
lts/*
|
package/README.md
CHANGED
|
@@ -1,36 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
1
|
+
[](https://github.com/vielhuber/tablewrap/actions)
|
|
2
|
+
|
|
3
|
+
# 🖇 tablewrap 🖇
|
|
4
|
+
|
|
5
|
+
tablewrap is a small javascript helper that wraps your html tables on small viewports column-wise.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## features
|
|
10
|
+
|
|
11
|
+
- no modification of existing css styles needed
|
|
12
|
+
- no extra markup needed
|
|
13
|
+
- performant and lightweight
|
|
14
|
+
- comes as an es6 module
|
|
15
|
+
- cross-browser-support
|
|
16
|
+
- support for preserving the first column
|
|
17
|
+
|
|
18
|
+
## installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install tablewrap
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## usage
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
import Tablewrap from 'tablewrap';
|
|
28
|
+
|
|
29
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
30
|
+
let tablewrap = new Tablewrap({
|
|
31
|
+
selector: 'table',
|
|
32
|
+
breakpoint: 700,
|
|
33
|
+
preserveFirstCol: true
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
tablewrap.destroy();
|
|
37
|
+
});
|
|
38
|
+
```
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_tablewrap = require("./tablewrap.js");
|
|
3
|
+
//#region _js/demo.js
|
|
4
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
5
|
+
new require_tablewrap.default({
|
|
6
|
+
selector: ".basic",
|
|
7
|
+
breakpoint: 500
|
|
8
|
+
});
|
|
9
|
+
new require_tablewrap.default({
|
|
10
|
+
selector: ".advanced",
|
|
11
|
+
breakpoint: 400,
|
|
12
|
+
preserveFirstCol: true
|
|
13
|
+
});
|
|
14
|
+
});
|
|
15
|
+
//#endregion
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
5
|
+
//#region _js/tablewrap.js
|
|
6
|
+
var Tablewrap = class {
|
|
7
|
+
args = {};
|
|
8
|
+
tables = [];
|
|
9
|
+
mediaQuery = null;
|
|
10
|
+
mediaQueryBind = null;
|
|
11
|
+
constructor(args) {
|
|
12
|
+
this.args = args;
|
|
13
|
+
this.buildMobileDom();
|
|
14
|
+
this.addResizeListeners();
|
|
15
|
+
}
|
|
16
|
+
buildMobileDom() {
|
|
17
|
+
if (document.querySelector(this.args.selector) === null) return;
|
|
18
|
+
document.querySelectorAll(this.args.selector).forEach((el) => {
|
|
19
|
+
let cols = el.querySelector("td").parentNode.children.length;
|
|
20
|
+
let mobileTables = [];
|
|
21
|
+
for (let col = 1; col <= cols; col++) {
|
|
22
|
+
if ("preserveFirstCol" in this.args && this.args.preserveFirstCol === true && col === 1) continue;
|
|
23
|
+
let newDiv = el.cloneNode(true);
|
|
24
|
+
let toRemove = [];
|
|
25
|
+
newDiv.querySelectorAll("td").forEach((el2) => {
|
|
26
|
+
if ("preserveFirstCol" in this.args && this.args.preserveFirstCol === true && this.prevAll(el2).length !== 0 && this.prevAll(el2).length + 1 !== col || !("preserveFirstCol" in this.args && this.args.preserveFirstCol === true) && this.prevAll(el2).length + 1 !== col) toRemove.push(el2);
|
|
27
|
+
});
|
|
28
|
+
toRemove.forEach((toRemove__value) => {
|
|
29
|
+
toRemove__value.remove();
|
|
30
|
+
});
|
|
31
|
+
mobileTables.push(newDiv);
|
|
32
|
+
}
|
|
33
|
+
mobileTables = mobileTables.reverse();
|
|
34
|
+
this.tables.push({
|
|
35
|
+
desktop: el,
|
|
36
|
+
mobile: mobileTables
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
addResizeListeners() {
|
|
41
|
+
this.mediaQuery = window.matchMedia("(max-width: " + this.args.breakpoint + "px)");
|
|
42
|
+
this.mediaQueryBind = this.callOnResize.bind(this);
|
|
43
|
+
this.mediaQuery.addListener(this.mediaQueryBind);
|
|
44
|
+
this.callOnResize(this.mediaQuery);
|
|
45
|
+
}
|
|
46
|
+
callOnResize(mediaQuery) {
|
|
47
|
+
if (mediaQuery.matches) this.insertMobileVersion();
|
|
48
|
+
else this.insertDesktopVersion();
|
|
49
|
+
}
|
|
50
|
+
insertMobileVersion() {
|
|
51
|
+
this.tables.forEach((tables__value) => {
|
|
52
|
+
if (tables__value.desktop.parentNode === null) return;
|
|
53
|
+
tables__value.mobile.forEach((mobile__value) => {
|
|
54
|
+
tables__value.desktop.after(mobile__value);
|
|
55
|
+
});
|
|
56
|
+
tables__value.desktop.remove();
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
insertDesktopVersion() {
|
|
60
|
+
this.tables.forEach((tables__value) => {
|
|
61
|
+
if (tables__value.desktop.parentNode !== null) return;
|
|
62
|
+
tables__value.mobile.forEach((mobile__value, mobile__key) => {
|
|
63
|
+
if (mobile__key === 0) mobile__value.after(tables__value.desktop);
|
|
64
|
+
mobile__value.remove();
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
prevAll(elem, filter) {
|
|
69
|
+
let sibs = [];
|
|
70
|
+
while (elem = elem.previousSibling) {
|
|
71
|
+
if (elem.nodeType === 3) continue;
|
|
72
|
+
if (!filter || filter(elem)) sibs.push(elem);
|
|
73
|
+
}
|
|
74
|
+
return sibs;
|
|
75
|
+
}
|
|
76
|
+
destroy() {
|
|
77
|
+
this.insertDesktopVersion();
|
|
78
|
+
this.mediaQuery.removeListener(this.mediaQueryBind);
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
//#endregion
|
|
82
|
+
exports.default = Tablewrap;
|
package/_html/index.html
CHANGED
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="de">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
|
-
<meta
|
|
6
|
-
name="viewport"
|
|
7
|
-
content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1"
|
|
8
|
-
/>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1" />
|
|
9
6
|
<title>tablewrap</title>
|
|
10
|
-
<link
|
|
11
|
-
rel="stylesheet"
|
|
12
|
-
href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"
|
|
13
|
-
/>
|
|
14
7
|
<style>
|
|
8
|
+
* {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
}
|
|
15
13
|
td {
|
|
16
14
|
padding: 10px 5px;
|
|
17
15
|
border: 1px solid #000;
|
package/_js/demo.js
CHANGED
|
File without changes
|
package/_js/tablewrap.js
CHANGED
package/package.json
CHANGED
|
@@ -1,50 +1,43 @@
|
|
|
1
1
|
{
|
|
2
2
|
"scripts": {
|
|
3
|
-
"js:
|
|
4
|
-
"js:
|
|
5
|
-
"js:
|
|
6
|
-
"js": "
|
|
7
|
-
"js
|
|
8
|
-
"
|
|
9
|
-
"html
|
|
10
|
-
"
|
|
11
|
-
"watch:js": "onchange ./_js/*.js ./_js/**/*.js --initial --
|
|
12
|
-
"watch:html": "onchange ./_html/*.html ./_html/**/*.html --initial --
|
|
13
|
-
"
|
|
14
|
-
"dev": "npm-run-all --parallel watch:*
|
|
3
|
+
"js:vite": "vite build --logLevel error --mode dist",
|
|
4
|
+
"js:minify": "terser --compress --mangle --comments false --output ./_public/tablewrap.js ./_public/tablewrap.js",
|
|
5
|
+
"js:package": "vite build --logLevel error --mode package",
|
|
6
|
+
"js:demo:vite": "vite build --logLevel error --mode demo",
|
|
7
|
+
"js": "npm-run-all --sequential js:vite js:minify js:package js:demo:vite",
|
|
8
|
+
"js:dev": "npm-run-all --sequential js:vite js:package js:demo:vite",
|
|
9
|
+
"html": "html-minifier-next --collapse-whitespace --output ./_public/index.html ./_html/index.html",
|
|
10
|
+
"html:dev": "html-minifier-next --output ./_public/index.html ./_html/index.html",
|
|
11
|
+
"watch:js": "onchange ./_js/*.js ./_js/**/*.js --initial --poll 250 --delay 250 --await-write-finish 500 -- onerror \"npm run js:dev --silent\" --title \"watch:js\" --message \"build failed\" --sound mute",
|
|
12
|
+
"watch:html": "onchange ./_html/*.html ./_html/**/*.html --initial --poll 250 --delay 250 --await-write-finish 500 -- onerror \"npm run html:dev --silent\" --title \"watch:html\" --message \"build failed\" --sound mute",
|
|
13
|
+
"prod": "npm-run-all --parallel js html",
|
|
14
|
+
"dev": "npm-run-all --parallel watch:*"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
|
|
21
|
-
"@babel/plugin-transform-runtime": "^7.3.4",
|
|
22
|
-
"@babel/preset-env": "^7.3.4",
|
|
23
|
-
"@babel/runtime": "^7.3.4",
|
|
24
|
-
"babelify": "^10.0.0",
|
|
25
|
-
"browser-sync": "^2.26.3",
|
|
26
|
-
"browserify": "^16.2.3",
|
|
27
|
-
"cli-error-notifier": "^2.1.0",
|
|
28
|
-
"cross-var": "^1.1.0",
|
|
29
|
-
"eslint": "^5.14.1",
|
|
30
|
-
"from-env": "^1.1.2",
|
|
31
|
-
"html-minifier": "^4.0.0",
|
|
32
|
-
"mdn-polyfills": "^5.16.0",
|
|
33
|
-
"node-sass": "^4.11.0",
|
|
17
|
+
"cli-error-notifier": "^3.0.2",
|
|
18
|
+
"eslint": "^10.5.0",
|
|
19
|
+
"html-minifier-next": "^7.0.0",
|
|
34
20
|
"npm-run-all": "^4.1.5",
|
|
35
|
-
"onchange": "^
|
|
36
|
-
"postcss-cli": "^
|
|
37
|
-
"postcss-url": "^
|
|
38
|
-
"
|
|
21
|
+
"onchange": "^7.1.0",
|
|
22
|
+
"postcss-cli": "^11.0.1",
|
|
23
|
+
"postcss-url": "^10.1.4",
|
|
24
|
+
"terser": "^5.48.0",
|
|
25
|
+
"vite": "^8.0.16"
|
|
26
|
+
},
|
|
27
|
+
"overrides": {
|
|
28
|
+
"@babel/core": "^7.29.7",
|
|
29
|
+
"shell-quote": "^1.8.4",
|
|
30
|
+
"uuid": "^11.1.1",
|
|
31
|
+
"ws": "^8.21.0"
|
|
39
32
|
},
|
|
40
33
|
"name": "tablewrap",
|
|
41
|
-
"version": "1.
|
|
34
|
+
"version": "1.1.2",
|
|
42
35
|
"description": "",
|
|
43
|
-
"main": "_js/tablewrap.js",
|
|
36
|
+
"main": "_build/_js/tablewrap.js",
|
|
37
|
+
"repository": {
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "git+ssh://git@github.com/vielhuber/tablewrap.git"
|
|
40
|
+
},
|
|
44
41
|
"author": "",
|
|
45
|
-
"license": "ISC"
|
|
46
|
-
"browserslist": [
|
|
47
|
-
"> 0.25%",
|
|
48
|
-
"not dead"
|
|
49
|
-
]
|
|
42
|
+
"license": "ISC"
|
|
50
43
|
}
|
package/postcss.config.js
CHANGED
|
File without changes
|
package/tablewrap.gif
CHANGED
|
File without changes
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
|
|
3
|
+
export default defineConfig(({ mode }) => {
|
|
4
|
+
if (mode === 'dist') {
|
|
5
|
+
return {
|
|
6
|
+
build: {
|
|
7
|
+
outDir: '_public',
|
|
8
|
+
rollupOptions: {
|
|
9
|
+
input: './_js/tablewrap.js',
|
|
10
|
+
output: {
|
|
11
|
+
format: 'iife',
|
|
12
|
+
entryFileNames: 'tablewrap.js',
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
sourcemap: false,
|
|
16
|
+
minify: false,
|
|
17
|
+
emptyOutDir: false,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
if (mode === 'demo') {
|
|
22
|
+
return {
|
|
23
|
+
build: {
|
|
24
|
+
outDir: '_public',
|
|
25
|
+
rollupOptions: {
|
|
26
|
+
input: './_js/demo.js',
|
|
27
|
+
output: {
|
|
28
|
+
format: 'iife',
|
|
29
|
+
entryFileNames: 'demo.js',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
sourcemap: false,
|
|
33
|
+
minify: false,
|
|
34
|
+
emptyOutDir: false,
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
if (mode === 'package') {
|
|
39
|
+
return {
|
|
40
|
+
build: {
|
|
41
|
+
outDir: '_build/_js',
|
|
42
|
+
lib: {
|
|
43
|
+
entry: {
|
|
44
|
+
tablewrap: './_js/tablewrap.js',
|
|
45
|
+
demo: './_js/demo.js',
|
|
46
|
+
},
|
|
47
|
+
formats: ['cjs'],
|
|
48
|
+
fileName: (format, entryName) => entryName + '.js',
|
|
49
|
+
},
|
|
50
|
+
rollupOptions: {
|
|
51
|
+
output: {
|
|
52
|
+
exports: 'named',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
sourcemap: false,
|
|
56
|
+
minify: false,
|
|
57
|
+
emptyOutDir: false,
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
});
|
package/.babelrc
DELETED