-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (119 loc) · 4.08 KB
/
index.html
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<!--dereck@22 06/10/22-->
<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>sortJs</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header>
<a href="#"><h1>SortJs</h1></a>
<nav>
<ul>
<li>
<a href="#desc">description</a>
</li>
<li>
<a href="#usage">usage</a>
</li>
<li>
<a href="#demo">demo</a>
</li>
<li>
<a href="#view">view</a>
</li>
</ul>
</nav>
</header>
<main>
<section>
<a href="#desc"><h2 id="desc">Description</h2></a>
<div>
<p>
SortJs est une mini librairie vous permettant de faire un trie
basique en manipulant le DOM et en exploitant la puissance du data-*
attribute.
</p>
<p>
L'idée de l'écrire m'est venu lorsque j'étais confronté à faire un
trie lors de l'intégration d'une maquette statique en bootcamp et
qu'il fallait importer un plugin qui étant "lourd" ne nous étais pas
bénéfique en matière de perfomance, j'espère qu'il sera utile et
qu'il se paufinera au fil du temps :)
</p>
</div>
</section>
<section>
<a href="#usage"><h2 id="usage">Comment utiliser?</h2></a>
<div>
<h3>1. Copier le cdn ou le code</h3>
<p class="code">
export function sort(t,l){t.forEach(t=>{t.onclick=()=>{let
a=t.dataset.role;setTimeout(()=>{for(let t of
l){t.style.display="initial";t.dataset.list.match(a)||(t.style.display="none")}},500)}})}
</p>
</div>
<div>
<h3>2. Ajoutez-le à votre site web</h3>
<p>
selon la méthode choisie, vous pouvez l'ajouter de plusieurs façon:
</p>
</div>
<div>
<h3>3. Appliquez-le à votre code</h3>
<ol>
<li>
Ajoutez un attribut <code>data-role</code> à votre bouton de trie
et donnez lui une valeur;
</li>
<li>
Ajoutez un attribut <code>data-list</code> et comme valeur la
valeur du <code>data-role</code> définis à tout les éléments qui
seront révélé au clic sur le bouton trie;
</li>
</ol>
</div>
</section>
<section>
<a href="#demo"><h2 id="demo">Demo</h2></a>
<div>
<script src="https://gist.github.com/dereck22dev/316acb29e79fb473ee6df293b5ed5e77.js"></script>
</div>
</section>
<section>
<a href="#view"><h2 id="view">Résultat</h2></a>
<ul>
<li class="componentsButton" data-role="all">ALL</li>
<li class="componentsButton" data-role="fish">FISH</li>
<li class="componentsButton" data-role="meat">MEAT</li>
<li class="componentsButton" data-role="vegan">VEGAN</li>
</ul>
<div class="componentsContainer">
<div class="component" data-list="all vegan">vegan</div>
<div class="component" data-list="all fish">fish</div>
<div class="component" data-list="all meat">meat</div>
<div class="component" data-list="all fish">fish</div>
<div class="component" data-list="all vegan">vegan</div>
<div class="component" data-list="all meat">meat</div>
<div class="component" data-list="all vegan">vegan</div>
<div class="component" data-list="all fish">fish</div>
<div class="component" data-list="all vegan">vegan</div>
</div>
</section>
</main>
<footer>
<p>
@copyright <span id="year"></span>
<a href="http://github.com/dereck22dev">Dereck22</a>
</p>
</footer>
<script
src="./js/index.js"
crossorigin="use-credentials"
type="module"
></script>
</body>
</html>