Skip to content

Commit bcc8c1f

Browse files
codingedgarcodingedgar
committed
add demo #28 
1 parent 5738c91 commit bcc8c1f

File tree

9 files changed

+22798
-92
lines changed

9 files changed

+22798
-92
lines changed

‎demo/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<style>
6+
html {
7+
font-family: sans-serif;
8+
}
9+
10+
span {
11+
user-select: none;
12+
}
13+
14+
.selected span {
15+
font-family: sans-serif;
16+
background-color: #24292F;
17+
color: #fff;
18+
}
19+
</style>
20+
<title>Multi Select</title>
21+
</head>
22+
23+
<body>
24+
<ul id="list">
25+
26+
</ul>
27+
<script src="main.js"></script>
28+
</body>
29+
30+
</html>

‎demo/main.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
2+
import { multiselect, Context } from '../dist/index'
3+
// console.log(index)
4+
let context = {
5+
index: [],
6+
selected: [],
7+
adjacentPivot: undefined
8+
}
9+
10+
let shiftPressed = false;
11+
let controlPressed = false;
12+
13+
/**
14+
*
15+
* @param {Context} command
16+
*/
17+
function update(command) {
18+
context = multiselect(context, command);
19+
20+
context.index.forEach(key => {
21+
const row = document.getElementById(key);
22+
if (context.selected.indexOf(key) !== -1) {
23+
row.classList.add("selected");
24+
} else {
25+
row.classList.remove("selected");
26+
}
27+
})
28+
}
29+
30+
var list = document.getElementById("list");
31+
32+
window.onkeydown = (e => {
33+
if (e.key === "Meta" || e.key === "Control") {
34+
controlPressed = true
35+
}
36+
if (e.key === "Shift") {
37+
shiftPressed = true
38+
}
39+
if(e.key === "ArrowDown") {
40+
update({
41+
type: "SELECT NEXT"
42+
});
43+
}
44+
if(e.key === "ArrowUp") {
45+
update({
46+
type: "SELECT PREVIOUS"
47+
});
48+
}
49+
})
50+
51+
52+
window.onkeyup = (e => {
53+
if (e.key === "Meta" || e.key === "Control") {
54+
controlPressed = false
55+
}
56+
if (e.key === "Shift") {
57+
shiftPressed = false
58+
}
59+
})
60+
61+
for (let index = 0; index < 10; index++) {
62+
var item = document.createElement("li");
63+
item.id = index;
64+
item.onclick = (e) => {
65+
console.log(controlPressed, shiftPressed)
66+
if (controlPressed) {
67+
update({
68+
type: "TOGGLE SELECTION",
69+
id: index.toString()
70+
})
71+
} else if (shiftPressed) {
72+
update({
73+
type: "SELECT ADJACENT",
74+
id: index.toString()
75+
})
76+
} else {
77+
update({
78+
type: "SELECT ONE",
79+
id: index.toString()
80+
})
81+
}
82+
}
83+
const span = document.createElement("span");
84+
span.innerHTML = `Row ${index}`;
85+
item.appendChild(span);
86+
list.appendChild(item);
87+
context.index.push(index.toString());
88+
}

‎package.json

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
11
{
2-
"name": "macos-multi-select",
3-
"version": "0.2.0-rc.1",
4-
"description": "Given an Index, and an Action, return an array of selected keys with the same behaviour of macOS finder list view selection.",
5-
"main": "dist/index.js",
6-
"repository": "git@github.com:codingedgar/macos-multi-select.git",
7-
"author": "codingedgar <codingedgar@gmail.com>",
8-
"license": "MIT",
9-
"scripts": {
10-
"test": "jest",
11-
"test-watch": "jest --watch",
12-
"build": "rm -r dist && tsc",
13-
"prepare": "yarn build"
14-
},
15-
"bugs": {
16-
"url": "https://github.com/davidkpiano/xstate/issues"
17-
},
18-
"devDependencies": {
19-
"@types/jest": "^27.0.0",
20-
"@types/ramda": "types/npm-ramda#dist",
21-
"fast-check": "^2.17.0",
22-
"jest": "^27.0.6",
23-
"ts-jest": "^27.0.4",
24-
"typescript": "^4.3.5"
25-
},
26-
"dependencies": {
27-
"ramda": "^0.27.1"
28-
}
2+
"name": "macos-multi-select",
3+
"version": "0.2.0-rc.1",
4+
"description": "Given an Index, and an Action, return an array of selected keys with the same behaviour of macOS finder list view selection.",
5+
"main": "dist/index.js",
6+
"repository": "git@github.com:codingedgar/macos-multi-select.git",
7+
"author": "codingedgar <codingedgar@gmail.com>",
8+
"license": "MIT",
9+
"scripts": {
10+
"test": "jest",
11+
"test-watch": "jest --watch",
12+
"build": "rm -r dist && tsc",
13+
"prepare": "yarn build",
14+
"demo": "parcel demo/index.html --open -d pages --port 3000 --hmr-port 3001"
15+
},
16+
"bugs": {
17+
"url": "https://github.com/davidkpiano/xstate/issues"
18+
},
19+
"devDependencies": {
20+
"@types/jest": "^27.0.0",
21+
"@types/ramda": "types/npm-ramda#dist",
22+
"fast-check": "^2.17.0",
23+
"jest": "^27.0.6",
24+
"parcel-bundler": "^1.12.5",
25+
"ts-jest": "^27.0.4",
26+
"typescript": "^4.3.5"
27+
},
28+
"dependencies": {
29+
"ramda": "^0.27.1"
30+
}
2931
}

‎pages/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<style>html {
6+
font-family: sans-serif;
7+
}
8+
9+
span {
10+
user-select: none;
11+
}
12+
13+
.selected span {
14+
font-family: sans-serif;
15+
background-color: #24292F;
16+
color: #fff;
17+
}</style>
18+
<title>Multi Select</title>
19+
</head>
20+
21+
<body>
22+
<ul id="list">
23+
24+
</ul>
25+
<script src="/main.1f19ae8e.js"></script>
26+
</body>
27+
28+
</html>

0 commit comments

Comments
 (0)