-
Notifications
You must be signed in to change notification settings - Fork 29
/
documentation.html
222 lines (222 loc) · 8.14 KB
/
documentation.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<head>
<title>ListExtender.js</title>
<link rel="stylesheet" href="css/style.css">
<!-- /*
Title: Nunito
Author: Vernon Adams, Cyreal
Date: n.d.
Availability: https://fonts.google.com/specimen/Nunito#standard-styles
*/ -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
<link rel="icon" href="img/icon.png">
<script defer type="text/javascript" src="https://www.julienbl.me/ListExtender/lib/ListExtender.min.js"></script>
</head>
<body>
<nav>
<a href="index.html"><h3>ListExtender.js</h3></a>
<div id="nav-buttons">
<a href="https://github.com/JLambertazzo/ListExtender#readme"><img id='gh' src="img/GitHub-Mark-Light-32px.png" /></a>
<a href="examples.html"><button>Examples</button></a>
<a href="documentation.html"><button>Documentation</button></a>
</div>
</nav>
<div id="documentation">
<h1>Documentation</h1>
<div class="card" id='gettingStarted'>
<h1>Getting Started</h1>
<p>The first step is to download ListExtender.js and import it along with any javascript using ListExtender into your html file.
<br> Make sure you import ListExtender.js before any code that uses it.</p>
<code><script defer type='text/javascript' src='https://julienbl.me/ListExtender/lib/ListExtender.min.js'></script></code>
<p>The next step is to create your ListExtender object.</p>
<code>const myList = new ListExtender()</code>
<p>Finally, append your list to some parent container in the DOM</p>
<code>myList.appendTo('#containerId')</code>
<p>And that's it! You now have a working extending list in your website! <br>
From here you can customize the list however you see fit. A good place to start would be setting the placeholder and input type.</p>
<code>myList.setPlaceholder('Placeholder Text')
<br>myList.setInputType('text')</code>
</div>
<div class="card" id='api'>
<h1>API</h1>
<div id='constructor'>
<h3>Constructor:</h3>
<code>new ListExtender(options)</code>
<p>The ListExtender constructor takes an optional parameter, which is an options object. The properties of the options parameter determine the behaviour of the list.</p>
<p>The options object uses the following properties:</p>
<table>
<tr>
<th>Property</th>
<th>Default Value</th>
<th>Description</th>
</tr>
<tr>
<td>isUnordered</td>
<td>true</td>
<td>Determines whether the list is unordered or not</td>
</tr>
<tr>
<td>allowReorder</td>
<td>true</td>
<td>Determines whether users can drag and drop list items</td>
</tr>
<tr>
<td>showDeleteButton</td>
<td>false</td>
<td>Determines whether the delete button shows on the list</td>
</tr>
</table>
<p>All properties are optional and if not included will be replaced with the default value.</p>
</div>
<div id='variables'>
<h3>Variables:</h3>
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>element</td>
<td>The ul/ol element displayed in the DOM</td>
</tr>
<tr>
<td>maxSize</td>
<td>The maximum number of entries in the list</td>
</tr>
<tr>
<td>listSize</td>
<td>The number of elements in the list</td>
</tr>
<tr>
<td>Various styles..</td>
<td>See styles tables below, use these to style your list!</td>
</tr>
<tr>
<td>delBtnThemes</td>
<td>Built-in themes for the delete button</td>
</tr>
</table>
</div>
<div id='functions'>
<h3>Methods:</h3>
<div class="table">
<table>
<tr>
<th>Method Name</th>
<th>Params</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td>setInputType(type)</td>
<td>type: string<br/>Accepts following values:<br>'text'<br>'email'<br>'password'<br>'date'<br>'month'<br>'number'<br>'time'<br>'url'<br>'week'</td>
<td>none</td>
<td>Sets the input type of list elements</td>
</tr>
<tr>
<td>setPlaceholder(placeholder)</td>
<td>placeholder: string</td>
<td>none</td>
<td>Sets the input field placeholder for list elements</td>
</tr>
<tr>
<td>setMinLength(minLength)</td>
<td>minLength: number</td>
<td>none</td>
<td>Sets the input field minimum length for list elements</td>
</tr>
<tr>
<td>setMaxLength(maxLength)</td>
<td>maxLength: number</td>
<td>none</td>
<td>Sets the input field maximum length for list elements</td>
</tr>
<tr>
<td>setId(id)</td>
<td>id: string</td>
<td>none</td>
<td>Sets the id of the list object</td>
</tr>
<tr>
<td>addClasses(classList)</td>
<td>classList: array[string]</td>
<td>none</td>
<td>Applies the given classes to the list object</td>
</tr>
<tr>
<td>removeClasses(classList)</td>
<td>classList: array[string]</td>
<td>none</td>
<td>Removes the given classes from the list object</td>
</tr>
<tr>
<td>addListItem()</td>
<td>none</td>
<td>none</td>
<td>Adds a new item to the list</td>
</tr>
<tr>
<td>addValidation(callback, errorMessage)</td>
<td>callback: function(value: string), errorMessage: string<br/>errorMessage is optional, callback function will be passed a string</td>
<td>none</td>
<td>Adds a validation function to the list object. When validating, if function returns true validation will pass, else validation fails</td>
</tr>
<tr>
<td>addFromArray(data)</td>
<td>data: array[string]</td>
<td>none</td>
<td>Appends elements in data to the list</td>
</tr>
<tr>
<td>appendTo(query)</td>
<td>query: string<br/>A selector for querySelector</td>
<td>none</td>
<td>Appends the list to the element matching query</td>
</tr>
<tr>
<td>addBefore(query)</td>
<td>query: string<br/>A selector for querySelector</td>
<td>none</td>
<td>Places the list before the element matching query</td>
</tr>
<tr>
<td>addAfter(query)</td>
<td>query: string<br/>A selector for querySelector</td>
<td>none</td>
<td>Places the list after the element matching query</td>
</tr>
<tr>
<td>getData()</td>
<td>none</td>
<td>array[string]</td>
<td>Returns all validated entries in the list</td>
</tr>
<tr>
<td>getAllData()</td>
<td>none</td>
<td>array[string]</td>
<td>Returns all entries in the list</td>
</tr>
<tr>
<td>setTheme(theme)</td>
<td>theme: object<br/>A theme object (see variables above)</td>
<td>none</td>
<td>Sets the theme of the list to the given theme object</td>
</tr>
<tr>
<td>setDelBtnTheme(delBtnTheme)</td>
<td>delBtnTheme: object<br/>A theme object for delete buttons. See below for instructions on theming</td>
<td>none</td>
<td>Sets the theme of the delete buttons in the list</td>
</tr>
</table>
</div>
</div>
</div>
<div class="card" id='themes'>
<h1>Theme Specifications</h1>
<h2>Coming soon...</h2>
</div>
</div>
</body>
</html>